Excise, Flow & Posture 12-3-2012 Design Elements Excise, Flow - - PowerPoint PPT Presentation

Excise, Flow & Posture 12-3-2012

 Design Elements  Excise, Flow & Posture

 Color, icons, sounds, graphical elements and animations are used to make the ‘look and feel’

• f an interface appealing

 Conveys an emotional state  Affects the user experience

 In turn this can affect the usability of an interface

 People are prepared to put up with certain

aspects of an interface (e.g. slow download rate) if the end result is appealing and aesthetic

 Text  Color  Images  Moving Images  Sound

How many of each animal did Moses take on the ark? How many of each animal did Moses take on the ark?

System 1 (automatic) vs. System 2 (deliberate) Thinking

• cf. “Tribes of Fluency” – Adam L. Alter (NYU) and Daniel
• M. Oppenheimer (Princeton)

 Font Font Font Serif Sans Serif

Size Size Size

 L e t t e r S p a c i n g  Line Spacing  Line Length  Justification

 Fully Justified Text  Left Justified Text

 Human Eye’s Cones

Red (64%), Green (32%), Blue (2%)

 Color Vision Deficiency

Red-Green Blue-Yellow

 achromatopsia (no color perception)

 Both Positive and Negative Connotations  Reactions are partly personal, cultural, and contextual.  Age Range

Young People - pure and bright colors Old People – deeper colors

 Natural colors are relatively subdued

 Bad Combinations

 Primary & Secondary  Complementary

 Good Combinations

 Analogous

 Flickering

Red Red

 Images

Pictures Diagrams Graphs charts

 Moving Images

Video Clips

 Types

 Ambient  Music  Speech

 Uses

 Attract attention  Reinforce visuals  Confirm successful completion of a task

 Always have easy volume control

 Golden Ratio

 Rule of Thirds

 Users view a website in an F shaped pattern  Users won't read your text thoroughly; they prefer to skim

• cf. Cooper, About Face 2.0

 Excise & Flow

 Make the interface disappear  Make the user productive

 “Posture”

 Sovereign, transient, daemonic, auxiliary  Affects how you design, and how users view your

program

 Extra work that interferes with completing

• bjectives

example: need to open (and then close) the garage door to drive to work

 Navigating folders to find files/programs  Resizing windows to fit everything on the screen  Important notes:

Cannot just remove excise to suit power

users

Also cannot force excise on power users to

suit beginners

 Need to determine what exactly the excise is

Compare functionality to user goals

 Do not interrupt the flow unnecessarily

Error messages, notification messages Keep number of pop up message boxes at

a minimum

 Never make the user ask permission  Allow input wherever you have output

Example: File selection, instead of just using

a “browse” button, allow the user to change the file path directly in the box it is displayed in

 Do not force the user to go to another window to perform a function that affects this window  Do not force users to resize/arrange windows unnecessarily  Do not force the user to reenter personal settings  Do not let the user’s actions result in errors  Do not force the user to confirm his actions ...?

 Navigation is a form of excise  Many types of Navigation

Between multiple windows/screens Between panes in a window Between tools/menus Within information in a frame

 Disorienting to users  Shift of attention and disruption of flow  Adds excise of window management

 Scrolling

Necessary, but should be minimized when

possible

 Linking

Critical to web applications, but is visually

dislocating

 Zooming

2D/3D, Very difficult to use for most users Example: architectural walkthroughs

 Reduce number of places to go  Provide signposts  Provide overviews  Appropriate mapping of controls to functions  Inflect interface to match user needs  Avoid Hierarchies

 Keep number of pages/windows to a minimum  Keep number of panes limited to just what the user needs to complete their goal  Keep number of controls limited to what users need

Personas very important for this

 Minimize scrolling

 Points of reference  Help users keep track of where they are  Keep signposts constant  Examples: menus and toolbars

 Help to orient the user  Similar to signposts

Overviews help with content Signposts help with application itself

 Example: Breadcrumb display

 Controls and displays should be organized based on:

Frequency of use Degree of dislocation (amount of sudden

change)

Degree of exposure (irreversible functions)

 combination of hardware & software  examples:

desktop web apps kiosk in-vehicle system handhelds: PDA, phone, ... game console professional devices: medical, scientific

 Behavioral

• How something (someone) presents itself (himself)

 General Principles

• Program posture must be purposeful and goal

directed

• Look and behavior should reflect usage

 Desktop

Daemonic

Sovereign

Transient

 Examples: Word processors, IDEs, spread sheets,

email clients

 Characterized by

• Full screen applications
• Full user attention
• Extended continuous usage
• Primary tool

 How to design them

• Users are perpetual intermediates
• Claim space
• Conservative style
• Rich input

 Examples

• Calculator, text editor, widgets,

etc.

 Characterized by

• Temporary use
• Helpers to sovereign

applications

 How to design them

• Clear
• Simple
• Bold style
• Single view
• Save window state
• All functions on the surface

 Example

• Printer driver

 Characterized by

• Almost no user interaction
• Usually invisible

 Design decisions

• Must be installed, removed, adjusted
• How should you summon UI?
• Control panel should be a transient posture
• Reports should be tactful (the user probably

won’t even be aware that the program is running)

 Types of sites

• Informational (sovereign and transient )
• Transactional (sovereign and transient)
• Portals (transient and auxiliary)

 Posture

• Determined by amount of use
• Determined by type of functions provided

 Other Platforms

• Kiosks (transient)

 transactional (e.g. ATM)  explorational (e.g. museum)

• Handheld

 must deal with hardware limitations: screen size, resolution, power consumption, etc.

 Goal

• Make users more productive
• Do more with less
• Interface should be at the

service of the user

• Make the interface

disappear “When people are able to concentrate wholeheartedly on an activity, they lose awareness

• f peripheral problems and distractions.”

– About Face 2.0 Cooper and Reimann

 Interface disappearing act

• Follow mental models

 People look for patterns  Use things users already know  The interface will feel comfortable and intuitive

• Keep tools close at hand

 Tool information is plentiful  Tool transitions are smooth  Use toolbars, palettes, etc.

• Provide modeless feedback

 Modeless feedback

• Modal feedback

 Example - Popup dialog  User (and flow) is interrupted  User must deal with the feedback before anything else

• Build into the interface
• Doesn’t stop the normal flow
• More intuitive