UX Flow: 4 Ways to Walk a New User Through Your App

The "Walkthrough" Approach

This is the most common method used by companies like Google and Squarespace. It walks users through the flow using popovers and intro screens to help you through their UX flow. This approach is the most similar to having a professional on hand to help you with onboarding. To ensure that the popovers aren't too cumbersome, they should be easily dismissed (See my earlier blog post on Popovers).

 

The "Do Something" Approach

Used by apps like Tumblr and Ness, this approach is great because it gets the user to create content almost immediately. Tumblr considers its UI to be so intuitive that it doesn't need a walk through. If your app is simple enough, this can be a great way to get your user addicted to using your app.

 

The "Setup" Approach

The simplified approach helps the user through creating his account then you're on your own. This is another good approach for apps with a very simple UI because it doesn't overwhelm the user with options. Companies like Apple and FitBit do this to help personalize their software for your needs.

UXflows_GifGraphic_Fitbit1.gif

 

The "All In" approach

This approach walks the user through the set-up process and prompts them to post something. Pinterest uses this approach to get users to sign-in and post a Pin in one approach.

Playfulness on a mobile application can cause us to treasure our apps more.

Like many people who design digital experiences today, my first experience with a screen was a video game console. When Super Mario 64 came out, I remember discovering that I could warp Mario's face on the opening screen. You could bob his head to music. Nod his head in answer to a question. Twelve-year old me was delighted. The same delight that you feel when you are sucked into a game could be harnessed to create delightful UX. As designers, I think we spend too much time trying to create something slick, shiny, and expensive-looking that we forget to delight the user.

One way we can go about this is through gamification. Apps like Nike+ and RecycleBank use achievements to motivate users to do things like exercise and recycle. While they keep you motivated with badges and awards, you completely forget about those ten pounds you shed from running IRL. Users want to play, and the desire to be at the top of the leaderboard can be a powerful motivator. If apps like ChoreWars can motivate roommates to clean their toilets for experience points, anything is possible! 

Playfulness isn't just about motivating the user. Sometimes it is the little moments of surprise that can cause the most delight. Subtle animation, hidden easter eggs, and witty microcopy on a 404 page can all be opportunities for delight. These subtle interactions with our users leave them with a positive feeling for your app, and if you can get a laugh? You might just have a lifetime user on your hands. I know you people are playful because you have wonderful imaginations. So quit printing out Jeff Goldblum signs for the bathroom and use that playfulness in your UX!

Insightful Design: Hotel Tonight App

Hotel Tonight is one of my new favorite apps. I'll be honest, they hooked me with the animated intro screen which animates little Hotel Tonight logos coming to life around the city with the quote "I see the future but live for the moment." Other apps are just showing a loading animation at this point, but it's 2015 and the user has to be delighted if he is going to use an app. I love the idea of last-minute booking as an app, but that's not why I love it. Hotel Tonight really respects the importance of my taps. Booking a hotel on this app requires only three taps and a swipe, totaling about eight seconds (compared to Priceline’s mobile process which is apparently 52 taps, 102 seconds and Hotels.com’s app 40 taps, 109 seconds). I also love how the top level nav makes it easy to jump from section and know where you are in the app at a glance.

I love the way they handled common frustrations in their photo upload and date picker solutions. The date picker is beautiful, simple, and intuitive. It allows you to scroll horizontally instead of using the phone's native drop down. The "Snap Your Stay" feature could be easily ignored, but it is brilliant for several reasons. It tackles the problem that many apps have: how do you get users to create reviews? Normally, users would be required to take pictures and title them without any guidance, but this system takes away all of the doubt. Simple placeholder boxes for content guide the user into which types of pictures they should be taking, and as a bonus, the naming is already taken care of. They even add little hints in the comments like "Take a picture while the bed is made" ensuring that the pictures are as accurate as possible. If that wasn't enough to get the user excited to submit, there is a progress bar that also helps motivate users to publish their review.

 

"Maybe it lasts six minutes; maybe it lasts forever."

Way To Go is an interactive experience that could last your entire life. If you want to run around the woods for the rest of your life, that is, and who doesn't? I love the art direction here, and the immersive feeling they've achieved. I see this being a medium for entertainment in the years ahead. I would love to see a feature film set up in a non-linear format like this. Where The Wild Things Are as an interactive experience? Yes, please...

Does "Cradling" your phone affect mobile UI?

   Cradling is using two hands to hold a mobile device, but using only one hand to touch the screen or buttons.

Cradling is using two hands to hold a mobile device, but using only one hand to touch the screen or buttons.

As a user experience designer, I pay very careful attention to the needs of mobile users. Today's mobile devices are getting larger screens and with that, the context of how users engage with their devices is changing. When is the last time we studied how users actually hold their phones?  According to a 2013 study by Stephen Hoober, there are three ways that users hold their phones:

  • One handed - 49%

  • Cradling - 36%

  • Two handed - 15% 

I'm sure these numbers would be quite different today given the number of phones with larger screens. Of course we change positions often while using our phone based on the UI of the app or because of real-world factors like subway stops or stoplights. Does this mean we should be avoiding the dreaded upper-left corner because most users are one handed and right handed? It definitely makes the problem more complex. I think we should realize that the user is flexible, but perhaps we should design our UI to reflect the position we would prefer our user to take. 

"The First Network Designed for Black Women" has some excellent branding.

NY Agency, Gretel has really outdone itself this time. The brilliant use of color, texture, and motion sums up everything that is good right now in design trends. The whole thing comes together in a way that doesn't feel busy, just bold and strong. Brand New describes it like this:

I can’t pinpoint what it is that makes this so appropriate for the audience but I do know it wouldn’t work for a channel for white men

...and that, is a wonderful thing. Check out all the pictures on Gretel's site.

Michael Hansmeyer's Computational Architecture

Michael Hansmeyer is an computational architect that uses complex algorithms to create architecture that looks like it is straight out of some alien insect world. In his Columns piece, he uses CNC cutting on ABS plastic to create four columns where no surface is the same, but the whole project somehow comes together in perfect unity. I can imagine that when you see this in person you feel the same sense of wonder that an ancient tourist may have felt upon seeing the Parthenon for the first time. 

Free Online Image Glitcher

Check out this simple interface for glitching images for free online. Simply drop in an image, adjust some settings, and you'll have a glitched image you can save and use anywhere. Much easier than going into a text editor and glitching the image manually. I glitched my Facebook profile picture, and I'm pretty happy with the results. Great work Airtight Interactive!

Try it out: http://www.airtightinteractive.com/demos/js/imageglitcher/



Bessssst Tracks of 2014

I put in some long hours in front of the computer in 2014, and I couldn't have done it without Soundcloud. This is my take on the music that defined 2014 and the bangers that I just couldn't stop listening to. If I was already sick of a song I included a remix so this mix would be as fresh as possible. In 2014 Every rapper was on Molly, the evolution of DJing turned into 90s R&B, and PC Music dominated the scene with tracks so sugary you could leave them outside all year without losing any sweetness. I love that in 2014 there is no such thing as a guilty pleasure. So sit back and enjoy the year of self-indulgence. If you like what you hear, follow me on Soundcloud.

Material Design: Google Design Guidelines

Reposting this because of what these guidelines did for me. If I were to recommend one set of guidelines for interaction design, this would be it.

A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.


Check it out in the link below...

Source: http://www.google.com/design/spec/material...