Presentation on theme: "Types of Interfaces Computer-Computer Program APIs Network flows Files Human-Computer Command line Graphical."— Presentation transcript:
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