P00700 Web interface design - A brief introduction

1. P00700 Web interface design - A brief introduction David Duce P00700 Web Interfaces & Media

2. The User Interface • User interface is “that part of a system that user interacts with in order to undertake tasks and achieve goals” (Stone et al., 2005) • User has to translate their goals into tasks, plans, that allow goals to be achieved • User must be able to: • Recognize system can be used to achieve a particular goal • Identify procedures to be carried out using the computer to achieve the desired goal • Know “commands” to give to system to access the functions needed to carry out the tasks • Identify and understand states the system is in and replies that are issued by the system • Possess necessary skills, e.g. typing, pointing, speaking, to be able to input commands to system and, e.g. seeing, reading, hearing, to be able to process the output P00700 Web Interfaces & Media

3. Environments • What environments is the Web used in? • Desktop, laptop, PDA, mobile (phone) • Office, home, garden, cooker, TV, bus, train, plane, car, … • What factors characterise these environments? P00700 Web Interfaces & Media

4. Factors (computer) • Output devices • Visual: Screen size, colour, resolution, … • Sound • Touch (e.g. Braille) • Input devices • Keyboard, mouse, touch screen, voice recognition, … • Computer • Operating system • Processing power, energy usage, battery life, … • Network • online/ offline • Bandwidth • Delay • Jitter • Quality of service P00700 Web Interfaces & Media

5. Devices Refreshable Braille Eye tracking Foot mouse P00700 Web Interfaces & Media

6. Devices • Translates user's head movement into proportional movements of a computer mouse • Wireless optical sensor tracks target placed on user's forehead or glasses • Combined with on-screen keyboard, replaces conventional keyboard • Key press by dwelling over key for a set period of time or by using an adaptive switch • Resolution is down to a pixel P00700 Web Interfaces & Media

7. Devices • Head pointing system provides full mouse control for those who have good head control • Moving the head moves the cursor on the screen • Activating the puff switch makes selections • On-screen keyboards such as WiViK allow for word processing and other text entry P00700 Web Interfaces & Media

8. Devices • Move the head and the cursor moves on the screen • Use the sip-puff tube switch or an external switch to make right and left mouse button clicks P00700 Web Interfaces & Media

9. Haptic Devices P00700 Web Interfaces & Media

10. Factors (Human user) • Eyesight – vision, colour perception • Manual dexterity – movement • Cognitive – memory • We are all impaired in some contexts • Noisy environments, can’t hear • Driving car, can’t move mouse, or study scene • Working in a confined space, can’t scroll through user manual P00700 Web Interfaces & Media

11. Independence • Device independence • Accommodating a wide range of factors without the need to redesign the interface • Separating application logic from the user interface • Heterogeneous • Networks • Devices • Platforms (operating systems, browsers, languages, …) P00700 Web Interfaces & Media

12. The User Interface (recap) • User interface is “that part of a system that user interacts with in order to undertake tasks and achieve goals” (Stone et al., 2005) • User has to translate their goals into tasks, plans, that allow goals to be achieved • User must be able to: • Recognize system can be used to achieve a particular goal • Identify procedures to be carried out using the computer to achieve the desired goal • Know “commands” to give to system to access the functions needed to carry out the tasks • Identify and understand states the system is in and replies that are issued by the system • Possess necessary skills, e.g. typing, pointing, speaking, to be able to input commands to system and, e.g. seeing, reading, hearing, to be able to process the output P00700 Web Interfaces & Media

13. There is a shared responsibility between user and system for achieving a task goal • User and computer interact in order to achieve a desired end state that constitutes the task goal P00700 Web Interfaces & Media

14. Good User Interfaces • What is makes a user interface “good”? • Think about examples of “bad” user interfaces • How can you judge whether a user interface is good or bad? • Discuss P00700 Web Interfaces & Media

15. Usability • ISO 9241 “the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use” • Effectiveness is the accuracy and completeness with which users can accomplish goals • Efficiency is the resources expended in relation to accuracy and completeness • Satisfaction is the comfort and acceptability of the system to users and others affected by its use • User interface must be perceived as being usable by specified users • Scope of an interface extends beyond users’ immediate environment to wider context in which it is to be used P00700 Web Interfaces & Media

16. Poor User Interfaces • What problems are posed by poor/bad user interfaces? P00700 Web Interfaces & Media

17. User-Centred Design • Approach that involves users throughout the design and development process • Requires understanding of users, tasks, and environment • ISO 13407, Human-Centered Design Processes for Interactive Systems (1997) specifies 4 main principles • Active involvement of users • Appropriate allocation of function between user and system • Iteration of design solutions • Multidisciplinary design teams P00700 Web Interfaces & Media

