Written by Michael Mahemoff and Paul Kinlan;
edited by Seth Ladd
The recently announced Chrome Web Store will distribute, monetize, and popularize the concept of apps for the web. Apps are very popular on mobile devices and mobile marketplaces, but they've had a hard time breaking out on the web. User expectations are changing, and people are beginning to demand rich functionality, beautiful presentation, and tightly delivered features from websites. This article explores the ways that a web app differs from a traditional website.
Successful web apps comply with most of the following design principles:
A web app should do one thing, and one thing well.
A good litmus test for your web app is the old elevator pitch: you should be able to describe the app's purpose in thirty seconds. The user experience should focus on achieving a single result, and content should typically focus on a particular topic. The app should be dedicated to this core functionality, without extraneous features.
The goal can be receiving an answer to a question or simply entertainment. Regardless, the user has a goal in mind, and the app should immediately deliver the user to that goal. For example, a music player app should feature functionality directly related to discovering and listening to music.
Certainly, each app should provide unique, differentiating experiences and features related to its core purpose. However, an app should not encourage the user to perform tasks orthogonal to the main, advertised functionality.
A web app's user interface utilizes the entire browser window, with no extraneous or unrelated content.
Two unique characteristics drive the user interface of a web app:
- Web apps (in this context) run on a desktop or laptop monitor, not on a mobile device; in other words, they can assume a big screen. (Mobile web design is so ubiquitous nowadays that we have started to think of the everyday monitor as a big screen to the mobile's small screen, so big screen is what we're calling it!) Google Chrome's Full Screen feature means an even bigger playground for your web app, should users choose to full-screen your app.
- Web apps don't need the traditional UI elements of a website, for a couple of reasons. First, the user is already "sold" on using it, having already installed the app, and knows what it does. Second, the tight focus principle means there is less navigation, hence fewer navigation elements are required. (Indeed, for certain constrained web apps, navigation is a broken metaphor.)
The Chrome Web Store or the developer's own website will provide the description and copy necessary to explain or sell the web app. That is, the discoverability of the app happens via the marketplace and traditional search channels. For example, once inside a music app, a user should not see extraneous banners explaining the benefits of the music app. The user has already chosen and installed the app, and as such does not need the app sold to them again. Just immediately present UI elements that help the user achieve their goal.
A user expects to be inside of the web app, with all user interface elements dedicated to the task at hand. The app exists in its own context and navigation scheme, and is external and independent from the website's context or navigation scheme. When using a web app, a user is only aware of that web app. When designing the web app, remember that it is a stand-alone entity, and not buried inside of some website. Surface all contextually relevant UI elements to keep the user focused, and remove all unrelated UI elements.
A web app is liberated from the usual pattern of logo on top, menu on the side, detail links in the footer, and so on. Start from a blank slate: think about your users' needs and tasks, and design from there. You should still leverage existing web conventions, but only when they truly make sense in the context of the app.
With all the extra space, you might even do the opposite of a small-screen mobile app: instead of shrinking the normal browser view into its most important details, consider expanding it into a power view. For example, use side-by-side comparisons, graphic visualizations, and more detail than you do in your standard website.
A web app offers a rich, engaging experience for the user that is indistinguishable from native desktop applications.
Apps typically should meet or exceed users' expectations of how functional a web app can be. Web apps should use and exploit features, visual clues, and interaction paradigms previously found only in desktop applications.
For example, using modern techniques and browsers, web apps can offer desktop notifications, geolocation, beautiful typography, drag-and-drop, high quality graphics, and more. They can use cross-origin resource sharing to consume content from remote sites, and they can use WebSocket to show live content and support real-time communication across the web. Ideally, the user forgets about the browser and focuses solely on the application.
A web app is visually stunning.
You now have a rich array of options for designing and authoring highly graphical and beautiful applications. A good web app puts a premium on aesthetics without sacrificing usability.
Modern browsers support Scalable Vector Graphics (SVG), canvas (a 2D drawing surface), CSS3 transforms and animations, new color models, integrated native video, and professional fonts. There are even proposals for integrating 3D engines into browsers.
Because these building blocks are all native to the browser, it is very easy to combine them for greater effect. For example, you can add rounded corners to video or make a CSS animation that uses the new color schemes.
With great tools comes great responsibility to deliver functional yet stunning applications. No longer are web designers constrained by the tools or the browser.
A web app is extremely responsive, both in user perception and actual behavior.
The responsiveness of a web app, both real and perceived, should be as fast as a native application. Users should not wait for their browser or network, and feedback from user actions should be immediate and informative.
Gone are the days of slowly performing websites, as developers, browser vendors, and spec authors are considering speed with every feature. A web app minimizes potential and expected delays so that the user remains on task without hesitation.
Research has shown that faster web apps make more money and rank higher in search results. A good web app feels and acts fast.
The HTML5 family of technologies — supported by browsers such as Google Chrome, Safari, and IE9 — is ushering in a new era of web development. The web app will become a popular, lucrative class of applications.
Users expect web apps that are focused, full screen, rich, beautiful, and fast. We can't wait to see how web developers will meet, and exceed, those expectations. Happy hacking!
If you'd like to talk about the concepts in this article, please join the discussion. Stay tuned for further articles covering popular implementation techniques and examples for each of the web app principles.