{"id":203127,"date":"2020-02-15T13:19:41","date_gmt":"2020-02-15T10:19:41","guid":{"rendered":"https:\/\/ww-vb.mine.nu\/w108\/what-designers-can-learn-from-etsys-minimalist-icons\/"},"modified":"2020-02-15T13:19:41","modified_gmt":"2020-02-15T10:19:41","slug":"what-designers-can-learn-from-etsys-minimalist-icons","status":"publish","type":"post","link":"https:\/\/hameed.nwar.uk\/sa\/what-designers-can-learn-from-etsys-minimalist-icons\/","title":{"rendered":"What designers can learn from Etsy’s minimalist icons"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n

Did you know TNW Conference has a track fully dedicated to exploring new design trends this year? Check out the full \u2018Sprint\u2019 program here.<\/em><\/span><\/p>\n

No joke, I go on Etsy every single day. I browse Instagram as much as any other person, but when that becomes tiresome, I open up Etsy to casually scroll. I think what makes me come back to it repeatedly, without being triggered by a notification or alert, is that there\u2019s a mix of finding what I\u2019m looking for and being surprised and delighted with things I wasn\u2019t expecting.<\/p>\n

Nir Eyal talks about the importance of the surprise and delight model (as related to Pinterest) in his book\u00a0\u2018Hooked<\/em>.\u2019\u00a0<\/span>When users get something extra out of an experience that they weren\u2019t expecting, they come back for more.<\/p>\n

That\u2019s how I feel about Etsy. I may start by casually browsing for handmade ceramic mugs, and suddenly find myself in an awesome vintage sweatshirt shop. It\u2019s always fun, and the experience feels seamless.<\/p>\n

But the point of this post isn\u2019t to delve into Eyal\u2019s model for stellar product design, or the fun of shopping for homemade trinkets when you\u2019re bored, this post is about\u00a0iconography<\/p>\n

Icons have been around forever. According to some sources, Saint Luke the Evangelist created an icon of the Virgin Mary and popped it on a panel for people to carry around with them. Cavemen and Egyptians used them too. Icons were an easy way to communicate with those around them and created a shared written language for people to use.<\/p>\n

Nowadays, icons are arguably more important than ever as we continue to push the boundaries in digital design. We\u2019re trending toward minimalist designs that feature extreme amounts of whitespace, as well as usable products that sit on tiny screens like Apple Watches. We don\u2019t have space for tons of text, so instead, we rely on icons to convey what we want users to do, how to do it, and when.<\/p>\n

\"\"
<\/a>Etsy icons across multiple platforms.<\/figcaption><\/figure>\n
\n
\n
\n
\n
\n

So what does Esty do well with their icons?<\/h2>\n
    \n
  1. \nThey include text labels.<\/strong>\u00a0A heart can mean so many things\u2026like, favorite, love, etc. Etsy makes it clear that hearts mean favorites on their site, so the user doesn\u2019t have to piece that together through trial and error.<\/li>\n
  2. \nThey alter the state depending on where the user is in the flow.<\/strong>\u00a0On iOS, the icon becomes a solid shape when the user has pressed it. When you\u2019re on the home screen, the home icon is black, and when you\u2019re on your profile, the profile icon is black. This gives the user tactile feedback that they\u2019ve made a decision and completed a task. It helps reinforce the behavior associated with using that icon.<\/li>\n
  3. \nTheir icons are simple.\u00a0<\/strong>No crazy details, intense drop shadows, wild colors, or extravagant animations. The focus is on assisting the user in completing the task, not distracting them with fluff that doesn\u2019t help them.<\/li>\n
  4. \nThey play off conventional shapes.<\/strong>\u00a0The cart icon looks like a grocery cart, the profile icon like a head and body, and the home like a little house. These are not only reflecting real-life items, but more importantly, the icons users see in other apps and sites they visit daily. This takes the burden off of the user in learning a new design system and helps them upskill quickly.<\/li>\n<\/ol>\n

    So what does that mean for the rest of us?<\/h2>\n
      \n
    1. \nInclude text labels.<\/strong>\u00a0Your interface may not look as sleek and clean as it could, but it will be way easier for the user to engage with. Eventually, you can pull an Instagram and phase out text once users are fully accustomed to how things work.<\/li>\n
    2. \nKeep it simple.<\/strong>\u00a0Some people are saying that skeuomorphism is back, and I don\u2019t really know if I agree with that. I think a very muted version of skeuomorphism is back\u2026more like skeuflat or flatmorphism if anything. Overcomplicating icons with hyper-realistic shading, color schemes, and highlights just makes them harder to see clearly (particularly from an accessibility POV).<\/li>\n
    3. \nReduce, reuse, recycle.<\/strong>\u00a0Icons aren\u2019t the time to get wild and crazy with brand new things no one has ever seen before. Most of the time, it\u2019s best to use symbols that users see elsewhere and feel comfortable with.<\/li>\n<\/ol>\n

      This article was originally published on UX Collective by Cara Lamason, a San Francisco based product designer passionate about creating data-driven<\/span>\u00a0experiences that make life easier. You can read the original article here.\u00a0<\/em><\/p>\n<\/div>\n<\/div>\n<\/section>\n<\/div>\n<\/article><\/div>\n