UX patterns – A Simple Button Is More Complex Than You Think

A button is never just a button. For best results, you need to go through tons of questions. Whether it’s about marketing, user interface, user experience or implementation, you need to define the hows, whys, whens and wheres.

Working within a Design System

To save time and energy, working within a design system is the new solid way to go. Moreover, the atomic design approach gets you really efficient, whether it is for yourself, for other designers or for developers.

Define the tinniest components first.

Atomic Design

Quickly, a button is an atom. Once created, you can add it to a top bar which is a molecule. Then the top bar can be added to a hero banner which would be an organism. After that, you build templates and pages.

Here is a good link about what is atomic design.

The Library

First, you might want to consider creating a library. By creating components separately, you can reuse them as much as you can. You save time and effort for the sake of consistency. Sketch now handles libraries magnificently. It is easily maintainable and shareable.

When you create a button, whether it is about the colors, the sizes or the states, you need to address multiple questions.

Here are a couple of questions you will need to find answers for:

• How primary buttons will look like?
• How secondary buttons will look like?
• And the text links?
• What about the disabled and hover state?
• For each color?
• What are the character limits?
• Did you know that length is no longer relevant?
• So what would be the padding on each side of the text?
• What is the height?
• Is it big enough for mobile tapping?

A simple button may look simpler at first.

User Experience

With the user interface specifications defines, user experience rules come in. A button is a pattern. There is best practices that tell you how, why and when to correctly use this pattern. However, there might be few differences for your needs.

Here is a quick list of simple implementation questions to show you how complex it can get:

• When and why do you use each buttons?
• When and why do you use ghost buttons?
• Did you know that bad button placements can create poor conversion?
• Is there going to be special visual feedbacks?
• What are the specifications for the feedbacks?
• How will it be implemented?

Implementation

All the details you previously defined need to be communicated. Sketch connects with Craft which has been developed by In Vision. With simple syncing, you can export your artboards directly to your In Vision prototypes. If you don’t want to write down all the button’s user interface specifications, In Vision offers an inspect mode that lets the developers click on it to gather information. If your Sketch work files are tight and consistent, it will greatly enhance the efficiency of your team.

A simple click on a button reveals useful informations.

Syncing your whole library with In Vision could appear as a good idea, but it will get messy. If you want everything in one place, I suggest you start playing with UXPin. They offer a solid solution for your library, your prototype and your documentation. All is connected and easily maintainable. Otherwise, Wordpress works well, but it takes way more effort.

Final Thoughts

You see how complex it could get? I mean, this is only a button. A library can easily end up with more than 80 components. This one is easy compared to date pickers or slideshows. If you head toward a design system, define your user experience pattern library tree before jumping into the user interface library. That way, you’ll avoid surprises.

In the end, all that matter is consistency. With the design system and the atomic design approaches, you will save a significant amount of time and effort. With a precise guideline, it will be easier to reuse the button component, whether it is for user interface design or implementation. Communication will greatly benefit from this as well. Everyone will be easily included.

Another article

I learned a lot on my first attempt to define a complete design system for Aeroplan. Read the basics and see what I learned to help you start properly.

Feel free to follow me or read more articles. :)

Cheers
Tommy