1020307 - create mockups for generic feedback with gradient sentiment

Status: RESOLVED WONTFIX

(Input Graveyard :: Submission, defect, P1)

Description

[Will Kahn-Greene [:willkg] ET needinfo? me]

We're switching from happy/sad to a 1-5 gradient.

We need to update the generic feedback form to use the gradient rather than the happy/sad.

Notes:

1. We're using faces to define the scale. The faces are in bug #985140.

2. For screens that are wide enough, we're going to show the faces horizontally.

      :(( :( :| :) :D

3. For screens that aren't wide enough, we'll show them vertically.

      :D
      :)
      :|
      :(
      :((

Comment 1

[Will Kahn-Greene [:willkg] ET needinfo? me]

Matt mentioned we're going to want to A/B test this, so we'll need the A/B infrastructure and some way of denoting which people did A or B.

Comment 2

[Will Kahn-Greene [:willkg] ET needinfo? me]

Bumping this to 2014q3.

Comment 3

[Will Kahn-Greene [:willkg] ET needinfo? me]

Making this a P2. This is important to do this quarter.

Comment 4

[Will Kahn-Greene [:willkg] ET needinfo? me]

Some clarifications:

1. The faces we're looking at are in bug #985140 and are these two specific attachments:

   * Horizontal layout: https://bugzilla.mozilla.org/attachment.cgi?id=8437985
   * Vertical layout: https://bugzilla.mozilla.org/attachment.cgi?id=8437987

2. We can do this in a couple of iterations--it doesn't have to be right the first time. We're expecting to have to spend some time doing some user testing.

3. Relevant files:

   * fjord/feedback/views.py, the generic_feedback_dev function
   * fjord/feedback/templates/feedback/generic_feedback_dev.html
   * fjord/feedback/static/css/generic_feedback_dev.less
   * fjord/feedback/static/js/generic_feedback_dev.js

4. To build a Fjord development environment, follow the Getting Started guide: http://fjord.readthedocs.org/en/latest/getting_started.html

5. After that, the url to access the generic feedback form dev view should be /en-US/feedback-dev/

If you have any problems, I can help. I'm willkg on IRC and I hang out on irc.mozilla.org in the #input channel (as well as other places).

Asking questions in the bug is probably better, though.

Comment 5

[Will Kahn-Greene [:willkg] ET needinfo? me]

Grabbing this one to work on now. Making it a 3 pointer, but I suspect it'll take me a while and require a few phases to implement.

Comment 6

[Will Kahn-Greene [:willkg] ET needinfo? me]

I'm reworking the generic form layout so it sucks less. Going to be mobile first with media query breakpoints at 768px and 1024px.

That just provides some context for this bug--if we need to do something different to lay things out correctly here, that's fine.

We're looking at supporting the following hardware "use cases":

1. desktop (landscape, > 900px width)
2. laptop (landscape, > 900px width)
3. tablet (landscape)
4. tablet (portrait)
5. low-end phone (portrait)

I was going to use my desktop and responsive mode to test 1 and 2, a Samsung Galaxy Tab 10.1 (1200x800) for 3 and 4 and a Samsung SGH-T599 (800x480) for 5. I think that'll cover everything "good enough" and we can iterate from there when issues come up.

Comment 7

[Will Kahn-Greene [:willkg] ET needinfo? me]

Things I need help with here (or will muddle through on my own):

1. figuring out how the rating smiley faces get laid out for those hardware scenarios

2. figuring out whether we're going to use a png sprite for the faces in which case we probably need a couple of sizes or whether we can use SVG

Comment 8

[Will Kahn-Greene [:willkg] ET needinfo? me]

Bug #1077423 covers restyling the generic feedback form. I want to do that work first with this bug in mind, then once that's done come back to this one.

Comment 9

[Will Kahn-Greene [:willkg] ET needinfo? me]

I finished restyling the form. Doing this should be a lot easier.

I really like Krystal's idea in bug #985140. I want to try variations of that layout.

https://bugzilla.mozilla.org/attachment.cgi?id=8512257

Having said that, I'm not going to get this done this quarter, so I'm going to push it off until next quarter.

Comment 10

[Will Kahn-Greene [:willkg] ET needinfo? me]

Changing this to a P1. It should get done asap.

Comment 11

[Will Kahn-Greene [:willkg] ET needinfo? me]

Reducing the scope of this bug a bit to cover creating mockups for the 1-5 gradient sentiment ui for the three view ports we support with the generic feedback form.

After we create the mockups, we should pass them around for commentary and make sure they're ok in regards to the following dimensions:

1. LTR vs. RTL
2. accessibility
3. appropriate language
4. faces are good shape and color

Bug #1128702 will cover taking those mockups and making the changes to the generic feedback form.

Comment 12

[Will Kahn-Greene [:willkg] ET needinfo? me]

We also need to figure out what to do with the description text which is one thing if you're submitting happy feedback and another if you're submitting sad feedback.

Comment 13

[Will Kahn-Greene [:willkg] ET needinfo? me]

Pushing this off indefinitely for now. See: https://bugzilla.mozilla.org/show_bug.cgi?id=985140#c36

Comment 14

[Will Kahn-Greene [:willkg] ET needinfo? me]

We haven't restarted this project, ergo I'm going to WONTFIX it.