HCI 2015 (4/10) Visual Design. Information Architecture. Design Patterns

Master on Software Engineering :: Human-Computer Interaction

Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco

Human-Computer Interactionfrom information architecture

to design patterns



“I’ve been amazed at how often those outsidethe discipline of design assume that

what designers do is decoration.Good design is problem solving.”

Jeff Veen



UI designvisual design



UI designvisual design

visualization = graphical representation of data/concepts

Ware, 2004



Visual design

Main elements (Dan Saffer, 2006):

layoutgrid

visual flowtypography

color, shape, texture



Visual design


layout

where & how content and interaction controls are placed

http://alistapart.com/topic/layout-grids



Visual design


grid

gives a coherent structure of information

www.thegridsystem.org



Visual design


visual flow

refers to methods of understanding and/or interactingwith presented data



Visual design

discussion



Visual design


typography

presents the textual content via fontsconforming to certain presentation rules

http://webtypography.net/toc/



Visual design


color, shape, texture

most important visual dimensionsused for a proper perception of information



case study

color semanticssyntax highlightingcolor-pick control



Visual design

Form versus function

for the majority of users,the look & feel is more important than functionality

remember UX?



Visual design

Common mistakes

lack of organization (structure)visual interference

complexityexcessive details

lack of adaptability



Strategies

visual focusconsistencymodularityadaptability

Visual design



Strategies

visual focusconsistencymodularityadaptability

responsive (Web) design

Visual design

next lecture



Visual design

To properly present information,visual dimensions are used



Visual design

To properly present information,visual dimensions are used



Visual design

Different perceptionsregarding a certain visual dimension



Visual design

Different perceptionsregarding a certain visual dimension

insignificant differences must be eliminated

simplicity



Visual design

Visual dimensions are distinguished viavisual variables (Jacques Bertin, 1989)



Visual design


do not require additional cognitive processing



Visual design


communicationdata codification

indicating differences between UI elements



Visual design

Example: showing the temperature

any visual variable could be used

color (hue), position relative to a scale,length of thermometer, using an icon (shape),…



Visual design

Visual variables have different levels of perception

>100 levels – hue and value~10 levels – size

~4 levels – orientation



Visual design

Some visual variables could not be easily recognized



detect all letters placed in the right



detect all letters placed in the rightwe must perceive only the position



detect all green letters



detect all green letterswe are using hue as a visual variable



detect all N letters



detect all N letters (shape)interferences: multiple visual variables



Visual design

Perception could be associative

associative visual variables:position, hue, texture, shape, orientation



Visual design


non-associative visual variables:size, value



Visual design


non-associative visual variables:size, value

example:the color of small objects is difficult to be perceived



Visual design

Modularity (grouping) could be achieved by consideringthe Gelstalt principles of perception

using visual perception, the mind createsthe entire picture (Gelstalt) from existing fragments



www.interaction-design.org/encyclopedia/data_visualization_for_human_perception.html

various examples: http://tinyurl.com/y6ao7k



discussion



Necessity

A certain structure and presentation mannerfor the information in order to be easily

perceived and consumed by users



Solution

IA – Information Architecture



Information Architecture

Software applications are organized by using

lists of objectssequences of actions

lists of categories (topics) of interestlists of software tools/components




Lists of objects

denoted by substantives

examples:operating system updates, e-mails,

shared pictures, locations of interest,…




Lists of objects

denoted by substantives

ideally, the application could recommend interesting items

for each user




Sequences of actions

specified by verbs

e.g., browse, buy, register, sell, subscribe,…




Sequences of actions

specified by verbs

e.g., browse, buy, register, sell, subscribe,…

software could suggest certain actions to be selectedby the users, conforming to their profiles






Substantive–verb versus verb–substantiveobject–action versus action–object





it is recommended to usethe substantive-verb style of interaction

Raskin, 2000





verb-substantive style could be useful for toolboxes

why?




Lists of categories (topics) of interest

context: information-centric applications

examples:science, technologies, entertainment, etc.






Lists of software tools/components

useful for task-oriented applications

e.g., calendar, text editor, resource manager,…




Aspects:

nature and domain of the software application




Aspects:

