SlideShare una empresa de Scribd logo
1 de 17
Descargar para leer sin conexión
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 utilities
navigation menu
jumbotron
video
information
call-to-action 1
partners
references
call-to-action 2
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.
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".
jumbotron
existing
interface
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.
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
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
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
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
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
please visit
www.leendii.com
and get in touch,
we are happy to hear from you
a
hello@leendii.com
@leendiiUX

Más contenido relacionado

La actualidad más candente

Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceGo for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceMagic Software
 
Facebook Timeline for Brands -- Getting Your Page Ready for March 30th and Be...
Facebook Timeline for Brands -- Getting Your Page Ready for March 30th and Be...Facebook Timeline for Brands -- Getting Your Page Ready for March 30th and Be...
Facebook Timeline for Brands -- Getting Your Page Ready for March 30th and Be...David Jones
 
Melinda poss online ux portfolio
Melinda poss online ux portfolioMelinda poss online ux portfolio
Melinda poss online ux portfolioMelinda Poss
 
RI Facebook Brand Page Updates
RI Facebook Brand Page UpdatesRI Facebook Brand Page Updates
RI Facebook Brand Page UpdatesResource/Ammirati
 
2013 ion responsive_design_landingpages
2013 ion responsive_design_landingpages2013 ion responsive_design_landingpages
2013 ion responsive_design_landingpagesChafik YAHOU
 
Facebook Timeline for Brands
Facebook Timeline for BrandsFacebook Timeline for Brands
Facebook Timeline for BrandsRed Urban
 
How To Get Started With HubSpot Bots
How To Get Started With HubSpot BotsHow To Get Started With HubSpot Bots
How To Get Started With HubSpot BotsNoisy Little Monkey
 

La actualidad más candente (12)

Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceGo for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
 
Facebook Timeline for Brands -- Getting Your Page Ready for March 30th and Be...
Facebook Timeline for Brands -- Getting Your Page Ready for March 30th and Be...Facebook Timeline for Brands -- Getting Your Page Ready for March 30th and Be...
Facebook Timeline for Brands -- Getting Your Page Ready for March 30th and Be...
 
Melinda poss online ux portfolio
Melinda poss online ux portfolioMelinda poss online ux portfolio
Melinda poss online ux portfolio
 
RI Facebook Brand Page Updates
RI Facebook Brand Page UpdatesRI Facebook Brand Page Updates
RI Facebook Brand Page Updates
 
Email Design Lookbook 2014
Email Design Lookbook 2014Email Design Lookbook 2014
Email Design Lookbook 2014
 
2013 ion responsive_design_landingpages
2013 ion responsive_design_landingpages2013 ion responsive_design_landingpages
2013 ion responsive_design_landingpages
 
DJNF 2015 Mobile Presentation
DJNF 2015 Mobile PresentationDJNF 2015 Mobile Presentation
DJNF 2015 Mobile Presentation
 
P5 Ontarget
P5 OntargetP5 Ontarget
P5 Ontarget
 
Yesmail Email Design Lookbook 2015
Yesmail Email Design Lookbook 2015Yesmail Email Design Lookbook 2015
Yesmail Email Design Lookbook 2015
 
Website User Experience Analysis
Website User Experience AnalysisWebsite User Experience Analysis
Website User Experience Analysis
 
Facebook Timeline for Brands
Facebook Timeline for BrandsFacebook Timeline for Brands
Facebook Timeline for Brands
 
How To Get Started With HubSpot Bots
How To Get Started With HubSpot BotsHow To Get Started With HubSpot Bots
How To Get Started With HubSpot Bots
 

Destacado

Pp 5 no jacket required
Pp 5 no jacket requiredPp 5 no jacket required
Pp 5 no jacket requiredRachael Ogden
 
1º A Cor Blog
1º A Cor Blog1º A Cor Blog
1º A Cor Blogabynoa
 
Артем Маркушев — HTML и CSS по кирпичикам. Детали.
Артем Маркушев — HTML и CSS по кирпичикам. Детали.Артем Маркушев — HTML и CSS по кирпичикам. Детали.
Артем Маркушев — HTML и CSS по кирпичикам. Детали.DataArt
 
