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.

Week 2: Anatomy of IA and Organisation Systems

Exercises

1. Why is it difficult for people to reward good IA?

  • The field is new, and many people don’t believe that things exist until they can see them.
  • The field is abstract, and many who might conceptually understand the basic premise of information architecture won’t really “get it” until they see it and experience it.
  • A well-designed information architecture is invisible to users

In short, IA is intangible. You can’t see it or feel it especially if the IA is done well. However, a bad IA will simply make life more difficult for users to navigate the site. Therefore, IA practitioners have to be “sales people” to explain the value behind a well-structured IA and the benefits.

2. Explain what is meant by “Top-Down IA”.

Top-Down IA attempts to anticipate users’ major information needs.

Let’s take Griffith University website as an example.

griffith university home page

Using Griffith Uni’s home page as an example showing how students navigate through the website to look for their course resources.

For most of us as current students, there are a few things that we want to find, such as the Griffith Portal, Learning@Griffith, Fees and Charges, etc. As for myself, I’ll usually disregard everything else on the website and go straight to “Current Students” in the main menu and look for “Learning@Griffith” and navigate my way to 3623ICT to check out the information that I want to find. The IA practitioner behind Griffith’s website already anticipated the tasks that we’re going to perform and set these step-by-step approach for us. Note that we go through a series of links to reach the destination.

Here is an example of how a Top-Down IA looks like in a flowchart

top-down IA

A flowchart depicting the structure of a top-down IA

3. What are some common questions a user has upon landing on a page on a web site?

  • Where am I?
  • I know what I’m looking for; how do I search for it?
  • How do I get around this site?
  • What’s important and unique about this organisation?
  • What’s available on this site?
  • What’s happening there?
  • Do they want my opinion about their site?
  • How can I contact a human?
  • What’s their address?

4. Explain what is meant by “Bottom-Up IA”. Why is Bottom-Up IA becoming increasingly important?

Bottom-Up IA embeds information architecture within the content.

Take my favourite website Smashing Magazine as an example. There’s a certain information structure existing here. I’m not referring to the primrary navigation menu, but the content itself. Notice how all the blog posts are structured in a certain way: The title, author, time, tags, comments and content.

dissecting smashing magazine

Dissecting Smashing Magazine to understand the IA within it.

Bottom-Up IA supports searching and browsing, the structure inherent in the content enables the answers to user’ questions to “rise” to the surface.

search in smashing magazine

Searching for ‘404 errors’ in Smashing Magazine.

search results in smashing magazine

Search results for ‘404 errors’ in Smashing Magazine. Notice how all the information I want about ‘404 errors’ in Smashing Magazine is found just by searching, and not by using the navigation menu.

This is bottom-up information architecture ; content structure, sequencing, and tagging help you answer such questions as:

  • Where am I?
  • What’s here?
  • Where can I go from here?

Bottom-up information architecture is important because users are increasingly likely to bypass your site’s top-down information architecture. Instead, they’re using webwide search tools like Google, clicking through ads, and clicking links while reading your content via their aggregators to find themselves deep in your site. Once there, they’ll want to jump to other relevant content in your site without learning how to use its top-down structure.

5. What is an organisation system?

Organisation system is the method of categorising information. The main ways of categorizing or grouping a site’s content (e.g., by topic, by task, by audiences, or by chronology). Also known as taxonomies and hierarchies. Tag clouds (based on user-generated tags) are also a form of organization system.

tag cloud

An example of an organisation system — the tag cloud

6. What is a site-wide navigation system? Provide a screenshot of an example.

breadcrumb

An example of a site-wide navigation system — breadcrumbs.

Primary navigation systems that help users understand where they are and where
they can go within a site (e.g., breadcrumbs).

7. What is a local navigation system? Provide a screenshot of an example.

local navigation system

An example of a local navigation system.

Primary navigation systems that help users understand where they are and where they can go within a portion of a site (i.e., a subsite).

8. What is a sitemap/table of contents? Provide a screenshot of an example.

sitemap

An example of a sitemap

Navigation systems that supplement primary navigation systems; provide a condensed
overview of and links to major content areas and subsites within the site, usually in outline form.

