User:MPlauche/gallery
For the Upload Wizard to play a role in meeting the 2015 Wikimedia Foundation goals of increasing the amount of information we offer, encouraging readers to become contributors, and supporting healthy diversity in the editing community, three critical changes should be considered:
1. Improve navigation, in particular, the ability to back up or undo.
2. Provide more context: Users need more guidance finding Upload Wizard and knowing what to do with their pictures once uploaded.
3. Offer more guidance for metadata entry, in particular, avoid or explain unfamiliar or unnatural concepts.
The Upload Wizard does an excellent job of providing guidance for the novice user through selecting licensing (cartoon overview, decision tree, contextual help and plain language). This same support and quality design is needed in metadata entry. Changes that are secondary but will also greatly improve Upload Wizard for both expert and novice users include:
4. Improve management of multiple files
5. Double-check consistency of words, icons, and layout
Other issues that may be important but are considered outside the scope of this study include: Accessibility, multilingual support, phone uploads, and a complete list of all positive things one could say about Upload Wizard.
These recommendations stem from (1) a Heuristic UX Inspection and (2) a User Study, both conducted by a candidate for the position of Senior UX Design Researcher at Wikimedia Foundation on October 21, 2014. Screen by screen review and details about the two methods found below.
Screen by screen review
 |
Observations: There is no clear link to Upload Wizard from the main page of Wikimedia Commons. Image of camera catches the eye, but is not a standard icon for an Upload Wizard process, in fact, it is part of another feature of the site. The nature of the image (stock photo), however, signals tha it is a symbol, perhaps for uploading, instead of a symbol for a competition (trophy, representative photo). Repetition of word “Challenge” near camera might be dissuasive (intimidating) to uploads instead of encouraging to new users.
“The way you get users to understand what's going on could be improved. Its a little overwhelming at first... some initial disorientation... I guess I need to make a study of it.” (First clicks on topbar upload button). “This page doesn't tell me. Can't just upload whatever. Here's the help bar... but I never do that''
“Upload” text should be distinct from the navigation tabs to the left “Images Sounds Videos”. Currently, some confusion about how these four objects are connected and which are the primary and the secondary actions for a user just landing.
|
 |
Observations: Flow tabs (“Learn,” “Upload,” “Release rights,” “Describe,” “Use”) give feedback about where the user is and an overview of steps involved in completing the task. However they could be confused for navigation buttons, as no navigation buttons are visible, as they are at the bottom of the page. This is consistent with wiki pages, however. “Describe” and “Use” are neither standard terms for a wizard or uploading process nor are they descriptive enough on their own to communicate to user their purpose or importance.
Shorten text for help, for example: “Please visit Commons:Upload help for help uploading files”. Double-check and correct logic for “[x] Skip this step in the future.” so that if the box is selected, the cartoon is not displayed upon return to the site.
Help bar adheres to standards (red, icon for ?). Location, font size, and highlighting shows that seeking help is a secondary action available to the user. |
 |
Observations:
Highlighted blue “UPLOAD” flow tab gives feedback about where the user is in the process, but looks like a button, especially in the absence of other visible navigation buttons. At this screen and all others, attempts by user navigate backwards or undo results in either no action (no feedback) or return to wikimedia commons main page. This results in confusion, unexpected, often jarring results to standard navigation operations (undo, back), lost time and work, and is a critical navigation problem for the Upload Wizard.
Recommendations: Add navigation buttons to go backward at each page. Upload Wizard needs to allow user the control and freedom to navigate forward and backward in the wizard. Graceful “undo's” should be supported. Consider less text on button “Select media files”, to adhere to standards across web apps.
|
 |
Observations: Clear and aesthetic design give feedback for user about state of uploads and next available actions. Flow tabs at the top tell user where they are in the process. User will need to scroll to the bottom to find navigation buttons.
User Comments: “Okay this site. I'll continue” Recommendations: Stay consistent “Continue” or “next” for navigation button throughout wizard. Consider smaller, red font for “x Remove” to adhere to standards across web apps. Positives: Green check is consistent design for “ok”. Lots of great feedback indicators here to let user know what is going on. A thumbnail and text such as “All uploads” in grey are especially good feedback. Primary actions (Add more files) or (Continue) are clearly indicated – secondary action (Remove), less apparent, but visible. Three common filetypes tested were supported by upload wizard (.jpg, .png, gif). |
 |
Observations:
File preview window offers a preview of how picture will appear (presumably size and quality, not tested by UX review) once published. User Response: N/A Recommendations: Check other file previews (not yet tested by UX review) – do they generally contain meta information, such as the size of the photo or the title, with suffix (.jpg)? Positives: 'X' indicates primary action for this window. Background color (grey) of main window directs user to relevant information only. |
 |
