Hollow Icons Are Still A Bad Idea

Dave Wiskus shares the methods to his madness for the note-taking app, Vesper.
First off, Dave and his team members put a lot of time and effort into their creation. That said, I still think the rationale behind icon outlines is bad:

At first glance, it looked as though the fashionable thing to do in iOS 7 would be to take your existing icons and just turn them into outlines. That ends up looking pretty good for most glyphs, but instead of mimicking the style we wanted to emulate the spirit. It’s not about being thin or wispy, I don’t think. It’s about lightening the UI so the content can stand out more.
His rationale sounds good, but he still implemented outlined icons:
vesper_icons_are_bad.png
I’m going to once again quote Aubrey Johnson’s observations on the cognitive issues with hollow icons I quoted back on October 2nd:
Take a look at the example above. The red lines indicate areas where cognitive load is occurring. Your brain traces the shapes on the first row an average of twice as much. Your eye scans the outside shape and then scans the inner line to determine if there is value in the “hollow” section.

Icons without this empty core are processed as definite and only the outer lines are processed. Depending on the outline of the shape, this happens pretty fast. No matter the shape, though, the hollow icons take more time to process.
If I may be a broken record,
Hollow icons are an example of form over function.
Hollow icons are an example of form over function.
Hollow icons are an example of form over function.
Hollow icons are an example of form over function.
Hollow icons are an example of form over function.

Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax