Dec 12 2012

4 Important Details that Create Intuitive Mobile Experiences

interaction_blog_feature

Attention to detail in the interactions a user has with a mobile app interface is the key to designing both an intuitive and knockout user experience. We can easily understand how important these details can be by looking at something as simple as a user’s conversation with Siri. In this scenario, it’s been another long Monday at work for John. He doesn’t leave the office until 2am and wants to be reminded of his client call at 10am. He tells Siri, “Set a reminder for my client call at 10am tomorrow.” Tomorrow by definition is Wednesday. Instead of setting a reminder for 10am Wednesday, Siri asks John, “By tomorrow do you mean Wednesday or Tuesday?”

How does Siri know that by ‘tomorrow’, John probably meant Tuesday, not Wednesday? Siri didn’t know it, but the interaction designers at Apple did. So how did they know we really mean 10am Tuesday and not, 10am Wednesday? Here are two scenarios sketching out what may have motivated this attention to detail:

  1. A designer found himself in a similar situation when scheduling a reminder and felt that it was an issue that many people have probably encountered.
  2. A user researcher studies the interaction of multiple users scheduling reminders through Siri and notices a recurring discrepancy between Siri’s definition of “tomorrow after 12am” and what users really meant to say when scheduling for “tomorrow after 12am”

Take a walk in the user’s shoes” is a phrase that affords visualizing the very sequence of interactions the user might take. The clever time detail incorporated into Siri is commendable because it demonstrates that design should be created to seamlessly fit into the user’s world, not the designers. So much like this example with Siri, it’s important to remember that we must study the story and details of a user’s interaction in order to make the experience as a whole more intuitive and ultimately, more pleasant. Here are some examples of mobile interactions and designs that have been given the attention to detail that they need to make some truly compelling and intuitive experiences.

Simplicity, not Scarcity

Making an interface simple is a matter of keeping what’s necessary and leaving no excess to things that deemed unnecessary. It’s about crafting down to the last detail while still keeping the purity and simplicity of the design.

Gmail
Aside from the buttery smooth interactions that make using the new Gmail app a joy to use, it ultimately demonstrates an understanding that checking one’s email is not something most people look forward to. Therefore the interface is structured and designed to help you efficiently and seamlessly complete your ritual.

The app maintains its function with its seemingly stripped down interface by focusing on what and how information is presented. Only the most used and everyday features of the app (‘Search’, inbox and ‘Compose’) remain consistently available in the main interface. Also, utilizing icons, rather than text-based buttons helps declutter the interface; this is an important design detail since it leverages the fact that users are quicker at perceiving and making meaning of images, moreso than text descriptions. It’s just how we process information!

Prismatic
Prismatic is an app that allows you to create news feeds based on your interests. At first glance, it’s likely that a user might accuse the design of being too minimal and scarce, rather than the simplicity principle.

The contextual menu, however, pops up when you press and hold down on the app. And it’s quite a refreshing take on the execution of a mobile contextual menu. It doesn’t take any search time looking for the buttons to share, save, and recommend since the menu is literally at your finger tips!

Support learnability & memorability

How easy is it for users to accomplish basic tasks the first time they encounter the design? When users return to the design after a period of not using it, how easily can they reestablish proficiency? How many errors do users make, how severe are these errors, and how easily can they recover from the errors? It’s important to consider what a user’s learning curve is so that when we innovate and introduce interactions to the user, they pick these tasks up effortlessly and efficiently.

Snapseed
Snapseed is among one of the many photo editing applications out there in the mobile world — so what does it do differently? Well, it makes the learning process easier for each user by providing proper onboarding on how to user the app. It also addresses the memorability issues users have when returning to the app after a considerable amount of time by continuing to provide that onboarding experience. The overlay feature pictured below can be accessed by tapping on the help icon (?), then selecting ‘Show overlay’. These nifty overlays can be referenced whenever needed.

Make it efficient

Once users have learned the design, how quickly can they perform tasks? Determine if that interaction really needs to take two taps or three. Efficiency is the key to preventing frustrated users!

Droplr
Sharing anything and everything is an activity we do more than we realize. Droplr has made this process as easy as 1, 2…yep, that’s it. The app lets users share any kind of file. So what? You take a photo, it uploads it, stores it to the cloud, spits out a user friend url, and then copies the link to your clipboard for you. All you have to do is take the picture and send the link. Users say this efficient interaction is the next best thing to sliced bread.

Make it a metaphor:

The purpose of a metaphor is to present an idea in a way your audience will understand. What better way to make an intuitive experience than to take what you’re already naturally comfortable with and paralleling some UX to it?

Evernote
Evernote is an app that helps you “remember everything”. This is a pretty bold statement which begs to ask the question “So how does its user-centered design support this claim?” Evernote uses a mental model that most users are familiar with: a file system. Now I’m not talking about the file system on your computer. I’m talking about the big clunky file cabinet in your office. While the metaphor references a traditional method of organization, the purpose of the metaphor is to allude to a paradigm the user is familiar with. What’s even more unique about the application of this mental model is that it carries over the same actions one would take when using a file cabinet: users swipe each the file upward and the screen fills with content from that file. From there users can navigate within the “file”.

Clear
The Clear app bases its form and function around the to-do list. Using a to-do list as a metaphor is appealing because it affords ideas of efficiency and getting things done. Similar to Evernote, Clear applies gestures to take their metaphor one step further. Swiping your list item from left to right “crosses off” the item and moves it down to completed list where items have a line through them.

Conclusion

Designing an mobile app entails infinite cycles of iteration. What these examples seek to demonstrate are successful executions of a specific mobile application feature. Grounding their design from the user’s perspective is what give these apps a soul.

About the Author:

Chau is the product marketing intern at dt, a UX agency and home of SlideDeck 2 and Impress. When she's not interacting with dt's online community, she's learning about interaction design at the University of California, San Diego.

Leave a Response

5 Responses

  1. Dec 12 2012
    Mark Pecota

    I remember when Gmail started using icons instead of text. It took some getting used to, but I caught on pretty quick. On the other hand, my dad still complains that he doesn’t know what all the icons are. I wonder if the switch frustrated some of their market in the 50+ demographic.

    Also, the grammar nazi in me had to point out the mistake in this sentence “Siri didn’t, but the interaction designers at Apple did he might.”

    Overall, really good article (like usual).

    • Dec 12 2012
      dtelepathy

      Hey Mark – Glad you enjoyed the article! Icons can be tricky to understand and design. Someone might say that an icon has an obvious meaning, but that is just one case. How each person interprets an icon is factor of context, culture, and past interactions. The same goes for how long it takes to “catch on”.
      Keeping icons and their referents consistent across all web and mobile interfaces, will hopefully help with the catching on part.

      And, thanks for the editor’s eye. The grammatical blunder should be fixed :)

  2. Dec 13 2012
    CMS development.

    Great article, I think that in present days every one wants new apps for their mobile.

  3. Jan 02 2013
    beijing graphic designer

    These days designing like graphic, web etc is becoming very popular and well-known among common people. There is a lot of creativity involve in applications, games, websites etc. All the above things make our cell phone simple and joyful.

  4. Jan 11 2013
    Raymond

    Awesome Article, I love the new Gmail App