Observations: In the case of multiple file uploads, the feedback of upload status becomes more important. The navigation button (“Next”) at the bottom, however, is no longer visible.
User Comments: N/A Recommendations: None. Positives: Table layout, use of color, relative font size and other design decisions all contribute to an interface that offers feedback and context to the user, that is pleasing to the eye, feels satisfying like a job-well-done, and offers the user control and freedom to undo or add more. It is consistent with other current image upload apps and accommodates inexperienced and experienced users. |
 |
Observations:
With photo thumbnails in plain view, the user must now select their license. The user must remember what they saw in the cartoon and make a decision that has legal consequences. This step requires some cognitive effort from the user. First, we look at the default state of this site, where the user has not taken any action. User Comments: (...Reading license info..) “Feeling a bit nervous, but its just a picture of a van” Recommendations: Consider showing the cartoon about “What can I upload” here to help user remember their options and implications of their actions. Consider replacing “Release Rights” in flow tabs at the top with “Copyright” so that all tabs will be consistent: single word verbs. Positives: Primary actions and secondary actions are clear. User only sees what is most relevant (drop-down menus). User can select “legal code” which allows control and flexibility. Language is familiar and easy to understand “These files are my own work.” Displaying thumbnails of photos may motivate user to continue despite cognitive load and unfamiliarity possibly) of this step. |
 |
Observations: One of the licenses must be selected to proceed. For the novice user, it seems like an important decision, but this user is not likely to want to read the “legal code.” Icons are helpful for recall, but these icons are likely not familiar to novice user.
User Comments: “Oh. Oh wow. Sooo... thorough.” (clicking on use other license hyperlink) “Can I check and get another window? No. Oh. I'll just pick the latest one. Its actually good, good they have a choice, good for the artist who might have different needs for their work. (Clicks NEXT)” Recommendations: Wizards often give a “default settings” or “recommended settings” that you can feel pretty safe about selecting if you are not sure about what the question is asking. It is generally contrasted with “advanced settings.” Could the default or recommended license be indicated more clearly, perhaps with one of those two words to be consistent? Would a hint that appears when you mouse over help decode the difference between these four Creative Commons licenses? Positives: Icons are consistent, bullets, text, and layout make the choices easy to read, especially given how dry this text is. Hyperlinked legal code and collapsing bullet menus show user only relevant information. |
 |
Observations: Collapsable menus and text entries allow user to select copyright permissions for works that are NOT their own. Three selectable bullets draw the user to make a decision: Two are clearly related (mutually-exclusive), the last one allows user to select copyright individually for multiple photos.
User Comments: N/A Recommendations: The three selectable bullets correspond to two different concepts and relative importance. Visually contrasting the two concepts (Primary: files are/are not my work, Secondary: multiple file management) will be more consistent and logical. One solutions might be a box towards the top of the list of options, closer to the thumbnails and distinct from the copyright questions which would offer the ability to select the same copyright info for ALL files. Selecting all files is a secondary action, and should be visually set apart from the primary action of selecting the appropriate copyright info. Edit hints for clarity and consistency. Positives: Hint appears when you mouse over grey, boxed “?”, indicating relevant information, feedback and offering contextual help. Good error prevention by offering choices about copyright permissions written in clear language. |
 |
Observations: Collapsable menus with selectable buttons to explore and select most appropriate copyright.
User Comments: N/A Recommendations: Why is Flickr explicitly mentioned, but not Picasa, for example? “Another reason not mentioned above” appears to specifically refer wikitext. The word “reason” is now replaced by “license” but I believe they refer to the same thing. A little more explanation here would prevent errors and be more consistent. Positives: Very well laid out, easy to explore, logical breakdown and flow, plain language. Good use of color, icons, and bullets for navigating primary and secondary information and actions. |
 |
Observations: Preview window allows user to safely see how text will appear once published, presumably (beyond the scope of this UX review) to allow user to prevent errors by double-checking the layout and lack or presence of markup text.
User Comments: N/A Recommendations: To be consistent with File preview, a title should be present in top bar. Here the x is clearly indicated in a light blue box – consider the same blue box for the File Preview (Screenshot 5 above). Positives: Same as File Preview (Screenshot 5 above). |
 |
