At DesignMap we pay careful consideration to all different levels of problems. An interesting and reoccurring problem I’ve come across lately is designing within a limited space while accommodating different types of restrictions. This particular example is around viewing and editing countries within a modal. The modal is triggered from a world map widget within a dashboard that provides an overview of selected countries. Here are some constraints, desires, and context around the problem: Constraints

  • Number of regions and countries are in flux so scalability is crucial (started with 77 countries with 7 regions; ended with 163 countries with 5 regions)
  • Range in number of countries per region (One region has 2 countries while another has 45)
  • Cannot alter how regions are broken up and which countries fall under a region
  • Search is not in scope

Desires

  • Scannability
  • Digestibility
  • Sensible modal size

Context

  • For the general use case, the smart default is with all regions and countries selected
  • Each modal option has a “Select/Deselect All” checkbox for cases when the user only wants to select a few countries in different regions (i.e. if the user wants to select just the US from the Americas and the UK from Europe, a Select/Deselect All option prevents a user from having to individually deselect 161 countries)
  • Checkboxes left of each region provides quick regional select and deselection for the same reason, on a smaller scale
  • To the right of each region is a count of selected and total countries in parentheses indicating the current state

Here are six different options with some pros and cons that were considered in designing around these restrictions:

1. Wrapping list

Wrapping List
This wrapping list in a modal is utilitarian and not usable.

Pros

  • All countries are visible at one glance
  • No extra selection needed to view regional data

Cons

  • Difficult to scan; category headers are mixed in with listed sub content
  • No hierarchy
  • Increases cognitive load

2. Horizontally Navigated Tabs

Horizontally Navigated Tabs
This option breaks up the regions into more digestible sections. The main downside is that it doesn’t scale well horizontally. Pushing tabs onto subsequent rows takes up vertical space and hiding tabs become an issue. While more digestible than the wrapping list modal, design of this layout still does not fit the content well.

Pros

  • Breaks up the regions into more digestible sections

Cons

  • Limited horizontal space for tabs; five tabs can be seen here
  • Countries are hidden due to regional separation into tabs
  • Space is poorly used for the region with the fewest countries (Imagine two countries in a tab)
  • Tabbed interface creates repeating sub headers (We now need to create another Africa sub-header for the regional Select/Deselection)

3. Vertically Navigated Tabs

Traditionally, vertically navigated tabs take up a significant amount of real estate; however in this case because the region with the most countries fit within the given space, it is not a concern. For this case, the vertical tabs work better than the horizontal tabs, however the cons still outweigh the pros.

Pros

  • Flexibility of adding tabs is easier than horizontal tabs
  • Easy vertical scanning of regions

Cons

  • Space is not used well for the region with the fewest countries (again the tab with only two)
  • Countries are hidden due to regional separation into tabs
  • Won’t scale well horizontally if number of countries per region increases
  • Tabbed interface creates repeating sub headers

4. Scrolling with containers

Scrolling with containers
A scrolling list with containers separating regions would work if regions did not get hidden.

Pros

  • Scales well
  • Works well with small number of items (two countries within a region)

Cons

  • Content below the fold may get lost unless users scroll all the way to the bottom.
  • Regions are not scannable
  • Countries or regions may be missed if scrolled quickly
  • Cognitive load for scrolling and finding desired content (User has to move to the scroll bar, click, move and down)

5. Separated Columns

Separated Columns
Separating the regions and countries into columns is another option, however the number of countries per region is not small enough to fit vertically.

Pros

  • Headers are horizontally scannable at the top
  • Most of the countries are visible before scrolling
  • No hidden regions or need to click into separate regions

Cons

  • Countries towards the bottom of the alphabet are hidden
  • Still need to scroll to view the rest of the countries
  • Does not handle range in number of countries well (i.e. Region with two countries)
  • Layout forces the content to feel too tight in this modal

6. Accordion Menu

Accordion Menu
In an accordion menu, one panel preferably the most important one, is open all the times. Ideally the most important one will be open if there is any hierarchy. This pattern is especially a great fit since there are just two levels of information here.

Pros

  • All regions visible at all times
  • Regions are vertically scannable
  • Auto-sizing accommodates a wide range of countries (Both 2 countries and 45 countries work well)
  • Larger height of an accordion provides larger click area and affords a larger header

Con

  • All countries not viewable at once

Although the accordion option does not allow the user to view all countries at once, all the pros outweigh the single con. This solution scales well, is scannable, easily digestible, and auto-sizes according to the content. The characteristic of elegantly compacting categories in a small space makes great use of an accordion menu for this example. Even if it’s just contemplated in our head it’s valuable to explore variations of a design not only to derive at the best solution, but also to comprehend the rationale behind it. That way when we are presented with similar cases in the future we have a stronger intuition about the best approach. Here are some links for additional information on accordion menus: http://ui-patterns.com/patterns/AccordionMenu, http://www.welie.com/patterns/showPattern.php?patternID=accordion, http://developer.yahoo.com/ypatterns/navigation/accordion.html

All options are wireframed for discussion purposes.

Subscribe to our mailing list!