Human-Computer Interaction: User Interface Principles. CSCE 315 Programming Studio Fall 2017 Project 3, Lecture 2

Size: px

Start display at page:

Download "Human-Computer Interaction: User Interface Principles. CSCE 315 Programming Studio Fall 2017 Project 3, Lecture 2"

Madlyn Richards
5 years ago
Views:

1 Human-Computer Interaction: User Interface Principles CSCE 315 Programming Studio Fall 2017 Project 3, Lecture 2

2 Principles of User Interface Design No single definitive list of what makes a good interface This is why user evaluation is important Mainly a set of heuristics, ideas, principles Sometimes these interact in counteracting ways We ll go through one set here From Bruce Tognazzini In alphabetical, not importance, order I will highlight in red some of what I think are the most important items 2

3 Aesthetics Aesthetic design should be left to those schooled and skilled in its application: graphic/visual designers Fashion should never trump usability 3

4 Anticipation Bring the user all the information and tools needed for each step of the process Try to anticipate what the user might need at that moment Do not anticipate that the user will stop and find out the information from elsewhere Requires deep understanding and analysis The price for not anticipating is huge User may never come back Annoyed users may suggest other to avoid 4

5 Autonomy The computer, interface, and task environment all belong to the user, but user autonomy doesn t mean we abandon rules Enable users to make their own decisions, even ones aesthetically poor or behaviorally less efficient Example: Choice of color combination and other customizations (e.g., types of keyboard) that they prefer Exercise responsible control Another Example: Use status mechanisms to keep users aware and informed Keep status information up to date and within easy view Ensure status information is accurate 5

6 Color Color Blindness Any time you use color to convey information in the interface, you should also use clear, secondary cues to convey the information to those who cannot see the colors presented. Test your site to see what color-blind individuals see Color as a vital interface element Do not avoid color in the interface just because not every user can see every color Do not strip away or overwhelm color cues in the interface because of a passing graphic-design fad 6

7 Consistency (1) Levels of Consistency: The importance of maintaining strict consistency varies by level 1. Top level: Platform/In-house (e.g., all Microsoft products) 2. Consistency across a suite of products (e.g., MS Office) 3. Overall look&feel of a single app, splash screen, design elements, etc. 4. Small visible structures such as icons, symbols, buttons, scroll bars, etc. 5. Invisible structures (hidden interface features e.g., invisible scroll bars activated only while swiping in ipads) 6. Interpretation of user behavior (e.g., shortcuts stay same, next page button always on the bottom right corner) 7

8 Consistency (2) It is just as important to be visually inconsistent when things act differently as it is to be visually consistent when things act the same Over time, strive for continuity, not consistency The most important consistency is consistency with user expectations 8

9 Defaults Defaults within fields should be easy to blow away Defaults should be intelligent and responsive Both your vocabulary and visual design must communicate the scope of a reversion Using Tabs for going back and make changes, rather than the back button which would probably not keep their data entry 9

10 Discoverability (1) Any attempt to hide complexity will serve to increase it If you choose to hide complexity, do so in the showroom only If the user cannot find it, it does not exist Use Active Discovery to guide people to more advanced features Controls and other objects necessary for the successful use of software should be visibly accessible at all times 10

11 Discoverability (2) There is no elegance exception to discoverability Do not affect desktop applications negatively by borrowing ideas from cell phones With the exception of small mobile devices, controls do not belong in the middle of the content area Communicate your gestural vocabulary with visual diagrams Strive for balance Do not clutter the screen using hints for obvious items User cue is a valuable resource User-test for discoverability 11

12 Efficiency of the User Look at the user s productivity, not the computer s Example: Write extra code if necessary for validating phone number fields, because it becomes easier for humans Keep the user occupied To maximize the efficiency of a business or other organization, you must maximize everyone s efficiency, not just the efficiency of the IT department or a similar group Error messages should actually help 12

13 Exploreable Interfaces Offer users stable perceptual cues for a sense of home Make actions reversible Always allow undo Always allow a way out Make it easy and attractive to stay in 13

14 Fitts s Law The time to acquire a target is a function of the distance to and size of the target Predicted that Windows button is designed upside down The time to acquire multiple targets is the sum of the time to acquire each Fitts s Law is in effect regardless of the kind of pointing device or the nature of the target 14

Latency Reduction Wherever possible, use multithreading to push latency into the background Reduce the user s experience of latency Acknowledge

15 Latency Reduction Wherever possible, use multithreading to push latency into the background Reduce the user s experience of latency Acknowledge all button clicks by visual or aural feedback within 50 milliseconds Trap multiple clicks of the same button or object Image taken from AkTOG.com 15

16 Learnability Limit the Trade-Offs Between learnability & usability, decide which is most important, but attack both Depends on the application: Airport Kiosk vs IHOP employee portal/tool 16

17 Use of Metaphors Choose metaphors that will enable users to instantly grasp the finest details of the conceptual model Bring metaphors alive by appealing to people s perceptions: sight, sound, touch, and kinesthetics, as well as triggering their memories Expand beyond literal interpretation of realworld counterparts If a metaphor is holding you back, abandon it 17

18 Protect Users Work Ensure that users never lose their work Going back should not cause data loos 18

19 Readability Text that must be read should have high contrast Use font sizes that are large enough to be readable on standard displays Favor particularly large characters for the actual data you intend to display, as opposed to labels and instructions Menu and button labels should have the key words first, forming unique labels Test all designs on your oldest expected user population There s often an inverse relationship between the prettiness of a font and its readability 19

20 Simplicity Balance ease of installation vs. ease of use Avoid the illusion of simplicity Use progressive revelation to flatten the learning curve Do not simplify by eliminating necessary capabilities 20

21 State Because many of our browser-based products exist in a stateless environment, we have the responsibility to track state as needed State information should be stored in encrypted form on the server when they log off Make clear what you will store and protect the user s information 21

22 Visible Navigation Make navigation visible Limit screen counts by using overlays 22

23 References AskTOG: Source for most material in this presentation 23

User Interface Design. Slide Set to accompany. Software Engineering: A Practitioner s Approach, 7/e by Roger S. Pressman

User Interface Design. Slide Set to accompany. Software Engineering: A Practitioner s Approach, 7/e by Roger S. Pressman Chapter 11 User Interface Design Slide Set to accompany Software Engineering: A Practitioner s Approach, 7/e by Roger S. Pressman Slides copyright 1996, 2001, 2005, 2009 by Roger S. Pressman For non-profit