Categories
Uncategorized

Miro through the eyes of 10 Usability heuristics

View the original post

25 years ago, Jakob Nielsen described the 10 general principles for interaction design. Even today, they are as relevant as they were then. These principles have now become the rules of thumb for interface design. In this case study, I am going to evaluate Miro’s (an online visual collaborative platform) interface design using Nielson Norman’s 10 Usability heuristics.

Rule 1: Visibility of System Status

Programmers often resort to breakpoints to understand how the state of the system¹ changes with each action specified in their code. The real difference between the command line and modern GUI is not only the presence of colorful icons but also the visibility of system status.

The system should always keep the users informed of the consequences of the actions performed by the users.

Why is it important? Visibility of the status of the system is important because informing users compels them to act and communicate and creates a sense of trust.

What if we do not follow? Users will be uninformed of the current system status making them a victim of “gulf of evaluation’ and “gulf of execution”, not knowing how to proceed to accomplish their goals. They wouldn't know if their actions were effective or if they made a mistake.

Visibility of system status at Miro
Visibility of system status at Miro

(a) The name of the digital whiteboard currently used is displayed on the top left corner of the screen.

(b) All the collaborators active on the whiteboard are identified and represented on the top right corner of the screen.

(c) The selected tool is highlighted among all the other tools in the toolbar.

(d) The location of the user on the huge canvas is indicated using a box and a zoom scale on the bottom right corner, providing a bird’s eye view of the whiteboard.

Rule 2: Match between system and the real world

By nature, we all find comfort in familiarity. This is why the second heuristic principle is important.

The design should speak the users’ language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.

Why is it important?-A user builds up a mental model or theories of how a system works based on their experience with real-world objects. Nielsen Norman defined mental models as what the user believes about the system at hand. Based on these beliefs, users predict a system reaction as they transition from the physical world to a digital world. Disrupting these mental models disturbs smooth navigation through experiences.

What if we do not follow? If people are not familiar with the terms and language used on the website, they feel unsure and ignored, which will force many of the users to find alternatives or demand an extra effort to find explanations to complete the task.

Use of digital sticky notes at Miro showing match between system and the real world
Match between system and the real world at Miro

A designer’s toolkit is incomplete without a sticky note. Be it affinity mapping or logging hot ideas, designers use sticky notes extensively. Miro translates designers’ mental models to use physical sticky notes and whiteboards into digital ones. It introduces users to elements such as sticky notes, whiteboards, a canvas, pen and pencil tools allowing users to translate everyday interactions from the physical world into the digital world.

Rule 3: User Control and Freedom

Getting unwillingly stuck in one place is “mostly” 😉 an inconvenience, be it in the physical world or digital. Providing an ability to quickly correct mistakes or backtrack on choices helps provide a feeling of control, which is what the third heuristic principle states.

Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

Why is it important? It is an important exercise as a designer to think of all possible instances where the chances of users making any mistakes and provide a way out. This is essential for providing flexibility and enough freedom to users that they can handle their mistakes.

What if we do not follow? Making sites sticky and preventing users from returning back, just to prioritise business goals over vanity metrics can make the user stay a little longer on the system only to be frustrated and avoid using it altogether.

Miro provides user control and freedom by offering preferred mode of navigation using different devices such as Mouse, touchpad or touchscreen
Preferred mode of navigation offering user control and freedom

(a) The preferred mode for board navigation: Miro allows users the freedom to navigate across the board using their preferred device such as Mouse, Trackpad and Touchscreen.

Ready-made templates available at Miro
Ready-made templates available at Miro

(b) Miro provides users with ready-made templates to import and get going and simultaneously, it also offers users control to design and create user’s own templates.

Rule 4: Consistency and Standards

Familiarity is always comforting. Consistency in the system maintains a level of familiarity and is the 4th rule of usability heuristics.

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.

Why is it important? Consistency advocates for websites and applications to adhere to standards. When the interfaces are designed according to standards, users know what to expect, resulting in an increase in learnability and a decrease in confusion and uncertainty.

What if we do not follow? When people visit a website or application, they bring along some expectations from the interface designs of other websites or applications (Jacob’s Law). Ruling out consistency will lead users with a need to figure out the system on their own and will reduce the overall efficiency.

Secondly, not allowing the transfer of knowledge from using other websites or applications will steepen the learning curve and discourages continuing.

