61
EPFL, spring 2012 - week 10 screen design

PxS'12 - week 10 - screen design

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: PxS'12 - week 10 - screen design

EPFL, spring 2012 - week 10!screen design

Page 2: PxS'12 - week 10 - screen design

➝  theory ➝ design factors – gestalt principles ➝  typography & colour ➝ menus, forms, touch-based UIs

overview

Page 3: PxS'12 - week 10 - screen design

theory!levels of human–computer Interaction user’s/organisation’s goals output in the real world GOAL LEVEL

user’s knowledge of task domain

computer’s representation of task domain

TASK LEVEL

user’s knowledge of language

computer command language

DIALOGUE LEVEL

user’s hands, eyes computer keyboard, display

INPUT/OUTPUT LEVEL

human structures system structures

Page 4: PxS'12 - week 10 - screen design

theory!levels of HCI

""gmail example: “understanding of how Email applications work” "“understanding the meaning and usage of the various interaction alternatives”

“ability to perceive and interact with the various functions”

user’s/organisation’s goals! output in the real world! GOAL LEVEL!

user’s knowledge !of task domain!

computer’s representation of task domain!

TASK !LEVEL!

user’s knowledge !of language!

computer command language!

DIALOGUE LEVEL!

user’s hands, eyes! computer keyboard, display!

INPUT/OUTPUT LEVEL!

human structures! system structures!

Page 5: PxS'12 - week 10 - screen design

theory!user experience design [Jesse James Garrett]

The process of user experience design is about “ensuring that no aspect of the user’s experience with your [system] happens without your conscious, explicit intent. This means taking into account every possibility of every action the user is likely to take and understanding the user’s expectations at every step of the way through that process.”

✱See: Garrett, J.J. (2003). The Elements of User Experience. New Riders Press

Page 6: PxS'12 - week 10 - screen design

theory!user experience design [Jesse James Garrett]

✱See: http://www.jjg.net/elements/pdf/elements_ch02.pdf

VISUAL DESIGN

INFORMATION DESIGN

INTERACTION DESIGN

INFORMATION DESIGN

INTERFACE DESIGN

NAVIGATION DESIGN

FUNCTIONAL SPECIFI-CATIONS

CONTENT REQUIRE-

MENTS

SITE OBJECTIVES

USER NEEDS

concrete

abstract

surface

strategy

skeleton

structure

scope

web as software interface | web as hypertext system

Page 7: PxS'12 - week 10 - screen design

➝  based on gathered knowledge and understanding move on to the actual crafting of the design:

➝ areas - decide on how to group together areas of information and activity, understand the basic building blocks of your system. Understand mood and feel, decide what kind of user experience you want.

➝ what are the pages for? Create a design storyboard to represent when and how users want to obtain information and carry out processes and actions.

✱See: Cato, J. (2001). User-Centered Web Design. Addison-Wesley.

theory!a framework for design thinking [John Cato]

Page 8: PxS'12 - week 10 - screen design

➝  what is on a page? detailing what are the contents of each page in an area."

➝  interaction design - decide on what can be done and design the way the user will interact on each page and carry out useful activity."

➝  visual design - design the details of what it all looks like and how the presentation should be to reach out to the user and satisfy the business.

theory!a framework for design thinking [John Cato]

✱See: Cato, J. (2001). User-Centered Web Design. Addison-Wesley.

Page 9: PxS'12 - week 10 - screen design

“The process of design is one of creativity in problem solving. It is a process which explores facts and feelings, identifies design objectives and goals, generates possible solutions, chooses a solution, creates a design, evaluates the design and repeats. And so, to ‚repeat‘.“ [Cato]

the design cycle often repeats 6-10 times.

theory!the iterative process of design

Page 10: PxS'12 - week 10 - screen design

theory!visual attention ➝ designing pages/screens needs to consider

limited visual bandwidth ➝ not everything is „seen“ ➝ selecting things to look "

