GR6: User Testing
Design
Overview
ArtBark is designed with two users groups in mind: Artists who are looking for detailed, meaningful feedback about a work, and reviewers who will provide the feedback. As many users will play both roles, the artist’s upload interface, the reviewer’s interface and the artist’s review interface were designed to flow together seamlessly for learnability and consistency.
Accounts
We decided to use a very simple account model for ArtBark. The account design is very similar to other highly efficient web applications such as Imgur, where users do not need to register an account in order to share a photo; rather, content is shared through unique URLs. In our final user evaluations, most of the users appreciated the straightforward and no-nonsense security model.
Login page
The login page was designed to be very simple and straightforward. In our user testing and heuristic evaluations, a number of users reported being confused by the multiple login options we had provided (we had originally given users the option of viewing existing art by personally inputting their email address and the art name, as well as the option of uploading new art). As a result, we chose to present only the most basic login option at the login page. Existing artists and reviewers are only able to access existing works through personalized URLs. 
As described, once the artist has finished uploading his/her art, he/she is presented with links for each group that will be viewing the art. 
When a reviewer navigates to one of the aforementioned login URLs, he/she will be presented with a customized interface that minimizes confusion. As shown below, a reviewer only sees the single option of viewing the specified work of art. Logging in will take the reviewer to the reviewer interface. 
If an artist navigates to the URL for his/her uploaded work, he/she will immediately be taken to the artist interface.
Upload Interface
The artist who wants feedback on their art must first submit that art to our system. After logging in and indicating that they are going to upload some art, they are taken to the upload page. The upload page features two ways to upload an image: drag and drop, and an upload button. Either way, after optionally giving their art a title and watching an image upload status bar, they are whisked away from the upload page to the Review Group Privacy Setup page. 
Setup - Upload art:
Setup - Group Privacy
(uses drag and drop)
Setup - Choosing Feedback Tags
(user's keyboard input)
Key design decisions and alternatives considered
as motivated by paper prototyping, heuristic evaluation, and user testing
Implementation
Internals and important design decisions.
Backend uses Node.js for persistency of data on server (backend).
Appropriate View for an individual is sorted via the URL which contains user type and ID
Implementation problems that may have affected the usability of the interface
Toggling of tags for filtering
Indicator of active comments
Jquery browse load
Evaluation
Setup
Users were found through personal contacts:
- art professor at School of the Museum of Fine Arts (director of Artist' Resource Center).
- digital artist making drawings on iPad
- digital photographer, tech savvy
- RISD-educated Digital Media Artist and Painter with a programming background
They are representatives of our target populations.
We decided not to do a demo, not to bias the learnability of the interface beyond the briefing / tasks.
User briefing and tasks:
Artists' briefing
"You are requesting feedback about a digitized visual art work that you have been working on. You use ArtBark to collect tangible, actionable feedback to improve your art piece. This comprises two stages that are separated in time: 1) uploading the work and requesting the customized feedback from specific individuals and 2) browsing through the feedback after it has been received."
Artists' tasks
- Setup the review process: upload art, select groups of commenters, and categories/tags desired for the review, invite commenters
- Review comments/annotations from commenters; Filter by categories (tags) and by groups
Commenters' briefing
"Your feedback about a visual art work is being solicited. You want to help the requester improve the art piece you are about to see."
Commenters tasks:
- Put general comments and editing, categorize them through tagging
- Put annotations directly picture, and edit them, categorize them through tagging
- Rate the art
Usability problems found and potential solutions
General (Both commenter and artist view):
- Poor contrast between pins and image
- Pins icons on comments
- Hard to see hashtags: could have them as blue links that are the filter
- Red border around annotation on the right looks like input field on error
- Should disable mouse interactions with the art piece so that you can't pick it up and drag it around
- Restyle annotations so that they aren't as big, also maybe recolor them since the red can be hard to see
Artist upload
upload button doesn't work [solved]
- Make clear which image formats are being supported
tags page has multiple "submit" and "next" buttons [solved]
- make more clear how to enter tags (i.e. comma, space, quote separated) and what they mean, as artists may not be familiar with the concept of tags
privacy settings page doesn't allow you to drag a group back to being unused [solved]
privacy settings page allows you to drag one group on top of another [solved]
Artist view
- maybe have an overlay on the stars that shows the actual numerical rating (e.g. "Average rating: 3.8")
- disable crosshair over art (since it implies that you can add an annotation)
- fix scroll jumping when you toggle filters
Commenter review:
Empty stars are not very visible [solved]
- Give feedback when they rate the piece (e.g. "You have rated this piece 3 stars. Undo?")
Add feedback/confirmation on deletion [solved]
- allow commenters to pin comments that are only in the summary section
- restyle tag buttons so that they actually look like buttons
- Change mouse marker to indicate draggable
- When you have a pending annotation open, cannot close annotation window if you change your mind, and cannot click on an existing annotation to close your pending annotation.
- Expect double click to edit annotation - currently can't edit annotation by clicking on them
Reflection
Learning through iterative design process.
With paper prototypes we first caught (at very low cost), big usability problems such as unintended affordances, missing feedback, and safety/reversibility issues.
At the computer implementation stage, issues became more refined such as changing shape of an icon, color, alignment issues.