MCLEAN, VA , MAY 9-11, 2013Designing Killer Apps forMobile devicesRaj LalNokia Inc.@iRajLal
Mobile Developer Evangelist5+ years on Mobile dev.Author• Digital Design Essentials• Smartphone Web Development• Gadgets a...
Learn how to design a Killer Mobile AppGoal of the Session
Define: A Killer Mobile AppWhat is a Killer Mobile App? Anyone?
A Killer Mobile App• More than 100 reviews• 4.5 Star ratings in the app store
ExampleMini Recorder•236 ratings•4.5 stars
Mini Recorder: User Interface
Mini Recorder• One page app• No design elements• Visual hierarchy• Modern UI, Big tap-able content• Color icon similar to ...
Mini Recorder uses Metro UI Guidelines
Other Recorders
Other Recorders
Tip #1Use Device Design GuidelinesFamiliar visual design is 200% better thana New and ”better” design
Context of the user
Context of the user• Mobile• In the middle of a session/class• This speaker is awesome• Need a FREE app to record audio• S...
App Store View
App Store View
Give extra attention• Icon• Title• First 3 lines of description• Description• Screenshots
Tip #2Grab user attention in App StoreApp store is your first point of contact withyour customer make it count
User is Mobile
User is Mobile• User is distracted• Focused for a short amount of time• Divided attention
Top Games AppBreakoutPopball
Tip #3Design for a mobile userA mobile user needs quick App
User don’t want to spend timeWikipedia Flixter
User don’t want to spend time• Make the app self explanatory• Have defaults• Don’t make user signup• Add value for unregis...
Tip #4Make it self explanatoryA mobile user needs to access data fast
The Clock App
The Killer Clock AppFull Screen Clock
Tip #5Simplify the user interfaceSimple is always better than sophisticated
The Clock App
Nokia Lumia 920Modern UIPure view cameraPure view cameraNokia HERE8 mp cameraWindows Phone 8Image stabilization4.5"Vibrant...
Nokia Lumia 920
Tip #6Utilize the device potentialMaximize the impact by integrating with thehardware
News / Information App
News/Information AppBaconit Astronomy Hub
Tip #7Understand the categoryKnow and apply the best practices
Style + Fashion App
Tip #8Add CharacterMake your App stand apart from the competition
Finance AppChase Mobile
Tip #9Make it AccessibleAccessibility is about making you Appavailable to more user
One More AppSmartboard Calculator Free
Tip #10Have FunIf you are not having fun, you are not doing it right
10 Tips for Killer App Design1. Use design guidelines2. Grab user attention3. Design for Mobile User4. Make it self explan...
MCLEAN, VA , MAY 9-11, 2013Thank YouRaj LalNokia Inc.@iRajLal
Upcoming SlideShare
Loading in...5
×

Designing Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLal

2,323

Published on

Designing Killer Apps for Mobile devices! - Raj Lal

What makes a mobile app standout from the crowd? When we look at a successful App it seems like a "no brainer" but still so many developers struggle to to get the mobile design right. What's the secret ingredient to get the Mobile App design right. In this session go behind the scene of 10 successful Windows Phone app and see why Design is not how it looks but how it works. Learn ten essential tips for designing Mobile Apps, the Right Way.

http://ux13.gomodev.com/modevux-2013-home/conferences/workshops/#/raj-lal

Published in: Technology, Business
3 Comments
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,323
On Slideshare
0
From Embeds
0
Number of Embeds
42
Actions
Shares
0
Downloads
22
Comments
3
Likes
2
Embeds 0
No embeds