9. What are site indices? Provide a screenshot of an example.

sitemap

An example of a site indices

Supplementary navigation systems that provide an alphabetized list of links to
the contents of the site.

10. What are site guides? Provide a screenshot of an example.

Supplementary navigation systems that provide specialized information on a specific topic, as well as links to a related subset of the site’s content.

11. What are site wizards? Provide a screenshot of an example.

Supplementary navigation systems that lead users through a sequential set of steps; may also link to a related subset of the site’s content.

12. What is a contextual navigation system? Provide a screenshot of an example.

explaining contextual navigation

Look at how Wikipedia describes about Brisbane. There are many contextual links within.

explaining contextual navigation

Now, I click into ‘floodplains’ and I’m now ushered to a new page that tells me everything about floodplains

Consistently presented links to related content. Often embedded in text, and generally used to connect highly specialized content within a site.

13. What is a search interface? Provide a screenshot of an example.

search interface

An example of a search interface

search interface

A demonstration of how the search interface is used.

The means of entering and revising a search query, typically with information on how to improve your query, as well as other ways to configure your search (e.g., selecting from specific search zones).

14. What is a query language? List some Boolean operators and provide examples of queries using these operators.

The grammar of a search query; query languages might include Boolean operators (e.g., AND, OR, NOT), proximity operators (e.g., ADJACENT, NEAR), or ways of specifying which field to search (e.g., AUTHOR=“Shakespeare”).

15. What is a query builder?

Ways of enhancing a query’s performance; common examples include spell checkers,
stemming, concept searching, and drawing in synonyms from a thesaurus.

16. What is the purpose of a retrieval algorithm?

The part of a search engine that determines which content matches a user’s query; Google’s PageRank is perhaps the best-known example.

17. What are search zones?

Subsets of site content that have been separately indexed to support narrower searching (e.g., searching the tech support area within a software vendor’s site).

18. What are search results?

Presentation of content that matches the user’s search query; involves decisions of what types of content should make up each individual result, how many results to display, and how sets of results should be ranked, sorted, and clustered.

19. In terms of content, why are headings important?

Headings describe in short what your content will be about. This gives users a choice of clicking into the heading to read more or go on to look for other interesting topics.

20. What are embedded links?

Links within text; these label (i.e., represent) the content they link to.

21. What is embedded metadata?

Information that can be used as metadata but must first be extracted (e.g., in a recipe, if an ingredient is mentioned, this information can be indexed to support searching by ingredient).

22. In terms of content, what are chunks?

Logical units of content; these can vary in granularity (e.g., sections and chapters are both chunks) and can be nested (e.g., a section is part of a book).

23. What are sequential aids?

Clues that suggest where the user is in a process or task, and how far he has to go before completing it (e.g., “step 3 of 8”).

24. What are identifiers?

Clues that suggest where the user is in an information system (e.g., a logo specifying what site she is using, or a breadcrumb explaining where in the site she is).

25. What is meant by “invisible components” in IA?

Certain key architectural components are manifest completely in the background; users rarely (if ever) interact with them. These components often “feed” other components, such as a thesaurus that’s used to enhance a search query. Some examples of invisible information architecture components include:

  • Controlled vocabularies and thesauri
  • Retrieval algorithms
  • Best bets

26. What are controlled vocabularies and thesauri?
Predetermined vocabularies of preferred terms that describe a specific domain (e.g., auto racing or orthopedic surgery); typically include variant terms (e.g., “brewskie” is a variant term for “beer”). Thesauri are controlled vocabularies that generally include links to broader and narrower terms, related terms, and descriptions of preferred terms (aka “scope notes”). Search systems can enhance queries by extracting a query’s synonyms from a controlled vocabulary.

27. What is best bets?

Preferred search results that are manually coupled with a search query; editors and subject matter experts determine which queries should retrieve best bets, and which documents merit best bet status.

28. List some of the difficulties with organising information.

There are 4 challenges to classify information

  • Ambiguity