Rule 5: Error Prevention

Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

Why is it important? Allowing an easy exit is helpful, but providing feedback and using system status in the first place will allow users to avoid the pain of going through additional steps of recovery.

Miro allowing to lock and unlock elements on the board
Miro allowing to lock and unlock elements on the board

What if we do not follow? User frustration might pile up if they cannot successfully achieve the task without any errors, ultimately decreasing the ease and incentive to use the system.

The elements on the miro board are free to edit and move. In order to prevent the user from moving them accidentally, Miro allows users to lock elements on the board. It also provides an easy reversal to the action by allowing an option to unlock the elements.

Rule 6: Recognition rather than Recall

Minimize the user’s memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.

Why is it important? Minimizing the user’s memory load will improve system usability. The time for recall is more than that required to recognise the information. Ultimately, having recognition over recall will save users a lot of time on task and improve their efficiency.

Smart drawing capability at Miro

What if we do not follow? Forcing users to recall information over recognition will burden the cognitive load, increasing the time on task performance.

Miro has a smart drawing capability that allows users to draw freely without an additional cognitive load of being precise and recalling exact dimensions of the shapes.

Rule 7: Flexibility and Efficiency of use

Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

Why is it important? A system caters to users with varying levels of expertise, demanding the existence of multiple ways to achieve the same tasks are required. Novice users may prefer to go by the book and use step by step methods whereas experts might be in need of accelerators (such as keyboard shortcuts) to achieve the same. To meet the needs of users within a spectrum of expertise, it is important to offer flexibility and efficiency of use.

What if we do not follow? Who does not love shortcuts? 😛 If the user has been using an interface for quite a while it is likely that they use keyboard shortcuts. Not leveraging built users’ mental model and failing to provide the shortcuts is not going to hit it off with the experts.

Keyboard shortcut key ’N’ for sticky notes
Keyboard shortcut key ’N’ for sticky notes

On the other hand, offering just shortcuts might confuse first-time users. Not offering flexibility and efficiency of use for the interface is going to hamper the productivity of users by either over exhausting expert users or elevating the learning curve for novice users.

Miro provides keyboard shortcuts to switch between tools as one of the accelerators.

Rule 8: Aesthetic and Minimalist Design

Interfaces should not contain information that is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.

Why is it important? A cluttered design is as frustrating as a cluttered desk. A minimal design is a way to guide users toward achieving their task without any confusion or distractions. This is important as it offers users an experience focused on the essentials.

What if we do not follow? The presence of unnecessary elements will distract users from important information. This distraction can be the cause of an unsatisfied experience resulting in loss of interest.

Clean and clutter-free work are offered by miro
Clean and clutter-free work area

The simple clutter-free interface of Miro offers a clean and aesthetically pleasing interface. The interface is designed to provide users with maximum work area while keeping necessary things available at their ease.

Rule 9: Help users recognize, diagnose and recover from errors

Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.

Miro allows recovery of accidentally deleted data
Recovery of accidentally deleted content

Why is it important? Indication of errors will not be effective until and unless they are understood correctly. Simply indicating the errors is not sufficient.

What if we do not follow? A wound that’s hard to recover causes most pain. 😫 A system that fails to recognize, diagnose and recover from errors, delays and discourages users.

The new update on Miro allows users to recover the deleted content with ease.

Rule 10: Help and Documentation

It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.

Why is it important? Onboarding new users become easy with proactive revelations. Offering help and documentation is crucial especially when it’s tougher to navigate across the system. These are implemented using methods such as tooltips, contextual overlays, and wizards.

What if we do not follow? Not offering proactive or reactive support by answering questions, troubleshooting user problems or providing detailed documentation can deteriorate the user’s experience. Building proficiency in such systems becomes difficult.

Proactive help including tooltips, walkthroughs and instructional overlays and reactive help with courses and help and inspire tab
Proactive and reactive help

Miro offers both proactive and reactive help in different forms. It has tooltips, instructional overlays of gestures to access the board and a walkthrough for first-time users. On the reactive side, a Learn & Inspire panel consists of multiple options to offer help such as tutorials, academy courses and webinars.

Sources: https://www.nngroup.com/articles/ten-usability-heuristics/

[1] In this article, “system” and “interface” are interchangeably used.


Miro through the eyes of 10 Usability heuristics was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.