-
Fitts' Law, 1954, based on time & distance. Enables prediction of human movement & motion based on rapid, aimed movement, not drawing/writing. Movement time was a logarithmic function of distance when target size and distance constant.
T=klog2(d/S + .05), k~100msec
t=time, d=distance, s=size)
-
Fitts' law predicts time it takes to reach a target using a pointing device. Main Benefit: Help UI Designers decide where to locate buttons, what size they should be and close together. Buttons: LARGE Distance: SHORT
-
ERROR MESSAGES: Improving error systems is one of the easiest ways to improve an existing system. Wording important for novice users. Errors caused by lack of knowledge, incorrect understanding or slips.
-
ERROR MESSAGES: Usability Design Principles: 1. Arrange elements to minimize hazards/errors. Most used = most accessible; hazardous elements should be shielded/eliminated/isolated. 2. Provide warnings of hazard/errors. 3. Provide fail-safe features. 4.Discourage unconscious action in tasks that require attention.
-
Human Error: result of actions whose consequences were unintended by performer. Minimization of errors = design goal, often trades off speed for less errors.
-
Computer Error: situation where comp cannot proceed because of a bug, incorrect piece of code. Error message produced, program may fail or enter error-recovery.
-
ERROR MESSAGE GUIDELINES:
-Be Specific
-Be constructive
-Use Positive Tone
-User Centered Phrasing
-Maintain consistency in grammatical as well as visual format and placement.
- Specificity: POOR: invalid data BETTER: Days range from 1-31.
- Constructive/Positive: POOR: Bad Date BETTER: Drop-off date must come after pickup date.
- User Centered Phrasing: User has control. POOR: Enter Data (Imperative) BETTER: Ready for Command
- Physical Layout: Uppercase for brief warnings, try to avoid code #'s.
-
GOOD ERROR MESSAGE: Tells user:
-What the situation is
-What's wrong with it
-What can be done to fix it
-Any consequences
-
Anthropomorphism
- Attribution of human motivation, characteristics, or behavior to inanimate objects, animals, or natural phenomena.
- EX: Hi there John! It's nice to meet you, I see you are ready now.
- OPPOSITE: Press enter to begin.
-
Window Manager
Software incorporated into all popular GUIs, which displays a windows with accompanying menus, buttons and scroll bars. It allows the windows to be relocated, overlapped, resized, minimized and maximized.
-
Color
The visual effect that is caused by the spectral composition of the light emitted, transmitted, or reflected by objects.
-
When selecting color consider:
-Audience
-Personality of company/product/service
-Cultural associations
-Designer's personal preference
-Color Trends
-
Three types of digital color:
-RGB (used for web/mobile/film/TV)
-CMYK (cyan, magenta, yellow, black) used for print
-HSV (hue, saturation, brightness)
-
Misuse of color includes:
-Too many
-Use of saturated complementary colors (caused Chromostereopsis)
-Inadequate contrast
-Inadequate attention to color impairment
-
Chromostereopsis
Different wavelengths of light focus at different depths in the eye. Makes focusing on two colors difficult - when one is fuzzy the other isnt.
-
Color has a tendency to:
-create relationship between items of the same color
-contain subjective, emotional, and psychological qualities
-interpretations of color vary by culture
-
Color blindness: inability to distinguish certain color combinations - 8% males .5% females
-Red-green most common
-Yellow-blue follows
-
80% of information we get through our senses is visual.
One color allows for the highest scan time.
Users should be able to make all visual differentiations without colors.
-
Dithering
When there aren't enough colors to render an image properly, an infinite palette can be created by dithering. 24-bit colors dither into 256 colors
-
Bit Depth
# of bits used to hold a pixel, determines the # of colors that can be displayed at one time.
-
Color Index:
-The pixels in the image contain an index number, which points to the RGB value in the color palette. The RGB values are the ones used by the display system.
Commonly used method for saving file space when creating 8-bit color images. Instead of each pixel containing its own red, green, and blue values (requires 24bits) each pixel hold an 8bit value, which is an index number into the color palette.
-
Color Gamut:
The entire range of colors available on a particular device such as a monitor or printer. A monitor (RGB), has a much greater gamut that a printer (CMYK).
-
Color Management System:
Software that translates the colors of an original image into the truest representation obtainable on the output device.
-
Gamma
Measure of the light intensity (brightness) of an output device.
-
Alpha Channel
Additional 8bits used with each pixel in a 32bit graphics system and can represent 256 levels of translucency in an object. More than one layer may contain a translucent component, thus multiple levels of blending may be required.
-
COLOR GUIDELINES
- -limit number
- -design for monochrome(blk/wht) first
- -remain consistent
- -be alert about color codes and power of color
- -use color changes to indicate status changes
- -use color in graphics displays for greater info density
- -consider the color-deficient
-
DANGERS OF COLOR:
- -printing/conversion to other media may cause problems
- -certain color pairings cause problems
- -color fidelity may degrade on other hardware
- -too many colors degrade user scan time
-
Design
The process of creating an artifact with structure or form which is planned, artistic, coherent, purposeful, and useful.
-
Design Principles:
- Visibility
- Feedback
- Constraints
- Mapping
- Consistency
- Affordances
-
Types of Constraints:
- Physical
- Logical (reasoning)
- Cultural (relies on learned arbitrary conventions)
-
Affordance
Situation where an object's sensory characteristics intuitively imply its functionality and use.
-
VIMM-Based Design Principles
- VIMM model provides a simple view of the human information processing system: It addresses the following systems:
- Visual - optimize visual comparisons by -matching screenflow to task flow, good grouping and labeling, and no gratuitious color
- Intellectual - simplify decision making by - providing previews and easy escapes, and using controls constantly, providing good system feedback
- Memory - minimize the memory load by - making options visible, designing for recognition vs. recall, and providing defaults
- Motor Systems - minimize movement time and interaction by - using short distance and large targets, using natural response mappings, optimizing for the input device, and reducing windows/steps.
-
Above-the-fold
The area that appears in the first screenful when a person loads a page; the part of a web page that can be seen without scrolling.
-
Posture
A programs' behavioral stance - the way it presents itself to the user.
-
Four Categories of Posture
- Sovereign
- Transient
- Daemonic
- Auxiliary
-
Sovereign
- best used full screen
- large set of related functions and features
- rich visual input, output, feedback
- EX: Word processor
-
Transient
- Single, high relief function with a tightly restricted set of accompanying controls.
- Called when needed, quickly leaves
- Concise EX: volume control
-
Daemonic
- Doesn't interact with user
- Executes in background
- EX: Device Driver
-
Auxiliary
- Blend of sovereign/transient
- Continuously present, but plays supporting role
- Small, superimposed on an application
- EX: Clock programs
-
ICON CLASSIFICATIONS:
- Resemblance: Depicts physical object
- EX: Electronic Mail
- Reference: Depicting object by reference or analogy to concept of icon
- EX: Clamp for file compression
- Arbitrary: Meaning by convention
- EX: Warning triangle for warning message.
-
Prototype
- Working Model of an item or interface created early in design process in order to visualize, develop, and test design ideas.
- Development of incomplete representations of a target system for testing purposes and as a way of understanding the difficulties of development and scale of the problem.
-
Why prototype?
- Test feasibility of idea
- Clarifies vague requirements
- Allows user testing/evaluation
- Effective team communication
- Answers questions and supports designers in choosing between alternatives
-
What to prototype?
- Technical Issues
- Task design and work flow
- Screen layouts
- Difficult and critical areas
-
Fidelity
Describes how easily prototypes can be distinguished from the final product, can be manipulated to emphasize aspects of design.
-
Low-Fidelity Prototype
A prototype that is sketchy and incomplete, that has some characteristics of the target product but is otherwise simple, usually in order to quickly produce the prototype and test broad concepts. Never intended to be kept and integrated into the final product, exploration only.
-
High Fidelity Prototype
Prototype that is close to final product with high detail and functionality. Users tests are able to examine usability questions in detail and make strong conclusions about how behavior will relate to use of the final product.
-
Vertical
Don't attempt to show all that will be in a system, instead focus on implementing small sets of features in a nearly complete fashion. Appropriate when a certain complex feature of a system is poorly-understood and needs to be explored.
-
Horizontal
Display wide range of features without full implementation of them. Appropriate for understanding relationships across a broad system & for showing the range of abilities of a system.
-
Wire Frame
- Skeletal version of a website or product that represents navigational concepts and page content. The wireframe is a set of cross-linked pages acting as a functional prototype without graphical components. Does not address visual design or page layout. (DYNAMIC)
- Static Wireframe is a single drawing of an individual page template that shows navigation and informational components
-
Storyboard:
A series of illustrations that represent a process such as the steps of interacting with a computer or completing a task while using the device being developed.
-
COLOR EFFECTIVE USAGE:
- soothe or strike the eye
- add accents to an uninteresting display
- emphasize the logical organization of information
- facilitate subtle discriminations in complex displays
- draw attention to warnings
- evoke strong emotional reactions of joy, excitement, fear, anger
- increase information density.
|
|
