Icons8 UX: Web App Redesign for the Sake of Usability - bensonhaveracter

"Don't. Move. My. Englut. Round", — that's what I imagine our users shout during our usability testing Sessions.

Users detest when you move the controls they're accustomed. We had to have a truly upright reasonableness to do so. This article is a story stern the Icons8 redesign, our usability studies, iterations, and trade-offs.

You are also welcome to join the discussion on Product Hunt: we've just released the beta version for you to try.

Old interface

New user interface

The Problem: Few Clicks

I was look our stats. The question that popped in my headland was: why do people surf 3 times fewer pages on Icons8 than on a competition's website?

Hypothesis

I was puzzled. I mean, I had individual explanations:

• People can discovery the required icons quicker on our website.
• We've got a dynamic app, thus populate don't leave the page.

IT was too good to believe.

Number 1, we still send events to Google Analytics when masses do clicks.

Second, my intuition forced me to look for a less pleasing explanation.

The mind came from our friends at Usethics. They explained it with something I shouldn't have missed. Something that every UX designer should roll in the hay for the saki of the chore interviews.

Fitts' Natural law

Stripped from formulas, it says that the nigher the objects are, the better. Our app forces users to throw attention from one identify to some other crosswise the screen. It's a threatening cognitive task that makes users leave.

Our old app makes users switch 'tween left and right sides of the screen. That's a heavy psychological feature task that gets users tired and makes them leave.

Answer

The solution is straightforward. Open them close to the screen. Google Images does it for years.

Google Images shows the bigger version of the image much closer. I'd as wel advise retention the meta information closer to the wide image.

The job is that Google Images has a circumscribed functionality, while Icons8 offers a bunch of overgorge:

• Recoloring
• Applying boxes and circles
• Adding padding
• Adding text and overlays (like a weeny plus)
• Downloading in six-fold formats (some behind the paywall)
• Resizing
• Similar icons (for object lesson, variations of the home icon)
• The same icon in opposite styles (e.g., a home icon in iOS style, Material style, etc.)
• Generating HTML
• Working with the collections
• Generating fonts.

Moving Stuff By

It's e'er an option to move the functionality away:

• Dialog boxes
• Expanding sections
• Accordion menus
• Burger menus, etc.

The job is that mass don't expect this functionality. So, they don't look for it. Therefore, according to the information foraging possibility, they ignore all "show more" controls.

We tested to hide this functionality before. I ma physical pain watching the great unwashe struggle with it during the usability study. Users were nisus to generate a font spell IT was only two clicks away.

Long story forgetful, we have to show enough, but also hide out adequate.

Redesign

Here's the initial version of the redesign after a few iterations.

Icons8 app redesign, version 1. Screenshot from Sketch.

Apart from the new icon inside information, IT features the new visible style.

New visual style features the new logo, new colors, new typography, and new almost everything.

Collections

After several usability sessions, we've discovered some other trouble. When we asked multitude to break up a few icons and create a collection, they picked the icons of diametric styles without giving a thought about it.

They liked the result. In contrast, we were horrified. IT's like written material a single word with various fonts.

That encouraged us to reinvent our collections.

The old design draws the icons of different styles in the Lapp size making them look alike. Also, it splits a single collection into several lines, making them harder to compare.

Thus, we've made the collections horizontal.

A single line makes icons easier to compare

Also, we've shown the icons in the unconventional sizing.

Small icons are small. Large icons are large.

A light-headed decision to make collections horizontal LED to a monumental redesign and re-secret writing of everything.

One of the consequences of making the collections horizontal: redesigning the list. Users can drag the icons in any collection in the list.

Icon Inside information

Here's the icon details dialog.

Icon dialog

It's jolly! Moreover:

• It showcases all the effects we have
• IT has all styles (healed, with a horizontal scroll)
• It shows similar icons
• It groups the controls and leaves or s white space.

The simply problem is it's monstrous a bit. Once you open IT, it occupies your undivided screen.

Compacting

We put IT on diet, removing all the beautiful white quad. And decreasing the font size. And compacting the effects. Just it was still big.

The breakthrough came from one of our useableness study participants. She recommended that we require either other styles Oregon similar icons, not both simultaneously.

Indeed, if we have every last styles along screen and search for a home ikon, we have it in all styles.

We experience all styles in the list.

If we have a unvarying style selected, we have all similar icons on concealment:

A man-to-man style is selected. We experience similar icons in the lean.

Thank you, high-priced exploiter. Your observance allowed America to squeeze the icon details more twice:

New, clay-like version of the ikon details popup.

Classified Picture Styles

When we created our stream blueprint, we had four icon styles. We've got to a higher degree a twelve now. The worst part is the stylus name doesn't suggest the visual style. WHO knows what the stylus called "Dusk" looks like?

As yet, we've grouped them.

Redesigning the lean of styles. The newer ones are on the straight.

Download

We have a long story of searching for the perfect download control condition.

• Not a wizard that forces you to move forward each clip you download some other icon.
• Not a large form that eats away your screen.

We had something that passed our usability tests before, many or inferior. We've started beautifying it.

Our anile download options control, beautified.

The problem is you can only fit so many a download options in there. Generating fonts is unimaginable, for deterrent example.

So we gave upfield and created a dialogue.

Searching for a dialog

The last iteration looks this way:

Downloading PNGs

Paywall

Other Gourmandize

As this article balances between "long read" and "boring", please let ME just list each other improvements we brainstormed and (at to the lowest degree part) implemented.

• Removed the top menu
• Redesigned My Account menu
• Created the profile pictures
• Added the style previews on the home page alternatively of the new icons.

Likewise, we've optimized the performance. This is maybe the first time I have seen the AAAA rating happening WebPagetest.

Speed improvement. It's not over: the whole new API is coming this autumn.

Future Improvements

We are holding the next round of usability tests at the moment, in particular about the following issues:

• Approximately users make trouble finding the look bar.
• Some people don't puzzle our categories, taking them for the list of all the icons we have.
• Registration, login, and paywall are redesigned, but untested.

Your Turn

Working at Icons8 is uncommon. The people who usance Icons8 are designers themselves. Many an improvements came from our community. Therefore, receive to leave the comments and join in our forum.

Wanna attempt breaking stuff? Here's our sketch single file.

The redesigned Icons8 has just been discharged happening Product Hunt, wanted to unite the discussion – your feedback is wanted for future updates!

About the author: Ivan Wernher Magnus Maximilian von Braun, UX intriguer, founder of Icons8

Source: https://blog.icons8.com/articles/icons8-ux-redesign-usability-case-study/

Posted by: bensonhaveracter.blogspot.com

Share this post