4. Elaboration and Reduction
Elaborate - generate solutions. These are the opportunities
Reduce - decide on the ones worth pursuing
Repeat - elaborate and reduce again on those solutions
Source: Laseau,P. (1980) Graphic Thinking for Architects & Designers. John Wiley and Sons
5. Prototyping
Create physical form of ideas
Allow people to experience and interact with them
Why Prototyping?
Empathy gaining- deepen understanding of design space
Exploration – build to think
Testing – test solutions with end users
Inspiration – help others catch your vision
16. Proto.io - http://www.proto.io/
Web based mobile prototyping tool
Features
Prototype for multiple devices
Gesture input, touch events, animations
Share with collaborators
Test on device
18. Sketch
It’s about
Freehand drawing
Quickly recording idea
Trying out different ideas
Establishing a composition
Not intended as as a finished work
19. Wireframe
It’s about
Functional specs
Navigational systems
Functionality and layout
Notes about the intended functionality
How interface elements work together
Lack of typographic style, colour or graphics
Leaving room for the design to be created
21. Mockup
It’s about
Look and feel
Build on the wireframe with
graphics and polish
May adjust layout slightly
but stays within the general
guide of the wireframe
23. Prototype
It’s about
Simulating the final design
Functionality of intended design
May be reduced in size or
functionality
Functional working together
Final check for design flaws
24. Wireframe vs. Prototype vs. Mockup
Wireframe
Low fidelity representation of design
What UI elements, where UI are placed
Prototype
Medium to high fidelity
Supports user interaction
Mockup
High fidelity static design
Visual design draft
27. 27
www.id-book.com
Compromises in Prototyping
• All prototypes involve compromises
• For software-based prototyping maybe there is a
slow response? sketchy icons? limited functionality?
• Two common types of compromise
• ‘horizontal’: provide a wide range of functions,
but with little detail
• ‘vertical’: provide a lot of detail for only a few
functions
• Compromises in prototypes mustn’t be ignored.
Product needs engineering
28. Compromises in prototyping
Compromises in low-fidelity prototypes:
device doesn't actually work
Compromises in high-fidelity prototypes:
slow response, sketchy icons, limited functionality
Two common types of compromise
‘horizontal’: provide a wide range of functions, but
with little detail
‘vertical’: provide a lot of detail for only a few
functions
30. Horizontal Prototyping
Disadvantages
Not possible to perform real work
Users cannot interact with real data
Often possible to create a wish list interface
Advantages
Can be created quickly
Gives an idea of how the whole interface will hang
together
Identifies top level functionality
30
31. Vertical Prototyping
Reduction of number of features
In-depth functionality for a few selected
features
Tests part of system
Tests in depth under realistic circumstances
with real user tasks
Main limitation: users cannot move freely
through the system 31
33. Flinto
https://www.flinto.com/
High fidelity prototyping
Use final png files/interface screens
Connect mockup screens visually
Apply transitions, scrolling etc
Send prototypes to mobile for viewing
Looks like real application
37. App Inventor
http://appinventor.mit.edu/
http://appinventor.org/
Visual Programming for Android Apps
Features
Access to Android Sensors
Multimedia output
Drag and drop web based interface
Designer view – app layout
Blocks view – program logic/control
38. Device Setup
Emulator
Use aiStarter on Windows/Linux
Live view (run on connected device)
Make sure device is in Debug mode
Install companion app (sideload on Glass)
- MITAI2Companion.apk
60. Rapid Prototyping
Speed development with quick hardware mockups
handheld device connected to PC
LCD screen, USB phone keypad, Camera
Can use PC tools for rapid development
Flash, Visual Basic, etc
78. Physical Input For Google Glass
Can we develop unobtrusive input devices ?
Reduce need for speech, touch pad input
Socially more acceptable
Examples
Ring,
pendant,
bracelet,
gloves, etc
87. Microsoft .Net Gadgeteer
http://www.netmf.com/gadgeteer/
Open source tool for building small devices
Uses .Net Micro Framework
Visual Studio/Visual C# Express
Support for many different sensors/components
97. Typical Iterations for HW/SW Product:
1. Paper prototype to evaluate conceptual model
2. Interactive computer-based prototype with rough
screens to evaluate feature placement
3. Tethered prototype to evaluate button + screen
interactions
4. Real device prototyped with major features
working
5. Real device prototyped with all features working
and graphic design implemented
107. References
Paper Prototyping: the fast and easy way to design and refine user interfaces
http://paperprototyping.com/
Models, Prototypes, and Evaluations for HCI Design: Making the Structured
Approach Practical George Casaday, Cynthia Rainis
http://www.sigchi.org/chi95/proceedings/tutors/gc_bdy.htm
www.sigchi.org/chi95/proceedings/tutors/gc_bdy.htm
http://hci.stanford.edu/research/prototyping/
http://pages.cpsc.ucalgary.ca/~saul/hci_topics/topics/prototyping.html
http://hci.epfl.ch/teaching/hci/course_material/lofi-prototype/lecture5-lofi_proto-x6.pdf
107