Outline

1. Outline • An Introduction to Human-Computer Interaction (HCI) • Interacting with computers • User Interface (UI) essentials • Visual representation of data • Designing for the web Arab Open University - Riyadh

2. An introduction to HCI A goodUser Interface (UI) design enables the users toeffectivelyinteract with the system and perform their tasks. If the data is not presented on the user interface in a way that the users can interpret it in order to be informed about the data, then it can sometimes haveseriousconsequences. Examples : 1 - Three Mile Island nuclear power plant: water pumps failed  the poorly-designed UI prevented the operators from identifying and rectifying the problem quickly  nuclear reactor nearly melted down 2 - Boo.com website (sportswear retailer): poorly-designed Web interface  loosing customers  Boo.com collapsed after 6 months.

3. Outline • An Introduction to Human-Computer Interaction (HCI) • Interacting with computers • User Interface (UI) essentials • Visual representation of data • Designing for the web

4. Interacting with computers HCI, as a discipline, is the study of how humans interact with computers and their applications. It tells us how to build user interfaces that are safe, efficient, easyandenjoyableto use (as well as functional!). HCI is a broad subject covering all aspects of the way in which people interact with computers (computer science, psychology, engineering, artificial intelligence, philosophy, sociology, anthropology and graphic design... )

5. The user interface A user interacts with a computer system via theuser interface(UI). The UI can be thought of as that part of a computer system that helps us to accomplish tasks; it takes our commands and communicates information back to us. Thetwo-waycommunication that is interaction through the UI is all you will see of any computer system (you don’t need to know what is happening, or how it happens, beneath the UI). Because of this, certain authors have concluded that, to users, the user interface is the system.

6. The importance of good user interface design A goodUIis one that: Is easy to use; Is easy to understand; meets the needs of the intended users; supports users in the tasks they wish to undertake. A goodUI designerthinks about the users of the UI and pays great attention to the usability of the UI for users (always to be aware of users’ needs)

7. What is usability? Usability is the extent to which a [system] can be used byspecified usersto achievespecified goals[or tasks] witheffectiveness,efficiency,andsatisfactionin aspecified context of use. Effectiveness refers to the goals or tasks being achievedaccurately and completely. Efficiency refers to the resources expended – not too many – to achieve the goal or task. Satisfaction refers to the comfort and acceptability of the computer system to its users. We might distinguish a system with goodusability from one with poorusability (the usability of a system refers to the usability of its UI)

8. The problems of poor user interface design For organizations that depend on computer systems, poor usability can lead to decrease in staff productivity, high staff turnover, low morale and poor job satisfaction. The usability of computer systems impacts the effectiveness and efficiency of an organization. Usability of a system is not determined by a fancy front-end or UI design with colors, animations, or graphics. To designa good UI it is important to know who the users will be, their goals, their tasks, and their specific context of use. In HCI, this is calleduser-centered design.

9. User-centered design A good UI designer, beforedesigning a system, will try to answer the following: - Who are the users? - What are the users’ experiences? - What skills do they have? - What tasks will they be using the system for? If the system is areplacementfor an existing one: - What are the users’ expectations? - How do they currently perform their tasks? - How will the new system support and/or change their goal and tasks, and environments?

10. Outline • An Introduction to Human-Computer Interaction (HCI) • Interacting with computers • User Interface (UI) essentials • Visual representation of data • Designing for the web

11. User interface design principles There are several UI design principles in the HCI literature: Visibility Feedback Affordance Simplicity Structure Consistency Tolerance. Standard terminologyin UI design: command button; dialogue box; icon; label; menu bar;menu; primary window; text box; toolbar Terminology associated with elements of web pages: link; menu; title bar; navigation bar; home page; interior page The above UI elements are called collectivelyUI widgets.

12. User interface design principles: Visibility Visibilityin the context of UI design means making it clear what a UI element is used for. Design principle: All UI elements should have good visibility. Guidelines: To achieve visibility, think about the goal that will be achieved by using that element. Are there any icons that could be used to draw the user’s attention? Is there a ‘standard’ symbol for the goal? Examples: In a UI for a software DVD player, there is a ‘standard’ recognizable symbol for a play button (►). In the UI for a mobile phone, an envelope icon shows that a message has been received.

13. Feedbackis related to the concept of visibility. In the context of UI design it means making it clear what action has been achieved through the use of the UI element. Design principle: All UI elements should provide adequate feedback in response to the user’s actions. Guidelines: Think about what information should be sent back to the user about their interactions with the UI element. Can you give visual feedback (message or an icon)? Is there a ‘standard’ symbol to give the feedback? Can a simple sound be used to say that something has happened? Or tactile feedback? Example: When I press any key on the keypad of my mobile phone, a beep is heard and I can also feel the key being pressed (tactile feedback). User interface design principles: Feedback

