UX Designer and Manager. I've worked in UX for years, on teams both large and small — sometimes it's been just me — at companies like Microsoft, Hasbro, and Virgin Pulse. My passion is simplifying complex systems through a holistic strategy, accessible design, and intuitive interactions.My name is Adam Hunter Peck, and I'm a
Want to chat? Message me on LinkedIn
Prevent Errors though Clarity & Constraints
Scenario: Password Creation (Scroll to the Demo)
Creating a password is often a frustrating experience due to unstandardized and unclear requirements, unexpected error states, and the added challenge of masked character entry. Most of these issues can be addressed with the following strategies:
- Clarify requirements before user input. It feels better to be guided than scolded, so make instructions obvious up front rather than revealing them in error messages. And for improved readability, multiple requirements are more digestible as a bulleted list rather than lumped as a sentence.
- Prevent invalid inputs. Passwords and other common form fields can't accept spaces; entering them will generally result in error messages. A better approach is to prevent spaces from being entered in the first place. Here, the code strips out whitespace whenever the input changes, whether it's typed or pasted in.
- Show progress in real time. In this case, the list's bullets double as checkboxes which become checked as each criterion is met. The incremental indicators of progress and positive animations serve as micro moments of success to encourage the user towards completion.
- Allow masked characters to be revealed. Allowing the password to be viewed unmasked is a helpful option for preventing errors and reducing memory burden. The conventional reveal button — often an unlabeled light gray eye icon — might be deducible for sharp-eyed tech-savvy users, but I prefer to err on the side of accessibility with clearly labeled buttons and strong visual contrast. I use a subtle tertiary button style to suggest that this action is optional (versus a stronger primary button for core actions). The clear label is coupled with the familiar eye icon to promote quick visual recognition.
- Highlight errors if an incomplete input is abandoned. Inline errors are helpful as a last resort, but shouldn't be revealed until a user has moved past an incomplete entry. Showing errors too early can be frustrating ("Let me finish!"), and showing errors in mid-progress can be confusing ("Did I already make a mistake?"). Here, an error appears when a user starts creating a password but leaves it incomplete and clicks on anything outside the password section — this way, clicking the Show Password button won't trigger an error because it's part of the password section. The Continue button also blocks progress by revealing an inline error if clicked before all fields are valid.
Create a Password
- at least 8 characters
- an uppercase letter
- a lowercase letter
- a number
Reduce User Effort with Smart Shortcuts
Scenario: Tracking Exercise Length (Scroll to the Demo)
Establishing a daily routine of tracking healthy habits can make it easier to stick to a healthy lifestyle, but it's difficult to maintain a routine if the tracking process feels like a chore. A well-designed tracking experience can feel effortless and delightful by incorporating the following strategies:
- Provide quick shortcuts for common inputs. When compared to the error-prone freedom of text entry fields, clicking a button is often a much easier way to make a choice. Here, a group of buttons with preset values act as shortcuts to common user entries. The design aims to strike a balance between displaying enough common options to be sufficently convenient, and limiting the number so users aren't overwhelmed by choice.
- Accept custom inputs too. While preset buttons offer the easiest experience and most common options, their scope is limited. A custom input field is more inclusive of the wide breadth of human experiences — from a tiny step in physical therapy, to an all-day marathon. Although custom entry takes more effort, being able to track the improvement from 5 minutes to 6 minutes could bring joy and pride to a person's day.
- Celebrate every victory. Every interaction is an opportunity for positive feedback, because tracking anything — even zero — helps maintain the habit. The green success message not only communicates system feedback, but also reinforces the routine and signals approval, aiming to encourage confidence and continued engagement. When the input is updated, the message changes based on comparison to the previous entry — improvement is celebrated, and tracking anything is positively acknowledged.
- Allow entries to be updated. The best interfaces are flexible and forgiving. Whether a user means to correct an accidental input or update their entry after additional exercise, it should be easy to do so.
- Dynamically adjust options based on user behavior. Systems can learn and adapt to user preferences in order to provide more convenient, personalized experiences. In the context of tracking exercise length, this means starting users in a short, achievable range, while allowing those who prefer longer exercise to be moved into a higher bracket. Here, after entering an exercise length of 1 hour or more, the shortcut buttons will shift into a higher range on the next visit — you can reload the page to see this change immediately. Likewise, tracking an exercise length of under an hour shifts the range back down. There's one notable exception: the zero minutes option is always available, since resting days can be part of a healthy exercise routine — so tracking zero doesn't change the range.
How long did you exercise today?
Reduce Browsing Time with Targeted Filters
Scenario: Filtering List Results (Scroll to the Demo)
Browsing vast online inventories can be both time-consuming and overwhelming, potentially leading to choice paralysis. Providing a filter system can help users pare down their options, thus increasing their likelihood of making a selection. A well-designed filter system can make browsing quick and easy with the following strategies:
- Make filters obvious and informative. Filters should be prominent to encourage use, so here they're in a column to the left of the results list, consistent with popular platforms like Amazon and eBay. Each filter category is clearly labeled, and each filter displays its own number of results. Selected filters are visually clarified with a checkbox in the filter list, as well as a filter tag in the sticky results bar. Filter tags serve two purposes: they reinforce which filters are selected in one place since the filter list can be too long to see all at once, and they provide an easy way to remove active filters.
- Provide a clear and consistent responsive experience. As the screen sizes down to a single column, the browsing experience should take precedence, but filtering should still be an obvious option. Here, a large "Filters" button is displayed in the sticky results bar with the number of active filters in parentheses. Clicking this button opens the filter list as a full experience, with a prominent "View X Results" button in a sticky footer providing an obvious way to return to the filtered inventory with a clear indicator of how many results are currently available.
- Design for all possible states and offer detours at dead ends. Consider how many results could appear and the implications of each scenario. One small example is the grammatical difference between one "result" and multiple "results"; this is a small detail, but it helps make a product feel accurate and thus credible. One of the more critical scenarios is the empty state when there are no results, since it can potentially stall a user's momentum. (I like to think about user flows as roads, and I strive to always provide detours so there are no dead ends.) Here, the empty state offers a clear explanation, guidance to try removing some filters (which are easily available as filter tags in the results bar above), and an optional yet prominent button to remove all filters and return to the full list of results.
- Allow user interaction as early as possible. Minimizing loading times is an important yet often overlooked aspect of a user's experience; optimizing for performance should be part of the overall UX strategy. Here, the minimal page data loads first so users can start filtering while the catalog of images continues to load. The images are optimized to balance file size with quality, saving both loading time and server costs.
Browse Adam's Favorite Games
Thank you for reading some of my thoughts on UX design and the positive impact it can have — both on users and business goals.
Interested in talking? Message me on LinkedIn