Archive for March, 2008

5 Design Examples To Organize Data Alphabetically

Organizing data alphabetically might not be the most common way to get data together but it could be a good solution for particular web designs.

In which cases organizing and browsing data alphabetically could be an interesting option?

- If the items listed are not related (e.g. no categories)
- If those item names are well-known
- It could help users to find items very fast if it’s well design
- Placing all items in one long page will allow users to search using the browser search function, saving a lot of time

Organizing data alphabetically could have some problems too:

- Looking for an entry for "For Whom the Bell Tolls"; would you look at the F or at the W section?
- It’s not going to help users if their mental model sort those items into known categories
- If the design is placing one letter per page users will have to look for items in several pages, being this a time consuming task

I wouldn’t recommend to have an alphabetical index as the only way to browse content but I would have it as an option that could help users an save them a lot of time.

Here I have five examples: 

The Internet Movie Database website gives us an example of both when to use and when not to use alphabetical order. First, looking for films by country works perfectly. On the second example, the "A" section is listing several thousands of films. That crushed my browser and makes the search almost useless.

IMDB Index Example

IMDB Index Example 2

 

TechCrunch, the blog, provides an index of companies and products. This solution works well here as users visiting this section might know the name of the specific company or product they are looking for. Maybe dividing the list to indicate the beginning of each letter would have been better.

TechCrunch Index Example

 

7 Eleven might not have the most appealing design but has a nice product index. Most users visiting this section might be looking for an specific product. This product index works well, listing all products in one page with direct links to letter sections and a "back to the top" link.

7Eleven Index Example

 

The United Kingdom Parliament uses an index to put in one place links to all the content provided by the website. They have one page per letter but the user still has the possibility to see the whole list together clicking on the "view all" link located under the letter index.

UK Parliament Index Example

 

The Today in Literature website provides an alphabetical index of authors. This is a nice example how browsing alphabetically can help users.

Today in Literature Index Example

Popularity: 23% [?]

8 Tips For Better Link Design

Links are the most common thing on the internet, that’s what the whole web is about. Although we use them every single day there are a lot of implementation techniques to keep in mind to improve usability.

1. Avoid general links. Instead of "click here" use something like "more information about San Francisco hotels". A link should give clear hints about what it’s gonna be found on the next page. Generic terms confuse users.

2. Include introductory information for related links. Give context to users making the first link in a group fully understandable. For example:

Read this report in English
This report in German
This report in Spanish

3. If the link is an image, provide a text equivalent that describes the message the image transmits. For example, for a link picture include the following "alt" attribute:

<A href="uk_cities.html">
     <IMG src="uk.png"
               alt="See UK cities on the map">
</A>

It is even better if the link works as an image description (example taken from News.com):

Link Implementation Example At News.com

 

4. Providing keyboard shortcuts to important links will help users with problems to use a pointing device like a mouse. Remember that helping the impaired ones is helping everyone, in this case this feature could also help advanced users to save time. Use the accesskey attribute for this.

<A accesskey="E" href="edit.html"
     title="Edit">
         Edit</A>

Access Keys Exmaple

 

5. Create a logical tab order through links.

6. Use language familiar to the user for links. For example some countries use "Shopping Cart" instead of "Shopping Basket".

7. Same links across a website should point to the same document. The "Support" link should take to the same page website-wide.

8. Differentiate links with similar names or meaning. For example, you might find "About Us" and "Company Info". In that case leave only one of those.

Popularity: 27% [?]

« Previous Page