Functionality: 1) New mail is displayed by a green vertical bar on far left of message
2) Swiping/dragging to the right the message, buttons for “reply” and “spam” appear.
3) Swiping/dragging to the left, shows the delete button (not show in screenshot)
4) Write new mail by clicking on top right icon. When in “writing mode”, the button changes to “send”.
5) To view additional pages/functions, like “deleted”, “spam”, “sent mail” keep the mouse on top left button hovered for 2sec (or swipe down on the icon on mobile)
Changes: 1) The new mail (“Twitter – Design job position”), has the message title in bold as well.
@Matt I was thinking how to delete more than one message at a time, and did some iterations.
Thought when swiping/dragging to the left for the “delete” button to appear, to show select points instead of “favourite” icon to click on desired messages and change the “write new mail” button to a “delete” button.
Or another idea would be with “ctrl” pressed, to click on several mail messages to select them all, and again change the icon to a “delete” button.
@Alex Cican I like the idea of the "write new mail" changing. You could just have swipe to the right to select a message or multiple messages, then show the 3 options at the top where "write new mail" is.
Looks clean, nice job. One UX suggestion is that 'swiping' on a desktop environment (i.e. with a mouse) is not the easiest or cleanest interaction. It obviously works great on touch interfaces, but I've found users prefer clicks in desktop apps. Maybe hovering over a message slides it over to reveal the action buttons?
8 Responses
Pro
Alex Cican
Decided to design a mini email client myself.
Functionality:
1) New mail is displayed by a green vertical bar on far left of message
2) Swiping/dragging to the right the message, buttons for “reply” and “spam” appear.
3) Swiping/dragging to the left, shows the delete button (not show in screenshot)
4) Write new mail by clicking on top right icon. When in “writing mode”, the button changes to “send”.
5) To view additional pages/functions, like “deleted”, “spam”, “sent mail” keep the mouse on top left button hovered for 2sec (or swipe down on the icon on mobile)
Changes:
1) The new mail (“Twitter – Design job position”), has the message title in bold as well.
---
On other news, check out my guide to making a popular shot on Dribbble →
about 1 year ago
For me this is the best one I've seen. Great work :)
Wonder if theres a nice way to select more than one message?
about 1 year ago
Pro
Alex Cican
@Matt I was thinking how to delete more than one message at a time, and did some iterations.
Thought when swiping/dragging to the left for the “delete” button to appear, to show select points instead of “favourite” icon to click on desired messages and change the “write new mail” button to a “delete” button.
Or another idea would be with “ctrl” pressed, to click on several mail messages to select them all, and again change the icon to a “delete” button.
about 1 year ago
@Alex Cican I like the idea of the "write new mail" changing. You could just have swipe to the right to select a message or multiple messages, then show the 3 options at the top where "write new mail" is.
about 1 year ago
Will this project end at the PSD phase? Would love to play around with a (at least) clickable prototype.
about 1 year ago
Pro
Alex Cican
@Igor Kochajkiewicz I’m working on another mail client called “Mailer”: http://rnailer.com/
though it’s totally different than this shot
about 1 year ago
Pro
Samuel Couto
Such great UI work man!
about 1 year ago
Looks clean, nice job. One UX suggestion is that 'swiping' on a desktop environment (i.e. with a mouse) is not the easiest or cleanest interaction. It obviously works great on touch interfaces, but I've found users prefer clicks in desktop apps. Maybe hovering over a message slides it over to reveal the action buttons?
9 months ago