To Repurpose A Component Or Not

Deciding when to repurpose existing components and when to define their limits and create a new component can be a little nuanced. Early consulting with the development team is helpful and can save a bunch of time and guesswork.

Consider the Card

There are all kinds of reasons to use card UIs on a digital interface. Examples include:

  • Navigation
  • Administration
  • Summarizing data
  • all of the above

A Navigation Card

A stripped down navigation card component

Let’s consider a simple card component. Pretty straightforward and very repurposable. Want to have a listing image on it instead of an icon? No problem. Need to have a time-stamped date for the secondary text? Easy-peasy-lemon-squeezy.

A navigation card modified with pictures

An Administrative Card

Want the capability of a 3-state toggle, copy-url link, multiple timestamps and various edit buttons? Hmmm, this is looking a little complicated and probably worth designing a new card component. Especially since this new set of requirements is for admin use only (so won’t be seen on a public-facing site), coming up with a new card design won’t cause confusion for your site visitors.

An administrative card for the same public-facing blog article. Horizontal layout enables the admin user to scan through several cards more eaasily.

A Card Summarizing Data

Boundaries can start to get blurry, however, when a component is stretched to perform something that another component can do better. This should be front of mind during the UX design process. Summarizing data is a good example of pushing the card format to its limits. If you’re working with a lot of data, chances are a table format would be more suitable. By the way, here’s a great reference for data tables:

However, since tables are not necessarily known for having the most glamorous UI features, many designers try to make things work with cards. So whatever the component may be, make sure the data being represented is accessible and the UX is not disturbed by the nature of the component.

Cards summarizing data. Since the UI is looking at one profile dataset at a time (and not comparing profiles), the use of cards makes visual sense.
Multiple datasets are being compared as multiple cards in the same format. This is not considered best practice. This data would be better off in table format so the viewer can easily scan.

The Long And The Short Of It

Before designing a new component, it’s best to see what already exists and whether it can be repurposable. Consult the development team on component variants vs. feasibility for introducing a new one. Recycling where possible is always a great way to keep things clean and efficient, but don’t hesitate to create something new whenever the situation calls for it. And perhaps most importantly, if you do choose the path of heavy repurposing, just be sure that you find other means of diversifying your designs, ensuring a rich and lively user experience for all.