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

  • communicate messages,
  • illuminate actions, and
  • organize information.

Incorporating visual design — implementing Nielsen’s 10 Usability Heuristics

#1: Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

  • 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.

#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.

#4: Consistency and standards

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

#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.

#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.

#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.

#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.

#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.

#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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Amrisandha Prasetyo

Computer science student at Universitas Indonesia | Aspiring product designer 🎨💻