Friday, November 15, 2013

UX Design: Outline versus Solid Shapes

I read an interesting article regarding that the brain takes more time to process an outline than a "filled-in" icon.
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.
While I agree with this completely within the context of the article - designing mobile apps - where people are often scanning your app while moving, or being in a crowded environment where they will devote even less of their attention then they do while sitting at their desk, I fear that Aubrey Johnson may be taking the point a little too far. He writes:
Choosing to use hollow icons for the sake of lightness / very-modern aesthetic is not the issue, it’s that to sacrifice the usefulness of what an icon does (aide in reading speed) for aesthetic feeling is really bad. Don’t follow bad design decisions to appease a platform.

Design above it.
Yes people will scan the solid shape faster than the outline, and if they are hurried and distracted will more likely miss or have to concentrate more on the app to perceive the icon, but this ought not be taken as a hard and fast reason to not use outlined icons - even in mobile apps. At issue: (from an IA perspective) is "how are people using the apps?" and from a UX perspective it would be: "does the [less readable] iconography increase the users enjoyment/experience more than the lack of usability detract from the experience?"

Combining the two questions would be: are there user personas which are negatively impacted to the point (from the reduced scannability) that they will either not be able to use the app or would reject it? IF that happens then absolutely one must "sacrifice" the hollow icons and follow the author's advice: "Design above it."

No comments:

Post a Comment