HUGE WORKING Web 2.0 Site Creation list
HUGE WORKING Web 2.0 Site Creation listHUGE WORKING Web 2.0 Site Creation list
HUGE WORKING Web 2.0 Site Creation listthefandango
 
QIA2016-Collaboration-KonradRzadzinski
QIA2016-Collaboration-KonradRzadzinskiQIA2016-Collaboration-KonradRzadzinski
QIA2016-Collaboration-KonradRzadzinskiKonrad Rzadzinski
 
Textual fundamentos da pisocopedagogia
Textual fundamentos da pisocopedagogiaTextual fundamentos da pisocopedagogia
Textual fundamentos da pisocopedagogiaTânia Sarmento
 
«Особенности разработки 2D игры в Unity на примере проекта “Маша и Медведь”»....
«Особенности разработки 2D игры в Unity на примере проекта “Маша и Медведь”»....«Особенности разработки 2D игры в Unity на примере проекта “Маша и Медведь”»....
«Особенности разработки 2D игры в Unity на примере проекта “Маша и Медведь”»....DataArt
 
Assessment of target audience in medical writing
Assessment of target audience in medical writingAssessment of target audience in medical writing
Assessment of target audience in medical writingAnurag Raghuvanshi
 
Ejercicios de orden de información lineal 2º
Ejercicios de orden de información lineal   2ºEjercicios de orden de información lineal   2º
Ejercicios de orden de información lineal 2ºbrisagaela29
 
20 Cloud Computing Quotes You Can't Miss
20 Cloud Computing Quotes You Can't Miss20 Cloud Computing Quotes You Can't Miss
20 Cloud Computing Quotes You Can't MissNerdio
 

Destacado (18)

Pp 5 no jacket required
Pp 5 no jacket requiredPp 5 no jacket required
Pp 5 no jacket required
 
ACTIVITAT2
ACTIVITAT2ACTIVITAT2
ACTIVITAT2
 
Transfermation
TransfermationTransfermation
Transfermation
 
CEPT Cert_2
CEPT Cert_2CEPT Cert_2
CEPT Cert_2
 
1º A Cor Blog
1º A Cor Blog1º A Cor Blog
1º A Cor Blog
 
Артем Маркушев — HTML и CSS по кирпичикам. Детали.
Артем Маркушев — HTML и CSS по кирпичикам. Детали.Артем Маркушев — HTML и CSS по кирпичикам. Детали.
Артем Маркушев — HTML и CSS по кирпичикам. Детали.
 
HUGE WORKING Web 2.0 Site Creation list
HUGE WORKING Web 2.0 Site Creation listHUGE WORKING Web 2.0 Site Creation list
HUGE WORKING Web 2.0 Site Creation list
 
FICHERITO1
FICHERITO1FICHERITO1
FICHERITO1
 
QIA2016-Collaboration-KonradRzadzinski
QIA2016-Collaboration-KonradRzadzinskiQIA2016-Collaboration-KonradRzadzinski
QIA2016-Collaboration-KonradRzadzinski
 
Tema 4
Tema 4Tema 4
Tema 4
 
Textual fundamentos da pisocopedagogia
Textual fundamentos da pisocopedagogiaTextual fundamentos da pisocopedagogia
Textual fundamentos da pisocopedagogia
 
«Особенности разработки 2D игры в Unity на примере проекта “Маша и Медведь”»....
«Особенности разработки 2D игры в Unity на примере проекта “Маша и Медведь”»....«Особенности разработки 2D игры в Unity на примере проекта “Маша и Медведь”»....
«Особенности разработки 2D игры в Unity на примере проекта “Маша и Медведь”»....
 
Assessment of target audience in medical writing
Assessment of target audience in medical writingAssessment of target audience in medical writing
Assessment of target audience in medical writing
 
Composition4
Composition4Composition4
Composition4
 
Ejercicios de orden de información lineal 2º
Ejercicios de orden de información lineal   2ºEjercicios de orden de información lineal   2º
Ejercicios de orden de información lineal 2º
 
Ubiquitous Computing
Ubiquitous ComputingUbiquitous Computing
Ubiquitous Computing
 
