We have conducted an anaysis of most popular mobile chat UIs to see common visual patterns: Skype, Facebook Messenger, Whatsapp, Google Hangouts.
The common features for the chat input field would be:
1. Chat input is places in the bottom of the screen;
2. Chat input field in inactive state has a CTA “Type a message here”, “Type a message”, “Write a message…”, “Aa” in a subtle grey colour to let users know they can insert their message in the field;
3. Emoji are placed within the chat field (as emoji are part of text too);
4. If the chat offers sharing photos, stickers, etc, they are incorporated within the chat input field too;
5. ‘Send’ button is placed next to the chat input field; sometimes ‘Send’ button appears only after the chat inut field has a message or emoji inserted;
6. ‘Your’ messages are displayed on the right side of the screen, while ‘your friend’s’ messages are displayed in speech bubbles coming from the left side of the screen. ‘Your friend’s’ messages are marked with their avatar and /or username;
7. Other chat actions like video or voice call are places on the top banner, next to ‘Your friend’s’ username.
Various types of communication input methods are used for services with large communities. Since both service itself and communication between users are important, the parallel experience designs emerged. It can be observed within services like Instagram, Instagram Live, Instagram Stories, Faceboo, Facebook Live, etc.
The common patters for the parallel experience designs are:
1. Message input is places in the bottom of the screen;
2. Message input field in inactive state has a CTA “Comment”, “Write a comment…” in a subtle grey colour to let users know they can insert their message in the field;
3. There is a limited amount of reactions displayed at a message input field (normally either would be heart of thumb up as an approval sign, with Facebook allowing users swipe through 6 reactions);
4. Message input would either cover up the main experience, or, as recently intoduced by FB, messages and reactions would be overlayed with the primary experience;
5. Unlike chat patterns, all messages are coming from the left side for languages that read left to right;
6. Most apps would only offer mobile portrait experience.
Split screen Android experience and Smart Notifications
Somewhat similar to parallel experience messaging, sprit screen on Android lets user go through 2 experiences at the same time. The difference between these 2 is that the latter doesn’t overlap screens, but rather lets user toggle on the screen the sizes of the services they need to see more of.
Smart notifications also let user respond to chat messages without leaving particular service’s experience.
April 12, 2017