our services

usability review

www.leendii.com

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.

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)

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.

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.

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

homepage layout

logo and utilitiesnavigation menu

jumbotron

video

informationcall-to-action 1

partners

referencescall-to-action 2

logo and utilitiesexisting 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.

navigation menuexisting interface

proposed solution

1 2 34

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".

jumbotronexistinginterface

proposed solution

1

2

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.

videoexisting 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

informationexisting 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

call-to-action 1existing 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

partnersexisting 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

references & call-to-action 2existing 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

please visitwww.leendii.com

and get in touch,we are happy to hear from you

a

hello@leendii.com@leendiiUX