background knowledge of the target users




Aspects:

context of interaction



How information could be organized?




Linear presentation

usually, different sorting criteria are applied:alphabetical, spatial, temporal, significance,…








Bidimensional presentation

2 criteria/dimensions of interest are considered

examples:geographical location + time




Bidimensional presentation

a common use:grid-based visualization of data






Hierarchical presentation

tree-like structures having one or more levels

used to show certain relations between things:parent–child, grouping, etc.








Context-based presentation

spacetime

user profile




Context-based presentation

spacetime

user profile

examples:maps, charts, timelines, recommended information,…








Complex presentation

could use a combination of previous solutions



3D visualization of the DOM – Mozilla Firefoxcontributor: Victor Porof, Tilt project (2011—2012)




Traditionally, the presentation of data will employ

regions: windows, pages+

interaction elements: UI controls




organizing information




Design patternsrecurring solutions that solve common design problems




Design patternsrecurring solutions that solve common design problems

J. Tidwell, Designing Interfaces, O’Reilly, 2005

Ecaterina Moraru, Interaction Design Patterns, 2011http://profs.info.uaic.ro/~evalica/patterns/




Two-panel selectorJenifer Tidwell, 2005

used to show selectable interactive elements

for each selected element,certain details or its content could be presented




h5ai – a beautified Apache index based on HTML5http://larsjung.de/h5ai/




Two-panel selector

useful for presentation of lists:resourcescategories

actions…




Two-panel selector

decreases the interaction effort: e.g., mouse manipulation

reduces the cognitive load

facilitates exploration







Canvas + paletteJenifer Tidwell, 2005

offers a palette (toolbox) containing objects/actionsused in conjunction to a workplace (canvas)



MacPaint (1984)versus

Photoshop (now)




Canvas + palette

used by visual editing applications to create objectsand to arrange them within a virtual space




Canvas + palette

the palette facilitates visual recognition via icons(sometimes, grouped by categories)

for interaction,selections or drag & drop could be adopted




One-window drilldownJenifer Tidwell, 2005

presenting information by using a single window only






One-window drilldown

useful for depicting the content on reduced-size screens:mobile device, TV, appliance, etc.

see also A. Dawson, “The Science Behind a Single Page Website”http://sixrevisions.com/web_design/the-science-behind-a-single-page-website/




Alternative viewsJenifer Tidwell, 2005

user has the possibility to choose alternative views

these presentations are structurally different,not just visually






Alternative views

accommodate certain user preferences or goalsregarding a given context of interaction




Wizard

instructs user to execute step-by-step actions,conforming to a predefined scenario

“don’t make me think, just tell me what to do next”






Wizard

must provide:

an accurate (logical) sequence of tasks+

a suitable structure of presented information




Extras on demandJenifer Tidwell, 2005

presenting main information only, “hiding” the details






Extras on demand

make sure the entrance to and exit fromthe “extras” window/page are obvious




Multi-level helpJenifer Tidwell, 2005

using multiple help methods,directly located in the user interface







design patterns: exploration




Locating objects in the user proximity

signposts

window/page titlelogo

selection signage…




Help users to find the way towards their goal

wayfinding

good signageenvironmental clues

maps



discussion

What signposts are used? There are wayfinding clues?




Important aspect

minimizing distanceincreasing interface ergonomics




Important aspect

minimizing distanceincreasing interface ergonomics

3-Click-Rule: users stop using the site if they aren’t ableto find the information or access the site features

within 3 mouse clicks




Using UML diagrams – Tidwell (2005)

4 pages + 7 “jumps” (clicks)



the user makes 9 actions – being “lost in space”, but the optimal number of steps (clicks) is 3

T. Tullis, B. Albert, Measuring the User Experience(2nd Edition), Morgan Kaufmann, 2013




GOMS(Goals, Operators, Methods, and Selection rules)

Card et al., 1983; John & Kieras, 1996

to study the sequence of actions that must be performedby users in order to accomplish their goal,

conforming to their abilities

http://web.eecs.umich.edu/~kieras/goms.html




GOMS

offers a quantitative analysis

initially, keyboard-based interaction was considered(keystroke-level model)

