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


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


In Today’s Lecture …

• Principles of visual interface design

• Principles of information design

• Use of text and color in visual interfaces

• Consistency and standards


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


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


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



• Simple is better– Ambiguity and complexity

do not create good design



• Vertical symmetry



• Layout must mirror the user’s logical path

•User’s move fromTop to bottomLeft to right


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)


Symmetry and balance


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


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


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


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


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


Visualizing behaviors

• Use visual elements to show user what the results will be


Visualizing behaviors


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


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


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)


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


Enforce visual comparisons

• Provide a means for user to compare related variables and trends

• Comparison provides a context which makes information more valuable


Enforce visual comparisons


Show causality

• Graphics clarify cause and effect

• Modeless feedback should be provided to inform user of potential consequences of actions


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

• 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


Don’t de-quantify quantifiable data


Use of text and color in visual interfaces


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


Use of text Some guidelines


Arial

Times New Roman

Arial Arial

Use of text


Login to the information system

Login

Use of text

• Use min. number of words


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


Misuse of color

• Inadequate contrast

• Inadequate attention to color impairment

39 behaviorform vii

Documents