Notes from 50th International STC Conference
Dallas, Texas, May 18-21, 2003

Beyond Buttons and Colors: Web Application Design Issues

Whitney Quesenbery
Whitney Interactive Design

Whitney Quesenbery, with Whitney Interactive Design, is a senior leader of STC's Usability SIG.

Session Description: This workshop guided participants through some of the critical design issues in creating Web applications. The ideas clarified ways of thinking and design processes for both user interface and help design.

• What are the issues and challenges in working with Web applications?
• What is a Web application?
   
• A Web page with a form?
• Any application that runs in a browser?
• Any application that connects over the Internet
• An application written in .java, .net, or other languages
• Issue 1: Different purposes
   
• Applications are focused on "doing something"
• Web pages are focused on providing information.
• Issue 2: Different technical architecture
   
• WinApps run on a local computer
• WebApps run on a server
• Issue 3: Different building blocks
   
• WinApps have a rich set of controls
• WebApps have a limited set of controls
• Issue 4: Different interaction styles
   
• WinApps allow flexible interaction
• WebApps allow limited interaction
• Issue 5: Where do we put the Help?
   
• WinApps have relatively mature documentation tools
• WebApps have a mix of tools and approaches
• How can we make this a positive change?
   
• Better control over fonts and colors
• Better integration of graphics
• Better ability to mix
• A chance to rethink... just a little bit
• Lots of opportunities!
• The design vocabulary: How do we use different design elements to meet user needs?
• Design elements serve different purposes
   
• Navigation
• Forms controls
• Data display
• Information
• Design elements for navigation
   
• Links and buttons
• Tabs
• Lists and expanding lists (cascading menus)
• Drop-downs
• Tables
• Links and buttons
   
• Links are for navigation: "show me more information" (advantages: allow more words to be used, visually lightweight, can point to specific data)
• Buttons are for action: "Do something": calculate, apply, refresh (advantages: visually distinctive, can include graphic elements)
• Tabs divide content into groups
   
• Tabs are a convenient way to divide content into more than one page for display
• Tabs are now a "standard" Web navigation metaphor
• Drop-downs can be navigation tools
   
• They collapse choices into a small area on the screen
• But: choices are not viable, you lose information design opportunities, and they add to the "work" of using an application
• Tables: navigation, data displays, or both
• Forms controls: drop-downs, radio buttons, check boxes, type-in boxes, hyperlinks
• Choosing drop-downs and radio buttons
   
• Drop-downs show only final choice; they handle a longer list of items, but they require more effort to use. Note: Screen readers tend to have problems with drop-downs; "reading" it triggers the first item and takes the reader there, so he/she can never read the rest of the items in the menu.
• Radio buttons shows all choices, but it's harder to see which one is selected; they're good for short lists, because a single action is required to use it
• Using radio buttons and check boxes
   
• Both radio buttons and check boxes are good ways to show all of the alternatives on the screen.
• Longer explanations can be included with the options
• Not all users understand the difference between a radio button (pick one) and check boxes (pick zero, one, or more than one)
• Good information design for tables
   
• Alternate row colors help separate long rows of data
• Horizontal lines help the eye track from left to right
• Color, bolding, or other visual devices help make critical information jump out of the page
• And, the words...
   
• Labels
• Prompts
• Informational text
• Instructional text
• Content text
• Designing for use: what do we need to consider to understand the new context of a Web application?
• What do we know about the use?
   
• How often is the application used?
• How much domain knowledge is needed?
• What do we know about the application context?
   
• What is the primary interaction in the application?
• Does the application include a simple text, a complex task, or a mix?
• Does the application include simple information or large and complex data?
• Different aspects of user expectations
   
• Relationship between user and application
• Style and tone of the conversation
• Presentation style
• Interaction style
• Expectations for interface standards
• Frequency of use
• Perceived distance
• Relationship between user and application
   
• No ongoing relationship, no log-in: calculator
• Prior history, remembers me: e-commerce
• Mission-critical work: online banking
• Is this application required for users?
• Do users have to identify themselves?
• Does the app remember prior use?
• Is there a need for reliability?
• Interaction style
   
• No relationship: text information, links
• Data presentation and complex controls
• Style and tone of conversation: informal/casual, polite but friendly, formal
• Presentation style: fun, cool, graphic; informational but attractive; subdued, serious
• Interaction style: text to simple data to more complex data
• Expectation for interface standards: consistency within the site/application (game) vs. strong PC or Mac platform standards (online banking)
• Frequency of use: occasional, erratic; episodic, periodic; constant, daily
• Perceived distance: far-away server; can't tell/don't care; nearby, onsite, local
• Different kinds of Web applications
   
• Reports-oriented work: information presentation, data manipulation, actions often separate. Example: physician access to test reports
• Work desktops: Embodies an entire task, is often mission-critical, and involves long session. Example: mortgage broker application
• E-commerce: Browsing-focused, casual until purchase, stored information is convenient, not critical. Example: e-commerce site
• Home applications: Targeted task, simple interaction style, persistent data, short sessions. Example: online banking.
• Form 7 continuums, from left to right, for the following:
   
• Relationships (no user ID to tightly controlled access)
• Interaction style (text links to simple data to complex data)
• Style of conversation (informal to formal)
• Style of presentation (whiz bang to subdued)
• Expectation for standards (intrasite/application standards vs. platform standards)
• Frequency of use (occasional to constant)
• Perceived distance (remote to local)
• The idea, then, is to plot your Web site or application per these 7 continuums, to see how it falls.
   
• Reports-oriented work tends to come down the middle, slightly to left
• Work "desktops" run down the right side
• E-commerce runs down the left side
• Home applications tend to come down the middle, slightly to right