Interface Inventory
Many are familiar with the concept of a content inventory. Content audits are usually performed in the early stages of a website redesign process to take stock of all a site’s content. It’s a tedious process involving spreadsheets and caffeine, but the hard work pays off. You end up all your content laid out on the table, which gives you a new perspective on what your content is and how to tackle it.
Enter the interface inventory.
An interface inventory is similar to a content inventory, only instead of sifting through and categorizing content, you’re taking stock and categorizing the components making up your website, app, intranet, hoobadyboop, or whatever (it doesn’t matter). An interface inventory is a comprehensive collection of the bits and pieces that make up your interface.
Conducting an Interface Audit
Here are the steps to creating an interface inventory:
- Crack open your project. Get your screenshot fingers ready.
- Set up a blank template where you’ll dump and categorize the components of the interface. I’d recommend using a program like Keynote or PowerPoint, as you really just need a category title and a place to dump screenshots. I’ve created an interface inventory Keynote template with a bunch of categories to get you started.
- Start screenshotting. Now for the fun/tedious part. Start grabbing screenshots of the ingredients of your interface. Grab headings, text fields, radio buttons, carousels, accordions, tabs, images, icons, video players, graphs, etc, etc. Note that you’re not trying to capture every single instance of a component, but rather uncover distinct treatments of a component (like a button with a bevel and right-facing caret vs another without any bevel/caret).
- Categorize screenshots. You can do this as you go or after your screenshotting session, but the goal is to be able to view all the various treatments of a particular molecule side by side.
- Present the interface inventory to your boss/client/organization and watch them cry realistic tears.
Benefits of an Interface Inventory
Why go through all the trouble of deconstructing and cataloging an interface? It’s certainly a tedious process, but the results are extremely beneficial. Here are just some of the benefits of an interface inventory:
- Lays the groundwork to a sound design system—Creating systematic, atomic, styleguide-driven design is a smart strategy, and an interface inventory is that first step at deconstructing pages down to their atomic level. Eventually the interface inventory can be used to help set up a style guide or pattern library.
- Convince your boss/client/organization that establishing a cohesive design system is essential. This is especially true for large organizations consisting of many teams or working with multiple 3rd party agencies. An interface inventory is the first step toward establishing a common interface language.
- Promote consistency—Displaying a plethora of similar-but-still-different treatments next to each other exposes redundancy and underscores the need to create a consistent, cohesive experience.
- Ensures all interface components are accounted for—This happens a lot. A full-on redesign is underway, and somewhere along the line certain modules end up slipping between the cracks. Creating an interface inventory up front helps establish project scope and ensures that all components are accounted for so there are no nasty surprises at the 11th hour before launch.
- Responsive Retrofitting—While mobile-first responsive design is certainly a preferred approach to responsive design, it’s not always feasible to undertake right away. Budget, time, scope, skillset, and more often force organizations to retrofit their existing website into a responsive site. Creating an interface inventory allows design teams to analyze the interface in order to establish what components will be easy and relatively difficult to convert into a responsive environment.
Interface Inventories In Action
I went through just a few pages of my bank’s website and screen grabbed all the various button variations I could find. Here’s the result:
As you can see, their button styles are all over the place and are about the furthest thing from consistent and cohesive. Looking closer at the buttons reveal incredible inconsistency in gradient, arrow, border and more:
Now contrast these styles with a button interface inventory for Etsy, a company who maintains a robust styleguide and pattern library:
As you can see, there are far fewer button styles. This is a good thing as it means that there are only a few button styles that get reused throughout the interface.
It’s not to say that deviating from established patterns is always a bad idea, but it’s important to recognize the difference between intentional and unintentional deviation. An interface inventory helps expose unintentional inconsistencies and encourages consistent, deliberate design decisions.
The Road Ahead
More organizations are beginning to understand the need to create robust design systems, and interface inventories can be a great way to display an interface as a system of components rather than a series of discrete pages. An interface inventory can be a great way to convince your client/boss/organization to undertake a thoughtful, systematic redesign.
Download the interface inventory Keynote boilerplate and get screenshotting!
25 Comments
scarbom
etsy’s product offering (and hence design requirements) will be much simpler than any bank or “large-enterprise” site out there. or so would respond “large-enterprise” stakeholders. i would love to see an example from a “large-enterprise” site with a robust design system in place.
Dennis Kardys
I love this concept. We’ve been doing something similar in the early design planning stages. We basically wireframe (gasp!) all components and their various states. The main benefit we’ve reaped is that it not only informs what goes into the styleguide/prototypes, but it also gets IA and UI designers collaborating with front end developers and planning modular patterns and UI logic.
When auditing, how much detail do you think it makes sense to go into…what I mean is that you may have small micro patterns (like a timestamp, caption, byline, or horizontal list of items) that then get used as building blocks for bigger components (like carousels, video players, navigation menus, etc). So I guess the question is how much granularity do you think is necessary? Perhaps it depends on what stage of design you’re in?
Ricardo Torres
Great article, mate! Also, I really like this boilerplate http://brettjankord.com/projects/style-guide-boilerplate/
By the way, am I crazy or did you just change the page header?
brad
Yup! More changes to come.
Bobby
HA! Brad, awesome post, and so true. I worked as the senior designer back in 2008 for PNC and was originally hire to help with a redesign back then. As you can see it never happened. Our hands were always tied by many factors.
I put together a style guide back then and tried to standardize the button styles. It seems like a simple task, to standardize the buttons on a site like PNC, but there are a lot of “real world” type of roadblocks and politics involved. Trust me i’m not trying to make excuses as i fought the fight every day.
1. The CMS system is old and convoluted and all styles have to be in-line (at least when @given2code and i were there) so most if not all the buttons where images and not CSS
2. Legacy styles and rogue pages EVERYWHERE (which is why an inventory works IMHO). I think IT originally designed the site back in 2004/5 and it hasn’t really changed much since.
3. Design by committee. Each dept in PNC wants to have their own look and feel… sigh.. even on the site.
and many many other reasons i’d rather not get into publicly. 🙂
b
G
100% dead on. Thank you.
I worked at that company three years ago as a developer on the non-secure side of their sites – the targeted-marketing assets. My best friend and I were hired in 2008 too refresh this banks website – but it still looks the same. Five years have passed.
Myself, every other developer and the talented designers we worked with have all left. It gets tiring saying these same things you point out, over and over again, as long five years ago.
No one from eCommerce wants to work with Interactive. hell – IT thinks table-based markup is just “another way of doing it.” Nothing has changed. The squabbles between department fiefdoms is legendary. And out of control. All these people, from every department involved, truly want to do the best – but they will never get a chance. Intentions just don’t matter. Honestly, a lack of anything resembling an internal digital brand book is the cause of most of what you illustrate above…
I’m also a customer and I love their flagship product. Its really well done. And proves that brand consistency is possible there. Someone just needs to let those who know, do… and step aside.
Unfortunate that you had to put them on blast. I just hope it helps.
Aaron Gustafson
This is a really great idea Brad. Seems like a really good candidate for Evernote Web Clipper and/or Skitch too.
Megan Miller
Absolutely love this idea. What a perfect way to start a redesign process. Will definitely be adding this to my designer toolkit.
Brett Jankord
Brilliant! I especially like the idea of using it in a responsive retrofit.
I think you are spot on with your point, “… an interface inventory allows design teams to analyze the interface in order to establish what components will be easy and relatively difficult to convert into a responsive environment.”
I’ll use this approach in my next project.
Andy Pratt
Great idea!
Levente
Thanks for the great heads-up.
Could you please convert your Interface Inventory template/boilerplate into any non-mac format too, so that we non-mac people can look at it?
Ben Demeyere
I wonder if it would be a good idea to make (for example) a buttons.html page and place all the buttons on one page. Same principles but you can review as you go building a site.
Also, I’d love to know what the “Customize Your Pig” button does!
Brian LeRoux
Love this. We generate a usage guide in Topcoat for much the same purpose!
http://topcoat.io/topcoat/
Steve
Nice article!
I find it’s also really helpful to take it a little further and to group the elements into semantic definitions. i.e. ‘takes you to the next page’, ‘submits form data’.
Anything that helps increase a sense of respect for the element and how its appearance should be driven by its purpose.
Aaron Gustafson
I wrote it up: Evernote for Interface Inventories
Justin Avery
Great idea Brad, especially good when approaching a retrofit or new design and following your atomic ideas.
As soon as I started reading your post Evernote as a tool over Keynote seemed a more obvious choice, so kudos to Aaron for writing up (although the link is broken in the comments).
Aeshvarya Verma
A good idea, especially when someone wants to condense the design work at one place, initially done by separate design teams.
Andy Parker
We’ve been doing similar exercises at Clearleft lately. Paul Robert Lloyd wrote a post a few months back about how we were adapting visual design exploration. http://clearleft.com/thinks/visualdesignexplorations/
The idea of a visual audit could help with knowing all the button types on a site during a redesign, but realistically aren’t you likely to sack them all down to 2/3 button types anyway?
Fraser
Awesome tool for communication with remote teams. I’ve used PowerPoint /Keynote using Google Drive to create a consistent design language but I will have to try it out with Evernote.
Kiko Doran
Aaron’s link is messed up. It’s concatenating on Brad’s url structure. You can access the file here:
http://blog.easy-designs.net/archives/evernote-for-interface-inventories/
Rob Levin
Nice tip! This is one of those things that seems so obvious but we all forget to do it. I’ve been also looking at pattern inventory tools like patternry, pears, (your) patternlab, etc. Seems related although a bit different; but I suppose if you’ve been that organized enough from the get go to create a pattern inventory you’ll have your interface inventory without this extra step (but then again it might be unlikely that you’d capture “all” your components even if you do implement a pattern library up front)…thoughts?
AWKM
Guess it’ll show the sites that have been touched by many brains and hands as opposed to a well directed and organized team. Or sites that have evolved over many years as opposed to new start-to-finish designs.
Randy J. Hunt
Thanks for including the Etsy example as a point of contrast. We’ve worked quite hard, and continue to, to keep the interface palette to an appropriate set of “just enough” elements. It’s been a fun, challenging, and educational experience for the team rolling through an 8 year-old product that’s ever-changning.
Rolaine D.
Great post! I actually did this a while back which led to some changes but was never fully implemented. Our group just took in too many projects at once which diverted the focus on other things and eventually aborted the whole idea. Now that we’ve set a side some serious time for internal project and a redesign, I’ll be doing another round of interface audit of our current site and create a pattern library for the new site which will help keep the style consistent. Fun times ahead! Thanks again for the post!
Marco Berrocal
Just when you thought, NO, it CANNOT be possible that a big company can have such a mess as far as their layout is concerned, you see… THAT.
And love the Evernote stuff by the way!!
Comments are closed for this post. If you've got something to add, feel free to reach out on Twitter.