Design for Campaign: pages

List overview All Threads
Download

newer

older

Wikidata paper cuts

Making inter-language links shorter

Yuvi Panda

27 Aug 2013 27 Aug '13

12:10 p.m.

Hello! As the final part of the implementation of Campaigns (see: https://www.mediawiki.org/wiki/User:Yuvipanda/Campaigns_namespace_proposal), I've drawn a small wireframe that seems to meet general approval of the few people I've shown it to so far: https://www.mediawiki.org/wiki/File:Campaign_page_wireframe.png The idea is that if you go to a page like http://commons.wikimedia.org/wiki/Campaign:Wikimania2013, you will see the page as in the mockup, rather than what you see now (which is quite useless for anyone who isn't an organizer) Thoughts? -- Yuvi Panda T http://yuvi.in/blog

Show replies by date

Jared Zimmerman

27 Aug 27 Aug

1:53 p.m.

Hi Yuvi, Thanks for taking the lead on this, at the moment my team is very busy with Flow, VE, and Mobile, it might be good to have a short meeting with a few of them during the tech days proceeding the all hands for a concentrated burst of design thinking about campaigns. * * * * *Jared Zimmerman * \\ Director of User Experience \\ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmerman<https://twitter.com/JaredZimmerman> On Tue, Aug 27, 2013 at 12:10 PM, Yuvi Panda <yuvipanda(a)gmail.com> wrote:

...

Hello! As the final part of the implementation of Campaigns (see: https://www.mediawiki.org/wiki/User:Yuvipanda/Campaigns_namespace_proposal ), I've drawn a small wireframe that seems to meet general approval of the few people I've shown it to so far: https://www.mediawiki.org/wiki/File:Campaign_page_wireframe.png The idea is that if you go to a page like http://commons.wikimedia.org/wiki/Campaign:Wikimania2013, you will see the page as in the mockup, rather than what you see now (which is quite useless for anyone who isn't an organizer) Thoughts? -- Yuvi Panda T http://yuvi.in/blog _______________________________________________ Design mailing list Design(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design

Yuvi Panda

2:48 p.m.

On Wed, Aug 28, 2013 at 2:23 AM, Jared Zimmerman < jared.zimmerman(a)wikimedia.org> wrote:

...

Hmm, I was hoping to get this done to a point where I can show it off during the Tech Days, actually. Most of the backend work required for this is done, and just this part remains. I have other work on my plate as well, so I could try delaying this - but will still work on getting some of this merged. Will keep the list updated as things go along! -- Yuvi Panda T http://yuvi.in/blog

Brandon Harris

2:53 p.m.

I think this looks like a great idea AS LONG AS you use comic sans EVERYWHERE. I also discovered that, even as +staff, I do not have the ability to edit in the Campaign namespace. On Aug 27, 2013, at 12:10 PM, Yuvi Panda <yuvipanda(a)gmail.com> wrote:

...

--- Brandon Harris, Senior Designer, Wikimedia Foundation Support Free Knowledge: http://wikimediafoundation.org/wiki/Donate

Yuvi Panda

2:55 p.m.

On Wed, Aug 28, 2013 at 3:23 AM, Brandon Harris <bharris(a)wikimedia.org> wrote:

...

I think this looks like a great idea AS LONG AS you use comic sans EVERYWHERE.

Sure, I hear it is great for dyslexic people :)

...

I also discovered that, even as +staff, I do not have the ability to edit in the Campaign namespace.

Hmm, it is a separate right, I will check if it isn't bundled into staff. -- Yuvi Panda T http://yuvi.in/blog

Yuvi Panda

3:34 p.m.

responding again... On Wed, Aug 28, 2013 at 3:23 AM, Brandon Harris <bharris(a)wikimedia.org> wrote:

...

I think this looks like a great idea AS LONG AS you use comic sans EVERYWHERE.

I just used Pencil[1], and it suggested using this (+ puke green!) for mockups to help people not get stuck up over small details, because wireframe.

...

I also discovered that, even as +staff, I do not have the ability to edit in the Campaign namespace.

Me and Jamesofur spent some time looking at this, and apparently it is not possible to easily add this right to the staff group. However, he's added the right to your user account on both commons and testwiki, so everything should be okay for now :) -- Yuvi Panda T http://yuvi.in/blog

Yuvi Panda

8:03 p.m.

Brion Vibber

28 Aug 28 Aug

8:42 a.m.

Added a couple brief notes on gerrit. -- brion On Tue, Aug 27, 2013 at 8:03 PM, Yuvi Panda <yuvipanda(a)gmail.com> wrote:

...

There's now a patchset implementing this: https://gerrit.wikimedia.org/r/#/c/81453/ Needs a lot of improvement before it can be merged. Will put it up on some labs instance at some point, though :) Still hoping to get this merged in a week or so. -- Yuvi Panda T http://yuvi.in/blog _______________________________________________ Design mailing list Design(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design

Brion Vibber

8:49 a.m.

On Wed, Aug 28, 2013 at 8:42 AM, Brion Vibber <bvibber(a)wikimedia.org> wrote:

...

Added a couple brief notes on gerrit.

To separate out the design comments with the implementation issues.... here's the design notes :) - portrait-mode images appear really small and their titles get squished in the gallery - there's no link back to the campaign page when you're done uploading - when there are no images, something should be shown like 'no media uploaded for this campaign yet! will you be the first?' call to action :D Portrait issue is with the separately-implemented gallery code, so that needs some thinking but shouldn't block this patch so far. Link back.... would be easier after a major overhaul of UploadWizard's UI. :) Showing something clearer when there's no images is actionable. -- brion

...

-- brion On Tue, Aug 27, 2013 at 8:03 PM, Yuvi Panda <yuvipanda(a)gmail.com> wrote:

Yuvi Panda

9:36 p.m.

The current state of the patch can be seen at: http://blue-dragon.wmflabs.org/wiki/Campaign:show-off-campaigns I'll keep that labs instance up to date with the patch as it moves forward. -- Yuvi Panda T http://yuvi.in/blog

Steven Walling

10:42 p.m.

On Wed, Aug 28, 2013 at 9:36 PM, Yuvi Panda <yuvipanda(a)gmail.com> wrote:

...

The current state of the patch can be seen at: http://blue-dragon.wmflabs.org/wiki/Campaign:show-off-campaigns I'll keep that labs instance up to date with the patch as it moves forward

I'd suggest putting some more space around the Upload call to action and try to emphasize it some more, but otherwise this is great stuff. Honestly all Commons Category pages should look this way. -- Steven Walling https://wikimediafoundation.org/

Yuvi Panda

29 Aug 29 Aug

7:45 a.m.

On Thu, Aug 29, 2013 at 11:12 AM, Steven Walling <swalling(a)wikimedia.org> wrote:

...

I'd suggest putting some more space around the Upload call to action and try to emphasize it some more, but otherwise this is great stuff.

Yeah, I definitely want to emphasize it a lot more. Will play around with it some more :)