at is a serial process ➝ Bandwidth/attention is "

devoted sequentially to "different locations on a "screen

Page 11: PxS'12 - week 10 - screen design

theory !vision as a serial process: “visual search”

gaze paths visualize "visual search processes

Page 12: PxS'12 - week 10 - screen design

Rectangular arch?

or… three columns?

✱find more examples of perceptual illusions on: http://psychology.sampson.cc.nc.us/Perceptill.htm

Page 13: PxS'12 - week 10 - screen design

theory !visual perception influences visual search processes

➝  What we visually perceive is only partly caused by the stimulus (on the interface, or out in the environment)

➝  Prior knowledge has a lot of influence on"our perception, shaping our expectations"about how something is perceived In a first visual glance at something, "

the brain analyses low level "characteristics of a stimulus (colour, "contrast, shape, context, …) and "“guesses” what we are most likely "looking at…

Page 14: PxS'12 - week 10 - screen design

theory !visual perception influences visual search through bottom-up and top-down processes

influence processing origin factors

display bottom up current interface contrast colour motion grouping layout labelling

expectation top down memories of past interfaces and target representation

contrast colour motion grouping layout labelling

Page 15: PxS'12 - week 10 - screen design

theory!bottom-up processes ➝  low level visual features can attract attention ➝  colour / contrast ➝  orientation / alignment ➝  motion

Visual design is a process of guiding the user’s perception - uses bottom-up processes to guide and influence a user’s vision/focus, but has to take into account top-down expectations as well. (e.g. flashy adverts on the Web do not work, because people know they are there and ignore them)

Page 16: PxS'12 - week 10 - screen design

design factors!contrast ...guides visual attention ➝  contrast is what pulls you in, in other words, it draws your

eyes to the page. It allows you to move around the page and find things

➝  contrast must be strong. “If two elements, such as type, rules, graphics, colour, texture, etc. are not the same, make them very different- don’t make them almost the same”

➝  contrast creates a focal point, a dominating force, the place your eyes go to when first looking the page (web or print)

Page 17: PxS'12 - week 10 - screen design

design factors!colour contrasts

bad examples good examples

People with cognitive or sight problems may have difficulty reading and distinguishing text from a background colour

People with cognitive or sight problems may have difficulty reading and distinguishing text from a background colour

People with cognitive or sight problems may have difficulty reading and distinguishing text from a background colour

People with cognitive or sight problems may have difficulty reading and distinguishing text from a background colour

Page 18: PxS'12 - week 10 - screen design

design factors !contrast ... creates a hierarchy of information! ➝  allows you to skim more easily to pick out needed

information ➝  adds interest to the page ➝  provides a means of emphasizing what is important ➝  directs the reader’s "

eye ➝  On a page without "

contrast, the reader "does not know where "to look first or what is "important

Page 19: PxS'12 - week 10 - screen design

design factors!similarity / dissimilarity ➝  similarity occurs when objects "

look similar to one another. "People often perceive them as a "group or pattern

➝  dissimilarity occurring in "

a group of similar elements "is called anomaly

Page 20: PxS'12 - week 10 - screen design

design factors!continuation / closure ➝  continuation occurs when the eye is "

compelled to move through one "object and continue to another object.

➝  closure occurs when an object is "incomplete or a space is not "completely enclosed. ➝  If enough of the shape is indicated, "

people percieve the whole by filling "in the missing infomation.

Page 21: PxS'12 - week 10 - screen design

design factors!alignment ➝  It is always best to pick one alignment and "

to stay with it. It is not a wise idea to mix "alignments.

➝  Hints for better alignment "(for text documents): ➝  do not place anything on the page arbitrarily ➝  move text away from left edge ➝  keep text out of the right edge ➝  use the same alignment throughout the entire document (right

justify, left justify or centre align) ➝  do not centre align everything. Centre aligning should be done

consciously, not because you cannot think of anything else to do

bad example:

Page 22: PxS'12 - week 10 - screen design

