We recently posted an article on the current shift to tablet browsing‘s impacts on web design. This is a major shift for the technology industry, but also for web designers who are now being encouraged to consider the tablet platform for compatibility. However, at the same time, there’s another shift going on: a transition from mouse-centric interfaces to ones oriented towards apps.
A web app is, to put it simply, an application that relies on an internet connection in order to function. Nothing is stored locally and it’s all up in the cloud. There’s a number of advantages with this: everything is accessible everywhere, there’s little performance worry, hard drive failure does not mean loss of work and most are cross-platform. Therefore, to application developers, this is an attractive proposition that could mean apps are available to a wider segment of their potential audience.
There is a distinct difference between a web app and a website. However, that debate is not the topic of the article. Instead, we’ll be looking at another shift in web design as app-centric, multi-platform design becomes a lot more popular and everything from navigation to forms are affected.
Emphasis on Important Elements & Entry Points
This is, perhaps, the biggest significance in this shift. The case with any app is that it needs to be as simple as possible in order to not over-frustrate a user. Yet, every app has an aim and an objective to achieve following a user’s interaction. Therefore, web apps need to concentrate on the key functions a lot more than a conventional website.
This emphasis is apparent not only within web apps themselves, but also their splash pages prior to a login. If we take Facebook as an example, the biggest section of the page is the registration form because that’s what the primary page is meant to do: gain more users.
There’s also a secondary, user-oriented spin on this theory. For example, if someone is filling in a form on the webpage, there’s a low chance they will want to reset that form. The chance of them spelling their name right first time round is bigger and therefore, there should be a bigger emphasis on the submission button.
ThemeForest’s sign-in form features quite a large submission button as this is the action most users will want to take. However, there are also the “Forgot Password/Username” links for those that need them, but these are smaller.
This idea is a strain of visual hierarchy in that the main objective of a specific webpage is the most prominent and noticeable element on that page.
Another consequence is a rise in a particular design style of web apps themselves. Have you ever encountered a website that looks like it should belong to your dock (or Start Menu if you’re on Windows)? Well, there’s quite a few examples that make a web app seem native across platforms in an elegant way through the use of a variety of nice gradients and shadows.
Not only is this evident in web apps aimed at desktop use, but also in mobile. A lot of smaller developers opt to create mobile web applications over native apps to save on costs and learning curves. Not only does this method work with creating original web apps, but also themeing popular ones such as WordPress (as this MobileTuts+ session describes).
Context and Secondary Level Navigation
Show the user what he needs, not everything he doesn’t.
There used to be a time whereby, should you want to perform an action in a complex web app, you’d have to scroll around and go through several different “levels” before achieving such a thing. However, with context-specific navigation, this process is a lot simpler. The general theory behind it is that a user doesn’t require access to every option at every time and that only ones relevant to his/her current situation should be shown.
This kind of scenario-specific navigation is generally achieved through the use of second level navigation. The nearest non-web-based analogy I can come up with is towards Microsoft Office and how it uses a ribbon layout for usability. Key sections are titled and upon a simple mouse click, all the options relevant show up.
A simple way of summing this up is to show the user what he needs, not everything he doesn’t. And this same context-based theory can be applied to other elements such as pop-up modal boxes that display elements only required should the user want it.
Shadows, Gradients and Opacity
This seems like a bit of a come down from the topics we’ve discussed previously, but these three elements can have a big impact on a web design. Adding shadows to a button, for example, make’s it popout and almost come off as a design that is no longer flat.
Consider then adding shadows to a modal window and look at how it creates a sense of definition between the original content and the new frame. Just that can make a website look more interactive as it becomes multi-layer like a native app. Then consider the effects as content changes opacity under different circumstances to create an overall new dimension to the content itself.
Opting for gradients can also have a lasting impact on a final design. Just as gradients build up, the design just “pops” more and seems 3D when used in unison with inner shadowing.
Custom Buttons and Controls
Since a web application is meant to act like a piece of software running locally, a sense of everything working together is paramount. And the primary way developers can communicate this sense is through design. I would challenge you to find me a web application that’s entire user interface is built up with pure stock HTML elements with no custom styling.
You can’t? No surprise there! The fact is, web designs are meant to have a consistent styling throughout and in web apps, the use of controls and input areas are big elements to consider. Something as simple as adding a custom background colour and overwriting the border of a submission button can make a huge impact in the unity of your design.
Notice in the GMail screenshot how just the styling of the key drop down menus and buttons “just fit in” with the overall design. Oh and yes, I do have an order shipping from the Angry Birds store! ;P
Restyling stock elements is one thing, but creating new ones is even better. Take MyBankTracker as an example who use a custom slider that still fits in with their overall white and blue design.
Some Advice: Keep. It. Simple.
Whilst researching some alternative perspective on web app design, I found an interesting quote from now-former Microsoft Office marketing exec, Chris Capossela where he said something along the lines of: “When we asked [what features users wanted in] Office, nine times out of ten, they named something already in the product; they just couldnÕt find it”. This kind of links back to the whole situation-optimized navigation idea.
When we asked [what features users wanted in] Office, nine times out of ten, they named something already in the product; they just couldnÕt find it.
The fact is, if you try to cram a lot of features into a small space, each feature becomes less significant. And the user is going to spend a lot longer looking for the feature they want. And the user is going to get frustrated. And the user is going to leave. You don’t want this. To put this into better perspective, try reducing your display’s resolution to the smallest possible and launch the most UI-intensive application you have installed. Try and use it and you’ll catch my drift thereafter.
A further suggestion is to listen to your users, but not by too much. As users request more and more features, you may become inclined to just throw new options here and there.
Three App Design Mistakes
Moving away from what you should/can use, let’s go over just three important things you shouldn’t do when working on an app-centric UI.
Changing Stock GUI Elements
Imagine meeting someone in the street. You ask them where the nearest Starbucks is and they respond in a different language. You seem to pickup on a word you perceive to be a cognate, but that turns out to be wrong and it has a completly warped meaning. This sounds somewhat long winded for an anology, but the point i’m trying to stress is that you might percieve something because of your natural tongue but the designer could be aiming at something completely different. For example, if you generate your headings to look like buttons, the user might try and click on it, thinking it’s part of the web app and may continue to get frustrated at it’s lack of function and confusing experience.
Offering No Feedback
My first post here at WebDesignTuts+ discussed form validation and it’s importance to users. As a user, i’d like to know what i’m doing wrong if I can’t work your app and it’s always advisable to build space in for feedback from the start.
Design inconsistency is a frustrating experience as, just as a user get’s used to one way of doing things, they are confronted with another. A very simple example is on Expedia where the departing and returning calendar switch months as you select one date.
Six Examples of App-Inspired Design
Here’s a short list of six websites and web applications that clearly demonstrate some of the design principles we’ve discussed in this article from native app design to key emphasis.
Apple Retail Modals
To sum up this article, there’s a clear influence on the web from traditional, native applications. However, every design decision that involves web apps stem down to usability. Applications need to be simple, they need to have emphasis on the key functions so a user passes through the site with ease.
And the use of elements and techniques normally limited to native apps are already seeping through into mainstream web usage as is evident through the shadows, gradients and opacity trio we mentioned earlier.