18. Human-centred Design Activities • From ISO 9241:11 • Understand and specify context of use • Specify user and organizational requirements • Produce design solutions (prototypes) • Evaluate designs with users against requirements P00700 Web Interfaces & Media

19. Iterative Design Process Design User testing/ evaluation Prototyping Greenberg, 1996 P00700 Web Interfaces & Media

20. Involving Users • Ways to involve users • Observe working practices • Psychology-based user modelling • User representatives on design teams • …… • Who are the users? • Example: the Brookes PIP system; the Brookes VLE (Moodle) • Who are the users? Discuss P00700 Web Interfaces & Media

21. Evaluation • Exercise • Think about the most recent mobile phone you bought • How did you make the decision? • The first you saw, specific features (what?), to judge alternatives (how?)? • How was choice informed? P00700 Web Interfaces & Media

22. Evaluation: when and how? How • Observing the organisation and how people work. Monitor ways in which people interact with a product or prototype • Interviewing, talking, asking questions. Surveys using questionnaires and interviews (structured or unstructured) • Making predications – using models to predict kinds of problems that may occur When • Evaluation early in life cycle: paper-based prototypes, mockups, … • Evaluation later in life cycle: carried out to check usability of nearly completed system, ensuring meets usability requirements, likely to feed into next release P00700 Web Interfaces & Media

23. Requirements Tasks Artefacts Possibilities Framework for HCI • Based on Johnson (1992) Human Computer Interaction and Carrol (1990) Task-artefact cycle P00700 Web Interfaces & Media

24. .. continued • Tasks set design requirements for development of artefacts • Use of artefacts redefines task for which artefact was designed, e.g. typewriters altered office tasks, word processors again, then Web … • Changed tasks suggest new needs and opportunities P00700 Web Interfaces & Media

25. Refinement • Carroll took this further Scenario-based design representation Psychology of tasks Artefacts In situations of use Design rationale via claims extraction P00700 Web Interfaces & Media

26. Psychology of tasks is seen as scientific basis for understanding tasks in HCI • Design rationale describes issues, positions and reasons given for designs • User-interaction scenarios provide generalized or decontextualized descriptions of tasks people do and want to accomplish • Through a design process, task scenarios are elaborated to become device/computer application specific and describe how tasks will be accomplished (e.g. sequence of interactions required to typeset this slide in Microsoft Powerpoint 2003) • Evaluation (not shown in diagram) measures effectiveness of a system/interface design for achieving a task, Usability, learnability, efficiency, acceptability • Design – evaluate refinement cycle P00700 Web Interfaces & Media

27. Psychological Factors • Very brief overview of a vast literature • Human memory – long term and short term • Short term memory is a working memory in which information is temporarily placed in an active state so other cognitive processes can use • Limited in some way • Long-term memory contains knowledge – normally stored in an inactive state • Retrieval from short term memory is quicker than from long term memory P00700 Web Interfaces & Media

28. Arial Bookman Times new roman Arial Bookman Times new roman Example Easier to select fonts in second case – gives example P00700 Web Interfaces & Media

29. Motor performance • Keystroke models • Fitt’s law P00700 Web Interfaces & Media

30. Encapsulation of Design Knowledge • From Stone et al. (2005), p. 610 • Design principles • High-level generic information, e.g. “be consistent” • Design guidelines • Less prescriptive than rules, more prescriptive than principles • e.g. “Use drop-down list boxes to save space” • Design rules • Low-level, highly specific instructions, e.g. “Apple Human Interface Guidelines for the Macintosh” for a specific platform • http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/Intro/Intro.html • Design rationale • Documented explanation of why an artefact has been designed the way it has, reasoning behind design P00700 Web Interfaces & Media

31. Design heuristics (Jacob Nielsen) • Visibility of system status • The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. • Match between system 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. • User control and freedom • 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 dialogue. Support undo and redo. • Consistency and standards • Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. • Error prevention • Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action. • Recognition rather than recall • Minimize the user's memory load by making 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. • Flexibility and efficiency of use • 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. • Aesthetic and minimalist design • Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. • Help users recognize, diagnose, and recover from errors • Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. • Help and documentation • Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large. From http://www.useit.com/papers/heuristic/heuristic_list.html P00700 Web Interfaces & Media

32. W3C Mobility/ Accessibility • Convergence of mobility and accessibility – there are contexts in which everyone can’t see, or can’t hear, can’t touch, can’t feel, … • Best practice and mobility guidelines http://www.w3.org/Mobile/ • Mobile Web Application best practices http://www.w3.org/TR/mwabp/ • Web Accessibility Initiative (WAI) http://www.w3.org/WAI/ P00700 Web Interfaces & Media