design factors!repetition ➝  the idea of continuing and repeating certain visual

elements of a page. The goal is add to the organizational strength and sense of unity.

Page 23: PxS'12 - week 10 - screen design

design factors!proximity ➝  proximity refers to the relationship that items develop

when they are close together ➝  two items that are close, appear to have a belonging to

each other ➝  related/similar items, get grouped together ➝  when items are physically far from each other, they do not

appear to have a relationship with each other ➝  elements become visually disconnected from each other ➝  do not orphan items / objects

Page 24: PxS'12 - week 10 - screen design

design factors!proximity ➝  groups related items together ➝  makes page look smaller

➝  increases organisation ➝  organizes information ➝  defines a beginning and ending

Page 25: PxS'12 - week 10 - screen design

design factors!proximity / grouping ➝  proximity occurs when elements "

are placed close together. They "tend to be perceived as a group

When the squares are given close proximity, "unity occurs. While they continue to be separate "

shapes, they are now perceived as one group.

Page 26: PxS'12 - week 10 - screen design

design factors!balance ➝  visual balance comes from arranging elements on the

page so that no one section is „heavier“ than the other

➝  a designer may intentionally throw "elements out of balance to create "tension or a certain mood

Page 27: PxS'12 - week 10 - screen design

design factors!asymmetrical balance

this page uses a 3 column format to create a neatly organized asymmetrical layout.

the two columns of text are balanced by the blocks of colour in the lower left topped by a large block of with space.

Page 28: PxS'12 - week 10 - screen design

design factors!practical example of how human vision is guided by colour, contrast, grouping, alignment, ...

http://www.webstyleguide.com/page/hierarchy.html

Page 29: PxS'12 - week 10 - screen design

examples !apple OSX dialog boxes

Page 30: PxS'12 - week 10 - screen design
Page 31: PxS'12 - week 10 - screen design
Page 32: PxS'12 - week 10 - screen design

grouping with separators

Page 33: PxS'12 - week 10 - screen design

grouping with white space

Page 34: PxS'12 - week 10 - screen design

grouping with group boxes

Page 35: PxS'12 - week 10 - screen design

Apple‘s changeable panes

Page 36: PxS'12 - week 10 - screen design
Page 37: PxS'12 - week 10 - screen design

example: relevance of design attractiveness bias

“The first presidential debate between Richard Nixon and Robert Kennedy (1960) is a classic demonstration of the attractiveness bias. "Nixon was ill and running a fever. He wore light colours and no makeup, further whitening his already pale complexion and contrasting his five-o’clock shadow. "Kennedy wore dark colours, makeup, and practiced his delivery in a studio prior to the debate. People who listened to the debate by radio believed Nixon to be the winner. However, people who watched the debate on TV came to a very different conclusion.”

Page 38: PxS'12 - week 10 - screen design

!task-related organization !

"The primary goal for menu, form-filling, and dialog-box designers is to create a sensible, comprehensible, memorable, and convenient organization relevant to the user's task."

Page 39: PxS'12 - week 10 - screen design

typography - design for readability

size ➝  provide alternatives (e.g. for different age

groups) ➝  consider resolution of screen (e.g. mobile

devices with higher res.)

typeface (fonts) ➝  for digital displays rather use "

