I attended the UX London conference about a month ago and one of the speakers was Abby Covert, an independent information architect, a faculty member of the School of Visual Arts and the current president of the Information Architecture Institute, who was very keen to spread the word about the importance of good information architecture (IA).
In her talk, Covert referenced her book, “How to Make Sense of Any Mess”, and focused on a set of three principles to help anyone in making sense of a complex information project.
In a different talk that she published on her website, Covert points out how only when encountering something that is not clear or that doesn't make sense we start thinking about the necessity of good IA.
Following this talk I realised that there’s a big resemblance between IA and front end design work processes, since both are essentially based on hierarchical structures (as much of the world is also structured as a hierarchy). I also thought it would be worthwhile to go through these three principles and apply them to front end design. So let’s start.
1. Structuring / Showing an alternative way of organising things
Based on Covert’s website online lessons, the rules and hierarchy (model) by which the information is organised should be determined by several factors:
- The information amount, quality and prioritisation
- The users’ capability to choose from the information at each stage in the process they are undertaking
- The medium and context in which the information is passing through
- The relationships between the information and the mental model of the target user
The purpose is to create a logical structure that brings meaning to what you present and that is able to keep this meaning when it is effected across various channels, over time and through usage.
A project work methodology and development tools are chosen according to its:
- Type (a website / a web application / a mobile app)
- Objectives (Conversion, building a big user base, providing a service, etc.)
- Users (Defined by age, gender, region, etc.)
- Scale and budget (From short and simple to long and complex)
Usually working in an agile environment with different open source front end frameworks such as Bootstrap, Foundation or Google Material Design provides a dynamic platform for creating a bespoke variety of products.
2. Labelling / Simplifying the language used in your organisation
IA Makes sure that the labels used in the product are clear and have a universal meaning for the relevant users, so they will know what to do. Correct labelling can be achieved by conducting user research and usability testing.
There are 2 kinds of labelling.
Firstly, labelling appears simply by using the HTML and CSS syntaxes.
Secondly, by applying Class or Id attributes to elements in the HTML, these elements are being labeled with the intention of making it possible to style them with CSS. The Class attribute groups them together while the Id attribute differentiates a specific element from the rest. Eventually, when applying these attributes logically, they ensure a clear and consistent front end design.
3. Aligning / Making a picture of the monster in everyone’s head
In her talk, Abby Covert advised that when starting an IA project it is necessary to pick the brains of the relevant users in order to grasp everything that they might know or need in regards to that project. This is an efficient way to obtain a wider perspective of things and learn how it is possible to provide the best IA solutions.
When developing a product, the front end designer is a part of a team and as such needs to communicate with the rest of the team members. It is vital for the success of a project that everyone collaborates and has the same idea and understanding.
In summary, IA is a prominent part of a good user experience design and when it works well in a product, we don’t put much thought into it, although in general, IA has a huge impact on life quality.
Adding to that, IA and front end design work processes are very similar and designers can apply most of IA work principles to front end design and vice versa.