Content and User Interface, a Love Story

At this moment I am designing a filter for a webshop: a long list of options. It allows users to reduce the number of products into a short list of their interests.

Designing a good filter is a challenge. During our usability tests we notice users skip filters. They rather check all the products piece by piece until they finally find what they are looking for. Not a surprise, because filtering is a supporting task. Users focus on their goal, the content. But forcing a user to scan thousands of products is just crazy.

A possible solution is to let users preselect a category on a page earlier. Only to pass the beauty of filtering, a flexible search path: the user can skip, undo, or combine choices as desired.

Just as an experiment. Imagine the user uses the filter precisely as you intended. He should be very efficient. But even then, a filter remains far from perfect. Just think about what the user has to do:

• After looking at several products and not finding any satisfactory results, the users is forced to scroll back and start again adjusting the filters.
• It is possible to create a fixed filter, which means it stays visible, even during scrolling. Unfortunately, a filter is often too large for computer screens.
• You could collapse filters to save room. But even fewer users would see or use it.
• After changing a filter option, the user has to scroll back to the top of the document to see the first result. Not very user friendly. It's also a bad idea to let the website scroll automatically to the first result after changes in the filter. Most likely the users wanted to select several filters. Result: frustration.
• Even if we solve this puzzle for larger screens, it won't work on mobile.

Different kind of filters deliver a suboptimal experience. I suggest to consider it from an other perspective: the missing integration between content en user interfaces. Not only does this solves the 'filter' problem, it affects all types of user interface.

Integrate user interface and content

Users do not only skip filters, during usability tests we see users rarely use, in our opinion, any 'useful tools'. As an interaction designer your first reaction is to make these 'tools' more prominent, hoping users will use them. As a result these tools will visually compete with the content. That's what you don't want to happen.

The misunderstanding is, we see user interface and content as two separate and independent parts. Gradually we, and even clients, realize we can only design with content, or content specifications. A huge step forward, but still far from perfect.

My approach is to integrate user interface and content. We have to stop dividing websites or applications into different parts user interface and content. Focus on contextual user interfaces. That's the way to go.

I will use filters to illustrate this. Let's design a products overview wherein users can adjust filtering based on the products they are looking at that moment. Back to the user. He looks at a product because something about it draws his attention. This 'something' should be easily addable to the filtering. Another example: at the bottom of the products list, the user finds a button 'Show more products': pagination. At this point, give him an option to choose new filters. When the users reaches the 'Show more products' button, it means he didn't find his desired product. Now it would be very helpful to offer filtering at this moment. Far better than pulling him from his task and ask him to scroll back to the filter. Try to discover these moments wherever you can find them and use this approach to improve the user interface.

Also, integrate menu and content

If we apply this method to other elements as well, you could remove the complete menu from the header. Keep in mind that most menu's are designed as an element of the user interface, supporting and not integrated into the content. This has to change.

The menu is one of the most populair element on a homepage, but little room is been given to it. That's odd. If you would give a menu the room it really deserves, we should design the whole homepage as a menu. And that is only possible if we remove this relevant navigation and integrate it into the content area.

By giving the navigation more room, we also create more design flexibility. For example, you could choose to make various levels of navigation directly visible. Much better solution than mega menu's. In different situations, users need different kind of information to make a well balanced choice. A small horizontal row of words is inadequate.

For small mobile screens, as a rule, we say content is more important than navigation and we hide the menu behind a 'menu' button. This creates a new usability issue: what does 'menu' stands for? The word 'menu' doesn't say anything about what the user can expect. It reduces the importance of the menu, while on the other hand it is the most important part on the homepage.

I believe the button 'menu' represents a transition from desktop to truly adaptive websites. Of course it's a great way to make 'desktop websites' available on mobile, but it's not a pattern that will bring us further.

My advice is to design the homepage truly as a menu and put the menu itself in the footer on all the other pages. It forces you and helps to look at websites in a totally different way.

Avoid scrolling elements

Designers try to promote their 'useful tools'. Some keep them visible during scrolling. Also known as 'fixed position'.

Fixed elements cause problems on smaller screens. These 'fixed positions' just do not work well on different mobile platforms and eat scarce vertical room. This is even worse within 'in-app webbrowsers', such as in Facebook or Twitter app, where vertical room is even less because of additional toolbars.

Even without all these design conflicts, fixed elements draw attention from the upmost important thing, the content. Fixed elements suggest separation of content and user interface elements. There are better ways. The best one is just to let them scroll away.

A number of studies show that a fixed header or menu does improve the usability of a website, which I do not deny. However it only helps because of the way we currently design websites. My point is that it is a transition issue, it lacks integration and flexibility. It is about the integration between the user interface and content that forces us to think differently about fixed elements and the creation of relevance.

As I mentioned before it is impossible to create a usable fixed filter. The solution is to repeat its functionality, depending on the context. In the near future the importance of contextual user interfaces will increase. Do not be afraid to repeat functionality. Our challenge lies in determining when the user interface is relevant and how it should adapt to the context, the content.

Content is not the user interface

I want to clear one possible misunderstanding. Content is always different from user interfaces. Josh Clark promotes the idea that buttons are a hack. Luke Wroblewski tells about it in one of his presentations.

Touch interactions will help us sweep away buttons and a lot of existing interface chrome by moving us closer to the content and away from GUI abstractions. [...] Let the content be the message. Instead of labels, let people directly interact with content. Content can be the interface.

– Luke Wroblewski, 2012, An Event Apart: Buttons are a Hack

Josh Clark creates the misconception that mistakes in user interfaces are arguments to let content take over the function of user interfaces. Content can never be used as a user interface, it doesn't have any affordance. Even the underlining for links is user interface, not content. Affordance requires a user interface. The discussion should be about integrating user interface and content, not replacing it.

Creating or editing content are different things

I do not say that the user interface for an author should be integrated within the content intended for the reader. Two completely different goals that should not be combined. The author should have its own user interface and therefore no WYSIWYG.

You could say I propose the use of modes: one in which you change the content and one in which you consume it. Introducing an additional mode is normally not a wise thing to do. Yet, in this case it is actually not an ordinary mode. We call it a quasi-mode, because editing and viewing content are completely different. Therefore the interfaces are visually different. Because of these visual stimuli, the user is continuously aware of the situation he is in, the mode. Therefore we can say it is a quasi-mode. The user will never start unintended actions by surprise.

This shows how important it is to have a different user interface for editing and viewing content. No WYSIWYG, but for example a Markdown editor. A clear separation of these goals wil resolve the 'mode problem'.

Let interaction designer and copywriter create together

We already stated the content or content specifications should be available before you start designing. I advocate a complete integration between content creation and user interface design. These two disciplines belong together and need to work simultaneously. Not only during SCRUM projects, also during the traditional 'waterfall' projects. As an interaction designer, learn more about the beauty of a language and writing, as a copywriter stay informed about user interface design.

Limitations stimulate our creativity

Limitations in mobile yields often to new ideas about user interface design. Small screens forces designers to focus onto the content and solve user interface problems in a different way. These limitations can feel uncomfortable in advance and could lead to different solutions for different screen sizes. Do not fall into that trap. Offer the same content on all devices. Limitations force us to focus on the 'why'. A good thing for user interfaces on all devices.