Home link pattern

Overview

Home link pattern is a way for user to access a safe location, which is – basically – a site’s home page. There are 3 common ways to implement this pattern when designing UI.

1. Logo
2. Main menu
3. Breadcrumbs

Bellow I will discuss each of them.

Implementing

Logo

This is probably the most popular way of implementing this pattern. A logo image or text – on every page excluding main page –  should be a link to the home page. By doing this, we offer user a method to return to the safe location from which one can start to discover other pages on our site, no matter how deep in the site’s structure user was. Here are two examples from amazon.com, one without hover and other with it (which is an interesting example – reminds where the logo leads to):

Breadcrumbs

In this case, a link to home page is the first element of breadcrumbs list. Therefore, if we are currently visiting the main page, breadcrumbs are not shown. This is an example from ebay.com:

This is a mix of two UI design patterns:

1. Home page pattern
2. Breadcrumbs pattern

Both have a huge positive impact on a site’s navigation.

Main menu

This is, unfortunately, very common (and unaware) method of implementing this pattern. A link (titled “Home”) is an element of main menu.

Personally I don’t use this method. I think that this is a big misunderstanding of main menu role which should provide the main subjects/fields of a site’s content. A home page is like a shopwindow for a website. It should attract users and show what a site has to offer. It is not a field itself.

This is an example from icq.com:

Summary

Home page of  should always be the best starting point of  exploring a site. That’s why it is called a safe location. So every time a user gets deep into the site’s structure, there should be provided a mechanism to get back to that starting location. I suggest mixing methods using breadcrumbs and logo as those are natural places for a home page link. Additionally, using only a logo method may not feel natural for all users, so the breadcrumbs method fulfills implementing this pattern.

Definition lists – a natural solution?

I’ve been recently using definition lists for many times. A little reminder:

Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description.

What does it remind to you as programmers? Does it remain you of the good, old “key-value”? I’m sure it should!

Whenever I browse page sources across the internet, I rarely find this kind of list, despite it brings your markup semantics on the higher level. It has positive impact on accessibility, because it helps understand the content in the way you really mean it on the semantic level. It has become really natural in use for me and I really recommend you start using it whenever you want to present pure term-definition or key-value pairs. I’m purposely ignoring here the visual possibility to interpret the information, as this argument fails on the accessibility field.

Definition lists: the dl , di , dt , and dd elements

php anachronic coding standards

When you take a look at the primary PHP coding standards, like PEAR or Zend, there’s what you can find there:

Private class members are preceded by a single underscore.

or:

For methods on objects that are declared with the “private” or “protected” modifier, the first character of the method name must be an underscore. This is the only acceptable application of an underscore in a method name. Methods declared “public” should never contain an underscore.

The question which comes instantly to my mind is: why? Is there any reason why this convention should be kept when PHP object oriented programming has gone a long way since PHP 4 (when there was no access modifiers and such underscore was the only fast way to distinguish public from, hmm, not public methods and properties) ? Are, for instance (as one of major OOP languages), Java coding standards pushing towards such naming convention? No!

I think that we, as developers, should not stick to this silly convention. For the sake of progress, stop looking back (because that what in fact this convention is) and  stop supporting this one, particular naming convention.

Semantically correct breadcrumbs in CakePHP

I’ve recently started a discussion on CakePHP Google groups about HtmlHelper::getCrumbs() output. Currently, it generates a string of separated (by the chosen separator) links. It is of course correct syntactically, but semantically it is totally wrong – navigation elements like menus and breadcrumbs should be built using (x)html lists as they are a list of elements. For such purpose, tags like ul and ol are made.

Link to the discussion.

Link to the issue’s ticket.