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.