How to build great mobile products?
Below are 7 tips one should always keep in mind while building mobile products. These may not be billion dollar tips, but will definitely improve the mobile experience exponentially.
- Give a visual feedback on touch and completed actions: It is pure human nature to expect something in return for an action. A very good example given, when we are using a mouse/touchpad and keyboard we get a response in terms of a click sound and tap sound respectively. But, when using a mobile app there is no such response on touch(except for typing on keyboard which gives a tap-tap-tap sound). Hence, in such cases UI should play the game.
While browsing on the inshorts apps, I click refresh button on top right corner of the page. You can see a very small pop saying “Feed up to date”, I almost didn’t notice it. Why? Because a user’s focus is on the top right corner of the screen where she/he tapped and expects a reaction. But, this little pop-up down on the screen could be easily ignored and moreover it seemed almost static.
While browsing on the CNN app, when I pulled my screen down, it shows me an animation illustrating that the app is refreshing. At the same time this is a good UX because the content actually got loaded again, though it was already refreshed, this creates a sense of completed action which is necessary for a better experience on the app.
2. Optimise for speed and perceived speed: Remember why Steve Jobs got rid of the Stylus? Our fingers are the best pointing device which are fast enough. To match the speed of our fast operating fingers, the app should be equally fast to give a response along with a delightful experience. A very good example shared was “Facebook Like” button. When a user operates in a poor internet connection or without an internet connection and presses on the like button, it will show “Liked” to the user using the app even if the like for that particular post has been logged on the Facebook servers or not(eventually, it will be logged later). It is fast and gives a quick response which delightful in fact because hey! I tapped ‘Like’ and it shows me ‘Liked’.
3. Design for all states, not just the ideal scenario: Again, comparing two scenarios. The design of app is nothing but the structure in which the assets (video, image, text content) will appear on the page. It is very important to load all the assets irrespective from which micro-service they load into the app.
When I open the Paytm app, focus on the top most section where “Bhim UPI” is added after 2–3 seconds of opening the app. The app, then loads and again the content below this section loads, first with solid grey square blocks and then the respective icons. Ideally, it should be binary (0 or 1). For every state of the app, content should load equally or not.
When I open the medium app, it loads first, which is not misleading. It clearly shows the user that it is loading your feed. When loading is finished, every content i.e. image of the first article along with it’s title and the articles below appear all at the very same state of the app. There is no cache problem — mismatching article title and image. A user would happily wait 1–2 seconds while it load instead of displaying ambiguous assets.
4. Optimise the UX for major use cases (even) at a cost to minor ones: A very good example shared was, the MacBook trash can. There are two scenarios after you empty the trash can, one is to close it and second it to keep it open. Now, 99% of the users close the trash can after emptying it. So, to make it easier for major use case, the MacBook trash can closes automatically when a user empties it. This doesn’t happen when we empty a Recycle bin on a windows machine, where the same % criteria applies as above. If you can automate a task for major-major use cases at the cost of very minor ones, do it. Flexibility can be compromised in such cases.
5. Reduce taps for key flows: Always find out ways to reduce the number of taps it takes for a user on the app. Number of taps is inversely proportional to better UX. Very recently, Swiggy, launched a PIP (picture-in-picture) mode. They found out that within a span of 20–30 minutes of delivery time span, the ideal user opened the app 3–4 times to track their order, which means opening the mobile app every time, finding and clicking track option to track the order. PIP mode helps in tracking the order when you’re browsing on some different screen and when clicked on it will redirect to the deeplink on the tracking page which means barely 1 or 2 taps.
Note: Image belongs to the owner and has been taken from here.
6. Keep it thin. Abstract all business logic away: Keep and build all your business logics in the APIs. However you end up architecting and implementing the front-end of the app, do not ever code the business logic in the front-end. How will this help? One, will help in supporting older versions of the app running on older smartphones. Two, when you code business logic in the front-end it will create a lot of unwanted differences on different platforms on which your app is running i.e. iOS and Android. Hence, always keep the business logic in the APIs.
7. Ship fast, listen to the customer, iterate, learn: Always roll out the 20% features first which will provide 80% of the value to user. A product manager’s major task is to say NO to the features (though good features, but won’t provide much value) when the app is in fast iteration phase. If YES, that will lead to feature creep, which will take a PM’s attention away from the core value proposition of their app.
“Building better products for mobile” was one of the talks given by Anurag Gaggar at Expedia, Gurgaon organised by ProductTank Delhi — Harsh Gupta, Bhavya.
