1. IS4300: Human-Computer Interaction
Web Interface Design
Martin Schedlbauer, Ph.D.

2. Resources & References
The content and discussion of this lesson are based on the following resources:
Scott, B., Neil, T. (2009). Designing Web Interfaces: Principles and Patterns for Rich Interactions. O’Reilly Media.
Also from:
IS HCI
Web Interface Design

3. Usability Best Practices
Web Interface Design
Usability Best Practices
IS HCI
Web Interface Design

4. Usability Best Practices
These best practices are based on Nielsen’s Usability Heuristics:
Visibility of system status (Feedback)
Match between system and real world (Metaphor)
User control and freedom (Navigation)
Help and documentation (Help)
IS HCI
Web Interface Design

5. Web Development These practices apply to:
Web sites developed with XHTML and CSS
Rich Internet Applications (RIA) developed with Adobe Flex, Microsoft Silverlight, and JavaScript/AJAX
IS HCI
Web Interface Design

6. Feedback Inform the user of what’s going on:
Show appropriate feedback and progress
Do not show blank screens
Do not show static “load” or progress messages
IS HCI
Web Interface Design

7. Feedback: Examples
BaseCamp by 37signals The upload button is enabled, until clicked. Then it is replaced with a progress indicator until the file has finished uploading
Picnik  Progress message and indicator shows while the application loads
IS HCI
Web Interface Design

8. Feedback: Examples
Microsoft Live Password strength is shown as the password is entered. Colors are used to augment the message. Notice the use of green.
Mint.com Feedback is displayed as soon as an action is performed
Tick  A feedback message is displayed when an action is performed
IS HCI
Web Interface Design

9. Metaphor
There must be a match between the system’s interface controls and the real world.
The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms.
Follow real-world conventions, making information appear in a natural and logical order.
IS HCI
Web Interface Design

10. Metaphor: Examples
Mindomo The branches and hierarchy of a mind map can be easily reorganized visually in a non-linear manner. An outline would never work, but this matches the paradigm exactly.
iTunes Organized as a library that contains your media library: music, movies, TV shows, audiobooks. Beneath the Library is the Store where you can buy more media to put in your Library.
IS HCI
Web Interface Design

11. Navigation
Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialog.
Support undo and redo and a clear way to navigate.
Provide bread crumbs and clearly show where the user is.
IS HCI
Web Interface Design

12. Navigation: Examples
Wufoo Clearly marks where the person is and where they can go by showing the selection in each menu
CollabFinder Search is easy to open, enter info, execute or cancel.
IS HCI
Web Interface Design

13. Navigation: Examples
Pages by Apple Cell editing shows row and column ids, and the cells used in the equation. The equation can be saved or canceled.
Balsamiq  Undo and Redo buttons are available in the toolbar, and can also be accessed with the standard keyboard shortcuts
IS HCI
Web Interface Design

14. Consistency
Users should not have to wonder whether different words, situations, or actions mean the same thing.
Follow platform conventions.
IS HCI
Web Interface Design

15. Consistency: Examples
Gmail When Gmail was designed, they based the organizational folders on the same ones used in client applications: Inbox, Drafts, Sent Mail.
Microsoft Office Word, Excel, and PowerPoint all use the same style toolbar with the same primary menu options: Home, Insert, Page Layout… Consistency results in efficiency and perceived intuitiveness
IS HCI
Web Interface Design

16. Prevention
Even better than good error messages is a careful design, which prevents a problem from occurring in the first place.
IS HCI
Web Interface Design

17. Prevention: Examples
Yammer Disables the update button after it is clicked, so the person cannot update the post twice by accident
Example from “Web form Design:Filling in the Blanks” by Luke W. Make the primary action prominent with a larger click area. Cancel and secondary actions are just shown as links
IS HCI
Web Interface Design

18. Prevention: Examples
Wikpedia Auto focus on input prevents a common source of frustration, typing only to realize nothing is displayed because the field did not have focus
Google Auto Recommend The auto recommend feature cuts down on mis-spellings
IS HCI
Web Interface Design

