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
9 months ago
Maybe the (+) button can be put on the left of the input so that it don't interfere with the send button?
@Daniela Alves Wow super clean. love it. :)
@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 :)
The colors, woow!!
Only thing i don't like is the outer glow on that configuration button.
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 :)
@Daniela Alves pretty sweet, Daniela!
Thanks @Fabio Benedetti :)
@Daniela Alves yeah, not the same style but in it's own little button style :)
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) :)
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
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.
This looks good, really good. :) Btw, great feedback @Bruno Martins.
Thank you @Eduardo Santos :)
8 months ago
7 months ago
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter