8 Golden Rules. C. Patanothai :04-Knowledge of User Interface Design 1

Transcription

1 8 Golden Rules Strive for consistency Enable frequent users to use shortcuts Offer informative feedback Design dialog to yield closure Offer simple error handling Permit easy reversal of actions Support internal locus of control Reduce short-term memory load C. Patanothai :04-Knowledge of User Interface Design 1

2 Sources of Design Guidance standard set of internationally agreed design principles, or approaches design guidelines between design principles & design rules style guide collection of design rules C. Patanothai :04-Knowledge of User Interface Design 2

3 User Interface Standards ISO 9241: Ergonomic requirements for office work with visual display terminals (VDTs) ISO 14915: Software ergonomics for multimedia user interfaces ISO 13407: Human-centered design processes for interactive systems ISO/CD 20282: Ease of operation of everyday products C. Patanothai :04-Knowledge of User Interface Design 3

4 Style Guides Description of required interaction styles and user interface controls Guidance on when and how to use the various styles or controls Illustrations of styles and controls Screen templates C. Patanothai :04-Knowledge of User Interface Design 4

5 Commercial Style Guides ios Human Interface Guidelines ce/conceptual/mobilehig/introduction/introduction.html Windows User Experience (UX) Interaction Guidelines IBM s Common User Access (CUA) Motif Style Guide Sun s Java Look and Feel Android User Interface Guidelines ml C. Patanothai :04-Knowledge of User Interface Design 5

6 Customized Style Guides Helps focus on design issues early Enables use of principles and guidelines Steer decision making and serve as record Ensures consistency C. Patanothai :04-Knowledge of User Interface Design 6

7 Accessibility Universal design W3C Web Content Accessibility Guidelines bility Section 508 C. Patanothai :04-Knowledge of User Interface Design 7

8 Universal Design the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design. Ron Mace, Center for Universal Design, NCSU. C. Patanothai :04-Knowledge of User Interface Design 8

9 The Principles of Universal Design Equitable use Flexibility in use Simple and intuitive use Perceptible information Tolerance for error Low physical effort Size and space for approach and use C. Patanothai :04-Knowledge of User Interface Design 9

10 W3C Web Content Guidelines W3C WCAG general principles of accessible design 1. Provide alternatives to auditory and visual content 2. Don t rely on color alone 3. Use markup and style sheets properly 4. Clarify natural language usage 5. Create tables that transform gracefully 6. New technology pages transform gracefully C. Patanothai :04-Knowledge of User Interface Design 10

11 W3C Web Content Guidelines 7. Ensure user control of time-sensitive content changes 8. Ensure direct accessibility of embedded user interfaces 9. Design for device independence 10. Use interim solutions (for older browsers to function) 11. Use W3C technologies and guidelines 12. Provide context and or entation information 13. Provide clear navigation mechanisms 14. Ensure that documents are clear and simple C. Patanothai :04-Knowledge of User Interface Design 11

12 W3C-WCAG2.0 Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive. Guideline 1.1 Text alternatives Guideline 1.2 Time-bases media Guideline 1.3 Adaptable Guideline 1.4 Distinguishable C. Patanothai :04-Knowledge of User Interface Design 12

13 W3C-WCAG2.0 Principle 2: Operable - User interface components and navigation must be operable. Guideline 2.1 Guideline 2.2 Guideline 2.3 Guideline 2.4 Keyboard Accessible: Make all functionality available from a keyboard. Enough Time: Provide users enough time to read and use content. Seizures: Do not design content in a way that is known to cause seizures. Navigable: Provide ways to help users navigate, find content, and determine where they are. C. Patanothai :04-Knowledge of User Interface Design 13

14 W3C-WCAG2.0 Principle 3: Understandable - Information and the operation of user interface must be understandable. Guideline 3.1 Readable: Make text content readable and understandable. Guideline 3.2 Predictable: Make Web pages appear and operate in predictable ways. Guideline 3.3 Input Assistance: Help users avoid and correct mistakes. C. Patanothai :04-Knowledge of User Interface Design 14

15 W3C-WCAG2.0 Principle 4: Robust - Guideline 4.1 Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. Compatible: Maximize compatibility with current and future user agents, including assistive technologies. C. Patanothai :04-Knowledge of User Interface Design 15

16 Section U.S. directive electronic and information technology that is developed, procured, maintained, and/or used by federal departments and agencies must be accessible and usable by federal employees and members of the public with disabilities C. Patanothai :04-Knowledge of User Interface Design 16

17 Section 508 Web-based Intranet and Internet Information and Applications ( ) htm C. Patanothai :04-Knowledge of User Interface Design 17

18 (a) Text tags (b) Multimedia presentations (c) Color (d) Readability (e) Server-side image map A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. Documents shall be organized so they are readable without requiring an associated style sheet. Redundant text links shall be provided for each active region of a server-side image map. C. Patanothai :04-Knowledge of User Interface Design 18

19 (f) Client-side image maps Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. (g) & (h) Data table Row and column headers shall be identified for data tables. Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. (i) Frames Frames shall be titled with text that facilitates frame identification and navigation. (j) Flicker rate Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. (k) Text-only alternative A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of these standards, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes. C. Patanothai :04-Knowledge of User Interface Design 19

20 (l) Scripts (m) Applets and plug-ins (n) Electronic forms (o) Navigation links (p) Time delays When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with (a) through (l). When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. A method shall be provided that permits users to skip repetitive navigation links. When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. C. Patanothai :04-Knowledge of User Interface Design 20