Designing Crowd+ — a Case Study
Visual design plays an important role in a product, as it can enhance users’ experience interacting with it. Therefore, awareness of visual design aspects is key when developing a product. Here is what we considered when developed the interface of Crowd+, a data annotation crowdsourcing platform.
Visual Design in UX
According to Usability.gov, visual design means “strategically implementing images, colors, fonts, and other elements,” in order to enhance a design or interaction, and engage users. Different than interaction design that focuses merely on users’ interaction with the product to complete a task, visual design is incorporating visual elements to enhance that interaction. As it is the ‘look’ or ‘cover’ of a brand’s product, incorporating visual design in a product can be beneficial in increasing users’ trust and perception towards the brand.
Luke Wroblewski, Product Director at Google, explained in his 2008 presentation, “Communicating with Visual Hierarchy”, the role of visual design in UX. He states that visual hierarchy helps us to:
- communicate messages,
- illuminate actions, and
- organize information.
He also states that an attractive visual hierarchy is also a usable one.
Incorporating visual design — implementing Nielsen’s 10 Usability Heuristics
Jakob Nielsen, Ph.D., user advocate, principal of the Nielsen Norman Group, and the world’s leading expert on Web usability (U.S. News & World Report), proposed 10 general principles for interaction design. Even though these 10 principles are not guidelines that have to be strictly followed, they are rules of thumb to design a usable and engaging product.
Here are those 10 principles that we tried to incorporate when designing Crowd+, a data annotation crowdsourcing platform.
#1: Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
This is important to make users feel as if they are in control, hence feel secure. If they know the status of the current system, they can learn the outcome of their previous interactions and determine the next steps.
We implemented this rule by:
- providing the status of crowdsourcing projects, whether they were accepted or rejected by admin, available or unavailable for data annotators;
- providing information regarding the deadline and progress of the crowdsourcing projects;
- providing progress feedbacks for data annotators when doing the surveys of the crowdsourcing projects.
#2: Match between system and the real world
The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
By doing this, a product could match users’ mental models, hence easing users in learning and remembering about how the product works.
We implemented this rule by displaying the deadline of crowdsourcing projects in a real-time countdown format, relating to how users perceive deadlines.
#3: User control and freedom
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.
When it’s easy for users to opt-out of a process or undo an action, users build freedom and confidence when using the product. Exits allow users to remain in control of the system and avoid getting stuck and feeling frustrated.
Due to the requirements of Crowd+ that so far do not have error handling we haven’t implemented this rule in the product yet.
#4: Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
According to Jakob’s Law, users spend most of the time using other digital products. Knowing this, following conventions is important so users can easily learn how things work in a product, based on their existing knowledge of how other products work. Consistency and standards avoid users to experience cognitive load by being forced to learn something new. Users also have expectations before encountering a new product.
We implemented this rule by developing a design system that is consistent and also follows current common design implementations.
#5: Error prevention
Even better than good error messages is a careful design which prevents a problem 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.
Everyone makes mistakes. To prevent users to make mistakes when using a product, a product should be designed to prevent them from doing so.
We implemented this rule by implementing a popup so users can confirm their actions before committing to it.
#6: Recognition rather than recall
Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
Humans have limited short-term memories. Therefore, a product should always promote recognition to reduce the amount of cognitive effort of users.
We implemented this rule by reminding users about the information of their crowdsourcing projects and also deadlines and progress of those projects.
#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.
Users need shortcuts to fasten their process in using a product.
We implemented this rule by creating shortcuts for users to access their crowdsourcing projects through the home page.
#8: Aesthetic and minimalist design
Interfaces should not contain information which 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.
Everyone enjoys anything that looks pleasing. Aside from that, users need a product that can help them finish their tasks efficiently and effectively. Therefore, a product should be both aesthetic and minimalist, in order to help users finish their tasks in a pleasing experience.
We implemented this rule by producing a design system that ensures that every element in the design of the product is consistently minimalist and aesthetic.
#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.
As mentioned before, everyone makes mistakes. Therefore, a product should provide error messages that can inform users what wrong has happened and how to deal with it.
We implemented this rule by implementing an error handling of the user registration form. This can help avoid users submitting any attributes of the form incorrectly.
#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.
Due to the requirements of Crowd+ that so far do not have help or documentation to users, we haven’t implemented this rule in the product yet.
