doteduguru

TPR / 10:45am / Tuesday
Alex Kingman, Purdue University

Another great presentation from one of the guys from Purdue.  (Aside …last year was my first year at HighEdWeb — and I was the only one from my school;  the group from Purdue took me into their group and we hung out the entire conference. It was great to reconnect with them this year and catch up on what we’ve all been working on!)

User Expectation

• users see how the web is working - and how things are getting easier and faster
• this makes them expect that from us too
• predictive technology — we start typing, and auto complete mechanisms help us find what we need
• google — start typing — and results start showing up.  Gimicky?  Maybe … but cool… and it makes it faster.
• Are users expectations changing so fast — that they’re going to go to yahoo — type in a question and NOT click submit because now on google — you don’t have to click submit??

Development Expectations greater than or equal to User Expectations

• many times forms are an afterthought — we think we just need to get the data.
• forms let users tell us what they think or how they feel
• caveman comes across something new… what does he do with it?  He pokes and prods to find out whats going to happen when he interacts with it?  Is it going to bite me?  Run off with his cavewoman??
• Mixable - mimics the Facebook link posting functionality (post a video link … and it knows and turns it into a thumbnail, video title, excerpt, etc) — users are used to this.

The Navigator

• give the user a CLEAR PATH to completion of your form
• think about splitting up large forms into multiple pages — group it logically;
• progress indicators - for multipage forms -
  • how does the user know where they are in the process, how much further they have to go. Take away the fear of a daunting form.
  • allow the user to move backwards in the process

The Lifeguard

• help a brother out
• prevent them from making mistakes … help them fix the errors
• help and tips:  asking for unfamiliar data, recommended ways of providing data (phone numbers, links, image size)
• be careful though — don’t overdo it!
• Try to have the help/tips be unobtrusive.  The user can view it if they want … but it doesn’t display by default.

The Mentor

• display prominent and helpful errors
• It should be REALLY obvious what has gone wrong and what the user needs to fix.

It’s all about the MARKUP.

• use a css reset …
  • use a css reset …
  • use a css reset … (like meyers)
  • seriously … if you haven’t been using this as step one in your stylesheets … you don’t know what you’ve been missing!  You get a fabulous baseline for ALL browsers.
• use all the form elements available to you
  • visually this is good — and for accessibility (i.e. screen readers) this is so important
  • fieldset
  • legend
  • label (associate it with the ID of the input … not the name)
    • <label for=username>User Name</label>
    • <input type=text name=username id=username>
  • button
• label alignment
  • TOP ALIGNED
    • Pros: good for familiar data, minimizes time to completion, flexibility for localization and complex inputs
    • Cons: requires more vertical space
  • LEFT ALIGNED
    • Pros: good for when required data is unfamiliar
    • Cons: less space required

The forward-thinker

• HTML5 input types
  • 13 new input types!!  Awesomeness.
    • search, url, tel, email, number, range, color, datetime, date, month, week, time, datetime-local
  • iphone has context-aware keyboards….
    • what this does is tell the iphone to get the right keyboard!  It pulls the number keyboard for tel, number, etc — .com and / buttons for url, email, etc.
  • context-aware widgets
    • get a slider for range
    • search - auto clearing button
    • week - gets dropdown menu with a month!
  • Opera
    • Integrated client validation
    • browser validates email natively … its not javascript.
    • validating URLS
    • REQUIRED fields … built in native support in opera!!
    • give a regular expression to say what the data should be
  • placeholder - (replaces need for the unclear javascript in search boxes!)
  • autofocus - automatically focus on a field
  • DON’T WORRY ABOUT browsers that don’t recognize HTML5
    • they’ll just treat them as type=text
    • unknown attributes will be ignored
    • DETECT for support … smoke em if you got em
      • javascript to the rescue once again
      • code.google.com/

Mobile Forms

Two interesting quotes:

• Designing for mobile is hard (Jakob Nielsen)
• The rule of thumbs is to limit the use of forms in the mobile intact (Mobile Web Design and Dev book from O’Reilly in 2009!)

Um … what??  You HAVE to develop for mobile users!!

• More than 150million users are accessing Facebook through their phones.  What is Facebook?  its a bunch of forms.
• Twitter - 46% of users make mobile a regular part of their experience.  Twitter … small forms.

• mobile - top aligning labels works better
• geolocation — see how you could use this to help users fill out forms.
• eliminate typing when possible…

Mr. Personality

• make your form NOT A FORM
• make it fun
• don’t just create forms … create experiences!

purdue.edu/studio - look at all the projects Alex and his team are working on!