User:JKlein (WMF)/guerilla-user-testing/Adding+EditingLinks-May2019

Learnings: Prague Hackathon 2019

Prototyping and Testing Notes:

Bring 2 devices
- One for testing; one for recording
- This would resolve a couple issues we encountered at the Hackathon:
  - Tester would not need to turn off their notifications. Contributors don't want the contents of their notifications/messages recorded and shared
  - Tester and test administrator would not need to share a link to the prototype(s) via email/SMS/etc.
Create notes template ahead of time
- "Test administrator" shouldn't have to think about a) Where do I take notes? and b) What format should I take notes in?
Prototype: don't "middle"
- It's better to have a lower fidelity prototype (that does not look finished and will not create an expectation that it is) or an interactive prototype (read: high fidelity) that looks and functions as if it's real.
- Middling in between, as we did for this test, is potentially distracting to the tester in so far as the prototype looked real enough that people expect it to behave like the real thing (i.e. being able to place the cursor anywhere)..

User Experience Notes:

W / pencil - experienced users found the / confusing
After inserting the external link an extra tap on the link card is unexpected (w/ a change in state to confirm changes have been made successfully)
Should unlink and edit buttons feel more obviously like buttons?
It’s hard for to discern if the a/b test is super effective here because the prototype was a bit cumbersome
It does seem that folks are used to utilizing a top toolbar (current)
There’s an expectation of double tapping into text to edit
- Editing link’s label: expects to be able to edit label text directly within article/document (extra step not intuitive/expected)
Seems like there’s a preference for the “delete” icon for unlinking but also, this is a result of having to scroll on the prototype
External links: lack of feedback about what is/isn’t a valid link is confusing
Some things might depend on if you are experienced or new editor, what language you are editing in, what your area of expertise is

1. How should the test flow?

Overview:

Share why we are doing the test (Why we are doing this test)
Introduce the test (Introducing the test)
Get consent before the test begins (Before the test begins)
Film tester completing the workflows (Workflows to test)

2. Why are we doing this test?

Background:

This year, our team is working to help contributors be more successful editing on mobile, using the mobile VisualEditor.
What you're about to see is a new design pattern intended to make adding and editing links within articles simpler and more visible
This is a test to help figure out whether this current design does in fact make editing links within articles simpler and more visible
After this test, we will look back at the footage to figure out what parts of the designs needs to be revised

More info: VisualEditor on mobile/Edit cards

3. Introducing the test

Important points to get across:

This a test of the editing interface, not of you
This test is intended to identify core usability problems
Please do your best to "think aloud" – if you're not sure what to do next, if something is confusing, if something was surprising, please say something!
I (the observer) am going to do my best to resist saying anything while you're testing, so if I'm noticeably silent, this is why :)

4. Before the test begins

Confirm the following with each tester:

Are you okay with me filming your hands and device as you complete the test?
Are you comfortable with me sharing this recording with our team?
Are you comfortable with me sharing this recording on MediaWiki?
Are you open to being contacted by our team later, should we have more questions for you?
1. If yes, what is the best way to get in contact with you?

5. Workflows to test

⚠️You can share the following link with the tester so they can access links to the prototype on their device:

https://w.wiki/48D

Add a new link

Imagine that you are on a bus reading an article about a fancy pencil. Right away, you notice that you can link the word "pencil" in the first paragraph of text to another Wikipedia article. How would you do that and publish your changes?

Prototype link

Edit the link's label

Now, try change the label of that link to say "Arya Stark" instead of pencil. Publish your changes.

Prototype link

Change the link

Instead of going to the pencil page on Wikipedia, have the link go to the Arya Stark page on Wikipedia. Publish your changes.

Prototype link

Change the link, again!

This time try to add a have the link direct to the FANDOM page about Arya Stark. Publish your changes.

Prototype link

Unlink the text

Try to remove the link. Publish your changes.

Prototype link