We often use lists in user interface. so there are some important points which we should always keep in mind when designing list in any user interface. I am going to discuss some points through you can improve your user interface design, moreover these tips are proven by professional user research consultants.
Tips to Design List in UI:
1.) Consistency
Consistency is the first basic thing to keep in mind when using any list in a user interface design. A list, vertical or horizontal is a redundant component with same elements in each list item. The values of items may be different but the layout and design should always be consistent. Because if we use different layouts and designs for each list in a single UI then it will not look proper and elegant also it will be confusing.
2.) Logical
Each and every List should be logical or we can say order should be maintained in each list. It may be ascending or descending. If we take an example of list which consist action done as per date, so we can make a list starting with most recent action and so on or with earliest action. Because a list in proper order is always more understandable than a list in improper order.
3.) Actionable
In a User interface design each list should be actionable. Means the items of the list can also be a link but the values of those items should be in proper order so that user can easily act on that. When we take an example of metadata, spending counts is the best example for this.
4.) Sub-header
If we design a list without sub-headers then the list will look like an abstract data. So for giving it feel of list we should always use sub-header, which should be aligned with left data of the list, and list should be summarized by copy. If we place any sub-header which is aligned with right data then it will act as a counter.
5.) Hover
When we talk about interactions then Hover states tell users that the item in the list is actionable. So for making any item actionable we can use some shadow or we can change the background colour on hover.
6.) Overflow
Lists are not only useful in web applications, they are also very useful in mobile and tablet applications. So we can explore each and every row overflow from an actionable point of view. As we can use left to right or right to left are go to actions.
7.) Keylines
Every list should have keylines which defines the proper spacing and alignment of each element across the list. We should follow the 8 px rule for the spacing and alignment and these should be slowed right down the list.
8.) Padding
In general we should follow the 8px rule for padding. Each row in the list should have the 16px vertical and horizontal padding and the sub-header should have 8pz padding with its respective item.
Conclusion
So these are some basic things which we should always keep in mind while designing any list in a user interface design so that our list can look proper placed and aligned in the design also it will be more understandable.
Top comments (0)