Human-Computer Interaction 17. Design – Design Principles (2) Sunyoung�Kim,�PhD�
Last class Psychological design principles
Recap. 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.
Recap. Gestalt theory Proximity Similarity Continuity Connectedness Closure Figure/Ground
1. Figure/Ground 2. Proximity 3. Similarity 4. Connectedness 5. Continuity 6. Closure
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
Today Norman’s design principles
Norman’s Design Principles
Usability Usability is a measure of the effectiveness, efficiency and satisfaction with which specified users can achieve specified goals in a particular environment - ISO 9024 Usability is NOT identical to making things simple to use!!!
Norman’s Door Link: https://www.youtube.com/watch?v=yY96hTb8WgI
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
1. Visibility Just by looking, the user should know what to do : • State of the system • Possible actions
1. Visibility
1. Visibility • Sensor technology like auto faucets - not sure how to use - guess where to put hands • Visible knobs, dials and buttons have been replaced by invisible and ambiguous “active zone
1. Visibility
2. Feedback “What is it doing now? what action has been performed? Sending back information immediately 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
3. Mapping
4. Affordance “Giving a clue to its operation”: An attribute of an object that allows people to know how to use it Examples : • Mouse button à push • Door handle à pull • Glass à see through
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
5. Constraints
5. Constraints
5. Constraints
6. Consistency • Provide similar operations and similar elements to achieve similar task • 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!
6. Consistency • Aesthetic • Style and appearance is repeated to enhance recognition, communicates membership and sets emotional tone
6. Consistency
6. Consistency http://www.hugeinc.com
6. Consistency
6. Consistency
6. Consistency Problems of Consistency: • Repetitive • Boredom • Monotony à Inconsistency With a Purpose Draw Attention • The Sake of Usability •
6. Consistency
1. Visibility 2. Feedback 3. Mapping 4. Affordance 5. Constraint 6. Consistency
1. Visibility 2. Feedback 3. Mapping 4. Affordance 5. Constraint 6. Consistency
1. Visibility 2. Feedback 3. Mapping 4. Affordance 5. Constraint 6. Consistency
1. Visibility 2. Feedback 3. Mapping 4. Affordance 5. Constraint 6. Consistency
1. Visibility 2. Feedback 3. Mapping 4. Affordance 5. Constraint 6. Consistency
1. Visibility 2. Feedback 3. Mapping 4. Affordance 5. Constraint 6. Consistency
1. Visibility 2. Feedback 3. Mapping 4. Affordance 5. Constraint 6. Consistency
When Interaction Design is done well, it: • Communicates to the user what functions are available, and allows them to infer how to interact with what they see: Visibility, affordance • Allows the user to predict what’s about to happen, be aware of what is happening now and understand what has just happened: Feedback • Gives the user a clear sense of workflow – how many steps there may be, how long it may take and a general sense of their level of effort: Mapping • Prevents users from making too many mistakes by providing smart defaults and appropriate visual design of UI controls: Constraint, consistency
User interface design basics Best Practices for Designing a UI 1. Keep the interface simple The best interfaces are almost invisible to the user 2. Create consistency and use common UI elements Users feel more comfortable and are able to get things done more quickly 3. Be purposeful in page layout Consider the spatial relationships between items and structure the page based on importance 4. Strategically use color and texture You can direct attention toward or redirect attention away from items using visual cues 5. Use typography to create hierarchy and clarity Different sizes, fonts, and arrangement of the text to help increase legibility and readability 6. Make sure that the system communicates what’s happening Always inform your users of the state 7. Think about the defaults You can reduce the burden on the user
Group project
P4. Wireframe and Flowchart Among the sketches you created in the last assignment, you either pick some, combine some, or update some. And then, come up with a final set of wireframe with a flowchart. Wireframe Use a software of your choice. • o Recommended: Wireframe.cc https://wireframe.cc/ o Recommended: Balsamiq https://balsamiq.com/products/ o Recommended: Indigo studio https://www.infragistics.com/products/indigo-studio o Check for more: http://mashable.com/2010/07/15/wireframing-tools/#oqegDW3EXZqq Do not apply colors • Don't focus on the details, look & feel and visual details, but focus on • the content structure, workflow, and systems usability.
P4. Wireframe and Flowchart Indigo Studio • You can get a free academic license to use it beyond the 30 day trial using your Rutgers.edu email address to download and install you’re a Free 1-Year Academic License for Infragistics Indigo Studio here (http://www.infragistics.com/products/indigo-studio/ indigo-academic-license) #Disclaimer. Further instruction of this submission can be given verbally during class or through Piazza.
P4. Wireframe and Flowchart Flowchart Use a software of your choice • o Recommended: Powerpoint o Recommended: https://www.draw.io/ Turn in: a PDF with Your project proposal on top • A link to your website that has wireframes and a flowchart • Wireframe of your entire system • A flowchart • State which team members contributed to which part • Exemplar: Link • Due by midnight 11/13 • #Disclaimer. Further instruction of this submission can be given verbally during class or through Piazza.
P4. Wireframe and Flowchart Rubric Wireframe (6pt) • o If the wireframe does not miss any screens that are important part of the system (2pt) o If each screen in the wireframe clearly demonstrates what it's about (2pt) o If each screen has any usability problems (2pt) Workflow (4pt) • o If the workflow does not miss any steps that are important part of the system (2pt) o If the workflow clearly demonstrates how a user would navigate through a system (1pt) o If the workflow does not have any usability problem (1pt) #Disclaimer. Further instruction of this submission can be given verbally during class or through Piazza.
Recommend
More recommend
