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

2. In Last Lecture … Unified document management
How to make software considerate
How to make software smart

3. Unified Document Management
Automatically saving the document
Creating a copy of the document
Naming and renaming the document
Placing and repositioning the document
Specifying the stored format of the document
Reversing changes
Abandoning changes
Creating a milestone copy of the document

4. What makes software considerate?
Considerate software takes an interest
Considerate software is deferential
Considerate software is forthcoming
Considerate software uses common sense
Considerate software anticipates needs
Considerate software is conscientious
Considerate software doesn’t burden you with its problems

5. What makes software considerate?
Considerate software keeps you informed
Considerate software is perceptive
Considerate software is self-confident
Considerate software doesn’t ask a lot of questions
Considerate software fails gracefully
Considerate software knows when to bend rules
Considerate software takes responsibility

6. Actions to remember File locations Deduced information
Past data entries

7. In Today’s Lecture … Principles of visual interface design
Principles of visual information design

8. Conceptual Framework for Developing User Experience
Web as software interface
Web as hypertext system 4
surface 1
skeleton 3 2
structure
scope
strategy
Task-oriented
Information-oriented

9. What is Visual Art and what is Visual Design

10. Visual Art vs. Visual Design
Goal of artist is to produce an artifact that provokes an aesthetic response
Art is a means of self-expression on topics of emotional or intellectual concern to the artist
Few restraints are imposed on artist
Visual design
Designers create artifacts that meet goals of people
Design is concerned with finding the representation best suited to the communication of some specific information

11. Graphic design and visual interface design
Design of user interfaces does not exclude aesthetic concerns
It places these concerns within a functional framework
Visual design of interfaces requires several related skills
Color, typography, form, composition
Interaction, behavior of software

12. Who are graphics designers

13. Graphic design and user interfaces
Graphic designers
Dominated by medium of print (packaging, advertising, document design)
New breed of graphic designers trained in digital media can create rich, clean, visually consistent, aesthetically pleasing, and exciting interfaces
First priority in design: legibility and readability of information
Second priority: tone, style, framework that communicates brand, and finally communicating behavior through affordances

14. Visual interface design and visual information design
Visual interface designers
Focus more on organizational aspects of design and the way in which affordances communicate behavior to users
Have knowledge about principles of interaction
Match the visual structure of interface to logical structure of both the user’s and program’s behavior
Concerned with communication of program states to user
Concerned with cognitive issues surrounding user perception of functions (layout, grids, figure-ground issues, etc)

15. Visual interface design and visual information design
Visual information designers
Focus more on content and navigation rather than more interactive functions
Control information hierarchy through the use of visual language

16. Industrial design Industrial designers
Will increasing play role as interactive devices become more popular
Can have different focuses
Creation of arresting and appropriate shapes and skins of objects
Logical and ergonomic mapping of physical controls in a manner that matches user behaviors and communicates device behaviors

17. … all these different kinds of designers need to work together

18. Principles of visual interface design
Brain does visual processing
Discerns visual patterns and establishes a system of priorities
Important concepts …
Avoid visual noise and clutter
Use contrast, similarity, and layering to distinguish and organize elements
Provide visual structure and flow at each level of organization
Use cohesive, consistent, and contextually appropriate imagery
Integrate style and function comprehensively and purposefully

19. Avoid visual noise and clutter
Superfluous visual elements that take our attention away from those visual elements that directly communicate software function an behavior
Manifests as
Over-embellished elements
Unnecessarily dimensional elements
Overuse of rules and other elements to separate controls
Insufficient use of white space

20. Avoid visual noise and clutter
Cluttered interfaces
Controls interfere with each other
This affects speed and accuracy of user
Non-entertainment interfaces should use
Simple geometric shapes
Minimal contours
Less-saturated colors
Minimum Typography: 1 or 2 typefaces
Similar design elements used for similar purposes should be similar in visual attributes (shape, size, texture, color, weight, orientation, spacing, alignment)

21. Avoid visual noise and clutter
Efficiency and simplicity
Visual interfaces should be visually efficient
They should use minimal set of visual and functional elements
Quote
“perfection is attained not when there is no longer nothing to add, but when there is no longer anything to take away”

22. Avoid visual noise and clutter
Leverage
Using elements in an interface for multiple, related purposes
Example: a visual symbol that communicates the type of an object in a list, which when clicked, also opens the properties dialog for that object type
Have multiple functions assigned to visual elements

23. Use contrast, similarity, and layering to distinguish and organize elements
2 needs should addressed by providing contrast
1st: provide visual contrast between active, manipulable elements of the interface and passive, non-manipulable visual elements
2nd: provide contrast between different logical sets of active elements to better communicate their distinct functions
Provides a means of indicating the least and most important elements
Important concepts …
Dimensional, tonal, and spatial contrast
Layering
Figure and ground
The squint test

24. Dimensional, tonal, and spatial contrast
Dimensional contrast
Tonal contrast
Hue, saturation, brightness (value) used to distinguish controls from background or to group controls logically

25. Dimensional, tonal, and spatial contrast
Position
Shape
Orientation
Size

26. Dimensional, tonal, and spatial contrast
Position
Related elements together spatially helps make clear to the user what tasks relate to each other
Grouping by position takes into account the order of the tasks and subtasks and how eye scans the screen
Shape
Orientation
Up, down, left, right
Provide very subtle orientation cues
Size
Can relate to
Broadness of scope
Importance
Frequency of use

27. Layering
Interfaces can be organized by layering visual cues in individual elements or in the background on which the active elements rest
Visual attributes affecting perception of layers
Color
Dark, cool, desaturated colors recede
Light, warm, saturated colors advance
Size
Large elements advance
Small elements recede

28. Figure and ground Humans perceive patterns via figure and ground
Visual elements that should be focus of user
Ground
Background context on which figure appears
People generally perceive light objects as figure and dark objects as ground

29. Squint test Helps to evaluate the contrast of interface method
close one eye and squint on the screen with the other eye