Project: Video with Subtitles

This week my goal is to get familiar with some of the techniques and processes for making media files more accessible. I experimented with limited media files, but this has me thinking of how I can apply these techniques in future web development.

Below is the video I added subtitles to:

Here is the original video I transcribed (with link).

Technical challenges:

I found it was difficult to understand some of the words the chef was saying. (Like the name of the person who asked the question via Facebook, so I omitted it). I also was unsure if I should add all of the “Umms” and “So’s”, etc.

When I watched the video to check for errors, I found it hard to go back and edit a video once it was published without deleting all of my previous work.

I really enjoyed this project, mostly because I feel like I am helping someone learn! It is motivating to think I might be helping someone who might not otherwise use or understand the video. I really like subtitles and often use them when watching a show with heavy British, Irish or Scottish accents.

Were the tools provided by YouTube adequate?

I like the YouTube tools- EXCEPT for the fact I could not figure out how to go back and edit once I caught mistakes. Overall, I am pretty satisfied with the results, and I now have an urge to go through videos in my spare time to fix/ add subtitles.

Disability Icon Set

Project: Evaluating Accessibility

1. Summary

This report describes the conformance of the www.woodwarddrilling.net Web site with W3C’s Web Content Accessibility Guidelines (WCAG) 1.0. The review process is described in Section 5 below and is based on the W3C’s Conformance Evaluation method as described in Evaluating Web Sites for Accessibility.

Based on this evaluation, the  www.woodwarddrilling.net  web site  is close to meeting WCAG 1.0, Conformance Level Double A. Feedback on this evaluation is welcome.

2. Background about Evaluation

Conformance evaluation of web accessibility requires a combination of semi-automated evaluation tools and manual evaluation by an experienced reviewer. The evaluation results in this report are based on evaluation conducted on the following date:  July 24, 2014. The Web site may have changed since that time. Additional information on the evaluation process is available in Evaluating Web Sites for Accessibility.

3. Web Site Reviewed

http://www.woodwarddrilling.net

Purpose of site:  Attract new customers in the state of California who need Environmental Drilling, Geotechnical Drilling, Industrial Water Well Drilling. Website provides information about various types of drilling services offered . It is also contains a job application form. Website’s natural language is English.

4. Review Process
5. Results and Recommended Actions.

Priority 1: Provide a text equivalent for every non-text element 

  • Result: Website has 51 images that are missing alt text.
  • Action: Include alt text in images:  example: img src =”link-to-image.jpg” alt=”George Washington”. The alt text should be meaningful in the context of the web page.

Priority 2: Ensure that all information conveyed with color is also available without color, for example from context or markup.

  • Result: 14 text elements should have a reasonable contrast ratio.
  • Action: Make link text darker to meet the guidelines, which is very helpful in making a fast change. Use high contrasting background and text color,preferably light background with dark text.

drilling-homepage

Section 508 of the 1988 Amendments to the Rehabilitation Act, which specifies accessibility standards for information technology (like Web sites) that must be met by any vendor that wants to do business with the U.S. government.

6. Resources

Woodward Drilling’s website has a few high priority issues to fix to improve its accessibility, but most seem like pretty easy fixes and nothing too large or widespread.  Even with current technology and standards, it’s possible to make any site more accessible to people with disabilities without a lot of effort. Developers can start by focusing on a few things that will have the most impact. I have selected two things that can be fixed right away : updating their ALT tags and TITLE attributes would take them most of the way there.  As a vendor who might be doing business with the U.S. Government, accessibility  is a requirement and should be a top priority for this website.

Project: Mobile Usability Test


DOMAIN:
 
