The Art of Designing User Driven Websites

I want you to envision a scenario wherein you enter a store because you are attracted by the products that you see in its display window. On entering the store, you immediately notice the products that you would like to buy, you also get the required information about them in terms of their features, functionalities and pricing in quick time; this is followed by your choosing the product, making the payment and getting out of the store.

The Art of Designing User Driven Websites

What you have envisioned is a perfect in-store experience that is user friendly, in this particular case, its customer friendly. You weren’t confused or irritated by the whole process of looking for information and taking action. The time frame between entering the shop and getting out of it with the required purchase was minimal but very satisfying and successful.

You got what you needed, in a way that was quick and convenient. Juxtapose this thinking to a website, and you have the definition of a user driven website. It’s the kind of site that is made with the user as the core focus of attention.

The Art of Designing User Driven Websites

What are user driven websites?

The development perspective
A website is a coming together of a set of applications, processes, content and services and at one level can be called an online platform that hosts a set of integrated technologies. A website that is user driven ensures that the interaction between the user and these integrated technologies is seamless, informative and results driven. The convergence of all the website components must deliver a UX that allows users to achieve all their objectives.

The design perspective
A user friendly website design enhances a user’s understanding of the website’s features and functionalities so that the user interaction with the overall website is effective, seamless and results driven. The design of the website must be all that its users want it to be.

Here in this article we are going to take a closer look at the ‘designing’ aspect of user driven websites.

What makes a website’s design user friendly?

When you access a website and go through it, you are actually doing so, because you believe its user friendly. The time that you spend browsing the site is directly proportional to its user friendliness. Our mind subconsciously acknowledges the website’s user friendliness and begins to consume its content.

What makes a website’s design user friendly?

So, what are those core website qualities that we subconsciously identify as being user friendly? Here are some of them:

  • Faster page loads
  • Easy to use navigation
  • A well-structured site map
  • A prominent search functionality
  • Scannable content
  • Content broken up into various categories
  • High resolution images
  • Well placed call to action buttons
  • Uncluttered designs with no unnecessary design elements

The Designing Process

Step 1: Identify your Users and their Behavior

Identifying target users: Who is your target audience? Get an idea about their demographics, geographic segmentation, interests and preferences. Also get an idea about the websites that they access, which are also a part of your target niche.

User Behavior: A user driven website can only be designed if you understand user behavior. An average website user wants to experience an increase in self-esteem and also a sense of growth when they visit your site. They must feel welcome and they must also feel safe when they access your site. They also don’t want to be just bystanders but eager participants in the process of information distribution, assimilation and dissemination which happens on your website.

Understanding user behavior especially that of your target audience helps you identify their expectations. While these expectations might change from one user to another and can also change from one site to another the basic expectations remain the same. A typical user wants the website to be:

  1. Accessible
  2. Stable
  3. Usable
  4. Reliable
  5. Functional
  6. Flexible

Your design must keep these expectations in mind.

Step 2: Conceptualize the Design

Now that you know who your users are, what they want and also their behavior, it’s time to get started on brainstorming a designing concept that will meet their needs and requirements.

Conceptualize the Design

This includes:

  • Identifying a design pattern.
  • Deciding on the web design layout for the project and identifying the necessary functions.
  • Defining the current web design trends that must be integrated into the project.
  • Identifying the right design elements that meet the purpose of the website.
  • Identifying the images that will build the right emotion into the website; the right images to generate the right emotions, which in turn generate the right user responses.
  • Coming up with designing ideas that will help you differentiate your website from that your competitors.
  • Identifying the appropriate web design technologies that will help bring your website to life.

At the end of the conceptualization process, you have ensured your concept will help you deliver a highly satisfying user experience.

Step 3: Designing User Flow

How will a user get from Point A to B on your site, with Point A being the beginning and B being the successful end to the browsing experience?

In order to ensure that the journey between A and B is traversed in the shortest possible time and that it's also successful, you need to design a user flow; don’t start designing a website immediately after conceptualization, first design the user flow, that your design needs to support. Tie in your design flow with your website objectives; this will help you design a user oriented website by ensuring a design that is results driven to the core.

The user flow is determined by the purpose of your site and its conversion objectives. Here are three examples of what a common user flow looks like. The levels that are a part of the user flow will change in relation to the website purpose and its complexity. But overall the basics of a user flow will remain the same as illustrated below:

Designing User Flow

Step 4: Start Designing

Wireframing
First create a wireframe for your design. For this, you can hand sketch on a piece of paper, use a flow chart or web prototyping software or even graphics software like Photoshop or Illustrator. This will help you and your client get a look into the website’s structure and know whether it stands with respect to usability. By getting an up-close and personal view of the site’s design, you can even revise your concept if you feel the design isn’t user driven enough.

Design
Once a wireframe has been approved, it’s time to write the HTML and CSS code for the basic design. You have to start getting the visuals on screen and make sure that each of the codes that you write are validated before your starting putting the various interactive elements together.

User Driven Websites – A Few Examples and Thoughts on the Same

Let’s take a look at few examples of user driven websites to understand this concept better.

Alertful
I love the inherent simplicity of this website and its ability to tell you everything you wanted to know about the product on its Home Page itself. If you are selling a product, the website’s design, especially its landing page must only focus on the product. The product is the website’s Raison d'être, and the reason why people are coming to the site.

‘Alertful’ is a prime example of how a product driven website should be. The only thing that users are looking for on such sites is information about the product and a link to get started on using it, this website does that brilliantly well.

Alertful

Clearleft
This is a company that offers a comprehensive range of web design services. What are the users looking for when they come to such websites? It’s the portfolio; this website has a Home Page with a slider that gives users a look into the work done by them. Not only is this website visually appealing but very functional as well.

Its core focus is on telling users how it can help their organizations through their design service and it does this with aplomb.

Clearleft

Amazon
Amazon is the perfect example of a user driven ecommerce site. Even first time online shoppers will have no trouble using it. Right at the top, you have the search bar with a drop down list of product categories. Just key in the product name or type, and pick the category to search; there is a navigation bar with product categories and there is also a list of product categories on the left of the screen.

All information that a prospective buyer would want from the Home Page of an ecommerce site is on offer. The Sign in information at the top of the page is also clearly visible. What more do you need? It also meets the highest standards of usability when you browse through it. Its breadcrumb navigation tells a user where he/she is and how to go back to the pages they are coming from. Shopping on Amazon is a breeze because of the site’s usability.

Amazon

Conclusion

A typical user driven website that comes good on all user requirements and expectations is an outcome of careful planning and above all an understanding of what the user wants. There is no special code that needs to be written to design a user driven website. It’s only if you have a clear idea about their needs and expectations that you will be able to deliver a site that users will love going through.

There is absolutely no doubt that it is only focused, user driven research that will help you design user driven websites. Nothing else will do.