ux design for mobile (appsterdam guru session)
DESCRIPTION
Blog by my friends from ViCompany who attended the workshop:http://blog.vicompany.nl/ux-workshop-for-mobile-appsDescription of the workshop by the organisation:Appsterdam is a non-profit community of App makers improving craftsmanship, quality, diversity, cooperation, and professionalism in the development community, and making Amsterdam a capital city of App development.Appsterdam Guru Sessions are informal, very hands-on workshops to share a technology or a technique. Explanation from your peers, open discussion and practical experience are key to these sessions.On March 14, Appsterdam and BNO will come together to give the third of a series of hands-on sessions created for designers, from any discipline, who are interested in developing an expertise in the design of Apps for mobile devices.Our guru for the session is Ruben Bos of Mangrove, who will lead a deep-dive into designing strong User Experience (UX) for mobile Apps. At Mangrove he worked on apps like Txxi, BOVAG and Ministry of Defense. In this session he will explain UX techniques and best practices, largely based on lessons learned from years of web development.This session is primarily targeted at Graphic and Web Designers to learn UX design for mobile, but Developers and Interaction Designers who want to improve their UX skills are also welcome. Be prepared to get your hands dirty as the workshop will be largely paper and marker based.TRANSCRIPT
![Page 1: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/1.jpg)
ux design for mobileappsterdam guru session • BNO • march 14th 2012
mangrove.com • @mangrove
![Page 2: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/2.jpg)
ruben bosmangrove
@rubenbos
![Page 3: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/3.jpg)
onlineecosystemwe develop (responsive) websites,
iphone apps, android apps, webapps,
social tv, facebook apps, online
marketing, campaigns... a lot!
![Page 4: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/4.jpg)
![Page 5: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/5.jpg)
![Page 6: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/6.jpg)
today.
12:00 • Lunch
13:00 • Introductions
13:30 • Never-ending-story by me!
14:30 • Sketch awesome stuff
16:30 • Round-up
17:00 • PIZZAAAA
![Page 7: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/7.jpg)
introduce yourselfin 140 characters
(I’ll do the counting)
![Page 8: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/8.jpg)
guru session?
![Page 9: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/9.jpg)
what not
• go deep into stuff already covered in previous 2 sessions:
• the anatomy of apps
• platform choices, numbers & wars
• how to make clickable prototypes
![Page 10: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/10.jpg)
what we’re gonna cover
• structuring and defining your app
• handling technical possibilities & impossibilities
• a fast & effective UX (sketch) technique
![Page 11: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/11.jpg)
UX design an appin a fast and fun way
main goal
alone or in a team
alone or in a team
![Page 12: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/12.jpg)
lessons learned
![Page 13: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/13.jpg)
![Page 14: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/14.jpg)
source: killingtime (flickr.com)
![Page 15: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/15.jpg)
![Page 16: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/16.jpg)
![Page 17: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/17.jpg)
![Page 18: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/18.jpg)
TXXI verhaal
![Page 19: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/19.jpg)
![Page 20: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/20.jpg)
learn from others
![Page 21: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/21.jpg)
![Page 22: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/22.jpg)
mobile UX
![Page 23: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/23.jpg)
![Page 24: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/24.jpg)
![Page 25: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/25.jpg)
![Page 26: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/26.jpg)
apps
![Page 27: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/27.jpg)
![Page 28: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/28.jpg)
![Page 29: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/29.jpg)
![Page 30: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/30.jpg)
how?
![Page 31: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/31.jpg)
![Page 32: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/32.jpg)
![Page 33: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/33.jpg)
how?
• define user stories, what does the user want & what are business needs?
• define requirements, for example API’s.
• define structure
• we sketch using templates
![Page 34: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/34.jpg)
![Page 35: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/35.jpg)
why sketchboarding?
• reach UX solutions faster;
• requires to focus on multiple solutions, before deepening a solution that might not be ideal;
• made for team work;
• agile worked well for code, let’s do the same with UX.
more info on sketchboarding can be found at Adaptive Path’s blog: http://bit.ly/uxsketch
![Page 36: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/36.jpg)
now get to work!user stories • defining structure • sketchboarding
![Page 37: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/37.jpg)
![Page 38: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/38.jpg)
creative brief
1 assignment: inspiration
5 minutes
![Page 39: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/39.jpg)
inspiration library
2 assignment: inspiration
20 minutes
![Page 40: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/40.jpg)
![Page 41: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/41.jpg)
define user stories
3 assignment: user stories
15 minutes
![Page 42: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/42.jpg)
As a <user role>, I can <story> so that <benefit>
4 assignment: user stories
example:
![Page 43: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/43.jpg)
prioritize user stories
5 assignment: user stories
10 minutes
![Page 44: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/44.jpg)
define structure
6 assignment: sketchboarding
10 minutes
![Page 45: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/45.jpg)
6-up template
7 assignment: sketchboarding
30 minutes
individual
![Page 46: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/46.jpg)
discuss!
8 assignment: sketchboarding
15 minutes
team
![Page 47: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/47.jpg)
1-up template
9 assignment: sketchboarding
20 minutes
team
![Page 48: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/48.jpg)
show your ux solutions
10 result
team
![Page 49: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/49.jpg)
next steps
in support:
• wireframing
• prototyping
• visual design
• code
![Page 50: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/50.jpg)
sources of inspiration• Sketchboarding by Adaptive Path
templates & article: http://bit.ly/uxsketch
• Tapworthy, Josh ClarkBook about designing iPhone apps
• Responsive Web Design, a book apartBook about responsive web design
• User Interface Guidelines:
• Applehttp://bit.ly/uxhig
• Androidhttp://bit.ly/uxandroid
![Page 51: UX design for Mobile (Appsterdam Guru Session)](https://reader038.vdocuments.mx/reader038/viewer/2022102900/54c829714a79596f298b457e/html5/thumbnails/51.jpg)
[email protected] • @rubenbos • blog.mangrove.nl