Branded Interactions

March 4, 2013

One or two key functions. Well designed apps master their core interactions. The best are unique and become associated with the brand itself. You could even call them branded interactions.

Clear Interactions

Clear

Clear‘s primary interactions are adding and clearing to-do items. Swipes are the main gesture in Clear and none is more fulfilling than crossing off an item as complete. Animation and sound are used to make it fun, fulfilling and even at a small psychological level, it encourages users to cross off items again and again. It’s either coincidence or genius their app is named after this core interaction. I’d go with the latter.

Mailbox Interactions

Mailbox

Mailbox is the newest hyped mail client for iOS. Once you get past their waiting list and start using it to manage your messages, the main interaction is moving mail out of your inbox. It’s similar to Clear with horizontal swipes controlling the state of items, but it’s obvious this interaction had a ton of thought put behind it. It is literally what differentiates Mailbox from other mail clients.

Swiping right shows a green color with a check mark, which lets you archive the message. Swiping further right gives a red background and an X, letting you delete. To the left, you get a yellow color with a clock icon, letting you to send the email back to yourself in the future. Go further left and you get a green background and can add the email to a list.

This is the big innovation of Mailbox: they’ve made it fun to sort your messages in four ways with a swipe and get down to inbox zero.

Sunrise Interactions

Sunrise

Sunrise is a calendar app combining your Google Calendar and Facebook events with daily info like birthdays and weather. Instead of different views for daily, weekly, monthly, etc., Sunrise has a single screen combining a two week view and daily agenda.

Scrolling into the future through the agenda, you run into the problem of how you get back to ‘today’. The creators solved this by making a button fade in on the lower left. The arrow points back to ‘now’ by angling up or down, relative to where you are in. Press the button and you move back to your real-time view.

Vine Interactions

Vine

Video has always been a pain to create on smartphones. Figuring out how to make it fun was critical for Vine.

Based on the number of Vine videos showing up on Twitter, it seems they’ve solved this challenge. Use Vine and it’s easy to see how. To record, you press and hold on your screen. As you hold, the progress bar fills. Release and your recording pauses, allowing you to go find your next shot. They chose wisely to force users to ‘edit in camera’ instead of giving them a suite of video editing tools as other apps have.

They’ve made creating and sharing video a fun experience that lets you express yourself in a new and creative way.

Path Interactions

Path

Path is for sharing your life with the people closest to you. The most important interaction in Path is adding content. They focused on that activity and made the process playful. Just press the red plus icon and your different sharing options fly out. Tap it again and they hide.

The attention to detail on the animation makes it engaging. Imagine if they just had the different buttons spread out on the bottom of the screen like other apps. It wouldn’t be as memorable and they would have lost out on a good opportunity to tug on the user’s desire for play.

Google+ Interactions

Google+

While Google+ took a pretty standard approach to sharing content, they excel in what’s turned into a bit of a ‘peacocking’ area of app design: the loading indicator. They use the ‘pull down’ interaction to load new content, but their animation is very memorable. As you pull down, four bands appear and stretch out the more you pull. It seems if you pulled too far, the bands would actually snap. I find myself trying to do that whenever I use Google+ and imagine what sort of Google Vortex would open if I were successful.

How to bring branded interactions to your app

Think about the core function of your app very early on. What do you want people to do over and over again? If you’re lucky, like with Clear, and you might be able to get your app name from the interaction. By focusing on that core activity you want your users to be doing, main other things can fall into place to support that action happening more often.

All of the examples above use elements of play. While not everyone is a gamer, we all can appreciate when our tools are fun to use. By taking the extra effort to play on the emotional needs of users, we open our apps and products up to a new level of user appreciation.

“By employing emotional design in our app, we’re consciously shaping positive memories of our brand that not only encourage users to stick around, but also turn them into evangelists for a product they love.”
- Stephen P. Anderson, Seductive Interaction Design

