Evaluating instant messaging UIs

Overview

In this write-up I compare the design of three instant messaging UIs: WhatsApp, Signal, and Facebook Messenger. I focus on the learnability, efficiency, and safety of specific functionalities of these applications including creating a new conversation, threading, searching, and deletion. I also explain principles of graphic design that I observed while exploring the messaging apps.

Consistency

All three messaging apps have extremely similar designs both in functionality as well as visually. As seen in Figure 1, there are many universal visual signifiers including the search bar at the top of the screen, the new message icon with a pen in the top right corner, the list of conversations ordered by most recent activity, etc. All three messaging apps utilize graphic design principles as well to increase usability. All contact pictures are aligned on the left. Repetition is used for conversation previews through layout and font. Functionality is also nearly identical; all three apps enable individual and group messaging, calling, attachments to messages, threading, searching through contacts, deleting messages, pinning messages, etc. This high level of consistency really enhances learnability and efficiency. Once a user has learned one messaging app, they have pretty much learned all three apps.

New Conversation

When creating a new group or individual conversation, all three apps have functionality for un-doing actions which increases efficiency. During group formation, a contact can be easily de-selected. There are cancel/back buttons at the top-left of every screen. Efficiency is further incorporated into all three apps' conversation-creation through being able to search contacts during this process. Both WhatsApp and Signal allow users to search by phone number in addition to name which increases user freedom. However, Signal's learnability for this functionality is greater as there is documentaion within the search bar (see Figure 2). All three apps use proximity to place selected contacts close together so a user can quickly realize which contacts they have selected.

Threading

All three apps have the functionality of replying to specific messages. However, as can be seen in Figure 3, WhatsApp and Signal both have a much more contrasting state for the press-and-hold-on-a-specific-message page than Facebook Messenger does. WhatsApp and Signal blur the entire app's background with just the specific message and its possible functions in focus. However, Facebook Messenger leaves the conversation background in focus with some controls on the very bottom of the page. Facebook Messenger's threading scheme is slightly less learnable because the reply control is less visible at first. It also is missing the classic reply-arrow icon signifier. Furthermore, Messenger uses less proximity for controls on specific messages; the reply-pin-more banner is further from the emoji controls (see Figure 3). However, Messenger's page does enable the user to not have to recall any conversation history. It stays in focus. The context of the action is always visible.

Figure 4 shows the different apps' reply-thread pages. WhatsApp and Signal provide greater contrast in their banners showing the message being replied to using color, which increases visibility of system status. Messenger does not do this.

All three apps also have the shortcut that swiping right on a message immediate produces a reply thread. This is not very learnable since there is no documentation to reveal that this shortcut exists, but once figured-out all three apps have the functionality, increasing efficiency.

All apps use alignment to align sender's messages on the right and receiver's messages on the left. This increases readability of conversations. Additionally, on the conversation pages, controls are kept at a minimum to increase simplicity of the page and to allow users' conversations to occupy the majority of the page.

Search

In all three messaging apps, the user can search by words or phrases in conversations as well as by contact names. However, the only app that makes this visually learnable is signal, by displaying previews of contacts and conversations. Messenger only displays contacts, and WhatsApp gives no signifier for this. Signal and Messenger also provide added efficiency through listing most recent contacts as suggestions.

Errors and Error Handling

As seen in Figure 6, both WhatsApp and Messenger increase safety from accidental conversation deletion by placing deletion under "more" rather than adjacent to other operations. Signal does not do this, but having deletion immediately available may increase efficiency. However, deleting a conversation is probably a rare action, so it makes sense that 2/3 apps prioritized safety in this case. All three apps also have confirmation dialogs that pop up after pressing "delete" in an attempt to increase safety and error prevention.

In the case where individual messages are deleted, WhatsApp seems to have the safest confirmation message. Its message displays in the background the exact message being deleted as seen in Figure 7. Additionally the confirmation contains who wrote the message to be deleted. In other words, WhatsApp displays the most system status. Signal's confirmation message is repetitive, decreasing efficiency when absorbing the page.

Although all three apps contain confirmation messages in order to enhance safety, deleting conversations and messages is not an un-doable action. This is a safety hazard as users can get used to frequent confirmation dialogs, making them not effective error prevention techniques. However, all three messaging apps display all delete operations in red font to provide contrast for dangerous actions and to make confirmation dialogs as effective as they can.