No notes for slide
  • add statement / slogan ----- Meeting Notes (3/7/13 21:50) -----
  • add statement / slogan ----- Meeting Notes (3/7/13 21:50) -----
  • add statement / slogan ----- Meeting Notes (3/7/13 21:50) -----
  • add statement / slogan ----- Meeting Notes (3/7/13 21:50) -----
  • add statement / slogan ----- Meeting Notes (3/7/13 21:50) -----
  • add statement / slogan ----- Meeting Notes (3/7/13 21:50) -----
  • add statement / slogan ----- Meeting Notes (3/7/13 21:50) -----
  • add statement / slogan ----- Meeting Notes (3/7/13 21:50) -----
  • Use of Typography for separating content and navigation Borderless UI elements with minimal visual properties Seamless smooth animation between views Use of content and gestures for navigation
  • add statement / slogan ----- Meeting Notes (3/7/13 21:50) -----
  • add statement / slogan ----- Meeting Notes (3/7/13 21:50) -----
  • Use of Typography for separating content and navigation Borderless UI elements with minimal visual properties Seamless smooth animation between views Use of content and gestures for navigation
  • Use of Typography for separating content and navigation Borderless UI elements with minimal visual properties Seamless smooth animation between views Use of content and gestures for navigation
  • Use of Typography for separating content and navigation Borderless UI elements with minimal visual properties Seamless smooth animation between views Use of content and gestures for navigation
  • Use of Typography for separating content and navigation Borderless UI elements with minimal visual properties Seamless smooth animation between views Use of content and gestures for navigation
  • Use of Typography for separating content and navigation Borderless UI elements with minimal visual properties Seamless smooth animation between views Use of content and gestures for navigation
  • Use of Typography for separating content and navigation Borderless UI elements with minimal visual properties Seamless smooth animation between views Use of content and gestures for navigation
  • Use of Typography for separating content and navigation Borderless UI elements with minimal visual properties Seamless smooth animation between views Use of content and gestures for navigation
  • Use of Typography for separating content and navigation Borderless UI elements with minimal visual properties Seamless smooth animation between views Use of content and gestures for navigation
  • Use of Typography for separating content and navigation Borderless UI elements with minimal visual properties Seamless smooth animation between views Use of content and gestures for navigation
  • Breakout: brick breaking game
  • Use of Typography for separating content and navigation Borderless UI elements with minimal visual properties Seamless smooth animation between views Use of content and gestures for navigation
  • Use of Typography for separating content and navigation Borderless UI elements with minimal visual properties Seamless smooth animation between views Use of content and gestures for navigation
  • Use of Typography for separating content and navigation Borderless UI elements with minimal visual properties Seamless smooth animation between views Use of content and gestures for navigation
  • Use of Typography for separating content and navigation Borderless UI elements with minimal visual properties Seamless smooth animation between views Use of content and gestures for navigation
  • Use of Typography for separating content and navigation Borderless UI elements with minimal visual properties Seamless smooth animation between views Use of content and gestures for navigation
  • Use of Typography for separating content and navigation Borderless UI elements with minimal visual properties Seamless smooth animation between views Use of content and gestures for navigation
  • Simplify the user interface, once you have the app, think how to dump it down
  •   Utilize the device potential to get the best for the user  NFC, live tiles, panorama backgrounds,HD camera
  • Use of Typography for separating content and navigation Borderless UI elements with minimal visual properties Seamless smooth animation between views Use of content and gestures for navigation
  • Use of Typography for separating content and navigation Borderless UI elements with minimal visual properties Seamless smooth animation between views Use of content and gestures for navigation
  • add statement / slogan ----- Meeting Notes (3/7/13 21:50) -----
  • Transcript of "Designing Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLal"

    1. 1. MCLEAN, VA , MAY 9-11, 2013Designing Killer Apps forMobile devicesRaj LalNokia Inc.@iRajLal
    2. 2. Mobile Developer Evangelist5+ years on Mobile dev.Author• Digital Design Essentials• Smartphone Web Development• Gadgets and WidgetsAbout Me
    3. 3. Learn how to design a Killer Mobile AppGoal of the Session
    4. 4. Define: A Killer Mobile AppWhat is a Killer Mobile App? Anyone?
    5. 5. A Killer Mobile App• More than 100 reviews• 4.5 Star ratings in the app store
    6. 6. ExampleMini Recorder•236 ratings•4.5 stars
    7. 7. Mini Recorder: User Interface
    8. 8. Mini Recorder• One page app• No design elements• Visual hierarchy• Modern UI, Big tap-able content• Color icon similar to native icons• Familiar UI, look and feel & SettingsAnd btw It also works
    9. 9. Mini Recorder uses Metro UI Guidelines
    10. 10. Other Recorders
    11. 11. Other Recorders
    12. 12. Tip #1Use Device Design GuidelinesFamiliar visual design is 200% better thana New and ”better” design
    13. 13. Context of the user
    14. 14. Context of the user• Mobile• In the middle of a session/class• This speaker is awesome• Need a FREE app to record audio• Search “audio recorder” in app store
    15. 15. App Store View
    16. 16. App Store View
    17. 17. Give extra attention• Icon• Title• First 3 lines of description• Description• Screenshots
    18. 18. Tip #2Grab user attention in App StoreApp store is your first point of contact withyour customer make it count
    19. 19. User is Mobile
    20. 20. User is Mobile• User is distracted• Focused for a short amount of time• Divided attention
    21. 21. Top Games AppBreakoutPopball
    22. 22. Tip #3Design for a mobile userA mobile user needs quick App
    23. 23. User don’t want to spend timeWikipedia Flixter
    24. 24. User don’t want to spend time• Make the app self explanatory• Have defaults• Don’t make user signup• Add value for unregistered users
    25. 25. Tip #4Make it self explanatoryA mobile user needs to access data fast
    26. 26. The Clock App
    27. 27. The Killer Clock AppFull Screen Clock
    28. 28. Tip #5Simplify the user interfaceSimple is always better than sophisticated
    29. 29. The Clock App
    30. 30. Nokia Lumia 920Modern UIPure view cameraPure view cameraNokia HERE8 mp cameraWindows Phone 8Image stabilization4.5"Vibrant colorsLive TilesCarl zeiss32 GB768 x 1280Wireless charging1 GB RAM1080p HDNFC
    31. 31. Nokia Lumia 920
    32. 32. Tip #6Utilize the device potentialMaximize the impact by integrating with thehardware
    33. 33. News / Information App
    34. 34. News/Information AppBaconit Astronomy Hub
    35. 35. Tip #7Understand the categoryKnow and apply the best practices
    36. 36. Style + Fashion App
    37. 37. Tip #8Add CharacterMake your App stand apart from the competition
    38. 38. Finance AppChase Mobile
    39. 39. Tip #9Make it AccessibleAccessibility is about making you Appavailable to more user
    40. 40. One More AppSmartboard Calculator Free
    41. 41. Tip #10Have FunIf you are not having fun, you are not doing it right
    42. 42. 10 Tips for Killer App Design1. Use design guidelines2. Grab user attention3. Design for Mobile User4. Make it self explanatory5. Simplify the UI6. Utilize device potential7. Understand the category8. Add character9. Make it Accessible10. Have Fun
    43. 43. MCLEAN, VA , MAY 9-11, 2013Thank YouRaj LalNokia Inc.@iRajLal

    ×