Types of Interfaces  Computer-Computer Program APIs Network flows Files  Human-Computer Command line Graphical

Visualization and Information Design  How to present results Visualization usually refers to dynamically created results ○ Data ○ Information Information design usually refers to crafted piece ○ Edward Tufte Edward Tufte

Minard: Napoleon’s March to Moscow - Width of band shows size of army at each position. - Black band shows retreat tied to temperature and time

Program APIs  When do you need them? Should you build them into all systems? Consequences of not having them  Needed characteristics Backward compatibility: how do you extend? Checking: caller or callee?  Appropriate scope One with parameters or many?

Network Flows  Same considerations as APIs, but more so  Different machines will upgrade at different times  No control over the other side  Always identify level and negotiate support Base and towers  Use well-supported protocols FTTP, sockets, web-sockets, JSON, …

Files  See prior two pages: all the same  Added problems Files corrupted Files deleted Files edited  Use extensible formats preferably with readily available parsers

User Interfaces  “Human error” caused by bad design  Disasters 1987 Therac-25: too many messages => ignored the important ones 1995 airline crash: chose the wrong landing plan 2009 airline crash: pilot and co-pilot controls not connected

TextOther  Command line  Question and answer  Form based  Menu  Natural language  Speech  GUI  Gesture  Virtual reality  Augmented reality  Ubiquitous (unaware)  Perceptual Interaction Styles

GUI or not to GUI?  How often is the task done?  How many objects are handled at a time?  Physical limitations  Environment

What Makes a Good Design?  Consider designs you like (we know web designs, but the principles apply to any interface)  … and those you don’t  The Ugly Top 25 list Biggest Mistakes

The UI Iceberg Visuals InteractionTechniques Object Model Feel 30% Look 10% The things you use 60%  Toolkits and style guides help with look and feel, the tip of the usability iceberg.  Real usability gains come from system and application objects perceived by users.

Consider well-known sites  What is the object model? Ebay Amazon Facebook

User Interface Models  Object-action Choose the object and then the action to perform Windows GUI: select the file, right click for actions  Action-object Choose the action and then the object Windows command line: “copy” file_a file_b

Fundamental Concepts  What the user needs to do  The order that he does it  Is it natural?  How much does he have to remember?

21 An Interaction Framework Output Input the system’s capability to output information Presentation the user’s ability to understand the output Observation the system’s ability to accept the input Performance the user’s ability to do the input Articulation images from and

22 Human traits Incredibly slow Error-prone Irrational Emotional Inferential Random Unpredictable Ethical Intelligent Computers and Humans Computer traits Incredibly fast Error-free Deterministic Apathetic Literal Sequential Predictable Amoral Stupid ideas from from The Inmates are Running the Asylum, A. Cooper, images from

24 Memory  Human memory is limited  Miller's magical number 7 (+-2)

25 Motor Skills  Easiest screen locations to point to?  Fitt’s Law – The time to acquire a target is a function of the distance to and size of the target.  Why do pop-ups work?

26 Reasoning  Humans are not consistently logical.  Wason's cards 4E7K Given cards with: a letter on one side a number on the other Does a vowel on one side  an even # on the other side? What cards do you have to turn over to check this?

27 Perception  Using Color: Some people are colorblind. Design in black and white.  Using Fonts: Make capital letters mm high, lines ≤ 60 chars wide, & use ragged right. Use dark letters (not blue) on a light background. BLOCK CAPS only for non- words illustrations from Spoelsky, 2001 and

28  Humanity is diverse.  People have different: languages cultural expectations color perception ergonomic needs abilities/disabilities ages Diversity

30 Jakob Nielsen Discount Usability (1993)  Basic elements: User/Task Observation Scenarios Heuristic Evaluation Simplified Thinking-Aloud Le mieux est l'ennemi du bien Voltaire, 1764 images from

31 User Task Observation  Nielsen doesn’t explicitly list this step; he assumes it.  Customer Anthropology – the study of your customers' people and behaviours in their 'natural habitat'. “Customer Anthropology is a lot like birdwatching in that you want to try to make yourself invisible to those you're watching - Dave Pollard, salon.com image from

32 Scenarios  Nielsen sees this as a form of prototyping.  He suggests using either mockups or prototypes, provided that they are small.

