Classes-Before-KristiI had a phone interview recently with a company that sells student and instructor based web applications and this is the type of app I have redesigned a lot, so I wanted to take a minute and talk about how you can use icons to help your users navigate an app and give it more visual interest, resulting in a more pleasant experience ideally.

I took a couple of hours to redesign this screen they have online in a demo, and then will show you some examples from my past work, all heavily dependent on icons to both guide the user and make mundane tasks more visually appealing.

The Problem in the Intranet

dbdatafinder-beforeIn the enterprise space, dealing with reporting, tasks and lots of data to manage (like having to comb through millions of legal or medical records, for example), it is easy for product managers to get so focused on just trying to get all the features developed that visual aesthetics take a backseat. Even in 2016, there are millions of homemade apps being used that don’t have any user experience people working on them, or even a good UI designer.

These apps look antiquated to the average non-corporate social media user with the latest phone in their pocket, but the reality of paying hundreds of thousands to millions of dollars just to update an operating system, not to mention hardware and all the software employees use, all interdependent on the OS version and hardware specs, results in simply not updating sometimes, due to these proprietary apps that would have to be re-coded, in an endless spending loop. And we haven’t even touched responsive or mobile app additions. Cha-ching! Boring, I know, but real talk. 🙂

How Icons Can Save the Day

So what is a designer with good intentions to do? Well, you can start like I have here, with a cosmetic refresh. Nothing I have done to this screen, that an instructor uses to create and manage assignments in a class, alters the back-end functionality. This type of visual change is often done when I rebrand something, with new features and functional changes being done in a second and third pass/later release. Having a fresh new view and starting to get some user feedback usually gets developers and managers quite enthused to make deeper changes, so the visual adjustments aren’t just “to look pretty.” There are psychological benefits for both your co-workers and end users of the app.

My intention here was to replace some of the text-based actions with icons and strip the screen of unnecessary clutter. Here is the Before version of the screen.

Classes-Before-Kristi

Please note: I blurred some of their trade names because I don’t want to embarrass anyone with this example. It saw a good opportunity to provide this lesson on the power of icons. This is not the way things would work in the real work environment, where many questions would be asked and collaborations with other team members would take place before redesigning anything, especially in a suite of products.

These notes describe the issues I saw, that I wanted to adjust by adding icons and shuffling some things around.

ClassRedo

 

The Class Assignments screen After Kristi.

Classes-Kristi

There were a number of redundant tasks, like duplicating content that I am not sure should be done quite this way, but since this is just a version for a blog post example I didn’t overly worry about that like I would in the real exercise.

You can read some points about how I made this screen easier on the eyes in these notes:

Classes-Kristi-Notes

This is the kind of work I have done over and over for enterprise apps, and I enjoy it. It’s like remodeling a room and giving it a fresh new look, so very satisfying. Below are some more examples of how I used icons in different apps to make them easier to navigate, reduce screen clutter and make them more visually interesting for users, among other things.

Security Apps

Icons are often used in marketing collateral and on packaging, manuals, posters and printed things, which is why I like them created as vectors in Illustrator, as you can see in these examples from Sourcefire.

sourcefire-after-home1

sourcefire-helpcenter

sourcefire-manualcover

Six Sigma Apps

At Sigmaflow, I used the icons similarly in the Windows-based apps and the web apps, so users always had that familiar navigation area to go back to if they felt lost. This helps increase their confidence when using a new application from the same company.

insights2_home

sigmaflow_sim1

Large Product Suites

At PentaSafe, I had to have an icon designer custom-design hundreds of icons in different sizes (how far we’ve come in 15 years!) and so I only had vectors made for a sub-set of them that I knew I needed to use large. Ugh, ico’s. 😉

Note here, my goal is almost always to reduce screen clutter and guide people in performing their tasks, as opposed to just making them figure things out through trial and error as most designers have had to using Adobe products since the beginning. 😛  That is why there is a tree view (which some IT users preferred) and a real language view here, either of which could be closed down with the X button and not in the way.

pentasafe-all_vesas

ps_vsaunix_home

Bottom line, nobody’s got time for boring software, I don’t care where you are. Gartner backed me up when I was at PentaSafe, as I noted in this clip from a user test report:

unnamed

Utility Apps

This Windows app is pretty simple compared to some – it is a database finder. This was the app BK: Before Kristi. 

dbdatafinder-before

If this doesn’t convince you of The Power of Icons (and less screen clutter) nothing can. Why are you here again?

dbdatafinder-prototype

Products and Sites

I like to use icons in web/marketing design to help people recognize concepts at a glance, like these four products available that go with The Content Formula book that we also designed.

tcf-icon-sample

In the book itself and this online ROI Calculator I designed, each formula was represented by an icon, to help tie the formula name to a visual, which can aid memory and recall for learners.

The_Content_Formula

And you can even see them move in this video we produced! I love this little video.

Where Do Cool Icons Come From?

Most designers know icon sets help a lot, but are almost never just “ready to go”. I downloaded icons by IconBunny from my Envato Elements account for my example above, and deliberately did not recolor them to move fast. I did have to hack some together to make what I needed and in reality would have created a unique color scheme. They are a bit too “primary colors” for my personal taste.

You can also search for icon sets at Creative Market, GraphicRiver or use flaticon.com to pull your own set together, which is what I did for my Shirtee app. Of course you need to make sure you have licensing appropriate for your use.

Now get out there and embellish your wares, kids! 🙂

Leave a Reply

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