1 / 20

Web Page Design

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

dskipper
Download Presentation

Web Page Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Page Design Focus on Usability

  2. 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

  3. 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.

  4. Translation Expansion Requirements (2)

  5. 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

  6. 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.

  7. 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

  8. 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

  9. 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.

  10. UI Examples Real world user interface examples

  11. 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

  12. 63% 91% Icon Design 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

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

  14. 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

  15. More Error Messages

  16. Requests for Proposals User Interface Requirements

  17. 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

  18. 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.

  19. 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.

  20. 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.

More Related