Basic UI Design Patterns
UI Design is something that seems like it should be inherent. Maybe not to everyone, but at least to someone who was formally educated in the Gestalt Principles of Design. I was a little miffed when I was told that these are things I needed to work on. But, I have to say, this is the type of thing that I’ve wrestled with ever since I made the switch to web design from print. My formal education focused a lot on how to work with things on paper. In my opinion everything there was easy. Put all the important stuff at the top/beginning and everything else just needs to look pretty.
It’s basically the same for the web, except everything is more flexible, except everything should be used to a certain standard.
On the web usability is king. They have books on this. Whole books. Big books. People make this their title.
“Hello, I’m Dexter Jacobs… UI Designer.”
“Oh, wow, now I feel silly, I’m just a doctor.”
This is a difficult thing if you ignore these standards. This was something I felt taught to do. I was remaking the wheel with every design. Not necessary and not recommended.
Here is my list of basics to keep on hand, for my own reference and yours.
1. Page Grids
These are great, because they give a webpage consistency and can really anchor the information.
Websites have a need for consistency for main areas, such as ads, branding, navigation, and general content. Even for unconventional layout designs, the general areas still apply for easy usage and consistency. While there are a few variations of this design pattern, the following generally applies:
- Branding (logo, tagline, etc.) are at the top left
- Navigation is towards the top, preferably as left as possible
- Content lies within the middle of the page
- Ads are to the right, in a secondary spot
- Footer content includes things that are not essential, but should still be usable and interesting since it is the last impression on the reader
Yahoo has some good stuff on this too.
2. Navigation Bars
Here there are two types Le Vertical y El Horizontal.
Vertical work best when dealing with complex navigation. The classic Amazon.com is alway a great example. They have too many things to account for in a menu, thus making the this best for them. Vert is also great for smaller websites if the menu can fit underneath the Logo. Just remember the F-Shaped Pattern when using it. A menu is a key thing for a site, you’ll want to put it where people are looking.
Horizontal my personal favorite because it can save a lot of space. It’s simpler than the vertical and may utilize pull down menus better than vertical. Just remember that pull down menus don’t work as well when tested in the field.
3. Breadcrumbs are key when you have a site with a lot of pages. The deeper someone goes into the dark forest the easier it is to forget the way back and get eaten by some sort of web witch. Well at least they could get frustrated and leave your site. Breadcrumbs give the user an easy way to backtrack to a specific place.
Location Breadcrumbs: The user needs to be able to navigate up (towards the root page) and have an understanding of where he is in relation to the rest of the site.
Attribute Breadcrumbs: The user needs to see the choices he has done while narrowing the search.
4. Archives are a must, especially with a blog or news site.
A good archives design pattern is displayed by date first and foremost and preferably by category as well.
Drawbacks of Breadcrumb Navigation
Breadcrumbs don’t work well on sites with shallow navigation. They can also be confusing when a site doesn’t have clearly compartmentalized and categorized content.
5. Footers confused me for a time. I felt they were bulky and unnecessary. However, the purpose of the footer is key to containing information that is useful but not considered primary/secondary info.
- Footer navigation is often used as a catch-all for navigation items that don’t fit elsewhere
- Usually uses text links, occasionally with icons
- Often used for links to pages that aren’t mission-critical
The important thing to remember is that the info is key to the user. I find that for websites involving restaurants this is a great place to put the hours and address. This info is typically saved for the ‘about’ or ‘contact’ page, but it’s really really nice to have as soon as you get to the website. Odds are for a restaurant this is the info the user is looking for. It’s also a great place for a blogroll, tags, links, etc.
6. Pagination is simply really really nice.
First and foremost, pagination parts large datasets into smaller bits that are manageable for the user to read and cope with. Secondly, pagination controls conveys information to the user about, how big the dataset is, and how much is left to read or check out and how much have they already checked out.
And Just for reference the places I looked into on these subjects:
http://uxdesign.smashingmagazine.com/2009/06/23/10-ui-design-patterns-you-should-be-paying-attention-to/
http://patterntap.com/
http://www.onextrapixel.com/2010/11/03/15-ui-design-patterns-web-designers-should-keep-handy/
http://sixrevisions.com/user-interface/navigation-design-patterns/
http://www.webdesignfromscratch.com/web-design/web-2-0-design-style-guide/
http://www.smashingmagazine.com/2010/05/04/web-design-trends-2010/
