Taking Advantage of Conventions In Web Design
Kinyanjui Wangonya Sep 12
This is part 1 of Billboard Design 101
“If your audience is going to act like you’re designing billboards, then design great billboards” -Steve Krug
Take advantage of conventions
@paztek recently pointed me to a very interesting principle I hadn't come across before: The principle of least astonishment. Basically, what the principle states is that "If a necessary feature has a high astonishment factor, (astonishment factor here being an element of surprise), it may be necessary to redesign the feature. People are part of the system. The design should match the user's experience, expectations, and mental models."
Though it isn't mentioned in the book, I think that principle really fits this section well. When people use your app, they expect stuff to be at certain places. Just imagine what your reaction would have been like the first time you logged in to dev.to if you found the DEV logo on the right side of the navbar. Or if the search-bar was somewhere in the footer. Coming from somewhat similar websites that existed before dev.to, we expected it to feel similar to what we were already accustomed to. That's why no one needs a tutorial on how to navigate the site.
Other conventions include things like:
- link styling: where this is obviously a link,
- proper colours for success, warning, info & error messages, and
- visual hierarchies: where,
THIS IS MORE IMPORTANT
- Than this
- THIS IS MORE IMPORTANT
But what about being original?
Just kidding 😅. The fact that using conventions is recommended does't mean you can't be original. You just need to understand the rules before you can break them. The key is to find that sweet spot between trying out something new and conforming to conventions.
Here's what Krug recommends:
If you’re not going to use an existing Web convention, you need to be sure that what you’re replacing it with either:
- is so clear and self-explanatory that there’s no learning curve—so it’s as good as the convention, or
- adds so much value that it’s worth a small learning curve.
Innovate when you know you have a better idea, but take advantage of conventions when you don’t.
Any designers out there? I'd like to see examples of how you've used conventions well in a design -- and especially some examples of how you've gone against the tide and been original and it's worked out great. Share a link, let's inspire and learn! 😊
I’ve sent a message to my family and delegated my open source projects to my friends. With my last tweet sent, I turn off my laptop, phone, and tablet. My Digital Sabbath begins in 10 minutes: no digital devices for the next month.