Subscribe to
NSLog(); Header Image

MailDrop 2 Import/Export Icons

md2_comparison.jpgWe're working with a designer (more details [credit] on who and whatnot after we're done) on icons for MailDrop 2.0, and we're having a bit of trouble finding "import" and "export" icons that we like. The body of the arrow is easily hidden by the front recipient on export, and that bothers me. I posit that the arrow is not as easily recognized as an arrow in that fashion (example c to the right). In the other examples, though, the arrow kind of looks like a hat.

I'm not sure which is best. What do you think is the best import and export pair? Ignore the "Send Mailing" icons in d and e - we're going with d, I think, which looks lighter and has less of a shadow.

15 Responses to "MailDrop 2 Import/Export Icons"

  1. E looks better than D, and both of those look better than the others. The additional shadow on the arrows adds clarity and helps the eye catch the meaning much faster. To be quite honest, even the import/export icons in E confuse me. At first glance it looks like a hodge-podge of colors.

    Some suggestions:Instead of orange and green FBI-type silhouettes, try the "@" symbol to signify email addresses.Instead of using green for both arrows (import & export) try using a different color for each. Green for import, blue for export. Etc...

  2. Jeff, the shadows are precisely what we have problems with: they make the icons too dark for our tastes. FSS is all about being "bright."

    We will not be using the "@" symbol, because we export and import more than email addresses. We export/import recipients. In other words, people - first name, last name, email address, street address perhaps, etc.

    We won't be using different color icons, either. I don't believe I have yet to see an application that uses different colored arrows for import and export.

  3. Personally, I'd avoid import/export arrows on the vertical anyway. It implies a hierarchy that isn't there -- up implies 'more important', which is something that may or may not be true depending on the user's subjective point of view. And in this case, as you point out, the base of the upwards arrow slots in so neatly with the tops of the heads that it becomes a hat.

    On the other hand, a left/right axis for your arrows would get the in/out factor across more clearly. It would also be consistent with your send mailing icon -- a rightwards facing arrow for something leaving your app, and either a leftwards facing arrow for something coming in, or a rightwards arrow at the left of the image pointing in towards the icon.

    Of course, YMMV 🙂

  4. My vote is on C, I like the arrow not cutting off Mister Orange's head.

  5. Scott, the right/left axis is reserved for "send mailing," an entirely different action than export. I believe it's fairly common to use up and down arrows for import/export. It's also fairly common, in drawing programs, for it to mean "move forward" and "move backward," but since that paradigm is completely non-existent, I think people understand that they mean import/export.

    It's also important to remain consistent with MailDrop 1.x.

    Please, future respondents, simply pick A, B, C, D, or E and if you're super-generous, reasons for doing so.

  6. C is my favourite as well.

  7. My Vote is also C.

  8. I think part of the problem, especially with the export (up arrow) icons is that the widest part of the arrow is too close to the width of the three heads. You wind up relying too much on the color to differentiate the shapes (a color blind person would have real trouble with these icons).

    I think that's why the down arrow works slightly better. I'd try moving the arrow up vertically (to create some white space), or make the arrow wider. Or both. And if the root of the arrow is wider/narrower than the head it'll stop looking like a hat.

  9. C or B. I like the visual style of C purely based on aesthetics, but when you weigh in that its an icon design, the visual style of FSS, it boosts B. I prefer the way it looks with the arrow covering more. The other arrow alignment in A looks like it is pointing into the yellow silhouette's head.

  10. C.

    Like others, I don't particularly care for the guy's head being cut off and I like the suggestion for making the arrow wider, at least at the base so it's a little more bigger (there's some winning grammar) than the guy's head.

  11. Haven't read all of the other comments, but I really feel that B is the way to go due to the reduced depth in the shading. Two reasons:

    1. We perceive in 3D. The heavier/deeper the shadow, the more time the eye/brain spends analyzing the Z axis. The brain is saying "what significance does this depth have?"

    In some cases, extra depth in the Z axis is valuable. But for a simple toolbar icon (where the overriding goal is speed), I think it takes away more than it adds. This is also why I prefer D for the envelopes.

    2. The extra shadow create a fuzzy effect around the object at this size. Makes it harder to separate the individual shapes.

    Mail itself has very shallow shading in the toolbar icons, but I don't know if it's for the same reasons.

  12. Actually, it s hard for me to see "people" at all in those logos sorry... once that's clarified, you might be able to find a better solution for the arrows I think.

  13. I have difficulty seeing "people" in those icons as well. the colours were all so similar. I thought it was a collection of arrows at first glance and not people at all. too colourful. Also, it's very complex. too many "people" in the icon. I'd consider reducing down to two people, instead of three.

    But if i had to pick one of those, i'd pick C.

  14. Usually, 2 people are 2 people. 3 people are a group, though.

  15. Hmm, (d) does cover the head of the avatar, which pokes me the eye a little.. woudl go for (c) give I can have the other (third) icon of the lower two options as well


Trackback URI | Comments RSS

Leave a Reply

Please abide by the comment policy. Valid HTML includes: <blockquote><p>, <em>, <strong>, <ul>, <ol>, and <a href>. Please use the "Quote Me" functionality to quote comments.