Welcome to the second part of our new mobile navigation series. In this post, we’re comparing the List menu with the Grid menu.
Helping our users to navigate should be an integral part of every site and mobile application design process. When it comes to building the perfect mobile navigation for your app, focusing on the User Experience and the User Interface at the same time is very important, and can be very effective. In today’s post, we’re comparing the List with the Grid.
The Grid Vs the List: Structure
In mobile and desktop navigation, the grid is a set of cells divided by columns and gutters within blocks – columns are the wider divisions, while gutters are defined as the equal spaces between columns – that the design and content components of a mobile app or webpage are positioned within, effectively listing all of your navigation options at once. In the image above, on the left, we can see an example of a grid structure in its most basic form. In this example, we’ve defined 2 columns per block. Columns and gutters can be added to the grid as needed, and we can use the structure to maintain sizing and treated each section as a blank canvas.
There are a variety of grid-based structures. Typically, the grid splits the screen into equally-sized cells that are easy to navigate. Most recently, we’re seeing a more malleable side to the grid, with customized structures, produced by decreasing/increasing the number of columns in each block. In this way, you’re not stuck with even or symmetrical layouts – with the grid, the options are endless!
The the list menu is typically a standard list-based navigation that is commonly used among mobile app creators. Lists are a part of everyday life, such as to-do lists and recipes. When it comes to UX design, it’s possible to use a link list for a variety of reasons. But is this also the case for mobile apps? Well, let’s take a look.
The above example, (on the right), displays links one by one in a vertical list, letting users follow a regular flow from top to bottom. We can see essentially a vertical scrollable menu of four products, displaying a set of links and information that includes product name, shipping info, price and the customer rating. If a navigation consists of more than a few links, using a list of links is the most effective way to convey the menu structure to users in a mobile app.
Tip: With HTML, you can create a whole bunch of list types. And, one of the main things you will want to consider when looking at grids and lists is the ability to make it fluid. Learn more about responsive mobile navigation design here.
As we’ve seen, using grids in your designs is an excellent way to bring logical structure to your work. Using a grid-like framework is a good way to organize information and group important elements together in order to make your content easier to follow and understand. In the above example, we see a dense grid displaying songs with large icons, which can make for great usability.
Tip: keep content short and simple for the grid layout!
Grids in web design are very common, and with the implementation of responsive web design, have become more important than ever. This type of navigation usually takes up the whole screen of the mobile device, emphasizing the navigation – making it clear and and easy to interact with. This approach can be also useful when you need to display several links, and/or when you’re designing a task-based mobile app. But, be warned. The grid is less useful when it comes to browsing and consuming content because its large structure leaves the designer less space to play around with additional – often vital – content. This is where the list really comes into its element.
In comparison with the grid, which is handy for displaying content in a minimalist approach, the list allows you to present comparatively more content and visual elements in your interface. Lists are a great way to get organized and keep track of items, such as meetings in a calendar or groceries in a shopping list. In our example above, we see a simple music app that vertically lists songs that the user can select to listen to. With smaller visual icons, there is more space to include important content, such as the artist, the alphabetical scrollable index and the footer menu at the bottom of the screen, which makes it easier to navigate from tab to tab.
Tip: Presenting the number of items in the list can be helpful to the user!
Navigation within the grid is simple. A grid-style navigation that takes up the whole screen helps put emphasis on navigation, making it clear and obvious. In our example on the left above, we can see a shopping list, which as we all know, usually consists of a whole bunch of items. Such an approach can be also useful when you need to display numerous links, where a set of equally sized cells effectively isolates items one from another. This is a really simple way to condense your menu when on smaller screens and not overwhelm the user. The grid provides a clear navigation ground as the viewer is focused on a single, horizontally proportioned area until they decide that they’re ready to move on.
However, this method doesn’t work if you want to add sub-navigation.
As we can see in the example of a chat service on the right of the above image, the list menu allows for easier scaling with numerous links traveling down the page. Lists make it easier to scan all of the app’s important navigational links without drop down or hidden menus. But, of course, this type of vertical menu does nothing for when you need the user to scale horizontally, so keep that in mind. And another thing with list menus, be careful to not place links too close together, since this choice can result in unwanted clicks. If elements that are too small or too close together, this can be a real turn off for mobile users. So make sure that menu links are big enough to be “easily tapped or clicked”.
Tip: Try using a rainbow-style menu that clearly demonstrates items of a control panel line by line and grabs attention.
The grid is great for organizing a bunch of data into a rigid rectangular grid. It discreetly dishes up lots of data, neatly presents content — simply put, it’s very easy to use.
List items can be created to point to a page, collection, or product within your mobile app, or to a URL outside of the app’s domain – in our example above on the right, locations and saved places. A few words of caution when using a list-style menu: at least one screen reader user prefers navigation without lists because they can become tiresome to scroll through.
Tip: By following a simple naming convention style, you can generate “multi-level menu structures”.
Whichever mobile navigation style you opt for, opt for simple user flows, clear visuals, and forgiving designs to help to give the user a seamless experience. After all, you’re designing for your users! With a helpful prototyping tool like Justinmind, you can build and test out your mobile navigation early on in the design process. Take the tour here!
Do you use grids or lists in your design work? Do you have a navigation structure that works well in different mobile applications? If you’d like to tell us about it, feel free to share your technique with us here! Oh, and tune in next week for the third part of our mobile UI series!