Principles of User Interface Design in Human-Computer Interaction

Slide Note

User interface design principles play a crucial role in Human-Computer Interaction, emphasizing the importance of aesthetics, anticipation, autonomy, color usage, and consistency in creating effective interfaces. These principles guide designers in crafting interfaces that are visually appealing, user-friendly, and accessible to all users. By following established heuristics and guidelines, designers can enhance the usability and user experience of interactive systems.

kdumo Follow

Uploaded on Sep 27, 2024 | 0 Views

Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

E N D

Presentation Transcript

Human-Computer Interaction: User Interface Principles CSCE 315 Programming Studio Project 3 Slides by John Keyser

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

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

Anticipation System should anticipate what the users might need. Bring the user all the information and tools needed for each step of the process 4

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 Exercise responsible control 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

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 http://enably.com/chrometric/. http://www.colblindor.com/coblis-color-blindness-simulator/ 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

Consistency (1) Levels of Consistency: The importance of maintaining strict consistency varies by level 1. Top level: Platform/In-house 2. Consistency across a suite of products 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) 6. Interpretation of user behavior 7

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 (with previous versions), not consistency The most important consistency is consistency with user expectations 8

Defaults Default values within text entry fields should be easy to blow away (clear out) Defaults should be intelligent and responsive (e.g. google search: my professor ) Replace the word default with a more meaningful and responsive item Standard , Customary , Initial , etc. Both your vocabulary and visual design must communicate the scope of a reversion 9

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

Discoverability (2) There is no elegance exception to discoverability 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 User-test for discoverability 11

Efficiency of the User Look at the user s productivity, not the computer s 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 The great efficiency breakthroughs in software are to be found in the fundamental architecture of the system, not in the surface design of the interface Error messages should actually help 12

Explorable Interfaces Give users well-marked roads and landmarks, then let them shift into four-wheel drive (explore) Sometimes you do have to provide track with deep ruts to guide the users 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

Fittss Law The time to acquire a target is a function of the distance to and size of the target 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 Fitt s Law requires a stop watch test 14

Human Interface Objects Human-interface objects can be seen, heard, felt, or otherwise perceived Human-interface objects have a standard way of being manipulated Human-interface objects have standard resulting behaviors Human-interface objects should be understandable, self-consistent, and stable Use a new object when you want a user to interact with it in a different way or when it will result in different behavior 15

Latency Reduction Wherever possible, use multithreading to push latency into the background Make it faster to begin with 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 Keep users informed when they face delay to 2 seconds: animated mouse cursor or busy indicator >2 seconds: Tell them potential length of wait >5 seconds: Use an animated progress indicator >10 seconds: Keep users a) informed and b) entertained >15 seconds: same as >10 plus add at end a noticeable sound and strong visual indication so users know to return 16

Learnability Limit the Trade-Offs Between learnability & usability, decide which is most important, but attack both Avoid only testing for learnability 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 real- world counterparts If a metaphor is holding you back, abandon it 18

Protect Users Work Ensure that users never lose their work 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 20

Simplicity Balance ese 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 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 22