Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Column customiser

Lets the user customise columns to display in a table.

Guideline

Short description

Sometimes we are limited in what we can display, depending on the width of the table. When several headers and columns of data are objects for usage, being able to select between them to customise your display is a good solution.

When enabling the possibility to customise columns in a table, the user can easily select which columns they are interested in by checking or unchecking them. The user can further re-arrange them by using drag-and-drop. When re-arranging the items in the slide-out, the order of the items will be displayed in the same order as the user has customised the items in the slide-out.

Above: Example of how a user uses drag-and-drop

 

When and how to use it

When to use it?

Customisation can involve different factors, such as moving around items to create a customised interface that reflects upon the users priority and interest. Using customisation is a good solution when there are limited space for columns or when there is a lot of data to show. It is important to remember that if you want users to engage with the customisation tool, the feature need to provide a clear benefit. However, it is also important to not rely on users engagement with customisation. A part of motivating users to use the feature is to offer a strong “default state”, with an opportunity to customise the view to meet the users specific needs.

How to use it?

The component should be displayed in a slide-out, offering the user the following functionality:

  • Select which items are to be shown
  • Deselect which items are not to be shown
  • Re-arrange the items with drag-and-drop, regardless of them being selected or deselected
  • Use the rock and paper hand as cursor, see: Behavior of the cursor
  • Support all states described under States
Why use customisation?

Because it enhances the user experience as the user gets the opportunity to be in control over what the user actually want to see.

Above: Example of column customiser used in context

 

Behaviour

The items that are selected will be displayed as a column in the list view, in the order the user has placed them in the customise colums slide-out. The items that are deselected will not be displayed as a column in the list view. The items can be moved regardless if they are selected or deselected.  

When a selected item is being pressed, the object can be moved by navigating with the hand-cursor, this is the drag-and-drop functionality. The grab-handle icon placed on the right side of the box of each item communicates that interaction with drag-and-drop is possible. This icon provide a safe target to click and drag without activating other nearby controls. Even if the user does not need to click on the exact area of the icon, the purpose remains the same. When moving the item, a dashed area will be shown in order to communicate to the user where the item will be placed if they drop the item.

Above: Selected item in default state displayin the grab-handle icon

Above: Selected item in drag-and-drop (pressed) state showing the dashed area

Remember that keyboard navigation does not support the drag-and-drop functionality. Although, some keyboard navigation should be supported. If the user for example tabs between the items, the list of items and the checkboxes should behave as follows:

  1. User tabs to first item, first item now in Focus state (See states)
  2. User press tab again, the checkbox in the first item box is now Focus state
  3. User can now select/deselect the checkbox by pressing enter or continue to tab to the next following item box.

Behaviour of the cursor

In mouse-driven interfaces different cursors than the default cursor can be used to enhance that drag-and-drop is possible. See above picture for the cursors pressed state, and below picture for the cursors hover state.

Above: Selected item in hover state accompanied with the cursors hover state

When the user encounter the cursor and interacts with it by “grabbing” an item, three types of feedback are needed:

  • The state of the cursor needs to change from the hover state (hand-paper) to the pressed state (hand-rock).
  • The state of the item box needs to change from hover state to pressed state.
  • Feedback previewing where the item will be placed before the user “drops” it.

Above: Cursor states

Mobile behaviour

The components behavior for mobile does not differ a lot from desktop use. However the cursor should be excluded for mobile use as its not a mouse-driven interface.

 

Do's and don'ts

  • Have a strong "default state" of items in a table
  • Consider if the component has a clear benefit before including it in your design
  • Always include the grab-handle icon placed to the right of the item.
  • Show users that customisation is available:

Above: Example of how to show users that customisation is available

  • Don't rely on customisation

 

Related links

Specification

Measurements

1 rem = 16px

States

Selected default state
  • Indicates that the item has been selected/pressed
  • Border: 1px Gray 400
  • Text: 16px Regular Gray 800
  • Checkbox: 16x16px Dark Blue 2
Deselected default state
  • Indicates that the item has not been selected/ pressed
  • Border: 1px Gray 400
  • Text: 16px Regular Gray 800
  • Checkbox: 16x16px border Gray 400
Focus state
  • Indicates that the item is focused (i.e. the user has tabbed to the item). Remember that keyboard navigation does not support the drag-and-drop functionality.
  • Border: 1px Blue
  • Shadow: Blue, X:0, Y:0, Blur: 1, Spread: 1
  • Text: 16px Regular Gray 800
  • Checkbox: See Selected and Deselected Default State
Hover state
  • Indicates that the user hovers above the item
  • Border: 1px Blue
  • Text: 16px Regular Gray 800
  • Checkbox: See Selected and Deselected Default State
  • Reminder: Implement the cursor for desktop
Pressed state (Drag)
  • Indicates that the item is being pressed, and is active for drag-and-drop
  • Border: 1px Dark blue 2
  • Shadow: Gray 600, X:0, Y:2, Blur:5, Spread:0
  • Text: 16px Regular Gray 800
  • Checkbox: See Selected and Deselected Default State
  • Reminder: Implement the cursor for desktop
Drop state
  • Indicates that the active item for drag-and-drop will be placed where the dashed area is seen.
  • Border: 1px Grey 400
  • Dash: 2
  • Radius: 4

Icons

  • FontAwesome cursor icon: 24x24px
  • Local grab-handle icon: 16x10px
  • Dot: 4x4px, Grey 300
  • Each dot has 2px space vertical and horizontal

Colours

  • Blue
  • Dark blue 2
  • Grey 300
  • Grey 400
  • Grey 600
  • Grey 800

Related patterns & components

Page last updated

Feedback

Was this helpful?