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

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

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

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

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

Actions to remember File locations Deduced information Past data entries

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

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

What is Visual Art and what is Visual Design

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

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

Who are graphics designers

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

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)

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

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

… all these different kinds of designers need to work together

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

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

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)

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”

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

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

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

Dimensional, tonal, and spatial contrast Position Shape Orientation Size

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

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

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

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