Blog 2: Role of Information Architect, Labelling Systems and Navigation Systems

Blogs

1. Define what Information Architecture is, and describe what role an Information Architect plays in the development of a web site. Be sure to use images if possible and provide references to the literature. (Minimum of 500 words.)

Define IA

Information Architecture can be defined as:

  • The structural design of shared information environments.
  • The combination of organization, labeling, search, and navigation systems within web sites and intranets.
  • The art and science of shaping information products and experiences to support usability and findability.
  • An emerging discipline and community of practice focused on bringing principles of design and architecture to the digital landscape.

The diagram below explains very simply what Information Architecture is and how it connects people to the content.

explaining the meaning of ia

Explaining the meaning of IA

Role of Information Architects

Information Architects are generally the “master planner” of websites. They define what the site will actually be and how they will work. According to Information Architecture for the World Wide Web, an Information Architect

  • Clarifies the mission and vision for the site, balancing the needs of its sponsoring organization and the needs of its audiences.
  • Determines what content and functionality the site will contain.
  • Specifies how users will find information in the site by defining its organization, navigation, labeling, and searching systems.
  • Maps out how the site will accommodate change and growth over time.
role of information architect

Role of Information Architect

Information Architects do not work alone. They have to work with other people such as the web designer, UX designer and the UI designer to plan the layout and structure of the website. Sometimes, they have to assume more than 1 role. Like a building architect, the Information Architect needs to define a strong infrastructure for the website to house the content so that users are able to navigate their way through and find what they need. They have to develop content categorisation schemes, consistent site terminology, content structure across the site and site architecture diagrams. And therefore, Information Architects are normally involved very early in the design process.

A good Information Architecture is one that is not obvious in a website. They are normally invisible to users. However, if the Information Architecture is badly structured, it will become very obvious to users and they will start complaining about issues such as difficulty in navigating from page to page, unable to look for the answers that they need, and so on. It is just like the supermarket featured below. There are no proper labelling of the items and it becomes time consuming looking for something that you need, like a tray of eggs. Since Information Architecture cannot be seen, it is very difficult to judge how good the IA is. Some people will even doubt the need to hire an Information Architect.

bad IA

An example how bad Information Architecture looks like. It’s like a supermarket without proper labelling for its items.

Nevertheless, Information Architecture is very important in every website. Without IA, you will not be able to imagine how much time, money and effort will be wasted on your website. Rosenfeld and Morville have provided some reasons for the importance of effective information architecture:

  • The cost of finding information
  • The cost of not finding information
  • The cost of construction
  • The cost of maintenance
  • The cost of training

Let’s take the second point as an example. What are the consequences if your users cannot find information in your website? Imagine the frustration caused to your clients trying to find out how to purchase a product from your e-commerce site. You will lose a customer. Not only that, your customer may send a feedback to you about the inconveniences caused to him. Since you would not want to lose any more potential customers, you will look for your web developer to work on the problem. More money will be spent for your web developer to rectify the problem, and during the meantime, you will still be losing customers until the maintenance is completed. This process is not efficient at all.

2. Take a screen capture of the main page of web site of your own choice and post it on your blog.

sean wes handlettering

Sean Wes Handlettering

a) Create a table describing the navigational labels.

Label Destination’s heading label Destination’s <TITLE> label
Top-of-page navigation system labels
About About About
Contact Contact Contact
Login Login form Login
Lettering Hand lettering resources & education Lettering
Business Make a living with your passion Business
Body navigation system labels
Get my book for free
Hand lettering classes Make a living as a hand lettering artist Learn lettering
Podcast Seanwes podcast Seanwes podcast
Community The community Community
Lettering blog Blog Lettering
Business blog Blog Business
Store store Seanwes store
Bottom-of-page navigation labels
Learn lettering Make a living as a hand lettering artist Learn lettering
Gallery Gallery Gallery
Resources Resources Hand lettering pens, pencils and brushes
Blog Blog Lettering
Store Store Seanwes store
Community The community Community
Blog Blog Business
Podcast Seanwes podcast Seanwes podcast
Books Pursue your passion full-time The overlap technique
Resources Resources Resources
About About About
Contact Contact Contact
Login Login form Login
Get my free book
Search

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

This website is very short and sweet with a very clear labelling throughout the whole site. There isn’t much to pick on. What could have improved will be his primary navigation. I suppose seeing the ‘business’ label might look a little weird to you who don’t know about Sean Wes at all. I knew about him when I was searching online to learn how to do hand lettering and I found him (he has the best SEO when I looked for the keyword ‘hand lettering tutorials’). Even before his website was published, he had made plenty of promotional videos to keep in touch with us and to tell us about his plans after he had his website up. Therefore, I already have some clue what he meant by that. Nevertheless, I was still confused what that label was at first till I click in to see.

seanwes primary navigation

Seanwes Primary Navigation

I can see that he’s trying to keep his labels very short and neat, using only 1 word for every label. It’s very consistent – ‘about’, ‘contact’, ‘login’, ‘lettering’, ‘business’. He’s actually trying to make a distinct 2-part website with lettering and business as the main focus.Only after clicking into ‘lettering’ or ‘business’ will you see the secondary navigation which gives a clearer idea about his main topic.

