Information Architecture, Explained
To explain information architecture in my own words, it’s the way that information on a website is structurally organised. I say ‘structurally’ because I think like the architect of a building. To organise all the materials (in the case of web design this would be the pages holding content) is one thing, but to structure them into a platform for people to interact is where the magic happens. To organise data is to sort it into categories, but what happens next? These categories must be structured in a way in which users can easily engage and interact with the digital design. Information architecture is the backbone of every multi-page website, which is the majority these days, and if executed poorly can have a huge impact on usability.
What is LATCH?
LATCH is an information architecture framework devised by Richard Saul Wurman in 1996, in his book Information Anxiety, dictating that all information can be organised into 5 main categories. These categories are:
- Location – Information can be arranged according to locational values
- Alphabet – Information can be arranged alphabetically (A-Z in English)
- Time – Information can be arranged according to time values
- Category – Information can be arranged categorically into logical groups
- Hierarchy – Information can be arranged hierarchically (e.g. New – Old)
Also famous for devising the phrase ‘Information Architecture’, Wurman founded the TED talk and describes himself as “in the understanding business” (Wurman, 1996).
To practice our organisational skills, we were given 46 food items to sort using LATCH. Throughout this exercise, I want to see if I can categorise these items by using ONLY the acronym header in question. These graphs were created using an online service called draw.io.
Location
To arrange the items by location, I found the region of the world from where each one originated from. Using this method produced a lot of categories, nine to be exact, so I decided to further categorise these into continents, making for a coherent tree of information.
Food items organised by location of origin
Alphabet
Arranging the food items by alphabet was by far the easiest to complete, but to make the information easier to digest I further categorised them into letter groupings to stick with the theme of further categorisation for ease of consumption. These letter groupings, in relation to the alphabet, have a similar amount of letters in them. A-F, G-L and M-R all include 6 but S-Z includes 8. In theory, this should make the lists evenly distributed, however, we can see from the diagram below that this is not the case. This proves that organising alphabetically may seem to be the easiest one but still requires a high-level of disciplined, organisational thinking.
Food items organised alphabetically
Time
To arrange by time, I researched how long it would take for each food item to go off. I grouped these into 4 main logical categories, however, the 3+ week category falls particularly short of items.
Food items organised by time taken to go off
Category
Categorisation has already been apparent in all of the previous examples, however, here I was able to choose my own, logical categorisation system. In light of this, I organised the items into where each food item grows. This can be slightly confusing, so to explain further:
- From the tree: The item grows as fruit from an existing tree
- From the vine: The item grows off a vine, from a plant
- From a plant: The item grows directly off a stem, as a plant
- Under the earth: The item grows underneath the earth
- Out of the earth: The item grows on the surface of the earth
Food items organised by source of growth
Hierarchy
Organising by hierarchy is particularly difficult because a lot of the important characteristics are subjective. For example, colour and desirability are both viewed differently for each person with a hierarchy in mind. For this reason, I have chosen to compare size. This also has it’s pitfalls because some items are round and others long, so, for this reason, I will be solely measuring depth/width.
Food items organised hierarchically by size
Reflection
The main takeaway for this exercise is, that it is especially difficult to apply one element of LATCH to menu items, without at least adding one other for easier consumption of information. When only one rule is applied, there runs the risk of being either too many top-tier headers with a suitable number of items or too many top-tier options each with a comfortable amount of items attached. Each can lead to confusion and information overload.
Completing this long and extremely tedious task took a lot of patience and logical brain power. It was difficult at times, but on the whole, I thoroughly enjoyed it. I have a natural passion and interest for information architecture and organisation of information in general, so being able to apply my natural thought processes to this exercise was a treat. I look forward to applying this technique to future information architecture tasks.
References
Wurman, R., Wurman, R. and Wurman, R. (2018). Information Anxiety: Towards Understanding. [online] Richard Saul Wurman. Available at: https://www.wurman.com/publishedarticles/2017/5/5/information-anxiety-towards-understanding [Accessed 13 Oct. 2018].
Chandra, N. (2018). “LATCH”: Information Architecture from the Eyes of an Urban Indian User !. [online] Medium. Available at: https://medium.com/@niveditachandra/latch-information-architecture-from-the-eyes-of-an-urban-indian-user-efd474a7bb37 [Accessed 13 Oct. 2018].
Labelling
Throughout all websites and web pages, correct labelling is vital. On the front end, page names must relate to the page content. A page containing contact details is to be called ‘Contact’ and an informative page about the company named ‘About’ and so on. These seemingly brainless tasks actually include a handful of important principles that need to be carried throughout the entire information structure of the website. For example, a well-organised sitemap can greatly improve a websites SEO as search engines rank pages, not just websites.
To explore this subject further, I have performed several tests across different websites in my chosen sector, communications.
Sitemapping
A sitemap is an XML file of a website comprising of all the page URLs. For the purpose of this exercise, I will be using the Ofcom website as an example. Most modern websites will have one and can usually be accessed by adding /sitemap.xml to the end of the main URL. (Sometimes, companies will have different sitemaps for different languages or areas of the website, so the /sitemap.xml URL extension will be an XML file including URLs of other XML files.)
Ofcom’s sitemap URL
The XML page, when viewed online in plain HTML, is very difficult for humans to make sense of.
Ofcom’s XML sitemap viewed as a HTML webpage
For this reason, diagrams are created as a visual representation of each tier of information. The diagram I have drawn below shows how many pages relate to the top level categories.
A visual representation of Ofcom’s top-level sitemap structure
This website’s top tier category menu seems to follow a loose organisational pattern. There are a couple of obvious titles mentioned such as ‘Home’, ‘About Ofcom’ and ‘Search’, however, titles such as ‘Spectrum’, ‘Research and Data’ and ‘Checker-App’ seem to be quite specific tasks to execute and I wonder why these have been included in the top tier category.
Meta tags
Meta tags are included in the web pages <head> code and summarises what information can be found on the website. They greatly impact a sites SEO (Search Engine Optimisation), therefore, relevant keywords are to be placed into this section to help the site appear in search engines. To analyse the way in which websites utilise this tool, I have looked at the way some well-known communications websites have executed this. The companies I researched are:
Unfortunately for this exercise, O2 is the only company to feature the keyword meta tag in its code.
<meta name="keywords" content="mobile phones, simplicity, mobile broadband with laptops, home broadband, mobile phone, broadband, business mobile phones." />
The meta tags shown here are:
- mobile phones
- simplicity
- mobile broadband with laptops
- home broadband
- mobile phone
- broadband
- business mobile phones
This does not surprise me at all. According to articles featured on Yoast, and many other SEO specialist websites, meta keywords have been redundant for years. The meta keywords tag was used and abused by developers as they included popular words, as well as content related phrases, to bump up the global search chain. This lead to irrelevant search results and soon became the reason why most websites have eradicated this feature. It is now seen as a spam feature and can have negative effects on the way websites are found through modern search engines.
Instead of thinking about which keywords to put in that silly tag for 5 minutes, think about your content for 5 minutes longer. (de Valk, 2017)
Top-Tier Menu Options
To compare top-tier menu options across various company sitemaps, I compared Skype, Three, Plusnet, and EE. I am looking to pick out structural similarities to be able to further analyse the way these communications websites are organising their content. The results are as follows:
Top-tier categories
This exercise frustrated me a lot. I quickly found that no two sitemaps are similar, let alone the same, and some seem to be doing their own thing entirely. In the above screenshot, it is apparent that Three follows no hierarchical structure and it’s top-level categories repeat 6 times due to poor consistency with capitalisation. Furthermore, there are only 3 categories that obviously correlate between Skype, Plusnet, and EE.
Further Observations
An example of a good sitemap is Skype‘s website. If I’m being picky, this sitemap isn’t exactly what I’m looking for, as it’s top-level categories are arranged by language tags. English is /en/, French is /fr/ and so on. However, the second tier categories for the English sitemap are well structured and logically organised.
Skype’s English sitemap contains 82 pages
When this sitemap is viewed with some CSS manipulation, courtesy of Yoast, I am able to view the full page URLs. From the screenshot below, it is easy to appreciate the effort that has gone into organising these page names by relevance and to see the logical hierarchy at play.
Skype’s XML sitemap styled with Yoast CSS
Menu Headers
Skype, Three, Plusnet and EE menu labelling comparison table
Across all websites, the three categories line up well. Each example features a company logo in the top left corner which is a link to the home page, links to buy/download their products and a help and support option in the top tier menu. Plusnet has the most options because they provide mobile and broadband services, so naturally, they need extra navigation. Three has the least at only 4 options, but they have definitely chosen the most important and this subsequently prioritises and declutters the main navigation.
In regard to the headers of each page, Three really utilises carousel headers. A carousel is featured at the top of the homepage and ‘Shop’. According to my own personal research, I believe this technique to work best if it’s paired with visual prompts for easier page scanning. On the other hand, Plusnet executes page headers very well by copying the top tier options almost exactly, resulting in minimal possible confusion.
For the <title> tags, there are no major issues that arise. Developers seem to have hit the nail on the head with all of the examples, with the exception of the missing tag for one of Skype’s pages. I would put this down to human error.
Reflection
Before this unit, I had no idea about search engine optimisation and it was a subject I had put to one side for my whole digital career. After studying sitemaps and meta tags, I have gained a greater understanding of how it all links together, and the daunting three letters (SEO) seem a lot less intimidating to me.
References
de Valk, J. (2018). Meta keywords: why we don’t use them – and neither should you • Yoast. [online] Yoast. Available at: https://yoast.com/meta-keywords/ [Accessed 21 Oct. 2018].
Navigation
In the world of digital design, it can seem as though there are so many different alternatives to execute one simple task, in this case, navigating a user through a website. While this statement is true, the decision of how to lay out a digital interface should not be decided upon lightly. Thanks to the hard work of a dedicated UX designer, users should glide through websites with ease and have no problem finding their way around, from any point in their user journey. In this exercise, I will be examining the world of navigational structures and the way these are presented throughout communications websites.
Global Navigation
A global navigation is statically placed on every page to be viewed at any time.
Samsung’s standardised static global navigation bar options consist of links that users will want to access at any time. Something different, however, is that their logo has broken the usual convention of being in the top left corner. Centralisation helps their website stand out from competitors as well as break up information. The left side includes product orientated pages, whereas the right is tailored to personal support.
Samsung global navigation
HTC’s cellular product range is in a drop-down menu that can be accessed from any time by hovering over the ‘Shop’ option. This works well as a global feature because it helps to promote their products, even if the user is looking at another, unrelated section of the website. The downfall of this is that it takes up a lot of room on the screen, and this distraction could lead to the abandonment of the original task.
HTC global navigation
In this example, I want to highlight Virgin Media Business’s static search bar. Whilst this counts as a search mechanic, I do believe this is important in the sense of global navigation. When a user is browsing the website, it is nice to have the security of being able to go off to any other page if desired.
Virgin global navigation
Lastly, the old-fashioned fat footer. This tried and tested user interface pattern has been around for years and is a safe way for websites to contain all of their most important links in one space without cluttering a menu bar. Vodafone’s clean, minimalist, white text on the charcoal background makes for a nice example.
Vodafone global navigation
Local Navigation
Local navigation is navigation that appears only on its relevant page(s).
Apple has categorised its product range in the top-tier menu system so, in this example, I have shown their ‘iPhone’ range. This second-tier menu is local to the iPhone category and features this specific product range. The same design is applied to their other top-tier menu options.
Apple local navigation
In this example, the bottom menu shows local navigation for the ‘Broadband’ section. This screenshot shows ‘Broadband’ highlighted in purple and this technique is common for navigational design, so the user knows which page they are on. Below this, the breadcrumb feature helps the user backtrack if needs be.
BT local navigation
Huawei’s ‘Consumer’, ‘Enterprise’ and ‘Carrier’ options are local to their homepage. These links are placed here for the user to define their consumer experience.
Huawei local navigation
Talk Talk’s local navigation in their ‘News and Opinion’ section separates content into categories. This method helps users browse their site by points of interest, therefore feeling as though their user journey is personalised to themselves.
TalkTalk local navigation
Contextual Navigation
Contextual navigation guides the user through content on the page they are currently on.
This first example of contextual navigation shows strong use of a grid system. By organising information into boxes, the user is shown six options on one page, each with the golden trifecta – a header, strap-line text, and a call-to-action.
O2 contextual navigation
The simplest of all the examples, WhatsApp makes use of the split screen layout. This gives the user two main options and ruthlessly cuts down on further navigation through the website. In this context, having only two options works well because WhatsApp is advertising the use of WhatsApp web as an alternative to WhatsApp for mobile. Any other options would be a distraction.
Whatsapp contextual navigation
Sky’s broadband information page relies on headers to navigate the user around (or more so down in this case) the page. The four headers featured here are clear indications of the content in each section so there is no confusion for what the user should expect.
Sky’s contextual navigation
Medium’s blogging site shows contextual navigation by sorting articles into relevant sections. The user is guided around the page with the combined use of headers, visualisation, and call-to-actions. Having said this, utilising all of these design mechanics in this way can result in a confusing and messy layout.
Medium’s contextual navigation
Supplementary Navigation
Supplementary navigation lets the user browse pages of the site through an interface on one page. An example of this may be on medical websites where the terms are long and hard to remember, so they make organised in alphabetical order. The user can select the starting letter and scroll down a list of potential terms.
In the world of communications websites, this is difficult to define.
Carphone Warehouse configurable navigation
Communications companies, these days, trade in a few different areas such as mobile phones, broadband or tariffs. There is such a big market for this service and sometimes an overwhelming amount of choice, configuration has stood out the most. This example from Carphone Warehouse features a range of personalisation options to choose from to help navigate the user to their ideal mobile deal.
Search
Searching for information on the internet has become a daily task for a lot of the modern, Western world. To many this appears to be such an effortless task, however, a lot of theory is going on behind the scenes. When a user inputs a search query, a request containing keywords is sent to a database where the relevant information, if stored here, is retrieved and displayed.
Search Query Builders
There are a few different ways in which search facilities look for information. These are called search query builders and the main ones applied by search engines are:
- Pattern matching searches a database for exactly what the user has inputted. E.g. ‘Brown dog’ will show results including those exact words.
- Spell checkers ensure the search query being inputted is spelled correctly and if not, gives suggestions. E.g. ‘Sprll checker’ will suggest ‘Spell checker’.
- Phonetic tools spell check the phonetic spelling of a search query and if it detects a fault, will provide suggestions. E.g. ‘Eks-ray’ would suggest ‘X-ray’.
- Stemming tools search for closely related words. E.g. ‘going’ and ‘gone’ stem from ‘go’.
- Natural language processing tools register the phrase being inputted and determine whether it is written in plain English or spoken English. E.g. plain English is ‘want to’ and spoken English translates as ‘wanna’.
- Controlled vocabularies and thesauri search a database of pre-determined search options (scope). E.g. search filters may include checkboxes.
Versus is a device comparison website that incorporates a controlled vocabulary filter. When the user inputs a device name, they are given results based on their exact search term and also others relating to it stored in the database. This particular search query builder works well in this circumstance because the user is presented with a specially refined range of options relating to their main query. When searching for a new device, users commonly look at a range of products when deciding what to purchase.
Versus controlled vocabulary
When inserting a term into HTC’s search tool, it recognises what is being inputted and attempts to complete the term. This technique is a mix of pattern matching and controlled vocabulary being able to predict the search term being inputted and refining the results to match.
HTC pattern matching search
Apple’s search mechanism mirrors a great deal of major modern search engines with its ability to provide suggestions. In this case, the suggestions incorporate the exact search term, demonstrating pattern matching and stemming tools. Phrases stemming from the word ‘iPhone’ have been included in both ‘Quick Links’ and ‘Suggested Searches’.
Apple stem search
Vodafone’s spellchecker is one of which we have all grown to know and love. Similar to Google’s, it provides the user with a ‘Did you mean…’ option and if no other results are displayed, which is true in this case, then the user clicks on the suggestion link and is brought to their relevant page.
Vodafone spellchecker
Search UI
User interface plays a big role in the search process. The layout should be easy for the user to find, intuitive for the user to engage with and simple enough for the user to navigate around the results provided. These examples will display how different forms of search UI is executed for optimum results.
Search bars are the original way to search and haven’t failed us yet. Their simplicity and ability to fit into a tight corner of any website with the intuitive looking-glass logo makes it an easy option to get the job done. Through this uncomplicated portal, however, can lead the user to more a sophisticated search such as word suggestions and related articles.
Apple, HTC, Samsung and Vodafone’s search bars
Carphone Warehouse’s comparison tool allows up to three devices and these can be searched for in a number of ways. The notable examples here, however, are being able to choose from a pre-determined list (this is hidden behind the drop-down list in the screenshot above) or input a search term into the search bar.
The search bar uses controlled vocabulary to predict the rest of the desired search term. In the above example, when the user inputs ‘”hua”, the query builder already knows to show a set of results beginning with the three letters h, u and a. In this case, these are all Huawei phones. It is important to have the user interface laid out this way for the user to be able to type into the search bar and show potential results as a drop-down list next to the comparison section. The use of images is also very beneficial because the user could be be interested in the aesthetic aspect of the device as well as the functionality which will be displayed in the next page/s.
Carphone Warehouse’s comparison search
EE have chosen to include several different UIs to display search results. In turn, the search query builder must be sophisticated enough to return appropriate, relevant results. EE have executed this well by including white space for the content not to clash. The user inputs the search term into the search bar and keywords are picked up. In this case, ‘iphone’ is detected so it filters results for iPhones.
Immediately underneath the search bar is an organisational tab system for the user to filter results further. The users eyes scan down to view the eye catching images but on the way, can see their search term in six different settings. This may encourage the user to delve further into the website and discover more information. Furthermore, EE have included a section for relevant links on the website in a blog-type setting. This tempts the user to scroll down the page for extra reading. Additionally, a subtle, grey call-to-action has been integrated underneath the ‘Read more’ call-to-action to guide another user journey involving a potential purchase.
EE search layout
Lastly, Google’s product store takes an innovative approach towards search prompts and visual icon association.
The user starts by clicked on the looking glass icon in the top right of the screen, next to the shopping cart icon and Google profile image.
The top-tier menu system on Google’s product website
Once clicked, a search bar appears in the middle of the bar, replacing all other menu options. Before the user has even typed a letter, two search queries are suggested and are paired with visual prompts.
Suggestions
The top option brings the user to the official page of the product. This is why the search query is paired with the item.
Google Pixel 3 site page
If the other query is clicked, the user is brought to a page of more options related to the query “google pixel 3 case”.
Google Pixel 3 case search options
I believe this technique has been utilised to push their latest product. Even if the user has come to the website to view another product or service, they are presented with two options of viewing the google pixel 3 case. This could initiate an interest in the product and guide a new, unexpected user journey.
Having said this, it can also be greatly distracting. Even though the suggestions subtly sit underneath the search bar, the user may get confused as to why it has popped up in the first place, without them typing anything.
Reflection
There any many ways to execute queries and display search inputs and it really does boil down to which is best for the job in hand. The most sophisticated of search query builders are a clever combination of multiple elements and are therefore able to search a database quickly and efficiently, whilst the user interface is extremely easy to decode.