When the interaction is unique, your users can begin to associate that interaction with your product. If you can own an interaction, that’s a very strong level of branding in today’s interface-filled world.

  • http://twitter.com/cyantifik Vicky Heinlein

    Thanks for this great article, Matthew! Another unique branded interaction that came to mind is Prismatic’s gesture-setting for save/highlight/share/ functions, which is pretty neat too!

  • Yuebo

    One question: How did you get the gif to show those interactions? Thanks.

  • http://twitter.com/AtulChitnis Atul Chitnis

    You missed the ONE interaction that really made it big – pull to refresh/reload. Even Apple eventually adopted it! :)

  • http://twitter.com/zulficar Zulficar Ali Muhamed

    That is a well thought article. I miss Rise(alarm app) from the list, btw. :)

  • http://davidpaulsson.se/ David Paulsson

    Indeed, Rise is a beauty.

  • http://svirsk.org Sjors
  • samlassman

    good to know you are still at Webjam Sjors!

  • http://svirsk.org Sjors

    Webjam for Life!

  • http://twitter.com/gaurabhmathure Gaurabh Mathure

    Great article. I think it’s these subtle delights that make UX such an exciting field to be in. This is what makes people smile while using even the most functional app.

    I also echo Yuebo’s question – How do you capture these transitions as .gifs? Is there a particular software for iPhone and or desktop?

  • echomrg

    I’ve been using mailbox for the last couple of days and i have to say i’m a bit disappointed.

    Beside the fact that i discovered that an “inbox zero” flow absolutely doesn’t fit my needs i think the “longer swipe” they chose to use to delete emails is incredibly frustrating.
    I consider myself normally apt at using a touchscreen yet i manage to delete mails only with a 40/50% accuracy.
    Most of the times i have to go into the archived tab and then delete again.

    That’s a real turn-off and a very bad thing to be mentally associated with for a brand.

  • http://joeydong.tumblr.com/ Joey Dong

    Look’s like he’s using Air Play to mirror the iPhone screen to his computer, recording a video of it, and converting a piece of it into a gif. https://www.reflectorapp.com/

  • http://www.matthewmooredesign.com Matthew Carl Moore

    Hey guys,

    Sorry, I haven’t actually been getting notified about these comments. Joey’s right though, I used Reflector to capture the screencasts. Then I pulled them into Photoshop to do the animated GIFs. They got a bit large in file size, so I hosted them on imgur to save my low budget server.

  • http://www.matthewmooredesign.com Matthew Carl Moore

    You’re right. I find myself having the same trouble and wind up archiving a similar amount as you.

    I also have a hard time committing to the whole archiving concept. I know a lot of people do it, but I like to keep any non-spam emails in my inbox while using “read” as an indicator that I’ve taken action on it.

    Maybe if I used the gmail web client, I could commit to archiving, but right now I haven’t had much luck using search in Sparrow’s desktop client for archived messages, so I’ll stick to my dysfunctional system.

  • http://www.matthewmooredesign.com Matthew Carl Moore

    ha, yeah it’s funny how after you write a post, all these other similar posts get brought to your attention. Happy to know others are thinking along the same wavelengths and I’m not just crazy!

  • Jagzviruz

    and patented it so that no one else can use it ..

  • Tyhtyh

    Commentttttttt

  • http://twitter.com/Monolo100 Miguel Salazar V.

    I ignored this definition, very good article >D

  • http://sahilk.in/ Sahil Khan

    Apple doesn’t have the patent. The patent was owned by Tweetie’s dev which Twitter acquired and branded as Twitter for Mac. Apparently, Twitter still doesn’t own the patent as it filed under the Innovator’s Patent Agreement. http://techcrunch.com/2013/03/07/twitter-still-doesnt-have-a-patent-on-pull-down-to-refresh-but-its-about-to/

  • H

    Nice article

  • http://twitter.com/nickmyer5 Nick Myers

    Nice post and I agree that interactions can be owned by products. My favorite would be Apple’s Cover Flow. Completely unique and recognizable as an Apple invention. I’ve spoken a bit on how to help teams create branded interactions (or signature interactions) in this talk if anyone’s interested. https://vimeo.com/21504956/collections/albums

  • http://twitter.com/soh3il Soheil Alavi

    Vine maybe ? :D

  • http://twitter.com/nizu Nicola Zuliani

    I would have used Photoshop

  • Amr Tag

    There is also carrot, a personalised todo list…it depends on gestures and actually the apps gets mad at you when you don’t carry out tasks for a long time

  • http://twitter.com/plankton Darren Cadwallader

    …just for pedantic correctness :)

    It was actually developed as a plugin for iTunes by an indie developer, then bought by Apple and later spread throughout the entire UI. In iTunes I remember it being great fun & very engaging, but less so when it made its way to Finder.