Breaking it down: Component Identification

What is Component Identification?

Component Identification is the process of locating, categorizing and documenting all aspects of a website. This is a helpful step in the initial work of designing or redesigning a website. Go through all views of the site, making sure to capture any alternative states (error notifications, disabled buttons, etc.) to ensure that all items are identified. Then, in a spreadsheet or document, categorize and list each of these items. The level of detail taken in this process may vary depending on the size of the site, but the deeper the dive, the more helpful the results.


What to look for

As previously mentioned, it is important to capture each component in all possible states. The best way to accomplish this is to generate a testing script that can be followed step-by-step to help hit each possible state. Below is a sample of our testing script:

  • Signup as a new ninja customer
  • Add a website using FTP or SFTP
  • (Connection Wizard)
  • (Watch Backup Progress Tracker) (hover over all tooltips)
  • Close Backup Progress Tracker
  • View all backups
  • View initial backup
  • Add a database
  • (Database howto page, wizard)
  • (Database Backup Progress Tracker) (hover over all tooltips)
  • Close Backup Progress Tracker
  • View all backups
  • Attempt to edit DB settings w/ bad creds and hostname

You will want to organize your components into categories. The categories needed will vary depending on the site. Our Component Identification categories were as follows:

  • Lists
  • Tables
  • Forms
  • Info Pages
  • File Pickers
  • Buttons/Links
  • Navigation
  • Pagination
  • Tooltips
  • Typography + Hierarchy
  • Unique Items

Why is this important?

There are many benefits of Component Identification. The first, and most obvious, benefit is that it helps you see every component on your site. This will give a good idea of what items need more attention than others helping to prioritize your next steps. The Component Identification document can be used as a roadmap for the actual implementation of the design or redesign. Following this will help ensure that the similar components are styled consistently throughout the site. If this is for a redesign, it will highlight where the previous design may have grown inconsistent. While it may seem like a tedious task during the process, the results will be well worth the time.

Leave a comment

Your email address will not be published. Required fields are marked *