Upload
hendrikknoche
View
993
Download
2
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
EPFL, spring 2012 - week 10!screen design
➝ theory ➝ design factors – gestalt principles ➝ typography & colour ➝ menus, forms, touch-based UIs
overview
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
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!
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
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
➝ 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]
➝ 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.
“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
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
theory !vision as a serial process: “visual search”
gaze paths visualize "visual search processes
✱
Rectangular arch?
or… three columns?
✱find more examples of perceptual illusions on: http://psychology.sampson.cc.nc.us/Perceptill.htm
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…
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
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)
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)
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
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
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
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.
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:
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.
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
design factors!proximity ➝ groups related items together ➝ makes page look smaller
➝ increases organisation ➝ organizes information ➝ defines a beginning and ending
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.
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
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.
design factors!practical example of how human vision is guided by colour, contrast, grouping, alignment, ...
http://www.webstyleguide.com/page/hierarchy.html
examples !apple OSX dialog boxes
grouping with separators
grouping with white space
grouping with group boxes
Apple‘s changeable panes
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.”
!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."
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:
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)
large fonts
➝ improve readability ➝ simplify selection ➝ very large fonts become a
graphical element in the UI
!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
✱
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!
colour schemes
colours ...for the web 2.0
✱http://colorschemedesigner.com/
http://colorschemedesigner.com/
✱http://www.colourlovers.com
aesthetic web applications!flickr – online photo management
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
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
novel menu types (using direct manipulation)!
pie menus
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
touch-based menus!e.g. for mobile interfaces ➝ intuitive touchscreen"
(e.g. unlock mechanism) ➝ big menu items Windows Mobile vs Mac OSX
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
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
http://deviceatlas.com/explorer#_/properties/19/20
adaptation adaptation
Reference design