Navigation Icons

This is a proud yet delayed moment. I just couldn’t wait any longer to show the navigation icons I have for my new website design. The navigation is one of the website components that anyone visiting the site is going to have to interact with. So it has to be easy to use and not annoy your visitors. Oh, and looking nice never hurts.

Navigation-with-Icons

So lets go over some of the main points to consider when crafting the navigation. Then I’ll blather on about icon design in collaboration with text navigation.

Simple Navigation Titles

One word pages have several perks for navigation.

  • Easy to identify as seperate 
  • Simple naming schemes
  • Fast to scan and understand

Easy

I’ve had people in the past want to describe a page using several words, and I fight them tooth and nail on it. Not only does it clutter the navigation, but it confuses people. Often times visitors think that more than one word means more than one link or page. Distraction hits, they aren’t 100% sure where to click anymore. The irony of this is that people proposing multiple word navigation titles often do so because they think one word is unclear and might confuse their website visitors. Meanwhile those additive naming schemes cause the very problem they were created to avoid.

Naming Schemes

Page names nest. For example this blog article link is RachelBlueArt.com/blog/navigation-icons/ The post title is a child page of the blog. Have you ever noticed what a nice brief word ‘Blog’ is? What if I named the page ‘Rachel Blues’ Conversation Corner’? How much longer did I just make my link? I made it ginormous. Plus I lied. I’m not here for the conversation, I’m here to type at an imaginary internet audience. The only conversation going on here is between the voices in my head. So while it could be a nice sounding marketing ploy to call it Rachel Blues’ Conversation Corner it’s just too much to say, too much to remember, and to darn long. (plus it would be complete hogwash). And if you need one more reason, refer to bullet point number 1.

Fast

As a final note, I beg of you. Pleas don’t try to be clever. I’ve seen people name their blog ‘Words’ and their About page “Espresso”, and the internet is full of other examples. Yes a blog is made up of words, and you can feel free to write in your about page how much you love espresso. But as page titles, maybe not the best choice. From what I understand this happens because people realize they can name the page anything they want (not understanding that industry standards exist for a reason) and then just throw common sense out the window. Think of Exit signs as an extreme example. It says what it is, and the only icon is there to help point you in the right direction. Remember that people don’t have to visit your website. They are not blessed by being there, you a blessed to have them. A visitor can leave at any time. Don’t make them frustrated and give them a reason to leave any sooner.

When I find myself wandering the internet and land on a strange new site, sometimes I feel lost. I look around the home page and have absolutely no idea what the company does. But that’s okay, because I can look to the navigation, click on the About page, and read what they do. As long as the copy is good my questions are answered. But either way, at least I’m in the right place.

Highlights and Drop Down Menus

Highlights

You really should have them in my opinion. It’s nice to be able to look up at the navigation and know instantly what page I’m on. It’s also nice to hover over the other pages with my mouse and see each one visibly respond to let me know it’s being considered as the next destination. The tricky bit is not doing something really annoying and flashy because you think it’s nifty. The primary goal of any design is functionality. If you allow the creative element to disturb the functionality the design has gone backwards. Navigation icons that jump, spin, pop, change size, sing, or make weird noises when you hover over them get to be annoying really fast because it makes the original goal of clicking on the navigation and going to a different page a little buggy. Plus it’s distracting  No one goes to a website for a mouse dance or game of hide and go seek. They are most likely there for information, and they want it to be really easy to get. Not a quest.

With simplicity in mind I created my selected highlight to be in bold and have a bit of color. Where as the hover highlight is nearly the same, just without the blue. Without any hovering or selecting they’re just grey. Some of you back there in the peanut gallery might be thinking “boo, that’s boring! I want something with pizzazz  Where’s the wow factor?” But the navigation isn’t the place for pizzazz. It’s not meant to distract. It’s meant to work and help people understand where they are on the website, and where they can go. Is it readable? Is it reliable? Is it usable? Good. Then don’t break it.

Drop Down Menus

These were a huge craze for a while. I can understand why. For websites that have way too much information it can be a great way to get it all into one concise location. Easy for your visitors to find. However it kind of falls apart design-wise. If it’s not covering up other parts of your site, or breaking, or just being too darn massive; then test it on a mobile device. Mobile devices render some design plans intended for computer users obsolete. Like hover state on the navigation. Doesn’t exist in the mobile world. And drop down menus become a nightmare. With more and more people accessing the internet on their phones this can become a big problem fast.

In my image here you can’t see my drop down menu. Psych! I don’t have one. (haha, got you). Now I know right now there is someone calling my opinions biased. Yes, I am biased. And my opinions will likely change over time. But you are biased too, so it’s only fair. Go get your own internet soap box. This one is mine.

Icons

High time I talk about the icons. I mean, navigation icons is the title, and so far I’ve only talked about the navigation, and hardly any icons at all. If you are clever about your icons they will reinforce the text, functionality and usability of a design. Do not throw the text out the window because your icons are super awesome. That is called mystery meat. So named because no one has any idea if the icon they’re clicking is going to bring them to the page they want or transport them to the magical world of Oz. It’s not worth the effort to confuse people. Plus they don’t like it.

Now that being said, you can have a little room for variation with the icons. Because you kept to industry standard terms like ‘Blog’, ‘About’, and ‘Contact’ you can let the icons lean a little more toward your desired branding. You get to be clever (yay). For example, instead of a envelope or phone icon I decided to use a paper airplane for contact. It felt whimsical and I liked it. For the about page icon I did a person (yes, it’s me-ish. I have glasses and curly hair). But I also considered a coffee cup. I wouldn’t name the page white chocolate mocha , but nothing’s wrong with having a cup of it as an icon. The freedom of creativity is one reason I decided to have icons. The other main reason being that I really really like making them. I think I’m addicted.

You may choose to abstain completely from using icons in the navigation, and that’s okay. They quickly clutter up the space, and it can be hard to find just the right ones for your brand (or if you buy/make custom ones like mine it can be expensive/time consuming). But keep in mind that having only text to direct people makes the words you use even more important. Icons = wimsy. Text = industry standard. That is all.

 

Leave a Reply

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