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.
Lets the user customise columns to display in a table.
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
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.
The component should be displayed in a slide-out, offering the user the following functionality:
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
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:
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:
Above: Cursor states
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.
Above: Example of how to show users that customisation is available
1 rem = 16px