20 Cloud Computing Quotes You Can't Miss
20 Cloud Computing Quotes You Can't Miss20 Cloud Computing Quotes You Can't Miss
20 Cloud Computing Quotes You Can't Miss
 
Ana Bugeiro
Ana BugeiroAna Bugeiro
Ana Bugeiro
 

Similar a usability review

Design proposal final
Design proposal finalDesign proposal final
Design proposal finalvirtzZz
 
Global Scope Final Report
Global Scope Final ReportGlobal Scope Final Report
Global Scope Final ReportKamil Mustaffa
 
The 'Client' Template - Illustrated!
The 'Client' Template - Illustrated!The 'Client' Template - Illustrated!
The 'Client' Template - Illustrated!Randy Carey
 
Design submission template
Design submission templateDesign submission template
Design submission templatekrudee
 
Assignment Sheet Project 1 Usability Project.docx
Assignment Sheet Project 1 Usability  Project.docxAssignment Sheet Project 1 Usability  Project.docx
Assignment Sheet Project 1 Usability Project.docxrock73
 
corePHP Usability Accessibility by Steven Pignataro
corePHP Usability Accessibility by Steven PignatarocorePHP Usability Accessibility by Steven Pignataro
corePHP Usability Accessibility by Steven PignataroJohn Coonen
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designDMI
 
Top 7 Ways To Improve Teams And SharePoint Navigation In Your Digital Workplace
Top 7 Ways To Improve Teams And SharePoint Navigation In Your Digital WorkplaceTop 7 Ways To Improve Teams And SharePoint Navigation In Your Digital Workplace
Top 7 Ways To Improve Teams And SharePoint Navigation In Your Digital WorkplaceRichard Harbridge
 
I. Intended audience A. American grandparentsB. Other Americ.docx
I. Intended audience A. American grandparentsB.   Other Americ.docxI. Intended audience A. American grandparentsB.   Other Americ.docx
I. Intended audience A. American grandparentsB. Other Americ.docxwilcockiris
 
Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014MoodLabs
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAAiman Hud
 
Web Usability Site Design
Web Usability   Site DesignWeb Usability   Site Design
Web Usability Site DesignOvidiu Von M
 
Mobile app ux_principles
Mobile app ux_principlesMobile app ux_principles
Mobile app ux_principlessolomon kitumba
 
Mobile App UX Principles: Improving User Experience and Optimising Conversion
Mobile App UX Principles: Improving User Experience and Optimising ConversionMobile App UX Principles: Improving User Experience and Optimising Conversion
Mobile App UX Principles: Improving User Experience and Optimising ConversionMatthieu Tran-Van
 
Top UX Deliverables : What will I make as a UX Designer?
Top UX Deliverables : What will I make as a UX Designer?Top UX Deliverables : What will I make as a UX Designer?
Top UX Deliverables : What will I make as a UX Designer?nariyaravi
 

Similar a usability review (20)

WebBestPractices3
WebBestPractices3WebBestPractices3
WebBestPractices3
 
Design proposal final
Design proposal finalDesign proposal final
Design proposal final
 
Global Scope Final Report
Global Scope Final ReportGlobal Scope Final Report
Global Scope Final Report
 
The 'Client' Template - Illustrated!
The 'Client' Template - Illustrated!The 'Client' Template - Illustrated!
The 'Client' Template - Illustrated!
 
Design submission template
Design submission templateDesign submission template
Design submission template
 
Assignment Sheet Project 1 Usability Project.docx
Assignment Sheet Project 1 Usability  Project.docxAssignment Sheet Project 1 Usability  Project.docx
Assignment Sheet Project 1 Usability Project.docx
 
corePHP Usability Accessibility by Steven Pignataro
corePHP Usability Accessibility by Steven PignatarocorePHP Usability Accessibility by Steven Pignataro
corePHP Usability Accessibility by Steven Pignataro
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through design
 
DOC
DOCDOC
DOC
 
Top 7 Ways To Improve Teams And SharePoint Navigation In Your Digital Workplace
Top 7 Ways To Improve Teams And SharePoint Navigation In Your Digital WorkplaceTop 7 Ways To Improve Teams And SharePoint Navigation In Your Digital Workplace
Top 7 Ways To Improve Teams And SharePoint Navigation In Your Digital Workplace
 
