Virtual University HumanComputer Interaction Lecture 38 Behavior Form

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

In Last Lecture … • Unified document management • How to make software considerate • How to make software smart 2 Virtual University - Human Computer Interaction © Imran Hussain | UMT

Unified Document Management 3 • 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 Virtual University - Human Computer Interaction © Imran Hussain | UMT

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 4 Virtual University - Human Computer Interaction © Imran Hussain | UMT

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 5 Virtual University - Human Computer Interaction © Imran Hussain | UMT

Actions to remember • File locations • Deduced information • Past data entries 6 Virtual University - Human Computer Interaction © Imran Hussain | UMT

In Today’s Lecture … • Principles of visual interface design • Principles of visual information design 7 Virtual University - Human Computer Interaction © Imran Hussain | UMT

Conceptual Framework for Developing User Experience Web as hypertext system Web as software interface 4 surface 1 skeleton 2 3 structure scope strategy Task-oriented 8 Virtual University - Human Computer Interaction Information-oriented © Imran Hussain | UMT

What is Visual Art and what is Visual Design 9 Virtual University - Human Computer Interaction © Imran Hussain | UMT

Visual Art vs. Visual Design • Visual art – 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 10 Virtual University - Human Computer Interaction © Imran Hussain | UMT

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 11 Virtual University - Human Computer Interaction © Imran Hussain | UMT

Who are graphics designers 12 Virtual University - Human Computer Interaction © Imran Hussain | UMT

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 13 Virtual University - Human Computer Interaction © Imran Hussain | UMT

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) 14 Virtual University - Human Computer Interaction © Imran Hussain | UMT

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 15 Virtual University - Human Computer Interaction © Imran Hussain | UMT

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 16 Virtual University - Human Computer Interaction © Imran Hussain | UMT

… all these different kinds of designers need to work together 17 Virtual University - Human Computer Interaction © Imran Hussain | UMT

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 18 Virtual University - Human Computer Interaction © Imran Hussain | UMT

Avoid visual noise and clutter • Visual noise – Superfluous visual elements that take our attention away from those visual elements that directly communicate software function an behavior – Manifests as • • 19 Over-embellished elements Unnecessarily dimensional elements Overuse of rules and other elements to separate controls Insufficient use of white space Virtual University - Human Computer Interaction © Imran Hussain | UMT

Avoid visual noise and clutter • Cluttered interfaces – Controls interfere with each other • This affects speed and accuracy of user – Non-entertainment interfaces should use • • • 20 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) Virtual University - Human Computer Interaction © Imran Hussain | UMT

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” 21 Virtual University - Human Computer Interaction © Imran Hussain | UMT

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 22 Virtual University - Human Computer Interaction © Imran Hussain | UMT

Use contrast, similarity, and layering to distinguish and organize elements • 2 needs should addressed by providing contrast – 1 st: provide visual contrast between active, manipulable elements of the interface and passive, non-manipulable visual elements – 2 nd: 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 … – – 23 Dimensional, tonal, and spatial contrast Layering Figure and ground The squint test Virtual University - Human Computer Interaction © Imran Hussain | UMT

Dimensional, tonal, and spatial contrast • Dimensional contrast • Tonal contrast – Hue, saturation, brightness (value) used to distinguish controls from background or to group controls logically 24 Virtual University - Human Computer Interaction © Imran Hussain | UMT

Dimensional, tonal, and spatial contrast • Spatial contrast – – 25 Position Shape Orientation Size Virtual University - Human Computer Interaction © Imran Hussain | UMT

Dimensional, tonal, and spatial contrast • 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 26 Virtual University - Human Computer Interaction © Imran Hussain | UMT

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 27 Virtual University - Human Computer Interaction © Imran Hussain | UMT

Figure and ground • Humans perceive patterns via figure and ground • Figure – 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 28 Virtual University - Human Computer Interaction © Imran Hussain | UMT

Squint test • Helps to evaluate the contrast of interface • method – close one eye and squint on the screen with the other eye 29 Virtual University - Human Computer Interaction © Imran Hussain | UMT