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.
...
The page features draggable “pills” that represent the different target user groups of our application. The place where they drop the pill decides the inter-group visibility of the comments.
Once the user continues on from the privacy settings page, they arrive at the Tags page. This page fulfills users’ need to direct the type and sort of feedback that they receive from their peers and mentors. Tags are simply short words or phrases, much like those seen on sites like Flickr or Twitter, that suggest a theme for feedback.
...
Rating stars are directly manipulated: highlighting on hover, and filling-in on click.
Users can make general comments about the piece that will appear in the container on the right-side. The artist-defined tags help to guide the reviewer’s feedback without restricting it. We had originally required users to categorize their comments based on a predefined set, but in prototyping we discovered that reviewers found this limiting and stressful. Tags offer a more flexible, but still guided user experience.
...
Users can also create pinned comments directly by clicking anywhere on the image--a crosshair cursor indicates this option on image hover.
The user can edit pinned comments in-place by double-clicking (shown below) or in the comment display for flexibility and consistency.
When the user hovers over pinned comments in the comment panel, the corresponding pin will highlight, so the user need not remember the correspondences (recommended by heuristic evaluation). Likewise, the pinned comment in the panel will highlight when the user hovers over the pin.
...
- 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.
...
- 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
Setup
Wiki Markup - Make clear which image formats are being supported
Wiki Markup - 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
Wiki Markup Wiki Markup - privacy settings page allows you to drag one group on top of another \ [solved\]
Artist Interface
- 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
Reviewer Interface
Wiki Markup - Give feedback when they rate the piece (e.g. "You have rated this piece 3 stars. Undo?")
Wiki Markup - 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
...