2

I would like to represent a file status (i.e. "needs to be reviewed", "done" etc.) through an icon. However, in flat UI you can't distinguish an actionable from a non-actionable icon due to lack of affordance like some chrome.

So far, I belive I have to stick to text represented information that comes in with more real estate and more turbulent layout due to different text lenghts. I thought of putting a little bit of chrome around actionable icons, but it would violate i.e. Googles Material Design that we use as a draft for our own interface conventions. Also, I believe that flat UI is here to stay so I don't want to break conventions too much.

My conclusion so far is that I lost the possibility to represent information through icons since they now need to be always actionable or does anyone has an idea how to solve this dilemma?

Improve this question

2 Answers 2

Reset to default
1

I don't understand your conclusion that icons cannot be actionable. My email program distinguishes emails that I've read from those I still need to read using pictures of envelopes that are either closed or not closed. A icon with a closed envelope is a call to action to me to open it. In addition, I can set flags on my emails with various colors..

Why can you not put an red exclamation mark on files that require action? Something like this: http://www.iconarchive.com/download/i60520/custom-icon-design/pretty-office-9/file-warning.ico

The need for flatness doesn't mean that you can't overlay annotation marks like a star, an exclamation mark, a dot etc.

Improve this answer
3
  • my concolustion isn't that icons can not be actionable but instead that icons have to be always actionable. Taken your envelope example: An open envelope marks the mail as read. So it's not a CTA any more like a close one that says "open me", means it doesn't have to be actionable. Anotation marks are actionable, so that's not the problem.
    – Alexej Froehlich
    Aug 13, 2014 at 10:42
  • 1
    When you have a pointing device, you can distinguish when you mouse-over or stylus-over, by changing the visual appearance of actionable icons. When there is no such thing (android phone for example) and your colors are constant, you can make the color of non-actionable icons the same color as text, otherwise make it an actionable-theme color. I agree with you that it's not ideal, hopefully you can leave clues to your users on the basis of the positioning and grouping of actionable vs non-actionable icons on your interface. You can make the same comment for text, some can be clicked, some cant
    – Mishax
    Aug 13, 2014 at 10:52
  • Thx Mishax, coloring is probably a good idea. I also already thought about positioning as semantic separator between info and action. Though I'm not sure how well it's applicable on responsive interfaces where you may have very little space left on a tiny phone screen.
    – Alexej Froehlich
    Aug 13, 2014 at 11:00
0

There are visual conventions in flat UIs to provide affordance. You don't have to rely on chrome or skumorphic design to do that.

For example: I've seen this small arrow icon used on flat UIs to indicate that a certain element is interactable.

Arrow icon on Strapline

One solution would be to overlay a similar flat icon over your interactable elements, and use the absence of the icon to signal non-interactable visual objects.

Improve this answer
7
  • To your last scentence: I had something similar in mind by providing those icons with a button chrome. So it would be basically the old-fashioned icon tool bar. But as I already stated, that would violate Google Material Design guidelines that we use as a darft. We could ignore it but I believe that we will see more and more chromeless actionable icons emerge in the future, so I'm actually OK to stick with chromeless icons. I'm just not sure if I want to lose the possibility to display info with an icon (that wouldn't be actionable due its info nature).
    – Alexej Froehlich
    Aug 13, 2014 at 12:05
  • I wouldn't use button chrome. That would violate the guidelines because it's skeumorphic. Instead I'd use something that wasn't a reference to a real world material.
    – Racheet
    Aug 13, 2014 at 12:58
  • I think fo button chrome as in Material Design guidelines: google.com/design/spec/components/buttons.html
    – Alexej Froehlich
    Aug 13, 2014 at 13:07
  • I'm a little confused. That page doesn't use the word "chrome" anywhere, and does actually advocate using shadows to make buttons stand out in busy layouts. (see section "raised buttons"). Also, I understood your question to be about marking icons as actionable, not buttons. Was I wrong?
    – Racheet
    Aug 13, 2014 at 13:11
  • Well probably we have a different definition of "chrome". To me, "chrome" means anything beside text that emphasizes affordances. So the shadows are already "chrome" to me. By saying "adding chrome to icons" I mean "adding shadows like the buttons around the icons"... Hope that will clear it up a little bit :-)
    – Alexej Froehlich
    Aug 13, 2014 at 13:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.