Download - UX design for Mobile (Appsterdam Guru Session)

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)

http://www.flickr.com/photos/killingtime/

http://www.flickr.com/photos/killingtime/

TXXI verhaal

learn from others

mobile UX

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

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>


example:

prioritize user stories


10 minutes

define structure

6 assignment: sketchboarding

10 minutes

6-up template


30 minutes

individual

discuss!


15 minutes

team

1-up template


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



http://developer.android.com/guide/practices/ui_guidelines/index.html

http://developer.android.com/guide/practices/ui_guidelines/index.html

[email protected] • @rubenbos • blog.mangrove.nl