INF 335W Project 5 - Usability Redesign

Usability Redesign

“A site is accessible if a person with a disability can have an equivalent experience to someone without a disability; in other words, can get the same information and perform the same functions.” - Sharron Rush, Ph.D. (at SXSW interactive 2003), Knowbility

Good web design should allow all audiences to freely enjoy the creator’s site; uninhibited by bad user interfaces, broken content, lack of accessibility integration, etc. I’ve defined all of the basic principles and components of “accessibility” and “usability” below:

Principles of Accessibility

  1. Perceivable: Information and user interface components must be presentable to users in ways they can perceive.
  2. Operable: User interface components and navigation must be operable.
  3. Understandable: Information and the operation of user interface must be understandable.
  4. Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

Source: Web Content Accessibility Guidelines (WCAG) 2.0

Components of Usability

  • Effectiveness: Accuracy and completeness with which users achieve specified goals.
  • Efficiency: Resources expended in relation to the accuracy and completeness with which users achieve goals.
  • User Satisfaction: Freedom from discomfort, and positive attitudes towards the use of the product.

Source: International Standards Organization (ISO) Standard 9241-11

Analysis of My INF 335W Web Portfolio

Screenshot of the the navigation bar for my WordPress website on a mobile web browser.

My web portfolio for INF 335W, which is hosted on the UT Blogs WordPress platform, seems to be pretty up to par with the requirements for good web accessibility and usability. I have chosen a “minimalist” theme with contrasting colors - dark blue, green, gray, and white - which allows users to easily read the content of my pages (“user satisfaction” component of usability). In order to be more accessible and align with the “perceivable” principle of accessibility, I could change the color of the text on my pages to be black and the photo captions to be a darker gray. The top navigation bar could stand out a more to the user, so it is easier to tell that the top links are separate and unique links, to improve the “effectiveness” component of usability on my site. However, this is just another one of those quirks of WordPress that I am unable to change. I would also love to change the way to the top navigation menu bar functions on mobile web browsers. Currently it takes up a lot of space when it is expanded, it almost takes up my entire phone screen on my iPhone 6S Plus. If I had the ability to edit the CSS source code for the site, I would change the menu bar to be more space efficient to improve the “operable” principle of accessibility for my site (image of menu, right). I also need to add alt text to all of my images so they can be interpreted by accessibility programs.

Examples of Accessibility & Usability

Good Example: Codecademy

The user login page of Codecademy.

Codecademy's courses page.

Codecademy’s website demonstrates the following principles of accessibility:

Operable

The website design is clean and extremely operable as there are not even very many functions or buttons on the pages to “operate.” All of the site’s functions such as the sign up process down to the course image “hover” links work, and look clean and professional. There are no design distractions that would inhibit its operation.

Understandable

The website’s buttons don’t have any fancy animations that would be confusing and everything is laid out in a logical, simple way. There is not an overwhelming amount of text and the icons/images presented correlate to the content being described.

A Codecademy course page.

User profile page on Codecademy.

Codecademy’s website also demonstrates the following components of usability:

Effectiveness

All information presented about the courses offered is accurate and easy to understand. Since the site is selling programming and web design courses, the fact that the website looks nice is a huge selling point for their product and positively increases its overall authenticity. Minimalist design is a great way to advertise their courses.

Efficiency

There are no pop-ups or annoying animations to try and distract you from the actual product. The login page is easy to understand and it takes no time at all to create an account. It takes less than a minute for the majority of users to access their main content – the courses.

Bad Example: USA Today

The homepage of USA Today.

The Travel section of USA Today.

USA Today’s website fails to demonstrate the following principles of accessibility:

Perceivable

There is just too much content squeezed into a tiny amount of space. The navbar headings are too small, if I was on an assistive reading device I still probably wouldn’t be able to read the headings and the “Top Stories” section.

Operable

The arrows on the site of the website are completely unnecessary and negatively impacts the user’s browsing experience. USA Today should stick to one type of news presentation/theme, there’s too much going on and too many articles jammed packed into each section tab. Why are there two different searches (an icon and a search bar)?

A USA Today article.

USA Today's Weather section.

USA Today’s website also fails to demonstrate the following components of usability:

Efficiency

If I wanted to find an article from last week about literally anything, I probably wouldn’t be able to find it using their current site. USA Today is trying really hard to be something they’re not, a social media site instead of a news site. They do not allow their users to quickly access the content they used to be known for – news.

User Satisfaction

When I first look at the site I feel overwhelmed at the sheer mass of content that’s thrown at me. There are way too many colors and conflicting headlines. The arrows on both sides of the webpage take you to different “sections” of the newspaper, why have those arrows when there are section tabs at the top of the navbar?

Redesigning USA Today’s Website

I would redesign their site by basically blowing out all of the “navigation” and “widgets” they currently have in place. A news site should display their news articles in a minimalist and non-intrusive way. Right now, it looks like pop-up ads that just barfed all over the site in multi-colors and bright images. I would almost make their site look like Codecademy’s, with a minimalist design. The main page would have a simple navbar to the different “sections” of their newspaper, and each section page would be one web page listing the title, description, date, and author of the article. Nothing more, nothing less. Images and videos should be kept inside of the article. A user who is looking for news, looks for the text content, not the click-bait images and brightly colored animations. I would also immediately get rid of those horrendous “arrow” navigation buttons on the side of the website. I can’t even imagine how horrible those buttons would be on a tablet web browser.


Jenny Plunkett

Applications Engineer @ Arm