LATCH & I.A – Week 4 Tasks

LATCH, what is it?

It’s a way to organize information, in other words, information architecture. Organizing information meaningfully and effectively is still one of the biggest problems as of today faced by UX designers. As a Designer myself, I have worked on multiple projects within different industries. Sometimes I am given information from my clients to place on their websites & apps and I get lost and confused easily, why? due to the lack of information architecture.

This is where LATCH comes in with its brilliance and a simple way to structure information. LATCH preserves and utilizes the 5 most efficient ways to organize any information:

L: Location

This is the technique of organizing information based on its location. So you take all the information your organizing like fruits and vegetables, you then arrange the fruits and vegetables based on their regions and where they come from e.g Europe, Asia, Middle-east, etc…

A: Alphabet

Organizing the content Alphabetically is probably the easiest way to group information, mainly because alphabets are universally recognized. However, we should ensure that the actual labels are also something which maps the mental model of the user.

T: Time

In the context of fruits and vegetables, time can be referred to and utilized as “Year of Production”. Perhaps the years when the fruits have been founded? you then organize the fruits and vegetables based on that.

C: Category

Most frequently used technique of organizing content on websites. Category refers to any meaningful group, with reference to the website or the audience. It is very important, however, to define categories which make sense to your users. If users did not understand your categories, they may lead to a miss-lead of information and cause problems for you and your company/brand/icon.

H: Hatch

Hierarchy refers to arranging information by any order, such as size and cost. Low to High, or High to Low and popularity.

A well-designed website utilizes all these techniques to display all relevant content, which can be efficiently used by the users. If a UX designer is unable to categorize some information by either of the above-mentioned techniques, he/she is not using it correctly and might need a new perspective. It is rather an under-estimate today how important principles like these are.

It is important for people to recognize these principles and give importance to them when they work on high and low scale projects to ensure the quality of production and quality of use when public viewers start using their products.

LATCH Excercise

On Thursday & Friday, Jamie has assigned to organize fruits and vegetables using LATCH. So on Thursday my colleagues and I organized sticky notes that contained the names of different fruits, vegetables, and chillis. Then the next day, Friday we all resumed to performing and executing the individual activity of digitizing the fruits and vegetables using LATCH. This was done via charts using






The exercise was challenging, but more on the time-consuming side. Information Architecture may not be as tough as it sounds, but it takes a lot of time when your working with a huge amount of information. I have never really done any form of information architecture, so I learned quite a lot. It may not be as important to me as an Interaction Designer, but it is important to me to consume general knowledge to improve myself and be more aware of how things are done.

“Every advance in information technologies has increased the overall amount of information available and has made it possible for more people to publish and have access to information, the resulting glut has also led to the creation of new technologies to help people organize, find, and make better use of information.” (Arrango et al, 2015) – Information Architecture, 4th Edition. Sebastopol, CA: O’Reilly Media

This is true, because more, and more users are using the internet every day, more websites are being created. Did you know approximately 380 new websites are created every minute! so what does this mean? this means INFORMATION ARCHITECTURE. This correlates directly with LATCH and the text from the book.

The more information there, the more we are encouraged to utilize I.A Without I.A, i believe our information would be scattered everywhere. It would be very un-organized and hard to perceive and understand the purpose of that information, including what the information is trying to tell us.

Visual Sitemap

What are visual sitemaps?

Sitemaps are a very important way for a website to communicate with search engines like Google, Bing, etc… Robots (.txt) tells a search engine which part of the website to not include for indexing, and the web sitemap tells these search engines where you’d like them to go.

Sitemaps are not a new concept as they have always been a part of the best practices of web design. With the adoption of sitemaps by search engines, it is now even more vital to engineering them accurately. Curious as to why to sitemaps are necessary? and the answer is obvious to some but not all. One sitemap is for humans on the other is for spiders or bots, also known as crawlers. It is important to clarify that having two sitemaps is not regarded as having two of the same thing.

Benefits & Purposes of Sitemaps

  • Effect ranking on search engines: If Google spiders or bots are not able to crawl the site, it will not get indexed, and the content will not get ranked in search engines results pages.
  • List all pages of your website. This could include website pages that aren’t otherwise discoverable by search engines.
  • Give priority information about pages to search engines. XML Sitemap has an optional tag for the priority of the pages. This is an indication of how important a given page is relevant to all the others on the site. This helps search engines to order the crawling of the listed web-pages based on priority information.

