Web Accessibility Research on Museum Websites

I interned at Guggenheim Museum interactive department in 2017 summer. During the internship period, one of my research topic was alt text and hyperlink best practices on museum websites.

According to Wikipedia, web accessibility refers to “the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities.” When sites are correctly designed, developed and edited, all users are supposed to have equal access to information and functionality.

My research focused on web accessibility for people with low vision. Screen readers help people who have low vision or who are blind to use the technology with the same level of independence and privacy as anyone else. I researched about alt text and hyperlink basics and practices, and how a screen reader works on museum websites accordingly. I made a short video on screen reader testing and presented and discussed with my team members which consists of UX manager, content editor, developers, and designers, to recall empathy toward people who need to depend on voice readers.

Alt text and hyperlink text basics

1. Alternative text

Alternative text, or alt text in short, is a word or a phrase that is inserted as HTML attribute to give textual information of an image.

Example of a hover caption on the left and example of ALT text on an unpublished image on the right

Alt text presents when an image is not completely loaded on a webpage, or when a mouse cursor is hovering over an image. (University of Leicester Web Centre, 2010)

Screen readers read alt text for images on web browsers when alt text is present. For example, screen readers read the image on the left above as “image, a diagram showing the website development process”. In the default setting, screen readers skip images without alt text. Alt text is important and essential in that it delivers right context of images. Although it is empty, alt attribute itself is essential. If an image doesn’t have functions or it is surrounded by content about the image, the alt attribute should be written as “alt =  “.

WebAIM suggests important rules when using ALT text as follows:

  • Be accurate and equivalent in presenting the same content and function as presented by the image. The alternative text should convey the content of the image and the function of the link.
  • Be succinct. This means the correct content and function of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.
  • NOT be redundant or provide the exact same information as text within the context of the image.
  • NOT use the phrases “image of …” or “graphic of …” to describe the image. It’s usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user knows that it is an image that is conveying the content, as opposed to text.

2. Hyperlinks Basics

Website users move another page dynamically via hyperlinks. Hyperlinks are a basic element of HTML, therefore it is essential to give proper and clear information of hypertext links for good web accessibility. Below are some basic rules of hypertext links.

  • Links should make sense out of contexts.
    : Accessibility and Usability at Penn State recommends using “descriptive link text detailing the destination”. For example, “click here” or “read more” out of context do not deliver clear meaning of what to do. Therefore it is important to use unambiguous and intuitive languages, such as “read more about the story A.”
  • Consider users who use the keyboard alone
    : Users should use the tab key and the return/enter key on the keyboard only to navigate and select. In order to be identified as a real link, href attribute should not be empty.
  • Use symbols in correct occasions.
    : For example, ‘>’ is read as “greater than” by screen readers. If symbol ‘>’ is used as an arrow, or a delimiter of two words, those texts are not read in properly.

Voiceover test

I selected and tested Voiceover on the websites, to find out if potential users find information they want correctly.

1. Target website

  • Guggenheim Museum
  • Seattle Art Museum
  • Brooklyn Museum
  • Museum of Fines Arts, Houston

2. Interface

  • MacOS Sierra, Chrome browser (59.0.3071.115), VoiceOver version 7.0

3. Scenario

  • Eddie is going to visit a museum tomorrow. He wants to find the museum hour using search function.

4. Note

  • For the testing, I used only keyboard to move around the website.

 

Wrapping up…

 

Alt text and hyperlink text are only a few basic practices for web accessibility. Writing correct codes is just one step toward relieving difficulties for people who have low vision. As shown in the Voiceover testing video, screen readers only work properly when a lot of depending elements work correctly – OS, software version, types of voice readers, correctly-designed websites, etc. Web design plays a great role too. Poor layout requires more unnecessary actions for screen reader users. Using proper context that makes sense to all users is also necessary. For example, a museum in the video uses ‘Plan your visit’ for the information including hours and directions. Regular users are able to understand that the page is about the museum information since they can skim through the website in a few seconds. However, for users with low visions may not understand at first what the page is for. They may expect another function within the website, such as purchasing or booking museum tickets. As you may have seen, it took a few minutes to get to the ‘hours’ information on the website.

