Creating the Initial Design "Do v. don't"
-
Upload
sammy17 -
Category
Technology
-
view
215 -
download
1
Transcript of Creating the Initial Design "Do v. don't"
![Page 1: Creating the Initial Design "Do v. don't"](https://reader035.fdocuments.in/reader035/viewer/2022062420/55c314fbbb61eb64608b47ae/html5/thumbnails/1.jpg)
Creating the Initial Design
“Do v. don’t”
![Page 2: Creating the Initial Design "Do v. don't"](https://reader035.fdocuments.in/reader035/viewer/2022062420/55c314fbbb61eb64608b47ae/html5/thumbnails/2.jpg)
Borrow
• Good quality, tested techniques
• Users already understand features
• Reduced design and implementation effort
• ** - within boundaries -- i.e. “look and feel” patent concerns
![Page 3: Creating the Initial Design "Do v. don't"](https://reader035.fdocuments.in/reader035/viewer/2022062420/55c314fbbb61eb64608b47ae/html5/thumbnails/3.jpg)
Existing Frameworks
• Windows
• Macintosh
• X/Motif
• Java/Swing
![Page 4: Creating the Initial Design "Do v. don't"](https://reader035.fdocuments.in/reader035/viewer/2022062420/55c314fbbb61eb64608b47ae/html5/thumbnails/4.jpg)
Advantages
• Style guide describes features, advice
• Software tools may exist
![Page 5: Creating the Initial Design "Do v. don't"](https://reader035.fdocuments.in/reader035/viewer/2022062420/55c314fbbb61eb64608b47ae/html5/thumbnails/5.jpg)
Existing Applications
• Incorporate good existing tools where needed -- spreadsheets and databases, for example – saves development time– users already familiar with these– “commercial grade”
![Page 6: Creating the Initial Design "Do v. don't"](https://reader035.fdocuments.in/reader035/viewer/2022062420/55c314fbbb61eb64608b47ae/html5/thumbnails/6.jpg)
Existing Interaction Techniques
• Programs whose interfaces serve as models of good practice
• Be knowledgeable about these commonly used programs
• Example: tool palette v. menus
![Page 7: Creating the Initial Design "Do v. don't"](https://reader035.fdocuments.in/reader035/viewer/2022062420/55c314fbbb61eb64608b47ae/html5/thumbnails/7.jpg)
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
![Page 8: Creating the Initial Design "Do v. don't"](https://reader035.fdocuments.in/reader035/viewer/2022062420/55c314fbbb61eb64608b47ae/html5/thumbnails/8.jpg)
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
![Page 9: Creating the Initial Design "Do v. don't"](https://reader035.fdocuments.in/reader035/viewer/2022062420/55c314fbbb61eb64608b47ae/html5/thumbnails/9.jpg)
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
![Page 10: Creating the Initial Design "Do v. don't"](https://reader035.fdocuments.in/reader035/viewer/2022062420/55c314fbbb61eb64608b47ae/html5/thumbnails/10.jpg)
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)
![Page 11: Creating the Initial Design "Do v. don't"](https://reader035.fdocuments.in/reader035/viewer/2022062420/55c314fbbb61eb64608b47ae/html5/thumbnails/11.jpg)
Problem-Solving Concerns
• Interface should help user select relevant operations– label ops to match user tasks– feedback on results– undo – “gray out” irrelevant choices
![Page 12: Creating the Initial Design "Do v. don't"](https://reader035.fdocuments.in/reader035/viewer/2022062420/55c314fbbb61eb64608b47ae/html5/thumbnails/12.jpg)
Attention Concerns
• To get user’s attention:– big change in display– near where user is looking– auditory signals harder to ignore
![Page 13: Creating the Initial Design "Do v. don't"](https://reader035.fdocuments.in/reader035/viewer/2022062420/55c314fbbb61eb64608b47ae/html5/thumbnails/13.jpg)
“Be conventional”
• Users will be happier with “familiar” techniques
![Page 14: Creating the Initial Design "Do v. don't"](https://reader035.fdocuments.in/reader035/viewer/2022062420/55c314fbbb61eb64608b47ae/html5/thumbnails/14.jpg)
“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
![Page 15: Creating the Initial Design "Do v. don't"](https://reader035.fdocuments.in/reader035/viewer/2022062420/55c314fbbb61eb64608b47ae/html5/thumbnails/15.jpg)
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)
![Page 16: Creating the Initial Design "Do v. don't"](https://reader035.fdocuments.in/reader035/viewer/2022062420/55c314fbbb61eb64608b47ae/html5/thumbnails/16.jpg)
Why cluster?
• Helps users search for the command they need
• Helps user acquire conceptual organization of the program
![Page 17: Creating the Initial Design "Do v. don't"](https://reader035.fdocuments.in/reader035/viewer/2022062420/55c314fbbb61eb64608b47ae/html5/thumbnails/17.jpg)
Visibility Reflects Usefulness
• Make frequently used controls obvious, visible, and easy to access
• Hide or shrink controls used less often
![Page 18: Creating the Initial Design "Do v. don't"](https://reader035.fdocuments.in/reader035/viewer/2022062420/55c314fbbb61eb64608b47ae/html5/thumbnails/18.jpg)
Why VRU?
• Users can quickly search small set of controls
• more extended search okay for rare functions
![Page 19: Creating the Initial Design "Do v. don't"](https://reader035.fdocuments.in/reader035/viewer/2022062420/55c314fbbb61eb64608b47ae/html5/thumbnails/19.jpg)
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
![Page 20: Creating the Initial Design "Do v. don't"](https://reader035.fdocuments.in/reader035/viewer/2022062420/55c314fbbb61eb64608b47ae/html5/thumbnails/20.jpg)
Color as Supplement
• Don’t rely on color to carry information
• Use color sparingly to emphasize info provided through other means
![Page 21: Creating the Initial Design "Do v. don't"](https://reader035.fdocuments.in/reader035/viewer/2022062420/55c314fbbb61eb64608b47ae/html5/thumbnails/21.jpg)
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
![Page 22: Creating the Initial Design "Do v. don't"](https://reader035.fdocuments.in/reader035/viewer/2022062420/55c314fbbb61eb64608b47ae/html5/thumbnails/22.jpg)
Reduced Clutter Principle
• Don’t put too much on the screen– See earlier principles– one or two type styles– small number of colors