997451 - [signup] Create a vouch input interface

Status: VERIFIED FIXED

(Participation Infrastructure :: Phonebook, defect)

Description

[Justin Crawford [:hoosteeno] [:jcrawford]]

Attachment: new vouch interface sketch

As part of the signup refactor, we need a vouch input interface that takes into account two important new features:

* Needs to allow people to input descriptions
* Needs to explain the magnitude of vouching

It seems likely that this interface can fit on the existing profile page like current vouches do.

Attached is a sketch suggesting an approach. :williamr or :wbowling, if you have ideas for improvement, please attach them. This bug can be closed when the interface specified here and below is coded and merged.

Comment 1

[Justin Crawford [:hoosteeno] [:jcrawford]]

Attachment: new vouch interface sketch

Comment 2

[Justin Crawford [:hoosteeno] [:jcrawford]]

It might be nice to collapse the entire vouch interface with a callout: "This profile is unvouched. Can you vouch for them?" Clicking this link would expand the interface. This allows us to be very clear about what vouching means, etc., without crowding profiles.

Comment 3

[Wray Bowling [:wbowling]]

Hahaha I like this sketch. I will NOT vouch Cthulu!

There's a few directions I could see this going in.
1. Something like Wikipedia's stub/in-a-nutshell alerts at the top of the page to bring lots of attention to the issue. https://en.wikipedia.org/wiki/Wikipedia:Stub Could link to another page or pop out

2. Something closer to a comment box that would rest at the bottom of the bottom profile page under the vouches from other users. Since it's at the bottom of the page, it's totally okay for it to take up page height.

Related: after playing with mockups in-browser I think I like the key icon the best when talking about vouchers. http://fontawesome.io/icon/key/

Comment 4

[Justin Crawford [:hoosteeno] [:jcrawford]]

I'm liking the idea of having the vouch input interface down near existing vouches. I like that it gives us room to explain, and it puts the input interface in context. But I also think we need something brief in the notification area. This could easily just be a link to an in-page anchor (#vouches or something). 

Wray, could you sketch or mock something along those lines? It might be worth doing the same sketch for this and bug 997473.

Comment 5

[Wray Bowling [:wbowling]]

Attachment: vouching_whiteboard_v4.png

I tried making a mockup at the bottom of the page. There's less horizontal space down there so it didn't look as good as the mockup I posted before. After showing it to another designer, we agreed there's more that needs mentioning too, and somehow, in fewer words. Here's what we came up with on the whiteboard. (see attached)

Comment 6

[Wray Bowling [:wbowling]]

Attachment: Screen Shot 2014-05-14 at 4.42.14 PM.png

Updated vouch box mocked up in profile.html

Here's the still very rough code (all styles are in-line)
https://github.com/caktus/mozillians/commit/c79eaffb1214f9e8aeb3c1e8268ef540e1e6f1c2

The page as a whole is still awkward with the blue box at the top and "Vouch Firstname Lastname" button plus the vouch box at the bottom. But it's a start.

Comment 7

[Justin Crawford [:hoosteeno] [:jcrawford]]

Wray, looks good. Some feedback:

* we'll need to copy edit this, it's not quite right. :williamr can be the final word on that.
* we should see a mockup that includes the whole page, to see how this fits and to see the message at the top of the page
* seems like placeholder text as a substitute for instructions may be going out of style: http://www.nngroup.com/articles/form-design-placeholders/

Point of clarity: You don't need X vouches to become a Mozillian. You become a vouched Mozillian when you get your first vouch. We may wish to alter the copy based on whether the person has <1 vouch or 1+ vouches. And the box will completely disappear when they have 6.

Comment 8

[William Reynolds [:williamr]]

I am including some revised copying below for the 3 different milestones (<1, 1-2, 3-5 vouches). The box will disappear when a user has 6 vouches.

Note that the copy for a profile with (1-2) and (3-5) vouches is shorter and does not include the list of benefits.

I agree with moving the text area instructions to be above the box.

Feedback on the copy is welcome.

----------

If the person has <1 vouch:

Header: FullName needs a vouch to fully use the site
Input label (placed above text area): Your reason for personally vouching and relevant links

Only vouch for people who have made significant contributions and are at least 13 years old. Once vouched, they will be able to:
View all profiles and join groups
Access special video content on Air Mozilla
Join the Mozilla Exchange Yammer network
Use other Mozilla apps as a vouched user