19. Memory Minimize the user’s memory load.
Make objects, actions, and options visible.
The user should not have to remember information from one part of the dialogue to another.
Instructions for use of the system should be visible or easily retrievable whenever appropriate.
IS HCI
Web Interface Design

20. Memory: Examples
Quanta IDE Type ahead for coding in a development environment
Keynote Previews the fonts you can pick from, instead of just the font name
IS HCI
Web Interface Design

21. Efficiency
Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users.
Allow users to tailor frequent actions.
IS HCI
Web Interface Design

22. Efficiency: Examples
OmniFocus List of keyboard shortcuts and accelerators
Numbers by Apple Previews common function results on the left when a column is selected, more efficient that clicking on an action in the toolbar
IS HCI
Web Interface Design

23. Aesthetics Follow a mantra of aesthetic and minimalist designs.
Dialogs should not contain information, which is irrelevant or rarely needed.
Every extra unit of information in a dialog competes with the relevant units of information and diminishes their relative visibility.
Visual layout should respect the principles of contrast, repetition, alignment, and proximity.
IS HCI
Web Interface Design

24. Aesthetics: Example
Kontain Kontain’s search menu exemplifies the four principles of visual design:
Contrast: bold text is used for the two labels in the search
Repetition: the orange, blue, and green text match the media types
Alignment : strong left alignment of text, right aligned drop down
Proximity: a light rule is used to separate tags from the other options
IS HCI
Web Interface Design

25. Aesthetics: Example
Harvest Sufficient padding and spacing keep this timesheet from being a visual nightmare. Header and footer rows, as well as the summary column use subtly different colors to indicate they are distinct from the content
IS HCI
Web Interface Design

26. Recovery Help users recognize, diagnose, and recover from errors.
Error messages should be expressed in plain language (no jargon), precisely indicate the problem, and constructively suggest a solution.
IS HCI
Web Interface Design

27. Recovery: Examples
Digg  Provides immediate feedback with specific instructions
Humorous ‘ Page Not Found’ Error Uses a funny image and copy, but provides viable alternatives (article listings and blog link) and a course of action (report it)
IS HCI
Web Interface Design

28. Help
Even though it is better if the web application can be used without documentation, it may be necessary to provide help and documentation.
Any such information should be contextual, easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.
IS HCI
Web Interface Design

29. Help: Examples
Picnik Contextual help (this is an example of help in the ‘Collages’ module) tips in Picnik are clear and easy to navigate
GoodBarry Embedded videos can be used to showcase features as well as get people started using the product
IS HCI
Web Interface Design

30. Help: Examples
Zenoss Help tips are displayed on hover, answering the most likely questions about a field or instructions
BaseCamp by 37signals Help opens a new browser window/tab with a full set of help resources: search, FAQ, video tutorials, customer forums
IS HCI
Web Interface Design

31. Sharing
Allow user to share their experience with others through social media outlets:
Twitter
Facebook
Flickr, Digg, etc.
Add easy to use toolbars and share buttons.
Allow comments and feedback.
Build a user community.
IS HCI
Web Interface Design

32. Sharing: Examples
IS HCI
Web Interface Design

33. Taking Are screens printable or are there printable versions?
Is there an ability to create summaries or reports of key information?
Are these reports or printable screens in known standard formats, useful, and easily archived or shared with co-workers?
Can key information be passed easily into other software tools either manually or automatically and/or ed?
IS HCI
Web Interface Design

34. Layout Is the screen real estate user task prioritized?
The use of screen real estate in web-delivered applications is usually divided between branding and UI elements, controls and navigation, status reporting and help, and core user tasks.
The primary real estate areas tend to the top and left of the screen.
IS HCI
Web Interface Design

35. Task Flow
Does the application architecture, navigation, controls, tasks and procedures resonate in general with users’ normal taskflows and workflows, or does the application introduce unusual or foreign flows?
It is understood that all applications will introduce a certain amount of new task and work flows. (note: Workflow here is used to indicate where multiple users work together on a task through the application. Taskflow indicates individual activities)
IS HCI
Web Interface Design

36. Learning from the Best Great Web apps: Great Flex apps:
Great Flex apps:
Great RIA apps:
IS HCI
Web Interface Design

37. Summary, Review, & Questions…
IS HCI
Web Interface Design