Blog 2 – Information Architecture Critique of Web Sites

Question 1.

Information Architecture

The definition of Information architecture states that it “is the structural design of shared information environments; the art and science of organizing and labeling websites, intranets, online communities and software to support usability and find-ability” [1].

In the context of websites, the concept of Information architecture simply means what is being shown in a website and how the content is organized all across different pages of that website. It is the art of making sure it is feasible and easy for a user to find whatever he/she is looking for on the website. It also acts as the road-map or blue print of any website design which helps the developers understand what is expected of the website and how to implement it in order to showcase the information to the users. The following is an image which depicts how the sitemap of a website is designed under the development of its information architecture.

info-architecture.png

Information Architecture Pattern

Role of an Information Architect

Now that we know what an Information Architecture is, we can easily put some light on the role and importance of an Information Architect during the design and building of a website. An Information Architect is basically a person who not only outlines the design of a website but also acts a liaison between the design and technical teams of a project. He is the guy who is in charge of proper organization of information, along with the responsibility of making sure the technical team is implementing the designs correctly.

He oversees the following tasks primarily:

  • Research about the anticipated audience
  • Outline of navigation and hierarchy of the webpages
  • Organization of content and labels

Moreover, an information architect is also in charge of the development of wire-frames and site-maps which are discussed in some detail below:

Wire-frames:

A wire-frame is one of the most important part of an information architecture and is basically the layout of different key webpages showing which elements will appear on them and where. It is designed to let the technical team know the exact visual appearance that is to be required on the website. A typical wire-frame looks something like this:

home

Information Architecture Pattern

Site-maps:

Site-maps are hierarchical diagrams that exhibit the structural and navigational designs of the whole website. They are based on the concept of taxonomy (grouping similar elements under same tags) and are deemed necessary to ensure the right content is placed at the right structural position i.e. where the user expects to find it. They basically show the relationships between different pages and are as important as the wire-frames. A typical sitemap is similar to the following:

ab425297a4199551591fad6156f7baab

Site-map Example


Question 2

Screen Capture of E-commerce website

 

a) Create a table describing ALL the navigation labels.

CaptureK

b) Describe what labels you do not like and why, and suggest improvements.

Most of the labels in this website are self-explanatory but I don’t like certain labels. For instance in the top of the page labels, there is a label “News Room” which does not tell the user what exactly does it lead to, giving the impression it is about News from the retailers whereas it is actually about media articles or news about the retailer. It could be called Kogan in Media or something similar to make it obvious. Moreover, the bottom page labels are a lot and they could be turned into secondary navigation labels instead of listing them all. The main headings Shop, Customer Care, Top Brands etc are fine and then further sub-labels should be shown when the mouse pointer hovers over them.

c) Describe whether there are any inconsistencies in the labeling system between the
pages on the basis of style, presentation, syntax, granularity, comprehensiveness and
audience. 

While going through different labels and pages, I found some inconsistencies on the basis of style and presentation. For instance, there were minor differences between the titles of different pages i.e. some had Kogan.com written first whereas in some pages it was written at the end. For example, Kogan.com New Zealand – Lower prices. Smarter shopping. and Independent Reviews of Kogan products | Kogan.com. Moreover, the headings of different pages had different colors and styles. Punctuation marks like hyphen and vertical bars were used differently in title pages and it could be made more consistent instead.

d) Describe what forms of navigation are used?

The site primarily makes use of Global navigation.

All the pages have the same global navigation panel which is shown below:

Capture

From all of the pages in the website, the user can access Home, News Room, Reviews, Help, the search facility and the options to access the brands or department of the electronic appliances.

Moreover, the Shop by Department label further gives options to choose the category under the Global navigation panel which is shown as:

Capture2
e) Describe what type of search system is used and the strategies for facilitating search?

During the search system, I noticed that there is an implementation of Search suggestions based on the typed letters or words in the Search bar. Moreover, the website uses the Search by Index method which matches the keywords entered in the search with the available items in the website’s database.

Moreover, in order to facilitate search the website makes use of Canned Search which helps the user narrow down his search of the items based on Brand names or Departments of the searched items.

The example of search term “LED” is given below:

Capture3


Question 3

Two other competing websites

a) Provide screen shots of these competing web sites.


b) Describe how similar the labeling systems are?

Ironically and interestingly, two of these websites Kogan.com and Dick Smith have the same architecture. In fact, they are so similar that it can be said that they follow the same theme completely. Both the top and bottom labels are the same, with Kogan adding two labels i.e. Reviews and Newsroom to both top and bottom of the page labels. However, Appliances Online is a lot different than the two of these.  Its navigational labels are more comprehensive and straight forward. It uses a better technique of showing labels when mouse is hovered over them.

c) State whether you think any particular site is clearly the winner (and if so, why)?

After going through all three websites and their navigation labels, I think Appliances Online is the winner because it uses more consistent and clear labels. It made the navigation easier for the user and the labels itself are self-explanatory. Moreover, the titles and headings are consistent across different webpages. And it also uses different icons to make its labels look more relevant to the pages they are pointing to.

 

References:

[1]       https://en.wikipedia.org/wiki/Information_architecture

[2]      http://www.webdesignerdepot.com/2015/02/the-ultimate-guide-to-information-architecture/

[3]      http://www.experienceux.co.uk/faqs/what-is-wireframing/

[4]      http://theuxreview.co.uk/sitemaps-the-beginners-guide/

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s