www.it.bton.ac.uk/staff/rng/teaching/notes/goms.html




GOMS

K = 0.2 sec – Keying: time it takes to tap a key on the keyboardP = 1.1 sec – Pointing: time it takes to point to a position on displayH = 0.4 sec – Homing: time it takes to move hand from

the keyboard to the interface or vice-versaM = 1.35 sec – Mentally preparing: time to prepare for the next stepR – Responding: wait for a computer to respond to input




GOMS

K = 0.2 sec – Keying: time it takes to tap a key on the keyboardP = 1.1 sec – Pointing: time it takes to point to a position on displayH = 0.4 sec – Homing: time it takes to move hand from

the keyboard to the interface or vice-versaM = 1.35 sec – Mentally preparing: time to prepare for the next stepR – Responding: wait for a computer to respond to input

the values could vary depending on the user abilities




GOMS

case study (Raskin, 2000):

evaluating an interfacefor converting Celsius Fahrenheit temperature



~5.4 sec.

~20.8 sec.




GOMS

extensions:NGOMSL – Natural GOMS Language

CMP-GOMS – Cognitive-Motor-Perceptual GOMS

http://cogtool.hcii.cs.cmu.edu/use-today/examples




GOMS

without a quantitative guide,we are only guessing at how well we are doing

and at how much room there is for improvement

Jef Raskin




Global navigationJenifer Tidwell, 2005

assures the existence of navigational elements –consistently positioned – to help users to access

the most important sections of the application/site




Hub and spokeJenifer Tidwell, 2005

isolating application sections into independentmini-applications/mini-sites,

that can be directly accessed via main window/page




hub & spoke: used mainly in mobile computing context




Hub and spoke

like global navigation pattern, it could be usedto structure typical “paths” of the user thru the interface

also, assure scalability




PyramidJenifer Tidwell, 2005

a solution for hierarchical + sequential exploration




Pyramid

could be used in conjunction to the one-window drilldown




Modal panelJenifer Tidwell, 2005

showing only one page, with no other navigation options,until the user solves the immediate problem








Modal panel

interrupts the current task – it could break the state flow

anti-pattern

apply this design pattern sparingly



error messages

discussion

Brazil (1985) – director: Terry Gilliamwww.imdb.com/title/tt0088846/



error messages

an error message is really helpful?

bad file number

segmentation fault: core dumped

broken pipe

404 not found

fatal error 312: aborting

literal 13 could not be allocated

internal error: object container empty

error exit delayed from previous errors

discussion



discussion



error messages

error messages must not confuse users

discussion



error messages

the tone of an error message must inspire confidence

an unknown error occurred

discussion



error messages

avoid patronizing and arrogant attitudes

Cannot delete Document: Access is denied!

versusThis file is protected and cannot be

deleted without specific permission.

discussion



error messages

abort end, cancel, stopavailable readyboot start, run

errorexecute completehit press, depress

invalid not correct/good/validkill end, cancel

output report, list, displayterminate end, exit

discussion



error messages

don’t make user to feel guilty(users are more important than code)

discussion



error message positive feedback message

discussion

for creative examples, visit http://fab404.com/




BreadcrumbsJenifer Tidwell, 2005

give users an alternative method of navigation

types:path

locationattribute






Breadcrumbs

revealing useful clues about the site/application’s information architecture

this pattern does not provide informationregarding the next possible – if any – step




Sequence mapJenifer Tidwell, 2005

indicates a sequence of actions+

the current step




Sequence map

it can be used in conjunction to wizard

if the navigational topology is large & hierarchical,it could be substituted by breadcrumbs




Color-coded sectionsJenifer Tidwell, 2005

facilitates the recognition of a certain placewithin a site/application




Color-coded sections

alternatively, other visual variables – e.g., shapes, textures,… – could be used to convey

the differences/meanings between various UI regions




Escape hatchJenifer Tidwell, 2005

provides means for “escaping”from a place having limited navigational options




Escape hatch

helps people feel like they can safely explorean application

when navigation assumes the execution of an action,an alternative is the undo design pattern





“Conclusion”

visual design, IA, HCI design patterns



next lecture:from design patterns to flow