LT 2.2 Accessibility in user interface design

LT 2.2 Accessibility in user interface design

Consider the following:

Do you think it is accessible to users with eyesight trouble? Would they be able to read the text comfortably?

What do you think of the labels of the main navigation? Do you think they are understandable and communicate clearly as to where they would lead a user?

Do you think the contrast between the background and text colour is significant enough to be accessible?

Step 1

Do a straw test on the design by limiting your vision. Make your hand into a fist and look at your screen through the small space between your palms and fingers. Did you find it easy to read the information on the page?

Step 2

In your preferred design tool, recreate the website design. Pay close attention to the following:

The text size of written content

The colour usage and contrast. Text and elements should be easy to see and read.

The labels should be understandable. The user should immediately know where they’ll lead them.

(You are welcome to change the look completely or stick to the current look and feel. Here is the Brand Style Guide).

Step 3

When you are done with your design, make your hand into a fist again and look through the small space between your palms and fingers to see if you can clearly read what’s on the page.

No, I do not think this website is suited for people with bad eyesight. Even before the straw test you can tell that the text is hard to read because of the size and the colors. I made the new website as similar to the old one as I could but made a new necessary changes.

  • I changed the header text to a red color, to make it stand out more from the blue background
  • Changed the name of the top right buttons
  • Increased the text size so it is easier to read
  • Kept the color on the «Join Now» button, but change the text to white

I liked the fonts on the old website better but I did not have them installed..

Now the text should be readable for everyone, with and without the straw test.


Legg igjen en kommentar

Fyll inn i feltene under, eller klikk på et ikon for å logge inn:

Du kommenterer med bruk av din konto. Logg ut /  Endre )


Du kommenterer med bruk av din Twitter konto. Logg ut /  Endre )


Du kommenterer med bruk av din Facebook konto. Logg ut /  Endre )

Kobler til %s