When it comes to designing user interfaces, there are a lot of factors to consider – the standards and conventions of the medium you are designing in, the usage patterns of the features you are implementing, and the goals and needs of the user. While this section cannot be a “paint by numbers” guide on how to properly design a user interface, hopefully it will detail some practical guidance on how to do the best job you can.
Consuming vs. doing
First, know what type of interface you are designing. There are two primary ways users engage with an interface. Either the user is consuming information (even if it is a single data point) or the user is doing something (typing, drawing, saving, etc.). To state the obvious, they are not the same thing and how you structure the information and the options on your UI will be different depending on this mode of use.
Support this different focus with your design by removing superfluous information and controls when users are consuming information, and place key options and controls in an easy-to scan and use way when users are doing.
When creating a UI that is for consumption, keep the following in mind:
Design for “scanability.” When most people read text on a screen they don’t read in the same way they would consume a physical book – they tend to scan, looking for keywords and phrases. Support this by keep non-article content short and using bullets.
Break up long paragraphs. It’s always a good idea to keep content short and digestible – having a lengthy paragraph results in a “wall of text” effect that discourages reading and intimidates some users. Try and keep paragraphs less than four sentences, and be succinct.
Place important content “above the fold”. “The fold” is the line where the screen is split between the content and functionality that initially displays and the additional information that displays when the users scroll. As screen resolution and sizes have changed over the years, the location of the “fold” has changed, and many designers have debated the importance of this rule in recent years. I still think it’s good advice, and worth following.
When creating a UI to support help users accomplish a task (“doing”), keep the following in mind:
Hide secondary controls (and provide them “on demand”). Too many UI designs throw every option available on the primary screen for an activity, even though there are usually only two or three primary controls that are absolutely necessary. Be thoughtful about what controls should be displayed and what are “secondary” to the primary action the user needs to accomplish.
Make sure labels are understandable and clear. Labels and controls should be intuitive, obvious and user friendly. Not doing this will result in user confusion and frustration so it’s important to pay close attention to this detail.
Leverage pattern libraries. Pattern libraries are sets of UI elements that are considered “standard” ways of doing things. Different pattern libraries exist for different platforms and operating systems, and these patterns reflect the conventions and approaches that exist in those mediums – standards that users have learned over time. Using these libraries helps you leverage this user understanding and reduce the learning curve for users of the screens you design.
When placing controls, align with users expectations. Users have expectations when they engage a screen, based on their previous use of technology and similar systems. A good example is the placement of submit and cancel controls on web forms – most users expect to see cancel on the left and submit on the right. Don’t “break” from those expectations unless you have a good reason too, and then make sure you test the design to confirm you have made the right decision.
Additional best practices on web form design are here.
Design for diffused attention
As a UX designer whose job is to create screens that users interact with, you need to remember your user base is often distracted, detached and multitasking.
And it’s not just the environment that’s a distraction. Users are preoccupied and distracted all the time, not just by what are around them, but by what is in their heads. They are worried about their kids, or wondering what to cook for dinner. You can’t assume that the UI you have designed is their sole focus. Ever.
So, how do you design for a world where users are distracted and preoccupied? Well, understanding the fact that users ARE distracted and are often not going to be 100% “at attention” is a good place to start. It brings to your mind the context of the situation, and accommodating context and situational understanding is a key to refining a design to support those factors.
Practically speaking, and as good as you may be as a UI designer, distraction will still be there for many many users of the solutions you create. The best you can hope for is that you provide a clean UI that doesn’t make things worse. So the key is this: keep things simple, and serve up information and functionality as cleanly and as well as you can.
Finally, a few words on “dashboard” design
Many systems have a “dashboard” that users access to get a sense of how things are going in a particular area. It could be a secure home page for a bank broker or stock trader, or a set of sales or productivity charts… whatever it is, a dashboard contains vital information that users will need to get at a moments notice. Here are some key best practices to follow when designing a user dashboard:
Location, location, location! As people read left-to-right and top to bottom, prioritize the top left area for the most important information on the dashboard and the bottom right for the least important information. (Of course, if you are designing a dashboard for a culture that doesn’t use this Western reading convention, place the information in a way that confirms with how they read information).
Layer information appropriately. Identify the appropriate level of summary information to display, and show only the “tip of the iceberg” on the main dashboard, and allow the users to dive deeper into the details as they want/need to (and, obviously, provide an obvious mechanism to take that deep dive in the UI).
Avoid flashy visualization. If you render information in flashy charts and graphs, it could diffuse the information’s meaning and confuse the users. When doing visualizations, make sure they are understandable and align with the user’s need to quickly “get” what is being displayed. Also, provide easy and obvious access to see the underlying data that is driving these visualizations. Test these renderings with users as early as you can.
Define different dashboards based on roles and usage. What roles the user has in an organization will influence the information and functionality they need to have on their dashboard – there is usually no “one size fits all” approach. And how often they access a dashboard will influence the design as well – if they use it all the time you can potentially have a steeper learning curve than if they will only look at it once a month (because they will be using the dashboard as a “sovereign” app they will have time to learn by repeated use). To identify what users need on their dashboard and how often they will use it, do the obvious: research users and ask them.