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.
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.
38. “The perception of performance is
based on start-up time, page-loading
behavior, smoothness of transitions
and animations, errors, and waiting
times”
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”
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!
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.
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
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
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.
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.
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.
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.
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.
I remember about 2-3 weeks back, I was driving back home in my car from a late night party with two other friends – who were both from Advertising backgrounds. It was rather dark and we were barelling down MG Road to Gurgaon. The female friend in the back seat was in “high spirits” :p. Suddenly she jumped up and started pointing at the rear of a car ahead of us going ‘Look! Look! That car is smiling!”. Then she pointed to another car a few minutes later, ‘Look! That one is not too happy. But Its smirking!”. She was making out faces in the rear ends of the cars. The bright red brake lights were eyes and the boot lids were the mouth. And while I sat there shaking my head in amusement and bewilderment, I saw the other two agreeing with each other and seeing the same faces in every car ahead of us. As I squinted and struggled to see a face in what were just rear ends of cars to me. ‘I have done research on cars like this! Its called Non Verbal Communication’ she announced casually. The other two egged me on and described what to look for. And then I saw it. And in the next. Until I saw faces behind every car we overtook. Happy. Sad. Even a trollFace. I saw them all \n\nWe all percive design. But we need someone to describe it to be able to communicate\n
Whenever possible. Try and work with specialized Mobile App Designers instead of Visualizers. Visualizers are traditional, web and print guys. Mobile designers take care of minimum hit areas, multiple resolutions, file size etc.\n
Strike a fine balance. Platforms give native controls. Use them. Dnt go overboard with graphic customizations\n
Svg -> scalabale vector graphic -> format of the future -> browsersa are beginning to support svg in html5\nPng -> highest quality , supports transparency\nGif – can contain frames, animations. Not used much now\nJpeg -> when u don’t need transparency n want to save size. Lossy compressions\nVectors -> stored as mathematical formulas, needs lots of CPU. Not good for animations\n
\n
\n
\n
\n
Strike a fine balance. Platforms give native controls. Use them. Dnt go overboard with graphic customizations\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
The user needs the perception of control at all times.The power to interrupt and/or abort anytime.\n
\n
\n
\n
Web n desktops traditionally -> 72 dpi\nIphone 4 -> 326 ppi . Android devices – 250-300 ppi. Ipad 132 ppi\n\nColor depth -> colr info per pixel\n
Eg. Fb in browser on android vs ios. Put thumb on screen while loading. Progress bar stops in iOS n UI responsiveness is max. HTC Desire HD sluggish UI update but progress bar went on. All this happens at a kernel level but key learning is : UI first. Update what u can.\n
\n
\n
\n
\n
Every framework might have its own.\n
Off screen objects/graphics are abstract concepts. But they come in handy sometimes to implent even simple things like flip screens or swipes.\n
Simple Send Backwards and Bring to Front becomes Z-Indexing in most frameworks. Objects have a Z-Index. The ones on the top of the stack have a higher Z-Index. And the ones below have lower Z-Indexes.\n\nSometimes Groups of objects can have complicated Layering structures. Watch out.\n
Groups let you modularize your design flexibly. Be careful. Some frameworks have Local Coordinate system within groups too. Much source of anguish.\n
\n
Just the basics!\nFrame is a state in an animation\nTimeline – collection of frames\n\n
Playhead – concept. The frame in the animation that is being displayed right now.\nFPS: frames per sec. higher fps, higher cpu.\nKeyframes – most modern softwares these days don’t need you to define every frame. Just defining the frames which have substantial change – keyframe. The software fills in the rest – tween\n
Motion tween. Shape tween.\n\nAnimator defines two keyframes and creates a tween. THe software fills in the intermediate transient frames.\n\n
Sprite sheets are 2D animations packed as multiple frames into a single texture image. This allows a much more efficient use of texture memory, which is highly limited on mobile devices, and also minimizes loading time.\n
\n
\n
This way you avoid png.\nDrop shadow: shade of light grey of the same text, 5 px down n right\nOutline: text of slightly large size at same location layered below\nGradient: \n
Image tiling saves precious file size.\n
\n
\n
\n
TG - Target audience. \nBe open to criticism.\nTalk less. Listen More.\nValue negative feedback. Don’t dig for validations.\n
\n
You never know where your idea goes if you listen to people. And you make less mistakes making assumptions about others.\n\n