I recently published a tutorial on nettuts.com which dealt with Creating a Different Type of Top Navigation. The premise of the tutorial was that we had a website where we wanted to have the navigation system be at the top and be horizontal. We also had children items, however we did not want to have the traditional drop down system that is found on almost every site with horizontal navigations. We wanted to stand out. So this is what we ended up having:


Page

Normal State – Click to View Full Size


Page

Expanded State – Click to View Full Size

Admittedly, this breaks a few major design standards. Most noticeably,  the children items are above the parent items. So this brings up the debate: When is it worth breaking design standards? Due to the subjective nature of this question, it cannot really be answered definetively by anyone. And sure enough, in the comments of the tutorial I got people on both sides of the fence. For this article however, I will give you my opinion. I hope that by reading it, one more perspective can hopefully help improve your judgement call in your own projects.

Why People Don’t Break Standards

Breaking design standards can have a drastic effect on usability-that is for sure. Traditional design principles tell us to think of the user as “stupid”. If they don’t get how to use something, they’ll simply move on. Indeed, functionality and intuitiveness are two of the most important elements of a good website. As Stephen Ainsworth said in a comment to my nettuts article:

“While its a nice idea, the way it moves everything down the page and the fact that the sub category is above the parent category does not work for me. Users should be able to navigate through the pages with little thought, maybe thats the problem with thinking outside the box..if you want high usability you usually have to stick with the norm because people are used to that.”

I think this comment is a rather decent summary of a lot of the design community’s current thoughts about thinking outside the box. I’m not saying we should try to be as different as possible in every possible way including navigation. No, doing that would confuse users for sure. It is nice to have traditional design elements that work that every user has already seen on hundreds of other sites. (think tabs, drop-down menus, etc.) However, if we stop thinking outside the box, the internet will become a pretty bland place, with less and less innovation everyday. And in such an innovative world, do we really want that?

Looking Back

Horse Car

Humans have always liked to break standards in life. It is part of out innovative nature. All you have to do is look back in history to see this. Suppose you told a person in the late 1800’s that soon after the turn of the century, people would be driving mechanical machines that don’t eat or sleep instead of riding those horses; instead the horses would be reserved for show and the rural life. They simply wouldn’t believe it and you’d be labeled crazy.

Fast forward to the 1980’s. If you were even alive then, would you expect that in 30 years you’d be tweeting, blogging, texting, and making calls on your iphone while getting GPS directions with it while you’re driving?

The world changes-quickly. And how does all of this change happen?  It changes through innovation and by breaking standards. We would not be where we are today if we did not break standards.

When It’s Alright To Be Different

diff-duck

So I hope you agree with me on this: althought it might not be acceptable to do everywhere, there are many situations when it is acceptable to be different. For example, an easy way to make your site stand out would be to make your navigation system use something “new”. However, if you’re going to break a standard, you should not do so lightly. You have to make sure that every user will be able to use it. For my tutorial’s case, I think it was intuitive enough for anyone to be able to figure it out, but different enough so the user will remember the site. However, you cannot really decide if my demonstration “worked” or not, because that’s all it was: a demo. It was not an actual site. It did not have actual content. And it did not have an actual purpose, other than to teach people jQuery and out of the box thinking. So when does it work?

When it fits with the design

You should never try to fit something that breaks design standards into a pre-existing design unless you design it so it fits. My demonstration would probably not work in a lot of sites out there. However, for some sites it fits right in. For example, look at this themeforest template, Bluelight.

The demonstration would work perfectly for this site.

When It Just works

Just because something’s new doesn’t mean it’s not genius. As hard as it is to believe, there was a time when there was no such thing as tabs on websites. I’m sure whoever decided to experiment with them did not realize the effect that they would have to design standards. By breaking standards, it formed new, better, standards. And that’s the message I’d like to leave with you today. Don’t be afraid to challenge standards, just like anything else, they’re meant to be broken.