...

Honestly all Commons Category pages should look this way.

If bawolff has his way, this might be reality soon :) -- Yuvi Panda T http://yuvi.in/blog

Prateek Saxena

30 Aug 30 Aug

8:34 a.m.

Hey Yuvi,

...

As the final part of the implementation of Campaigns (see: https://www.mediawiki.org/wiki/User:Yuvipanda/Campaigns_namespace_proposal), I've drawn a small wireframe that seems to meet general approval of the few people I've shown it to so far: https://www.mediawiki.org/wiki/File:Campaign_page_wireframe.png

I used your wireframe and https://www.mediawiki.org/wiki/User:Yuvipanda/Campaigns_namespace_proposal as a starting point. The images on top aren't solving any purpose as there *will* be more images on bottom. It was also looking pretty messy as you had warned me on IRC. Can the thumbnails at the bottom be sorted on the basis of popularity/votes? You mention in the proposal that the page is meant to give an overview of the campaign. I thought mentioning some important stats might help. Check out the mock up that I've made - http://f.cl.ly/items/1U240I3O2O0J3J3u431P/campaigns.png - please ignore the typefaces and their anti-aliasing (or lack of it). What do you think? Regards, Prateek Saxena http://prtksxna.com

Brion Vibber

8:42 a.m.

On Fri, Aug 30, 2013 at 8:34 AM, Prateek Saxena <prtksxna(a)gmail.com> wrote:

...

I like the idea of a rating-based or views-based display, but we'd have to devise something... currently no voting system in place. :)

...

You mention in the proposal that the page is meant to give an overview of the campaign. I thought mentioning some important stats might help. Check out the mock up that I've made - http://f.cl.ly/items/1U240I3O2O0J3J3u431P/campaigns.png - please ignore the typefaces and their anti-aliasing (or lack of it). What do you think?

I like the giant numbers. :) Oh while we're thinking of it -- we should also make sure we have a good display on mobile web. We should probably think about alternate sizing/positioning for small-screen display... -- brion

