Human-Computer Interaction 6. Design principles Dr. Sunyoung Kim School of Communication & Information Rutgers university
Last class 1. Brainstorming 2. Sketch 3. Prototype 4. User testing with prototypes
Recap: Sharpen the focus Posing the right problem is critical • – neither too narrow, nor too fuzzy Not “bicycle cup-holders” but • “helping cyclists to drink coffee without accidents”
Recap: Number your ideas
Recap: Why sketching? Designers do not draw sketches to externally represent ideas that are already consolidated in their minds. Rather, they draw sketches to try out ideas, usually vague and uncertain ones. - Suwa & Tverksey
Recap: Prototype A prototype is not the final product! Do not expect it to look like the final product. • A simulation of the final product • Using visuals to describe how a system should behave • 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
Recap: Prototyping process Interactive Paper prototyping Wireframing sketches Coding User testing User testing User testing User testing
Recap: Prototyping process Interactive Paper prototyping sketches Wireframing Low fidelity Medium fidelity High fidelity
Recap: Flowchart • Specific sequence of actions • Visualize the entire process of how a user walk through the system • Visualize what is going on and thereby help understand a process, and perhaps also find flaws, bottlenecks, and other less-obvious features within it
Recap: Wizard of Oz A rapid-prototyping method for systems costly to build or requiring new technology. A human “Wizard” simulates the system’s intelligence and interacts with the user through a real or mock computer interface. • Makes it possible to test functionality that does not yet exist • Can simulate different system behaviors and test result (e.g., speed of ticket from input to output) • Can simulate errors and test result • Common in areas such as intelligent agents, human- robotic interaction
Today’s agenda UI design principles 1. Psychological principles 2. Norman’s design principles
User-centered design User interface design knowledge • from users: need to know about the users and their tasks Design iteratively! • Good Interaction Design Design principles Theoretical: User interface design • knowledge from theory & experience Experiential: Abstract, high-level • guides for design
Theory: 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. 4. It is easier to recognize something than to recall it.
1. User sees what they expect to see Users are not good at handling unexpected situations • The context • Prior knowledge of the world
Button placement: Button placement: OK/Cancel vs Cancel/OK OK/Cancel vs Cancel/OK Visual flow isual flow Platfor Platform m
OK is not ok anymor OK is not ok anymore! e! Button placement is important, but remember to also pay attention to the visual weight and labels you give your buttons.
���������������������������������������������� OK is not ok anymor OK is not ok anymore! e!
1. User sees what they expect to see Principles: A. Consistency: Users are not good at handling unexpected situations B. Exploiting prior knowledge: Apply prior knowledge and experience
2. Users have difficulty focusing on more than one activity at a time.
2. Users have difficulty focusing on more than one activity at a time. Perceptual organization: Group things together (Proximity)
2. Users have difficulty focusing on more than one activity at a time. Perceptual organization: Group things together (Hierarchy)
3. It is easier to perceive a structured layout: Gestalt theory 1. Figure/Ground 2. Proximity 3. Similarity 4. Connectedness 5. Continuity 6. Closure
(1) Figure/Ground Elements are perceived as either figures (objects of focus) or ground (the rest of the perceptual field). Rubin V Rubin Vase ase When confronted by a visual image, our perceptual system separates a dominant shape (a “figure”) from a “background”
(2) Proximity Elements closer together are interpreted as being more related than elements that are far apart.
(2) Proximity Elements closer together are interpreted as being more related than elements that are far apart.
(2) Proximity Elements closer together are interpreted as being more related than elements that are far apart.
(3) Similarity Elements that are similar are perceived to be more related than elements that are dissimilar.
Proximity + Similarity What happens if you start mixing these principles together?
Proximity + Similarity What happens if you start mixing these principles together?
(4) Connectedness Elements that are connected by uniform visual properties are perceived to be more related than elements that are not connected
(4) Connectedness Two basic strategies for applying uniform connectedness in a design: connecting lines and common regions
(5) Continuity Elements arranged in a straight line or a smooth curve are perceived as a group, and are interpreted as being more related than elements not on the line or curve.
(6) Closure A tendency to perceive a set of individual elements as a single, recognizable pattern, rather than multiple individual elements.
1. Figure/Ground 2. Proximity 3. Similarity 4. Connectedness 5. Continuity 6. Closure
1. Figure/Ground 2. Proximity 3. Similarity 4. Connectedness 5. Continuity 6. Closure
1. Figure/Ground 2. Proximity 3. Similarity 4. Connectedness 5. Continuity 6. Closure
4. It is easier to recognize something that 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)!
4. It is easier to recognize something that to recall it. Over 46 years old
4. It is easier to recognize something that to recall it.
Theory: 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 (Gestalt theory). 4. It is easier to recognize something than to recall it.
Norman’s 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
1. Visibility Just by looking, the user should know what to do : State of the system • Possible actions •
1. Visibility
1. Visibility
2. Feedback Sending back information about what action has been done and what has been accomplished, allowing the person to continue with the activity : tactile, visual, verbal, audio, and combinations of these
2. Feedback
2. Feedback
3. Mapping Controls and displays should exploit natural mapping.
3. Mapping
3. Mapping
3. Mapping
4. Affordance “Giving a clue”: An attribute of an object that allows people to know how to use it Examples : Mouse button à push • Door handle à pull • Glass à see through • Any examples you can come up with? •
4. Affordance
4. Affordance
4. Affordance confusion Norman considers affordance to be a relationship between an object and a user, NOT property of an object
5. Constraints Relationship between actions and results in the world, between interface controls (their layout and movement) and their effect Restricting the possible actions that can be performed • Helps prevent users from selecting incorrect options • Three types of constraints • o Physical o Logical o Cultural
5. Physical constraints The way physical objects restrict the movement of things: Examples: Key into lock • CD/DVD into a computer • Inserting a memory stick •
5. Physical constraints
5. Physical constraints
5. Logical constraints Exploit our common sense reasoning about the way the world works • These constraints often make use of the logical relationship between • physical layout of a device and the way it works
5. Cultural constraints Learned arbitrary convention • In other contexts, cultural constraint means the constraints of social • norms placed on genders, races, etc., based on how society thinks they should act Examples in the design context • o Driving in US (and most of the countries) vs. UK o Light switches are very different in different countries o Any examples you can come up with?
Recommend
More recommend
