Interface Design Quizlet
Affordance
"Giving a clue to its operation" : An attribute of an object that allows people to know how to use it--(mouse button - push, door handle - pull)
Why do designers use metaphorical elements?
to draw on the users' existing knowledge to enable them to formulate an accurate mental model
What are personas?
-A precise description of a hypothetical user -based on demographics and on patterns of behavior -not real; specific information -concrete person in the mind of a designer -shared basis for communication -At least one primary persona - the main focus of the design
Tips to alleviate effects of Fitts' Law
-Bring items closer to the cursor -Increase the target size -Exploit the edges -No more benefit on device edges -How device is held is important
Mobile UI Design Principles: Form entry
-Build user-friendly forms -Communicate form errors in real time -Match the keyboard with the required text inputs -Be responsive with visual feedback after significant actions
"The Model Human Processor" Published by Card, Moran & Newell, 1983, in the book "The Psychology of Human-Computer Interaction":
-Consider humans as information processing systems -Calculate how long it takes to perform a certain task -Consist of three interacting processors
Fitts' law
-Fitts' law predict the amount of time taken to move to and select a target T = a + blog (D / S +1) - T increases as the distance to the target increases - T decreases as the size of the target increases
Why use constraints?
-Helps prevent users from selecting incorrect options
When is using chunking ideal?
-Ideal when specific information must be memorized for later use -ideal in environments where an interface must compete against other stimuli for the attention or working memory of the end user -Effective use of chunking can improve the usability and effectiveness of an information system
How do designers use direct manipulation?
-Immediate feedback on actions -leverage real world metaphors
Anatomy of a persona
-Persona type -Fictional Name -Quote -Demographic -Story -Needs -Skills -Pain Points -Interests -Scenario
How do we use the model Human Processor in design?
-Predict and compare usability of different interface designs(Task performance, learnability, and error rates) --> No users or functional prototype required! -Apply model to predict effectiveness of new interfaces -Develop guidelines for interface design: Color, spatial layout, recall, response rates, etc
Drawbacks of Consistency
-Repetitive -Boredom -Monotony
Constraints
-Restricting the possible actions that can be performed using the user's relationship to the interface/controls
Flowchart
-Specific sequence of actions -visualize the entire process of how a user walks through a system. -understand and find flaws, bottlenecks, etc.
Benefits of Consistency
-System are usable and learnable when similar concepts are expressed in similar ways: Eliminating confusing & reduce learning cost -Enabling people to quickly transfer prior knowledge to new contexts and focus on relevant tasks -- easy to learn and remember!
Responsive Design
-To make websites responsive to their environment -Make pages that look great at any size
Purposes of prototyping
-To test whether or not the flow of the product is smooth and consistent -To test the feasibility and usability of our designs before we actually begin writing code -Users often can't articulate clearly what they need/want; If you give them something and they get to use/test it, they know what they don't want
Essential questions in developing a persona
-What are the classes of users? -What do they do? And Why?
Mid-fidelity prototype
-computer based tools (visio, powerpoint, balsamiq) -interactivity can be stimulated -include interaction and structural elements -force users to view it as a draft or work in progress
Mobile UI Design Principles: Navigation and exploration
-make navigation self evident -good labeling of menus -"go back" ability in one step -text label and visual keys to clarify -Create frictionless transitions b/t between mobile apps and web
High-fidelity prototype
-most realistic but time-intensive -uses programming language, can also use some programs like axure, iRise -appropriate when high visual and functional fidelity prototype needed. -good reference for developers
Mobile UI Design Principles: Overall
-show value of your app upfront -Create seamless experience -design controls based on hand position, finger taps -visible interface elements -Minimize typing needs
Low-Fidelity Prototype (Rapid/Paper prototyping)
-starting point, easy to create -Allow you to check requirements without putting in too much effort -ideal for brainstorming -static, low visual and content fidelity -quick way to create rough mockups -- force users to see basic concepts
Principles of "It is easier to perceive a structured layout"
1. Figure/Ground 2. Proximity 3. Similarity 4. Connectedness 5. Continuity 6. Closure
Psychological principles
1. User sees what they expect to see 2. Users have difficulty focusing on more than one activity at a time 3. It is easier to perceive a structured layout (Gesalt theory) 4. It is easier to recognize something than to recall it
Norman's 6 design principles
1. Visibility - can I see it? 2. Feedback - what is it doing now 3. Mapping - where am I and where can I go? 4. Affordance - how do I use it? 5. Constraint - these are the things I can't do 6. Consistency - I think I have seen this before
Closure
A tendency to perceive a set of individual elements as a single, recognizable pattern, rather than multiple individual elements
"To break a mental model is harder than splitting the atom."
Albert Einstein
What is Direct Manipulation?
An interaction style in which the objects of interest in the UI are visible and can be acted upon via physical, reversible, incremental actions that receive immediate feedback
How does Fitts' law apply to design?
the size of the target and its distance from the user's current position--can effect user experience
Two basic strategies for applying uniform connectedness in design
Connecting lines and common regions
Principles of "user sees what they expect to see"
Consistency: Users are not good at handling unexpected situations Exploiting prior knowledge: Apply prior knowledge and experience
Figure/Ground
Elements are perceived as either figures (objects of focus) or ground (the rest of the perceptual field)
Continuity
Elements arranged in a straight line or a smooth curve are perceived to be in a group, and are interpreted as being more related than elements not on the line or curve.
Proximity
Elements closer together are interpreted as being more related than elements that are far apart..
Connectedness
Elements that are connected by uniform visual properties are perceived to be more related than elements that are not connected.
similarity
Elements that are similar are perceived to be more related than elements that are dissimilar
The magic number
George Miller theory of how much information one can remember in their immediate memory. 7 +- 2 (5-9) things
Feedback
Giving back information immediately about what action has been done, allowing person to continue with the task: audio, visual, verbal combinations
How to combat problems of consistency?
Inconsistency with a purpose - draw attention, improve usability
Visibility
Just by looking, the user should know what to do: -the current state of the system -possible actions
Wireframe anatomy
Logo Grid Interaction Elements Instructions (for team not user!) Header Structural Elements Footer
Model Human Processor parts
Perceptual processor: Responsible for transforming external environment into a form that cognitive system can process Cognitive processor: Uses contents of working memory and long-term memory to make decisions and schedule actions with motor system Motor processor: Translates thoughts into actions
Consistency
Provide similar operations and similar elements to achieve similar tasks
Recognition Over Recall
Recall - information reproduced from memory Recognition is easier because of cues (context) helps with remembering information.
Principle of "It's easier to recognize something rather than to recall it"
Recognition: knowledge in the world Recall: knowledge in the head As a designer, you should try to put the information that the user needs in the world (in the UI)!
Prototype
Simulation of the product - not like the final product! -use visuals to describe a systems functions
When users approach an unfamiliar system, what do they subconsciously refer to?
their mental model
Designer's mental model
The designer's understanding of a system (how it works and how to operate it) usually complete and correct
User's mental model
The user's understanding of a system (how it works and how to operate it) usually incomplete and incorrect
Mapping
controls and displays should exploit natural mapping --> relates to user's cognitive maps
What happens in a mental model mismatch?
either a slip or a mistake
What is the primary purpose of chunking?
enhancement of working memory
mental models
knowledge structures that we develop to describe, explain, and predict the world around us -enable people to reason about a system
Usability
measure of the effectiveness, efficiency and satisfaction NOT identical to making things simple to use!
Chunking
organizing items into familiar, manageable units; often occurs automatically
Slips
you have correct mental model but mess up in performing the action (e.g.,distracted by other things)
Mistakes
you perform the action you intended, but have wrong mental model