Philosophy
Our philosophy of user experience design is based on understanding our users, and understanding their needs. These principles serve as the design rationale for the style guide and the accompanying implementation. With any list of this nature, there is always more that could be added. Indeed a small library of books has been written on this topic. We hope these serve as the footing of your next project.
Best Practices
- Know your users
- It's critically important that you know your users. Get to know some of them on a personal level such that you are able to generalize their behavior and the rational for their work practices and decisions.
- Your users are not like you
- You are likely an advanced user of your application and are aware of every detail of an application. That can lead to elevated expectations of your users.
- All users are not the same
- Different users have different background and goals. Each user has a set of previous experiences that influence their expectations of your application.
- Let the user take control
- Provide ways for users to experience work with purpose and efficiency by eliminating their pain points and allow them to craft their experience.
- Content over chrome
- You can have a gorgeous interface but if your content is hidden or the interactions are clumsy you are missing the point. Focus on the things that will deliver the greatest value to your user.
- Don’t drown the user in data
- Carefully choose what you present to your users. If there is too much information available they may miss the relevant details.
- Innovate with intention
- Let your innovation shine through but remember that your product will be used by users who are using other products in a portfolio of applications. You do not want your application to feel or behave differently in the core areas of navigation and interaction.
- Consistency across the application
- Use common elements described in this style guide throughout your application. Users prefer repetition and are comfortable with familiar patterns.
- Tell a story and use metaphors
- Stories are irresistible to humans. Telling a story will help users connect with your product. Metaphors help users quickly establish a mental model of your product.
- There are no user errors
- Humans are error prone. It is our job to design interfaces that expect human error and handle it robustly. You should prevent errors wherever possible and clearly inform users of the consequences of a pending operation. Use a friendly voice for system errors and take accountability for the interruption.
- Think about the entire user experience
- Understand how your customers will interact with your product. Talk with different users to understand all the touch points. Consider creating a user journey for each persona. Share this deliverable with your team to leverage the impact of each person’s role in the project, increasing individual ownership and commitment.
Usability
- Use progressive disclosure to create depth of content
- Minimize content and avoid clutter in the interface by presenting the user with only the elements that make sense at a given point in the experience. Then progressively grow the experience as necessary.
- Use simple messages
- In user interfaces, massive amounts of text are usually treated as blocks of irrelevant information. If you want people to be aware of your content use short phrases or bullet points instead, or highlight important data and messages with proper styling.
- Provided tutorials vs. contextual help
- Well designed tutorials enable your user to remember how the product works and they will need less hand holding while navigating through your interface.
Interactions
- Use device appropriate gestures and interactions
- Users expect interfaces to work naturally on their device. Delight your users by providing the expected interactions for the device they are using.
- Use animation to explain transitions and aid discovery
- Animations should be natural and reinforce the user’s interaction with your application. They should not be distracting or disruptive.
Mobile
Mobile is not just different screen sizes. Mobile devices actually change the fundamental user user experience of common tasks. Embrace the devices and their native capabilities.
- Think mobile first
- Designing for mobile first is very beneficial even if your main focus is not on mobile. Doing so can help eliminate non-essential information while reinforcing the most important information.
- Consider new use cases
- What are the scenarios where people will be using your application outside of the traditional desktop environment? Reevaluate the need to have some features and capabilities designed for smaller screens. Take advantage of the capabilities that mobile devices have to offer such as a camera and notifications when designing your application.
- New devices sizes
- Do not plan your designs with a specific and unique resolution in mind. Consider that new devices are launched through the year. The more fluid your design is the better your application will behave, regardless of the resolution and density of the screen.
- New device capabilities: GPS, camera, accelerometer, etc.
- You can use these new capabilities to implement features that require geopositioning and location. Use the device orientation to provide a different view of the same screen or some related data.
- Gestures
- Users become accustomed to gesture support on their platform. Swiping, pinching, zooming, and even multi-finger gestures are becoming commonplace in mobile applications.
- Appropriately sized tap targets
- A fingertip is less precise than a mouse pointer therefore needs a larger target. When designing for mobile remember to increase the size of buttons, form elements and controls.
- No hover
- Without the capacity to hover elements on a touch screen, be careful with the type of information or interaction that you associate with this action on the desktop version.
- A desktop experience is not a mobile experience
- Consider the context in which people will be using your application. Desktop and mobile experiences are far from seamless. For example, if you have a secondary feature that is composed of several steps and interactions, you may leave this experience for the desktop version only.
- Selection is preferred over input controls
- It is much easier to select a value from a pre-populated list than it is to input a value into a field using a (virtual) keyboard.
Accessibility
Products that are accessible to all users are good for people, products, and business. All users should be empowered with access and the ability to have a pleasant experience with your application.
We follow the Web Content Accessibility Guidelines (WCAG). By following this style guide and utilizing the accompanying implementation platform, you will be well on your way to satisfying the WCAG recommendations.