39 BehaviorForm VII
-
Upload
marina-shahid -
Category
Documents
-
view
2 -
download
0
description
Transcript of 39 BehaviorForm VII
Virtual University - Human Computer Interaction1 © Imran Hussain | UMT
Imran HussainUniversity of Management and Technology (UMT)
Lecture 38Behavior & Form – Part VII
Virtual University Human-Computer Interaction
Virtual University - Human Computer Interaction2 © Imran Hussain | UMT
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
Virtual University - Human Computer Interaction3 © Imran Hussain | UMT
In Today’s Lecture …
• Principles of visual interface design
• Principles of information design
• Use of text and color in visual interfaces
• Consistency and standards
Virtual University - Human Computer Interaction4 © Imran Hussain | UMT
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
Virtual University - Human Computer Interaction5 © Imran Hussain | UMT
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
Virtual University - Human Computer Interaction6 © Imran Hussain | UMT
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
Virtual University - Human Computer Interaction7 © Imran Hussain | UMT
Alignment, grids, and user’s logical path
Virtual University - Human Computer Interaction8 © Imran Hussain | UMT
Alignment, grids, and user’s logical path
Virtual University - Human Computer Interaction9 © Imran Hussain | UMT
Alignment, grids, and user’s logical path
Virtual University - Human Computer Interaction10 © Imran Hussain | UMT
Alignment, grids, and user’s logical path
Virtual University - Human Computer Interaction11 © Imran Hussain | UMT
Alignment, grids, and user’s logical path
• Simple is better– Ambiguity and complexity
do not create good design
Virtual University - Human Computer Interaction12 © Imran Hussain | UMT
Alignment, grids, and user’s logical path
• Vertical symmetry
Virtual University - Human Computer Interaction13 © Imran Hussain | UMT
Alignment, grids, and user’s logical path
• Layout must mirror the user’s logical path
•User’s move fromTop to bottomLeft to right
Virtual University - Human Computer Interaction14 © Imran Hussain | UMT
Alignment, grids, and user’s logical path
Virtual University - Human Computer Interaction15 © Imran Hussain | UMT
Symmetry and balance
• 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)
Virtual University - Human Computer Interaction17 © Imran Hussain | UMT
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
Virtual University - Human Computer Interaction18 © Imran Hussain | UMT
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
Virtual University - Human Computer Interaction19 © Imran Hussain | UMT
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
Virtual University - Human Computer Interaction20 © Imran Hussain | UMT
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
Virtual University - Human Computer Interaction21 © Imran Hussain | UMT
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
Virtual University - Human Computer Interaction22 © Imran Hussain | UMT
Visualizing behaviors
• Use visual elements to show user what the results will be
Virtual University - Human Computer Interaction24 © Imran Hussain | UMT
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
Virtual University - Human Computer Interaction25 © Imran Hussain | UMT
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
Virtual University - Human Computer Interaction26 © Imran Hussain | UMT
Principles of visual information design
• 2 important problems in information design (Tufte)1. It is difficult to display multi-dimensional information (info with more
than 2 variables) on a 2-D surface2. The resolution of the display surface is often not high enough to display
dense information (computers have low information density compared to paper)
Virtual University - Human Computer Interaction27 © Imran Hussain | UMT
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
Virtual University - Human Computer Interaction28 © Imran Hussain | UMT
Enforce visual comparisons
• Provide a means for user to compare related variables and trends
• Comparison provides a context which makes information more valuable
Virtual University - Human Computer Interaction30 © Imran Hussain | UMT
Show causality
• Graphics clarify cause and effect
• Modeless feedback should be provided to inform user of potential consequences of actions
Virtual University - Human Computer Interaction32 © Imran Hussain | UMT
Integrate text, graphics, and data in one display
Virtual University - Human Computer Interaction33 © Imran Hussain | UMT
Ensure the quality, relevance, and integrity of the content
Virtual University - Human Computer Interaction34 © Imran Hussain | UMT
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
Virtual University - Human Computer Interaction35 © Imran Hussain | UMT
Don’t de-quantify quantifiable data
Virtual University - Human Computer Interaction36 © Imran Hussain | UMT
Use of text and color in visual interfaces
Virtual University - Human Computer Interaction37 © Imran Hussain | UMT
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
Virtual University - Human Computer Interaction39 © Imran Hussain | UMT
Arial
Times New Roman
Arial Arial
Use of text
Virtual University - Human Computer Interaction40 © Imran Hussain | UMT
Login to the information system
Login
Use of text
• Use min. number of words
Virtual University - Human Computer Interaction41 © Imran Hussain | UMT
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