6 fundamental things I learnt by curating 60 prototypes in Inspire

Inspire of UX flows : A dribbble for prototypes!

What inspired “Inspire”?

“Inspire” by CanvasFlip was launched in May this year and the response to it from the design community was very very flattering for my team.

Early inspirations about this idea came from the fantastic community of designers working on CanvasFlip to create amazing prototypes. When I’d catch up with designers about their on-going projects, there was something common about all discussions — reference of the designs and flow of other apps in similar domain. “That’s how abc has done it and it’s working great!”… “I think xyz has already tested this flow and got success with it, so we should run with it”…I am looking for certain UX pattern and how it is implemented across many apps”… Now such small talks were caught in my mind until my team came up with the idea of “Inspire”. The design community loves Inspire because these inspirations are interactive prototypes rather they just screenshots and designers can click through scenarios.

Yes! I learnt a lot by just curating them ;)

Till date we have covered 3 flows — on-boarding, searching and sharing. Curating 60 odd prototypes across the domains, I have learnt 6 very basic and golden rules about app flow in these 3 categories!

On-boarding :

1. “One slide, one concept”

This is one aspect of UX that is quite frequently preached but not implemented... The urge to showcase every feature right at the beginning masks this well known rule. I know, the app is your baby and you do not want to miss a thing when you show it to your users. But unfortunately, the user loses attention and interest when you say too many things.

Rather, a clear, focused message per slide probably has a greater impact and is the most memorable.

Hootsuite — Onboarding screens

(View as a clickable prototype on Inspire)

Hootsuite beautifully executes the “one slide, one concept” rule. This helps the user to focus on and digest every little piece of information. For example, here the users knows that this social media app has 3 major offerings — Update, Schedule and Monitor posts/tweets. Also if you notice these words are bold and hence stand out. Presenting everything at once would be visually noisy and distract the user from your key message.

This is specially to be kept in mind when you opt for feature oriented or benefit oriented on-boarding.

2. Personalize the on-boarding

Instead of sending users directly to the home feed, you can utilize the on-boarding experience to branch users to the flow they are looking for. This helps skip many search steps and go directly to what they are on your app for. This is the basic aim of user experience, so why not do it smartly! ;)

Here’s how Beats Music does it

On-boarding of Beats Music app

(View as a clickable prototype on Inspire)

This app makes sure that when you land on the home feed you are quite close to what kind of music you like. Not only does this elicit a WOW factor when you are on landing page, but also reduces the search steps.

Searching :

Search is the fundamental goal for apps in the ecommerce, food, news and similar other domains. An excellent search help users find what they want quickly and easily.

3. Quickly recognizable and clearly visible search bar

While searching for a product, a user quickly scans the entire screen to find a writable search box. The goal of a good design is to have a search bar which is clearly visible and quickly recognizable. For apps that have their primary focus on searching, for eg, Google, YouTube, ecommerce, news feed should have big stretched out search boxes right at the top of the screen. This is where users mostly look for.

Input fields hidden behind a search icon is not a good idea from a UX point of view — users shouldn’t have to take an action in order to find out what actions they can take.

Here is how few apps have added a wide open search bar instead of hiding it behind a search icon that requires few extra interactions from the user.

(View as a clickable prototype on Inspire)

4. Reduce the high interaction cost required for search

Typing a search query is error prone and time consuming even with a full keyboard (and even more so on a touch screen). There are some commonly used techniques to reduce the effort of users in typing the query.

  • Auto suggestions
  • Recently searched
  • A relevant default
  • Frequently used tags as suggestions
  • Voice search (although not many users opt for this)

Adopting one of them or a hybrid of these enhances the search experience 10X!

Reducing user’s effort in searching

(View as a clickable prototype on Inspire)

Sharing :

5. Placement of share icon

A research on mobile devices usage, showed that 49% of people rely on a one thumb to get things done on their phones. The diagram below shows the approximate reach chart of the mobile phones’ screens. The colors indicates the areas a user can reach with the thumb to interact with the screen.

One thumb reach rule

Green indicates the area a user can reach easily; yellow, an area that requires a stretch; and red, an area that requires users to shift the way in which they’re holding a device.

If there is a specific point in the flow when the user has to share an image/document/text, the share(/send) icon should be within the green area.

Here is how few apps have placed their share/send icons

Share/Send in the reach of one thumb

6. Which share icon to use??

Options for share icon

These are the different icons we come across for sharing. Now the question is which sharing option conveys the message best and which one should one use? Each one of them is somehow related to the device you are designing for. And it is unlikely that we will see a convergence to a single share symbol. But the most effective icon for your app will be the one with which most users are already familiar…

If you are designing for Apple, you should use the share icon that is already in use on that platform, the “Uploader.” Similarly, your Android app should use the “three dots” and so on..

(See which symbol other apps are using)

Conclusion

Getting the perfect UX flow gets to the heart of designing. It can make or break the usability of an app. And when it comes to mastering the UX flow, there’s absolutely no substitute for repeated tests to understand which flow works best. But there are some ground rules you start with.. And to set that benchmark we often get inspired from other successful fads.

Go ahead and surround yourself with inspiring beings! — “Inspire