Copywriting in Mendix
Did you know that the way your application communicates to its end users strongly sets the tone of the entire User Experience? By addressing and informing your users in the right way, you can make all the difference in helping them accomplish their goals. You can even make it as efficient and pleasant as possible at the same time. The opposite is true as well of course; by using the wrong tone or information you can frustrate your users’ efforts, effectively preventing them from ever achieving their intended goals.
Luckily the field of copywriting can help a lot in optimizing the User Experience of your applications. Interested in improving your copywriting and User Experience in your Mendix projects? Read on…
What is copywriting?
“Copywriting is the activity of creating written content conveyed through online media and print materials… This type of written material is often used to persuade a person or group as well as raise brand awareness…” (Wikipedia)
When applied to (interactive) online media and applications, copywriting becomes a powerful tool to enhance usability, user experience and improved conversion rates (if applicable). Indeed, the most optimal and user friendly workflow is only as good as how it is communicated to the user, and therefore perceived by that user. It’s amazing how much usability- and User Experience improvements can be achieved by applying effective and clear copywriting.
For the purpose of this post we can distinguish two levels of copywriting in application design:
- General copywriting: The content, messaging and prose of the application. Most clearly visible in larger textual components such as informative paragraphs.
- Microcopy: small bits of copy used throughout the application. Labels, placeholders, headers, tooltips and information messages are some examples of microcopy.
Both levels are tailored to inform, steer or persuade end users, and have a high impact on the total User Experience of the application.
Due to the business application accent most Mendix projects have, microcopy will be the level most encountered by business engineers. Paradoxically, ‘micro’ – or translated into small – copy actually arguably has the biggest influence on the overall quality. So don’t get fooled by the ‘micro’ part of the word.
Starter tips for microcopy
Getting good at creating qualitative microcopy takes a lot of practice and time. Here are some tips to help you on your way:
- Know your end users.
Effective communication is only possible if you know who you’re talking to.
- Know your company’s tone of communication.
Is it serious and business focused, or of a more a casual level?
- Avoid jargon.
Use plain language that connects with your end users.
- Be clear and specific.
Think of what the main message is you want to get across.
- Be consistent.
Keep one tone of communication and don’t use different words for the same functionality or subject.
- It has to be about your users.
They are ultimately the reason why the application exists in the first place. Treat them as such and communicate to them that you’re there to help them.
- Treat every user journey or flow as a conversation you’re having with your end users.
Check if your story is consistent, logical, and is keyed in to the ‘responses’ the end user can give.
- Don’t forget about exception and error handling.
Hopefully they’re never visible to your end users but if so: it’s extremely important to get it right. Good microcopy could just save that extra call or ticket to a helpdesk.
How to apply microcopy in Mendix?
Mendix offers a wide range of components that can be used for microcopy. Best known are labels and placeholder texts for user input elements, and the message functionality as used in microflows.
As of Mendix version 5.19 however, some very powerful tools are available:
- Text widget: apart from being a dedicated component for text it also offers dynamic text input.
- Updated buttons and groupboxes: adding dynamic text in labels and headers.
Let’s see if we can view some of these components in action. The Mendix sample application ‘Employee Directory’ offers a good use case. Although being sound in usability, we can use our new knowledge to set a more casual and personal tone in the application.
For the purposes of this post we’ll view three different screens of the application: the homepage, and the new- and edit page for a new employee.
When looking at the two versions of the homepage a number of improvements have been made:
- ‘Colleagues’ is used over ‘employees’ to provide end-user based context.
- A page header section was added with personalized usage information.
- The detail box headers were made more specific and call to action based.
- The homepage itself was renamed “your colleagues” and added to the main navigation.
- The ‘edit’ button was made more context specific by adding the person’s name.
The tools used to achieve these changes are:
the new text widget for the page header section and dynamic labels for the detail boxes on their titles and buttons. Note that groupboxes can be used just as easily for the detail box solution, as their header is dynamic as of version 5.19.
Figure 3 shows the new text widget in the modeler. When clicking the ‘edit’ button next to the text input, a popup appears that allows you to add variables to the text used. In this case we’ve added the attribute “FirstName” to the contents.
New employee page
The improvements made to the new page:
- Added an instructive sub header.
- The user input fields were optimized with placeholder functionality. The question format of the placeholder was used to encourage a ‘conversation’ with the end user.
- Optimized button outlining and labels.
Although the placeholder functionality has existed for a long time, it’s quite easy to forget all about it. Figure 6 shows the popup of a textbox, the placeholder option is just below the ‘length’ attributes.
Although the screen itself is very similar to the ‘new’ page, some important distinctions have been made:
- The page header was made much more specific to the intention of the page.
- The instructive sub header is focused on updating a profile instead of filling in required fields.
- The page’s main button label indicates an update behavior instead of a generic ‘save’ behavior.
All in all, even if microcopy often means minor improvements – easily overlooked – to the application, the effects can be pretty big.
When looking at the very limited amount of changes made to the sample application in relation to the complete change of ‘tone’ and hence User Experience, it becomes clear that details matter indeed.
The new possibilities in Mendix by using dynamic text and labels really open up the way for qualitative microcopy in your applications. Where before we would use excessive view-, model- and theming manipulation to achieve good microcopy, we can now do it almost instantly and effortlessly. Hopefully we’ll be seeing a lot of new user friendly applications making the most out of microcopy.