Home > Mobile prototyping > Prototyping a mobile contact list: 5 UI design tips
You’re just 5 simple steps away from prototyping a fully functional contact list UI design with Justinmind – start now!

You’re just 5 simple steps away from prototyping a fully functional contact list UI design with Justinmind – start now!

Designing for mobile means accommodating UI patterns, content and interaction for smaller screens. A common way of doing this is by scaling down your design using responsive web design. But another, more user-friendly approach is to think about mobile design from the bottom up.

Mobile-first design helps you reach the largest number of users because you design with a range of mobile devices and smaller screens in mind. It’s also the best way to keep your content readable and easy to navigate.

If you’re new to mobile-first design, a great way to get started is by designing a list for your mobile UI. Lists are commonly used in mobile UI design as they’re easy to optimize for reading comprehension, particularly on small screens.

In today’s post, we’ll explore five best practices for prototyping contact lists in mobile UI designs. Plus, we’ll show you how to jumpstart your mobile-first design process using Justinmind prototypes.

Ready, steady, prototype!

Prototyping the aesthetics of your contact list UI design

Make sure your UI design list is user-friendly

Mobile users are often on the go when they’re trying to reach someone. Combine that with having to decipher information on a tiny screen and you’ve got a usability disaster just waiting to happen.

The best way to ensure that your mobile UI is readable is by ensuring that content is clear, focused and consistent. For instance, when designing your contact list in your UI design, think about the UI elements you’ll include.

A contact list should be made up of a single continuous column of rows that contain content in item format. The content in each row usually includes icons, text and actions in a consistent format.

Stick to mobile UI design standards and you can’t go wrong with your contact list content. Take a look at this example taken from the Material design guidelines for reference:

list-ui-design-material-design-consistency

Justinmind contains over 4000 pre-baked widgets, UI screens and layouts to help you prototype the perfect contact list. You can grab any of our mobile UI elements and icons, including our new UI library for iPhone X, here. Simply drag and drop widgets to the canvas to get started! Also, don’t forget to check out our complete tutorial on prototyping a mobile contact list with Justinmind.


Design better UI lists with an interactive prototyping tool. Download Justinmind

Download free


Keep your UI design list clutter-free

In order to avoid overwhelming the user, it’s important keep clutter down to a minimum in mobile-first design. If you stick to the structure suggested above for your UI design list – icon, text and action – you’re may be lucky enough not to run into this problem.

However, to ensure that your mobile UI is noise-free, you need to pay attention to the ratio of content to real estate or “content-to-chrome” ratio.

Similar to the golden ratio, a mathematical proportion between elements of different sizes thought to be aesthetically pleasing to the human eye, the content-to-chrome ratio helps elements and real estate work together to maximize readability and the user experience. Getting the ratio right will help you create well-balanced content with effective visual hierarchy.

With Justinmind, it’s easy to perfect the content-to-chrome ratio. Use our canvas rules, guides and grids to plan the layout of your mobile prototype, and place UI elements exactly where you intend for the user to see them. Then, use our new margin feature to create space around and in between screen elements to help you ensure that your UI design list is easy to read and scan.

list-ui-design-spacing-margins

Making your contact list UI design interactive

Your UI design list should be actionable

The functionality of your contact list should be actionable. This means that users should be able to identity a specific item in a collection and act on it in order to complete a task, or part of a task in your mobile app.

To make sure users are able to easily interact with your contact list, it’s important to keep transitions and gestures familiar. Effective transitions with clear purpose help to engage the user and bring life to an interface, without creating unnecessary distraction.

In a contact mobile list, the most common transition is the tap. Tapping a UI list item expands it across the entire screen, giving way to more information about that item, such as a contact’s phone number. As for gestures, most contact lists include swipes, allowing users to perform additional actions, such as deleting a contact.

Keep your transitions and gestures relevant and targeted to avoid distracting or confusing the user. This is easily done in Justinmind by using the Events system. Our Events sytem includes a specific range of gestures, such as swipes (up, down, left and right), pinches (open and close), and rotate (left and right), which can be combined with tap event triggers. Use these to create delightful easy-to-follow transitions in your mobile contact list prototype.

UI patterns for your contact list design

Choose a logical UI pattern

UI patterns for contact lists in UI design should be logical. Mobile UI patterns that are easy to follow help designers create a seamless user experience by reducing friction in the navigation flow.

The UI design list itself is a great way to compartmentalize and aggregate individual pieces of information in one place. However it’s how you sort your list that will really affect users’ ability to read and scan it.

When it comes to mobile UI design, the folks over at Google suggest sorting lists alphabetically, numerically, chronologically or by user preference. For your contact list, we recommend sticking to the standard aphabetical order, either by first or last name.

list-ui-design-prototyping-contact-list-order-3

Justinmind’s data driven prototyping makes it easy to create the items in your contact list. Simply create a Data Master, populate it with your contacts’ details (first name, last name, numbers, and star sign if you’re that way inclined). Then create a Data List and voilà! You’ve got yourself a list of contact data all set up in just few minutes.

And remember, it’s really easy to reorder items in your UI design list with Justinmind – as straightforward as dragging and dropping UI elements to their correct position on the canvas.

Provide users with a search bar

As Nick Babich states, search is fundamental to mobile activity. And when it comes to mobile lists with multiple items, search lessens the need for scrolling, taking the heat off tired thumbs and reducing the risk of “smartphone thumb”.

To get search right in your list UI design, make sure that it is both clearly visible and quickly recognizable.

To ensure your search bar is clearly visible, Nick recommends placing a search bar at the top of the mobile screen with an open text field. This will ensure that users can’t miss it and can easily start searching for a specific contact before wearing their thumb out with lots of scrolling.

And to ensure your search bar is quickly recognizable, pay attention to its visual representation. Consider using a magnifying glass icon, as users will be familiar with this and relate it to a search bar. Alternatively, use placeholder text to signal that users can enter text in this box or bar in order to find information more directly.

As you may have already guessed by now, Justinmind has the perfect set of UI elements and features to help you create a search bar in your mobile contact list. Start by dragging an Input Text Field to the canvas. In the Properties palette, adjust its borders to make them rounded.

From the Font Awesome widget library, drag the “Search” icon to the canvas and place it beside the search bar. Finally, select the search bar (Input Text Field) again and go back to the Properties palette. Write a label in the Placeholder properties so that users know what they can search for. See? Easy.

How to prototype a mobile contact list – conclusion

Creating a mobile-first design is a great way to make sure you reach as many mobile users as possible. If you’re new to mobile-first design, start by designing a specific feature, such as a contact list, before creating a complete mobile app.

Creating a prototype of your list’s UI design will help you visualize your UI elements, functionality and layout. Justinmind’s mobile widgets and gestures will help you along the way. Download Justinmind now and prototype a contact list with our tips now!

Emily is Marketing Content Editor at Justinmind