Moodle report
Moodle reportMoodle report
Moodle report
 
I. Intended audience A. American grandparentsB. Other Americ.docx
I. Intended audience A. American grandparentsB.   Other Americ.docxI. Intended audience A. American grandparentsB.   Other Americ.docx
I. Intended audience A. American grandparentsB. Other Americ.docx
 
Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
Web Usability Site Design
Web Usability   Site DesignWeb Usability   Site Design
Web Usability Site Design
 
Mobile app ux_principles
Mobile app ux_principlesMobile app ux_principles
Mobile app ux_principles
 
Mobile App UX Principles: Improving User Experience and Optimising Conversion
Mobile App UX Principles: Improving User Experience and Optimising ConversionMobile App UX Principles: Improving User Experience and Optimising Conversion
Mobile App UX Principles: Improving User Experience and Optimising Conversion
 
Mobile app ux_principles
Mobile app ux_principlesMobile app ux_principles
Mobile app ux_principles
 
UI Design Trends
UI Design TrendsUI Design Trends
UI Design Trends
 
Top UX Deliverables : What will I make as a UX Designer?
Top UX Deliverables : What will I make as a UX Designer?Top UX Deliverables : What will I make as a UX Designer?
Top UX Deliverables : What will I make as a UX Designer?
 

Más de Mauro Pellegrini

European Union Budget - Revenue and Expenditure Details
European Union Budget - Revenue and Expenditure DetailsEuropean Union Budget - Revenue and Expenditure Details
European Union Budget - Revenue and Expenditure DetailsMauro Pellegrini
 
The size of the European Union Budget
The size of the European Union BudgetThe size of the European Union Budget
The size of the European Union BudgetMauro Pellegrini
 
improve ux with interface iterative design -part 2
improve ux with interface iterative design -part 2improve ux with interface iterative design -part 2
improve ux with interface iterative design -part 2Mauro Pellegrini
 
improve ux with interface iterative design - part 1
improve ux with interface iterative design - part 1improve ux with interface iterative design - part 1
improve ux with interface iterative design - part 1Mauro Pellegrini
 
responsive web design and user experience
responsive web design and user experienceresponsive web design and user experience
responsive web design and user experienceMauro Pellegrini
 
tips for a good website navigation interface
tips for a good website navigation interfacetips for a good website navigation interface
tips for a good website navigation interfaceMauro Pellegrini
 
tips for a good website structure
tips for a good website structuretips for a good website structure
tips for a good website structureMauro Pellegrini
 

Más de Mauro Pellegrini (8)

European Union Budget - Revenue and Expenditure Details
European Union Budget - Revenue and Expenditure DetailsEuropean Union Budget - Revenue and Expenditure Details
European Union Budget - Revenue and Expenditure Details
 
The size of the European Union Budget
The size of the European Union BudgetThe size of the European Union Budget
The size of the European Union Budget
 
first click test
first click testfirst click test
first click test
 
improve ux with interface iterative design -part 2
improve ux with interface iterative design -part 2improve ux with interface iterative design -part 2
improve ux with interface iterative design -part 2
 
improve ux with interface iterative design - part 1
improve ux with interface iterative design - part 1improve ux with interface iterative design - part 1
improve ux with interface iterative design - part 1
 
responsive web design and user experience
responsive web design and user experienceresponsive web design and user experience
responsive web design and user experience
 
tips for a good website navigation interface
tips for a good website navigation interfacetips for a good website navigation interface
tips for a good website navigation interface
 
tips for a good website structure
tips for a good website structuretips for a good website structure
tips for a good website structure
 

Último

PHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationPHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationLinaWolf1
 
Packaging the Monolith - PHP Tek 2024 (Breaking it down one bite at a time)
Packaging the Monolith - PHP Tek 2024 (Breaking it down one bite at a time)Packaging the Monolith - PHP Tek 2024 (Breaking it down one bite at a time)
Packaging the Monolith - PHP Tek 2024 (Breaking it down one bite at a time)Dana Luther
 
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作ys8omjxb
 
