ux Archives - Rachele DiTullio

5 neurodivergent UX fails while buying Alamo Drafthouse tickets online

Rachele DiTullio4 August 20224 August 2022Mobile, Websiteaccessibility, forms, neurodivergent, ux

I went to the movies this week for the first time since the pandemic began. I looked up showings at the Alamo Drafthouse and discovered little has improved with their payment process since I reviewed it on desktop back in 2016. This time, I completed the purchase on an iPhone using the responsive mobile website in the Firefox browser.

While I found several accessibility issues with the site, I’m highlighting concerns with the “Payment” screen. I’m neurodivergent and this post focuses on five things that cause me anxiety and make the experience frustrating:

Required fields are not marked
Submit button is disabled
Error messages don’t offer suggestions
Data formats are placeholder text
Optional checkbox is already checked

Required fields are not marked

I’ve done enough online ordering that I assumed that all the credit card-related fields are required, but many people will not understand that. E-commerce research suggests that marking all fields, required or optional, improves the customer experience. It certainly lessens my anxiety to know exactly which fields to complete.

screenshot of the payment screen with form fields with placeholder text for Card Number, Cardholder Name, EXP, CVV and Zip code. The "Buy Tickets" button is disabled.

Not only are required fields not clearly marked, but merely interacting with a field causes the display of an angry, red “Required” message. (This does not work for the “EXP” field even though it is required.) These input fields use a combination of the HTML required attribute with an aria-describedby attribute for the error message which causes assistive technology to announce fields are required multiple times.

screenshot of the payment screen with red error messages denoting several fields are required

Submit button is disabled

From the previous screenshots, we can see the next issue that causes me a lot of anxiety when using a website. The “Buy Tickets” button, which is the submit button for the form, is disabled by default. The button becomes enabled only after data has been entered into all the required form fields, which are not clearly marked.

There are two more required form fields below the credit card fields but they are easy to miss because of the sticky footer with the “Buy Tickets” button, meaning that after entering all credit card details, this button is still disabled.

Error messages don’t offer suggestions

The default error message for empty fields is “Required”. If a user enters data in the wrong format, the error messages change to “Invalid”. This doesn’t help the user in any way to figure out how to fix the error.

screenshot of the payment screen with bad data entered into several fields which each have an error message of invalid.

Here are some examples of helpful error messages:

Card Number: Please enter 16 digits
EXP: Please enter 2-digit year
CVV: Please enter 3 digits
Zip Code: Please enter 5-digit US zip code

“Zip Code” is the only field requesting numerical data that displays the numerical keyboard on mobile devices. Adding the inputmode="numeric" attribute to every field requesting numerical data will display the numerical keyboard too, which improves the accuracy of data entered into these fields.

Screenshot of the payment screen with focus in the Zip Code field which displays the 10-key numerical keyboard on mobile devices

Data formats are placeholder text

The requested data format for all the “Payment” screen fields are implemented as placeholder text. This means that once a person starts to enter data into the field, the required formatting of that data disappears. People are forced to recall from memory how to enter the data correctly. On top of this, the “EXP” and “CVV” fields allow someone to enter more digits than the data format allows.

The video below demonstrates what a person using assistive technology, like a screen reader, experiences when exploring the form. Notice how placeholder data are not consistently announced by VoiceOver.

Optional checkbox is already checked

Following the credit card-related fields is the “Email Confirmation” section which includes a checkbox that is already checked:

Join Alamo Victory
By checking “Join Alamo Victory” you start earning visits with this purchase for rewards and you agree to Alamo Drafthouse Cinema’s terms of use.

Email confirmation section with email address and confirm email address fields followed by a checkbox that is already checked for Join Alamo Victory

This is an optional field. It should require that I choose to check it. Because of its location behind the sticky footer, it’s very likely people will not see this checkbox and inadvertently join this program. Having to look for sneaky UI patterns like this makes for a bad experience.

Conclusion

This website has made some improvements like providing a “Back” button after timeout and inline form field validation. I also give the developers kudos for appropriately implementing the autocomplete attribute on the credit card-related fields. I’d make the following changes to the “Payment” screen to create a better experience for neurodivergent people:

Clearly indicate which form fields are required
Don’t disable the submit button
Offer suggestions for fixing data input errors
Display required data formats at all times
Don’t pre-check checkboxes for optional promotions

Home Depot – A study in UX failure

Rachele DiTullio12 October 20181 February 2021In Real Lifeux

I have a guest post today from my partner who works at the Pro-Desk at Home Depot helping contractors with large orders. Management decided to redesign the work space without getting feedback first. Enjoy!

This is the redesigned Pro-Checkout area of Home Depot with four Pro registers: two facing south and two facing north; drinks & snacks in between.

Primary customers: Contractors

with large orders; and
large pieces of lumber

Problem 1: Register bottlenecks

This aisle is wide enough for one associate with a client, plus one typical lumber/flat-top cart, which are extra wide, yet there are two registers per aisle creating a bottleneck that prevents clients from getting around someone already checking out at the front register to an available associate at the back register.

When clients finish at the front register, they are unable to move past a working client at the back register, forcing them to push the line of waiting customers back so they can exit in reverse.

This creates a further bottleneck at the output of all four registers where carts pile up and get in the way when clients have multiple carts of goods.

Problem 2: Bagging

Bags are located on the far side of the desk, away from where they are needed while checking out a customer, forcing an associate to look away from the client instead of engaging.

Problem 3: Lack of space

Our primary clients have large carts of long pieces of merchandise and the narrow aisles don’t leave enough room for turning the corner resulting in items getting bumped or ran into along with client frustration.

