UI Practicum #9. Three-Column Layout in Web Apps (Video Teardown of Tito)

Published August 11, 2016 by Jane Portman
Categories:

How do you organize your web app when you have multi-level navigation and tons of settings to manage? Here’s a good example to learn from. Today we’re doing a brief teardown of Tito, simple and powerful event management software that has become the industry standard lately.


Watch the video on YouTube

Practicum

When working with complex web applications, follow these rules:

  1. Three-column layout is a great way of managing objects (like customer lists and customer details) without loading separate screens for each one.
  2. When using a three-column layout, make sure that the column content is simple enough. Otherwise, the layout will look overwhelming.
  3. Always think strategically about the order of items in your menu. Place the most important item first.
  4. If you’re including an important second-level menu (like Customization sub-menu in Tito), place this item first — so that this menu is visible straight away.
  5. Once again, think whether a dashboard is really important or not. Consider combining brief stats with the main object list, like Tito does on their homescreen.

Curious what event I’m managing with Tito? It’s an evening workshop on designing web applications which will take place in London, August 31st, as part of my training tour. View details and book your ticket here.

The 1-Hour UI Audit: Get the Free Course

With this free email course you’ll conduct a simple do-it-yourself audit of your web app: eliminate the obvious design flaws, gain control of your features, and start building the UI that customers really want.