Hiding and Simplifying Content
Dennis Kardys Head of Design & Development#Design Advice
Often when trying to design simple interfaces, we have a tendency to want to hide information inside of panels and tabs. But be careful you aren't doing more harm than good. Here are some considerations for designing simple interfaces.
There's a saying, championed by the neat and the tidy: "A place for everything, and everything in its place". It means when you're done using something, put it back where it belongs. If people were all just a little bit more organized, think about how much easier things would be. When you put things in their place, you always know where to find them. If this rings a bell and you can relate, then read on dear reader, this post is for you!
Being organized is a good thing; it makes everyone's life easier. Imagine you've inherited a terribly cluttered site to redesign. So much content. So much scrolling. So much…stuff! But here's your chance to do some spring cleaning and impose a little order. Utilizing interactive components like tabbed panels, expandable drawers, and hover menus, you've been able to tuck your content neatly away. With a place for everything, and everything in its place, your site users are sure to be grateful. Finding information will be easier than ever before. Or at least it should be. For some unfathomable reason, people are struggling to understand the organizational logic. Maybe they're just too accustomed to the old site and frustrated that things have changed. Surely over time they'll come to embrace the new system, and the complaints will fizzle away—right? Well, maybe.
Out of Sight, Out of Mind
There's another saying, championed by victims of the neat and the tidy which is, "WHERE THE #%$! DID YOU PUT MY STUFF!?" Often in the quest to make a site simpler and easier to use information that was once out in the open and visible on the page gets tucked in a drawer and hidden away. In some cases this may be ideal, but in others, it can negatively affect the user experience. Although hiding content is convenient from an interface standpoint, keep in mind that well written content and headings are often filled with useful keywords. When users arrive on a page, they don't read and process each button and element they come across. Rather, they erratically scan the visible content. In their heads, they have a handful of words and phrases connected to what they're hunting for. These are trigger words. When content maps to those trigger words it will stand out, and the user is more likely to pause and make a decision about whether to click-through or continue. Content, buttons and panel headings that don't map to those trigger words are often ignored. Out of sight, out of mind.
Minimalism and Simplicity are not one in the same.
This isn't to imply that all content must be visible. We should still avoid creating cluttered pages. The trick is in evaluating your content and figuring out the best way to simplify it. It's a misconception that simple and minimal are one in the same. John Maeda, in his book The Laws of Simplicity outlines ways you can simplify the display of information.
Reduction
Some methods revolve around the concept of Reduction (SHE).
- Shrink: Look for ways you may be able to make elements on your page take up less space. This might be through the process of editing down your content a bit, removing redundant information, or using more concise descriptions.
- Hide: Inline with what we described above, hiding and revealing content can be a powerful way to reduce the amount of visible information on the page. Just be careful that you aren't hiding the important key words and triggers your users are scanning for.
- Embody: When possible, enable users to interact directly with content, rather than having to rely on controls to manipulate the content indirectly. For example, gestures like swipe, pinch and zoom can replace the need for scrollbars and zoom controls.
Organization
Other methods revolve around the concept of Organization (SLIP).
- Sort: When information is in a seemingly random order, it appears complicated. By sorting your content into meaningful groups it becomes much easier to scan.
- Label: Using well considered labels to identify content reduces ambiguity, resulting in a more seamless browsing experience.
- Integrate: Look for opportunities to merge similar groups into a single group. Having less options is easier to process cognitively, and thus results in increased simplicity.
- Prioritize: Establishing clear hierarchy of information on a screen tells the user what you intend for them to focus on. Giving content different levels of priority helps people pace how they move through and process information on the page.
Simple is Usable
Simplifying your interface is a great way to deliver a more focused user experience. Always take care to make sure that you aren't over simplifying at the expense of usability. Factor in the out of sight out of mind idea, so that you can make informed decisions what to hide and what to show by default. Beyond hiding and revealing, also think about the other approaches you can use to make your site simpler and easier to use.
Related Posts
Accessibility Playbook Resources
Useful accessibility resources that are free for web designers, web developers, and content creators to help them build more inclusive websites.
Establishing Equitable Management Practices
It's International Women's Day and Dennis Kardys shares some things we’ve done at Diagram to be mindful of bias and take steps to embrace diversity.
Results Matter.
We design creative digital solutions that grow your business, strengthen your brand and engage your audience. Our team blends creativity with insights, analytics and technology to deliver beauty, function, accessibility and most of all, ROI. Do you have a project you want to discuss?
Like what you read?
Subscribe to our blog "Diagram Views" for the latest trends in web design, inbound marketing and mobile strategy.