Putting User Experience (UX) at the heart of design for Web

This is not quite the case as during the application of our design process we undertake the responsibility to understand the requirements of the customer prior to considering the way something needs to look. ‘Form follows Function’ is the ultimate mantra for any good practice UX design. In addition to this we have integrated the latest technology to enable our clients to ‘experience’ the user journey based on the new designs, before they spend money on development.

In the fast moving world of acronym’s, we may consider UX to be a relatively new thing. Not the case, as ‘User Experience’ has been a hugely active part of the design process for decades (if not centuries).

User experience is the act of creating an emotionally positive connection between a human user and a digital or physical product.  The intention is to create a positive personal moment rather than a negative one which would result in a user no longer needing or wanting to use the specific product.

One of the primary objectives in good UX is to understand the needs of both the user and the business who requires the product. Once the key requirements of both the user and the business are understood then the process moves to understanding the failings of an existing process. Understanding those failings will help to determine a positive path for a new user experience.

UX in Web

In the web world, the application of UX is to determine a seamless user journey where the person interacting with a website are provided a clean and easy flow through either the pages or a specific process. In the case of a process it may be to encourage a user to complete a enquiry form, complete an application or process through a transaction. Or to just engage with the business and pick up the phone.

Within the design process we utilise UX best practice while creating a collection of wireframes.
UX design always happens in the design process whether it is intentionally done or not.

The process of considering a flow, user journey or interaction from one page to the next is the act of UX design and typically starts with a wire framing process to consider and understand the path a user will take.

Step 1 – Wire framing

The wire framing process typically starts with understanding the basic elements that are to be applied to specific pages. At this stage they may be referred to as templates. A template is usually a structure that may appear multiple times across a websites page count. Some websites may have more or less templates.

In the case of large websites, the number of templates could range from 10-15+. Whereas a smaller website may only have 4 or 5.

A good start point is to create a structure for the homepage where we will determine basic positions, sizes and structures for the site navigation, logo location, banner structure and content.

All these elements will be laid out as visual blocks which will be labelled accordingly. It is important that a wireframe structure is laid out as accurately as possible ensuring that the pages dimensions and specific content blocks are set at the correct pixel dimensions. For example a call to action may be 250px x 100px (or locked to percentages for the purpose of responsive), visually recognised as a landscape rectangle. Alternatively a call to action sized at 100px x 250px will be a portrait rectangle.

As well as basic structural elements, we must also consider navigation and buttons that will appear across the site. This may also include any rollover options that would occur with a specific element.

As we work through the layout, the framework of the page begins to take shape and will start to clearly show the structure. It is also important to recognise a fold line for a website. A good rule of thumb is to add a fold line between 800 and 900 pixels down the page.

In previous cases, clients have always required that the key content is clearly visible above the fold line. The negative issue here is that the area above the fold line tends to become cluttered with too much content.

With the new age of mobile devices and responsive liquid layouts, this requirement is no longer the case, as it is more of a requirement to ensure a websites design is able to sit comfortably on either a desktop display or any variable screen size.

Below is an example of a wireframe structure and its interaction from one page to the next.

Part of our process is to focus our skills using the latest technology and software. Using the latest tools from Adobe, we are able to visualise and realise our user journey using Experience Design CC.

Content below the fold line also has a level of importance but is usually considered as secondary to the key requirements of the sites page.

The additional templates that will be designed would typically serve a specific purpose. These can range from a product category page, a generic page or a contact page template.

These wireframes will carry some of the elements that have been used on the homepage, the header area for example, but will also contain new elements to display, such as contact forms or content blocks for text paragraphs.

Once all the templates have been created for both desktop displays and mobile devices, the wireframes are shared with the client to ensure the brief has been met.

The advantage of working in a wireframe format to begin with ensures that any changes that are required are quick and easy to perform. If the websites structure has been considered at the same time as the layout and the look and feel, then the process to amend can take longer.

Step 2 – User Interface designing

Once all wireframes are confirmed and agreed, then the process of visually designing out the website is initiated. This is also referred to as the User Interface (UI).

At this point a thorough investigation into the clients brand guidelines (if available) is undertaken.
A full review of the guidelines will ensure that any specific colours or fonts are being used correctly. In addition any specific structural requirements such as font padding and image exclusion zones are considered.

This part of the process simply involves applying colour, style, imagery and content to a clean user friendly structure.

Below is an example of a full realised design, based on the previously created wireframe.

This stage is also where we may differentiate one area from another, where sub branding may be used. A good example of this can be seen below where sub brands from a parent brand reflect through different areas of the site. However, the subtle inclusion of an accent colour will be applied to specific items such as enquiry form buttons or dividing lines.

To conclude, the purpose of the UX process is to understand the requirement of the companies product and ensure the user is able to interact with a seamless, intuitive and simple system that allows them to enjoy the experience that is presented to them. The ultimate primary objective is to ensure the user engages with the company through this positive experience.