seanwes lettering subsite secondary navigation

seanwes lettering subsite secondary navigation

seanwes lettering business subsite secondary navigation

seanwes lettering business subsite secondary navigation

Instead of putting these 2 labels side by side, he could possibly use the secondary navigation of lettering (‘learn lettering’, ‘gallery’, ‘resources’, ‘blog’, ‘store’) to be his primary navigation, and put business either at the far end of the primary navigation, or in the footer. I’m suggesting this because I felt that the business label should be his side topic instead of his main topic, since I come to this side to find out more about how to do hand lettering and not to do a business with hand lettering. Of course, there might be other ways to argue about this.

c) Describe whether there are any inconsistencies in the labelling system between the pages.

Style

There’s a consistent style throughout. The labels are all in lower case, that’s similar to the logo.

Presentation

The home page is in monochrome and thus the colours for the labels are in black, white and grey only. The same typeface, ‘lemonde-courrier’, is used for all the labels, in fact, for the whole website (I don’t really like that, it shows no distinction between the labels and the rest of the page). The headings are in sentence case and bold to show sections within the page.

The presentation remains consistent throughout the pages, except that for the ‘lettering’ page, the main colour is green, while the ‘business’ page is blue. This is also reflected in the footer whereby the ‘lettering’ and ‘business’ headings are underlined by the respective colours.

seanwes footer

seanwes footer with coloured labellings

There’s a very distinctive difference in the font sizes for the ‘about’, contact’ and ‘login’ compared to the ‘lettering’ and ‘business’, also for the headings within the body.

Syntax

All the labels are noun-based.

Granularity

The labels are equal in their specificity

Comprehensiveness

The labels are comprehensive

Audience

Very simple usage of nouns for the labels, easy to understand for any kind of audience.

d) Describe what type of navigation is used?

An embedded navigation system is used. This website consists of the global and contextual navigation system on the main page. The local navigation system can only be seen after you click into either ‘lettering’ or ‘business’. These navigation systems are integrated within the web pages. They are wrapped around and infused within the content of the site. They provide both context and flexibility, helping users understand where they are and where they can go.

seanwes primary navigation

Seanwes Primary Navigation

The global navigation system in this website is referring to these labels: ‘about’, ‘contact’, ‘login’, ‘lettering’ and ‘business’. The logo found together with these labels links back to the home page. They are present on every page throughout the site, usually on the top of the website. They are the only consistent navigation in the site and serves as an indication telling where you are right now.

seanwes lettering subsite secondary navigation

seanwes lettering subsite secondary navigation

The local navigation system is embedded within the subsites ‘lettering’ and ‘business’. It forms a horizontal line just beneath the primary navigation and the selected label will be indicated by a different colour (grey against the other black labels). The local navigation of ‘lettering’ is very different to those of ‘business’.

contextual navigation

Contextual Navigation

The contextual navigation system lives within the body of the website. Some of these are ‘hand lettering classes’, ‘lettering blog’ and ‘listen resources’. Contextual navigation supports associative learning. It allows you to create a web of connective tissue that benefits users and the organisation.

e) Describe what type of search system is used?

The search system used is ‘Index by Topic’. Seanwes is a very simple website. It’s not like Griffith Uni where there is a large volume of content and various target audiences. The search bar located at the bottom of the page allows users to key in any keywords that matches the words in any of his posts or pages. For eg, I want to search for the keyword ‘typography’. I put in this keyword and the website simply searches for those articles with the keyword ‘typography’ in it.

3. Examine at least two other similar or competing web sites and undertake the following tasks:
a) Provide screen shots of these competing web sites.

the australian graphic supply co

The Australian Graphic Supply Co

hand lettering tutorial

Hand Lettering Tutorial

b) Describe how similar the labelling systems are?

Style

Consistent usage of punctuation and case.

the hand lettering tutorial — primary navigation system

The Hand Lettering Tutorial — Primary Navigation System

the agsc — primary navigation system

The AGSC — Primary Navigation System

Presentation

Consistent application of fonts, font sizes, colours, whitespace, and grouping.

Syntax

Consistent noun-based labels for primary navigation systems.

Granularity

The labels are equal in specificity.

Comprehensiveness

The labels are comprehensive.

Audience

Usage of terms is consistent with the audience.
c) State whether you think any particular site is clearly the winner (and if so, why)?

I think that Seanwes is the winner. Simply because I always know where I am in the site. Seanwes shows where I am by indicating a different colour for the label. It even indicated that I’m in the ‘lettering’ subsite with a green background for the primary navigation, making it hard to miss. But comparing to Hand Lettering Tutorial and The AGSC, both of them do not show distinction in their labelling though they have indicated the current location through the page heading and the <TITLE>.


 

References:

http://webstyleguide.com/wsg3/1-process/2-development-team.html

http://room34.com/philosophy/roles

http://www.uxbooth.com/articles/complete-beginners-guide-to-information-architecture/

Morville, P & Rosenfeld, L 2007, Information Architecture for the World Wide Web, Third Edition, O’Reilly.