*The stuff that's named is scary enough, but the stuff that's nameless or has multiple names by different stakeholders is even worse.
*Sounds pretty arcane, I know, but let me point out that (a) this didn't used to exist at all and (b) hundreds of millions of present-day people spend hours wrangling with this every day.
http://bradfrost.com/blog/post/conducting-an-interface-inventory/
(…)
"Some Interface Inventory Categories
▪ Global – things like headers and footers and other global elements that are shared across the entire UI
▪ Navigation – primary navigation, footer navigation, pagination, breadcrumbs, interactive component controls, and basically anything that’s used to navigate around a UI
▪ Image types – Logos, heros, avatars, thumbnails, backgrounds, etc and any other unique image pattern that shows up in the UI. I’ve found this of the most challenging categories to round up.
▪ Icons – a special type of image worthy of its own category. Capture magnifying glasses, social icons, arrows, hamburgers, spinners, favicons, and every other interface icon across the experience
▪ Forms – Inputs, text areas, select menus, checkboxes, switches, radio buttons, sliders, and other forms of user input
▪ Buttons – The quintessential UI element. Capture all the unique button patterns throughout an experience: primary, secondary, big, small, disabled, active, loading, etc
▪ Headings – h1, h2, h3, h4, h5, h6 and variations of typographic headings. This can be another challenging category as many elements might be considered headings
▪ “Blocks” – I call collections of headings and/or images and/or excerpts “blocks”. These are relatively simple clusters of interface that are built for reuse (see Nicole Sullivan’s write-up about the Media Object)
▪ Lists – Unordered, ordered, definition, bulleted, numbered, lined, striped, etc. Any collection of elements presented in a list-type format
▪ Interactive Components – Accordions, tabs, carousels, and other modules with moving parts
▪ Media – Video players, audio players and other rich media elements
▪ 3rd Party – Widgets, iframes, stock tickers, social buttons, anything that isn’t hosted on your domain
▪ Advertising – A special kind of 3rd party category which includes all ad formats and dimensions
▪ Messaging – Alerts, success, errors, warnings, errors, validation, in-progress, popups, tooltips, 4o4s, etc. This is a challenging category as these messages often require user action to expose, but it’s essential to get messaging right.
▪ Colors – Capture all unique colors presented in the interface. This category can be aided by fantastic tools like CSS Stats and Stylify Me
▪ Animation – This is a special category as it involves capturing UI animation. This requires using screen recording software such as Quicktime to capture motion (you can capture screens in Quicktime with File > New Screen Recording).
"Again, these categories aren’t set in stone (((obviously not: they're set on screens))) and will vary based on the nature of the project. Once these patterns are documented the person (or pair of people) should drop them into Google Slides and cluster them together. Now the fun part: naming these patterns. Obviously it’s important to use existing conventions wherever possible, but you’ll quickly find out many UI patterns either don’t have names or have conflicting/confusing names.
"Step 4: Present Findings
"Screenshotting and naming can be exhausting and overwhelming, so be sure to take a break after the gathering exercise is complete. Get some food, grab some coffee, and stretch your legs.
"Once everyone’s recharged, reconvene and spend about 10-15 minutes per category presenting the findings to the group. This is where things get interesting. Presenting to the group allows the team to start discussing the naming conventions and rationale for these UI patterns. As I do more of these exercises with teams, it’s fascinating to hear that designers, developers, and product owners often have different names for the same UI pattern.
"Once every category has been presented and discussed, have all the participants send their slides to the exercise leader, who merges everything into one uber-document…."
