Hi, I’m Brian Dys — a photographer from the inside looking out · a composer entangled in electronic music · a UX designer · a spouse, a parent, & everything in between.
What is Infomap?
Infomap is a spinoff of information architecture – it is a small part of it and is specifically for the usage of designers in creating Interaction Diagrams (basically a diagram of wireframes showing interaction; details on this in the future).
What is the purpose of Infomap?
It helps in setting up the environment for the web product’s navigation and content structure.
What are the requirements in creating an Infomap?
1. Purpose of the web product
2. Business goals
3. User goals
Basically, a Product Requirements Document (PRD).
Stages of Infomap
Let’s use a Messaging app as an example – basically it allows the user to send and receive messages to a recipient; the app also requires the user to accept the Terms & Conditions before usage. For the sake of simplicity, let these be the only functions of the app.
1. Content Inventory
- List down the features, components, activities, tasks, actions you could extract from the PRD – preferably on pieces of paper that you could easily rearrange. In the given above, you might list down the following: Terms & Conditions Content, Terms & Conditions Acceptance Action, Read Messages, Compose Message, Input Recipient, Send Message, Receive Message, Delete Message, Forward Message, etc.
- Group those that belong together in an activity and label the groups. In the content inventory, we could find three groups namely, Terms & Conditions, Messages and Recipients. These group labels could act as the component names that you could use anywhere like class names in CSS.
2. Content Mapping
- Categorize the grouped content inventory into two Views: Entrance and Home. For processes that require a user to do something before using the app – that falls under Entrance (e.g., the Registration process or the Acceptance of Terms & Conditions).
- Determine which of the components have secondary functions – they will be converted to links (i.e., instead of the components presence, only its link will be there and it will have a separate view). In our example, under Home the primary component is Read Message and since others are secondary, they will be links.
- Links must be categorized under primary and secondary (basically, primary links are important to the main function of the product and secondary links are helpers or informational in nature).
That’s it – as for the other views, every link must have its own View (so that your views will be: Entrance, Home/Read Messages, Compose Message, etc.)
All in all you must end up having the following:
- Primary Links (must include the link to the View it belongs to)
- Secondary Links
- Entrance Components & Links
- Home Components & Links