This activity was a great opportunity for me and the team to develop empathy and to gain a deeper appreciation and understanding of people’s emotional and physical needs.

Reference

https://en.wikipedia.org/wiki/Web_accessibility

https://webaim.org/techniques/alttext/

https://www2.le.ac.uk/webcentre/plone/build/basics/add-images/alt-text

 

Design Tool Review: Adobe XD

Adobe XD
Adobe Experience Design (XD) is a UX design software, a part of Adobe Creative Cloud. It supports vector design and wireframing, and creating simple interactive click-through prototypes. XD was first released in early 2016. It has since received feedback and feature requests from beta users through its official channel.

This semester I have worked on my independent study project mostly using Adobe XD only. Like many other UX students and designers, I usually use a Sketch + Invision combination for interactive prototyping. The most inconvenient part of the combination is that I cannot design and test interactivity between multiple screens simultaneously. – I need to export screens into png files and load in Invision. Although Sketch supports Invision plug-ins, the plug-ins keep crashing with my laptop. Therefore I decided to use Adobe XD this time to see if XD fits me better.

 

Good to know about Adobe XD

  1. Design and Prototype
    : Xd has two modes: Design and Prototype. In Design mode, you can create various designs on artboards as you do with Sketch. When you click Prototype mode, you can wire the screens and preview the prototype. You don’t need an additional prototyping tool.
  2. Recording and Sharing
    : Once you complete prototyping, you can test your prototype using “preview” feature. You can also record the screen simply by clicking the record button, and save it to a video file.This video shows simple prototyping process in Adobe XD.
  3. Usertesting
    : User testing with Adobe XD prototypes is as simple as with other prototyping tools. You can upload your prototype into Adobe Cloud by clicking “share online” button, then an shareable link is created. If you design a mobile prototype, you can also open it on your mobile browsers. For my project, I created a shareable link and upload it on usertesting.com for remote user tests. Adobe XD has a mobile application too. Once you save your design in Adobe Cloud, you can open your mobile prototypes on your Adobe XD mobile app too.
  4. Similarity with Illustrator 
    : Although XD is not fully compatible with other Adobe applications, XD’s designing tool is similar to Illustrator – XD’s designing tool is a (a lot) simplified one of Illustrator, in terms of “designing”. Shortcut commands are similar with Illustrator too. But if you do not have experience in Illustrator, you need to spend some time to be familiar with it. For example, if you want to draw a triangle in XD, you need to make a rectangle first, and remove one corner to make a triangle. This might be good or bad, since in Sketch, you can simply select a triangle object from the tool.

 

But still has some disadvantages too.

  1. Lack of templates 
    :XD templates are not as various as Sketch. However, you can download basic material design and iOS UI kits. (You can download material design UI kit from here.)
  2. Of course, expensive.
    : If you already subscribe Adobe CC, Adobe XD is included. If you do not, you need to pay $19.99/month for students and $49.99 for professionals for the Adobe CC package.
  3. Compared to Invision, interactions are still limited.
    : Invision provides many features that help the screens look like real interactive applications or websites. Adobe XD only supports wiring. There are some transition options (push up and down, dissolve, etc.), but XD basically moves the whole screen to the next stage. For example, some objects like status bar or floating buttons do not need to move whenever users scroll up and down the screens. Compared to Inivision, XD still needs to have more sophisticated prototyping features.
  4. You can prototype screens only designed in XD.
    : In Invision, you create hotspots to select to make the spots clickable. Unlike Invision, you need to choose an object to connect to the next screen.

    You need to choose an object to make an action. Unlike Invision, Adobe XD does not allow to create hotspots in arbitrary points.

 

