Designing user interfaces

1. Designing user interfaces Lecture 7 Web design Version 6

2. Origins: Memex “A memex is a device in which an individual stores all his books, records , and communications, and which is mechanized so that it may be consulted with exceeding speed and flexibility. It is an enlarged intimate supplement to his memory.” [Source: Vannevar Bush, 1945] Version 6

3. Origins: hypertext and hypermedia • Data is stored as a series of nodes connected by machine-supported links • A node is an integrated and self-sufficient unit of information: • Hypertext (text) • Hypermedia (graphics, animation, images and sound) • User navigates between nodes by following links • The sequence of nodes forms a path Version 6

4. Hypertext nodes and links Kublai Khan (1215-1266), grandson of Genghis Khan, elected leader of the Mongols at Shang-tu on May 5 1260 Node 2 Node 1 In Xanadu did Kubla Khan A stately pleasure dome decree: where Alph, the sacred river, ran Through caverns measureless to man Down to a sunless sea Node 1 Scrolling window Node 3 Editable text Closed window icon Version 6

5. Origins: Xanadu Ted Nelson coined the term ‘hypertext’ (defined as "non-sequential writing with free user movement”) at an ACM Conference in 1965. “In project Xanadu, all media contents get permanent addresses, so that they can be addressed by anyone independent of their documentary context. On-line quotation references these permanent addresses. All links reference these permanent addresses, so that the same links are always on the same content-- wherever that content is re-used.” Version 6

6. Origins: World Wide Web “We should work toward a universal linked information system, in which generality and portability are more important than fancy graphics techniques and complex extra facilities.” Information Management: A Proposal, Tim Berners-Lee, CERN, March 1989 • Hypertext • Client-server architecture • Remote access across networks • Non-centralised data • Ability to add private links Version 6

7. Basic components of the Web • Common address system • Uniform Resource Locator (URL) • Network protocol for handling requests and responses • Hypertext transfer protocol (HTTP) • Language for constructing documents • Hypertext mark-up language (HTML) Version 6

8. Basic Web architecture Gopher Servers Clients Netscape ftp http Internet Explorer Data base Lynx Version 6

9. Interaction styles for the Web Consider: • User’s psychology • Attitude and motivation? • Knowledge and experience • Typing skills, experience of system, task and application, use of other systems, computer literacy? • Characteristics of the task • Frequency of use, training, system use, turnover rate, task importance and structure? Have these changed since 1989? Version 6

10. Objects/Actions Interface (OAI) model • Specify the users and set the goals • Task • Structured information objects • Information actions • Interface • Metaphors for information objects • Handles (affordances) for actions [Source: Ben Shneiderman, 1998] Version 6

11. OAI model for Web design Task Interface Universe Intention Metaphor Plan Atoms Steps Pixels Clicks Objects Actions Objects Actions Version 6

12. Task: atomic information objects • Text data • Name, birth date, job title, biography, resume or technical report • Image data: • Icon, corporate logo, portrait photo • Other types? Version 6

13. Strategies for aggregating information: Short unstructured lists Linear structures Arrays or tables Hierarchies, trees Multi-trees, faceted retrieval Networks Task: aggregate information objects Version 6

14. Examples: Looking for a name in an alphabetical list Scanning a list of scientific article titles Reading a paragraph Following a reference link Task: atomic information actions Version 6

15. Composed of atomic actions: Browsing an almanac table of contents, jumping to a chapter on sports and scanning for skiing topics Locating a scientific term in an alphabetic index and reading articles containing the term Using a keyword search in a catalog to obtain a list of candidate book titles Following cross reference from one legal precedent to another, repeatedly, until no new relevant precedents appear Scanning a music catalog to locate classical symphonies by eighteenth century French composers Task: aggregate information actions Version 6

16. File cabinets, folders, and documents Books with chapters Encyclopedia with articles Television with channels Shopping mall with stores Museum with exhibits Interface: metaphors for objects Version 6

17. Allow user to: Formulate plan based on visible action handles (e.g. labels, icons, buttons) Decide which plans are possible and how to construct them Carry out plan based on a series of clicks and keystrokes Interface: handles for actions Version 6

18. General principles for Web pages (1) • Compactness and branching • Use more links for index pages • Avoid excessive fragmentation • Reduce scrolling • Navigation support • Meaningful structures to guide users • Provide users with overview of the Web site [Source: Ben Shneiderman, 1998] Version 6

19. General principles for Web pages (2) • Sequencing, clustering and emphasis • Use sequence to guide users • Cluster related items to show relationships • Emphasise more important items • Support for universal access • Provide text-only versions and international versions • Provide access for handicapped users Version 6

20. Web usability Usability describes the effectiveness, efficiency and satisfaction with which users achieve goals Usability is very important for Web applications: In product design and software design customers pay first and experience usability later On the Web, users experience usability first and pay later [Source: Nielsen, 2000] Version 6

21. Web response times • Less than 0.1 second, • Appears ‘instantaneous’ • Between 0.1-1.0 second • Noticeable, but users’ thoughts are not interrupted. They feel that they are moving freely • Between 1.0-10 seconds • Noticeable, but user’s attention remains focused on the task • Above 10 seconds • Users may want to perform other tasks. Explain cause of delay Version 6

22. Size limits for Web pages Source: http://www.useit.com/ Version 6

23. Guidelines for page size • Keep graphics to a minimum • Use multimedia only to enhance user’s understanding of information • Use style sheets to improve page design without download penalty • Ensure fast initial loading of the page • Provide alternatives for images • Reduce complexity by splitting information into several simple tables Version 6

24. Using hyperlinks • Types of links • Structural navigation links • Associative links • ‘See also’ links • Link descriptions • Short (2-4 words) • Informative • Supplementary text for similar links • Link titles • Name of site or subsite • Additional information Version 6

25. Example: navigation links Source: http://www.inktomi.com Version 6

26. Example: associative links Source: http://www.tbid.com Version 6

27. Example: descriptive links Source: http://www.tomalak.org/ Version 6

28. Test in realistic settings Early in-house testing (limited numbers) Extensive in-house testing Intensive field testing Phased roll-out process Testing usability Version 6

29. Log usage Ask for user feedback Rate of change is guided by User expectations Organisational policy Monitoring usability Version 6

30. Summary • Describe the origins of Web • Apply the OAI model to Web design • Explain the importance of usability in Web design • Evaluate Web sites using suitable guidelines Further reading and revision: • Shneiderman, Chap 16, pp. 567-581 • Nielsen (2000) Version 6

31. Version 6

32. Version 6