Blog

5 Blind Spots to Consider When Designing Web Apps

Tags:

blog_hero_5BlindSpot

Web apps each have their own unique functionality, content, and purpose. As designers, we consider the core actions a user can take and how these flows and journeys work. We create cohesive styles for all the different pages and views. We may be able to mock up enough designs to get approval from our clients to begin development, but there are always elements or features that may get overlooked. Let’s explore five potential “blind spots” that we may overlook during the web app design process.

1. Imagined Content vs. Real Content
blog_1-imaginedvsreal

As designers, our interface mockups usually depict the ideal, best-looking use of the page. For example, on a hypothetical profile interface, we use a short and easily spelled name like “Sam Miller” along with a perfectly crafted 2-3 line bio and a well-cropped hi-res headshot.  This may work as a way to impress clients and gain design approval, but it’s important to remember that real use cases of the interface may include impossibly long names, huge chunks of text for the bio, and a terrible profile pic. We should keep these in mind and make sure our designs are flexible enough to handle these cases.

When Facebook came out with their new app Paper earlier this year, they launched a beautiful site showcasing impeccable designs that contained gorgeous content. But as people know from taking one look at their Facebook feed, the Internet buzzed with cracks on how Facebook’s mockups couldn’t be farther from reality.

2. The Onboarding Experience
blog_2-onboarding

First impressions are vitally important. The first few moments of a user’s experience on a new web app can make or break their willingness to come back. Do you need to educate the user in any way? Do you need to take the user on a tour of the major features? What’s the first thing they should do? Is there starter or example content that you can display to let the user poke around and see what’s possible? Don’t let the user get frustrated – give them positive feedback by providing something quick and simple to get started.

First Time UX showcases a lot of great mobile app onboarding examples. User Onboarding tears down a lot of popular web apps.

3. User Roles and Permissions
blog_3-userroles-v2

Most web apps have more than one user type. It’s important to identify all user types and distinguish what each of them can and can’t do. Take the case of a learning web app that lets students take practice quizzes. While the student may be the primary user type, the web app may have a more administrative access level for teachers and a limited “grade-view only” access for the students’ parents.

4. Confirmation Modals
blog_4-confirmations

We want our experiences to be quick and smooth. However, we need to be careful around major (often undoable) actions in the app. For these scenarios, it may actually benefit the user to slow down. Confirmation modals are a good way to verify a user’s intention before they do something critical like delete a record or upgrade/downgrade to a different plan. You’ll minimize calls from panicked users who may have accidentally deleted an important file or made the wrong purchase.

Delete confirmation modal in Mailchimp
MailChimp does a great job of using a confirmation modal when you delete a campaign. The user is forced to type “DELETE” as confirmation inside the modal.
5. Email UX
blog_5-emailnotifications-v2

Emails are a part of the web app user experience even though it appears to happen in a user’s inbox. Consider triggering confirmation emails whenever there’s an action that requires the user’s attention. A popular example is when a user has posted something (think Craigslist or TaskRabbit) and is waiting for responses. Without an email notification, the web app risks losing a key interaction by betting that the user will come back to the site voluntarily without knowing someone has responded. Reminder emails are also opportunities to use email to provide a better experience. An events-based web app will benefit from the ability to send out reminder emails to attendees a day in advance. Think through the overall email user experience and use your best judgment to ensure that users are getting the right amount of notifications and aren’t being bombarded by unnecessary ones.

If you’re worried about annoying the user with too many emails, consider building in email notification settings (usually within the account settings), so that users can control what emails they get.

Conclusion

As designers, we should take it upon ourselves to be thorough in considering the various edge cases and less visible user flows that may confuse or frustrate users. Through a combination of experience and attention to detail, we can play an important role in minimizing blind spots in our web apps and delivering a more seamless user-experience.

What other blind spots do you run into while working on web apps?

  • Marc Saenz

    Thanks For Sharing, Great Help 🙂

  • Kristin Lasita

    Great tips to keep in mind. I’m bad about considering first impressions after signing up. Is that something you always consider a top priority when creating something new?

    • Yvonne Weng

      Yeah – we’re usually so focused on how the “normal” logged in flows work, which is why it’s a blind spot. But we’ve learned that those first impressions are very important to think through and it’s becoming one of our top priorities.

      • Kristin Lasita

        Thanks for the feedback. The next greenfield I start I’ll make that priority in my design.

  • https://twitter.com/estrattonbailey Eric Bailey

    Awesome stuff! Thanks, Yvonne.

  • https://flazingo.com Barrett Kuethen

    All so true. Great post!

  • ivyproject

    thanks for sharing this info!

  • பிரபாகரன் சேரவஞ்சி

    Wonderful Article !

Popular This Week
25 Must-Have Pages for Your E-commerce Website
January 30, 2015

25 Must-Have Pages for Your E-commerce Website

By Yvonne Weng
Building a Responsive jQuery Carousel Plugin from Scratch
November 26, 2014

Building a Responsive jQuery Carousel Plugin from Scratch

By Max Rolon
Taking Control of Image Loading
July 29, 2013

Taking Control of Image Loading

By Patrick Kunka
Text-align: Justify and RWD
March 12, 2013

Text-align: Justify and RWD

By Patrick Kunka

Like what you’re reading? Sign up for the Barrel newsletter and receive updates.