DailyUI 013 – Direct Messaging

Messaging is something I do a lot. And when I say a lot, I mean a lot. I have at least 6 different chat applications installed on my phone that I use on a regular basis, so I have a few opinions on how it should be done.

I’ll start this off by saying that I don’t really think I nailed it here, but the general idea is there. The colour scheme is an inspiration from KakaoTalk – as I am working on a redesign project of this app. I figured why not see if I can find something better with this challenge. I will go through this from top to bottom.

First we have the action bar at the top. I went with a hamburger menu here. At the time I thought that it would be used to slide out your conversations view, but in hindsight I realise a back button would be a lot better. After that we have the recipients avatar and name. At first I had the name in the same faded brown as the hamburger and overflow icons, but it lost a lot of contrast and became harder to see. So I changed it to a brighter white to increase visibility. Then we have an overflow icon for all the options that don’t fit visibly and aren’t as important.

Then we have the actual chat view. Your own, sent messages gain the branding colour – in this case brown – to add more colour to the app and to further separate from the recipients’ messages. Their bubbles are in a darker grey. I did it like this as I felt that your own messages should be separated from the received ones, but maybe it should be the other way around? Needs further testing.

Anyway, as is common in many chat apps today is a “seen” marker, telling you when the recipient has seen your message, as well as the time right after that. You always want to see what time a message has been sent, and in my case I like more accurate times on the messages.

And lastly at the bottom we have the actual input field. I made this in the shape of the message bubbles , because in my mind it looks cooler if you press the send button and the message kind of seamlessly flings up. I made this brown as well to show that its your own messages and fit in with the overall theme, but looking at it now it doesn’t feel right. Maybe I should have kept it grey.

Then we have a yellow FAB as a send button. Yellow goes quite well together with brown I think, but this is also from the inspiration of KakaoTalk. As for other icons, I added a clip for media input. Here I completely forgot to add the emoticon/sticker button. Which is shameful as I am an avid user of stickers.

Oh well, at least I’m not as desperate as our sender here.