Designing Web Applications

First Master the Fundamentals

To borrow a quote from a basketball legend, before you do anything else, you must ‘first master the fundamentals’1. All great web apps must have a tight-focus aimed at its users.

Create a clear statement of purpose

Great web apps make it easy for users to focus their attention. People typically can only focus on a limited number of tasks at a time. Instead of providing lots of options and features, users appreciate web applications that allow them to complete the task at hand, without distractions or experiences that were shoehorned into a design that wasn’t meant for it.

To ensure your application has a tight-focus aimed at its users, create a short description of your application’s purpose and who you expect to use it. Think of it like your elevator pitch.

  1. 1.Focus on the main scenario most people will use your application for, and limit the resources spent on other scenarios.
  2. 2.Separate orthogonal or unrelated tasks into their separate applications, which may mean your website provides multiple applications, with each app helping the user focus on a single task.

Footnotes
1. Quote from Boston Celtics basketball legend and web app enthusiast, Larry Bird.

Figure 2.1 - Keep it focused, don't sweat the other stuff!

Figure 2.1 - Keep it focused, don't sweat the other stuff!

Let’s look at a couple hypothetical purpose statements for some great web applications:
  • Gojee - Hand picked recipes personalized for the user.
  • Astrid - A social to-do list that helps individuals and groups stay organized, get more done, and have fun in the process.
  • Wanderfly - Help users discover new experiences based on their interests and budget.
  • Kindle Cloud Reader - Read your Kindle books, instantly.

Be self-contained

While web applications may pull in data from other sites or applications, but they are almost always self-contained, allowing users to complete their tasks without having to navigate to other sites or apps. By this definition, a search engine would not qualify as an application because it sends users off to other sites to complete their task.

Keep the user’s experience focused on the application

When users open a web application, they expect to have an experience that feels like a single application, and not a collection of web pages. A great web application differentiates itself from a website by existing as a stand-alone entity, not buried within a web site’s normal web-like navigation and experience.

Figure 2.2 - Selfcontainedness is a virtue!

Figure 2.2 - Selfcontainedness is a virtue!

Functional by Design

Great web app designs eliminate the non-essential components and allow the user to focus on the core components needed to be productive and accomplish their task. When designing your application, it’s important to keep the following guidelines in mind:

  1. 1.Minimize superfluous web page content that isn’t necessary for the application to function. For example, the logo that typically is on the top left of a page that takes a user back to the homepage, or a footer that contains links to the terms of service, privacy policy, program policy and your home page.
  2. 2.Minimize the number of pages and keep the experience focused in a single, consistent experience that does not require significant navigation from page to page, but instead changes from one view to another.
  3. 3.Design the navigation around the core scenario of your application and eliminate typical web page navigation. Your web application likely doesn’t need a home button, or multiple navigational categories that take users to different parts within your website.
  4. 4.Keep primary components accessible at all times to allow people to easily focus their attention in the right place.
  5. 5.Provide a consistent design and experience no matter where in the application the user is. For example, no matter if the user is composing a mail, searching their mail, reviewing new messages, the log off button, the ability to return to the inbox, or create a new message are all located in the same place across different views.
Figure 2.3 - Maintain the experience. Keep traditional tech elements hidden!

Figure 2.3 - Maintain the experience. Keep traditional tech elements hidden!

Encourage users to interact, engage and accomplish

A web application should encourage people to interact, engage, and accomplish something, rather than passively view content, like buying movie tickets, writing documents or sharing photos and videos with friends. Unlike websites, web applications provide users with a feeling of ownership and the ability to interact with content or people.

Make it easy to complete the task

Many people don’t have the time or attention span to figure out how to use an application. Your web applications should be easy for users to consume information and choose what they want to do next. Streamline your interface so that users can immediately grasp how to use it.

Great web applications are instantly usable, and require little training or help to be productive on their first use. To help people be successful when using your application you should:

  1. 1.Reduce the number of controls and options that are provided to the user to streamline their experience and help them complete the task at hand.
  2. 2.Be consistent in the look and feel of the information and controls that you show the user and eliminate the need for them to look for or figure out what something does.
  3. 3.Provide clear, easy to understand labels on all controls so it’s easy to know what they do.

Take advantage of the capabilities of the device

Modern browsers are giving developers access to more and more capabilities of the device. For example, web applications can be location-aware, provide details about the motion or orientation of the device, and even store data on the hard disk. And more capabilities are coming soon, like access to the camera, microphone and many other components.

Here are a few ways that you can take advantage of the capabilities of the device:

Web Applications can be location-aware, provide details about the motion or orientation of the device, and even store data on the hard disk.

  1. 1.When appropriate, provide information that’s geographically relevant to the user, such as restaurants or venues nearby.
  2. 2.Use the device motion or device orientation as new input types for games; instead of using the mouse or cursor, users should be able to move their game characters by moving the device.
  3. 3.When dealing with large amounts of data, store it locally on the user’s computer so that it doesn’t need to be transferred back and forth every time the web app starts.

Use multimedia to enrich the experience

Rich multimedia experiences were once limited to client applications, but are now available to web applications and can go a long way to creating a richer, more engaging experience for the user. Multimedia might be part of the overall experience, for example in games or video chat applications, or it might provide only an incremental experience to remind them of meetings or new messages.

Some strategies for using multimedia to enrich your experience include:

Incorporate multimedia to enhance user experience and immersiveness

  1. 1.Provide semantic meaning to events, like notification of new email, or reminders for upcoming events.
  2. 2.Always enable the user to disable any sounds or other multimedia experiences that may be distracting.
  3. 3.Use the page visibility API to prevent multimedia from playing if the user isn’t looking at your app.
Figure 2.4 - Multimedia helps take your web app to eleven!

Figure 2.4 - Multimedia helps take your web app to eleven!

Follow These Design Patterns

Use design paradigms similar to that of native applications

The visual appearance, visual interactions and actionable interface should be a good indication to users that they’re looking at a web application instead of a website. The interactivity of web applications makes native application design practices a natural fit.

Some guidance to help you do this:

  1. 1.Use buttons that result in actions instead of links that result in navigation to different parts of your application.
  2. 2.Provide toolbars and menus as ways of providing access to common activities that are needed throughout your application.
  3. 3.Use dialogs to keep the user informed or ask for information instead of navigating to new pages.

Use a client-side architecture model

Developers can trust modern browsers to give them the performance and features they need to build great applications. Web apps should take advantage of these new features and performance by separating the data from the presentation layer, doing this will make it easier to reduce the network overhead, more easily provide offline experiences and change the presentation layer without reworking the entire application.

Figure 2.5 - Use familiar design paradigms to enhance interactivity and immersiveness!

Figure 2.5 - Use familiar design paradigms to enhance interactivity and immersiveness!

Here are some things to think about as your design your web app:

  1. 1.Use AJAX calls to transfer data rather than relying on the request-response model where the entire page, including all of the data and presentation layer, is sent back and forth.
  2. 2.Use IndexedDB to keep user generated or user consumed data locally. To ensure that you never lose any user data, always write it locally first, then sync it to your service.

If you follow these guidelines when designing your web app, your app will feel fast, and behave like a native app.