sans serif: """"than serif fonts:

Page 40: PxS'12 - week 10 - screen design

typography - design for readability

contrast ➝  high contrast, avoid textured backgrounds

text blocks ➝  keep lines to 10 to 12 words (35 to 60 characters)

spacing ➝  vertical and horizontal spacing can enhance readibility especially

when using small font sizes (or having long texts)

Page 41: PxS'12 - week 10 - screen design

large fonts

➝  improve readability ➝  simplify selection ➝  very large fonts become a

graphical element in the UI

Page 42: PxS'12 - week 10 - screen design

!custom fonts…for a unique style!

sources for free fonts: http://www.webpagepublicity.com/free-fonts.html www.fontsmack.com http://www.smashingmagazine.com/2007/11/08/40-excellent-freefontsfor-professional-design

Page 43: PxS'12 - week 10 - screen design

colours

➝  need be used in consistent manner ➝  a clearly defined colour scheme is an "

important tool in design process ➝  Colour schemes help to organise and "

structure ➝  The rigid application of a good colour

scheme can to some extend conceal a faulty layout

➝  they transfer mood and meaning "http://www.color-wheel-pro.com/color-meaning.html

➝  colour blindness can be an issue!

Page 44: PxS'12 - week 10 - screen design

colour schemes

Page 45: PxS'12 - week 10 - screen design

colours ...for the web 2.0

Page 46: PxS'12 - week 10 - screen design

✱http://colorschemedesigner.com/

http://colorschemedesigner.com/

Page 47: PxS'12 - week 10 - screen design

✱http://www.colourlovers.com

Page 48: PxS'12 - week 10 - screen design

aesthetic web applications!flickr – online photo management

Page 49: PxS'12 - week 10 - screen design

menus!single menus ➝  binary menus "

(e.g. radio buttons) ➝  multiple-item menus ➝  multiple-selection menus

(e.g. check boxes) ➝  pull-down, pop-up and

toolbar menus

Page 50: PxS'12 - week 10 - screen design

menus!embedded menus and hotlinks ➝  embedded menus are an alternative to explicit menus ➝  it is natural to allow users reading about people, events, and

places to retrieve detailed information by selecting menus in context

Page 51: PxS'12 - week 10 - screen design

novel menu types (using direct manipulation)!

pie menus

Page 52: PxS'12 - week 10 - screen design

novel menu types !menu for small displays

entertainment, communication services (mobiles, PDA’s, MP3 players, …)

➝  learnability is a key issue ➝ e.g. consistency of “Cancel” and “OK” buttons

➝  hardware buttons ➝ navigation, select

➝  expect interactions ➝  tap interface

Page 53: PxS'12 - week 10 - screen design

touch-based menus!e.g. for mobile interfaces ➝  intuitive touchscreen"

(e.g. unlock mechanism) ➝  big menu items Windows Mobile vs Mac OSX

Page 54: PxS'12 - week 10 - screen design

touch-based menus!iPhone gestures GESTURE ACTION

tap to press or select a control or link (analogous to a single mouse click). You receive the onclick event for this gesture.

double tap to zoom in and center a block of content or an image. to zoom out (if already zoomed in).

flick to scroll or pan quickly.

drag to move the viewport or pan.

pinch open to zoom in.

pinch close to zoom out.

touch and hold to display an information bubble, magnify content under the finger, or perform specific actions in built-in iPhone applications and featres.

two-finger scroll to scroll up or down within a text area, an inline frame, or an element with overflow capability, depending on the direction of the movement. You can receive a mousewheel event for this gesture

Page 55: PxS'12 - week 10 - screen design

references

➝  Gestalt principles ➝  www.usask.ca/education/coursework/skaalid/theory/"

gestalt/gestalt.htm ➝  http://graphicdesign.spokanefalls.edu/tutorials/process/ gestaltprinciples/

gestaltprinc.htm

➝  User-Centred Web Design, John Cato, Addison Wesley, 2001

➝  Apple Human Interface Guidelines ➝  http://developer.apple.com/documentation/UserExperience/Conceptual/

OSXHIGuidelines/index.html

➝  Universal Principles of Design, William Lidwell, Kritina Holden, Jill Buttler, Rockport Press 2003

Page 56: PxS'12 - week 10 - screen design
Page 57: PxS'12 - week 10 - screen design
Page 58: PxS'12 - week 10 - screen design

http://deviceatlas.com/explorer#_/properties/19/20

Page 59: PxS'12 - week 10 - screen design
Page 60: PxS'12 - week 10 - screen design
Page 61: PxS'12 - week 10 - screen design

adaptation adaptation

Reference design