6 Tips to Help You Build a Great Web Application

by on 11/16/11 at 12:49 pm

Web applications are a little more challenging to design than websites. Designers need to anticipate user behavior, make users’ lives easier and make the experience as visually appealing as possible. Many designers tend to do what is easier for them than think about what’s easier for the user. The following is a small list of tips that designers often overlook in the process of designing a web application.

1. The Power of a Good Tooltip

When you present your web application to a potential customer, the last thing you want to do is ruin your lovely graphic design work by plastering words everywhere to hand hold your new user. Tooltips on your icons can help in a big way. Tooltips offer users the ability to learn a system by exploring icons without harming their experience. People who are learning what all the buttons do can feel immersed in the experience. When it comes to mobile displays, you could use a button that toggles the tooltips off and on. The first tap would display the tooltip and the second tap would submit the action.

6 Tips to Help You Build a Great Web Application

The tooltip clearly tells users where the icon takes them.

2. Don’t Rely on the User’s Memory

There is nothing more frustrating than flicking between pages or tabs where the information you need on page 2 was entered on page 1. A web app should not force users to remember their details. They should simply allow them to do whatever action they need to do, and present them with the most relevant information possible to help them complete their task. For example, if a user is required to enter their customer reference number at the beginning of a process, they should not have to re-enter that information a second time. If you must ask a user for more than one piece of information that they have to reference elsewhere (bank statement, order reference etc.), you should make them do it all on one page to prevent cognitive overload.

3. Offer Multiple Methods of Execution

Any web app you create needs to adapt to your user’s behavior and offer multiple routes to the end goal. Let’s imagine a task management application. A typical task may contain a number of information properties that define what needs to be done (date, priority, description etc.). The default method is to add a task with its associated information properties. However, you should also give users a quick method to add a task without filling in the extra information properties. Offering different routes to reach the same end goal makes your application more dynamic for users, so that they can get things done at their own pace.

6 Tips to Help You Build a Great Web Application

Add a new task with all the info you need.

6 Tips to Help You Build a Great Web Application

Simply add a task and sort out the details later.

4. Don’t Go Modal Happy

“Hey look at me, nothing else matters!”. That is what modal popups scream to users. They are the modern-day answer to popup windows that are sometimes overused. You should use modals to draw the user’s attention. But if you force your users to focus their attention at every turn, they will soon get tired and turn off. To help users feel more in control, make your modal popups easily dismissible with either a cancel button or an ‘X’ icon in the top right. Another handy tip that’s often overlooked is to allow users to close the modal popup when they click outside of the window on the faded background. Users don’t like to do more work than they need to, and they don’t like being shouted at. Using modal popups intelligently and sparingly helps to keep the user in control of their situation.

5. Give Valuable Status Messages

‘Please Wait…’ and ‘Loading…’ are usually messages you’ll find at the top of a page. They rarely add to the user experience of the application, but they do inform users that the application is busy doing something. The problem is when they are small and unnoticeable. People who miss the status messages become frustrated at the application for not reacting to their input as they don’t realize it is occupied with another task.

For example, when you first load Google Maps a small yellow status message appears at the top of the page somewhere center-left, which you may not have even seen it before. While this status message is present, the map cannot be dragged around until it finishes loading. If the message is important enough to stop all use of your application, then a small status message is not enough feedback. If a status message has a vital message such as ‘Please Wait…’ it should appear in a modal window with a transparent overlay. This clearly tells the user to wait, and users will always be more forgiving if they are aware of exactly what is happening.

6 Tips to Help You Build a Great Web Application

Look out for this next time you’re using Google Maps.

6. Don’t Worry About Scrolling. Use It to Your Advantage.

Worrying too much about ‘the fold’ can seriously turn your user interface design from a scrollable, flowing design to a cramped and messy affair. The root of the problem is an unrealistic fear that people who use computers do not know how to scroll or that anything under the fold will never be seen. What you need to combat ‘the fold’ is a quick way of explaining what your web app is all about above the fold. What is it? Why should users care? Is there more info further down the page? If you can make your app interesting enough above the fold, users will scroll down to experience more of the page. Leave enough content below the fold to continue to satisfy the user. Once they’re at the bottom, you can be fairly confident that you have an interested user looking at your content. The bottom of the page is possibly the most valuable area of your site because the end is mostly for users who are likely to engage with your app than casual browsers who stay mostly at the top.

Conclusion

Hopefully, this list will help you re-think some design decisions you have made or are about to make in building a web application. Whether you’re designing a web application or website, the end goal is still the same. That’s to give your users a great experience from when they first enter your user interface till when they leave.


6 Tips to Help You Build a Great Web Application 6 Tips to Help You Build a Great Web Application

Greg is a web developer and Adrian is a graphic designer, together they form GingerPenguin whose goal is to produce helpful and intuitive web applications. They are new to the scene but are making excellent progress with their To Do List app and soon to be released visual CMS for web designers. Follow their progress on Twitter.

4 Responses to “6 Tips to Help You Build a Great Web Application”

  1. John Beckett

    Nov 17th, 2011

    Regarding point 1. Have you done any testing or can you show some apps that successfully implement this?

    It is equivalent to making a normal tap a double tap and a hover as a tap. While it makes sense to me, I’ve never seen it done, so I would question how well it would work UX wise.

    • Matt

      Nov 20th, 2011

      The new Gmail interface has big icons with tooltips on hover, above the main list of emails, where it previously had text buttons.

  2. Padma Mohan

    Nov 19th, 2011

    Great tips! Though these are very logical and obvious for designing a web application, very often the developers overlook them, especially the fear of user not scrolling to the bottom of the page.

  3. Louis

    Jun 15th, 2014

    Thanks dude, really helping me with my project spec ;)

Leave a Comment