There are two types of Sitemaps

XML Sitemaps

They are for the benefits of Google or search engine crawlers. It is an easy way to help robots to crawl all listed web-pages and index them within the search engine.

They have a unique structure that holds a list of URL’s of pages plus some additional information such as metadata of page URLs, how often content of pages updated, last updated on and general detail of pages in relation to each other.

HTML Sitemaps

HTML sitemap is intended for front-end users of the website. It is a general overview of the website pages. It allows users to easily navigate a website.

My Sitemap

In the sector health care in Norwich, there is a website called Norfolk Community Health and Care located here:

I have generated interesting results using Jamie’s javascript processor that collects the XML information and categorizes the information and how many pages exist within each category.

The above table suggests that NFH is emphasizing on the-care-we-offer because I believe they want to create and initialize a connection with their viewers and potential customers, why? because it’s a way of encouragement and health insuring when they use their services.

I’m also not surprised that About Us is the 2nd highest, because its important for viewers to know what the service or website is about before anything else. The other catagories have a low level of importance in general, therefore low amounts of pages.


One of the key components of a website’s information architecture (IA) and corresponding navigation is an effective labeling system. Search engine optimizers understand that a website’s labeling system should contain keywords.

It is often perceived by people that a navigation label is a text that is placed on a navigation button. However, there are other web page elements that contribute and have the role of navigation labels such as:

  • Titles
  • Headings and subheadings
  • Breadcrumbs
  • Embedded text links
  • URLs

It’s best advised to utilize keywords with navigation labels. When they are used consistently throughout a website, they effectively communicate what the website is about and it’s site content. Navigation labels also appear in search listings on search result pages. So you can see how important labels are, and how much they can affect your website if they are used effectively.

Four Healthcare Websites LABELS

PDF Link



Trinity & Bowthorpe:

Meta Keywords: <meta id=”ctl00__metaKeywordsname=”keywordscontent=”Trinity &amp; Bowthorpe Medical Practice,Bowthorpe Health Centre,Wendene,Norwich, Norfolk,NR5 9HA,doctors Bowthorpe Health Centre,doctors Wendene,doctors Norwich,doctors Norfolk,Trinity Street Surgery,Trinity Street Surgery,1 Trinity Street,Norwich,NR2 2BQ,doctors Trinity Street Surgery,doctors 1 Trinity Street,doctors Norwich,gp,GP,doctor,doctors,medical centre,health centre,mysurgerywebsite,surgery website,nurse,practice,dentist,dentists,dental” />




Oakstreet Medical


I have taken a look at 4 comparable websites within my sector of healthcare. The results are rather interesting because a lot of the labeling is similar and there is a form of connection that all of them have for each other.

What they all have in common is the News label, and the question is why? perhaps each website is representing its own news relevant to the medical care, correct? In fact, that’s what I have seen when I clicked on the label. I was directed to a page containing that information. I suspect it’s a form of marketing and SEO. This is because when the user searches news on Google, resulting in being able to place their websites within that search query. In return increasing traffic.

Another result that I noticed is they all have in common an About or an About Us label, except Trinity & Bowthorpe. I’m not particularly sure why a website of healthcare wouldn’t have an about page. I think it’s necessary because it helps to establish a connection with the patient, it’s personal, and makes the patient feel welcomed.

As for the other differences, only Trinity & Bowthorpe had a Appointments option, while the others didn’t. In this day and age it is important to be able to book appointments online rather than having to call someone and speak to them for 5 minutes just to book an appointment, where if you do it online, it only takes 2-3 minutes perhaps? but that’s not the point, the point is automated systems are far more reliable, an employee risks of making a mistake with the appointment. As well booking appointments via the online platform would allow quick and fast amendments.

Meta Keywords

Meta Keywords are a specific type of meta tag that appears in the HTML code of a Web page and help tell search engines what the topic of the page is.

The importance of meta tags is that the search engines read them in order to compare if these keywords and the description are related to the visible content. Are your keywords present in your webpage? Is your meta description related to your content and your site’s niche? There is a certain weight in your meta tags that the search engines see, that being the reason, wouldn’t you want to do everything in order to bring your page a little bit higher in the rankings? That’s exactly the reason why meta tags are important.

In order to begin writing the meta keywords of your website, you simply attach the following code within <header> of your HTML page like this: <meta name=”keywords” content=”design, development, art”/>