Example: A customer has 20 pieces of 12’ drywall, 4’ wide; or 16’ long dimensional lumber. The back end will hit the drinks and snacks or the person manning the back register, plus the front end may likely hit the wall or desk.

To circumvent this associates have started having customers leave large carts in the main aisle, blocking throughput, so they can scan things there. There is potential loss of product since the associate cannot keep a close eye on the terminal to ensure all items are scanned properly. Additionally this blocks waiting customers from progressing to the next available associate because of carts in the main aisle.

Problem 4: Small drink fridges

One of our biggest sellers is PowerAid which does not fit in the narrow slots for soda or the RedBull slots on the other side.

Problem 5: Light switch placement

Each lighted checkout sign has two sides that can illuminate independently. Instead of putting a switch on each side, both switches are on one side with no label. Which one turns on what light?

Problem 6: Desk height

The desktops sit at 2 feet 9.5 inches high, which works fine if you’re sitting in a chair. However, Pro-Desk associates stand all day making this setup less than ideal. This height creates back fatigue or severely bent wrists when using the terminal.

We devised some inventive solutions, like trying to raise the keyboard and mouse level up to a comfortable position, which management promptly nixed.

The monitor post is too short, making it impossible to raise the monitor to eye level.

Problem 7: Dead space

Lots of unused space that should have drink machines or something in it. Space is at a premium, use it efficiently!

Problem 8: Coffee

Our “luxurious” coffee bar is 10 times worse than it was and has gotten comments from customers already.

Problem 9: Mouse pads

Whoever made these has apparently never used a mouse and needs to be fired.

Grad School Statement of Intent

Rachele DiTullio23 August 201812 July 2021Op EdIA, ux

Hello readers! Today I came across my grad school statement of intent that I had to submit with my application to the UT iSchool in 2008. I updated it in 2012 when I added it as part of my academic portfolio.

screenshot of the home page of my academic portfolio website from grad school

In my cube at work, I have a very prominent sign with a motto by web designer Mark Wyner that reads

Visual-design integrity for people with modern devices and browsers, and information integrity for everyone else.

As a web developer, I think what lies underneath the presentation layer is the most important part of any web page. While visual design is necessary and increases usability for many users of information, it cannot and should not supersede a solid informational foundation. I am a strong proponent of Web standards, semantic markup, and accessibility for all and I believe that studying and learning at the School of Information has allowed me to better understand the ideals of data organization for which I already have a passion, ultimately making me a better web creator.

I thrive on organization, naming conventions, and process, all of which have helped me in my career as a web developer. I have been very interested in learning about structuring data to make it optimally usable by both humans and machines, independent of the delivery method. I want to go beyond the page level, beyond markup, and begin to classify knowledge and make it accessible to all. I want to create information hierarchies that are easily understood so that the data can be found and used anywhere it is needed. My interests have revolved particularly around information architecture and increasing accessibility for deaf users. Whenever possible, I have chosen to pursue research assignments that have furthered my knowledge in these areas.

Until recently, I struggled to put a name to this area of study that I see as crucial for me to become the kind of professional I want to be. When I learned that programs existed for information architecture, I felt as if I had finally found my “tribe.” For me, specializing in information architecture is all about consolidating the wide breadth of knowledge I have around web development into a single path. I am enjoying the beginnings of my journey down that path and focusing my learning on the organization of data, usability of that data, and hope to eventually help form standards and best practices for the field. Much of my coursework has provided a solid foundation in this field and allowed me to get closer to finding my niche in user interface design and the user’s experience with information retrieval.

Through my graduate studies, I have gained an improved understanding of how users interact with information as well as the systems storing that data and the programs allowing users access to it. Another area that interests me is human factors and thus far in my career, I have had few chances to talk with users to measure their success (or frustration) with websites. Eager to learn more about the human factors aspect when designing and developing systems, I took a course on usability. It gave me a chance to design and conduct my own usability study, allowing me to observe firsthand how people approach using a website. Through these observations, I was able to make well-informed suggestions for improvement based on empirical research, not just my gut feelings about how a site should be designed.

During my career, I have made huge, personal strides towards creating more usable websites. In early 2007 I read Jeffrey Zeldman’s book Designing with Web Standards and it changed my outlook on the building of websites, opening my eyes to a new way of looking at information access. It was the first tangible explanation I had seen for structuring the data of web pages separate from the presentation layer. His work introduced me to the pure CSS coding method and taught me the concept of “semantic markup” which informs my work today. His book also led me to start studying accessibility practices and striving to make information available to all visitors, regardless of browser, device, or disability. I believe earning a Master of Science in Information Studies (MSIS) will allow me to deepen this knowledge and understanding about what makes for good design, and that will benefit many people.

Using the tools I have acquired from studying information architecture at UT Austin, I want to move beyond being a “code-monkey,” plain and simple. I want to be at the genesis of projects, helping large organizations, such as government or academic institutions, determine the best courses of action for managing their data and creating user-friendly interfaces for retrieval of that data. I want to influence how organizations structure and maintain their information as well as influence the interface through usability testing and interviews. I want to get beyond just being the one who implements designs to being someone who helps create and define those designs with the user in mind.

I view the completion of my MSIS degree as a great beginning, one that will provided the tools and foundation that will truly create a jumping off point for me and my career. I not only learned how to organize information in more intuitive ways or how to better help users interact with information; I also gained new concepts and insights as a web professional. I know I have a lot to offer and I believe this degree will open amazing doors for me, providing the knowledge to create great designs that are usable, accessible, and have a solid base in information architecture.