UX Clinic Heuristic Evaluation - Nearsoft · PDF fileUX Clinic Heuristic Evaluation . ......

19
© Nearsoft, Inc. All rights reserved. uxclinic.nearsoft.com Case Study: SoundBetter.com Prepared by: Marysol Ortega & Diana Arvayo UX Clinic Heuristic Evaluation

Transcript of UX Clinic Heuristic Evaluation - Nearsoft · PDF fileUX Clinic Heuristic Evaluation . ......

Page 1: UX Clinic Heuristic Evaluation - Nearsoft · PDF fileUX Clinic Heuristic Evaluation . ... During the time we were working in this case study, ... 3. What’s your budget? (field just

© Nearsoft, Inc. All rights reserved.uxclinic.nearsoft.com

Case Study:SoundBetter.com

Prepared by:Marysol Ortega & Diana Arvayo

UX Clinic Heuristic Evaluation

Page 2: UX Clinic Heuristic Evaluation - Nearsoft · PDF fileUX Clinic Heuristic Evaluation . ... During the time we were working in this case study, ... 3. What’s your budget? (field just

© Nearsoft, Inc. All rights reserved.uxclinic.nearsoft.com

The UX clinic is an initiative made for sharing our design expertise with the community. Using different design methods, our aim is to help facilitate planning, exploration, concept generation, early prototype iteration, evaluation, and refinement of websites and applications of people and companies applying for our program.

In this report the design team at Nearsoft compounds findings resulting from a usability evaluation of SoundBetter.com through Heuristic Evaluation. However, we want to highlight the fact that usability is not User Experience (UX), is just a part of it, and the design of your app/website is not UX either. UX refers to the whole experience your potential users have when accessing, using, troubleshooting, and going to every step of your service.

A heuristic evaluation is a usability inspection method made where a group of experts in User Experience identify usability problems.

In this case, the design team examined SoundBetter's interface according to a series of recognized usability guidelines (the "heuristics").

The purpose of a heuristic evaluation is to clean up the interface from the obvious usability problems, then redesign and perform usability tests 1. The set of ten heuristics used in this analysis were taken from The Psychologist’s View of UX Design, an article written by Susan Weinschenk, Ph.D. in UX Magazine2.

References1 Nielsen, Jakob. "How to Conduct a Heuristic Evaluation" nngroup.com. http://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation`2 Weinschenk, Susan. "The Psychologist’s View of UX Design" uxmag.com. http://uxmag.com/articles/the-psychologists-view-of-ux-design

UX Clinic Heuristic Evaluation

Page 3: UX Clinic Heuristic Evaluation - Nearsoft · PDF fileUX Clinic Heuristic Evaluation . ... During the time we were working in this case study, ... 3. What’s your budget? (field just

© Nearsoft, Inc. All rights reserved.uxclinic.nearsoft.com

SoundBetter is a services marketplace for musicians. Home recording is exploding due to the lower cost of recording. Every song needs to be mixed and mastered by skilled professionals to sound good enough for release. SoundBetter allows musicians to find the right professional music producer or engineer based on industry specific criteria and hire them directly through the site addressing trust issues with remote freelancers.

Case Study SoundBetter.com

During the time we were working in this case study, the design team had very close communication with SoundBetter's team. We noticed throughout the process how SoundBetter have been making many changes and improvements since we first reviewed it, embracing the iterative nature of UX.

Our analysis focused in a single user journey that you can see in the following page:

“Musicians should be able to find and hire mixing engineers through our website”

Page 4: UX Clinic Heuristic Evaluation - Nearsoft · PDF fileUX Clinic Heuristic Evaluation . ... During the time we were working in this case study, ... 3. What’s your budget? (field just

© Nearsoft, Inc. All rights reserved.uxclinic.nearsoft.com

User

Jou

rney

H

irin

g m

ixin

g en

gine

ers

Page 5: UX Clinic Heuristic Evaluation - Nearsoft · PDF fileUX Clinic Heuristic Evaluation . ... During the time we were working in this case study, ... 3. What’s your budget? (field just

© Nearsoft, Inc. All rights reserved.uxclinic.nearsoft.com

We found a couple of objects on the screen that did not have the right affordances. For instance the area where the user sees “Job State”u of his/her post looks like a button, but the user cannot click it, because its only function is to let the user know about the status of his/her job posting. Our recommendation is getting rid of the “Job state” shape so it does not look like a button and avoid confusion.

Another instance are the usernames found as a photo caption of the featured artists/sound engineers in the home pagev. Because they are underlined, it seems like the user can click them and access the artist/engineer profile. In reality, the user is not able to perform such action, which might lead to frustration. We advise to add the links to the profiles so people can go and visit the featured profiles

People don’t want to work or think more than they have to

heuristic 1 People don’t want to work or think more than they have to

u

v

Page 6: UX Clinic Heuristic Evaluation - Nearsoft · PDF fileUX Clinic Heuristic Evaluation . ... During the time we were working in this case study, ... 3. What’s your budget? (field just

© Nearsoft, Inc. All rights reserved.uxclinic.nearsoft.com

When analyzing how a system can help people don’t work or think more than they have to an something important to take into consideration is the concept of progressive disclosure.

Progressive disclosure refers to providing information little by little in order to avoid having tasks that might otherwise overwhelm users. SoundBetter makes very good use of this strategy in the process of creating a new job posting, specifically in its second question (What do you need done and what is your approximate total budget?)w. In this option, the user can see the most common categories, and the system gives the user the option of exploring more categories. In addition, the system also provides very useful examples that make the process of filling out the form easier.

However, the process of adding a new job posting requires a lot of initial effort—especially for a first-time user that is probably testing how the services work before fully committing to becoming an actual userx.

In this case, we recommend reducing the amount of information the user has to fill out as an entry point to the system. We suggest the user responds to the following questionsy:

1. What do you need done? (displaying the main categories as it is right now)

2. What’s your project about? (name and description)

3. What’s your budget? (field just as it is)4. Job Visibility (switch to a radio button)

heuristic 1 People don’t want to work or think more than they have to

w

y

x

Page 7: UX Clinic Heuristic Evaluation - Nearsoft · PDF fileUX Clinic Heuristic Evaluation . ... During the time we were working in this case study, ... 3. What’s your budget? (field just

© Nearsoft, Inc. All rights reserved.uxclinic.nearsoft.com

The information should be easy to scan throughout the website, that way the users can get a sense of what the website does and what is it about by skimming what they find interesting. Visual storytelling is a powerful approach that allows people read through a website faster and easier.

For SoundBetter we recommend the use of icons, illustrations, or any other graphic element to support the text and facilitate the website’s readability. This suggestion could be beneficial especially when the website explains in the homepage how the system works, making it so much easier for first-time users.

People have limitationsheuristic 2 People have limitations

Page 8: UX Clinic Heuristic Evaluation - Nearsoft · PDF fileUX Clinic Heuristic Evaluation . ... During the time we were working in this case study, ... 3. What’s your budget? (field just

© Nearsoft, Inc. All rights reserved.uxclinic.nearsoft.com

This heuristic refers to how the system should be prepared to anticipate and prevent people’s mistakes rather than helping users to correct them. Also, when a user makes a mistake the system should facilitate its correction. When analyzing the hiring user jo urney we have discovered two main issues: the user cannot delete a job he/she postedu, and the job visibility status is difficult to find and not always worksv.

Right now if a user posts a job by mistake or does not want to have that job posted anymore, there is no option to delete it. The only option available is to switch the job’s visibility from public to private. However, the button to change a job’s visibility is not easy to find — the user can only find a link located in the “Received Proposals” tab.

We recommend to add a button to delete a jobw and to add the job visibility optionx in the “Job Brief” tab—in addition to the one located in the “Received Proposals” tab—, where the user sees an overview of the posted job; in addition, we suggest making it look like a button

Adding these options will help the user to feel in charge of the system and the information they are managing through the website.

People make errors and mistakesheuristic 3 People make errors and mistakes

u

v

w

x

Page 9: UX Clinic Heuristic Evaluation - Nearsoft · PDF fileUX Clinic Heuristic Evaluation . ... During the time we were working in this case study, ... 3. What’s your budget? (field just

© Nearsoft, Inc. All rights reserved.uxclinic.nearsoft.com

The system should not rely on users’ memory, hence, they should not be required to remember things from one task to another. We have found various instances where SoundBetter is relying in users’ memory that could be solved with a couple of quick fixes.

The most critical example would be adding a new job post,the only place the user can find the button for posting a new job is under the “Browse Jobs” optionu. The other way a user can look for a professional is with the new option of “Order from SoundBetter”, a button the user can only find in the homepage and a link below “Post your job free” in the “Browse Jobs” pagev.

Human memory is complicatedheuristic 4 Human memory is complicated

u

w

Page 10: UX Clinic Heuristic Evaluation - Nearsoft · PDF fileUX Clinic Heuristic Evaluation . ... During the time we were working in this case study, ... 3. What’s your budget? (field just

© Nearsoft, Inc. All rights reserved.uxclinic.nearsoft.com

We suggest adding the options “Post Your Job for Free” and “Order from SoundBetter” under “My Jobs”w and in the profile menux so the user has easier access for creating a job posting.

heuristic 4 Human memory is complicated

w

x

Page 11: UX Clinic Heuristic Evaluation - Nearsoft · PDF fileUX Clinic Heuristic Evaluation . ... During the time we were working in this case study, ... 3. What’s your budget? (field just

© Nearsoft, Inc. All rights reserved.uxclinic.nearsoft.com

People like and want to be social for a variety of reasons that can go from searching for guidance to forming a reputation. Systems can take advantage of this situations incorporating social uses to their features, potentially increasing people’s engagement. Among SoundBetter current social uses are the reviews/recommendations people can give to the professionals listed, the messaging functionality for discussing a proposal, and the “Knowledgebase” sectionu.

However, the system could take advantage of multiple users doing similar tasks, such as encouraging users to consult ongoing job posts, and be able to filter them by their interest. The Knowledgebase section is simply amazing, members of the community can share stories, advice, tutorials, and videos. Our recommendation is to feature some of the content from this section in the homepage as a way to encourage people to make social connections and get involved with the system.

People are socialheuristic 5 People are social

u

Page 12: UX Clinic Heuristic Evaluation - Nearsoft · PDF fileUX Clinic Heuristic Evaluation . ... During the time we were working in this case study, ... 3. What’s your budget? (field just

© Nearsoft, Inc. All rights reserved.uxclinic.nearsoft.com

People like and want to be social for a variety of Using this heuristic as a guideline, the design team analyzed how the system grabs users’ attention and holds it in the appropriate moments. Overall, the system does a great job facilitating users focus on a single task and not distracting them from what it is important.

The only recommendation we can make is to change the color to a brighter one in the alert/feedback messages that appear at the top of the screen when a user performs certain tasks such as adding a new job postingu. Right now those alerts are very difficult to notice potentially disorienting the userv.

Attentionheuristic 6 Attention

v

u

Page 13: UX Clinic Heuristic Evaluation - Nearsoft · PDF fileUX Clinic Heuristic Evaluation . ... During the time we were working in this case study, ... 3. What’s your budget? (field just

© Nearsoft, Inc. All rights reserved.uxclinic.nearsoft.com

People like to feel in control of situations, especially when using something as intangible as software. Having access to information and obtaining feedback makes people feel in control and helps them to know what is going on in the system, contributing in the process of building trust in your service.

SoundBetter could improve the amount of information it is providing to encourage potential users to sign up for the service by being more descriptive on how the process exactly works before having to go through itu.

People crave informationheuristic 7 People crave information

u

Page 14: UX Clinic Heuristic Evaluation - Nearsoft · PDF fileUX Clinic Heuristic Evaluation . ... During the time we were working in this case study, ... 3. What’s your budget? (field just

© Nearsoft, Inc. All rights reserved.uxclinic.nearsoft.com

Our suggestion is to have the same four-step process as the one SoundBetter already has, but being more descriptive about what each of the steps entailv.

As you can see in the image below, each step is described both with an icon and a couple of bullet points explaining what the different tasks the user needs to complete in order to go through the process and achieve the objective (hire a professional and getting the job done)w.

As mentioned before, another instance where the system can give more explicit feedback and build trust and credibility, is right after a job is created. The alert message is too subtle and the user cannot really tell if the job was created or notx. We suggest making the font bigger and switching to a different background color. Green or yellow would be ideal.

heuristic 7

v

People crave information

x

Page 15: UX Clinic Heuristic Evaluation - Nearsoft · PDF fileUX Clinic Heuristic Evaluation . ... During the time we were working in this case study, ... 3. What’s your budget? (field just

© Nearsoft, Inc. All rights reserved.uxclinic.nearsoft.com

Unconscious Processing refers to the how our behavior is affected by the emotional part of our brains. Using photographs of people and stories can be a powerful strategy to encourage people to be part of your website. SoundBetter has a great example of how this is being achieved. Above the fold of its homepage, the user can see pictures of people in recording studios who are presumably

using the service. However, in the image’s lower right corner the user can see the name and location of the person showcased in the image, but cannot click on it to see his/her profile even though it looks like a link—the name is underlinedu.

Unconscious Processingheuristic 8 Unconscious processing

u

Page 16: UX Clinic Heuristic Evaluation - Nearsoft · PDF fileUX Clinic Heuristic Evaluation . ... During the time we were working in this case study, ... 3. What’s your budget? (field just

© Nearsoft, Inc. All rights reserved.uxclinic.nearsoft.com

The same situation happens with the testimonials found below the categoriesv, where the website shows brief success stories of people that have used the service in the past, helping the user to build trust in the service by seeing what other people think about it. While testimonials offer a possibility to create rapport with potential users, the fact that the images are clickable but don’t take the users anywhere could make it frustrating for them.

Our suggestion would be to add links to the profiles of each person the website is citing, in case the user or potential user wants more information about them, he/she can go and visit their profile, confirming they are actual users of the website, adding a layer of credibility.

v

heuristic 8 Unconscious processing

Page 17: UX Clinic Heuristic Evaluation - Nearsoft · PDF fileUX Clinic Heuristic Evaluation . ... During the time we were working in this case study, ... 3. What’s your budget? (field just

© Nearsoft, Inc. All rights reserved.uxclinic.nearsoft.com

People usually have pre-existing mental models for each process. They construct a thought process of how something functions, for instance how the process of buying groceries works. SoundBetter’s users already have a mental model for the process of “finishing a song”.

We think that, overall, the process goes according to the existing mental model, specifically the inclusion of a "workroom" in your system, a place where the engineer and the musician can communicate and work out ideasu.

People create mental modelsheuristic 9 People create mental models

u

Page 18: UX Clinic Heuristic Evaluation - Nearsoft · PDF fileUX Clinic Heuristic Evaluation . ... During the time we were working in this case study, ... 3. What’s your budget? (field just

© Nearsoft, Inc. All rights reserved.uxclinic.nearsoft.com

People usually have pre-existing mental models. The visual system is one of the strongest features of SoundBetter. The information is well organized, making good use of white space and the colors correspond to the common expectation for color codes. The only recommendation we could make is in the section “Browse Jobs”.

We think it would be useful to include icons that could quickly describe each job post — an icon for mixing, mastering, editing, etc; icons letting users know the approximate budget — a dollar sign for a budget less than 200, four signs form a budget of 2,000 or moreu.

Visual Systemheuristic 10 Visual system

u

Page 19: UX Clinic Heuristic Evaluation - Nearsoft · PDF fileUX Clinic Heuristic Evaluation . ... During the time we were working in this case study, ... 3. What’s your budget? (field just

© Nearsoft, Inc. All rights reserved.uxclinic.nearsoft.com

Get started on making UX part of your best practices and obtain useful insights from the feedback and usability recommendations our panel will be giving.

Submit your app or website or watch our latest episode:

uxclinic.nearsoft.com

UX Clinic Apply for our initiative