Seattle Area Feline Rescue (http://www.seattleareafelinerescue.org/) mobile website

SITE PURPOSE:  Find homeless, neglected and abused cats permanent, stable homes. Provides information about the rescue, how to adopt a cat, how to volunteer, and how to donate.

METHODOLOGY: The three participating testers were briefed individually on what the test was about, and were told that this was a test of the website, not them. None of the testers had ever been on the site before. They were allowed to take a few minutes to look at the site before beginning the three tasks.  They were encouraged to vocalize all of their thoughts, since this would help me (the tester) understand their thought process as they navigated through the site. The time the test took ranged from 5 to 15 minutes.

REASON FOR TEST: For this week’s assignment I recorded three volunteers as they tested the Seattle Area Feline Rescue mobile site. I read a script detailing basic instructions and asked questions to learn more about each individual’s mobile internet use.  I tested two users on my computer using the “inspect element” feature, selecting the device that most closely resembles what they use.  For the third participant, I tested the user on her personal mobile phone while recording with my phone.

Based on my personal online usability research for non-profits, I found that animal shelters and their customers have the following goals for their websites. 

  1. Adopt an animal
  2. Make an online donation
  3. Register to volunteer
  4. Sign up for newsletter
  5. Reach out for assistance
  6. Download a resource

I asked the participants to complete three tasks:

  1. From the home page, can you find out which cats are available for adoption?
  2. From the home page, can you figure out where the Volunteer Form is?
  3. From the home page, can you figure out how to donate via Amazon Smile ?

None of the participants had any trouble determining that this was Seattle Area Feline Rescue and that this rescue specialized in cats.  One tester was a cat owner, the other two didn’t have/ not interested in cats.

Mobile Usability Summary:

Keep relevant content front and center: The organization has a mobile version of their site. For all 3 tasks, mobile users were forced to scroll across and down taking significant steps ( about 5 clicks) to eventually find what they’re looking for. They thought the site was easy to use, although somewhat “clunky” on the mobile device. The important things were buried under paragraphs of copy and slow-loading images, which is valuable real-estate on a mobile device.

Suggestion 1: Make it easy to access the key pages of mobile site by placing them prominently near the top and center of your page. According to case studies  , responsive design with well-placed buttons doubles giving on mobile devices.

mobile-example The example on the right makes it easy to Join/Donate.

Suggestion 2: Your copy must be short and sweet. Online visitors don’t read, they skim. And mobile users skim even more. Reduce the amount of text you have on each page and break up longer blocks of text with headings. Use an easy-to-read font size and type. Choose shorter sentences and clear calls to action over long paragraphs.

For anonymity, I will not share the participants names, but they answered the above questions in the following way:

User 1: On the internet “all the time”. Mobile about 50%.

Device tested: Samsung Galaxy S4 via inspect element on Macbook Pro

Network: Regular 4G

Task 1: User 1 inspired me to add task “Find available cats”

Task 2: Initially expected to find the volunteer form in the “Volunteer” drop down menu. Had to scroll to the bottom of the page and look around a bit, but found in in about 2 minutes.

Task 3: From the homepage, was torn between  the “Donate” link and the “More” link. Clicked on donate, took a few minutes to scroll, but found the link to Amazon Smile program at the bottom of the page hidden in text.  The rescue also has an Amazon “Wish List” that donors can buy directly for the rescue.

User 2: On the internet 2-3 hours/day. Mobile ONLY.

Device tested: LG Optimus L70 via inspect element on Macbook Pro

Network: Regular 4G

Task 1: Found available cats right away. The cats listings were often duplicated, to some missing pictures, or multiple cats (like 5) per profile. Overwhelmed by selection.

Task 2: Clicked on the volunteer drop-down. Had to scroll quite a bit to find the volunteer form .

Task 3: From the homepage, like user 1, was torn between  the “Donate” link and the “More” link. Clicked on donate, took a few minutes to scroll, but found the link to Amazon Smile.

User 3: On the internet 10-12 hours/day. Mobile 95%.

Device tested: Samsung Galaxy Note

Network: Regular 4G

Task 1: Found cats after a few minutes. Had to scroll – thought she might be able to adopt the cat that was in the cover photo.

Task 2: Clicked on the volunteer drop-down. Found volunteer form very fast (30 seconds).

Task 3: From the homepage, like user 1 & 2, was torn between  the “Donate” link and the “More” link. Clicked on donate, took a few minutes to scroll. Was expecting to find the Amazon logo. First found the rescue’s Amazon Wishlist . After a few more minutes of scrolling, found the Amazon Smile link. Note: thought the donation page looked a bit amateur and disorganized. Felt it could be more prominently displayed.

Project: Usability Test

Date of Test:  July 11, 2015

Location of Test:  Seattle, WA

Prepared for: Leafly.com

Prepared by: Kimberly Woodward

 Summary

When choosing users, we were looking for Seattle residents who had little to no knowledge about Leafly.com. Our 3 users included 2 users who use Cannibas ( 1 recreational user and 1 medical card holder) and 1 who does not use Cannibas (since one of our tasks required finding a store). Both groups of users were assigned common tasks like finding a store and less-common tasks like signing up for a newsletter.

I started qualitative analysis by watching User Testing videos and taking note of interesting moments. While analyzing the user tests, several interaction patterns started to surface. To summarize, I learned that the Search bar was one of the most mandatory features and that it was very easy to use— if users knew specific search criteria (such as the location of a business). Some of the other features weren’t as intuitive, though, as you’ll discover in the discussion below.

Methodology

Who we tested

Three participants, evaluated Leafly.com. 

NOTE:  I met with each participant about 15-20 minutes each. I briefed them on the site and had them complete 2 specific tasks: 

  • Sign up for the Leafly.com newsletter.
  • Find a recreational shop in Seattle, WA.

What data we collected

NOTE: Every person was able to complete each task within 2-5 minutes.

Major findings and recommendations

  • Users confused by the “Dispensaries/Collectives” tabs.

Solution– Only one user knew what “ Dispensaries/Collectives” meant  and this is because she had a medical card. Possible solution is to change the tab to “Medical Dispensary “.  If someone is looking on the site for someone else or doesn’t have a medical card, this is industry jargon that is unfamiliar to the layperson/non-user.

DISPENSARY- Marijuana Finder Seattle,WA - L_ - https___www.leafly.com_finder_seattle-wa#_list

  • Every tester thought the business sign-in was the newsletter sign up

Solution– Since this is site is a leading resource for information, it is important that existing/potential customers know how to sign up for information.

leafly-Marijuana Dispensary

  • People found the site very beautiful, but somewhat cluttered and confusing:

“The site feels busy, like they are trying to cram too much information on one page.”

“The site is a bit cluttered…a lot of it is very useful but it can feel overwhelming the first time you use it.”

  • The Search bar was still the preferred backup option

Solution– Our test also showed that people relied on the search bar when things weren’t clear.  One of the biggest takeaways was that the Search bar was used as a fallback…for example, instead of clicking through categories. It’s great that Leafly had this available at the top of the page in prominent location.

Project: Usable Design Analysis

Wayward Vegan Cafe homepage
Wayward Vegan Cafe homepage

Domain:  http://waywardvegancafe.com/

Purpose of Site: Wayward Vegan Cafe is a vegan/vegetarian restaurant in Seattle.  The purpose of the website is for customers to find location and hours, view menu, and utilize a delivery service.

* It is also crucial that customers know as of  January 2015 the cafe has relocated to a beautiful new space in the Ravenna neighborhood. 

Tasks Analyzed:


Guideline: Don’t make me think! Present all major options on the homepage.

Comments: Users should not be required to click down to the second or third level to discover the full breadth of options on a Web site. Be selective about what is placed on the homepage, and make sure the options and links presented there are the most important ones on the site. Wayward does a great job of limiting the homepage to simple options. They also make the operating hours and location clear at the top of the page.  However, I When I first opened the page, I thought there was something wrong with my computer or Javascript had been disabled since the homepage looked uneven and clunky. The map at the bottom of the page is large in relation to the rest of the homepage content.

Recommendations: Move the navigation bar located at the top or left of page to make it easier for users to know where they are on the site. The lack of organization and attention to details on the site makes it difficult for me to believe this is a competent business.


Guideline: Do not create or direct users into pages that have no navigational options. Always have the homepage, a “way out”, or search bar easily available.

Comments: When creating links that open new browser windows, ensure that the ‘Back’ button is still available, and that the new window is setup to return the user to the original browser window. Disabling navigation is confusing and frustrating to users, and can negatively impact user satisfaction and task completion. Always make the homepage available.

menu-waywardvegancafe.com_menu.html


Guideline: Ensure that all clickable images are either labeled or readily understood by typical users.

Comments: Occasional or infrequent users may not use an image enough to understand or remember its meaning. Ensure that images and their associated text are close together so that users can integrate and effectively use them together. Additionally, alt text should accompany every clickable image.

Below, a local meal delivery service featured some of the menu items beautifully. When the user hovers over the image, it is easy to add to shopping cart. – https://www.trycaviar.com/seattle/wayward-vegan-cafe-56.

Caviar's interpretation of the cafe.
Caviar’s interpretation of the cafe with high resolution pictures of the food.

Good Example: The addition of labels is essential for a user to understand the clickable image links

Good example of labeling images.
Good example of labeling images.

Mobile first:

Comments: Attaching a mobile example. Many people search  for places to eat on mobile phones. It is important to have a responsive design with the menu and contact information easily available. Users shouldn’t have to guess which website they are on.

mobile-example
mobile-example
wayward-mobile
Wayward -mobile capture