Vouches cannot be edited or retracted. Read more about vouching.

----------

If the person has 1-2 vouches:

Header: FullName need {2,1} more vouches in order to vouch others
Input label (placed above text area): Your reason for personally vouching and relevant links

Only vouch for people who have made significant contributions and are at least 13 years old.

Vouches cannot be edited or retracted. Read more about vouching.

----------

If the person has 3-5 vouches:

Header: FullName already has full access - add a vouch to recognize their value to Mozilla
Input label (placed above text area): Your reason for personally vouching and relevant links

Only vouch for people who have made significant contributions and are at least 13 years old.
Vouches cannot be edited or retracted. Read more about vouching.

----------

If the person has 6 vouches:
The box and text about vouching someone will completely disappear

Comment 9

[Wray Bowling [:wbowling]]

Thanks for writing all this up :williamr. It's really clear now.

Comment 10

[Wray Bowling [:wbowling]]

Attachment: Screen Shot 2014-05-15 at 11.28.23 AM.png

Hopefully much closer to what we'll be making.

Everyone remember to be careful with the sentence that can flip between the plural/singular nouns vouches/vouch.

Comment 11

[William Reynolds [:williamr]]

(In reply to Wray Bowling [:wbowling] from comment #10)
> Created attachment 8423175 [details]
> Screen Shot 2014-05-15 at 11.28.23 AM.png
> 
> Hopefully much closer to what we'll be making.

Looking good!

Small nit. The string 'Once vouched, they will be able to:' is not needed when a user has >0 vouches. Be careful with comment 8, since the strings displayed are different depending on how many vouches someone has.

Comment 12

[Wray Bowling [:wbowling]]

https://github.com/caktus/mozillians/tree/997451-voucher-input-interface

new commits to this branch got it pretty close to what we want. It's a good stopping point to hook up the back-end and plug it up to the copy logic.

Comment 13

[Giorgos Logiotatidis [:giorgos]]

(In reply to William Reynolds [:williamr] from comment #8)
> If the person has <1 vouch:
> 
> Header: FullName needs a vouch to fully use the site

The wording here maybe be not optimal. The way I read it means "Hey! This user needs help, please vouch" which may trigger sympathy over reasoning, especially in some cultures, resulting to mozillians "fixing" the problem by vouching as much as they can. I believe that 

"Do you know this Mozillian? Vouch her/him to let them in:"

"Is Foo Bar a Mozillian? Let us know how she/he contributed:"

have a better starting point.


> If the person has 1-2 vouches:
> 
> Header: FullName need {2,1} more vouches in order to vouch others
> Input label (placed above text area): Your reason for personally vouching
> and relevant links

Similarly here it feels that having less than 3 vouchers is a problem, while it is _not_. Not everybody needs 3 vouchers because not everybody needs / wants to vouch others. If one needs to vouch other she/he has to pursue this himself and he should initiate the procedure, not the site, by asking his profile visitors to vouch him.

Comment 14

[Wray Bowling [:wbowling]]

(In reply to Giorgos Logiotatidis [:giorgos] from comment #13)

Thanks Giorgos. I had a sneaking suspicion that the sort of tone I was using wasn't popular for a reason. The points you bring up are pretty good reasons. Whereas it feels like a priority as an end user to know what consequence my actions will have, I can see how for other people (of any culture) could see that as a call to action; to fill a need; to vouch for someone regardless.

> > If the person has 1-2 vouches:
> > 
> > Header: FullName need {2,1} more vouches in order to vouch others
> > Input label (placed above text area): Your reason for personally vouching
> > and relevant links
> 
> Similarly here it feels that having less than 3 vouchers is a problem, while
> it is _not_. Not everybody needs 3 vouchers because not everybody needs /
> wants to vouch others. If one needs to vouch other she/he has to pursue this
> himself and he should initiate the procedure, not the site, by asking his
> profile visitors to vouch him.

The caution is good. I also don't want the consequences to go unknown. turning things around and presenting the same information with a negative tone might do the trick, but I am weary of being heavy-handed and/or untrusting. People did make it on to Mozillians by way of invitation after all.

Comment 15

[William Reynolds [:williamr]]

(In reply to Giorgos Logiotatidis [:giorgos] from comment #13)
> The wording here maybe be not optimal. The way I read it means "Hey! This
> user needs help, please vouch" which may trigger sympathy over reasoning,
> especially in some cultures, resulting to mozillians "fixing" the problem by
> vouching as much as they can.

I think this is a great insight. We need to be clearer with the text and not trigger sympathy.

> "Is Foo Bar a Mozillian? Let us know how she/he contributed:"

I think this works really well for a profile with <1 vouch. I suggest a small tweak: "Is Foo Bar a Mozillian? Let us know how she/he has contributed."


> Similarly here it feels that having less than 3 vouchers is a problem, while
> it is _not_. 

Agreed. For someone with 1-2 vouches, I suggest the headline "Want to vouch for Foo Bar? Let us know how she/he has contributed." It feels pretty neutral to me and is unlikely to trigger sympathy.

(In reply to Wray Bowling [:wbowling] from comment #14)
> The caution is good. I also don't want the consequences to go unknown.
> turning things around and presenting the same information with a negative
> tone might do the trick, but I am weary of being heavy-handed and/or
> untrusting. People did make it on to Mozillians by way of invitation after
> all.

I think the neutral messaging suggested earlier in this comment handles this well and feels better than using a negative tone.

Thanks for the suggestions, Giorgos and Wray!

Comment 16

[Wray Bowling [:wbowling]]

The copy was updated. Also, I put in some simple template logic. It only checks if the user is vouched or not to swap the header text. There's a few <!-- FIXME --> tags in there for whenever logic for "if user has 6 vouches" is ready to make the vouch box disappear.

Comment 17

[Wray Bowling [:wbowling]]

Okay. Handing this over to :Sancus to stitch up the last bits. The character limit countdown works.

TODO:
textarea is not in a form that submits to a proper place
hiding the box when there are enough vouchers

Comment 18

[[github robot]]

Commits pushed to master at https://github.com/mozilla/mozillians

https://github.com/mozilla/mozillians/commit/913c339b80eebd8d1f8929d81fc2e35648faa17e
[Bug 997451] Add vouch interface, tweak some styles and add t-shirt icon.

https://github.com/mozilla/mozillians/commit/e39892b49f46a803d593aad2c696184eaa857766
[Fix Bug 997451, Fix Bug 997400] Integrate interface for multiple vouches, and allow maximum 5 vouches.

https://github.com/mozilla/mozillians/commit/7cddc9df893e9e39c57597433cc49387daa9808a
[bug 997451] Simplify vouching view.

Comment 19

[Giorgos Logiotatidis [:giorgos]]

Minimum verification steps:
 1. Visit a profile of a voucher that can be vouched, i.e. user is not vouched by you and has less than 6 vouches
 2. You should see a vouch form

We have 2 kinds of forms:
 a. If user is unvouched
 b. If user is already vouched

a. When user is unvouched:
 1. Form should say "Is <name> a Mozillian? Let us know how he/she contributed."
 2. Following text should be included 

"""
Once vouched, they will be able to:

    View all profiles and join groups.
    Access special video content on Air Mozilla.
    Join the Mozilla Exchange Yammer network.
    Use other Mozilla apps as a vouched user.
"""


b. When user is vouched:
 1. Form should say "Do you know <name>? Let us know how he/she contributed."

In both cases:
 - description is required, 
 - markdown is allowed, text declares that and links to markdown documentation
 - "read more about vouching" link is available
 - Age warning is available "Only vouch for users who have made significant contributions and are at least 13 years old."
 - "Vouches cannot be edited or retracted." warning


Note that we don't have anymore special text when user has 1-2 vouches.

Comment 20

[Justin Crawford [:hoosteeno] [:jcrawford]]

Does the vouch interface include a link (for example, "learn more about vouching") to the FAQ described in bug 1011230? That FAQ is likely to provide substantial additional detail:

https://mozillians.etherpad.mozilla.org/API-vouch-FAQ-2014-05-19

Comment 21

[Justin Crawford [:hoosteeno] [:jcrawford]]

d'oh, sorry, comment 19 addressed my question in comment 20. please disregard comment 20.

Comment 22

[Giorgos Logiotatidis [:giorgos]]

Verified on stage following steps in comment 19