CS449/649: Human-Computer Interaction Winter 2018 Lecture XI Anastasia Kuzminykh
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
Prototype Design Prototypes - interactive design model of the product Low-fidelity High-fidelity Tangible & Testable Artifacts Low-tech High-tech Partial functionality “Full” functionality Simulated True interaction interaction
Prototype Design High Fidelity Prototyping Tools Realistic system Content and Interactive response workflow details (Almost) Full Less human Allows broader fidelities errors usability testing
Prototype Design High Fidelity Prototyping Tools Implement by hand Prototyping Software
Prototype Design High Fidelity Prototyping Tools More control Implement by hand Prototyping Software More options Whatever suits your purposes and platforms: Takes longer - jQuery, Bootstrap, AngularJS, etc. - Android Studio, Xcode, Buggy IntelliJ IDEA, Apache Cordova, React Native, etc.
Prototype Design High Fidelity Prototyping Tools More control Faster Implement by hand Prototyping Software Sharing & More options comments Whatever suits your purposes - InVision (good with mockups) and platforms: Outside - JustInMind (has widgets) Takes longer product - jQuery, Bootstrap, AngularJS, etc. - Axure (not mobile friendly) Limited - Mockplus (pre-designed - Android Studio, Xcode, Buggy options IntelliJ IDEA, Apache Cordova, interaction components) React Native, etc.
Prototype Design Designing User Interface Elements & Elements Spatial Information Interaction characteristics composition organisation processing
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 Fitts’ Law Free space Conversation Triggers info
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 Fitts’ Law Free space Conversation Triggers info
Elements & Elements Spatial Information Interaction characteristics composition organisation processing Color Perception Red - bold, contemporary, Orange - social, friendly, Yellow - optimistic, clear, exciting, passionate, young affordable, happy, confident logical, lightweight, playful Purple - glamorous, creative, Green - peaceful, growing, Blue - trustworthy, secure, imaginative, nostalgic, caring, fresh, healthy, natural strong, honest, stable, calm feminine
Favorite colors: Least favorite colors: Color preferences by Joe Hallock Image: https://www.helpscout.net/blog/psychology-of-color/
Color preferences by Joe Hallock
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 Fitts’ Law Free space Conversation Triggers info
Logo examples: Interface examples: https://dribbble.com/ https://guardianproject.info/ https://www.slashgear.com/
Logo examples: Interface examples: http://zoominapps.com/law-app http://www.flightswatcher.com/ http://www.mitsubishicomfort.com/ https://www.pinterest.com/ /
Logo examples: Interface examples: http://www.bbc.co.uk/ http://www.geeky-gadgets.com/ http://www.addictootech.com/l http://www.blueplustechnologies.com/
Logo examples: Interface examples: http://techaeris.com/ https://jessteesang.wordpress.com/2014/09/17/app- http://www.tressarandolph.com/portf https://designmodo.com/weather- review-yplan/ olio/project05.php mobile-apps/
Logo examples: Interface examples: http://www.alejandro-castro.com https://www.pinterest.com/ https://www.behance.net/gallery/ https://menshealth2011.wordpress.com/ /
Elements & Elements Spatial Information Interaction characteristics composition organisation processing Shape Perception Circles - community, Triangles - power, friendship, relationship, science, law, stability, unity, trust strength Squares - stability, Vertical lines - power, Horizontal lines - strength, power, masculinity, ambition, community, tranquility, professionalism, aggression, strength flow, continuity efficiency
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 Fitts’ Law Free space Conversation Triggers info
Elements & Elements Spatial Information Interaction characteristics composition organisation processing Visceral Reaction Triggers Stimuli that cause instinctive and emotion-based, subconscious, bodily response Food Survival Pleasure Opportunities Images, colors, texts, shapes, etc.
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 Fitts’ Law Free space Conversation Triggers info
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 Fitts’ Law Free space Conversation Triggers info
Elements & Elements Spatial Information Interaction characteristics composition organisation processing The Von Restorff Effect == Isolation Effect. Items that stand out from their peers are more memorable Use color, shape, Be consistent with Use meaningful and position and texture accents and helpful contrasts for accents accentuated content Image: https://www.en.sitew.com/How-to-grow-your-online-business/Von-Restorff-effect-to-increase-sales
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 Fitts’ Law Free space Conversation Triggers info
Elements & Elements Spatial Information Interaction characteristics composition organisation processing Gestalt Principles Proximity Similarity Closure Continuity Symmetry Objects are seen as Objects in close Objects that look Shape is seen as Line is seen as a symmetrical and proximity are the same are seen a whole even if whole - natural formed around seen as a group as a group not fully closed eye movement center
Elements & Elements Spatial Information Interaction characteristics composition organisation processing Gestalt Principles for Information 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 Fitts’ Law Free space Conversation Triggers info
Recommend
More recommend
