5 really simple UI tricks to stop users getting lost
Since before the birth of the iPhone there were people everywhere trying to create unique and memorable designs that were visually engaging and, most importantly: different. This desire to stand out from the crowd sometimes lead to apps and websites becoming confusing and difficult to use. Often this was a result of users getting lost.
Yes, there are a lot of ways to confuse users, but one of the most difficult to solve is that of location. Now, before I set out on these ‘5 really simple UI tricks’ I want to say that before doing any of this, your system has to have a really clear and understandable sitemap. I’m not getting bogged down into that right now, though.
So, here’s 5 little methods to help prevent users getting lost in your app.
1. You don’t always have to go to a new page
This method kind of kills two birds with one stone. There are two tricks used here, the first of which being the dark overlay. That simply tells the user that they’re supposed to be looking at the bright one, not the dark one — this method has been around basically since the dawn of time. The method I really want to look at is that they haven’t gone to a separate page. This is fairly common practice for modal content where the app is asking the user a question — but this same principle can be applied to larger modals such as information ones and guides. I see too many apps taking me to a new page for too many little things, and the problem with that is, unlike this (with its dark overlay), there is no reminder of where you are when you’re taken to multiple new pages. Why not eliminate the pages and use popups instead?
2. Popup info
This is very similar to the first, really. It’s all about eliminating a page change and using a popup instead, except this has a slightly different application. The info button in the screenshot above could have easily sent the user to a new page with that info on it, but no — the app has just used a popup to keep the previous page in sight.
3. Uncovering magical things
This is common practice for menus, but it has other uses too, for example in the previous screenshot, if the app had wanted to show slightly more info, they could have had a slide-out area on the right that uncovered the new content. This keeps a reminder of where the user used to be. In *this* screenshot, that would be the small part of the main screen you can see down the bottom.
4. Gaussian blurs
Ever since iOS7 was release this technique has been on the rise. This has essentially the same effect as a dark overlay, except with a different appearance. The advantage of *this* method is that you can show more advanced content on the screen. A lot of the time with dark (or even light) overlays, the text on top becomes unreadable because the content beneath it makes it difficult — or impossible — to read. This method provides a great method of subtly reminding users where they’ve come from while still allowing close to the degree of content variation as on a regular page.
5. Animations and perspective
This is my personal favourite. Rather than going with iOS’s default page change animations, why not try something slightly more… skeuomorphic. The screenshot above uses a page flip to show the user clearly where they’ve come from. This is a simple method of indicating there’s been a page change to the right in a way that the user already understands (assuming they’ve read a book before). This is just one of the many animations that can be used for page changes. For a great example of multiple methods, check out City Guides by National Geographic. This app uses quite a nice variety of page transitions and is a great example of how to keep users aware of their location at all times.
