Applying App Design Concepts to Website Design

If you ever look up best practices, design techniques, or trends in application design, you’ll notice something significant: there seems to be a much greater focus on what is most important, that being the user experience, usability, and functionality.

We see this stressed every now and then for that in web design too, but how often is it done?

Web design should not only be about making things look good, but also about good user experiences and a website’s goals. Most designers probably know this. It’s a matter of changing our habits though to make this a reality. In this article, let’s go over a few items that are very noticeable in the app design world, that are often times missed or not given enough consideration in the web design world.

A Very Well Planned Out Layout

If we’re talking about mobile apps or tablet apps, layout is extensively planned out ahead of time — usually to make efficient use of space. Still, even for desktop Web apps, you’ll notice the same sense of a well-planned layout. Usually web app’s design goes through a much more extensive layout planning process because they want to try to figure out a layout that will increase usage of the app.

The same principle should apply to the Web right? Don’t we want people to use our static website just as effectively as well?

What website creators do instead: Layout for web design is often times stolen from a similar website, using the ‘proven design pattern’ excuse. (I’m not totally against pattern libraries, and I know they have their place, more on this later.) Or, they find a cool layout on the web — something that is purely an interesting and cool-looking solution, but without any real thought to why it should be used for this website.

I’m not against pattern libraries. After all, all the great designers steal. There are blog layouts that work great for blogs. There are navigation design patterns that have been proven to be very efficient for their purpose. This is all true. However, never blindly assume that it means that X design pattern is good for your web design, only because it has worked so well on many other websites. Focus on the website’s goals. Focus on how users will use the website; how they’ll want to use it, and how they need to use it. Do not only work off of how you would use it; consider the target audience.

What you should do: Start coming up with your own layouts, based not on what looks cool, or what others have done in the past. Go off of research, planning, goals, and what would be the most efficient and effective for the users of the website. Use pattern and design libraries, as well as showcases, for inspiration when you get stuck. Use them as inspiration to improve what you initially come up with on your own. Do not use them as a starting point.

Interactivity & User-Centric Design

What makes an app, an app? It has a use. It’s not solely for consuming content, but doing something with it as well. It puts focus on the user of the app.

What if your website is meant to be consumable content though? It doesn’t matter, you can still create a website design that is more user-centric.

Hawaii.gov has done an excellent job with this. Why would people come to this website? There are likely a number of reasons, and the website clearly divides the navigation into clear sections, highlighting the most popular options. It puts the current status and a search option right at the center, so the user can easily and immediately get to what they need. There are also a number of interactive techniques that allow the user to make the website more of their own, to better accomodate their needs.

Let’s also use the example of a blog. Instead of laying out all of the content, how can you make the design better with interactive effects that make it easier for the reader to find exactly what they need, or what they want to read, besides the standard search bar and a few categories? Can you build a really interesting filter? Can you create a tool that helps readers get the information they need, solve their problems, and get what they’ve been searching for?

Adding interactivity and user-centricity to design can come in many forms. There’s many examples of other websites already doing it in their own way.

VisitPhilly.com puts both an emphasis on users that are planning to visit, and visitors that are currently there. With plenty of information and tools to plan a trip, the current conditions of Philly right now, and what events are currently happening, the resources laid out in the website really focus on the individual’s goals.

nclud includes a lot of interesting interactivity that really allows the user to absorb the information in a more meaningful way. At the same time, the interactivity does not make the website difficult or gaudy to use, but instead complements the content.

Yellow Pages puts what the user needs and wants to do right at the center of everything. Secondary content is content that the visitors may find useful in the form of localized coupons and places. Interactivity and user-focused functionality is added through a bookmarking feature, that requires no login.

Stop Worrying About How Pretty it Is

You could make the coolest, prettiest, best looking web design there is, but that won’t solve the visitor’s problem. It won’t solve you client’s problem either.

Don’t design for aesthetics, design for how the target audience will use the website. Do you know your audience? How well? How do you know them? This is why designers who focus on one type of website are so successful: they know what the audience is looking for, even though they aren’t apart of that audience directly. It’s a combination of research, but mostly know-how through experience. Stop designing for yourself, it’s not a good business model.

“But I want good looking pieces to put in my portfolio! I’m a designer, it’s my job to make websites look good!”

You don’t need to make ugly websites, but only making pretty websites should not be your primary role. You need to make smart websites, and then wrap that intelligence in a pretty coat. Over half of design is design intelligence and usability, not just aesthetics.

Mobile First and User-Centric is a Good Start

The #1 way we can start making better designs is to start thinking of website as a tool again, and less like a painting on a canvas. Placing importance on this is the fastest way to begin doing it. How can we force ourselves to change our mindset though?

Mobile First

Mobile first design is a good place to start. It won’t automatically come up with the solution, but it can get us thinking on how something will work on mobile, where users are more goal and task-focused.

Here are a few resources:

• A Book Apart’s Mobile First
• Mobile First Design: Why It’s Great and Why It Sucks
• Creating a Mobile-First Responsive Web Design

User-Centric

Another concept that has plenty of outside resources and a good place to start to change the mentality of web design is the concept of user-centric design. Start designing more for the user, what they need, and how to personalize for them to make the best design decisions possible.

Here are a few resources:

• User-Centric Website Design
• User-centered design (UCD) – 6 methods
• Looking Beyond User-Centered Design

Conclusion

Static websites are not applications, and shouldn’t necessarily be treated as them. However, we should give more importance to the concepts we need to deal with in app design, and start applying them to website design.

Putting more focus on how the user will interact with a website, rather than just trying to have a creative competition with other designers, will put the intelligence back in website design, creating better performing websites.