14. Affordancein the context of UI design means making it clear how a UI element should be used (e.g. door: pulled? Pushed?...). To afford means ‘to give a clue’. The clue is of how to interact. Design principle: All UI elements should have good affordance. Guidelines: The element’s appearance should make it obvious how a user should interact with it. Buttons, links, icons, and scroll bars should be designed so that it is obvious how they should be used. Examples: In the Mac OS, buttons are given a shadow, suggesting something that stands proud of the screen. In this way pushing the button is the suggested interaction. Another example is the underlining of links that affords clicking. User interface design principles: Affordance

15. Simplicityin the context of UI design means keeping things as simple as possible. Design principle: Make simple, common tasks simple to do. Guidelines: To achieve simplicity, employ actions, icons, words and user interface controls that are natural for the user. Use the user’s own language. Break complex tasks into simpler subtasks. Example: Since opening or saving a file in a word-processor application are some of the most common tasks that a user performs, menu items (with associated buttons or keystrokes) for ‘Open file’ and ‘Save file’ are provided in many word-processor applications. (keep things simple means spending time getting to know the users and what they find natural) User interface design principles: Simplicity

16. Structure:A UI will be more usable if it is structured in way that is meaningful and useful to user. Design principle: Structure the UI in a meaningful way for the user. Guidelines: Things that the user will think of as related should be clearly and closely related and appear together in the UI, or at least they should be clearly and closely associated. Features that are unrelated, either in terms of a user’s activities or in their mind, should be separated or distinguished in the UI. Example: The “Print” dialog box groups together related information (e.g. Printer, Page range and Copies…) User interface design principles: Structure

17. Consistencyin appearance, positioning and behavior within the UI makes a system easy to learn and remember. Design principle: The presentation of the UI should be consistent. Guidelines: If two UI elements are to serve the same or similar purpose they should be made as consistent as possible. Examples:Buttons that say ‘OK’ and ‘Cancel’ on most interfaces have the same appearance, perhaps even the same size. They serve similar purposes in ending a user interaction. Three different MS Office applications: Word, Excel and PowerPoint have similar “look and feel” User interface design principles: Consistency

18. Tolerancerefers to the ability of a UI to prevent errors if possible, or to make them easy to recover from, if not. Design principle: The UI should be designed to reduce the number of user errors and facilitate recovery from them. Guidelines: For an interface to be tolerant of errors, you should think of the ways in which the user can make errors. Is there a message that would help a user confirm a possible wrong choice? Are there examples of good choices that you can provide? Examples: To prevent the wrong choice of menu item, some items might be grayed out. You can offer an example of the format of a date that is to be entered. User interface design principles: Tolerance

19. User interface essentials Errors, of course, are not always due to poor UI design. They could occur when a user is unfamiliar with an application, or does not have the right experience or skills, even because of stress, interruptions… Recoverabilityof a UI refers to how easy it is for users to recover from their mistakes. Inbackwards error recoverythe user will be allowed to ‘undo’ the effects of the action that caused the error so it appears as if the error had never occurred, and the user can try again to achieve their goal. Inforwards error recovery, the system accepts the error (no undo) but still helps the user to accomplish their goal. An example is the error message that provides information about why the error occurred, and what is necessary for recovery.

20. Outline • An Introduction to Human-Computer Interaction (HCI) • Interacting with computers • User Interface (UI) essentials • Visual representation of data • Designing for the web

21. Visual representation of data Findinginformationbyinterpretingdatais a difficult task that only humans can do. Presenting data so that information can be found from it is also a difficult task. Visual representations (graphs, diagrams, maps) display data in a way that can be interpreted by users in order to retrieve the information. The use ofvisual representations forunderstanding the data and gaining insight into it is calledinformation visualization. Computers add many possibilities to visualization: they can include real-time interactivity, what-if scenarios…

22. Making sense of data Presenting information as text: Text is a very natural way for us to communicate. Because of its recognized flexibility and power, it is the dominant way of presenting information in many areas, including software and web pages. Guideline: make text readable and legible. Readabletext will allow the user to find the information that they need easily on the page (when presenting text, make sure the typeface - serif or sans serif - and size are appropriate for the display) Legibletext will allow the user to read easily, once they have found the information (the spacing between letters, words, lines and paragraphs, as well as the lengths of lines and paragraphs)

