Elements of UXD

Websites and Web applications have become more and more complex these days thus user experience is essential in the development of websites. It is important to provide rich interactive experiences as it ensure users’ satisfaction when they are using the websites.

Screen Shot 2015-09-16 at 8.29.21 pm

However, it is not easy to create a great user experience. Other than design, UXD also includes information architecture, visual design, usability, interaction design, prototype development and user research which are some of the important elements of UXD as shown in the image above. In this post, I will discuss and give examples on information architecture, usability and interaction design.

1. Information Architecture

“How does a user find the information they want?”

Information architecture focuses on the organization and structure of information in which a user can navigate through. Website structure should be created in a way that users are able to complete their tasks efficiently.

Screen Shot 2015-09-16 at 9.05.50 pm

(http://www.arngren.net)

Firstly, as seen in above example, it is unorganized in term of content. Furthermore, it does not have any structure, which make it looks very messy and confusing. Inconsistent information layouts such as image size can lead to bad user experience and cause the users to leave the website.

Next, the hyper links is not obvious from the content. Users might not know whether that is a link or where will they reach upon clicking. Last but not least, the goal of the website is not clear too, users do not know whether the site is selling products or advertising.

2. Usability

“How easily users can complete intended tasks?”

A good website can be determine by the usability it can provides to the end users. It should allow users to achieve their goal with the use of the website.

1

 (http://www.google.com)

As we know Google is a search engine where users search for information. Thus, the placement of the search box is very important. In this case, it is placed consistently at the top of the website which make it visible to users. They do not have to find it whenever they are directed to the other pages.

2

(www.ntulearn.ntu.edu.sg)

It is also important to have many ways to access some of the information on the website. As shown in the image above, users not only can read the slides directly from the website, they are also able to download the slides to their computer for later use.

3

(https://www.cycling74.com)

Lastly, the content should be readable as users only scan for information in the websites. To enhance the experience, it should be organized in the way that users can read with ease. As shown in the example above, users can click to expand and retract the information and are able to copy the information to the clipboard. The codes are hide from the users and only appear when they click it. It does not only looks neater; users do not have to scroll all the way down to copy the codes too.

3. Interaction Design 

“How does a user take the action they want?”

Interaction design is related to the structure and behavior of interactive systems. It focused on users’ behaviours and actions during a user flow of an interface.

4

(http://www.adidasdesignstudios.com)

In the above example, it has consistent navigation menu, behaviour and readable typographic across the website.

Users are also able to see the interaction opportunities within the website. For example, the play button on the hero element tells the users that it is a video. The drop-down main navigation menu comes with a short description below every links give clues to the users about where it will lead them to upon clicking.

5

(http://usabilitygeek.com/tag/usability-2/)

The example above has clear icon such as ‘start now’ button at the hero element and recognizable social media icons such as Facebook, Twitter etc.

6

(http://www.apple.com)

Interface behavior such like sliders, mouse over actions or even drag and drop are also taken into consideration as they helps to interact with the users.

In conclusion, the common factor in all UXD elements is consistency. It plays a significant part in enhancing user experience and a good UXD definitely increases traffic to the websites. Nevertheless, a good UXD can reduces costs on development, maintenance and support.

References:

“5 vital elements of a good User Experience Design,” last modified September 25, 2013, http://www.netsolutionsindia.com/blog/5-vital-elements-of-a-good-user-experience-design/

“The web information architecture and interaction design,” last modified May 15 2008, http://www.cooper.com/journal/2005/09/the_web_information_architectu