Rethinking buttons

By ,

When creating the first basic functionality of the XirtCMS back end, naming action buttons was quite easy: buttons were simply there to provide me a way to test implemented functionality and with simple labels like "Add", "Create" or similar I had enough information to remember the action being triggered by it. However, there is more thought required when creating buttons for end users: colour, labelling and other properties can all support users while going through their workflow. In this blog, I provide a bit more insight on the thought going into the labelling of buttons within XirtCMS. Similarly, I am also reviewing other functionality within the GUI (see for example, this news item) and I am constantly open for feedback to improve the user experience of XirtCMS further.

Defining a label

Now that most of the basic functionality has been implemented, the time has come to have a more thorough look at the buttons. Let's take the back end for managing widgets as an example: one of the main buttons on this screen is providing administrators the possibility to configure a new widget visible to end users. So, while creating the GUI it made sense to create this button next to the list of existing widget configurations labelling it "Add". But on second thought: what are we actually adding here? A widget! Or even better: a new widget! So, a couple of days later I modified the button labelling it "Add new widget". Much better, right?

There is however still a problem with this labelling. Within XirtCMS some widgets are available as part of the application by default, while others can be added later by adding their source files. This process, which can be thought of as an "installation", could be considered the addition of a widget. As a result, labelling the button "Add new widget" might lead to confusion as users could believe the button will trigger the installation of a completely new widget within XirtCMS. In fact, we're not adding a new widget here but we're simply defining an additional new configuration for an already existing widget. Again, I updated the button: "Add new widget configuration". Ouch, that's one long label!

I also reviewed the action that is actually being executed here: are we creating or are we adding? Looking up the definitions of these actions, you will find the verb "create" to be defined as "bringing (something) into existence", while the verb "add" is defined as "joining (something) to something else so as to increase the size, number, or amount". Neither is wrong, so basically the decision is a matter of preference here. As bringing something into existing sounds like something a user would like to do (e.g. creating content others would like to view), I would probably have decided to use this verb if no other limitations would have been present (see next section).

Working with limitations

Photograph of Dutch coasterWe just stumbled across two other limitation faced during development: available screen space and page aesthetics. For this particular button, the available screen space was not really an issue as the full width of the screen was available. However, one might argue that a button this size is not really helping the page aesthetics (especially not on mobile devices with smaller displays). So, the next step was to identify a smart way in which the label size could be reduced while still remaining meaningful to users. This always reminds me of a nice coaster text I once bumped into with a Dutch text that freely translates into: "The art of writing is scratching out as many words as needed to clarify its meaning." (see image). It sort of proofs that many sentences can be shortened by removing redundant words; more text would only require additional reading effort and often adds little to no added value.

Starting with the context of the button: the button is placed on a GUI within the CMS that yields the title "Widget Configurations". This provides a clear context telling users that all actions in the body of the page are very likely to be related to managing widget configurations. Let's make use of that! Relating the verb "adding" within the context of the page, a user might expect to either add a widget (e.g. installation) or add a new widget configuration on this page. Keeping in mind this differentiation, we can thus shorten the label by removing the contextual keyword: "Add new configuration". Shorter, but still lengthy...

Let's see if we can remove one more word: the verb of the sentence. As you probably have seen many times in existing applications (for e.g. Microsoft Word), many verbs can be expressed with small icons. A (floppy) disk icon indicating saving to a disk, scissors for cutting an item and a plus for adding a (new) item. Now, that last one is useful! Using the power of Font Awesome and Bootstrap, we can easily replace the verb with an icon decreasing button size further.

Revision history of the button

Further appearance

There are other characteristics that can guide support the user including hover response, colours, font family and size, etc. In this case, the button has been made green to indicate a positive action: a creation, an addition and definitely not a deletion or removal (which should be coloured in a way that alerts the user that the action might "damage" the front end). A slight change of colour during mouseover and the change of the curser into a pointer (which are configured by Bootstrap by default) helps users to identify the button is actionable. One button down, still many to go!

Responses (0)

There are no responses to display. Be the first to react!

About the author



XirtCMS - Copyright © 2018. All rights reserved. | GNU General Public License v3.0