23. Presenting numeric data: There are several graph and chart types that are used to present numeric data. The traditional graph and chart types frequently used include the line graph, the bar chart, and the pie chart. Guideline: Ensure that the choice of graph or chart type is appropriate for the representation (making a good choice depends on thinking about the viewer’s task). Using the guidelines: Ask yourself the following questions: Is there a comparison to be made between different parts of the data? Does the labeling on the graph or chart help the viewer make sense of the data? Is the data presented at the right level of detail to allow the user to draw conclusions? Does the chart or graph distort in any way what the data has to say?Check that the data ranges on the two axes of a graph are appropriate. Check that any comparison you make is fair. Making sense of data

24. A change in the scale of the axes within a graph can make it appear that a small variation is actually a major change (and vice versa). Making sense of data

25. Avoiding graphic overkill: the dos and don’ts of data-ink Data-inkis the part of the graphic that presents the datathat contributes to the information it is meant to convey. Non-data-inkcan include important information, e.g. labels or grids, but also the fancy graphics that can distract the reader. Redundant data-ink is ink that presents data, but doesn’t add information. Guideline: The largest share of the ink on a graphic should be data-ink. It’s very difficult to find the right proportion of data-ink to non-data-ink. Non-data ink should be erased if it gets in the way of information. This non-data ink should be removed

26. Avoiding chart junk: the path to graphic nirvana Chart junkis the enemy of simplicity in information visualization. It distracts a reader from achieving their task with meaningless photos and line art, administrative clutter, fancy fonts, weird backgrounds – you get the picture. Guideline: Avoid chart junk at all costs! Using the guidelines: Ask yourself the following questions: Are you using ‘content-free’ decoration? Is that background really necessary? Do those photographs really add information? Is thereanything that can be removed without changing the message?

27. Getting the message across Two important issues associated with information visualization: 1 - Selection: From all the data available, the author had to select the data most relevant to the taskof the reader. 2 - Representation: Colors and connectivity are used to get the message across. The Gantt chart (1917), production control tool, is an example of a good information visualization.

28. Outline • An Introduction to Human-Computer Interaction (HCI) • Interacting with computers • User Interface (UI) essentials • Visual representation of data • Designing for the web

29. Designing for the web 1. You do needhigh quality content:highly relevant and interesting to your readers (user-centered design) Ask yourself: what do my users want to achieve from visiting my site? In business, the answer is simple: A website that sells cars should include current prices, availability, perhaps even a comparison with your competition. For home use, the answer is more difficult: is my target audience friends and family? In which case, photos and contact, family news and views, could be sufficient.

30. Designing for the web 2. Can you have aconversationwith your user? Updating can make your website appear alive! A site should indicate when it was last updated, and latest news can be highlighted in some way. You could include a ‘What’s New’ link … 3.Bells and whistles, or website nirvana? A simplestructureallows each element of the page to be tied to its message and enhances the flexibility and adaptability of your site. Aconsistentlayoutof web pages increases ease of use, aids user navigation and helps to establish unity across several pages of the website.

31. Designing for the web 4. Focus the user’s attention Place the emphasis on elements that should be the centre of your user’s attention (a title, an icon, bright colors, or large font size…). 5. How relevant is the content for the user? Your site must allow the users to carry out the taskstheywant to perform easily with no error. 6. Is the content unique to the online medium? Why use a website? A website should provide added value in terms of the convenience and speed of providing information to a large number of users. 7. Is the page too slow to appear? Remove unnecessarily fancy (and slow to load) graphics Include headlines, ‘thumbnails’ of photographs (instead of large pictures)

32. Designing for the web The most challenging page to design is the home page, because it sets the scene for the whole website. Your home page should tell users where they are and what your site does. Here are some guidelines on what to include: Something that identifies the website as yours: small picture of yourself, contact details (convention: use the top-left corner). The name of the website (convention: top of the screen). An important part of telling the users where they are also involves the choice of typeface, colors and page layout. A briefintroduction to the site telling your user what they can expect. You might include a summary of your latest news.

33. Designing for the web While designinginterior pages, you have to think why people come to your site. What are they looking for? The information should be relevant, credible, useful and up-to-date. To capture and maintain user interest, the content should be well-presented and organized. Interior web pages contain more content and less introductoryinformation. Interior pages should have meaningful titles. The look and feel (colors, fonts, title bar…) should be consistent. There should always be a link to the home page from an interior page. (otherwise a user might be ‘stuck’ inside your website ) Small errors in spelling and grammatical mistakes will also reduce the feeling of quality.

34. Designing for the web Two other design issues of interaction with web pages: Scrolling The important content of a page should be visible without scrolling. In general, it is better to ensure that all the links are visible without scrolling (Short pages are better for home pages and for documents intended to be read online). Designing for accessibility The web can provide tremendous benefits, but only if it can be accessed! Your websites should be designed so that they can be accessed by people whose eyesight and/or hearing is impaired (one solution might just mean using bigger text).

35. What’s next? • Unit 13: Sensational computing.