I’d love to hear your takes on the subject, so if you have an opinion or comment, leave them below! Even if they’re totally in disagreement! And if you liked this, please spread it!

I saw another awesome article over at psd.tutsplus.com where you can win $1000 worth of uprinting! Just tell your story about graphic design!

http://psd.tutsplus.com/articles/news/score-1000-with-uprinting-just-by-commenting/

Cyberantix

In: Announcements

4 May 2009

Cyberantix is a freelance media design company, run by Connor Zwick. I specialize in blogging, web, video, graphic, print, video, and 3d design. If you’d like some work done, feel free to contact me. This is it for now. In the future, I’d like to update with new blog postings about we bdevelopment topics, and maybe release some free stuff!

Image for tutorial

I wrote this article because I needed to add a print and email function for a blog theme I was designing. Attempting to circumvent recreating the wheel, I looked around and didn’t find any proper solutions: I needed the code to be smart so I could have a certain element generate a print or email version of a page, while stripping the rest of the page. I ended up using jQuery to do this. Here is an excerpt from the tutorial:

“When designing websites, a commonly desired feature is the ability to dynamically print or email any section of a webpage. Unfortunately, this idea is usually scrapped later in the project due to a lack of time or knowledge. Formatting the text for printing is more difficult than it might initially seem. Today, we will use JavaScript to automatically search for certain page elements and format them correctly for a printing.”

Read More


Ruby on Rails

I began this series for Jeffrey due to a lack of tutorials about Rails on nettuts+. On the four-part journey, it helped many people start the adventure of learning Ruby on Rails. It assumed the reader knew nothing about Rails or programming in general. It received a lot of positive comments and a lot of people were disappointed when I stopped writing them. Who knows-maybe some day the series will continue. :)

Learn Ruby on Rails from Scratch: Week 1

“Ruby on Rails. . .by now most people have heard the hype about it. It promises more effective code, total object orientation, and true MVC architecture to say the least. As far as my own personal experience, it has been all that and more. The code is beautiful, easy to maintain, and edit. In a recent project I was working on, it took me less than 10 hours to do the application, as compared to at least double that if I was writing in PHP. “

Read More

Learn Ruby on Rails from Scratch: Week 2

“Welcome to Ruby on Rails From Scratch Week 2. Hopefully this sequel to week 1 will help to further your education in Rails. This week, we’ll do a little bit more with getting an actual page up and running. We’ll also work on adding more interactivity by embedding ruby in HTML and learning a little about variables. After that, we’ll learn more about Ruby’s beautiful URL structure and how to manipulate it, plus other things as well. This is definitely going to be a packed week! “

Read More

Learn Ruby on Rails from Scratch: Week 3

“Welcome to Ruby on Rails From Scratch Week 3! This week, we’ll focus on specific things that you need to know about the framework. For example, we’re going to talk about manipulating the structure of the project in two ways (rendering & redirecting). We’ll also talk about how you add links in rails, and how to comment code. Let’s get started already!”

Read More

Learn Ruby on Rails from Scratch: Week 4

“Welcome to Ruby on Rails From Scratch Week 4! This week we’re going to talk about ruby syntax. After this tutorial, I believe that you’ll have a much better understanding of the framework and feel much more comfortable doing things by yourself. Oh yeah, and there’s a surprise this week – a screencast! So without further ado, here is week 4!”

Read More


About this blog

Hi I'm Connor Zwick - freelance designer & student. I design web sites, do 3d modeling & animation, video animations, and other media work. This is my sandbox - a place to organize everything. If you'd like to hire me, or learn more about me, be sure to visit connorzwick.com.

Sites

  • admin: I'm glad! Be sure to check back for more articles! [...]
  • Benjamin Reid: Hey Connor, I picked up your site from your latest article on NETTUTS (Left you a comment http://net [...]
  • JamesD: Thanks for the useful info. It's so interesting [...]