“Google took action first. In 2009, the search engine officially announced that it does not use the meta keywords tag as a ranking factor (although they actually had stopped using it many years prior). Could they have changed their mind since then? Well, probably not. It wouldn’t make any sense for Google, in its endless quest to battle web spam and provide better search results, to start allowing this again. Just imagine Matt Cutts saying, “Hey, I think we should start using the meta keywords tag again. Surely people have stopped all that keyword stuffing by now.” Yeah, right. Old habits die hard, and spammers will always fill the meta keywords tag with every word they can think of.

No. There is no legitimate evidence whatsoever that meta keywords help your rankings. At best, entering meta keywords on every page of your website is a waste of time. And that’s the best case scenario. Do you have a lot of time to waste on tactics that don’t work?”

The tables above are a representation of information based on the labels I clicked on. What they all have in common is a services label, why? because we know healthcare is a service in the industry, and it is crucial information for the website viewers to know what kind of services each healthcare offers.

Another point is Trinity & Bowthorpe doesn’t have an About page, it seems as if Trinity has its own approach towards their website, they don’t seem to follow the common and the existing. What’s even odder and makes me wonder is why doesn’t Trinity and have ANY destination titles? where are the titles? this affects their SEO, even worse, it’s just the fact that their pages have absolutely no titles.

The titles of the other websites are exactly the same or similar. Of course, all of them have different heading labels, this suggests that the information they contain is either different, or very similar, but just with different heading labels.

Global, Local, and Contextual Navigations

1. Global

The purpose of the Global Navigation is to devise the web content into a small number of accessible menu options. This can be any number from 4 to 8 or even 10 main menu options. Each of these menu choices represents a part of the website. It allows the viewer to understand where to start looking. A good example is Ikea stores are always open planned, with many products available. To help their customers find these products, they are grouped and classified (LATCH). All thousands of products can be grouped logically and fit under headings such as Chairs, Couches, Tables, Desks, etc…


2. Local Navigation

As previously mentioned, the main menu option represents a “section” of the website. A section might be Desks. A local navigation represents sub-sections and groups and classifies the content within its respective section. For example, The Desks local navigation might consist of office desks, casual desks, and home desks.




3. Contextual Navigation

Contextual navigation is the user’s passport to different sections of a website. It is generally found within the body of the website and provides links to relevant content that are not housed within the section of the website that the user is currently viewing.


Overall differences & contrasts

As you can see, there are 12 images in total above representing the three different kinds of navigation. The key differences are visual. Different colors, different layout, but in conclusion, they all are serving the main purpose of navigation and allows users to find relevant content.

What I thought was interesting was the Global Navigation of Mayo Clinic. They approached their navigation system differently. A unique layout, rather than the tradition of having links all in one line together. I think it’s a great approach and makes their website more interactive and interesting.

As for Local Navigation, all the websites are using drop-downs. So there is no difference in functionality, but a difference visually, the colors, font-size etc…

Contextual Navigation can be gone broad with, however, the websites I listed are using the contextual navigation to represent different parts of the relevant content in other pages. Especially ‘Featured Stories’, which is relevant content but compared to the other websites, it has a different approach.

Supplementary Forms

I could only find only one example that shows-off for supplementary based navigation systems such as the image below:

The search functionality that it offers is great because you can find a disease by its letter. That is quite unique because I don’t come across such search features that often. It offers users the flexibility to find what they are looking for. You can see it for yourself here:

The idea is very similar to a site index, but instead an index for diseases perhaps?

Site index Example

However, what is exactly supplementary navigation systems?  Supplemental navigation systems include sitemaps, indexes, and guides. These are external to the basic hierarchy of a website and provide complementary ways of finding content and completing tasks.

Supplementary navigation systems can be critical factors for ensuring searching usability and finding information within large websites. Many site owners still have the misconception that if they could get the taxonomy right, they automatically fulfilled the needs of all users. But it’s more complex than that.

  • A sitemap is as the word itself states, it’s a map, a tree of the whole website. It’s the most natural for websites that lend themselves to hierarchical organization. It is also a way to find out how large the website is. For a small site with only two or three hierarchical levels, a sitemap may be unnecessary.
  • Site indexes, just like the back-of-book index found in several print materials, a web-based index presents keywords or phrases alphabetically, while not representing the hierarchy. not like a table of contents, indexes are comparatively flat, presenting only 1 or 2 levels of depth. Therefore, indexes work well for users who know the name of the item they’re trying to find.
  • Guides will take many forms, as well as guided tours, tutorials, and micro-portals centered around a selected audience, topic, or task. In every case, guides supplement the prevailing means that of navigating and understanding website content. Guides usually function helpful tools for introducing new users to the content and practicality of an internet website.