Prateek Saxena

8:49 a.m.

On Fri, Aug 30, 2013 at 9:12 PM, Brion Vibber <bvibber(a)wikimedia.org> wrote:

...

I like the idea of a rating-based or views-based display, but we'd have to devise something... currently no voting system in place. :)

Hm. I think Yuvi is planning to do it. He did mention something while we were discussing the Android application.

...

I like the giant numbers. :)

Yay! Me too :)

...

Oh while we're thinking of it -- we should also make sure we have a good display on mobile web. We should probably think about alternate sizing/positioning for small-screen display...

If we go ahead with this, I could mock-up some HTML/CSS that'll be responsive. Is the gallery part already responsive? Regards, Prateek Saxena http://prtksxna.com

Prateek Saxena

10:49 a.m.

After the discussion on #wikimedia-dev it seems that putting the call to action along with the gallery might be a little tricky. We could do something like this - http://f.cl.ly/items/0B2l2I2K1L0W161k1V3Q/campaigns-2.png - but I'd like to think about it a bit more :) Regards, Prateek

Quiddity

2:42 p.m.

On 13-08-30 08:49 AM, Prateek Saxena wrote:

...

On Fri, Aug 30, 2013 at 9:12 PM, Brion Vibber <bvibber(a)wikimedia.org> wrote: > I like the idea of a rating-based or views-based display, but we'd have to > devise something... currently no voting system in place. :)

...

Hm. I think Yuvi is planning to do it. He did mention something while we were discussing the Android application.

The Multimedia team has been brainstorming a feature like this, see https://www.mediawiki.org/wiki/Multimedia/Feature_ideas#File_feedback https://www.mediawiki.org/wiki/Multimedia/File_feedback https://meta.wikimedia.org/wiki/Roundtables/Roundtable_2#File_feedback and contact them with any ideas. (also the new-but-quiet https://lists.wikimedia.org/mailman/listinfo/multimedia

Yuvi Panda

2:51 p.m.

Thanks for the mockups, Pratheek! They are far better than what I came up with :D And they're now implemented! http://blue-dragon.wmflabs.org/wiki/Campaign:show-off-campaigns is the latest revision of the patch, and implements the second mockup. It is missing the 'Contributors' number because I've not found a way to extract that in a performant way (Yet!). I'm currently trying to implement proper squid cache handling, and will look at extracting Contributiors numbers after that. Thank you! -- Yuvi Panda T http://yuvi.in/blog

Brion Vibber

3:04 p.m.

Just a note -- we've had some friction with some of the folks maintaining the WLM campaigns about this planned UI change; it's taken a while to figure out exactly what they want, but I think we're figuring it out. :) It sounds like we may need to devise a Special: page with an administrator-oriented interface to make sure campaign administrators are happy and productive as well as the user-contributors we're aiming for with this UI on the actual Campaign: pages. I'll send some mockups and ask for comments once I have a better idea of the requirements -- we can probably get away with something relatively simple that uses the JSON-table-structure pretty printer and lets you quickly switch and compare items. -- brion On Fri, Aug 30, 2013 at 2:51 PM, Yuvi Panda <yuvipanda(a)gmail.com> wrote:

