Web Page Design Focus on Usability

Internationalization Do not use acronyms and abbreviations- difficult/confusing to translate Adhere to local formats for date, time, money, measurements, addresses, and telephone numbers. Be particularly careful with images such as religious symbols (crosses and stars) the human body hand gestures flags

Translation Expansion Requirements (1) Besturingselement (Dutch) Olvadaci prvek (Czech) Ohjausobjekti (Finnish) Steuerelement (German) Control (English) English is very concise- allow additional screen space for translation.

Translation Expansion Requirements (2)

Mystery Meat Navigation Having to mouse over icons to see what they correspond to Goes against the fundamental purposes of a website discussed earlier. http:// www.fixingyourwebsite.com/mysterymeat.html

Web Page Guidelines (1 of 2) Strike a balance between Textual information Graphics Links Avoid horizontal scrolling Place critical or important information at the very top so it is always viewable when the page is opened.

Web Page Guidelines (2 of 2) Use frames with caution. Don’t break links. Users will bookmark the page that interests them and not necessarily take the path you create. (search engines) Provide sufficient white space (minimum 30%) Anticipate page breaks

Home Page Guidelines Limit to one screen Clearly identify the Web site’s content and purpose Elements to include: Site overview or map Navigation links to most (if not all) of the site or major sections Some useful content

Further Research When to open new browser windows, and when to display new content in current browser window? Literature has not yet adequately answered this question. Difficult question to answer, highly dependent on the type of user, and the task involved.

Real world user interface examples UI Examples Real world user interface examples

Giving the user choices is good? This issue may be important to a programmer but the user doesn’t care. Every time you provide an option you’re asking the user to make a decision. Don’t force the user to make decisions about things they don’t care about. Why is this dialog a “wizard”? Adapted from User Interface Design for Programmers, J. Spolsky, 2001

Icon Design 63% 91% Example from Highway Safety, percent of licensed drivers who can explain the meaning of each sign. From Smiley & Bahar, The Science of Highway Safety, Durham, March 2002

Where’s Waldo? http://www.iarchitect.com/mshame.htm

Error Message The message is entirely unhelpful, gives no indication of what the error is, what to do to solve it, or even the location of an error log if one existed. http://www.iarchitect.com/mshame.htm

More Error Messages

Requests for Proposals User Interface Requirements

User Interface Requirements (1) Free Text to Use in Your Request for Proposals (RFPs) 1. The software should be usable without reading a printed guide. If the complexity of the tasks being automated cannot feasibly be embedded into the software interface, reading a printed guide may be unavoidable. In this case, the most that any individual user should have to read for a particular role is 50 pages-short enough to read in one sitting. http:// www.usabilityinstitute.com/articles/RFPInterfaceRequirements.htm

User Interface Requirements (2) 2. Users should be able to accomplish every task and entry with the fewest possible keystrokes. For instance, dates should not necessitate typing four digits for the year unless the context of the given field leaves considerable doubt as to which millennium might be intended. In many cases, keying in any characters at all for the year may be an unnecessary expense of the users' time.

User Interface Requirements (3) 3. The interface should enable all interaction techniques and input to be discoverable and chosen from a browse-able, hierarchical structure, arranged in order of the functions the user needs to perform. Usually, this requirement is being satisfied by multiple graphical choices, in the form of icons and segmented, click-able graphics known by various names, such as imagemaps.

User Interface Requirements (4) 4. The software should enable users to do things out of order without being penalized. 5. The software should enable users to make outright mistakes without being terminated, executed, canceled, re-booted, or erased. 6. The system should save all of what the users type, by default, meaning without extra steps. 7. Users should be forewarned when any work is over-written, undone, or erased. 8. The interface and messages should make it clear why the program does what it does.