A good digital product is easy to use. If you want your module(s), your digital services, to leave a good impression on your stakeholders, it should be user-friendly. By following these design principles you will be able to build a module that will stand out.
When we talk about user-friendliness, we often come across the term user experience. “User experience" or UX – as defined by researchers Jacob Nielsen and Don Norman. This encompasses all aspects of the end-user's interaction with the company, its services, and products. Since end-users interact with BRYTER, this also affects how modules are built with BRYTER. You don’t need to be a designer (in that it’s not about making your modules look pretty), but about making them more accessible and providing a frictionless experience for your users.
For more of our best practices, have a look at our Module building: Best practice guide or the 📥 Module building: Best practices guide for the BRYTER wizard/End-User Interface article.
7 Steps to user-friendly modules
An example Data Breach Assistant module serves as a good starting point of how a user-friendly module can look.
 |
 |
| 👎 not good | 👍 good |
1. Group related questions
Multi-Input Nodes can be particularly useful when asking for a predefined set of questions, e.g. demographic questions, like name, birthday, or job title. In this scenario your users will have an overview of their responses, so they can quickly check them before submitting, which reduces input errors.
When using Single Select or Multiple Select answer options with more than 7 entries, make sure to include them as a dropdown list, so they require less space on the screen. Optional inputs (e.g. comments in a Text Input), should be placed at the bottom because they are less relevant. Consider using conditionality within Multi-Input nodes, to only show relevant questions to some users and avoid setting these sub-inputs to optional or adding a new input node subsequently.
 |
 |
| 👎 not good | 👍 good |
2. Be as concise as possible for users and guide them
Phrase all input prompts, if possible, as a question with a question mark. For example, instead of “name”, address the user rather with “What is your name?” Avoid abbreviations, because they can easily create misunderstandings. Use headlines to summarize the content of your question in a few words. When you need to explain something (e.g. a legal concept) or provide guidance, use Info blocks at the end of your question. Don’t title the Info block simply with “info” but make the subject matter clear (e.g. Limitation of liability).
Use active voice when possible (e.g. “we’ll send an email” instead of “an email will be sent”) to make your module more conversational. Finally, avoid long text in your answer options. Users will first scan all possible choices and then make a responsible decision. It will require less mental load if the response options are quick to read and understand.
3. Good defaults and placeholders
Use placeholder text where you can to provide an example of an answer. If you ask for a transaction volume or anything related to numbers, use an example value in your placeholder (e.g. 50000). Good placeholders help your users to understand exactly what they should type in the form. Please bear in mind that you should not repeat the question in the placeholder.
If you know that one option is likely the answer for more than 90 percent of users, consider setting the option as default value in the input node to speed up the experience for an end-user. Default values could also be used to display the content gathered throughout the module in a 'summary node'. Like this, your users can easily amend typos or confirm their input without any additional screens.
4. Avoid visual overload
When using Single-Select or Multiple-Select, try to stick to 5 - 9 answer options. This reflects Miller’s law, which states that the span of immediate memory and absolute judgment are both limited to around 7 (plus/minus 2) pieces of information. Your users can more easily pick a response if the number of responses is limited to that number. If you need to exceed this limit, try to split the question into sections. If this is not possible, perhaps display the options as a dropdown list to occupy less screen space to consider showing the options horizontally rather than vertically. A dropdown selection has the added benefit that your users could start typing the first letters of their selection to find an option quicker, for example in country lists.
 |
 |
| 👎 not good | 👍 good |
5. Typography and formatting
Use headline formatting in your content field to briefly describe the content of your questions. This is especially helpful when using Multi-Input fields with multiple questions on one page. Format them as a headline. If you want to add comments or additional notes, make them italic. When using links, don’t just paste them into your module. Select a word that describes the target of the link (e.g. read more about Scoring) and add the link via the link button in the editor.
 |
 |
| 👎 not good | 👍 good |
6. Start or information page
A meaningful start or welcome page sets expectations and confirms to the end-users that they are in the right place. Describe the benefits your users will receive when completing your module. This will motivate them to complete the module accurately. Like a greeting, it also sets the tone and makes the module conversational. Use a title that describes the name of the module and write some introduction text, which mentions the importance and value of completing the module (e.g. due to GDPR, people are obligated to…).
It is also recommended to describe the estimated time it will take users on average to complete the module in minutes or the type of information and documents they should have readily available.
7. Results page
A good results page is the final impression users will get. First, use the headline again to briefly describe your result in a few words. Provide a solid explanation of why this result was achieved. Give the user additional background information or provide generated reports like further articles to read or next steps to take. If the next step is to contact a specific person, provide the contact details.
A great response summary, which lists questions and answers users have encountered, as well as a description of why this result was obtained, provides transparency to users.
You could also think about adding a sentence like “Your answers have been saved - you can now close this window” to communicate clearly to your users that the tool has been concluded.
 |
 |
| 👎 not good | 👍 good |
7 1/2. Think mobile
Many of your applications will likely be accessed on a mobile phone - recent estimates suggest that more people access the web or applications from mobile devices than from desktops. Ensure that you also preview your module on a mobile screen (see screenshots above) to test whether they are easy to use from mobile devices.