Jul 10, 2016

Principles and Standards of Web Design

In this post we will be covering topics related to usability, accessibility, and the way we evaluate these aspects of design. These topics are obviously important to us as designers because improving these factors, can lead to increased traffic to the sites we design.

UX

We will start by talking about UX because at the end of the day all of these other notions of design are really trying to improve the UX of a site for the user. UX is user experience, and the reason it is so important as stated by Tobias Komischke is because “a user will always have an experience on your website whether you design for it or not”. What I take away from this quote is, whether you like it or not people are going to have opinions about the design of your site when they are done using it. It’s up to you to make sure those are good/happy experiences the users had.

This means increasing the quality of UX on your site is probably one of the most powerful things you can do as a web designer. This can be done through improving the heuristics, accessibility, and usability of your site which will be the main topics of this post.

Heuristics

Heuristics are the main way of evaluating the usability of your site, by holding them up to a set of ten general standards. In this post we will be using Jakob Nielsen’s 10 general principles for interaction design as taken from this article. https://www.nngroup.com/articles/ten-usability-heuristics/ I am now going to briefly run through these 10 principles.

1) Visibility of system status- The system should always let the user know what is going on.

2) Match between system and the real world- The system should always be talking in terms the user can understand.

3) User control and freedom- There should always be a clear exit or undo function for a user to leave an unwanted state.

4) Consistency and standards- The user should not have to consider if different words, or actions mean the same thing. Functions should be clearly defined and distinguishable from each other.

5) Error prevention- the system prevents conditions that would result in an error or if this is not possible it notifies the user if they have chosen an option that may result in an error.

6) Recognition rather than recall- There is nothing the user is forced to remember.

7) Flexibility and efficiency of use- Including “accelerators” to speed up the process for an experienced user.

8) Aesthetic and minimalist design- No irrelevant content is displayed to the user. Uncluttered design.

9) Help users recognize, diagnose, and recover from errors- Error messages should be in plain language.

10) Help and documentation- Help information should not be difficult to find.

Modeling your design around these standards will surely increase the overall usability of your site and make for a better user experience. While heuristics can help you to design a better site, the tool is only as good as the person applying it. So in order to know if your site actually has good heuristics, it needs to be evaluated by an expert in the field which can sometime be hard to come by. Another potential drawback is the fact that certain aspects may not apply to the type of site you are designing. This would add more complexity to your evaluation.

Accessibility

Another important feature to considerin the design of your site is accessibility. Although you may think that most people will be able to use your site without any issues, the truth is that there is a large demographic of people who have handicaps which may prevent them from using your site the way you intend them to. According to LeeAnn Kinney in the slideshow included below “1.8 million are unable to see printed words & 16.1 million have a cognitive or mental illness”(Kinney). Thus by increasing the accessibility of your site you are not only making it easier for the users to access, but you are increasing the potential audience of your site by a significant amount.

So what are the some ways that we can make our sites more accessible to people? The first method we will cover is the use of the alt attribute or alternative text. Let’s say a person who is blind is trying to access your site, all of the images and graphics you put into your design are pretty much useless to their experience. All they can do is listen to the content being read to them, so we need some way to represent these images as text. Similarly, people who live in rural areas may have images turned off to increase their slow download speeds. The way we take care of this is by including the alt attribute in our <img> tags. This automatically loads the text contained in the alt attribute instead of the image when images have been turned off.

There are some other seemingly simple changes that you can make to your user interface, which can drastically improve the accessibly of your site for those who are disabled. Make your site “keyboard friendly”, meaning your website should be just as easy to use with a keyboard as with a mouse, because some people lack the motor skills to operate a mouse. One easier way to do this is if your site has a search bar, make sure the cursor starts inside the search bar when the page is loaded (ready to type). Or at least make sure, the user does not have to press tab several times to reach the search bar. Another way of optimizing accessibility would be to refrain from using different colors to indicate things on your site. Many colorblind users may not be able to detect these indicators and will thus have a poor user experience.

While accessibility may seem like an extra feature in web design in some cases it is actually illegal to not have up to par user accessibility. According to the Section 508 laws, all federal sites must be fully accessible to those with disabilities. This is important knowledge for any designers that want to work for the government one day. Colleges also have to comply with standards of accessibility. Where in a court case between the Penn State and the National Federation of the Blind, the court resolved that Penn State would have to keep to a strict time line for redesigning it’s sites to make them more accessible to all users. It seems a better option in today’s world to design with accessibility in mind to avoid these types of issues.

Testing usability

The last topic we are going to discuss is testing usability. Testing usability is important because testing is a way to produce tangible results that can prove the changes you have made in your design are affecting the UX in some way. One of the best methods of testing is A/B testing in which, half of the users see one page and the other half see a different version of that page. Over time data is collected about user preferences in the two different versions, by observing how the users behave on the two different pages. We covered an article that I will link below in the sources, which outlines a famous example of A/B testing in which president Obama’s campaign staff, during his first election, used A/B testing to fine tune his campaign website, which was obviously a big success. Although this article demonstrates the success of A/B testing in Obama’s campaign, it also points out that some developers do not like A/B testing because it only lends itself to making small changes in your design without the consideration that a large change or overhaul may lead to better results. It is also worth noting that A/B on a site that is visited by the same users daily like Facebook or a bank website, can turn users off if the testing is done too frequently because people start to distrust webpages which are inconsistent.

A/B testing is just one method out of several others that can be used help you improve your website. There are 20 methods with brief descriptions mention on this site: https://www.nngroup.com/articles/which-ux-research-methods/

It would be so lengthy and time consuming for me to cover all of these methods here, but they all come down to the same general principle, which is collecting data in a logical way to provide insights into what users like and what they do not like. As this article mentions this is not a purely scientific process that discovers objective truths about design in general, but more a way of improving your specific site through data driven results.

Final Thoughts

As stated above the reason that we want good heuristics and accessibility on our sites is because these factors improve the overall UX. A user that has a good experience is much more likely to purchase something on our sites, revisit our sites, and tell others about our sites, which is what a good web designer is always striving for. Without consideration of these aspects of design, the users will be turned off by your site, even if the underlying application is extremely powerful. Overall as a designer, you should not be designing a webpage and then trying to apply heuristics and accessibility, but instead designing sites with heuristic and accessibility as core components so that your site pleases the largest audience possible.