Grids work as a framework that helps product teams to arrange UI elements in a way that allows maintaining good visual balance from page to page.
Designers rely on layouts to introduce structure in design and give users a predictable rhyme as well as a sense of familiarity. A grid with all "Distribute"-width columns will evenly distribute space across all columns.Good organization and positioning of UI visual elements is key to creating a great web or mobile experience. The default column width of "Distribute" produces the same result as specifying "1" as the weight. No Automatic Column WidthsĮditable grids do not support automatic column widths based on the amount of content in each cell. While considerations for setting column widths are similar across the two types of grids, editable grids lack some of the configurations available for read-only grids. The remaining columns in the grid may show varying amounts of text and work best with "Auto" or a set proportion of relative widths. For example, one might set fixed widths for columns that always require the same amount of space: "Icon"-width for a column that shows a status icon, "Narrow"-width for a column that shows a percentage value. Sometimes, the best results may come from using more than one type of grid column width configuration within the same grid. Combining Different Types of Width Configurations Fixed column widths offer more predictability when grids are viewed across a wide variety of screen form factors. mostly viewed on a phone or mostly viewed on a desktop monitor). In general, relative column widths work well when the grid is typically viewed on similar screen sizes (i.e. The "Start Date" and "Department" column values on the phone are too narrow. Left-align text and right-align numbers and dates (in left-to-right languages).Ī particular set of relative widths that work well on wide screens may not transfer well to narrow screens. If you are not sure if the sort order and filter controls will get the users to the items they are looking for on the first page, then use a smaller batch, size such as 25 items, and ensure that users are able to access paging controls without scrolling. Use a large batch size, such as 50 items, so that users can scroll to their items rather than paging multiple times and waiting for items to load. If the grid is the only component on the interface, prioritize getting the user to the items they are looking for on the first page using sort order and filter controls.
If the interface has several other components along with the grid, then use a smaller batch size, such as 5 - 10 items, so that the user can easily access the other components in the interface. “New Item” is a record list action and “Edit Case” and “Reassign Case” are related actions Batch SizeĮstablish an appropriate batch size that minimizes scrolling.
0 kommentar(er)