The searching system is a central part of supplemental navigation. Search is the go-to tool of users because it puts them in the right position, allowing them to use their own keywords to search for the content they strive to find. However, the ambiguity of language can cause huge problems with most search experiences. Users, authors, and information architects all use different words for the same things. Because the design of effective search systems is so important and so complex.

Search Functionality & UI

While this search functionality is only limited to 2 query building devices, it’s still a search facility that offers to search on all their websites or the website you are on. It’s a little different from the traditional query building devices such as “location”, “age”, etc…but I think it’s important to be broad in this matter to allow the influence and the possibility of other search systems.

The examples above are all I can possibly find. It’s extremely difficult to find healthcare websites that offer query building devices in your search. All I was able to do is filter my results using search terms and keywords. I looked at many websites and so I have come to the conclusion that they all seem to offer the exact same functionality, the only difference is the visual design of their searches.

I’m not sure why the healthcare sector is scarce with the query building devices within their search systems. It could be because users do not require search queries in this sector and so the in the medical care industry does not feel provoked or the need to build these query devices.

Although those possibilities do exist, when I think about information architecture, it could because of the IA. IA largely determines the importance of these query searching devices. My hypothesis is that because of the information architecture of these facilities, the search building systems are not required. Simply because using keywords could be enough because users find out what they want already with those terms.

I see no point of constructing search query devices if the user base does not require them. Why complicate search systems if they are not required. Another possibility could be because these cooperations have not done enough research to conclude that they are not required.

While this is all speculation, I think they are good speculations from my perspective. I thought about this matter and subject from multiple sides and I see no other possible conclusion.

UI Search Results Manipulation

The search engine manipulation effect (SEME) is the change in consumer preferences from manipulations of search results by search engine providers. A great example of this is Google.

Notice how the search functionality by Google using UI can manipulate search results. Google has implemented an “I’m Feeling Lucky” search button. You press the Google Search button (or press Return or Enter on your keyboard), and Google returns a results page that shows multiple websites matching your search phrase.

The I’m Feeling Lucky button bypasses that search results page and goes directly to the first-ranked page for the search phrase you entered.  Depending on your search query, often the first result is the best one, so clicking the I’m Feeling Lucky button saves you a few extra seconds parsing through the list of search results. Just click the button after you enter your search phrase.

Further on, other search manipulation effects that contribute to a good User Experience, is Auto  Suggestions.  Probably the most useful search pattern that emerged in Web 2.0. They are used to reduce data entry and provide immediate results. You should provide auto-suggestions as quickly as possible, such as after the third character is entered, to provide immediate value and reduce users data entry effort.

Another form of search manipulation and results are definitely recent and saved searches. If users would like to call information from their memory, they could have forgotten that information and they need to find it again. By simply accessing recent or saved searches, this problem or issue is eliminated.

In our current times of digital experiences and technology. Tools and supporters mentioned above are very useful to create a great user experience. It’s a method of helping your users use your product effectively. Utilizing UX principles and great design together creates excellent standards of product satisfaction.


Medium. (2018). “LATCH”: Information Architecture from the Eyes of an Urban Indian User !. [online] Available at: [Accessed 14 Oct. 2018]. (2018). The Lazy Information Architect’s Guide to Organising Content | UXmas | An advent calendar for UX folk. [online] Available at: [Accessed 14 Oct. 2018].

Active Learning. (2018). Applying L.A.T.C.H. to Infographics. [online] Available at: [Accessed 14 Oct. 2018]. (2018). What Is the Difference Between Tags & Labels in Blogspot?. [online] Available at: [Accessed 16 Oct. 2018]. (2018). Labels | U.S. Web Design System. [online] Available at: [Accessed 16 Oct. 2018].

Thurow, S. and Thurow, S. (2018). Effective Navigation Labels for Search Engine Optimization (SEO). [online] Search Engine Land. Available at: [Accessed 16 Oct. 2018]. (2018). [online] Available at: [Accessed 16 Oct. 2018]. (2018). Meta Keywords: What They Are and How They Work | WordStream. [online] Available at: [Accessed 16 Oct. 2018].