2. a quick intro
a usability review involves examining a website (or mobile app)
to find usability issues, and proposing solutions to such issues.
and
to complete this review, three important elements are identified
and used as a reference: the website goals, the typical users of
the website, and the important tasks the users perform.
and
once the important tasks have been identified, the review starts
from the homepage and covers internal pages. the depth and
scope of the review can be adjusted.
3. what we find
some of the typical usability issues we address relate to:
- functionality and flow
- navigation and information architecture
- language, labeling and consistency
- layout and visual clarity
- mobile usability and touchscreen users
- error handling, forms and feedback
- performance
- calls to action (CTA)
4. how we present the results
usability issues that have been identified are clearly marked on
screenshots taken from the website. for each, a short comment
explains why it is considered an issue, and a solution is
proposed.
and
solutions are based on user-centered design – they are
actionable and aim for tweak rather than complete redesign.
and
where required, a proposed solution is graphically presented.
this is for clarification purposes only, and does not act as a
substitute for graphic design.
5. usability reviews and usability tests
reviews and tests are complementary rather than substitutes.
and
a usability review can uncover many usability issues without
having to test any participant. it can quickly cover different
sections of a website, scenarios and tasks. a usability review
also helps where usability tests can’t solve a particular set of
problems. but...
and
a usability review doesn’t actually tell you how usable a website
is, just how usable it should be. a usability review is subjective
and doesn’t uncover all the issues. and it cannot provide the
critical hard data to support design decisions as usability tests
do.
6. a real life example
the website of an Argentinian voluntary initiative was reviewed
(www.proyectoplatolleno.com.ar). in this presentation, the
scope of the usability review is limited to the website's
homepage (laptop/desktop and English language version).
the website's main goals are:
- to present the work, stature and achievements of the initiative
- to provide useful information
- to involve new volunteers and companies
- to receive donations
- to increase the number of social followers
7. homepage layout
logo and utilities
navigation menu
jumbotron
video
information
call-to-action 1
partners
references
call-to-action 2
8. logo and utilities
existing interface
proposed solution
1 2 3
1. the font size for #lacomidanosetira could be bigger given its importance.
where possible, try to avoid small characters (keep to a minimum of 16px).
2. the social media icons could be bigger, as increasing the number of
followers on social platforms is one of the website's main goals. the
YouTube icon could be updated to the "play" symbol only (see https://
www.youtube.com/yt/brand/using-logo.html). this communicates that the
website is well maintained, and so it increases trust amongst users.
3. a language label should be written in the target language (eg. "English"
and not "Ingles"). the label referring to the language currently used, could be
omitted. it is suggested to locate these labels away from the social media
icons, to visually differentiate their goal/use.
9. navigation menu
existing interface
proposed solution
1 2 3
4
5 6 7
1. "Home" could be omitted and the logo can be used as a
link to the homepage. if possible, it's good to reduce the
number of menu items (it should be around 7 as a maximum).
the English navigation menu is not consistent on all pages/
sections.
2. ideally, dropdown menus should be omitted as they make
navigation difficult for users interacting with a touchscreen
device (it's possible to implement a separate navigation for
touchscreen devices, but it adds complication...). several
subsections (e.g. "Replicate" and "FAQ") that are currently
under "About Us" could be moved under "Become
Involved" (see point 4) - forming a more logical association.
3. the dropdown menu should be omitted and the label could
be retitled "Deliveries Done". the subsections "Register" and
"Volunteers" could be moved under "Become Involved" (see
point 4).
4. "Become Involved" could be added as this is one of the
website's main goals. as mentioned previously, it can also
include several subsections that are currently located under
different areas.
5. "Companies" could be changed to "Partners" to clarify their
relation with this Project.
6. "#lacomidanosetira" could be changed to "Testimonials".
this is an important section to establish the Project's
significance and it is hidden. several important testimonials
should be shown directly on the homepage.
7. "Press" and "Videos" could be combined into "Media".
11. jumbotron
1.this important area should be used to communicate immediately what this
website is about (currently, the user has to scroll "below-the-fold" to watch the
video or to find more information).
the proposed solution consists of a message over an image or graphic. the
message (please consider the one shown only as an option) should be short,
clear and have an impact. the image or graphic should be representative of
the "Proyecto Plato Lleno" initiative (the images currently shown only convey a
part of the initiative).
the slideshow with auto-timing should be avoided. if there is a need to show
more than one image or message in this area, the user should decide when to
change it.
2. this text area contains important and positive information but it appears
disconnected. part of this information could be integrated with the main
message (see above) or could be visually emphasized as shown in the
proposed solution.
12. video
existing interface
1. a short video is a great idea, but this video should explain more about the
initiative. it would be helpful to add a voice-over and to keep the music in the
background. before implementation, the new video could be tested with
people not familiar with the website, to check their level of understanding
(and modified if required).
1
13. information
existing interface
1. there should be consistency in the language used in all the sections. the
information under "Our Project" is very important and should be located in
the jumbotron area. it should also be emphasized.
2. the "question & answer" section appears disconnected in this area of the
homepage, and could instead be included under the "Become Involved"
section.
once the important information is placed on more suitable areas, this entire
section could be omitted and would help the following CTA section stand
out.
1 2
14. call-to-action 1
existing interface
1. it would be beneficial to add a call-to-action (CTA) for the volunteers (e.g.
"Become a volunteer") because this is one of the website's main goals. the
CTAs should also be displayed in English if the website's English version is
selected. the CTAs "Registra tu evento" and "Registra tu comedor" could be
combined into a single, simpler and more general CTA for companies (the
potential partners). this could reduce users doubts and increase the
conversion rate.
1
15. partners
existing interface
1. by reducing the size of the logos, more companies could be shown in this
area. this visual change can increase users trust in the website. for the same
reasons (increased trust, establishing authority), adding testimonials would
have a positive influence. a selection of important testimonials could be
shown in the area above the partners (colaboradores - language consistency
required).
1
16. references & call-to-action 2
existing interface
1. references are good to increase the conviction of the website. in this case,
the images don't provide any link, so it's better to present them as badges
(size should be reduced) and place them in the footer.
2. this is an important CTA for the volunteers. it is likely to be more effective
if increased in size and placed in the area above (as previously indicated).
1
2