CS449/649: Human-Computer Interaction Spring 2017 Lecture XXII - PowerPoint PPT Presentation

CS449/649: Human-Computer Interaction Spring 2017 Lecture XXII Anastasia Kuzminykh

History of user centered User Centered Design Course Review design in HCI Process July 12, July 17 June 19, June 21 May 1 - June 14 Academic HCI Presentation 2 June 26, June 28 July 19 Last class Special topics in HCI July 24 July 5, July 10

Course Review User Centered Design Process May 1 - June 14

Course Review Value Proposition

Create Design Ideas Create Ideas Design

Create Design Ideas Create Ideas Creativity - process of producing a new idea which has value to someone vs Nurture Nature Generating ideas: memories ordinary extraordinary

Create Design Ideas Create Ideas 4. Eureka moment 1. Preparation Creative process 2. Provocation 5. Verification 3. Incubation 6. Realization

Create Design Ideas Create Ideas 4. Eureka moment 1. Preparation Creative process 2. Provocation 5. Verification 3. Incubation 6. Realization

Create Design Ideas Create Ideas 4. Eureka moment 1. Preparation Creative process 2. Provocation 5. Verification 3. Incubation 6. Realization

Create Design Ideas Sketches User stories Wireframes - illustration of how the basic - description of a feature from - static representation of the UI concept works an end-user perspective layout and user flow As a user / <persona> , I want / need <action> so that I can <user goal>. Image: Image: https://www.behance.net/gallery/13421913/Wireframes-Restaurant-App http://uxmovement.com/wireframes/why-its-important-to-sketch- before-you-wireframe/

Wireframe Mockup Matt Sclarandis’s Weather App Wireframe on Behance

Create Design Ideas Design Interface - a surface/place where two independent systems, bodies or spaces meet / form a common boundary, and communicate with each other Interface - a communication channel Communication - exchanging of information

Create Design Ideas Design Semiotics - the study of signs and symbols Representamen (signifier) - the form of the sign Sign - Interpretant - anything that communicates a what people make of the sign meaning Object (signified) - the actual reference of the sign

Create Design Ideas Design Signifier Feedback Affordance Discoverability Constraints Mapping Conceptual Model

Create Design Ideas Design Signifier - indicators of any type that communicate Feedback - conveys effects of user’s actions the action needed so the affordance can take place Affordance - the possible use for an object when Discoverability - whether it’s possible to figure out interacting with it how to use an object by interacting with it Constraints - restrictions that limit the possible Mapping - indication of the relationship between actions available with an object objects Conceptual Model - user’s understanding of how the system works

Create Design Ideas Design Signifier - indicators of any type that communicate Physical - caused by physical features the action needed so the affordance can take place Cultural - based on what is culturally Affordance - the possible use for an object when accepted interacting with it Semantic - based on the meaning of the situation Constraints - restrictions that limit the possible actions available with an object Logical - use reasoning to determine the alternatives

Create Design Ideas Design Signifier - indicators of any type that communicate Feedback - conveys effects of user’s actions the action needed so the affordance can take place Affordance - the possible use for an object when Discoverability - whether it’s possible to figure out interacting with it how to use an object by interacting with it Constraints - restrictions that limit the possible Mapping - indication of the relationship between actions available with an object objects Conceptual Model - user’s understanding of how the system works

Course Review Value Proposition

Course Review Value Proposition

Create Design Ideas Prototype Design Information Architecture - structural design of shared information environments Users flow through Catalog user’s Presentation of the Decision driving your product information information function

Create Design Ideas Prototype Design Knowledge Organisation Domain Analytics Taxonomy Folksonomy Approach Practice of Practice of Practice of classification based classification based classification based on sociological - on hierarchical on non-hierarchical epistemological view. relationship. relationship. Indexing is suited to Parent-child Public tags and their fulfill a task by specific hierarchies frequencies group

Prototype Design Prototypes - interactive design model of the product Low-fidelity VS High-fidelity Breadth - number Depth - degree of Appearance - Input methods - of covered features functionality building means device mediation

Create Design Ideas Prototype Design Prototypes Static representations of the product - interactive design model of the product Sketches Wireframes Mockups Low-fidelity High-fidelity Visualization Testing and Evaluation

Course Review Value Proposition

Course Review Value Proposition

Prototype Design Paper Prototyping Evaluation 1. Identify 3. Choose 5. Assign testing testers team roles goals 2. Identify 4. Prepare 6. Run items materials evaluation to test

Course Review Value Proposition

Prototype Design High Fidelity Prototyping Tools Realistic system Content and Interactive response workflow details (Almost) Full Less human Allows usability fidelities errors testing

Prototype Design Designing User Interface Elements & Elements Spatial Information Interaction characteristics composition organisation processing Visual Design “Cognitive” Design

Prototype Design Designing User Interface Elements & Elements Spatial Information Interaction characteristics composition organisation processing The Von Color Perception Rule of Thirds Dual-coding theory Manipulation Restorff effect Shape Perception Gestalt Principles Types of vision Patterns matching Locomotion Visceral Reaction Social & Emotional Fitt’s Law Free space Conversation Triggers info

Course Review Value Proposition

Prototype Design High Fidelity Prototype Evaluation Tree Testing Click Testing Heuristic Evaluation Eye Tracking A/B Testing Keystroke Level Modeling Focus Groups Walk Through Five Second Test

Course Review Value Proposition