Top ten design blindspots for Mobile app developers. Mostly based on my first experiences with Mobile design, as a developer. Original deck presented at XConf 2011, ThoughtWorks, Pune. Images used in the keynote are for illustrative purposes only.

1. 10 Commandments
of Mobile Design*
Jigyasa Makkar

2. 10 Commandments
of Mobile Design*
*for developers
Jigyasa Makkar

3. Erm, did I say Commandments?
Actually..

4. Erm, did I say Commandments?
Actually..
NO.

5. Mobile App design 101?

6. Mobile App design 101?
No.

7. Mobile App design 101?
No.
Ten holy tenets of Mobile
development?

8. Mobile App design 101?
No.
Ten holy tenets of Mobile
development?
No.

9. Mobile App design 101?
No.
Ten holy tenets of Mobile
development?
No.
Ten thumb rules to live by?

10. Mobile App design 101?
No.
Ten holy tenets of Mobile
development?
No.
Ten thumb rules to live by?
No.

11. then
Well, its
Learnings.

12. then
Well, its
Learnings. :)
10 of them to be precise

13. TL;DR
Version
Mobile Application Development is
more DESIGN than technology
stacks.
Get ‘with’ the program.

14. Now,
The Elaborate Version:

15. What is the leap like?
From developer to
Mobile Application Developer?

16. Confusing.

18. Apparently, whether you Like it or
not
(and I did’nt),
Mobile app development
is about DESIGN.

19. But, but.. what about..
Beautiful code,
DRY Principles? BDD?
Magical SQL queries?

20. NO.
None of those.

21. Turns out..
It’s all about making
something Pretty. Fast. And
useful.
The user should WANT to use it.

22. Im going to try and make
commandments now :p

23. 1
Thou shalt acknowledge
the role of Design.

24. Design isn’t just about aesthetics or
Prettifying mock-ups.
Not how it looks. It’s how it works.

25. Cliche’d as it sounds,
there really IS a lot more to
design than meets the eye.
Specially the untrained eye.

26. Don’t
“mail me the screens when you are
done”
your designer
Mobile Application Design needs to
be collaborative.

27. Graphics can make or break
your app. Get involved.
Learning to communicate
with your designer is crucial.

28. Try and absorb the basics of UI
design:
File formats.
Jpg, tiff, png, psd, gif, eps,
svg, ai

29. Try and absorb the basics of UI
design:
Vector vs Raster Graphics

30. Try and absorb the basics of UI
design:
Alpha Channels (Transparency)
Black = transparent

31. Try and absorb the basics of UI
design:
Color Codes, Palettes, Tools
Hex color codes http://kuler.adobe.com/

32. Try and absorb the basics of UI
design:
Tap Zones/Hot Zones on Touch
Devices
The comfort zone for the right thumb falls on the opposite side of the screen.
At the left edge and bottom of the screen.

33. Pixelate, anti-aliasing, dpi, ppi
Understand a designer’s workflow.
Learn the lingo.
Pixelate Anti-Aliasing

34. 2
Thou shalt optimize for speed.

35. Optimize for performance.
Two broad areas to go after:
- Drawing (Rendering)
- Scrolling

36. Two step process.

37. A. Speed up ‘Perceived performance’

38. “The perception of performance is
based on start-up time, page-loading
behavior, smoothness of transitions
and animations, errors, and waiting
times”

39. Application Launch.
Design app for quick launch
and short use.
Load data lazily, load only
images/assets needed

40. Optimizing individual
screens, flows and UI
elements will reduce
waiting times and keep
users from thinking that
they’re wasting their time.

41. Feedback!
Android Marketplace
App
iOS Messaging App
iPhone Homescreen
Keep the user in the loop at all times.
Let the app announce – visually or
otherwise - what it is upto at any
given time.

42. Design can help
communicate justified/
expected delays.
Loading food menu
Identify chunks of code that are
likely to consume time.
(Retreiving data from a server, Extensive Calculations/
parsing.)

43. If possible break the UI into bits that can be
updated before and after executing those
chunks of code.
Keeps user in the Partially updated UIs keep the user
dark involved.
Zomato App
Bookmyshow App Sugar n Spice App

44. Use descriptive Preloaders.
and Progress Indicators.
Don’t say. DO say.
“Downloading restaurant
“Please Wait..”
details”

45. B. Optimize Individual UI Elements.

