normandy
normandy copied to clipboard
mozilla
More customizable Heartbeat prompt
Original bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1294504
S&I wants to expand the capabilities of the show-heartbeat action:
- The icon should be customizable from a set of defaults.
- The engagement button option should allow for multiple buttons, each with separate URLs and thank-you messages.
- There's interest in adding different ways for users to respond besides buttons and stars, such as Likert scales.
This is a fantastic list.
Do we need to talk about height of notification box / wrapping or other horrible topics? RTL langs?
Claim: we DON'T need to embed images in the box, other than the icon?
I talked to Matt more about this yesterday. I really like the list so far.
I'd add that I (and I've gotten a little feedback in our surveys from users about this) think that the transition between heartbeat and engagement URL can be a bit jarring. I'd appreciate a UX person thinking about the best way to make that transition expected, but here's one idea:
- User is presented with opinion prompt (Likert, Heartbeat, etc)
- User answers the question (and likely doesn't have expectations that they are about to be taken to a follow up)
- [New] Heartbeat offers follow up text/actions instead of an engagement message. I'm thinking that this will generally be: "Would you like to tell us more" "Yes" "No", but alternative options may be "Would you like to sign up to our mailing list" "Yes" "No" and other use cases targeted at the subgroups that we want to get into various funnels.
Essentially making Heartbeat interaction 2 stages (not N stages like some previous discussions) would be ideal to make sure the user knows what's happening.
This is a fantastic list.
Do we need to talk about height of notification box / wrapping or other horrible topics? RTL langs?
I think the height is going to have to be a little taller for likert scales, and we'll probably want to test wrapping for very long strings. An RTL boolean option is probably good too.
Claim: we DON'T need to embed images in the box, other than the icon?
Agreed.
Essentially making Heartbeat interaction 2 stages (not N stages like some previous discussions) would be ideal to make sure the user knows what's happening.
That's a rather heavy suggestion, but I agree that a UX pass that considers this question among others explicitly is worth doing.
So the finalized list of changes we want:
- The icon should be customizable from a set of defaults.
- The engagement button option should allow for multiple buttons, each with separate URLs and thank-you messages.
- The number of rating stars should be customizeable, rather than limited to 5.
- We should add Likert scales as a third type of available prompt, with a customizable number of choices, and labels for each.
- There should be an option to align the prompt for RTL locales.
@gregglind @rayborn How does the list above look? I think it's a good chunk of work that we can expand upon later if we have more needs. Also, if ya'll could come up with a list of 4-6 icons you'll want to be available for Heartbeat prompts, that'd be very useful.
@MattGrimes I suspect we'll want to find a UX / design person to help design the new prompt, and meet with them to talk about the goal. @clouserw says that Sevaan worked on the Heartbeat-like prompt for Test Pilot, so maybe he might be a good person to reach out to for this? Should we set up a meeting or something?
Sevaan did the original Heartbeat icon as well. I think he's a great choice. Let's pull him in. Want me to set that up or will you?
Sevaan did the original Heartbeat icon as well. I think he's a great choice. Let's pull him in. Want me to set that up or will you?
I'll reach out to Sevaan.
Hi all,
I've put together some specs based off of what I read on this thread, plus some other ideas. Maybe this can inform our meeting on Wednesday.
https://mozilla.invisionapp.com/share/7Q9IJMDSN
There are 6 screens.
Other things:
- Consider 'desktop notifications' as a possible vector as well.
On Mon, Nov 28, 2016 at 9:30 PM, Sevaan Franks [email protected] wrote:
Hi all,
I've put together some specs based off of what I read on this thread, plus some other ideas. Maybe this can inform our meeting on Wednesday.
https://mozilla.invisionapp.com/share/7Q9IJMDSN
There are 6 screens.
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mozilla/normandy/issues/331#issuecomment-263466700, or mute the thread https://github.com/notifications/unsubscribe-auth/AAKAj3pqGBysk75INsVbSMnFdw4zypyPks5rC5w5gaJpZM4Kx220 .
Hi all,
I've made the changes to the Heartbeat prompts we discussed:
- Added details on colour of elements when clicking
- Added multi-line text example
- Added tool-tip hover over scales
- Included bar height in spec
Qs:
- Did I capture all the changes we discussed?
- I've kept the tool-tip hover pretty lightweight and minimal. So you think using system-styled tooltips like this will work for the needs of Likert scales?
You can view and comment on updated UX here (keyboard through to see all slides): https://mozilla.invisionapp.com/share/DN9J815MY
Those look great. Are you saying that the text for individual items in a likert scale would display text on the hover over?
We normally use scales similar to this: http://templatelab.com/wp-content/uploads/2015/11/Likert-Scale-22.jpg
As opposed to numeric scales
Ah, I knew I was missing a big chunk here and that scale is it. Will think about this and post an update.
Sweet. Thanks for the quick turnaround. Is there a way to put the text above/below the radio buttons? I'm concerned people might tick the wrong one by mistake. It might not be possible with the space we have to work with though.
I played around with some options along those lines but felt they didn't look/feel right. Maybe you feel differently: http://i.sevaan.com/1H1j2C1O0y05
My concern with the second option with the labels above is there is no room for two lines of text, and it could start to feel weird with potentially long strings when localized.
The third option is definitely one to consider. I can include it in the spec. The height feels a little odd, but maybe it doesn't matter.
Another possibility could be to not use a notification bar, and create a custom doorhanger that gives us more space to play with. I recall there being some tests of the efficacy of these mechanisms that may be worth digging up again.
Quick idea: Regarding option 1, maybe it will be clearer to users which button to select if a colon is after the label?
To be filed under "we're clearly hitting the limits of a notification bar, but let's keep going and see what happens", what if the bar expanded on hover to show the choices? Have a "Hover to answer" message in smaller text after the question, or an arrow indicating the expansion or something.
I think if a person is engaged enough to hover to answer, it might as well be a click to launch the question in a new active tab.
Hmm. I think we'd lose people if it opened up a new tab. I like 2, but I see your concern about string length. I think 3 is a fine option as well. Alternatively, we could just use 7 buttons with these labels and skip radio buttons. I'm sure @rjweiss has insights into what issues that might generate. Rebecca?