Standardizing Web User Interfaces

MinneWebCon 2009

Zachary Johnson

University of Minnesota

Three Goals

• Share some examples of ways common web user interfaces (UI) can be standardized
• Discuss how user interface standardization benefits users and developers
• Raise awareness and support for web user interface guidelines

A Problem

• Currently, web user interfaces are not standardized and often do not function consistent with user expectations
  

What is "standardized" web UI?

• I do not mean every web UI should have the same graphic design
  
• (Just be consistent on your own site)

I mean Standardized Functionality

• How the user interacts with UI to complete a task
• How the UI reacts to the user's interactions and provides feedback

  Form Incomplete: Please enter your name.

  Name: Call me, call me anytime.

  There was an error.

  Name: Call me, call me anytime.

I mean Standardized Functionality

• How the user interacts with UI to complete a task
• How the UI reacts to the user's interactions and provides feedback
  

Why is this a problem?

• It's a problem for users
• It's a problem for developers
• It's a problem for you

It's a problem for users

• Inconsistent UI is hard for users to figure out

  “you should reward [the user's] attention by ensuring that controls and features work as [they] have learned to expect. If you use the same control to perform different actions, you make it impossible for users to apply what they've learned … and predict the outcome”

  -iPhone Human Interface Guidelines for Web Applications

It's a problem for users

• Users struggle with UI that doesn't match their expectations
  

It's a problem for users

• Usability and Accessibility
  • No label means user can't interact by clicking text
  • No label means screen reader user doesn't know what they are signing up for

  <input type="checkbox" name="signup" value="yes" /> I'd like to receive the newsletter.

  I'd like to receive the newsletter.

  <input type="checkbox" name="signup" id="signup" value="yes" /> <label for="signup">I'd like to receive the newsletter.</label>

  I'd like to receive the newsletter.

It's a problem for developers

• Slower applications, slower development time without shared resources and libraries
• More time keeping up with ever increasing expectations, less time innovating
• It is too expensive to compete without standards
  

A Solution

• If only we had some sort of guide to help developers make consistent user interfaces… some sort of Human Interface Guidelines (HIG)

Human Interface Guidelines (HIG)

• Shannon Lucas of Groups.Drupal:

  “The purpose of a HIG is to provide developers with a set of recommendations on developing user interfaces. It aims to ease user experience by providing consistency across a system and to ease the burden of the developer when building the interface. …it provides a set of recommended best practices for exposing functionality to the end user. Developers should realize that these are not hard rules and that, from time to time, it may be necessary to break these guidelines.”

Human Interface Guidelines (HIG)

• Guide developers towards building awesome interfaces
• Cover UI patterns for common tasks
• Examples of the right way (Offer solutions)
• Examples of the wrong way (Identify problems)
• Living document
• Guidelines, not rules
• Know your audience

What Should a Web HIG Include?

• Guidelines for common web user interface elements
  • Default Form Controls (Check box, text input)
  • Developer Built / JavaScript Controls (Tabs, date pickers)
• Guidelines for common web tasks
  • Logging in
  • Entering contact info
  • Paging through content

Default Form Controls

• Check boxes, radio buttons, text inputs, etc. need standardization
• They may look similar, but…
  • They don't always function consistently
  • They aren't always used by developers consistently
• Recall our checkbox example
  • Guideline: Always use <label> tags
• Developers need guidance on how to best use these controls

The Phone Number Field Example

• Problem: Some JavaScript prevents users from interacting with UI in the way they expect

Radio Buttons the Wrong Way

• Problem: Duplicate label text bad for screen readers

  Rate our coffee:

  Poor Average Great
  <p>Rate our coffee</p>

<input type="radio" name="ratec" id="ratec1" value="1" /> <label for="ratec1">Poor</label>

<input type="radio" name="ratec" id="ratec2" value="2" /> <label for="ratec2">Average</label>

...

Radio Buttons the Wrong Way

• Problem: Duplicate label text bad for screen readers

  Rate our coffee:

  Poor Average Great

  Rate our beer:

  Poor Average Great

  Rate our food:

  Poor Average Great

Radio Buttons the Right Way

• Guideline: Use <fieldset> and <legend> for radio buttons
  Rate our coffee:

  Poor Average Great
  <fieldset>
<legend>Rate our coffee:</legend>

<input type="radio" name="ratec" id="ratec1" value="1" /> <label for="ratec1">Poor</label>

...

</fieldset>

Form Validation the Right Way

• Guideline: Provide a list of invalid or incomplete fields and also mark the fields themselves

  The form is incomplete:

  • Enter your email.

  Name:
  

  Email: Enter your email.
  

Form Validation the Right Way

• It is a lot easier for the user to remember which fields are invalid and how to fix the errors if the fields are also marked

  The form is incomplete:

  • Enter your email address.
  • Please shorten your essay to 500 words or less.
  ...
  • Error number 39. Good luck remembering this one.

Form Validation the Right Way

• Make sure to mark the invalid fields in an accessible way.
  • Just making fields red doesn't do a whole lot of good for somebody who can't see

    Email:
    

  • Guideline: Place text inside of the invalid field's <label> tag

    Email: Enter your email.
    

    <label for="email" class="invalid">Email: <span>Enter your email.</span></label>
<input type="text" name="email" id="email" />

Developer Built Controls

• Tab controls, date pickers, rich text editors, etc. need standardization
• UI functionality entirely up to the developer
• Recall our Yahoo User Interface Library (YUI) rich text editor example
• Developers need guidance:
  • How these should function
  • When/where to use them

How should a Tab Control Function?

• Problem: Many tab controllers do not offer direct URLs to tabbed content
  • YUI and jQuery UI tab controllers both need patching (Demonstration)

How should a Tab Control Function?

• Single URL for all tabs kills word of mouth advertising
• Single URL for all tabs makes "naked" URL worthless
• Single URL for all tabs makes baby Tim Berners-Lee cry
• (No, that's not really a photo of Sir Tim Berners-Lee)

How should a Tab Control Function?

• Guideline: Always provide "permalinks" to content
• User should not have to take action to locate content
• You can control tabs with JavaScript and provide direct URLs
  • http://www.example.com/something/page.html#title_of_tab2
  • JavaScript set/parse: location.hash

When should I use a Date Picker?

• Problem: jQuery UI documentation doesn't provide guidelines for when to use (and not to use) their fantastic date picker widget
  
  …neither does YUI

When should I use a Date Picker?

• Guideline: Provide a date picker widget when the user must supply a recent or near future date, especially where the day of week reference may be helpful
  • Date of event
  • Date of last appointment
  

When should I use a Date Picker?

• Guideline: Provide a date picker widget when some dates or days of the week are invalid values
  • Prevent user from suppling bad value in the first place
  

When should I use a Date Picker?

• Guideline: Date picker widget potentially frustrating for dates in distant past, especially where day of week is irrelevant
  • Birthdays
  

User Tasks

• Logging in, entering contact info, paging through content, etc. need standardization
• Developers need guidance on how to build user interfaces for these tasks

How to make UI for Pagination

• Easy: don't do it like Twitter!
  

How to make UI for Pagination

How Not to make UI for Pagination

How Not to make UI for Pagination

How Not to make UI for Pagination

How to make UI for Pagination

• Guideline: When providing a user interface for content pagination, always provide a previous page link, a next page link, and links to the specific pages by number
• Guideline: Always provide "permalinks" to each page of content

How to fetch content with AJAX

• Guideline: If there is an error when fetching content with AJAX, always provide an easy way to try to reach the content again
  • Twitter could have let user click More button again

Who should have a web HIG?

• Google, Yahoo, any company with many web products
  • Company-wide web UI guidelines
  • Keep their many web products consistent for customers
• Universities
  • University-wide web UI guidelines
  • Keep their many web pages consistent for students, staff, faculty
• jQuery UI, YUI, Drupal, other libraries and open source projects
  • Guidelines for developers and contributors
  • Maintain consistency across modules and their use

Universities in perfect position

• Departments share goals and share users
• Easy to collaborate, share resources and solutions
  <?php require('ContactForm.php'); ?>

<script src="http://static.umn.edu/jquery.js" type="text/javascript"></script>
• Single login

Ensure best use of jQuery UI, YUI

• Aren't necessarily consistent with user expectations
  • Rich text editor
• Don't necessarily use all best practices
  • Tab controllers
• Don't necessarily tell developer when/where to use their widgets
  • Date pickers
• Potentially thousands of sites inherit imperfect UI
  • Good news is they can all be fixed in one fell swoop

How can we make a web HIG?

• Let's all get together and make one!
  • Open source project members
  • Teammates at corporations
  • Staff at Universities
  • Why not even the W3C?
• Let's do it so…
  • we use UI libraries in the best ways
  • we can recognize when a library needs patching
  • we can build new UI elements in the best way
  • we provide a better experience for our users
  • we become more efficient
  • we aren't at the mercy of Google

How can we make a web HIG?

• Plenty of other things standardized on the Web:
  • Chicago, AP, MLA standardize English language
  • Organizational design/marketing style guides standardize use of logos/color
  • W3C standardizes code (Markup, CSS)
  • Web Content Accessibility Guidelines (WCAG) from W3C
• Add Web Human Interface Guidelines (HIG) to the list

Resources for Starting a HIG

• Desktop Software HIGs from Apple and Microsoft
• iPhone app and web app HIG from Apple
• OS X Dashboard widget HIG from Apple
• Yahoo Design Patterns
• Shannon Lucas called for Drupal HIG in September 2008
• Links to these on my blog:
  
  http://a.stronaut.com/z5

If we don't do it, somebody else will…

• Expectations being set constantly, bar always being raised
  • Deliver the same functionality as Google or get left behind
• Are we on a road towards fragmented standards coming down from browser vendors instead of unified standards coming up from developers?
  • Is Google testing these waters with Chrome?

What if…

• Google decided to introduce:
  • Google Tab Controller, Google Date Picker, Google Rich Text Editor, etc.
  • Built into Chrome's JavaScript API, no download needed
  • Runs twice as fast as jQuery UI
• Or what if Microsoft does this with Internet Explorer?
• Could they create de-facto standards?
• Would their UI be usable? Accessible? Would developers know the difference?

The End

• Thank you!
• Questions?
• All feedback welcome: Twitter @zacharyjohnson