Despite some disadvantages, XD is getting powerful for interactive prototyping and presentation. Most of all, XD is more stable than Sketch. I personally use more XD than Sketch not only due to the prototyping feature, but also its stability. Also Adobe XD software is updated very frequently, so hopefully, some essential features will be included in a near future.

Tips

  • When you search for any tips and tutorials on the internet, see resources dated after 2017. Adobe XD was released beta version in 2016, and it drastically updated features early 2017.
  • Since Adobe XD is relatively a newcomer, resources are somewhat limited. Adobe has released various tutorials on its website. These are so far the best and most up-to-date resources.

 

User Onboarding Strategy for Mobile Devices

(image: https://www.chargify.com/blog/13-tips-to-improve-user-onboarding-from-saas-leaders/)

User onboarding is a sequence of processes to help users get familiar with the product and to have users continue to use it. Onboarding is a term from human resources for new hires, but recently also used for developers to refer to taking on and orienting a new customer. According to the Andrew Chen’s research for Android apps, “the average app loses 77% of its DAUs (Daily Active Users) within the first 3 days after install, 90% within the 30 days.” To make as many users remain as possible, the app should guide how to use the app effectively, and make the users come back. In other words, effective onboarding strategy is important to engage users during those first interactions.

Which cases will user onboarding be useful

Although the goal of every application is the same – retain users and make them effectively use the app – not every mobile app needs to have onboarding process. Onboarding process might not be required if the usage is straightforward. For example, Google Maps does not have to walk through how to use the app unless they launch unfamiliar features. According to an article, onboarding strategy is useful in case the app

  • Contains non-standard interactions
  • Has a fairly complex workflow or handles complex tasks (e.g. a complex business app, which has a variety of user roles, each with specific access rights and restrictions).
  • Requires users to populate it with data because its default state is empty.
  • Has undergone a major redesign and you want to introduce existing users to new features and changes.
  • Introduces a brand new concept itself. The concept might be unfamiliar to users.

(source: https://www.shopify.com/partners/blog/mobile-app-onboarding)


What will be good user onboarding strategies?

  • “Show less, provide more”: Avoid long / redundant upfront tutorial
    : Almost every app provides swipe-through onboarding steps at the first installation. But if there are too many swipe-through screens, users are reluctant to look through all the screens in detail or do not concentrate on the content on the screens. Users might lose interests even before they start using the app. In addition, some apps show semitransparent screens to indicate the locations of new features but users will not remember all those new feature when they really use the features.
  • Make Onboarding Contextual
    : ” New users don’t sign up for your product because they are excited about learning how your UI works. They signed up because they were interested in the value that you promised to deliver. ” (source: https://uxplanet.org/best-practices-for-onboarding-92f3a9f0b21a)
    Contextual onboarding provides helpful guidelines at the point of action. For example, Snapchat provides onboarding screens for its first time users only, such as “Tap to take a photo”, “Hold to take a video”, “Tab on your face to use Lenses” as users walk through the app. By clicking those popups, users can opt out and will not see them next time, since the app considers that this user is already used to the app.
  • Maximize Empty States
    : If an app’s default state is an empty and requires users to fill out something, the empty state is a right starting point to provide onboarding, which also can be a learning opportunity for users. To utilize the empty state, the app provides some sample data that users later can remove, or give textual guidelines. For example, the image on the left presents “Add a post and being loved” to encourage users post themselves. The image on the right lacks onboarding and the empty space does nothing.

       

(image: https://www.smashingmagazine.com/2017/02/user-onboarding-empty-states-mobile-apps/)

Onboarding Teardowns Examples 

Here are two examples that I think have interesting onboarding process.

1.Navdy 

Navdy is a portable head-up display (HUD). By connecting it to your smartphone via Bluetooth, Navdy displays calls, text, music, and alerts. To utilize Navdy with your smartphone after purchasing a Navdy, you need to download the Navdy app. Navdy app doesn’t play a standalone role, so at the onboarding stage it introduces you how you install and use it very specifically.

The current version of the Navdy app has total 20 onboarding screens – looks pretty a lot. First 5 of them demonstrate values of the system, and the rest of them are step by step how-to-install guidelines. What is unique about Navdy is its head up display. On the onboarding screens, Navy app shows how the device looks like in a car to emphasize the app usage.

2. MealPal

MealPal(formerly MealPass) is a monthly meal subscription services. Users can sign up and use the app via its mobile app as well as desktop browser. Although MealPal has its own / uncommon system to buy everyday meal, it does not clearly suggest how the system works. Here are 4 essential steps to use MealPal.

  • Buy a monthly plan (MealPal offers 2 options for lunch and dinner respectively.)
  • Subscribers can order lunch between 5 pm on the day before the lunch and 9:30 am next day. For dinner, the order opens 5pm on the day before the dinner and closes at 3pm on the same day with the dinner. To order, subscribers use the app or the website.
  • Subscribers can choose one of participating restaurants.
  • On the day, subscribers visit and pick up at the restaurant.

Unfortunately, although the process is not that straightforward, current version of MealPal app doesn’t demonstrate how the subscription works. It leads users to put their credit card numbers right after sign up. Who can gives credit card information without knowing what to do next? What if there is no right lunch spot around my office but I already signed up for a month?

 

More about user onboarding

  • The user onboarding academy (https://www.appcues.com/user-onboarding-academy)
    : Appcues is a service that helps customers implement personalized user onboarding process. The website also presents onboarding basics, best practice, resources, etc.
  • Useronboard.com (https://www.useronboard.com/)
    : onboarding teardowns for popular apps and websites

 

Reference

  • https://www.linkedin.com/pulse/losing-80-mobile-users-normal-why-best-apps-do-better-andrew-chen/
  • https://www.shopify.com/partners/blog/mobile-app-onboarding
  • https://blinkux.com/blog/up-running-3-tips-for-an-awesome-onboarding-ux/
  • https://uxplanet.org/best-practices-for-onboarding-92f3a9f0b21a
  • https://www.smashingmagazine.com/2017/02/user-onboarding-empty-states-mobile-apps/

 

IoT device and UX designer: Importance of understanding hardware for UX designers

 

internet_of_things

Image from https://en.wikipedia.org/wiki/Internet_of_things

 

In 2016 IoT(Internet of Things) is not an unfamiliar term: Amazon Echo TV commercial airs on prime time. You can find Nest Protect (smoke alarm) easily at an end aisle of Home Depot. Even if there will be some challenges for IoT to be more mature, as smartphones prevailed our lives in a flash, IoT devices will do.  

In the era of IoT, UX designers will work less on 2D screens. UX designers should focus on not only what is happening on two-dimensional planes, but also hardware and the system itself. In UX Magazine, Claire Rowland, independent product design and UX research/strategy consultant for the Internet of Things (IoT), said, “Designing for the Internet of Things (IoT) raises all the challenges of cross-platform design, and more. 
An obvious difference is the much wider variety of device form factors, many without screens.” Kelly Franznick, founder and chief experience officer at Blink UX in Seattle said, “They(UX designers) need to up their game so they’re as familiar with designing systems that aren’t screen-based.” He mentioned that UX designers may deal with physical models instead of computer-based prototypes, and also emphasized that UX designers will be familiar with tools like Arduino, an open-source a hardware/software package that allows users to build physical devices. In other words, so far UX designers have engaged in user experiences in mobile screen or web pages, but in IoT devices, understanding hardware is essential.

Oftentimes in IoT, the hardware is the user experience. The sensors, processors, and communication modules inside the device determine its purpose and how the user will interact with it. If a device fails to have the right sensors, no amount of pretty design or software will save it. (Alex Brisbourne, 2015) Unlike mobile devices or websites, display area is very limited or sometimes omitted in IoT devices. It’s like each hardware component represents what icons and typography play roles in conventional digital devices.  

Unlike mobile phones or internet websites, IoT devices should consider user experience design at the beginning of the development process. For example, the 2nd generation Amazon Echo Dot has no screen at all. (See image below) It consists or four physical buttons, led lights, microphones, speakers, and USB and headset port. User experience of Echo Dot is determined solely from its hardware. Not many years ago ‘accessories’ of computers or mobile devices tend to depend on engineers or industrial designers. However, what we considered as ‘accessories’ equip with connectivity and is regarded as stand-alone devices, which contain complex functions in one device.

Amazon 2nd generation echo dot does not have display on the device.

 

Since smartphones and personal computer interfaces are pretty ripened, recently many user experience design tend to focus on better experiences on the devices. However, concepts of UX design can be reinterpreted in IoT devices. User experience design is not limited to software, but it’s time for UX designers to enhance hardware user experiences.

Reference

https://uxmag.com/articles/whats-different-about-user-experience-design-for-the-internet-of-things

http://insights.dice.com/2015/10/08/the-internet-of-things-will-change-ux-design/

https://www.sitepoint.com/unique-ux-challenges-internet-of-things/

http://iotlist.co/

Design Critique: MLB.com At Bat Android Application

Home

MLB.com At Bat is the official app of Major League Baseball. It delivers real time game information and MLB related stats by text, images, and video clips to users of the mobile app. Even though this app deals with a large amount of data, it is amazingly well organized. Despite its many advantages, At Bat has some UX flaws which need be improved.

1) No player search options

Problem: At Bat contains information of the all players on the roster but it takes a couple of steps to search players. Suppose that users want to search for stats of Carlos Beltran of the Texas Rangers. Currently users first select the team -> scroll down to roster -> select the player manually from the alphabetical ordered list. If users are not aware that he was recently traded from the New York Yankees to the Texas Rangers, they may never find the information they need from this app. From Norman’s viewpoint, there’s no proper interface to use the knowledge in the World. At Bat contains a lot of valuable data but it is unintentionally hard for users to access those data.

Picture1

Recommendation: For better discoverability, add a search icon on top of the home screen to afford accessing the data, as a cue in the design.

Picture2

 

2) No access to team information from the scoreboard

Problem: On the scoreboard screen, when users click a game, it leads to the detail of the game. But when users click the team’s icon or team’s name from the screen, there’s no feedback for the action. If users want to move to the team’s information, there will be a couple of redundant steps to choose a team. When the user clicks the menu icon on the top left, the side menu only shows top 3 favorite teams. In fact, At Bat allows users to choose as many favorite teams as possible but side bar only shows 3 teams. For example, if I want to see information about the New York Yankees (which is not set as my favorite team), I first need to choose one of the teams on the left side menu, a team that is not relevant to Yankees, and then select the Yankees from the drop down menu. There’s a big gulf of evaluation to get to the team information from the scoreboard.

Picture3

Recommendation: To help bridge the Gulf of evaluation, the app needs proper feedback from either scrolling down side menu to view more teams or clicking each team’s icon on the screen. To implement them, 1) make a team list as an independent scroll-down menu so that users can see the all teams on the left side menu.  2) add link on the teams’ icons.

Picture4

 

3) Hard to select & unselect favorite teams

Problem: Setting favorite teams is a key function of this application since this is the default setting of the home screen selection. However, selecting and unselecting favorite teams from the scroll-down team list is not implemented in the app. Long-press, which is basic to Android users to find additional functions, seems to work as seen in the picture below (it changes color to gray as users press it for a while) but there is no feedback from the action. This suggests a bad conceptual model since the long press function in fact does not do anything as users may expect. It’s an example of a bad signifier as well. According to the At Bat FAQ, this is only done in the setting menu, which is located in the bottom of the side menu.

Picture5

Recommendation: As users use long press on each team’s name, show ‘select’ and ‘unselect’ options on the list. Android users may be familiar with the long-press function intuitively by repetitive experience.

Picture7