Human Interface Guidelines Networking Lab Lee Ho Jae

Introduction Principles to create excellent software Good human interface with design and processes

Design Process – Involving Users Know your Audience - Define, understand, similar product, design for customers Analyze User Tasks - Define & analyze, conceptual model, overall workflow Build Prototypes - Prototype to test and verify design - Storyboard, prototyping software, writing code

Design Process – Involving Users Observe Users - Try out prototype and observe reactions - Verify test scope and instructions - Supplement prototype with results Guidelines for Observing Users - Describe test purpose, duration - Test product, not the participant - Think-aloud protocol - Without any interference or extra help - Use the result as it is (don’t blame users for inexperience) - Review all results with a cross-functional team

Design Process – Making Design Decisions Weigh the cost against the potential benefits Adding a feature to application - Larger, slower, complex, conflict each other, documentation Avoid feature cascade - Appropriate feature to original intent and main workflow Apply the 80 Percent Solution - Meet the needs of at least 80 percent of users

Characteristics of Great Software High Performance - Frequently measure using metrics(not assumptions) - Modern APIs, threads, memory management system - Avoid polling, unnecessary I/O, loading resource before use Ease of Use - Metaphors, feature with real benefit - Intelligent default settings - Present information step by step - Useful error messages, undo, redo - Internationalize and assistive to disabilities

Characteristics of Great Software Attractive Appearance - Use high-quality graphics and icons, 32-bit color - Use system-provide interface builder - Use modern APIs Reliability - Earn user’s trust (integrity of user’s data) - A predictable user interface (same action, same result) - Validate user input (data type, length, …) - Test software under various conditions - Use modern APIs, standard-based APIs

Characteristics of Great Software Adaptability - Keep working even if the current conditions change - If file system or network fails…? - Changes in screen availability and resolution Interoperability - Communicate across environments - Same file format, extensions on all platform - Standard data-exchange protocol - Save configuration data using system preferences

Characteristics of Great Software Mobility - Battery power, movability, configuration changes - Avoid polling, minimize access on movable drive - Be sensitive to screen resolution changes

Human Interface Design - Principles Metaphor - Convey concepts and features - File folders storing documents, iTunes, iPhoto Reflect the User’s Mental Model - Experience from real-world, other software - Familiarity, Simplicity, Availability, Discoverability Explicit and Implied Actions - See, Select, Perform - Menu list, drag-and-drop operation Direct Manipulation - Implied Action - Drag selected text, resizing of a graphic object

Human Interface Design - Principles User Control - User decides everything - Help only with an appropriate warning Feedback and Communication - Inform users of current status of application - MSN is going to tray. Progress indicator Consistency - Consistent terminology, icons - Versions, user’s expectations WYSIWYG - Printing, Publish - Features easily accessible (Don’t hide in menu)

Human Interface Design - Principles Forgiveness - Easily reversible action, warning for irreversible loss Perceived Stability - Use standard graphical elements - Dimmed menu item, user-modifiable settings Aesthetic Integrity - High quality of icons, anti-aliased text - Consistent scale in fonts, controls Modelessness - Exception : short-term mode, alert, installer

Human Interface Design - Principles Managing Complexity - Complex task, simple interface - Progressive disclosure, separated info-window, preferences

Human Interface Design - Users Worldwide Compatibility - Cultural Values (Owl – wisdon/black magic, holiday) - Language differences (standard usage/syntax) - Text Display/Editing (align direction, scanner) - Resource (region dependent data, logical flow of content) Universal Accessibility - Visual Disabilities (high contrast, text sizes, zooming, voice) - Hearing Disabilities (visual cue come with audible cue) - Physical Disabilities (Sequentially instead simultaneously)

Human Interface Design – Extend Interface Build on the Existing Interface - Push button (round shaped with a label) Don’t Assign New Behaviors to Existing Objects Create a New Interface Element Cautiously - Avoid unnecessary complexity - Apply changes to new user interface from system interface

Prioritizing Design Decisions Meet Minimum Requirements - Single menu bar, multilayered window - Files in proper locations, Standard Controls - Avoid system-reserved keyboard shortcuts

Prioritizing Design Decisions Deliver the Feature Users Expect - Communication (error messages, feedback on commands) - High-quality graphics - User assistance (Help), Drag-and-drop

Prioritizing Design Decisions Differentiate Your Application - Modelessness, fast user switching (only login) - Internationalization of interface - Accessibility to users with disabilities - High Performance and reliability - Surprise and delight (keep user’s mental model in mind)