interaction design beyond the pixel. › content › download › 2691 › 303… · beyond the...
TRANSCRIPT
![Page 1: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/1.jpg)
Interaction design beyond the pixel.1 SEPT 2017
Photo by Daniel von Appen on Unsplash
![Page 2: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/2.jpg)
BEYOND THE PIXELHello!KEVIN CANNON INTERACTION DESIGNER FROG DESIGN
@MULTIKEV
![Page 3: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/3.jpg)
www.frogdesign.com
![Page 4: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/4.jpg)
![Page 5: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/5.jpg)
U P T O N O W
![Page 6: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/6.jpg)
Locations
ABOUT US
6
10 studios 500 people
LARGEST: NYC - 120 PEOPLE
SMALLEST: SINGAPORE - 3 PEOPLE
![Page 7: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/7.jpg)
BEYOND THE PIXEL
Today
![Page 8: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/8.jpg)
8
Intro
Digital Ergonomics
Exercises: Rapid sketching exercises
Design Principles
☕
Exercise: Prototyping
Share-out & Feedback
Wrap Up
AGENDA
13:45
15:15-15:30
16:50
![Page 9: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/9.jpg)
Iterative Sketching
![Page 10: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/10.jpg)
Design Principles
CONSISTENT
BEAUTIFUL
SIMPLE
CLEAN
USER-FRIENDLY
USER-FRIENDLY
UNIQUE
FAST
CLEAN
How do we write more meaningful principles than “simple”?
![Page 11: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/11.jpg)
Prototyping
Since we’re talking about physical things, we’ll mock things up at scale.
![Page 12: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/12.jpg)
Shareout
We’ll learn from each-other.
![Page 13: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/13.jpg)
13
Timekeeping
We need to wrap up at 16:50
![Page 14: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/14.jpg)
14
BEYOND PIXELS
Let’s form 6 groups
![Page 15: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/15.jpg)
BEYOND THE PIXEL
Interaction design beyond the pixel
![Page 16: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/16.jpg)
16
BEYOND THE PIXEL
Designing the right thing
Designing the thing right
Left:
User research
Product strategy
Service design
Right:
Usability
Information architecture
Ergonomics
![Page 17: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/17.jpg)
ContextScreens are getting put everywhere.
Museums
Hybrid devices like Amazon Echo Show.
![Page 18: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/18.jpg)
ContextScreens are getting put everywhere.
Museums
Hybrid devices like Amazon Echo Show.
![Page 19: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/19.jpg)
BEYOND THE PIXEL
Your brief
![Page 20: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/20.jpg)
BEYOND THE PIXEL
Brief: Design an informational
kiosk for a museum
A potential client has come to you and asked you to design the UI for a kiosk for a museum. They have already placed an order for the kiosks and are looking for a designer to design the interface for the kiosks. They have purchased multiple ones and will place
them around the museum a key places. If the initial rollout is successful, and engagement is high, they would like to expand use of kiosks further.
As the client is partially funded by the government, they are particularly concerned with making sure the kiosk is usable by all visitors, and that is a key factor in which vendor they choose for this project.
![Page 21: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/21.jpg)
21
BEYOND PIXELS
Each team will have a different form factor
2. TableLarge flat table for use by
multiple people.
1. TerminalLarge widescreen display
at an angle.
3. Large DisplayLarge vertical touchscreen display with dual use
for advertising and way finding.
![Page 22: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/22.jpg)
BEYOND THE PIXEL
Exercise 1.1
Crazy 8s: Rapid quiet sketching
Photo by rawpixel.com on Unsplash
![Page 23: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/23.jpg)
23
BEYOND PIXELS
Crazy 8s
Take A4 sheets. Fold into 8. Use big markers. Do individually. Rapid sketching.
⏱ 5 mins.
4X
https://webdesign.tutsplus.com/articles/web-designers-roll-up-your-sleeves-and-sketch--cms-25737
![Page 24: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/24.jpg)
Use Case 1:
Help uses find key facilities, such as toilets, the locker room,
and main exhibitions.
Standard view > Home screen > find toilet > show location
24
BEYOND PIXELS
Any questions before we get started?
https://webdesign.tutsplus.com/articles/web-designers-roll-up-your-sleeves-and-sketch--cms-25737
![Page 25: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/25.jpg)
BEYOND THE PIXEL
Digital Ergonomics
Keep all of this in mind, for your exercise.
http://bridgedesign.com/touch-screen-ergonomics/
![Page 26: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/26.jpg)
26
DIGITAL ERGONOMICS
HTTP://WWW.LUKEW.COM/FF/ENTRY.ASP?1927=
![Page 27: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/27.jpg)
27
DIGITAL ERGONOMICS
CradlingSingle-handed Two-handed
HTTP://WWW.LUKEW.COM/FF/ENTRY.ASP?1927=
![Page 28: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/28.jpg)
28
DIGITAL ERGONOMICS
![Page 29: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/29.jpg)
29
DIGITAL ERGONOMICS
HTTP://WWW.LUKEW.COM/FF/ENTRY.ASP?1927=
Want you to develop this map for your device.
![Page 30: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/30.jpg)
https://www.theverge.com/2016/5/2/11568836/google-keyboard-android-app-one-handed-mode-new-features
![Page 31: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/31.jpg)
Section Subtitle Section Subtitle
MICROSOFT TOUCH UI GUIDELINES 31
DIGITAL ERGONOMICS
Interaction Reading
BEST
GOOD
OK
Using vs reading
![Page 32: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/32.jpg)
HTTPS://WWW.LUKEW.COM/FF/ENTRY.ASP?1649 32
DIGITAL ERGONOMICS
Top/Bottom Navigation
Bottom/Split Navigation
Navigation Models
https://www.lukew.com/ff/entry.asp?1649
![Page 33: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/33.jpg)
33
DIGITAL ERGONOMICS
A
B
Fitts’ Law
http://particletree.com/features/visualizing-fittss-law/
http://www.lukew.com/ff/entry.asp?1927=
![Page 34: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/34.jpg)
34
DIGITAL ERGONOMICS
Prime Pixels
With a mouse, the 4 corners are infinite space. “Prime pixels”
http://particletree.com/features/visualizing-fittss-law/ https://www.uxpin.com/studio/blog/a-ux-designers-guide-to-improving-speed-of-use/
![Page 35: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/35.jpg)
35
DIGITAL ERGONOMICS
∞
With a mouse, the 4 corners are infinite space. “Prime pixels”
http://particletree.com/features/visualizing-fittss-law/ https://www.uxpin.com/studio/blog/a-ux-designers-guide-to-improving-speed-of-use/
https://www.bram.us/2007/06/26/their-missing-mile-high-menus-and-magic-corners-fitts-law-vs-apple-on-windows/
![Page 36: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/36.jpg)
36
With a mouse, the 4 corners are infinite space. “Prime pixels”
http://particletree.com/features/visualizing-fittss-law/ https://www.uxpin.com/studio/blog/a-ux-designers-guide-to-improving-speed-of-use/
![Page 37: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/37.jpg)
37
DIGITAL ERGONOMICS
Prime Edges
http://www.lukew.com/ff/entry.asp?1927=
![Page 38: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/38.jpg)
38
DIGITAL ERGONOMICS
![Page 39: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/39.jpg)
39
DIGITAL ERGONOMICS
LEAN FORWARD LEAN BACKWARD
LARGER FONTS SLOWER
BIGGER ITEMS
SMALLER FONTS HIGHER INFORMATION DENSITY FASTER
Even our personal devices have different uses.
Devices we engage very directly with, on the left, and literally “lean forward” to use, vs devices we “lean backward” to use like a TV interface.
These have very different properties that are not often talked about.
![Page 40: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/40.jpg)
40
DIGITAL ERGONOMICS
X X X X
APPEARANCE OF 24PX FONT
Consider scale of items for your device.
https://www.imarc.com/blog/best-font-size-for-any-device
![Page 41: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/41.jpg)
41
DIGITAL ERGONOMICS
Issue # Notes4
A deskphone presents a new context for touchscreen interaction. Our current reference points, desktop computer, mobile phone and tablet all have different modes of interaction. A desktop computer is a large screen, and manipulated with precision tools - the mouse and keyboard, while tablets and phones are manipulated with a finger, and held very close to the eyes and body.
A deskphone is further away from the body, reducing physical dexterity and accuracy in movement, and further away from the eyes, making things harder to read. In many instances on this device the font sizes are too small. Moveover gestures like drag & drop do not suit the physical context well.Contextual
RecommendationEnsure that the physical constraints are catered for, that more advanced gestures, such as pinch & zoom, are limited or removed. Ensure that font sizes and hit areas are large enough for this context, and not just the same size as for tablet or phone.
Arm’s length interface.
circa.40cm
circa.80cm
2328. February 2012Siemens Next Gen UI - Heuristic Analysis
Posture
Tablet on desk vs in hands.
Have to recheck assumptions.
Don’t just copy app stuff.
![Page 42: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/42.jpg)
BEYOND THE PIXEL
Exercise 1.2 Iterating together
Photo by rawpixel.com on Unsplash
![Page 43: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/43.jpg)
43
BEYOND PIXELS
Take your design and explore it further, looking at the full brief.
A3 sheets
In a group. Combine and remix ideas . Create 3 different approaches.
⏱ 25 mins.
![Page 44: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/44.jpg)
BEYOND THE PIXEL
Part 3 Design Principles
![Page 45: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/45.jpg)
CONSISTENT
BEAUTIFUL
SIMPLE
CLEAN
USER-FRIENDLY
USER-FRIENDLY
UNIQUE
FAST
CLEAN
EFFICIENT
https://medium.com/apegroup-texts/design-principles-a-guide-to-less-shitty-feedback-64e9541816c1
![Page 46: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/46.jpg)
46
What is unique about this experience or
form factor?
Not just make it simple
![Page 47: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/47.jpg)
DESIGN PRINCIPLES
47
![Page 48: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/48.jpg)
DESIGN PRINCIPLES
48
Bump-proof Works well with arm outstretched Child-friendly Design for night & day
Kid’s can’t read.
Safety.
![Page 49: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/49.jpg)
DESIGN PRINCIPLES
49
![Page 50: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/50.jpg)
DESIGN PRINCIPLES
50
Fast & efficient Highly learnable Forgiving Empowering
Kid’s can’t read.
![Page 51: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/51.jpg)
51
DESIGN PRINCIPLES
![Page 52: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/52.jpg)
52
DESIGN PRINCIPLES
A shared experience. Readable from a distance. A comforting experience. Two screens, for different users.
![Page 53: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/53.jpg)
53
BEYOND PIXELS
Approachable
Learnable
Context vs Form
![Page 54: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/54.jpg)
BEYOND THE PIXEL
Part 4 Prototyping
https://www.youtube.com/watch?v=vWz9VN40nCA
![Page 55: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/55.jpg)
![Page 56: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/56.jpg)
![Page 57: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/57.jpg)
![Page 58: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/58.jpg)
58
How do you test a rear seat UI quickly?
![Page 59: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/59.jpg)
59
We learned that up-down swiping was bad.We learned that keeping stretching your arm out is tough.Therefore - not much gaming.
Obvious in retrospect, but easier to do quickly than just think about or research.And honestly, also more fun.
![Page 60: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/60.jpg)
60
Act it out
Photo by Jakob Owens on Unsplash
![Page 61: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/61.jpg)
61
https://www.youtube.com/watch?v=-SOeMA3DUEs
![Page 62: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/62.jpg)
BEYOND THE PIXEL
What about 3D?
![Page 63: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/63.jpg)
63
https://vimeo.com/120519843
![Page 64: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/64.jpg)
BEYOND THE PIXEL
This isn’t real life
![Page 65: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/65.jpg)
BEYOND THE PIXEL
Real life is messy
Photo by Jesus Hilario H. on Unsplash
![Page 66: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/66.jpg)
BEYOND THE PIXEL
If you can’t test outside, test inside.
![Page 67: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/67.jpg)
![Page 68: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/68.jpg)
![Page 69: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/69.jpg)
BEYOND THE PIXEL
Know which ways you’re not like your user
![Page 70: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/70.jpg)
Many public installations have accessibility requirements. A shopping
mall may not, but consider how that
might change your system.
Description text dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ute enim ad
minim veniam, quis exer citation ullamco lorem ipsum.
Description text dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ute enim ad
minim veniam, quis exer citation ullamco lorem ipsum.
Description text dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ute enim ad
minim veniam, quis exer citation ullamco lorem ipsum.
Accessibility Section Subtitle Section Subtitle Section Subtitle
PRIMARY FOOTER 70
DIGITAL ERGONOMICS
Consider wheelchair users and children.
Consider accessibility
![Page 71: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/71.jpg)
BEYOND THE PIXEL
Exercise:Prototype to understand
![Page 72: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/72.jpg)
72
EXERCISE
1. Build a full-scale model 2. Act it out 3. Learn 4. Iterate
We’ll present observations at the end.
⏱ 45 mins
Time: 45⏱
![Page 73: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/73.jpg)
BEYOND THE PIXEL
Share out
![Page 74: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/74.jpg)
74
BEYOND PIXELS
What changes did you make during this process?
What did you learn when you acted it out?
![Page 75: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/75.jpg)
BEYOND THE PIXEL
Recap
![Page 76: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/76.jpg)
76
DIGITAL ERGONOMICS
20 cm
6 meter
20 meter
Posture
Tablet on desk vs in hands.
![Page 77: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/77.jpg)
77
DIGITAL ERGONOMICS
Consider accessibility
![Page 78: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/78.jpg)
HTTP://BRIDGEDESIGN.COM/TOUCH-SCREEN-ERGONOMICS/ 78
DIGITAL ERGONOMICS
Hardware restrictions: Viewing angle
http://bridgedesign.com/touch-screen-ergonomics/
![Page 79: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/79.jpg)
HTTP://BRIDGEDESIGN.COM/TOUCH-SCREEN-ERGONOMICS/ 79
DIGITAL ERGONOMICS
Viewing angle
Line-height
![Page 80: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/80.jpg)
HTTP://BRIDGEDESIGN.COM/TOUCH-SCREEN-ERGONOMICS/ 80
DIGITAL ERGONOMICS
Parallax
Where do you put labels?http://bridgedesign.com/touch-screen-ergonomics/
![Page 81: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/81.jpg)
HTTP://BRIDGEDESIGN.COM/TOUCH-SCREEN-ERGONOMICS/ 81
DIGITAL ERGONOMICS
Parallax
✪ Button ✪ Buttonvs
Where do you put labels?http://bridgedesign.com/touch-screen-ergonomics/
![Page 82: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/82.jpg)
HTTP://BRIDGEDESIGN.COM/TOUCH-SCREEN-ERGONOMICS/ 82
DIGITAL ERGONOMICS
Parallax
Button✪
vs Button✪
Where do you put labels?http://bridgedesign.com/touch-screen-ergonomics/
![Page 83: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/83.jpg)
HTTP://BRIDGEDESIGN.COM/TOUCH-SCREEN-ERGONOMICS/ 83
DIGITAL ERGONOMICS
Touch zones
http://bridgedesign.com/touch-screen-ergonomics/
![Page 84: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/84.jpg)
Double screen
![Page 85: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/85.jpg)
![Page 86: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/86.jpg)
HTTP://IO.HOME.TUDELFT.NL/FILEADMIN/FACULTEIT/IO/OVER_DE_FACULTEIT/AFDELINGEN/INDUSTRIAL_DESIGN/SECTIE_APPLIED_ERGONOMICS_AND_DESIGN/APPLIED_ERGONOMICS_AND_DESIGN/DYNAMIC_ANTHROPOMETRY/PEOPLE/MOLENBROEK/PUBLICATIONS/DOC/ENHANCING_ANTHROPOMETRY.PDF
86
DIGITAL ERGONOMICS
Accessibility strategy
DESIGN FOR YOURSELF DESIGN FOR ALLDESIGN FOR THE AVERAGE
DESIGN FOR MULTIPLE TYPES
DESIGN FOR THE SMALL
http://io.home.tudelft.nl/fileadmin/Faculteit/IO/Over_de_Faculteit/Afdelingen/Industrial_Design/Sectie_Applied_Ergonomics_and_Design/Applied_Ergonomics_and_Design/Dynamic_Anthropometry/people/molenbroek/publications/doc/
enhancing_anthropometry.pdf
![Page 87: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/87.jpg)
Today we have focused on one scenario, but this can be applied to different input methods, different form factors, different contexts.
Prototyping helps get closer to the problem.
Design principles guide us through the process.
![Page 88: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/88.jpg)
RECAP
88
Prototype early.
Act it out.
Get your hands dirty!
In today’s workshop we have focused primarily on one context, and screen-based interactions, but this can be applied to anything.
![Page 89: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/89.jpg)
KEVIN CANNON
@MULTIKEV
Thank you very much!
![Page 90: Interaction design beyond the pixel. › content › download › 2691 › 303… · BEYOND THE PIXEL Brief: Design an informational kiosk for a museum A potential client has come](https://reader030.vdocuments.net/reader030/viewer/2022041104/5f045e867e708231d40da344/html5/thumbnails/90.jpg)
BEYOND THE PIXEL
Thanks very much!