...

Yuvi Panda

6:37 p.m.

Update: I think the caching issues have been resolved, and I also managed to implement the 'Contributors' count. This patch is pretty much ready for final CR / testing / merging, I'd like to think! Thanks to everyone who helped out! \o/ (http://blue-dragon.wmflabs.org/wiki/Campaign:show-off-campaigns is the link) -- Yuvi Panda T http://yuvi.in/blog

Prateek Saxena

10:49 p.m.

On Sat, Aug 31, 2013 at 3:21 AM, Yuvi Panda <yuvipanda(a)gmail.com> wrote:

...

Thanks for the mockups, Pratheek! They are far better than what I came up with :D

You're welcome :)

...

And they're now implemented! http://blue-dragon.wmflabs.org/wiki/Campaign:show-off-campaigns is the latest revision of the patch, and implements the second mockup.

Looks great! :D There are a couple of things that did catch my eye. Can you please make the `letter-spacing` of `mw-campaign-number-desc` around 1px? Also, do you think it'll be possible to make the the "View all Images" link like I have made in the mockup? Regards, Prateek Saxena http://prtksxna.com

Yuvi Panda

31 Aug 31 Aug

5:35 a.m.

On Sat, Aug 31, 2013 at 11:19 AM, Prateek Saxena <prtksxna(a)gmail.com> wrote:

...

Will change letter-spacing. And for 'view all images' - can you send me the icons you used for the chevrons that point downwards? Thanks! -- Yuvi Panda T http://yuvi.in/blog

Prateek Saxena

5:42 a.m.

On Sat, Aug 31, 2013 at 6:05 PM, Yuvi Panda <yuvipanda(a)gmail.com> wrote:

...

Will change letter-spacing. And for 'view all images' - can you send me the icons you used for the chevrons that point downwards? Thanks!

Cool. You can get the icon from here - http://f.cl.ly/items/0C2l0X0n0T201s1c0W3G/arrow.png I think you'll be able to get the needed colors using the 'Digital Color Meter', if they still ship it with Mountain Lion. Regards, Prateek Saxena http://prtksxna.com

Yuvi Panda

6:50 a.m.

On Sat, Aug 31, 2013 at 6:12 PM, Prateek Saxena <prtksxna(a)gmail.com> wrote:

...

Thank you! I've updated both the spacing and the view all link, and deployed to http://blue-dragon.wmflabs.org/wiki/Campaign:show-off-campaigns. I've also added a slightly more straightforward workflow for logged out users - directly taking them to create account rather than having them click on upload and then have it say 'you need to log in!'. I would want to put a log in link there too, perhaps - thoughts on where to put that welcome! :) -- Yuvi Panda T http://yuvi.in/blog

Yuvi Panda

9 Sep 9 Sep

2:09 p.m.

This was deployed! https://commons.wikimedia.org/wiki/Campaign:wlm-in \o/ :) (No 'title' and 'description' added yet for the campaign, but I guess someone will, at some point) -- Yuvi Panda T http://yuvi.in/blog

Steven Walling

2:13 p.m.

On Mon, Sep 9, 2013 at 2:09 PM, Yuvi Panda <yuvipanda(a)gmail.com> wrote:

...

https://commons.wikimedia.org/wiki/Campaign:wlm-in \o/ :) (No 'title' and 'description' added yet for the campaign, but I guess someone will, at some point)

Nice work Yuvi and all. :) -- Steven Walling https://wikimediafoundation.org/

Erik Moeller

2:15 p.m.

Very cool! Does the campaign format support human-readable names for the campaigns? That'd be nicer than something like "wlm-in". -- Erik Möller VP of Engineering and Product Development, Wikimedia Foundation

Yuvi Panda

2:20 p.m.

On Mon, Sep 9, 2013 at 2:15 PM, Erik Moeller <erik(a)wikimedia.org> wrote:

...

Very cool! Does the campaign format support human-readable names for the campaigns? That'd be nicer than something like "wlm-in".

