1 / 42

Imran Hussain University of Management and Technology (UMT)

Virtual University Human-Computer Interaction. Lecture 38 Behavior & Form – Part VII. Imran Hussain University of Management and Technology (UMT). In Last Lecture …. Difference between various terms and terminologies used in design process Visual arts Visual design

claudec
Télécharger la présentation

Imran Hussain University of Management and Technology (UMT)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Virtual University Human-Computer Interaction Lecture 38Behavior & Form – Part VII Imran Hussain University of Management and Technology (UMT)

  2. In Last Lecture … • Difference between various terms and terminologies used in design process • Visual arts • Visual design • Interface and information design • Principles of visual interface design • Avoid visual noise and clutter • How to use contrast and layering to distinguish and organize elements within the interface

  3. In Today’s Lecture … • Principles of visual interface design • Principles of information design • Use of text and color in visual interfaces • Consistency and standards

  4. Provide visual structure and flow at each level of organization • an Interface may consist of several visual and behavioral elements • Grouping may be by • Position, alignment, color, texture, size, shape • There Must be a clear visual structure

  5. Provide visual structure and flow at each level of organization • Important concepts … • Alignment, grids, and user’s logical path • Symmetry and balance • Spatial harmony and white space

  6. Alignment, grids, and user’s logical path • Important points • Align labels • Align within a set of controls • Align across controls • Follow a regular grid structure

  7. Alignment, grids, and user’s logical path

  8. Alignment, grids, and user’s logical path

  9. Alignment, grids, and user’s logical path

  10. Alignment, grids, and user’s logical path

  11. Simple is better Ambiguity and complexity do not create good design Alignment, grids, and user’s logical path

  12. Vertical symmetry Alignment, grids, and user’s logical path

  13. Layout must mirror the user’s logical path Alignment, grids, and user’s logical path • User’s move from • Top to bottom • Left to right

  14. Alignment, grids, and user’s logical path

  15. Symmetry organizes interfaces by providing visual balance 2 types of symmetry employed in user interfaces Vertical axial symmetry Symmetry along a line Diagonal axial symmetry Symmetry along a diagonal line (lower left to upper right – see screenshot) Symmetry and balance

  16. Symmetry and balance

  17. Spatial harmony and white space • Spatial harmony considers the interface as a whole • Certain proportions are more pleasing to eye • Harmony created by • White space • Proper dimensioning of functional regions • Get proportions right

  18. Use cohesive, consistent, and contextually appropriate imagery • Icons and other illustrative elements can help user • Understanding of cultural issues • China: red • Turkey: thumbs up • US: octoganal symbol means stop • Visual elements should be part of a cohesive and globally applied visual language • Similar elements should share similar visual attributes (line weight, size, etc.) • Important concepts … • Function-oriented icons • Associating visual symbols to objects • Rendering icons and visual symbols • Visualizing behaviors

  19. Function-oriented icons • Icons are designed to represent functions or operations performed on objects • Challenge is to represent an abstract concept in iconic, visual language • Best to rely on idioms rather than force a concrete representation • Guidelines for Function-oriented icons • Represent both the action and an object acted upon • Group related functions visually to provide context (spatially, color) • Keep icons simple, avoid excessive visual detail • Reuse elements where possible, so that users need to learn them only once

  20. Associating visual symbols to objects • Creating unique visual symbols for objects leads to faster user recognition • Use symbol wherever objects are represented on screen • Visually differentiate objects that exhibit different behaviors • Buttons, sliders, checkboxes

  21. Rendering icons and visual symbols • Avoid rendering icons in photographic detail • Icons should be simple and schematic • Minimizing colors and shades • size should be modest

  22. Visualizing behaviors • Use visual elements to show user what the results will be

  23. Visualizing behaviors

  24. Integrate style and function comprehensively and purposefully • Designers must apply stylistic elements to interface from global perspective • Functional aspects of visual interface design should be in harmony with visual brand of a product

  25. Form vs. function • Use of stylized visual elements must be controlled • Basic shape, visual behavior and visual affordance must not be affected • Entertainment and children’s software

  26. Principles of visual information design • 2 important problems in information design (Tufte) • It is difficult to display multi-dimensional information (info with more than 2 variables) on a 2-D surface • The resolution of the display surface is often not high enough to display dense information (computers have low information density compared to paper)

  27. Principles of visual information design • Important concepts … (Tufte) • Enforce visual comparisons • Show causality • Show multiple variables • Integrate text, graphics, and data in one display • Ensure the quality, relevance, and integrity of the content • Show things adjacently in space, not stacked in time • Don’t de-quantify quantifiable data

  28. Enforce visual comparisons • Provide a means for user to compare related variables and trends • Comparison provides a context which makes information more valuable

  29. Enforce visual comparisons

  30. Show causality • Graphics clarify cause and effect • Modeless feedback should be provided to inform user of potential consequences of actions

  31. Show multiple variables

  32. Integrate text, graphics, and data in one display

  33. Ensure the quality, relevance, and integrity of the content

  34. Show things adjacently in space, not stacked in time • If you are showing changes over time, it’s much easier if changes are shown adjacently in space • Animation can be used, provided there are no technical constraints

  35. Don’t de-quantify quantifiable data

  36. Use of text and color in visual interfaces

  37. Use of text • Humans processing • the form of text should be such that it has recognizable shape • Each world should be recognizable • WORDS TYPES IN ALL CAPITAL LETTERS ARE HARDER TO READ

  38. Use of text Some guidelines

  39. Use of text Arial Arial Arial Times New Roman

  40. Use of text • Use min. number of words Login to the information system Login

  41. Use of color • Color now found in most interactive devices • Color serves a real, useful purpose • Good visual interface design tool • Communicates as part of the visual language of interface • Color should integrate well into other elements • Color draws attention • Colors improves navigation and scanning speed • Color shows relationships

  42. Misuse of color • Inadequate contrast • Inadequate attention to color impairment

More Related