User Experience (UX) Explained for Best Practice Website Creation

User experience design (UX) is a fundamental process that designers use when creating new products. This process takes into account the different needs of the people using them and creates relevant functions and usability for these people. UX design focuses on the client and creates solutions for problems had by everyday users creating better sales and longer use of products.

Delving into UX design and Content Management Systems types of websites, there are many principles one can follow when creating these usable and functional websites. In my research, I came across a web Ran Segall a Full-Stack Designer who creates videos for Flux Academy on Youtube. He gave great insight into creating webpages with UX design in mind which will in turn keep clients on your web pages for longer and also help to sell yourself and your products better. He spoke about 2 key areas;

The Navigation Bar

Having clear navigation on your website is important when keeping users on your site. Users want to understand clearly where they are on your site and where they can go in the shortest amount of time. Segall uses Apple as an example of a website with a flawless Navigation system.

Going onto the Apple website it is clear how to navigate around the pages in order to find what you want. The Nav Menu is clear and concise and explains exactly what will be on the web pages if clicked on. There is a dropdown menu which helps to further organise the pages and leaves the initial navigation bar with only the key components needed when entering the site. Apple also makes great use of having its navigation bar stick to the top of the page and although the colour change is slight it can be seen at all times what page you are on by the changing colour of the selected page you are currently on. In contrast to Apple Segall looks at another website with a poorly executed Navigation bar which doesn't use fundamental rules of changing colours for selected pages making it confusing and getting increasingly difficult to know where you are on the site. This can result in the user getting frustrated and leaving the site. One positive he had about the navigation is on some pages (but not all of them) there was the use of breadcrumbs. This showed the current navigation through the pages which I felt was a nice added touch to keep you on track of where you have clicked and how you got there. It reminded me of the IKEA website which uses this method exquisitely on its website. You can see below the navigation from Products to the selected item.

Accessibility

When creating a web page it is important to take into account that users who are viewing your site might be visually impaired or use an operating system through voice and these must be considered and catered for. You must take on board that the user might be colour-blind or even struggling to see smaller text. Developing your site correctly from the beginning will help with accessibility for the user. The Web Content Access Guidelines (WCAG) were created for designers to adhere to when creating content and ensuring it is for everyone regardless of their impairments which will broaden you and your products to more people. Pablo Stanley created simple steps to follow when creating an accessible website. Some of the key components are to watch colour contrast and text size. Smaller text sizes can be considerably difficult for older people to see. This will alienate a whole demographic from your website. He also explains not to use colour alone when showing differentiations on your site. Adding text as well so people who are colour-blind can see the difference between content. An example of this can be seen below.

Something I wasn't aware of is the use of Focus States which is when people use the keyboard to navigate a webpage. These people could use the Tab key to select and navigate around a webpage. Keeping this in mind and developing your site to cater to this from the beginning will help to ensure longevity with your user. Labels are important for people that use tools that read the web page to them. The use of labels will tell these people what criteria need to be filled in for certain areas on your page. Using appropriate labels instead of the use of placeholder names creates a more accessible website.

This along with using ALT tags can be used to help accessibility for blind users. The ALT tag will explain what a picture is on your site with a screen reader tool. Using the proper markup from the early stages of development will also give a greater experience for the user as a screen reader will be able to read correctly written code using appropriate tags like footer, header and nav.

Video

UX/UI BEST PRACTICES FOR WEB DESIGN

Accessible Web Design: What Is It & How To Do It