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