CS449/649: Human-Computer Interaction Spring 2017 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
EatBellevue mobile app prototype designed by Daniel I Kim
iPhone RewardSnap app high-fidelity prototypes designed by Studio Science
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 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 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
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
http://lovelymobile.news/mcdonalds-to-trial-mobile-ordering-app-in-the-us/ http://www.virginmobile.ca/en/support/download-myaccount-app.html https://techcrunch.com/2014/11/17/targets-mobile-app-gets-indoor-mapping-interactive-bl https://www.redolive.com/cocacola ack-friday-maps/
http://www.pierremaes.com/post/124569737015/fantaeurope http://www.equisense.com/en/motion.html http://news.softpedia.com/news/VLC-for-Windows-Phone-Now-Available-for-Download-t https://dribbble.com/shots/2378228-Mobile-App-and-Mobile-website-Design o-All-Beta-Testers-466616.shtml
http://www.seattleyellowcab.com/ https://www.westernunion.com/nz/en/mobile-app.html https://www.yellowpages.com/products http://lokiev.com/websites/pfv7/
http://www.bp.com/en_gb/on-the-road/united-kingdom/find-nearest-bp/bp-app.html https://www.starbucks.ca/coffeehouse/mobile-apps/mystarbucks-android-app http://www.webhostingreviewsbynerds.com/relieve-hunger-beautiful-examples-of-food-rel https://www.tdcanadatrust.com/products-services/banking/electronic-banking/ ated-mobile-app-uis/ mobile/mobile-index.jsp
http://appamatix.com/facebook-desktop-site-mobile/ https://www.cnet.com/news/walmart-expands-iphone-scan-go-app-to-200-stores/ http://cargocollective.com/taylorsnyder/Equine-Pfizer-Mobile-App http://www.ikea.com/ms/en_ID/customer-service/apps/mobile_app_14.html
https://www.techfoodmag.com/foodtech-12-tendencias-para-2015-y-ii/ http://www.mapmywalk.com/app/ https://play.google.com/store/apps/details?id=com.a0soft.gphone.aCurrencyPro https://play.google.com/store/apps/details?id=air.com.richdad.cashflowfs
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
Image: The Logo Company
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 Fitt’s 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 Fitt’s 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 Fitt’s Law Free space Conversation Triggers info
Elements & Elements Spatial Information Interaction characteristics composition organisation processing The Von Restorff Effect Aka 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
The Button Color A/B Test: Red Beats Green
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
Recommend
More recommend