Observations: Text entry and drop down menus next to thumbnail of each image allow user to input meta information such as title and category. User may also describe the photo in all supported languages. Language selector is out of the scope of this UX review.
User Comments: “Cool. I get to enter info.” (user types “Brown 1983 Diesel Vanagon”. Uses cursor to correct entry by adding “Two-toned” and “Passenger” to the description.) “Describe. Okay. This is a picture. 'Socks' in French. English? Ok English. (scrolling down). No idea what description is for.” Recommendations: Hint for “Description” might motivate why the user should describe the image or where this description will appear, for example, “this text will appear in place of the image is unable to load” or “this text will allow the community to find your picture in a key word search.” Positives: Hints that appear when you mouse over grey boxed “?” offer help in clear language when needed but keep the design minimal when not needed. Red * and location of footnote is consistent and logical. |
 |
Observations: Date is entered automatically, by text entry, or by using a drop down calendar.
User Comments: “I assume the date published is today. Oh they took this off the time stamp.” Recommendations: Red '*' is also needed to the right of “Description.” Text box for Date is also automatically populated by the time stamp. Should these numbers be explained so this field will be more clear for the novice user? “Date” for the title of this box would be more consistent with the other titles on this page. Positives: Automatically populating this text box with date and time prevents errors and provides an efficient interaction. |
 |
Observations: Text entry with tab completion allows user to select an existing category or create a new one. Hint after the word “Categories” gives the user some context for how the metadata in Categories might be used.
User Comments: “Category... category... I don't know what 'Category' is. I don't know what 'Category' is... Is 'vanagon' a 'category'? I see 'vans' but I don't know if its the shoe or what. I'm confused. I can't see the categories. I like that it has autocomplete. I'll add 'vanagon'? I don't know. Will people find it? I guess its a car – or an automobile.” “Category – Animal. Feline. Oh wow. In latin? And a lot. This is a lot of categories. No simple category. 'Feline guitars?' No, just 'feline.' Create my own. Create Category – Cat. Create Category – Curiosity.” “Too many steps, too much back and forth. I have to remember the exact spelling ('curious' vs. 'curiosity') and go back and forth, scroll up and down. At least they give suggested categories, so its not so bad. But if you forget, you have to go back and forth.“ Recommendations: Hint for “Categories” may not be enough, as this appears to be a unfamiliar concept specific to wikipedia search. An example in the hint and how it relates to “key words” or “key word search” or “search engines” or other more familiar concepts would assist the user here. The alphabetic logic behind the drop down menu is inconsistent with the mental model of categories in the mind of the user. Positives: Tab completion and a scrollable drop down menu allows the user the control and freedom they need to explore and experiment with Categories. It may take time, but because the user can comfortably prevent and recover from errors, and is provided important feedback about what categories are available, ultimately, even a novice user can perform this task. |
 |
Observations:
Text entry and check boxes allow user to enter the following metadata: "Location" and "Other information." Although the problem of specifying location is a difficult one, latitude and longitude is not the natural way for users to specify location. At the bottom of the page, a user can copy some or all of the metadata just entered across multiple files. The layout and wording of this last step is confusing, for example, the word “copy” appears 8 times in a row across three classes of object. The class of metadata called “more information” is also referred to as referred to as “other information.” And the action to “copy information to all uploads” refers to another class of data: all metadata, such as Title, Location, and Other Information. User Comments: “I don't know latitude and longitude by my phone might know. I'm skipping that. 'Other information' but I don't know what.” Recommendations: Consistent with the “Date” field would be to specify that the location is where the image was taken or first published. Edit instructions “Copy information to all uploads below...” It is the information that is below, not the uploads. Also, this title suggests that my primary action is to Copy information, but the boxes require me to select, not copy, creating some confusion. Repeating the word “Copy” also overloads the user, A cursory review of how similar apps manage the entry of metadata for multiple files will likely reveal a more logical layout and entry method (beyond the scope of this UX review). The ellipsis (…) is not consistent with other titles on the page and for many, it symbolizes missing information, which is not the intention here. Positives: Directive in small red font to the right of the second picture, “Please choose a different, descriptive title” provides error prevention and help with a clear suggestion. |
 |
Observations: The categories selected or entered by the user appear in blue text with a small x to the right, providing feedback and freedom to correct errors. Hints for “Location” and “Other information” are visible when contextual help [?] boxes are selected.
User Comments: N/A Recommendations: Level of detail for Title and Hint respectively should be consistent for Date (Hint: Date work was created) and Location (Hint: Location work was created). Also, Hints that provide a motivation “Why?” may help the user use the category “other information” more effectively. Edit text to be consistent across all hints (for ex: “etc...” vs. “…”) Positives: Primary actions are clearly distinguished from secondary actions. Collapsable menus, red *, and layout help user navigate most relevant information, and offers flexibility for expert users. |
 |
