Creating the Initial Design “Do v. don’t”
Aug 06, 2015
Creating the Initial Design
“Do v. don’t”
Borrow
• Good quality, tested techniques
• Users already understand features
• Reduced design and implementation effort
• ** - within boundaries -- i.e. “look and feel” patent concerns
Existing Frameworks
• Windows
• Macintosh
• X/Motif
• Java/Swing
Advantages
• Style guide describes features, advice
• Software tools may exist
Existing Applications
• Incorporate good existing tools where needed -- spreadsheets and databases, for example – saves development time– users already familiar with these– “commercial grade”
Existing Interaction Techniques
• Programs whose interfaces serve as models of good practice
• Be knowledgeable about these commonly used programs
• Example: tool palette v. menus
Tool palette v. menus
• Select: enter a mode• graphical spec• Mode ok because:
– cursor indicates mode
– user is aware
– easy to get out
• icons show choices– pack well
– good to rep graphics
• Select: one-time action• text shows choices
– list representation
– better for “hard-to-draw” operations
Modes
• Considered “bad”
• example - vi -- what you type can be text or a command, depending on the mode, little feedback to tell you which is which
Geometry and Motion
• Small targets harder and slower to hit with a mouse than big targets
• long mouse movements slower than short ones
• icons pack differently than text
• more keystrokes -> slower
• switching mouse <->keyboard slower
Memory Considerations
• Recognize v. recall
• hard to remember from step to step– have help available where needed– info used together should be presented together– interface should present key info (like mode)
Problem-Solving Concerns
• Interface should help user select relevant operations– label ops to match user tasks– feedback on results– undo – “gray out” irrelevant choices
Attention Concerns
• To get user’s attention:– big change in display– near where user is looking– auditory signals harder to ignore
“Be conventional”
• Users will be happier with “familiar” techniques
“Support diversity”
• Different users may prefer different interaction styles
• physical limitations may prevent use of certain features – mouse v. keyboard for blind users, or problems
w/ motor control– multi-key combination
The Clustering Principle
• Organize the screen into visually separate blocks of similar controls, preferably with a title for each block of controls– similar commands on same menu– buttons for a given function grouped together
and visually delineated (box, white space, color)
Why cluster?
• Helps users search for the command they need
• Helps user acquire conceptual organization of the program
Visibility Reflects Usefulness
• Make frequently used controls obvious, visible, and easy to access
• Hide or shrink controls used less often
Why VRU?
• Users can quickly search small set of controls
• more extended search okay for rare functions
Intelligent Consistency Principle
• Use similar screens for similar functions– once users learn where controls are on one
screen, they can apply this knowledge to other screens
• Screens shouldn’t look alike if they do drastically different things
Color as Supplement
• Don’t rely on color to carry information
• Use color sparingly to emphasize info provided through other means
Color whys
• Easier to misuse color than to use it well– mean of color varies w/ culture
• (red = danger, death, life)
– color-blindness
• Design in black&white -- add color judiciously later
Reduced Clutter Principle
• Don’t put too much on the screen– See earlier principles– one or two type styles– small number of colors