UX Design Guidelines For Content Heavy UI

When designing a web page with many sections and details, it is very easy for the user to feel lost.  Following these UX design guidelines can transform a messy collection of information into a comprehensible, interactive resource for your users.

Have a Clear Hierarchy of Information.

When a user lands on a page they’ve never seen before, they should know what to look at and what to read first.  Since the average page visit lasts less than a minute, you need to make it as easy as possible for the user to find what they are looking for.  First, they need to know that they are in the right place.  This can be communicated through the main heading or some indication through a navigation bar.  Then they need to know how the page is organized and how it works.  Just by scanning the page, they should be able to get an idea of what they will achieve by spending more time reading the content.

When building the structure of your page, keep in mind that users scan from left to right, top to bottom — in the shape of an F.  The most important information should be arranged at the top, and down the left side of the page.

What Does the User Want to See at That Moment?

Through user research, investigate which actions your user wants to take most urgently.  This can help you organize the content and provide the user with the most relevant content first.  This simple approach helps the user save time navigating to complete their task easily.  Note that in your email inbox the “compose” button is always available, regardless of the page you are on or which email you are reading; a great example of keeping a common user task in mind.

Show Details Upon Request

Exposing every detail on a static page will quickly create clutter.  Instead, give the user enough material to understand the premise and provide further details upon request.

A few ways to do this are:

• Use tooltips to provide more detail or further explanation.
• Use ellipses to shorten long bodies of text, along with creating a way for them to reveal the entire body of text.  Depending on where the most important pieces of information lie, the ‘…’ can hide text at the beginning, end, or in the middle.
• Giving the ability to search or filter any list of a collection of data.  Autosuggest and search recommendations can only help the user become more efficient.

Obvious Navigation

The user should always know where they are, how they got there, and how to get back to home base.  Through simple visual queues, you can make the navigation of your site very tangible.  For example, if the user clicks on a new page, and it slides in from the left, then it becomes apparent that the original page lies to the right of the page you are currently on.  Material Design uses paper as a principle to layering, making the result very tangible and logical.

Just exposing a navigation menu can give your user enough context to get oriented.  Making the navigation visible by default enables users to navigate through the site faster and with more ease.

Make Actionability Apparent

Knowing if something is clickable or editable should not be left open for interpretation.  If text, icons or images are clickable there should be clear visual differention from the static content.  Buttons with a visual indication that they are dimensional make them feel clickable. A more subtle way to convey actionability is to change the styling of the content upon hover. This works well for icons, images, and clickable text, for example.

The user should also get visual feedback about the state of any edited content.  For example, when filling out a form the user should be aware if the text they’ve entered has been accepted, is being edited, or if there is an input error.

Error Prevention

The user is going to make some errors, but, as a designer, it’s important to help them avoid the smaller mistakes.  Icons are a great way to quickly represent an idea, but if the icon is not immediately recognizable, then it can do more harm than good.  Having more context which could be misinterpreted (such as a tooltip, or a text lock-up) around icons can prevent the user from clicking on it by mistake.

Descriptive text should be used for more than just icons; it’s required for every action item.  For example, rather than having a pop-up saying, “Save Changes? OK vs. Cancel,” the buttons should read, “Save vs. Don’t Save,” so the user knows what will happen next.

If the user does make a mistake, sometimes it can be stopped in its tracks.  Failsafe pop-ups can verify the action and warn them of the effects it will have.  If they accidentally navigate away from an incomplete form, they should be prompted to confirm that they wish to abandon their work.  This principle also goes for situations where one action creates a snowball effect.  For example, if the user deletes a file shared with others, the system should warn them that deleting this content will affect other users.