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
ux design for mobileappsterdam guru session • BNO • march 14th 2012
mangrove.com • @mangrove
ruben bosmangrove
@rubenbos
onlineecosystemwe develop (responsive) websites,
iphone apps, android apps, webapps,
social tv, facebook apps, online
marketing, campaigns... a lot!
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
introduce yourselfin 140 characters
(I’ll do the counting)
guru session?
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
what we’re gonna cover
• structuring and defining your app
• handling technical possibilities & impossibilities
• a fast & effective UX (sketch) technique
UX design an appin a fast and fun way
main goal
alone or in a team
alone or in a team
lessons learned
source: killingtime (flickr.com)
TXXI verhaal
learn from others
mobile UX
apps
how?
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
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
now get to work!user stories • defining structure • sketchboarding
creative brief
1 assignment: inspiration
5 minutes
inspiration library
2 assignment: inspiration
20 minutes
define user stories
3 assignment: user stories
15 minutes
As a <user role>, I can <story> so that <benefit>
4 assignment: user stories
example:
prioritize user stories
5 assignment: user stories
10 minutes
define structure
6 assignment: sketchboarding
10 minutes
6-up template
7 assignment: sketchboarding
30 minutes
individual
discuss!
8 assignment: sketchboarding
15 minutes
team
1-up template
9 assignment: sketchboarding
20 minutes
team
show your ux solutions
10 result
team
next steps
in support:
• wireframing
• prototyping
• visual design
• code
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
[email protected] • @rubenbos • blog.mangrove.nl