How do I list contacts?

Question

Let's suppose you have a chat mobile app that only sends messages.

I'm the user. I want to send a message to X.

• If person X is in my contact list, but doesn't have the app, I text her and the person automatically gets an invite to install the app.
• If person X is in my contact list, and has the app, I text her. Easy.
• If person X is NOT in my contact list, but has the app installed, I find out her / him username and search it. I click it, type. Easy.
• If person X is NOT in my contact list, but doesn't have the app installed, I invite him/her.

The most important requirement we have is that the contacts that already have the app installed should be visible and accessible.

I can also send a message to a company, but in that case I just pick the company from a list and write.

This is our current draft.

I think you can agree with me that it looks cluttered. How can we improve this?

Answer 1

Perhaps you should break down your features into separate pages. You should focus on doing one task per page since mobile device has limited screen estate. Doing one task only also has the benefit of simplifying the app and reduce the cognitive load on the user to learn your app.

This is a very typical layout for a messaging app. The contact list should occupy the entire page. The search function should perform a generic search for contacts, user and company name.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Try to borrow ideas from some these popular messaging app out there. They have probably conducted a lot of usability testing on their UI. Since the adoption rate is high, some of these design patterns have become a norm to the user. They don't have to spend extra effort to learn how your app should work.

That being said, you could probably add one or two design features to differentiate your app from the rest. As always test these design element and strive for clarity.

Answer 2

Each of the bullet points you've listed above describe distinct user tasks and goals. You need to think about which tasks require which interface elements. Start by identifying which tasks will be carried out most; to prioritize a task ask the these questions: how often is the task done? How many users do this task? Based on your answers, you can prioritize which tasks take precedence and which features are associated with that task. Example: texting someone who is in your contacts list and also has the app; this task will most likely be one of the most used tasks and be carried out by lots of users, if users actually use the app. This task requires easy access to a list of your contacts that have the app so you can easily text them. Other tasks may not need to be carried out as often, so you can hide or place elements for those tasks put of sight until they want to complete that task. So if inviting a user to the app is not normally done as often as the first task on my example, you should probably hide the associated elements until the user needs to invite a friend. Perhaps providing more button or design an interaction that allows this interface element to be revealed to the user when they want to complete this task.

Answer 3

My guesses are that on the main screen your users will need to have recent chats. Let's say that personal chats are more important than conversations with companies. It means that we need to make a focus on personal chats and put it on the main screen.

For contact book, I propose to separate screen with all existing contacts into two sections People and Companies. And add put invite action on this screen.