Just playing with some UI.. Will make some changes on colours and style as soon as I get some more spare time.. I'm very into making some experiences mixing flat with some more complex UI.. So I'll maybe drive this in that way..
Think this could be way more compact. This way, a tall iPhone 5 screen only fits no more than 4-6 messages. If the keyboard is visible, this means than only a couple of messages may be visible.
One way would be to make the date separators both more subtle and have a smaller margin. They’re given too much visual prominence and emphasis, when they’re not the most important content that makes users come to this screen.
One other way would be to get rid of the avatars.They add character, but aren’t absolutely necessary in a one-to-one chat.
@Nico Tzogalis, agree that the (+) might be too close to the button ;)
@Michael Shanks, however I wouldn't give it the same style as the send button just because it can't have so much prominence.
@Eelco Guntlisbergen, that is just the active state for when you touch the icons ;)
@Paulo Zoom, thanks for the feedback :) I agree that all the content needs to be much more compact, this is just the first general approach, I haven't been UX friendly at all at this point yet :p yes, date is not that important, but getting rid of it doesn't seem to be the best option though. Personally it makes me crazy when chats don't show me date and/or times (time is important as well). If this was for a client, I'd maybe get rid of the avatars like you suggest. However, in this case, I might include it in an IOS bundle (not sure about this really) and I need a lot of UI elements to include :) Let's see if I have time to improve it soon ;)
Overall, so good to get loads of feedback guys, really helpful :)
I agree that it needs to be more compact and the (+) button needs to move out to the left (just look at the default messages app on the iPhone, it's way more simple to see where to tap and it doesn't interfere with the send button) you could put it in gray as it is but I think it could look better with the same shading/style as the send button.
I personally like when I can see the date and time of something in a chat as well so that's awesome in your interface.
Loved the part were the notifications bubble cuts a bit of the menu icon (it's a subtle detail, but a really nice one).
Overall it looks really cool Daniela! It's easy to tell your style (these colors are truly unique in you) :)
The (+) button definitely needs to get out of that right part. I need to figure out the right style fot it though. It's just that I really like to see it inside the input. When we add an image it is actually a part of the message, we just can't type it. That's why we need the '+' and I really wanted it to try it as a part of the input.
The (+) button will be a daunting task @Daniela Alves. I understand why you want it to be inside the input, in fact if it was me I would want it inside as well... but in terms of usability it's a hard compromise between looking good and ease of use. But for example Facebook as the smileys icon in the same place as your (+) button, and I honestly never heard a complain about the positioning of that particular button. I think in the end it will always be up to you and whoever really uses the app. The size of the tap area and the spacing between the send button could improve the usability though.
19 Responses
Pro
Daniela Alves
Just playing with some UI.. Will make some changes on colours and style as soon as I get some more spare time.. I'm very into making some experiences mixing flat with some more complex UI.. So I'll maybe drive this in that way..
Check full view
3 months ago
Pro
Nico Tzogalis
Beautiful colors.
Maybe the (+) button can be put on the left of the input so that it don't interfere with the send button?
3 months ago
Pro
Sandeep Sharma
@Daniela Alves Wow super clean. love it. :)
3 months ago
Pro
Avinash Tripathi
awesome work!
3 months ago
Pro
Michael Shanks
@Nico Tzogalis i agree, right now the (+) can be mistaken for a delete button so the user might not tap it unless they look close enough.
i would move (+) out of the input box similar to the (send) button and move to the left as Nico mentioned.
apart from those small things the colours, interface look very slick and easy to use, nice work :)
3 months ago
Pro
Eelco Guntlisbergen
The colors, woow!!
Only thing i don't like is the outer glow on that configuration button.
3 months ago
Pro
Paulo Zoom
Think this could be way more compact. This way, a tall iPhone 5 screen only fits no more than 4-6 messages. If the keyboard is visible, this means than only a couple of messages may be visible.
One way would be to make the date separators both more subtle and have a smaller margin. They’re given too much visual prominence and emphasis, when they’re not the most important content that makes users come to this screen.
One other way would be to get rid of the avatars.They add character, but aren’t absolutely necessary in a one-to-one chat.
3 months ago
Pro
Daniela Alves
@Nico Tzogalis, agree that the (+) might be too close to the button ;)
@Michael Shanks, however I wouldn't give it the same style as the send button just because it can't have so much prominence.
@Eelco Guntlisbergen, that is just the active state for when you touch the icons ;)
@Paulo Zoom, thanks for the feedback :) I agree that all the content needs to be much more compact, this is just the first general approach, I haven't been UX friendly at all at this point yet :p yes, date is not that important, but getting rid of it doesn't seem to be the best option though. Personally it makes me crazy when chats don't show me date and/or times (time is important as well). If this was for a client, I'd maybe get rid of the avatars like you suggest. However, in this case, I might include it in an IOS bundle (not sure about this really) and I need a lot of UI elements to include :) Let's see if I have time to improve it soon ;)
Overall, so good to get loads of feedback guys, really helpful :)
3 months ago
Pro
Fabio Benedetti
@Daniela Alves pretty sweet, Daniela!
3 months ago
Pro
Daniela Alves
Thanks @Fabio Benedetti :)
3 months ago
Pro
Michael Shanks
@Daniela Alves yeah, not the same style but in it's own little button style :)
3 months ago
nice :)
3 months ago
Pro
Bruno Martins
I agree that it needs to be more compact and the (+) button needs to move out to the left (just look at the default messages app on the iPhone, it's way more simple to see where to tap and it doesn't interfere with the send button) you could put it in gray as it is but I think it could look better with the same shading/style as the send button.
I personally like when I can see the date and time of something in a chat as well so that's awesome in your interface.
Loved the part were the notifications bubble cuts a bit of the menu icon (it's a subtle detail, but a really nice one).
Overall it looks really cool Daniela! It's easy to tell your style (these colors are truly unique in you) :)
3 months ago
Pro
Daniela Alves
Thanks a lot you @Bruno Martins =)
The (+) button definitely needs to get out of that right part. I need to figure out the right style fot it though. It's just that I really like to see it inside the input. When we add an image it is actually a part of the message, we just can't type it. That's why we need the '+' and I really wanted it to try it as a part of the input.
Glad you like it :p
3 months ago
Pro
Bruno Martins
The (+) button will be a daunting task @Daniela Alves. I understand why you want it to be inside the input, in fact if it was me I would want it inside as well... but in terms of usability it's a hard compromise between looking good and ease of use. But for example Facebook as the smileys icon in the same place as your (+) button, and I honestly never heard a complain about the positioning of that particular button. I think in the end it will always be up to you and whoever really uses the app. The size of the tap area and the spacing between the send button could improve the usability though.
3 months ago
Pro
Eduardo Santos
This looks good, really good. :) Btw, great feedback @Bruno Martins.
3 months ago
Pro
Daniela Alves
Thank you @Eduardo Santos :)
3 months ago
Pro
Tim Parker
Lush
about 1 month ago
Pro
Series Eight (via Mario Va...
fit
12 days ago