User-centric web design is a method of web design where the content, design, and usability factors are all placed in accordance to the target audience’s needs and goals — a design that is centered around the user. This article will cover the basics of what user-centric web design is, and how to achieve it.
What is User-Centric Design?
User-centric design is the area of web design where the content, design, and usability are all created specifically to the target audience’s needs. In other words, it is centered around the user. This can allow for much more efficient design, and much better results concerning the goal of the website.
While it may seem simple, creating effective user-centric design is really an art in itself. It takes a lot of thought, study, and drafts to get just the right mix of design and content features of a website to be truly user-centric. User-centric web design has to do with usability, and the power to influence people to make an action on a website through psychological knowledge.
Keep in mind that there is a difference between site-centric and user-centric design. Site-centric is a website where the design and content are created to only benefit the goals of the website. In the end, that’s what we need out of a website — to make more sales, increase subscribers, or find more clients — but creating a site-centric design is only going to hurt the website in the end. The point of user-centric web design is to aid in the goal of the website by helping the user meet their goals. Oftentimes site-centric design fails to meet the needs of the user. This, in return, can convince the user not to take any actions on the website.
Create a User-Centric Design
Creating a user-centric design can take some practice, and it is very much one of those things that just needs valuable experience to learn. It is not the same as following a tutorial or walkthrough where you can learn the steps as needed. It takes a good eye and even a bit of research on your own designs and through others.
If you’ve never practiced user-centric design principles before, though, let’s do something to at least get you started. There are two things to consider first when wanting to create a perfectly user-centric web design:
- The goals of the website.
As stated above, focusing design on the goals of a website will only hurt the website in the end. Yet, you should always focus on the goals of the website. The trick is to identify the goals and the needed components that will aid in completing the goal, but still focus on the user when finally going through the design process. This way, the goal of the website can be met via meeting the goals of the user. - The target audience and goals of the users.
In order to meet the goals of a website through the manipulation of the user, we must understand the average user. This means first defining the target audience. What is their age, gender, and what are their interests? By defining these demographics, the design elements can reflect an appropriate style. Next, what are the goals of this target audience?
A Hot Teen Trend Clothing Store
As an example, let’s imagine we need to create interface design for a trendy online clothing store aimed at older teens and young adults. The goal of the website will ultimately be to make sales and create a profitable business for our client. However, let’s consider more specific goals in terms of what we’d like the design to do:
1. The visitors should think the clothing and featured items are trendy, appealing, and something they would like to buy.
2. The visitor should browse on the site long enough to be convinced to make a sale.
3. The visitor should be able to trust the website, and consider the clothing they will be buying from it is of high quality as to match the price.
4. The visitor should be able to seamlessly buy many items, as they would in a live clothing store.
Those are four great examples of specific goals for a website. Now to meet these goals, we must put ourselves into the user’s perspective to solve these goals:
1. The visitors should think the clothing and featured items are trendy, appealing, and something they would like to buy.
A featured section of the most popular items will give a positive first impression to a new visitor. The featured section can be changed with time, so returning visitors will still be sucked into the content as well. The images should be large, showing extra detail to simulate a visitor thoroughly checking out a product in a live store.
They should also be presented in a way that is professional and appealing — either on a model, or cut out from any distracting background.
2. The visitor should browse on the site long enough to be convinced to make a sale.
After drawing the visitor in from either the featured content on the front page or through accessible navigation, the layout should be set up in such a way that allows the user to find more items of interest, or find a piece specifically. More featured or similar items can be displayed in specific categories.
For navigation, we should use breadcrumbs. In a live clothing shop, a user looking for a new shirt would go to the section for shirts and then look specifically for t-shirts, dress, or casual shirts. From there, they would want to search by style and look through each individual design. A breadcrumb-style of navigation will allow the visitor to easily do this among varying sections. This will make it easier to surf the website and keep them interested in looking longer.
3. The visitor should be able to trust the website and consider the clothing they will be buying from it of high quality as to match the price.
Considering our target audience, the design style should reflect personal styles and demographics, but also be sleek and professional. By creating a sleek and professional design, the price of the clothing featured on the website is validated. Also, a younger generation generally means a more tech-savvy generation, and most young adults that grew up with computers have made a bias against ugly, outdated, or unprofessional websites. Let’s keep the style contemporary.
4. The visitor should be able to seamlessly buy many items, as they would in a live clothing store.
A mini-checkout would be a good idea to put on the sidebar to match this goal. When a person walks through a store and physically picks up items, they keep track of the cost and items at hand. By having to go to the checkout page each time the visitor wants to add something to it on a website, the visitor stops browsing and starts reviewing totals. It is the same as going up to the cash register in the store. Let’s let the user keep track of their items seamlessly, while not leading them away from other content.
The above is just an example of a thought process for dealing with user-centric web design. However, I by no means represent it as an official design process for doing so. Begin to think like this, either with upcoming client projects, for your own projects, or even imaginary clients as mere practice.
Above is the PacSun website, which is a great example of, well, our example. The red numbers represent the order in which the user is supposed to look. There are also a few arrows, where the continuity and repetition in the design lead the user onward.
From the front page, I clicked on one of the featured items, which brought me directly to the product’s page. On the page is a larger picture of the product, and the layout of the page leads me to the right. From the picture I go to the title and information on the shirt and then continue the flow to similar items.
I then went on to use the global navigation located at the top. This section uses a smart placement and a larger size of the text to grab attention. Then, within each category, the left-hand side features more navigation. On each category page, there is a feature or promotion at the top with a graphic. The arrow place on the image above shows the flow of direction, after the initial glance at the promotional banner on top.
Use Science and Psychology
The next step to effective user-centric design is to use science and psychology to meet our needs. In the thought process above, we brainstormed ways to get the user to complete our website’s goals. In the next phase, we should put these elements into place in the most efficient way possible using design principles and usability standards.
Consider the Placement
- Where does the navigation need to be? Depending on the target audience and their probable goals, where are they likely to look and how are they likely to use it?
- What are they going to want to find first? The featured content, immediate navigation, or updated content? Depending on what you identify their goals to be, prioritize them and place them on the page accordingly.
- Always consider the placement of faces very responsibly in web design. Human nature makes us focus on faces much more. This can be a great tool for creating noticeable content, but can also be harmful when placed in the wrong spot.
The above is from an eye-tracking study featured on “Doesn’t Graphic Design/Layout Affect Scanning Patterns?” Notice how in this instance focus on the baby’s face actually deterred the viewer from the content. However, take another look at the front page of the PacSun website above. The face leads to the main feature, which will draw the user into the website.
Design Principles
To bring attention to certain aspects that will help meet the user’s goals, consider the following design principles that will catch attention:
- Larger size
- Images
- Complimentary and contrasting color
- Excess whitespace acting as a border
Lead the Eye from One Item to the Next
It’s not enough to just highlight content after identifying what needs to be highlighted. Another essential step is the process of tying these items together, in a direction that is most suitable. The above design principles can again be implemented but should work in an order that will create a hierarchy of importance.
As a few general guidelines:
- Since images differ in color, shape, and texture from the rest of the design, they are likely to stand out the most. With the correct placement, images can be used to lead the user’s eye to its first location.
- Alternative color is next, as color is a strong force to our psychological nature. Also, consider the color of the mood that can bring when using this technique.
- Depending on its usage, larger size and excess whitespace can come hand-in-hand. Part of the effectiveness of a larger size in the text is that it indeed holds extra whitespace. Use a mixture of them both to create attention.
Conclusion
The user-centric design should always be a top concern for any web designer. It’s a very effective way to meet a website’s primary goals, and it aids in repeat visitors since you are complying to the needs of the user.
I’ve said before in previous posts that users go on the Internet to do something — whether it be to learn something new, get updated, or find needed information. Even if it’s for mere entertainment, a user on YouTube is much more proactive about finding specific content than someone flipping through channels on a TV. As web designers, we need to program ourselves to identify what the user is going to want to achieve and work with that information to meet that user’s goals and create better websites overall.
I strongly suggest the resources mentioned below as many of the articles are much more in-depth and provide more information on how to achieve user-centric design yourself.