Classification systems are built upon the foundation of language, and language is ambiguous: words are capable of being understood more than one way. Take for example, how do you classify tomato? Is it a fruit, a vegetable or a berry? This ambiguity results in a shaky foundation for our classification systems. When we use words as labels for our categories, we run the risk that users will miss our meaning. Not only do we need to agree on the labels and their definitions, we also need to agree on which documents to place in which categories.

  • Homogeneity/Heterogeneity

Homogeneity refers to something composed of similar or identical elements.

For eg: the library card. It organizes and provides access to books. It does not provide access to chapters in books or collections of books. It may not provide access to magazines or videos. This homogeneity allows for a structured classification system. Each book has a record in the catalog. Each record contains the same fields: author, title, and subject. It is a high-level, singlemedium system, and works fairly well.

Heterogeneity refers to an object or collection of objects composed of unrelated or unlike parts.

For eg: websites. Web sites often provide access to documents and their components at varying levels of granularity . A web site might present articles and journals and journal databases side by side. Links might lead to pages, sections of pages, or other web sites. And, web sites typically provide access to documents in multiple formats (word, pdf, ppt, image archives, software files…). Each format has uniquely important characteristics. The heterogeneous nature of web sites makes it difficult to impose any single structured organisation system on the content. It usually doesn’t make sense to classify documents at varying levels of granularity side by side.

  • Differences in perspectives

Labeling and organisation systems are intensely affected by their creators’ perspectives. To design usable organisation systems, we need to escape from our own mental models of content labeling and organisation. This challenge is complicated by the fact that web sites are designed for multiple users, and all users will have different ways of understanding the information.

  • Internal politics

Because of the inherent power of information organization in forming understanding and opinion, the process of designing information architectures for web sites and intranets can involve a strong undercurrent of politics. Politics raise the complexity and difficulty of creating usable information architectures.

29. What is meant by the term “taxonomy”?

Taxonomy refers to a well-designed hierarchy.

the science or technique of classification.

— dictionary.com

30. What hierarchy is a natural way for humans to organise information?

Humans categorise information using these 2 organising methods: organisation schemes and organisation structures.

An organisation scheme defines the shared characteristics of content items and influences the logical grouping of those items.

An organisation structure defines the types of relationships between content items and groups.

31. List some design rules when designing a hierarchical organisation scheme.

hierarchical site navigation

This demonstrates how a hierarchical site navigation looks like

  • Keep balance between breadth and depth
  • Obey the 7 +-rule horizontally
  • No more than 5 levels vertically
  • Cross-link ambiguous items if really necessary
  • Keep new sites shallow

32. Describe the advantages and disadvantages of a hypertextual organisation structure.

hypertextual structure

This is how a hypertextual organisation structure looks like. Linking pages all over the site.

Hypertext is a highly nonlinear way of structuring information. A hypertext system involves two primary types of components: the items or chunks of information that will be linked, and the links between those chunks. These components can form hypermedia systems that connect text, data, image, video, and audio chunks. Hypertext chunks can be connected hierarchically, nonhierarchically, or both.

Although this organisation structure provides great flexibility, it presents substantial potential for complexity and user confusion. As users navigate through highly hypertextual web sites, it is easy for them to get lost. Without context, users can quickly become overwhelmed and frustrated. In addition, hypertextual links are often personal in nature. The relationships that one person sees between content items may not be apparent to others.

3 different methods to structure a website

A graph that shows you how you should structure your website based on the users’ knowledge of websites and the level of complexity you need present it.

33. What is social classification?

Web 2.0 sites enlist the users in content creation and classification. High profile successes such as Flickr and del.icio.us have sparked tremendous enthusiasm for tagging as a form of description and organisation.

We also see tagging in Instagram and Facebook in the form of #hashtags

instagram #hashtagging

How we use tagging now via Instagram.

34. What is meant by the term “folksonomy”?

Folksonomy is a system of classification derived from the practice and method of collaboratively creating and translating tags to annotate and categorise content.

Users tag objects with one or more keywords. The tags are public and serve as pivots for social navigation. Users can move fluidly between objects, authors, tags, and indexers. And when large numbers of people get involved, interesting opportunities arise to transform user behaviour and tagging patterns into new organisation and navigation systems.

hashtagging in facebook

Using Facebook as an example of how the community help to categorise information