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

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