Call Girls Service Adil Nagar 7001305949 Need escorts Service Pooja Vip
Call Girls Service Adil Nagar 7001305949 Need escorts Service Pooja VipCall Girls Service Adil Nagar 7001305949 Need escorts Service Pooja Vip
Call Girls Service Adil Nagar 7001305949 Need escorts Service Pooja VipCall Girls Lucknow
 
Contact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New DelhiContact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New Delhimiss dipika
 
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)Christopher H Felton
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxDyna Gilbert
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书zdzoqco
 
Blepharitis inflammation of eyelid symptoms cause everything included along w...
Blepharitis inflammation of eyelid symptoms cause everything included along w...Blepharitis inflammation of eyelid symptoms cause everything included along w...
Blepharitis inflammation of eyelid symptoms cause everything included along w...Excelmac1
 
Call Girls in Uttam Nagar Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Uttam Nagar Delhi 💯Call Us 🔝8264348440🔝Call Girls in Uttam Nagar Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Uttam Nagar Delhi 💯Call Us 🔝8264348440🔝soniya singh
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa494f574xmv
 
Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Sonam Pathan
 
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一Fs
 
Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Paul Calvano
 
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012Call Girls South Delhi Delhi reach out to us at ☎ 9711199012
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012rehmti665
 
Magic exist by Marta Loveguard - presentation.pptx
Magic exist by Marta Loveguard - presentation.pptxMagic exist by Marta Loveguard - presentation.pptx
Magic exist by Marta Loveguard - presentation.pptxMartaLoveguard
 
Git and Github workshop GDSC MLRITM
Git and Github  workshop GDSC MLRITMGit and Github  workshop GDSC MLRITM
Git and Github workshop GDSC MLRITMgdsc13
 

Último (20)

PHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationPHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 Documentation
 
Packaging the Monolith - PHP Tek 2024 (Breaking it down one bite at a time)
Packaging the Monolith - PHP Tek 2024 (Breaking it down one bite at a time)Packaging the Monolith - PHP Tek 2024 (Breaking it down one bite at a time)
Packaging the Monolith - PHP Tek 2024 (Breaking it down one bite at a time)
 
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
 
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Serviceyoung call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
 
Call Girls Service Adil Nagar 7001305949 Need escorts Service Pooja Vip
Call Girls Service Adil Nagar 7001305949 Need escorts Service Pooja VipCall Girls Service Adil Nagar 7001305949 Need escorts Service Pooja Vip
Call Girls Service Adil Nagar 7001305949 Need escorts Service Pooja Vip
 
Hot Sexy call girls in Rk Puram 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in  Rk Puram 🔝 9953056974 🔝 Delhi escort ServiceHot Sexy call girls in  Rk Puram 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Rk Puram 🔝 9953056974 🔝 Delhi escort Service
 
Contact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New DelhiContact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New Delhi
 
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptx
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
 
Blepharitis inflammation of eyelid symptoms cause everything included along w...
Blepharitis inflammation of eyelid symptoms cause everything included along w...Blepharitis inflammation of eyelid symptoms cause everything included along w...
Blepharitis inflammation of eyelid symptoms cause everything included along w...
 
Model Call Girl in Jamuna Vihar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in  Jamuna Vihar Delhi reach out to us at 🔝9953056974🔝Model Call Girl in  Jamuna Vihar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Jamuna Vihar Delhi reach out to us at 🔝9953056974🔝
 
Call Girls in Uttam Nagar Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Uttam Nagar Delhi 💯Call Us 🔝8264348440🔝Call Girls in Uttam Nagar Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Uttam Nagar Delhi 💯Call Us 🔝8264348440🔝
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa
 
Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170
 
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
 
Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24
 
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012Call Girls South Delhi Delhi reach out to us at ☎ 9711199012
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012
 
Magic exist by Marta Loveguard - presentation.pptx
Magic exist by Marta Loveguard - presentation.pptxMagic exist by Marta Loveguard - presentation.pptx
Magic exist by Marta Loveguard - presentation.pptx
 
Git and Github workshop GDSC MLRITM
Git and Github  workshop GDSC MLRITMGit and Github  workshop GDSC MLRITM
Git and Github workshop GDSC MLRITM
 

usability review

  • 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
  • 17. please visit www.leendii.com and get in touch, we are happy to hear from you a hello@leendii.com @leendiiUX