February 2019

What is User Experience?

It is the satisfaction someone gets from using a product, more specifically a website or app for our purposes.

Do you have a current website that is in need of an update? Take a look at it and try to find out how you can make it better for your users. Put yourself into there position and try to see if improvements can be made. Some of the questions you can ask yourself are:

how easy is the site to use/navigate?
can you find information that is required?
did you encounter any problems using the website?
would you use the website again?
any recommendations on how to improve the user experience?

Information Architecture:

the overall organization of navigation and content on a website or user iinterface. It is a logical pattern of elements eg) Nav, breadcrumb, sidebar menu, footer menu

Interaction Design:

The overall experience moving through a series of actions/tasks on a website. eg) A user completes a series of tasks of inputting information into a form which updates a database. The amount of steps it takes before a user completes a “call to action” such as, signing up for a newsletter or buying an item from your website.

Separating Visual Design:

The overall look and feel of the website including elements pictures, colors, textures etc. Of all ofthese elements are used to complete the design of the UI and how it can affect the user experience. eg) a webpage that has poor contrast for readability like green text on a black background. Tools like WebAim can help with testing contrast.

Testing the Ui:

Find a group of users that fit your target market. Information from the group will provide an indepth view from UI/UX. Testing is ongoing and iterative. Watch them as they go through the UI and record any issues, questions or concerns they have regarding the interface. Ask questions specific to the goals that you want your app to accomplish. This will help you when designing and save you from having to fix and redo the design.

[arve url="https://vimeo.com/168975395" align="left" parameters="start=2" /]

Gather metrics on your current website/app

Tools for gathering metrics include PIWIK, KISS Metrics, Google analytics. It is free and can provide a multitude of information like where are your users coming from. What entry pages. How long are they staying for? How far are they moving into the site? What is the bounce rate? What is the browser and version. What OS, device type and screen resolution?

All of this information is valuable and should be used when improving the UI for your design.

Remember, it’s not about you, its about your users.

With the new year in full swing many of you may have made plans to make updates to your websites or are in the process of assessing what improvements can be made. After viewing user statistics, having a user review session and discussing the the website needs with your team you have decided what can be done to make your website as efficient for users as possible.

I have been going through my own wish list and with the constantly changing technologies on the web it is not always easy to stay up to date. I make it a habit of reading and learning on a daily basis so that I am in the know. The following are upgrade suggestions myself and co-workers have mulled over.

Bootstrap4/Flexbox with LESS

With a good many sites now powered by the bootstrap/flexbox framework it makes sense to incorporate technologies that are widely used and integrated into the web. Bootstrap allows for quick building and maintenance of sites as well as flexbox integrates responsive features to allow your site to be viewed in a wide array of devices and resolutions.

SVG

Most modern browsers now support SVG, making it easier to implement in your designs. They are scalable, which makes them appropriate for responsive design. They are smaller in size up to 5 times compared to a png which reduces page weight and improves performance. Since they are not raster files they can be modified with css and javascript.

Retina Displays

This hasn’t been fully addressed on our websites and we need to be certain that any graphics used can take advantage of high resolutions displays. SVG will help with this but PNG, Jpgs need to be addressed to take full advantage of new devices.

Chat Bot help desks

Although not entirely in the breadth of services offered on the company website, chatbots provide real-time customer engagement.They are relatively easy to install, run 24 hours and are an inexpensive way to provide customer support.

MVP Minimal Viable Product

Is one component of lean software delivery and is better referred to as ‘continuous delivery’. By releasing any new features and functionality as soon as they are ready to realise their value, you create a better experience for end users, more revenue for the business, or both.

HTML 5.3 Payment Request API

The current 3rd party payment system being utilised at my current job is outdated, has a poor UX/UI experience and too many screens to step through. Using an HTML 5 could make payment transactions far easier and reduces risks of user mistakes or unscrupulous hijack attempts. The new feature Content Security Policy protects users and incorporated accessibility standards is more inclusive.

These are just some of the newer technologies I would like to see implemented with my current jobs website. Sure some of them have been around but it is not always easy introducing changes to legacy systems, nor is it easy to convince op level managers that changes are required. However, if you stay up to date on the latest and greatest it’s always best to implement updates on a regular basis.

Solving a web design/App usability issue