User Interface Design. Lecture 6 Lecture 6 Design Guidance

Transcription

1 User Interface Design Lecture 6 Lecture 6 Design Guidance

2 C. Patanothai :06 Design Guidance 2

3 Design Guidance standards guidelines style guides design principles simplicity structure consistency it tolerance C. Patanothai :06 Design Guidance 3

4 Sources of Design Guidance standard set of internationally agreed design principles, p or approaches design guidelines between design principles & design rules style guide collection of design rules C. Patanothai :06 Design Guidance 4

5 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 :06 Design Guidance 5

6 ISO 13407: Human Centered Design Processes for Interactive Systems Benefits: Systems are easier to understand and use Discomfort and stress are reduced Usersatisfaction satisfaction is improved Productivity and efficiency is improved Quality, aesthetics and impact are improved C. Patanothai :06 Design Guidance 6

7 ISO 13407: Human Centered Design Processes for Interactive Systems Essential Elements Active involvement of and clear understanding of users Appropriate allocation of functions between users and technology Iteration of design solutions Multidisciplinary design perspective C. Patanothai :06 Design Guidance 7

8 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 :06 Design Guidance 8

9 Commercial Style Guides Apple Human Interface Guidelines for the Macintosh ceptual/applehiguidelines/xhigintro/xhigintro.html Windows User Experience (UX) Interaction Guidelines bce8 4dba a9d5 2d4e3f3ec1d3/ux%20guide.pdf IBM s Common User Access (CUA) Motif Style Guide oup.o g/ ot / ot.data.s eet. t Sun s Java Look and Feel Android User Interface Guidelines C. Patanothai :06 Design Guidance 9

10 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 :06 Design Guidance 10

11 Design Principle simplicity structure consistency tolerance C. Patanothai :06 Design Guidance 11

12 Simplicity keeping UI as simple as possible communicated in theusers language actions, icons, words, controls natural to the users break complex tasks into simple subtasks C. Patanothai :06 Design Guidance 12

13 Simplicity C. Patanothai :06 Design Guidance 13

14 Exercise: Criticize this web C. Patanothai :06 Design Guidance 14

15 Structure Organization of the UI in a meaningful way C. Patanothai :06 Design Guidance 15

16 Consistency Uniformity in appearance, placement, and behavior C. Patanothai :06 Design Guidance 16

17 Tolerance Prevent user from making mistakes Prevention Recoverability Forward error recovery system accepts theerror error and helps the user to accomplish their goal Backward error recovery undo the effects of the previous interaction C. Patanothai :06 Design Guidance 17

18 Constructive Error Messages Explain errors using specific, constructive terms Provide additional explanation during error correction, if request Use language the user will understand Use positive language Mk Make sure that t the system takes tk the blame for the errors. C. Patanothai :06 Design Guidance 18

19 Accessibility Universal design W3C Web Content Accessibility Guidelines Section 508 C. Patanothai :06 Design Guidance 19

20 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 :06 Design Guidance 20

21 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 :06 Design Guidance 21

22 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 :06 Design Guidance 22

23 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 :06 Design Guidance 23

24 W3C WCAG2 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 :06 Design Guidance 24

25 W3C WCAG2 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 anduse 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 :06 Design Guidance 25

26 W3C WCAG2 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 :06 Design Guidance 26

27 W3C WCAG2 WCAG2.0 Principle 4: Robust Guideline 4.1 Content must be robust enough that it can be interpreted reliably by a wide variety of useragents agents, includingassistive technologies. Compatible: Maximize compatibility with current and future user agents, including assistive technologies. C. Patanothai :06 Design Guidance 27

28 Section U.S. directive electronic and information technology that is developed, d procured, maintained, i 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 :06 Design Guidance 28

29 Section 508 Web based Intranet and Internet Information and Applications ( ) board.gov/sec508/guide/ htm C. Patanothai :06 Design Guidance 29

30 () (a) Text tags A text equivalent for every non text element shall hllbe provided (e.g., via "alt", "longdesc", or in element content). (b) Multimedia presentations (c) Color (d) Readability (e) Server side image map 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 ih requiring ii an associated style sheet. Redundant text links shall be provided for each active region of a server side side image map. C. Patanothai :06 Design Guidance 30

31 (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. Markupshall 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 hllbe titled il with ihtext that facilitates frame identification ifi i 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 d to make a web site comply with the provisions i of these standards, when compliance cannot be accomplished in any other way. The content of the text only page shall be updated whenever the primarypagepage changes. C. Patanothai :06 Design Guidance 31

32 (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, t the page must provide a link kto a plug in or applet tthat t 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 :06 Design Guidance 32