The web interface components in this article are not new, but the implication they can have on a product, organization, or service is very real. This article is meant to discuss five really simple components that make a big impact on process efficiency. The goals and suggested best practices of each component are communicated below.
Search Dropdown Combo Box
Let’s start with one of the most common UI components, the dropdown. While it seems really straightforward, click-to-open then click-on-selection, it poses several usability questions. How many entries are too many? What if it’s 100 entries? 1000? If it’s alphabetical, how do I get to Z quicker? Use case-identification is an incredibly important part of building the right scalable solution. The search dropdown combo box is the ultimate access element. ‘Click-to see-all options’ or ‘type-to dynamically keyword filter your list’ (e.g. Gmail search bar).
- Primary goals of this component:
- Find a specific item or value from a list of options.
- Minimize arbitrary scrolling.
- Best practices:
- Pick the right starting point. Even if you’re in pediatrics, there is no need to start the Year-field at “1900”. Why make them work for common answers?
- Provide flexible search and discovery options (categories, filters, etc.). Outlook does this very well. When you search for an item it offers suggested filters (“to:”, “from:”, etc)
- Make keyboard arrow functions intuitive to navigate and select items from the list. That should go without saying, but UX experts know designers tend to over look the details occasionally.
Data grid
Providing a list-view of data is one of the most common design patterns for providing large amounts of data with visually differentiating rows and columns. While this is a very simple request, considering a specific healthcare provider, clinician, or physician could yield several different and conflicting needs for this data grid.
- Primary goals of this component:
- Maximize the number of items that can be reviewed at once.
- Allow users to visually differentiate the status, attributes, or available actions of a large number of items at once.
- Quickly identify the specific items that are relevant to me.
- Best practices:
- Columns should be sortable (Ascending and Descending).
- When possible, allow users to re-arrange columns in a preferred order as well as quick expand (to max width) and collapse (to min width).
- Avoid pagination like the plague. No one wants arbitrary clicks just to have a beautiful, small data grid.
- Alternate background of every entry (usually rows) to allow users to visually differentiate each item.
- Optimize spacing between columns so users don’t have a break in reading each item. Don’t add horizontal scrolling if you don’t have to, but minimize vertical scrolling as much as possible.
- Use icons to eliminate simple words, where applicable (e.g. alerts, errors, status, etc) but don’t use icons if they don’t help differentiate items.
- Consider bulk action layouts such as check boxes, ‘select all’, and ‘de-select all’ if your users have a need to flag, hide, delete, or launch multiple items.
Filters
Much like eCommerce, filtering out what is not important to the user is critical to task performance. With regards to healthcare, this could mean optimizing patient care by minimizing repetitive tasks and optimizing provider workflows. Ideally, the system would provide certain levels of personalization to automate for specific user workflow configurations, but that can be quite code intensive. Using best practices for implementing filters will ensure content relevance improves ease-of-use.
- Primary goals of this component:
- Hide items that are not relevant to the user’s needs
- Bring relevant items to the forefront.
- Quickly apply, remove, save, and reset filters.
- Best practices:
- Ensure filters are activated/deactivated from the same location.
- Create a button with a filter label for quick recognition.
- Where needed, provide more sort-by attributes to allow users customize how information is being presented.
- Provide visual indicators pertaining to active filters that can be easily disabled or reset.
- Allow for saving-filters to avoid repetitive selection of preferred-filters.
Alerts
NO!!!!
YES!!!!
Error handling is a critical component of user experience. How often have you attempted to login to a site and seen an error message that says, “Your username or password is incorrect.” Well, which is it? It is a very simple matter of attention to detail that creates user frustration. By focusing on a perception, cognition, action (PCA) approach, alerts can be extremely valuable to communication, task speed, and work efficiency. Particularly in healthcare, failing to provide PCA analysis can lead to increased user related risk, leading to patient misdiagnosis or worse.
- Primary goals of the component:
- Display a clearly visible alert.
- Provide messages within the spatial context of the error location.
- Ensure language in the message communicates the reason for the error as well as the expected action needed to correct the error.
- Best practices:
- Don’t rely on only color to show errors. To accommodate for users with color visibility issues, make sure a message contains a visual indicator as well (e.g. “þ Username” “ý Please check your password and try again.”)
- Maintain consistency. Color scales (Yellow = caution, Orange = action needed, Red = critical alert) and specific icons can provide quick cognition of the alert status. Consider the status of all alerts to get a holistic view of the variety of alerts, and then design for each variant.
- If you allow users to disable pop-ups with a “Don’t show this again.” option, make sure they can re-enable them.
- If the user must navigate away from their location due to an error, include a link to the location of the corrective action in the error messages.
- If the user can take no corrective action, consider providing a link to contact support for additional help and adding an error code for quick reference.
Feedback & Analytics
There is no better teacher than a disappointed customer. User feedback is no longer a luxury or part of marketing, it’s your bloodline. The gaming industry uses feedback and predictive analytics to determine what rewards their gamers will prefer. In healthcare, improvements needed by practitioners can literally save lives.
- Primary goals of this component:
- Provide an easy and free online feedback or support portal for Quality Assurance and User Research.
- Use analytics to improve efficiency of operations by examining user behavioral trends.
- Uncover and document low hanging fruit and user suggested improvements.
- Identify differentiating behaviors between user segments.
- Best practices:
- Make it easy to find the feedback option, enter responses, send it off and move on. It should not be a disruptor.
- Provide feedback about expected response times (<24hrs is important).
- Combine acquired feedback with quantitative research to fuel personas and journey maps. This research should be ongoing as part of a management of technology research initiative.
- Review research with all departments to learn as many user scenarios as possible.
- If possible, provide a phone number or online chat to support channels. Sometimes a call is the quickest option and health practitioners value every minute.
These components will likely be revised to a different style depending on your site and service needs, but by focusing on improving task efficiency while gaining more user empathy, the design can fully align with user and strategic goals. Stay connected with me (@JonathanKnopf) and Key Lime Interactive (@KeyLimeInteract) for Part 2 of this series. We have a ton of similar articles and User Experience resources to assist you.