In March, Twitter enabled users of its mobile apps the option to add a text description (alt text) when tweeting images. Last week, the Twitter A11y Team announced this functionality is available to users of its desktop website too.
To enable this feature, go to the Profile > Settings > Accessibility screen using the desktop version of twitter.com. Check the box for “Compose image descriptions,” then click the ‘Save Changes’ button.
You’re all set! The next time you insert an image into a tweet, you’ll have the option to compose a description, which will be added as alt text for screen readers.
Click the ‘Add description’ option at the bottom of the attached image.
Type a useful image description into the form field and click ‘Apply.’
Here’s the image description as alt tag in the HTML.
<img data-aria-label-part="" src="https://pbs.twimg.com/media/CjzeFsQVEAAOQyk.jpg" alt="close up of a tabby cat's face" style="width: 100%; top: -84px;">
If an image is not given a text description, an empty alt attribute is used instead.
The Austin-based Alamo Drafthouse movie theater chain has moved to assigned seating and the ability to reserve tickets through online ordering. I went through this process for the first time over the weekend and ran into several usability problems.
1) Field types are not marked
Screenshot of the Alamo Drafthouse online ticket form
This one is so basic. I’ve done enough online ordering that I assumed the payment fields are all required, but that’s not a given for every user.
In the “Email Confirmation” section it’s unclear that an email address is required for making a purchase. It looks like an optional choice as I have no reason to believe I won’t get access to my tickets immediately after paying, but failing to enter a valid email address in two different fields results in an error after submitting the form.
Recent e-commerce research suggests that marking all fields, required or optional, improves the customer experience.
2) Poor error messaging
There is no immediate feedback when a user enters invalid data. I typed in my credit card number incorrectly and only after trying to complete the purchase did an error message display. However, the error was located at the top of the form, out of sight, as I sat there frustrated and wondering what was taking so long.
Screenshot of form error message
Eventually I scrolled up the page and saw the error message, but it didn’t indicate which field was in error by either putting the error in context of the field or by making the text of the error specific to the data issue.
After entering a valid credit card number, I tried submitting the form without entering anything into the other fields as a test. This took me to a new page, devoid of any branding information for the site, displaying a laundry list of what I did wrong.
Screenshot of the error message page
Taking a user to a page like this immediately throws up a red flag. Am I still on the right site? What’s going on? Did my credit card number just get stolen?
If an entered value contains an error, ideally do inline validation or at least display that error message in-context of the form, next to the field with the error.
Further testing showed that if the form is submitted with a valid credit card number but invalid security code, expiration date, zip code, etc., the form returns a blank page with a “card declined” error message and no way to return to the form and fix the issues. The transaction is simply cancelled without even a link back to the page where the transaction started.
Hitting the back button provides yet another frustrating error and no way to continue with a purchase.
3) Confusing payment button
The way the form submission button functions also contributed to failure. It reads “Complete Purchase” before clicking it, but after clicking it, it changes to “Completing…”
Screenshot of form buttons
Because I had entered an invalid credit card number, my purchase wasn’t completing at all, but I sat there waiting… This button should probably be a “Review Order” button that completes all field validation. Then, the user can “Complete Purchase” from a verification screen.
4) No way to continue after timeout
If you take longer than five minutes to complete your purchase, it times out and you see another useless error message.
I don’t know who or how they decided to set the timer at five minutes, but I timed out because of the credit card number error message issues. Maybe they did some usability testing and five minutes is enough for most users, but for those of us who timeout, this experience should be friendly and helpful.
The goal is to sell tickets, yet this message gives the impression that the Alamo Drafthouse doesn’t care if you had trouble with the process of online ticket buying, or about helping you try again.
At the bare minimum, this message needs to be smart enough to display the theater, movie and show time you were trying to purchase tickets for and provide a link back to the start of the purchase process.
5) Optional checkbox already checked
The last section titled “Alamo Victory” takes up about 25% of the page real estate with a boring marketing blurb and an almost hidden pre-checked option for ‘Join Alamo Victory’. My favorite part is the disclaimer after it:
By checking “Join Alamo Victory” you agree to the Alamo Drafthouse Cinema’s terms & conditions and privacy policy.
Oh really? Cuz I didn’t check that box, Alamo Drafthouse checked it for me. This is the same annoying tactic of pre-checking a “sign up for our spam emails” box on other purchases. Just don’t. Always allow me to decide if I want to join extra programs.
Design Recommendations
The online ticket purchase process needs a lot of help. I think Alamo Drafthouse decision makers would be surprised how much customers struggle with this website site if they would sit and watch some usability testing.
Mark all fields as either required or optional
Do inline form field validation/improve error messages
Change the “Complete Purchase” button to “Review Order” so that all field inputs are validated first
Provide users a way to retry a transaction that times out
I’ve had a Fitbit Zip for almost three years and I use the iOS app to sync the data from it. This app lets you track exercise that wasn’t captured in full by the step counter. I use this to add info about weight training and aerobics at the gym.
The active minutes, steps, and distance often do not add up when I add one of these exercises manually. The other day, I took a moderate 1 mile walk but forgot to start the tracking feature in the app. After my walk, this is what my activity looked like.
Fitbit activity before logging exercise
My stats showed
5,319 steps
2.26 miles
24 active minutes
After I added in my walk manually, the stats updated in an unexpected way.
Fitbit activity after adding a walk
My stats changed to
5,796 steps
2.45 miles
0 active minutes
What? I can’t figure out what Fitbit is trying to do when I log exercise manually. The distance and steps shouldn’t change when those are precisely what the tracker tracks. My active minutes dropping to 0 is what I find most perplexing. How would adding exercise ever reduce active minutes?
By way of comparison, here are my stats from yesterday before and after manually logging 50 minutes of aerobics.
Fitbit comparison when logging aerobics
Here we see the number of calories burned dropped by 102 while active minutes increased by 10. Again, what? I wasn’t able to find any information from Fitbit about how its software calculates these numbers but I think it’s safe to say, something doesn’t add up.
