This is for those back-enders that are not lucky enough to work with a designer. Bootstrap is a really well documented collection of reusable components, but placing those components in the screen is not an easy task. This post explains how to create an usable User Interface discussing two main points: Layout design and Screens design. Make sure to check the coded examples clicking the links in the image notes.
Designing the Layout
The main objective of the layout is to provide global shortcuts to main sections and actions as well as context. Usually web apps use a top horizontal navigation, a side vertical navigation or both. Lately it is becoming a trend to fix those navigations to achieve a native app feeling.
The Navbar
The most commonly used layout in Bootstrap based web apps is a fixed Navbar — that’s why it has become one of the most recognisable components of Bootstrap. From a usability point of view it is easy to use and to find —it’s a common practice to have a top navigation —, but will fail at its purpose when the list of links is larger than 5 items.
Sub-Navigation
One solution to over-crowded navigations is to find a hierarchy between the navigation items and use a sub-navigation. In the example below I’ve used a horizontal sub-navigation below the main Navbar. The sub-navigation will change depending on which item of the Navbar is selected.
Vertical Navigation
Another solution is to use a vertical navigation in a sidebar. Use nested lists so the navigation is more easy to scan visually.
Actionable Takeaway: Put a little love on your main layout. More than 5 links in the Navbar leads to poor usability. Try sub-navigations or a vertical navigation in a sidebar.
The Content Area
Most of the usability mistakes I see in websites that use Bootstrap are due to using a wide content area. Working with a 1170px wide grid is difficult even for experienced designers. That’s why I usually set the max-width of the container to 970px, specially if the layout doesn’t have a sidebar. You can see how in the previous sub-navigation example I set the max-width of the container to 970px.
Actionable Takeaway: Set the container max-width to 970px, wide layouts are really difficult to work with.
Designing Screens
The layout lives in every page, it is a frame that stays consistent through every screen of the app and shouldn’t be intrusive. On the other hand, screens — the content of a concrete page — should have a single main purpose in a flow which has a bigger purpose. Start by thinking about the final goal of the app. What will the user accomplish with the app? Then about the purpose of the flow you are designing a screen for. What is this flow for? Then think about the steps needed to accomplish the flow. Every step should be simple and lead to the next step.
Index pages
Designing index pages is difficult because it is thought that all the features of the app should be accessible from it and a lot of information is considered important enough to be in it. In a lot of cases the main purpose of the app is not clear in the index page.
The underlaying problem is not knowing which is the key feature of the app. Take the time to find out which is the main feature and the flow allows to perform the main action. Make and assumption based on the vision of the project. Then make it visually obvious. For example, in this example search is considered the main action:
Actionable Takeaway: Open the index page of your web app. Identify the key action and the element that makes possible to perform this action. Remove everything else. Then start adding the other essential elements one by one, making sure they don’t take more visual relevance than the key element.
Text Blocks, Vertical Whitespace and Columns
- About text blocks: text lines shouldn’t exceed 80 characters. Use the grid, instead of 12 columns use 8 in wide viewports.
- About vertical whitespace: let sections breathe. When in doubt, use more vertical whitespace.
- About columns: If you are not a pro designer, don’t mix in the same row items that are not of the same kind.
Conclusion
The basics of a good web app User Interface are (1) a simple and quickly scannable navigation, (2) a clear index page and (3) simple screens with only a main action that drive the users through flows that let them achieve objectives. There’s much more things that could be said about user interface design, but with this post I only wanted to discuss some of the most common user interface mistakes I’ve seen in Bootstrap based websites.
Next steps
One of the main problems about using Bootstrap is that it looks like Bootstrap. Once you fix the usability problems in your interface, consider changing its aesthetics to match your project’s brand. I’ve created Strapfork to help you with that.
