Page MenuHomePhabricator

Improve positioning of CookieWarning on mobile
Closed, ResolvedPublic

Assigned To
Authored By
Jdlrobson
Sep 19 2016, 7:13 PM
Referenced Files
F5272977: pasted_file
Jan 11 2017, 10:44 PM
F5272979: pasted_file
Jan 11 2017, 10:44 PM
F5272973: pasted_file
Jan 11 2017, 10:44 PM
F4696361: pasted_file
Nov 4 2016, 5:31 PM
F4696287: pasted_file
Nov 4 2016, 4:46 PM
F4684947: pasted_file
Nov 1 2016, 4:29 PM
F4514881: cookie.png
Sep 22 2016, 10:29 PM
F4487275: Screen Shot 2016-09-19 at 12.10.47 PM.png
Sep 19 2016, 7:13 PM

Description

The existing warning message covers the main UI menu of the mobile skin. This is problematic if there is an issue with dismissing the warning.

We have similar issues with CentralNotice so I'd suggest @Nirzar chimes in on how we might display this in a less obtrusive way.

Screen Shot 2016-09-19 at 12.10.47 PM.png (656×410 px, 105 KB)

Event Timeline

Jdlrobson renamed this task from Improve display of CookieWarning on mobile to Improve positioning of CookieWarning on mobile.Sep 19 2016, 8:54 PM
Jdlrobson added a project: Web-Team-Backlog.
ovasileva triaged this task as Medium priority.Sep 21 2016, 4:33 PM

Hey @Jdlrobson how are you doing it to see that message? I use the site in Europe and I've never seen that dialog :S

@Jhernandez it's not deployed this. @Florian do you know when are we looking to deploy this to give a sense of when Nirzar needs to provide this input by?

Here's a mockup for this message and the improvements are listed.

cookie.png (1×1 px, 244 KB)

here's zeplin spec: https://zpl.io/1OYjwB with assets in it

  • i used the word this website because I''m guessing wikipedia is specific for one wiki
  • the button is from oojs ui UI-Standardization

@Jdlrobson I'm not sure, if this is ever being deployed to any wmf-wiki, at least I'm not aware of planned deployments.

@Nirzar Thanks for the example! You shouldn't forget the "More information" button, which can be configured in the CookieWarning extension :)

Btw.: Is there a way to use zeplin without the need to register an account (which I don't want to do :P)?

As far as i know, the legal requirement is informing users, a "more info" link would be optional. ping Legal maybe? as part of transparency we can provide that but i doubt the usefulness to non tech savvy readers (majority) but it will add more weight for sure.

thoughts?

Btw.: Is there a way to use zeplin without the need to register an account (which I don't want to do :P)?

I'm afraid not :( any particular reason not to sign up? not good privacy policy?
I actually wanted to add you to the zeplin boards in general. so you will have access to all designs.

As far as i know, the legal requirement is informing users, a "more info" link would be optional. ping Legal maybe? as part of transparency we can provide that but i doubt the usefulness to non tech savvy readers (majority) but it will add more weight for sure.

thoughts?

As far as I know, you're right (however, I'm not a specialist in these legal problems :P). But, the extension provides a way to add a more information link, so it should at least shouldn't look too crappy :D

Btw.: Is there a way to use zeplin without the need to register an account (which I don't want to do :P)?

I'm afraid not :( any particular reason not to sign up? not good privacy policy?
I actually wanted to add you to the zeplin boards in general. so you will have access to all designs.

I, in general, don't see the point to register an account, if I "just" want to access the information, without changing it :) However, as far as the image shows anything I need, anything is fine with me, without accessing zeplin directly.

want to access the information, without changing it

you can actually comment and reply on zeplin. i think that's where identity comes in. but let check with them if they have public boards.

Ok, no response so far, so I registered, but:

You’re not invited to this project

... :( :(

@Florian I will need your email address. so i can add you on the project. unfortunately it's not public by default. but i try to add everyone interested so they can have access.

you can send your email address to "npangarkar@wikimedia.org"

also thank you for your patience :)

Ok, got access.

@Nirzar: What do you think: Is something like "Click here for more information" an appropriate thing (clicking on the whole box sends to the information box)?

@Florian I updated the design in zeplin. it has a know more link within the message.
it's small i believe but this goes on top of everything so every pixel counts.

pasted_file (122×406 px, 16 KB)

Ok, that looks good. I'll see, if the image will be in my change, as I'm not sure, if I really like it or not :P

Thanks @Nirzar for taking the time to create the mockup! :)

I don't think, that the image is really needed:

pasted_file (156×434 px, 15 KB)

However, I think the intention is, that users are more open to visual things than textual. But is this really needed here? :D

Change 319890 had a related patch set uploaded (by Florianschmidtwelzow):
Redesign mobile CookieWarning banner

https://gerrit.wikimedia.org/r/319890

This message is targeted towards a particular set of people who are used to getting the cookie message on each website. the problem is. we need to distinguish between any message vs cookie message. I was in europe for a while and i kept getting messages from website telling me about cookies which is a legal requirement. and i had to read through it a every time because eveyerone has their own cookie message. but one website had a cookie image on it.. literally image of a cookie.. knowing it was _that_ message was really helpful. for a user, who knows what this is and is okay with it... we need a quick decision maker.

Ok, that's a good point! I think, keeping this in mind, it's worth adding an image :)

Because of the use of the Unicode cookie icon, I haven't used the gra background:

pasted_file (134×442 px, 11 KB)

Thanks @Nirzar for your help! Here're the results on different screens:

pasted_file (753×482 px, 77 KB)

pasted_file (767×1 px, 84 KB)

and finally desktop in mobile mode:

pasted_file (720×1 px, 94 KB)

Change 319890 merged by jenkins-bot:
Redesign mobile CookieWarning banner

https://gerrit.wikimedia.org/r/319890

@Florian :) the message looks good.. is serif font your local setting?

Oh damn! Thanks for spotting, it should be the same font as the page, I'll fix this in this change:
https://gerrit.wikimedia.org/r/#/c/331812/

Looks resolved to me?

Oh, yes, sorry for forgetting and thanks for closing! :)