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’ of 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 objectives 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 Transient Sovereign Daemonic
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.
“When people are able to concentrate wholeheartedly on an activity, they lose awareness of peripheral problems and distractions.” – About Face 2.0 Cooper and Reimann Goal ◦ Make users more productive ◦ Do more with less ◦ Interface should be at the service of the user ◦ Make the interface disappear
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
Recommend
More recommend
