Website User Experience Design – Nailing the Foundations

For the most successful website design, we need to start the crucial process of laying down a solid foundation for the rest of the project. In this phase, we nail down the navigation, the basic structure and the skeleton of the site.

To define the highest quality user experience for your website we will ultimately be marrying your thoroughly fleshed-out business <link to the article – Business Goals and Web Design ^^> and user goals <link to the article – How To Do Customer Research to Build a Successful Website>. After you have sought out your web designer and developer to supply the requirements of the project, the first phase is solution design. This involves strategising around the structure and layout of the site, essentially the groundwork for the site.

Before we start, let’s get familiar with some definitions of some terminology that may be used during this phase:

Defined by Smashing Magazine as “how a person feels when interfacing with a system.” You should work towards creating an enjoyable experience for your users.

Working out how content will be structured on the site. This means working out what content will sit on what page and how the pages will be categorised. The result of IA will form the sitemap.

Defining the basic layout of the pages. The wireframe does exactly that, it is a low-fidelity, black-and-white and static snapshot of the pages.

A template is a uniquely designed webpage that you can insert your own text, images and other media, within its layout.

Getting the navigation correct means that you are able to define the flow of user behaviour, ensuring they are able to easily locate the information they need to make their decisions. You and your UX specialist will work with you to optimise your navigation. But, you can equip yourself with some knowledge to assist with this collaboration.

Content is king for your websites, but business and user goals can only be achieved if users can find the information they need. Therefore, your content should be organised on your site in a logical manner. This is why information architecture is the foundation of the project’s success.

Observing the F-shaped Reading Pattern to ensure that the most important information is accessible immediately.

You need to first determine what content should be included. To assist with determining these pages, you may want to consider the top pages users are looking for when landing on a business’ website.

The top navigation menu bar is the most important navigation point for your site. Typically, it is located next to or underneath the logo and is one of the first things your users will see. Due to its importance, the pages included must be carefully included. You should highlight the pages that will drive the most value for your business.

Usually, you will have a side menu for inner pages to allow for easy navigation to other pages that may be related or under the same category. Many websites are moving away from the side menu due to the rise of mobile browsing. Side Menus usually lose their effectiveness on smaller devices since they are usually hidden or collapsed.

According To Ko Marketing’s Web Usability Report 2015, Almost 50% Of Users Use The Navigation Menu To Orient Themselves.

The footer is located at the bottom of the screen, usually overlooked, but still relatively important. The primary purpose of the footer is to serve users who have not been able to locate the information they need, having scrolled down the page they are on. Therefore, you must ensure your footer contains adequate information to help them navigate to the information they need.

These are usually located at the top left, below the top navigation. They allow users to trace back to previous pages. The breadcrumbs are organised based on categorisation, so they are mostly used on websites that have a more complicated structure.

Once you have your pages, the next step is to organise them appropriately. If you have many pages, you should first determine what pages are classified as primary pages and which are secondary. This classification will help you define what will be on the top navigation and what can sit in the footer. To further organise your primary and secondary pages, you may need to categorise them under certain sections, which can form the dropdown titles on your top navigation bar.

The primary deliverable of this phase is the wireframe. After determining the flow of the website, your UX designer will create the blueprint of your website.

Although you may wish to proceed to visual design from the very beginning, wireframing forms its foundation. As such, it is a very important component of website design and development.

Working out the navigation is not enough to define how the user will flow through the site. It is important to structure the content on the specific pages to ensure user engagement, whilst conveying your business’s unique value proposition.

Whilst it is important to deliver the information that users require, we ultimately want users to take action and become customers of your product. Therefore, it is important to ensure that there are clear ‘call-to-actions’ on the site to allow your users to take the next step, after digesting the necessary information to make their decision. It is also important to consider in this phase, the specifics regarding how forms will be structured and how your website will integrate with your current lead management system.

Wireframes give a basic blueprint for both design and development to base their work on. Changes to the structural layout need to happen here. Changes post-design and development set the project back as they need to go back through wireframing, resulting in more costly changes further into the process. From a technical perspective, the wireframe will also provide good visibility of the functional requirements and allow for the assessment of technical feasibility.

Your involvement in this phase is absolutely imperative to make sure that the wireframe created is aligned with the website’s purpose. The clearer this is at this stage the less costly it will be (in terms of changes).

Your UX designer must thoroughly understand your business goals and who your website is targeting. This is the perfect time to share the summaries of your findings from your previous business learnings. Both parties are on the same page going forward after these summaries are shared and collated in a business requirements documentation.

Your UX designer will need to have a good idea about what content you want to feature on each of the pages. If you have any drafts of the website copy ready, sharing this will assist with content organisation.

It may also be constructive to figure out what visual assets you would like to feature on your site. In general, presenting meaningful images and videos means higher engagement from users. Therefore, it is worthwhile to consider if your product propositions can benefit from images or videos.

Users only remember 20% of text written and 90% of all information transmitted to the brain is visual.

Since the wireframe will define the direction of the design, there is an opportunity to take a look at other websites and what they are doing well. There are surely some websites you visit often that offer a great user experience. Make a short list of your favourites and go through them with your UX designer. Articulate what you like about the site specifically, so your UX designer can keep this in mind when creating the wireframe.

Conducting some competitor analysis enables you to see where your business fits within the market. It is tempting to directly copy something that a competitor is doing, but this eventually means there is very little differentiating between your products, and people will lose interest. Instead, you should ask why the things they do work, and take those lessons away.

As part of UX design, there are some common practices that are widely accepted. Following these standards means that it is universally easier for users to navigate by having a ‘general structure’ to follow when finding the elements they need. By no means, are these set-in-stone rules, so long as there is still some logical flow to its structure:

Logo

Main navigation bar

Search (if applicable)

Cart (if applicable)

Login (if applicable)

Sitemap

Legal Information and Copyright Notice

Contact Information (if applicable)

Social Media Links (if applicable)

Email Newsletter Sign Up (if applicable)

After thoroughly researching and laying out a foundation, you should have a quality user experience prototype for your site. To continue your development in exceeding business and customer goals, continue reading about effective visual design processes here. <Insert link to next article – Visual Design>