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
- 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
1. 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
- Difficult to scan; category headers are mixed in with listed sub content
- No hierarchy
- Increases cognitive load
2. 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
- 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
- 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
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)
- 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
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
- 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
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
- All countries not viewable at once
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.
