Before usability CS 147: Intro to HCI Dan Maynes-Aminzade After 1 st Usability Review.
UXPG: Usability Review for CanadaHelps.org
-
Upload
matthew-burpee -
Category
Design
-
view
104 -
download
0
description
Transcript of UXPG: Usability Review for CanadaHelps.org
![Page 1: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/1.jpg)
CanadaHelps.org
![Page 2: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/2.jpg)
Group Introduction Testing Methodology & Severity Ranking User Scenarios Other Observations Conclusion
![Page 3: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/3.jpg)
Jamy LiUser
Experience Consultant
Nathalie CrosbieSr. Information
Architect / UX Designer
Matthew BurpeeWeb Consultant
Julian LisingInformation
Architect
![Page 4: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/4.jpg)
Asked five participants to perform common tasks 4 females, 1 male Aged: 20 to 40 No previous experience with CanadaHelps.org Tests were performed in August/September 2009
Usability lab was donated by Klick Communications Webcam – captured user audio/video reactions Morae – captured screen interactions Observer – recorded notes on the fly in another room Moderator – guided the user through the test
![Page 5: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/5.jpg)
High Likely to cause many users to fail a particular task or
permanently lose information. Medium
Likely to cause user frustration and errors but don’t cause irreversible issues.
Low Minor problems that may cause some confusion or loss
of time for users but won’t prevent task continuation.
![Page 6: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/6.jpg)
1. Find CanadaHelps.org2. Select a charity of your choice3. Make a one-time donation4. Make/Cancel a monthly donation5. Update your profile6. Send a charity gift card
![Page 7: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/7.jpg)
User Scenario #1
![Page 8: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/8.jpg)
Issue: Users can’t identify the site from
the search result snippet
Recommendations: Consider changing title,
“CanadaHelps – Donate to any charity in Canada”
Ensure page meta tag/description makes it clear that you can donate to multiple charities.
![Page 9: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/9.jpg)
Issue: The purpose of the site is not clear
to the user.
Recommendations: Make it clear that the site’s
purpose is facilitating donations to any Canadian charity.
![Page 10: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/10.jpg)
User Scenario #2
![Page 11: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/11.jpg)
Issue: Important charity information
shows “N/A”
Recommendations: Ensure that charity details are
present prior to posting the charity online
Do not display headings for unavailable information
![Page 12: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/12.jpg)
Issue: “Search for a Charity” search box
is below the page fold Placement is inconsistent with
homepage
Recommendations: Place search box above the page
fold Maintain placement consistency
across entire site
??
![Page 13: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/13.jpg)
Issue: Some organizations are in upper
case and others lower case Charity Business Number is
irrelevant to the user when searching for a charity
Recommendations: Ensure text formatting is in
sentence case (not all CAPS) Consider removing the Business
Number in the search results Consider adding logos
![Page 14: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/14.jpg)
User Scenario #3
![Page 15: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/15.jpg)
Issue: Users often ignore text-heavy
areas
Recommendations: Minimize needless words
“People scan Web pages, they don't read them.” – Steve Krug
Create a clear visual hierarchy to show importance of content
Break pages up into clearly defined areas
![Page 16: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/16.jpg)
Issue: During the donation process, user
is unclear on: Meaning of “Fund/Designation” What information they are meant to
enter Why the field is displayed if details not
availableRecommendations: Ensure a fund description is
always present Do not display the fund/
designation in cases where a description is not available.
![Page 17: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/17.jpg)
Issue: Credit card billing address does
not auto-populate based on previously entered information
Recommendations: Create functionality to auto-
populate billing address
![Page 18: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/18.jpg)
Issue: Donation seems too high when
making smaller donations.
Recommendations: Make this a percentage of actual
donation or have several amounts for amount ranges.
![Page 19: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/19.jpg)
Issue Button terminology is confusing to
the user. She’s looking to “donate” to the charity and not “checkout” of shopping.
Recommendation Change button to read “Donate”.
![Page 20: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/20.jpg)
User Scenario #4
![Page 21: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/21.jpg)
Issue: Radio button is greyed out, unable
to make a recurring donation.
Recommendations: Don’t display functionality that
user can’t control.
![Page 22: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/22.jpg)
Issue: User doesn’t want to save credit
card number on CH. User can’t modify their monthly
donation after realizing the CC # must be stored on the site.
Recommendations: Inform users immediately that CC
must be saved for monthly donating.
Allow user to modify donation type during checkout process.
![Page 23: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/23.jpg)
Issue: Site does not provide confirmation
when user removes a monthly donation
Recommendations: Prompt the user to confirm if they
wish to proceed with cancellation E.g. 1st option “No”, 2nd “Yes”
After cancelling, show user a detailed confirmation message
Optionally, provide a mechanism to capture feedback for cancelling
![Page 24: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/24.jpg)
Issue: Confirmation page from a monthly
donation transaction displays unrelated information from a previous one-time donation
Recommendations: Include only relevant information
specific to the current transaction Make donation history
information available via ‘view all past donations’ or ‘donation history’ links
![Page 25: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/25.jpg)
Issue: The system allows users to select
the current date as a start date when that is not a valid choice
Recommendations: Prevent the current date AND
previous dates from being selected from the calendar picker “Even better than good error messages
is a careful design which prevents a problem from occurring in the first place” – Jakob Nielsen
![Page 26: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/26.jpg)
Issues: Monthly donation details pages do
not provide sufficient confirmation of the donation start and end dates
Recommendations: Include the start and end dates in
all donation details review pages
![Page 27: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/27.jpg)
Issue: The calendar widget that starts on
Monday is inconsistent with the other calendar which starts on Sunday
Recommendations: Have all calendars start on Sunday Maintain consistency for look and
feel
![Page 28: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/28.jpg)
User Scenario #5
![Page 29: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/29.jpg)
Issue: Users do not understand that “My
Canada Helps” is where they can edit their profile
Recommendations: Use common language such as
“Edit Profile”, “My Account” instead of “MyCanadaHelps”
Display the user’s name once logged in
![Page 30: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/30.jpg)
Issue: Presence of multiple ‘save’
buttons in unexpected locations is confusing
Recommendations: Use only one button and place it
at the bottom of the page
![Page 31: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/31.jpg)
Issue: System does not provide
confirmation when the user updates their address
Recommendations: Have the system display a
confirmation message e.g. “Your changes have been saved”
![Page 32: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/32.jpg)
Issue: Upon logging in, the landing page
appears to be requesting to “Change your password”
Recommendations: Remove “Change your password”
frame from landing page Add as an option under “Change
my Personal Info”
![Page 33: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/33.jpg)
Issue: “Canada” not easy to find in drop-
down list
Recommendations: Keep lists in alphabetical order
![Page 34: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/34.jpg)
Issue: If donating more than once, user
prefers their preferences saved.
Recommendations: Allow the ability to save
preferences for future donations
![Page 35: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/35.jpg)
User Scenario #6
![Page 36: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/36.jpg)
Issue: User is unclear about the gift card
validity and delivery mechanism.
Recommendations: Indicate how gift card is delivered
to recipient. Consider renaming to “electronic
gift card”
![Page 37: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/37.jpg)
![Page 38: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/38.jpg)
Issue: User encounters donation
problem and would prefer to call
Recommendations: Show “…contact us by postal mail,
telephone, or fax” at the top
![Page 39: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/39.jpg)
Issue: Contact Canada Helps page
doesn’t indicate an estimated response time for each option.
Recommendations: Provide an estimated response
time.
![Page 40: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/40.jpg)
Issue: User is unable to find their tax
receipt after completing a recurring donation
Recommendations: Greater visual weight and text
isolation is required
![Page 41: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/41.jpg)
Issue: Trading photo on home page is
visually distracting and confusing
Recommendations: Minimize visual noise Display images that are more on
brand
![Page 42: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/42.jpg)
Top 3 Usability Issues
![Page 43: UXPG: Usability Review for CanadaHelps.org](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c768a64a79596c548b45fc/html5/thumbnails/43.jpg)
1. Provide a clear description of the website’s purpose Ensure page meta tag/description makes it clear that you can
donate to multiple charities2. Ensure ALL charities details are complete
Mission Statement, Description, Fund/Designation3. Provide users with visual feedback
Saving credit card online, profile changes, donation cancellations
Any Questions?