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.