33. Tool Support • Based on some kind of model, e.g. http://cogtool.hcii.cs.cmu.edu/ • CogTool is a general purpose UI prototyping tool with a difference - it automatically evaluates your design with a predictive human performance model (a "cognitive crash dummy"). • (Normally) Worth looking at the demonstration at: http://cogtool.hcii.cs.cmu.edu/use-today/other_materials/demonstration-cogtool-explorer-research-version-cogtool N.B. Not currently available – March 2014 – CMU web site migrating to new location P00700 Web Interfaces & Media

34. Web Site Design • The next few slides give a short overview of some aspects of Web site design • How the pages are structured in relation to tasks users want to carry out; how natural is the organisation of the information? • How are users told where they are? • How to help users to navigate around the site? P00700 Web Interfaces & Media

35. Web Site Structure • Based on Stone et al. (2005), chapter 4 • Most common organisation is some form of hierarchy • Some sites are organised around the structure of the organisation – advantanges, disadvantages? • Some information has a natural structure, e.g. classifications of books (Amazon browse categories) • Search complements natural structure • Can be helpful to start with natural structure, but often more complex than this P00700 Web Interfaces & Media

36. Typical Factors • How deep and wide should hierarchy be? • Is it better to divide block of information into several short pages or keep as one long page? • Can several web pages be combined into one larger one? • Does the structure of the site reflect the tasks the users want to carry out? • How should the site content be grouped? (e.g. as well as pages about books, need reviews of books, information about the company, …) P00700 Web Interfaces & Media

37. Helping users know where they are • May jump to an arbitrary page within a web site • Use organisational name, logo, section, … to help user know where they are • Brookes VLE (Moodle) has a useful way of showing hierarchical position, e.g. My home  ► My courses  ► P00700 JAN13-MAY13 P00700 Web Interfaces & Media

38. Helping users navigate around the site • Navigation links • Navigation aids • Site map (e.g. http://www.brookes.ac.uk/sitemap/ ) • “breadcrumb trail”, shows hierarchical levels from top to current position (c.f. the Brookes VLE example on previous slide) • Geographical or visual maps • Navigation bars (e.g. top line in http://www.brookes.ac.uk/ , tabs in PIP interface) • Drop-down lists (e.g. “All” in search box at http://www.amazon.co.uk/ ) P00700 Web Interfaces & Media

39. Research: Syndetic Modelling • Combines formal system models directly with a representation of human cognition to yield an integrated view of human-system interaction: a syndetic model. Aspects of systems that affect usability then can be described and understood in terms of the conjoint behavior of user and computer. • David J. Duke, Philip J. Barnard, David A. Duce, and Jon May. 1998. Syndetic modelling. Hum.-Comput. Interact. 13, 4 (December 1998), 337-393. http://dx.doi.org/10.1207/s15327051hci1304_1 • Philip Barnard, Jon May, David Duke, and David Duce. 2000. Systems, interactions, and macrotheory. ACM Trans. Comput.-Hum. Interact. 7, 2 (June 2000), 222-262. http://doi.acm.org/10.1145/353485.353490 P00700 Web Interfaces & Media

40. Research: PACMAD • People at the Centre of Mobile Application Design • Research project in the department: Rachel Harrison, Arantza Aldea, Clare Martin, David Sutton, David Duce • Principles, methodology for interaction design for mobile devices • Application area: Mobile apps for diabetes management P00700 Web Interfaces & Media

41. Reminder of the course • In the previous sections we looked at web technologies for representing different media, in particular • HTML for text (primarily) and embedded images and vector graphics • SVG for 2D (vector) graphics • CSS for styling text and graphical content • Interacting with web content (modifying, creating dynamically) • Constructing user interfaces using web representations and interaction P00700 Web Interfaces & Media

42. Architecture of Web Interfaces User interaction with application mediated through web interface - web browser and web server User Browser (Scripts may modify content) (local interaction without round trip to server or to application) Web server (May create content dynamically) Application P00700 Web Interfaces & Media

43. References • Debbie Stone, Caroline Jarrett, Mark Woodroffe, Shailey Minocha (2005), User Interface Design and Evaluation, Morgan Kaufmann Series in Interactive Technologies, ISBN 0-12-088436-4. (Based on an Open University course) • Greenberg, S. (1996), “Teaching human-computer interaction to programmers”, ACM Interactions, 3(4), pp. 62-76. Available in the ACM Digital Library, http://doi.acm.org/10.1145/234813.234820 P00700 Web Interfaces & Media