M150: Data, Computing and information

M150: Data, Computing and information Outline Unit twelve. What’s next. Review questions. Your questions.

Unit twelve : Interacting with information An Introduction to Human-Computer Interaction (HCI) User Interface (UI) essentials Visual representation of data Designing for the web

Unit twelve : An introduction to HCI Agood user interface (UI) design enables the user to effectively interact with the system and perform his 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 have serious consequences. Examples : 1 - Three Mile Island nuclear power plant 2 - Boo.com website 3

Unit twelve : An introduction to HCI 4

Unit twelve : 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, easy and enjoyable to 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

Unit twelve : Interacting with computers A user interacts with a computer system via the user 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. The two-way communication 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

Unit twelve : Interacting with computers A good UI : easy to use; easy to understand; meets the needs of the intended users; supports users in the tasks they wish to undertake. A good UI designer thinks about the users of the UI and pays great attention to the usability of the UI for users (always to be aware of a user’s needs) Usability, what does it mean ? 7

Unit twelve : Interacting with computers Usability is the extent to which a [system] can be used by specified users to achieve specified goals [or tasks] with effectiveness, efficiency, and satisfaction in a specified context of use. We might distinguish a system with good usability from one with poor usability (the usability of a system refers to the usability of its UI) Did you notice the different important ideas mentioned in the definition above?? (check the discussion in pages 12 & 13). 8

Unit twelve : Interacting with computers For organizations, 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 design a 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 called user-centered design. 9

Unit twelve : Interacting with computers A good UI designer, before designing 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 a replacement for 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

Unit twelve : User interface essentials There are several UI design principles in the HCI literature: Visibility, feedback, affordance, simplicity, structure, consistency and tolerance. Are you are familiar with standard terminology in UI design: command button ; dialogue box; icon ; label ; menu bar ; menu ; primary window ; text box ; toolbar Elements of web pages: link ; menu ; title bar; navigation bar The above UI elements are called collectively UI widgets. 11

Unit twelve : User interface essentials Visibility in 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. (The relationship between the way the controls have been positioned and what they do is very important. Do you have any example?) 12

Unit twelve : User interface essentials Feedback is 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. 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? Ex: WhenI 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). 13

Unit twelve : User interface essentials Affordance in the context of UI design means making it clear how a UI element should be used (cupboard handle, a door plate ..). 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. 14

Unit twelve : User interface essentials Simplicity in 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 theyfind natural) 15

Unit twelve : User interface essentials 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. Example: The “Print” dialog box groups together related information (e.g. Printer, Page range and Copies…) 16

Unit twelve : User interface essentials Consistency in 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. The difference is the label that reflects the difference in the goal they will achieve. Why the three different MS Office applications: Word, Excel and PowerPoint have the similar “look and feel”? 17

Unit twelve : User interface essentials Tolerance refers 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 greyed out. You can offer an example of the format of a date that is to be entered. 18

Unit twelve : 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… Recoverability of a UI refers to how easy it is for users to recover from their mistakes: In backwards error recovery the 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. In forwards 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. 19

Unit twelve : Visual representation of data Finding information by interpretingdata is 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 informations. The use of visual representations for understanding the data and gaining insight into it is called information visualization. Computers add many possibilities to visualization: they can include real-time interactivity, what-if scenarios… 20

Unit twelve : Visual representation of data Text is a very natural way for us to communicate because of its recognised flexibility and power, display text in many different colours, not just the traditional black on white, can also present difficulties to a reader. Guideline: Readable text 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) Legible text 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) 21

Unit twelve : Visual representation of data Numeric data is presented through several graph and chart types (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). Ask yourself the following questions: Is there a comparison to be made? Can you draw the chart so that viewers are led to make a comparison? (maybe by grouping data to be compared together) Check that data ranges on the two axes of a graph are appropriate. Check that any comparison you make is fair; e.g. do the scales on the axes reflect the values fairly? 22

Unit twelve : Visual representation of data Can you see the problem? (check the discussion of page 33) 23

Unit twelve : Visual representation of data Data-ink is the part of the graphic that presents the data that contributes to the information it is meant to convey. Non-data-ink can include important information, e.g. labels or grids, but also the fancy graphics that can distract the reader. 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. 24

Unit twelve : Visual representation of data Chart junk is 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 – 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 there anything that can be removed without changing the message? 25

Unit twelve : Visual representation of data Harry Beck, and his map of the London Underground (1931) Monsieur Minard, and Napoleon’s attack on Moscow 26

Unit twelve : Visual representation of data 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 task of the reader (Harry beck & M. Minard) 2 - Representation: Colors and connectivity are used to get the message across (Beck used colors and connectivity to show things that should be distinguished; Minard used colors mean attack or retreat). Another major achievement in information visualization in the twentieth century is the Gantt chart (1917). 27

Unit twelve : Designing for the web You do need high quality content highly relevant and interesting to your readers (again, user-centred 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. 28

Unit twelve : Designing for the web Can you have a conversation with 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 … A simplestructure allows each element of the page to be tied to its message and enhances the flexibility and adaptability of your site. A consistentlayout of web pages increases ease of use, aids user navigation and helps to establish unity across several pages of the website. 29

Unit twelve : Designing for the web 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…) How relevant is the content for the user? Your site must allow the users to carry out the tasks they want to perform easily with no error. 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 (instead of sending post to hundreds of students…) Is the page too slow to appear? Remove unnecessarily fancy (and slow to load) graphics Include headlines, ‘thumbnails’ of photographs… 30

Unit twelve : Designing for the web Because it sets the scene for the whole website, the most challenging page to design is the home page. 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 brief introduction to the site telling your user what they can expect. You might include a summary of your latest news. 31

Unit twelve : Designing for the web While designing interior 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 introductory infor. 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. 32

Unit twelve : 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). 33

2- What’s next Unit 13: Sensational computing. 34

3- Review questions What is the difference between the terms ‘user interface’ and ‘human-computer interaction’? Describe the UI of a mobile phone. List 4 user interface design principals. What could be done to a single paragraph to improve its legibility and readability? Why non-data-ink can be removed from visual representations? Name 2 “state of the art” information visualization. List 2 UI design principles specific web.

4- Your questions ?

M150: Data, Computing and information