Tomasz Finc

2:22 p.m.

Got a build i can play with ? On Mon, Sep 9, 2013 at 2:20 PM, Yuvi Panda <yuvipanda(a)gmail.com> wrote:

...

On Mon, Sep 9, 2013 at 2:15 PM, Erik Moeller <erik(a)wikimedia.org> wrote:

Very cool! Does the campaign format support human-readable names for the campaigns? That'd be nicer than something like "wlm-in".

It does! You can add a localizable title and description ("title" and "description" fields in the JSON). I'm afraid to touch it myself, mostly because I don't trust myself to come up with good enough descriptions :) I'm adding titles now, though. -- Yuvi Panda T http://yuvi.in/blog _______________________________________________ Design mailing list Design(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design

Jan Ainali

2:24 p.m.

2013/9/9 Yuvi Panda <yuvipanda(a)gmail.com>

...

Where can I add the title and description (or suggest the change if I don't have the rights)?

Yuvi Panda

2:37 p.m.

On Mon, Sep 9, 2013 at 2:24 PM, Jan Ainali <jan.ainali(a)wikimedia.se> wrote:

...

Where can I add the title and description (or suggest the change if I don't have the rights)?

https://commons.wikimedia.org/w/index.php?title=Campaign%3Awlm-in&diff=… was me adding the title to the India campaign. Right now you need to be an admin on commons to edit that page. Don't touch the other properties, though :) -- Yuvi Panda T http://yuvi.in/blog

Erik Moeller

2:46 p.m.

Cool, awesome to see that we can already do proper titles. If it's not too tricky it might be nice to inject that into the <title> tag as well so the browser tab shows something more friendly than the campaign ID. -- Erik Möller VP of Engineering and Product Development, Wikimedia Foundation

Yuvi Panda

3:03 p.m.

On Mon, Sep 9, 2013 at 2:46 PM, Erik Moeller <erik(a)wikimedia.org> wrote:

...

If it's not too tricky it might be nice to inject that into the <title> tag as well so the browser tab shows something more friendly than the campaign ID.

Done! https://gerrit.wikimedia.org/r/#/c/83568/ -- Yuvi Panda T http://yuvi.in/blog

Jean-Frédéric

3:44 p.m.

Awesome Yuvi! Thanks a lot. It does! You can add a localizable title and description ("title" and

...

"description" fields in the JSON).

Just to make sure : you mean by that since wikitext is parsed, we can use every bit of template magic we want, right? (Like, no special system I may have missed) (All folks : don’t forget to get the messages translated on TranslateWiki! [1]) Where can I add the title and description (or suggest the change if I don't

...

have the rights)?

I put a title for Sweden using some template magic [2]. Feel free to ask for edits on the talk page (you can use {{edit request}} to draw sysop attention) [1] < https://translatewiki.net/w/i.php?title=Special:Translate&group=ext-upl…

...

[2] < https://commons.wikimedia.org/w/index.php?title=Campaign%3Awlm-se-bbr&d…

...

-- Jean-Frédéric

Yuvi Panda

3:46 p.m.

On Mon, Sep 9, 2013 at 3:44 PM, Jean-Frédéric <jeanfrederic.wiki(a)gmail.com> wrote:

...

Just to make sure : you mean by that since wikitext is parsed, we can use every bit of template magic we want, right? (Like, no special system I may have missed)

Indeed! It is just plain Wikitext. Nothing more. Thanks for setting up i18n! That is awesome! :) Should probably also set one up for description. -- Yuvi Panda T http://yuvi.in/blog

Prateek Saxena

8:21 p.m.

Looks great! The design has come out spot on :D

3879

days inactive

3893

days old

design@lists.wikimedia.org

Manage subscription

35 comments

11 participants

tags (0)

participants (11)

Brandon Harris
Brion Vibber
Erik Moeller
Jan Ainali
Jared Zimmerman
Jean-Frédéric
Prateek Saxena
Quiddity
Steven Walling
Tomasz Finc
Yuvi Panda