Observations:
User is directed to the File List (outside the scope of this UX review), which displays thumbnails of the recently uploaded files and the metadata entered by the user. User Comments: “I can only go forward. I'm not sure how to correct, like if its a 1984 vanagon, how do I fix it?” “Its published! (goes to wiki user page link at top) Can I see my uploads here? Okay they say they have it (File List). Who can see it? Everybody? Does it create a page? (clicking 'special page on left) Maybe if I had read the welcome page first. Oops. I should have read the page before.” (User returns to modify categories, so that image will be more easily found in a logical search) “I need to go back to upload and edit category. How can I do that. (Reading tabs “file file status reuse”). Hmmm... scrolling down. Trying to find where I can edit. I don't see how to edit. Licensing? 'edit?' Summary. But no, not description, I'm looking for categories” Recommendations: This page offers excellent feedback and lets the user know what effect their actions have had. However, it does not allow the user to easily make any error corrections, for example, changing the description, renaming the file, or removing an image. Offer the user the control and freedom to correct errors and undo previous actions, perhaps with a “back” button to return to metadata entry, or with small “x remove” hyperlinks, consistent with previous screens. Positives: Immediate visual feedback for metadata entry. The user has just performed a big, involved “action”, and now the Upload Wizard performs a large “action”, so the interaction between user and Upload Wizard feels natural and appropriate. |
 |
Description field does not have a red * to indicate that it is a required field. When “Next” is pressed and this field is empty, an error message near the “Next” button and near the field are displayed. The field is also highlighted in red.
User Comments: N/A Recommendations: Add a red * to the left of “Description.” Positives: Error messages displayed near primary action and near problem field help user correct the errors efficiently and with little cognitive effort. |
 |
Observations: “Thanks for uploading!” is displayed, along with a clear suggestion of how to use them. Thumbnails of the uploaded images and an editable text box automatically populated with the link are displayed, along with clear instructions. Navigation buttons on the bottom offer the user logical subsequent options.
User Comments: “Getting some info to use. Got some markup... here is the new html. That's neat. Seems pretty straightforward – Should I go to wikipedia and put it in?” (User then peruses pictures of vanagons from the commons, scrolling up and down, very engaged and interested. Finds sandbox and puts newly uploaded pic on his user page.) “He he he. Neat. Neato. I like seeing my van here. Seems powerful to, I like the different options for markup and the safe place to work on layout, a work environment with no criticism, but I would probably need to do a tutorial. Pretty neat...(exploring left side task bar) Neat. 'transclude' – what's that?. (Looks it up on wikipedia.) Neat. Very Cool.” “I like the way you can modify other people's categories. Hey look, a french speaker!. I expect to see my photo on the page (of commons), since I just contributed. Volunteers are reaching out, so you have to reward them. I would understand if it didn't get approved, as long as I got a reason, but don't forget that volunteers are the real people and they are making the effort to reach out and contribute.” Recommendations: What about instant context for this photo's new location? Where it DOES appear and where it could appear. Maybe suggestions of recommended actions for novice users, like “Add it to my home page,” “View similar pictures in the commons” “Add it to wikipedia” “Create a home gallery.” “Send a link to your followers.” I believe this would make the Upload Wizard more meaningful, especially for first-time users. Positives: Clear language on buttons, instructions, and suggestions. Primary actions are clearly distinguishable from secondary actions and all actions are logical and natural for the user. The flow tabs at the top and the centered, bold “Thanks for uploading!” provide excellent feedback to user that the process is complete and successful. |
 |
Preference page for the user includes a tab for Upload wizard that allows an expert user to make custom changes that will increase the efficiency of the tool.
|
1. Heuristic UX Inspection
One walkthrough of system by UX reviewer, evaluating its performance according to Neilsen Heuristics. 45 min.
2. User Study
“Think aloud” sessions – 30 min each, 20 min questionnaire, loosely based on WAMMI. Both sessions started by taking 5-10 min to transfer a photo to desktop from phone.
User 1: "Seems powerful, and its such an optimistic, positive project."
Volunteer, Male, 40's, Programmers, Reads wiki 1x a week by typing “wiki” then the search object in google search engine. Has never edited the page.
Scenario: VW van enthusiast thinks there should be a page entirely dedicated to 1983 Diesel vanagons. Decides to start with a picture of his own van.
User 2: "It works, you just have to be curious."
Paid participant, Male, 30's, French Teacher, Uses wikipedia (fr 70%/eng 30%), wiktionnaire (fr 95%/ eng 5%) hundreds of times a day, including during class. Has over 1,000 students a year, all potential wikimedia micro-contributers (homework for french class). Occasionally (2-3x a yr) reads free books on wikisource. Regular contributor to other moderated online encyclopedias (Disccogs.com).
Scenario: As homework for students, upload a picture of something you know something about to the commons and label it in french.