5 Tips to Make your DataLists and Grids Look Awesome!
Most of us know how to create data master or import csv into Justinmind. However, the trick for a simple and efficient DataList table or DataGrid is in its design. Check out these 5 things to make simple, interactive and beautiful DataLists and Grids!
1. Data-driven prototype layout –List or Grid?
The DataList layout structures data by rows and is great to display numeric or written information.
The DataGrid layout structures data in a grid of rows and columns. This approach is most commonly used to organize visual information. But grids is a trend that seems to be on the rise for any layout and to organize just about anything.
To handle information efficiently we should have clear goals, a clear audience and a clear understanding of their needs. We must base our layout on the content we are presenting and what we want it to achieve. Putting content first is key to choose a data layout feature, our layout needs to adapt to the content and not the other way around.
As we mentioned before more and more designers now use the grid layout, no matter the type of information –because, well, grids look neat — but it is still interesting to know when a list is the better option.
A good rule of thumb is to go with the DataList layout for more detailed information. The information in a DataList is meant to be read and should make it easy to find exact information.
Go with the DataGrid layout for more visual information and if you want to show a relationship between instances. Information in a DataGrid is processed more like an image and it reveals information about the data.
If you wish to go a bit further, you have the option to transfer data information to a different screen to clearly visualize your data results. Here’s an example of what we’re talking about:
2.Use the white space in your canvas
This works specifically well for Datagrids. Using the white space from our background is a simple and easy way to make grids more appealing and clean for the end user.
You can increase or decrease whitespace between the cells in your DataGrid and use it to define its structure and style.
White space helps you define where you want to focus the attention and rests the eye of the users.
Separating blocks of information helps better define connections between the data when there is one and, recognize when there isn’t. You can separate blocks of information either by setting the space between the cells as we mentioned before or, by grouping your data in different data masters and display it using multiple datagrids .
When displaying data using the DataGrid in Justinmind, you can manage the orientation of your layout and set the number of rows when it’s vertical and columns when it’s horizontal. Keeping the total of your columns visible at first sight makes it easy to scan and communicate information.
Whitespace is a lifesaver when it comes to minimizing complexity and removing clutter from our UI.
3. Add filtering and sorting to your lists and grids
Filtering and sorting allow you to focus on results. Identifying your audience and the purpose of your list or grid is basic to create the right design to present it. Each feature and function you add to your datalist or datagrid should help you increase their usability and readability. Both, sorting and filtering are the most common features when presenting data because they are intuitive and engaging.
Making your columns sortable
Either to organize the information in your UI or what is behind it. Sortable columns let you structure information, be it to compare information, group information or finding a specific result (when multiple sorting is available). It will also make your data master organization optimal to accomplish its goals.
Adding filters to refine search
Filtering allows narrowing down the information to a specific interest or result and can be a powerful option depending on the amount of data in your data master and it is easy to prototype in Justinmind. Filters allow you to refine search, and Justinmind gives you the option to set up filter through event actions that would act as content structures.
Check out any of the following Justinmind tutorials to learn how to add filters and sorting options to your DataGrid or DataList.
How to Simulate Searches in Justinmind How to Add Filters to a DataList Header How to Make your Columns Sortable
4. Use Pagination to go through your List
To avoid overloading and make content easy to the eye, it is good and common practice to split larger amounts of data in different pages.
Pagination should be labeled based on the type of prototype and the information in your data master. For example, you can simply add icons such as “<<,>>,<,>” or you can number pages, set names, etc. There is no right or wrong way to do this as it depends completely on the app you are designing.
5. Make your Grid Responsive
Responsive is the new standard. If you’re already into the “mobile –first” design trend, you know prototyping a design layout that adapts to the size and orientation of the device is becoming the norm –it is an excellent way to ensure an optimal user experience in all devices.
When prototyping DataGrids, take a little time and make them responsive. It is important that the person behind the screen can view all columns at once so they can scan for information just by scrolling down –we all know no one likes horizontal scrolling.
In an analysis of the distribution of attention along the dimensions of webpages, Jakob Nielsen concluded that “people spent more than twice as much time looking at the left side of the page as they did the right” so to try keep important columns first, starting from the left!
You can prototype responsive datagrid designs in two different ways.
I.Resizing the cells in the datagrid, resize adapts cells to either larger or smaller sized device screens. All cells are resized dynamically, without losing its original proportions and properties, as the screen size changes.
II.Rearranging cells to adapt the number of visible columns in the screen. The grid cells would be dynamically rearranged as the screen size varies. Instances would stack horizontally and/or vertically as the screen grows larger or smaller.
With Justinmind you prototype only once and show it on different devices.
Better content presentation is key in any design, but it is especially important when the content has data –because we don’t want to bore anyone to death with a large data table of our annual report. When done correctly the Grid and List structures are perfect to convey sets of data effectively and make them visually appealing.
Lists and grids give you all the flexibility you need to prototype data-driven applications. Because when your prototype looks good, you look good and so does your app.
Originally published at blog.justinmind.com.