33 Heuristic Evaluation  Usability experts can review a design with respect to: Interface style guides General usability guidelines  Base the review on either: Mock-ups Prototypes  Approaches: Cognitive Walkthough

34 Thinking-Aloud Protocols  Watch real users do real tasks using the system.  Have them talk about what they are doing and why. “A user interface is well designed when the program behaves exactly how the user thought it would.” - Joel Spolsky, UIDP image from joel.spolsky.com

36 Interface Design Principles  Help the user learn the interface.  Put the user in control of the interface.  Make the interface robust.

37 Learnability  The interface is useless if it is unusable.  Principles: Be consistent. Plagiarize. Establish meaningful defaults. Make functions visible or memorable. Make the mapping from control to goal clear. Encapsulate action sequences.

38 Control  Users, particularly experienced users, want to be in control.  Principles: Allow the user to be efficient. Enable shortcuts and customizations. Cluster common features together. Give appropriate feedback. Reduce short-term memory load.

39 Robustness  The system must deal with error.  Principles: Offer error prevention and handling. Support undo and redo. Provide good help and error messages.

Good Screen Design  Consistency: use of pull-downs vs. entry  Starting in the upper left corner: first thing to fill in  Simple navigation Grouping and alignment Keep related issues together  Hierarchy for importance  Pleasing visuals  Captions for clarity

TypecheckingsavingmmfCD BranchMain St. Elm St.High St. Privilegesnewsletter discountsquick loans First name Middle name Last name Street City State/county OK Apply CancelHelp Adapted from Software Engineering: An Object-Oriented Perspective by Eric J. Braude (Wiley 2001), with permission. The content is all there…

checking OKApplyCancelHelp Account typePrivileges saving money market CD newsletter discounts quick loans Branch Main St. Elm St. High St. New Customers Name First Middle Last Address Street City State/county Adapted from Software Engineering: An Object-Oriented Perspective by Eric J. Braude (Wiley 2001), with permission. But it can be better

Use of White Space  More advice than you could ever want Active and passive Classy vs. mass-produced Clutter or incomplete …

Mobile Apps  Examples that are Easy to use Hard to use  Errors Not knowing your audience Making it difficult to touch/manipulate Trying to do too much 44

Three Types of Windows Properties of automobile 189 PropertyValue BrandToyota ModelCamry ID Help Word ___________________ This screen All screens ABC alert message Caution: “age” must be < 120 OK Property – information only Dialogue – input from user and subsequent action Alert – information that needs to be seen before continuing. Developer determined.

Why Classify?  Use the right type of window  Consider purpose when designing Example: alert window must be seen; property window not as critical

Rollovers  Information that is optional and selected by the user  But it often can’t be copied.  It doesn’t remain visible.  Are those important for this usage? This is a rollover window, designed to provide on-the-fly amplification

49 Multi-Level Undo  Problem The user makes a mistake in a more involved task and needs to back the changes out.  Solution Provide a multi-level undo capability. Pattern from Tidwell, 2005

50 Progress  Problem The user is performing a process and would like to know how far they are.  Solution Build a progress bar that indicates the percentage completion of the task at 2 second intervals. Pattern from van Welie, 2000

51 Wizard  Problem The user must perform an unfamiliar and involved task.  Solution Build a graphical, step-by- step widget that takes the user through the task, indicating progress along the way. Pattern from van Welie, 2000

52 Preferences  Problem The user would like to control the general feel of an interface.  Solution Provide a parameterized way to tailor the interface in pre-specified ways. Pattern from van Welie, 2000

53 Fisheye  Problem The user is working on parts of a large artifact and has trouble “seeing” it all.  Solution Provide a graphical view of the artifact that shows all parts, but magnifies specific ones. Pattern from salaakso, 2003

GUI Screen Design Process  Know Your User or Client  Understand the Business Function  Understand the Principles of Good Screen Design  Select the Proper Kinds of Windows  Develop System Menus  Select the Proper Device-Based Controls  Select the Proper Screen-Based Controls  Organize and Lay Out Windows  Choose the Proper Colors  Create Meaningful Icons  Provide Effective Messages, Feedback, Guidance, and Language Translation  Test, Test, and Retest Wilbert Galitz

56 Joel Spolsky (2001) Joel on Software Usability, fundamentally, is a matter of bringing a bit of human rights into the world of computer- human interaction. images from What’s the Big Idea