46. Every UI element contributes to
performance.
Key aspects to look for are..
Elements on Screen.
Ration the number and type of elements
on screen at a time.
Media items for example, are heavy!

47. Element Characteristics:
Image Resolution Color Depth

48. Recently a ‘Google Insider’ posted on Google
+ about why he thought the Android OS
would NEVER be as fluid and responsive as
iOS. He pinned it down to the fact that
Android handles UI rendering in the main
thread and at Normal Priority, while iOS
handles UI rendering in a separate thread
with real-time priority.
Over-simplified Learning?
UI first.

49. 3
Thou shalt embrace pixels.

50. Games and other Interactivity rich
applications have the potency to
push you to the edge of your
comfort zone and beyond.

51. Fight back.
Get your basics in place.

52. Pixel Primers
Pixel level placement
Your X’s and Y’s (Z’s too)

53. Pixel Primers
Cartesian coordinate systems

54. Pixel Primers
Viewports & Off-screen objects.

55. Pixel Primers
Layering. Z-indexes

56. Pixel Primers
Groups
Local vs Global coordinates

57. Keep Snippets handy!
For eg, this is what you would do to center a graphic
element on screen horizontally:
element.x = screen.width – element.width/2

58. Animation
Basics
Timeline

59. Animation
Basics
Playhead, Frames, Keyframes, FPS

60. Animation
Basics
Tweens

61. Animation
Basics
Sprite Sheets

62. 4
Thou shalt Optimize.

63. Probably the most important skillset to
strive for. An armour of Memory/Filesize
optimization tips & tricks and Workarounds.

64. Learn to emulate basic design
effects via code.
* Drop shadow
* Text outlines
Lorem Ipsum Lorem Ipsum
(Sample Text)
+ (Shadow)
Lorem Ipsum
Vector shadow created

65. Use tiled images for
backgrounds.
Image Tile

66. Spot graphic elements in your UI which could
be satisfactorily reproduced via native shapes
and design primitives in the framework.
Rescue as many rasters as
possible to Native Vector shapes

67. And optimize for battery usage too.
Try and not access peripherals when not required.
Cache data that doesn’t need to be downloaded
again. Save on network calls.
Use Wifi whenever available instead of 3G.

68. 5
Thou shalt bounce.

69. Test your hunches.
Bounce your idea off your potential
users.
Identify your TG.

70. Validate your ideas/beliefs of what
is:
Intriguin
Fun Obvious
g
Interactiv Challengin
e g
Intuitive

71. Talk less. Hear more.
Be open to criticism and suggestions.
Value negative feedback.

72. My app started out as a
word jumble in my head
Ended up as much more fun
Movies & Dialogues game :)

73. 6
Thou shalt be byte wise.

74. File-size is key.
A friend owns an HTC Chacha. When phones like
those run out of space (and they do real quick), the
user sorts a list of installed apps by file size and the
perperators at the top are uninstalled to make space.

75. Don’t top that list, bro.
Okay?
Optimize for file size.

76. 7
Thou shalt be more forgiving.

77. Design to allow for errors.
Keep your errors soft and friendly.
Selection errors on mobile phones are
higher than on desktops because
fingers can be clumsy, people are often
distracted during use and some people
have large hands

78. Account for an Offline Experience
Unlike the web, the mobile isn’t always
connected to the Internet.
Design for Offline Use.

79. In case the app relies heavily on
pulling content over the internet,
Cache data offline.
Flipboard App for iPhone in Offline Mode
So the user experience isn’t broken.
It’s just stale, at best.

80. 8
Thou shalt not make me type

81. Minimize Text Input
Typing is a pain!

82. Y U NO LEMME

83. Modern day smartphones are touch and gesture
optimized devices.
Use buttons, sliders, radio boxes, menus and
picker wheels whenever possible instead of text
inputs.

84. More Touch Controls. Less
typing.
Pre-populate oft-repeated data or values that can be
predicted based on previous recordedbehavior or
intuition.

85. 9
Thou shalt design for the device.

86. Consider the capabilites of a
device before programming
for it.
Utilize capabilites like multi-
touch gestures, Accelerometer,
GPS, NFC etc wherever it fits
the bill.
Be judicous. Dont overdo it.

87. 10
Thou shalt not sin.

88. Dont use Comic Sans.
Dont put drop shadow on everything.
Dont do yellow on white.
Dont make the logo bigger.
DO feel empowered to design.

89. Thanks :)