gmane.org.wikimedia.commons

Re: [Design] Redesigning the tag.

Daniel Mietchen — 2013-06-14T08:57:45

I just tested the new environment with multimedia files - not a good match:
http://tools.wmflabs.org/bawolff/gallery/index.php?title=Featured_pictures/Non-photographic_media#Video_and_audio
.

Daniel

On Fri, Jun 14, 2013 at 6:02 AM, bawolff <bawolff+wn< at >gmail.com> wrote:

_______________________________________________
Commons-l mailing list
Commons-l< at >lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/commons-l

Re: [Design] Redesigning the tag.

bawolff — 2013-06-14T04:02:04


So I've tweaked the demo a little bit in response to feedback:
*If you're on a touchscreen, it will always show the caption instead
of hover. Screen readers should also always see the caption, and if an
image receives focus, its caption becomes visible.
**Nonetheless, hover seems to be a sticking point, so I have a bunch
of non-hover variations at
http://tools.wmflabs.org/bawolff/gallery/index.php?title=Main_Page
(May have to scroll)
*Javascript now justifies the images. (The page is loaded with 1.5x
the normal resolution images, and the <img> tag is manipulated to try
and fill everything up, up to a maximum of 1.5x the original size. The
last row is left as is, since its often a single image [Although as I
write this, I think it should be manipulated too, might as well make
it 1.5x]). As an aside, I found out that if I do text-align: justify,
the browser will adjust the whitespace between images to justify it.
However I think it looks better with the last row centred and
typically adjusting the image size

Re: [Design] Redesigning the tag.

Daniel Schwen — 2013-06-12T19:41:07

Except the new galaxy.. ;-)


I'd keep aspect ratio constant, but play with the height a bit. This
would make the gallery height setting a rough target value, rather
than an absolute.

_______________________________________________
Commons-l mailing list
Commons-l< at >lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/commons-l

Re: [Design] Redesigning the tag.

Brion Vibber — 2013-06-12T14:22:30


I like the overall look, couple notes:
* Think about tablet and mobile views -- galleries are even awfuller on
mobile right now than on desktop. This means a) consider touchscreens and
b) consider small screens.
* I'm not sold on "show title on hover". Touchscreens don't do hover...
* Ragged edges can be fixed by adjusting spacing or aspect ratio a little,
like justifying text. This would look awesome. :)
* We need to fix what happens when clicking the items -- should get a nice
zoomed lightbox or something. This should be shared with non-gallery media
however, so can be outside this present scope.

Another related thing to consider is Category page gallery displays...
having a gallery-style display for contained media is relatively easy, but
how can we show subcategories nicely? What about non-visual media? Can we
display them better than we do now?

Re: Redesigning the tag.

bawolff — 2013-06-12T04:41:05

I've re-done the demo in a way hopefully more accessible to screen
readers (The caption text should be picked up by screen readers, even
if not visible.) Additionally the caption text should be visible when
tabbing through the page.


Yeah, I'm not sure which is better, to stuff the caption in an alt
attribute (where we'd have to strip out the complex formatting a
caption could have, and where the caption could potentially not even
describe the image), or making the caption part visible to the screen
reader but invisible to the user [Galleries support adding an alt
attribute, but almost nobody does]. So far I've opted for the latter,
but I'm certainly not an accessibility expert. (I had a little fun
though today playing with the orca screen reader and testing. All I
can say is that it must be an extremely frustrating experience to be
visually impaired)


One remaining issue is that the hover on captions thing is not very
effective with a touch screen...


Not sure what you mean? Same way they currently do w

Re: Redesigning the tag.

Ryan Kaldari — 2013-06-11T22:45:07

Personally, I would like to see an improved modular viewer for all types 
of media files. Right now we have a modular viewer for videos, but it 
would be a lot cooler if it included the attribution information (and 
possibly the licensing information) within the viewer itself (rather 
than only showing it after the video has played). If we had this sort of 
functionality for all types of media there would be less need to send 
people to Commons to see the file page (which is often confusing to people).

Ryan Kaldari

_______________________________________________
Commons-l mailing list
Commons-l< at >lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/commons-l

Re: Redesigning the tag.

Paul A. Houle — 2013-06-11T14:35:54

Is there some kind of CSS tag I can use to mark a caption as hidden on visual browsers but visible on screen readers?  

My experience with A/B testing is that visible captions badly hurt the viability of any commercial image site.  Layouts that break up the physical flow of the images seem to make many people feel mentally,  physically or emotionally uncomfortable.  (Most just leave)  This is why even Flickr has changed to a hidden caption format.

I,  for one,  liked the old Flickr better because it was faster,  for one thing.

Wikipedia Commons is an 800 pound gorilla,  not all the start-ups and conglomerates that are equally desperate to seduce the marginal user away from their competitors.  We can do something different.


From: Gnangarra 
Sent: Monday, June 10, 2013 10:31 PM
To: bawolff+wn-Re5JQEeQqe8AvxtiuMwx3w< at >public.gmane.org ; Wikimedia Commons Discussion List 
Cc: design-RusutVdil2icGmH+5r0DM0B+6BGkLq7r< at >public.gmane.org 
Subject: Re: [Commons-l] Redesigning the <gallery> tag.

Requiring a hoover t

Re: Redesigning the tag.

Daniel Mietchen — 2013-06-11T11:53:37

My quibble with galleries as they are now is that, for audio and video
files, they make it hard to get to the respective file pages on
Commons. If hovering
could help with that, I would welcome it.

I am doing a lot of demos of Commons functionalities to GLAMs, who are
very concerned about their materials being attributed properly
(which have been doing well so far) and about making it easy to get
from the page containing a particular file to the file description
page on
Commons (the latter part works fine for images but currently is too
complicated for audio and video files).

Is anyone working on that?

A sample gallery containing only audio and video files is at
http://outreach.wikimedia.org/wiki/GLAM/Newsletter/May_2013/Contents/Open_Access_report#Gallery
.

Cheers,

Daniel


On Tue, Jun 11, 2013 at 1:36 PM, Magnus Manske
<magnusmanske< at >googlemail.com> wrote:

_______________________________________________
Commons-l mailing list
Commons-l< at >lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/c

Re: Redesigning the tag.

Magnus Manske — 2013-06-11T11:36:16

OK, should be fixed now.


On Tue, Jun 11, 2013 at 12:03 PM, Andrea Zanni <zanni.andrea84-Re5JQEeQqe8AvxtiuMwx3w< at >public.gmane.org>wrote:

_______________________________________________
Commons-l mailing list
Commons-l< at >lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/commons-l

Re: Redesigning the tag.

Andrea Zanni — 2013-06-11T11:03:49

In this page:
http://commons.wikimedia.org/wiki/Commons:Featured_pictures/Animals/Fish?withJS=MediaWiki:Newgallery.js
there is an image called *Dactylopterus
volitans<http://commons.wikimedia.org/wiki/Dactylopterus_volitans>
* (Flying gurnard)

It sort of "doubles" if you put the cursor on it. All other images on the
other hand just show their caption.

Aubrey
_______________________________________________
Commons-l mailing list
Commons-l< at >lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/commons-l

Re: Redesigning the tag.

Magnus Manske — 2013-06-11T10:46:24

Not quite sure what you mean. I don't see a POTY ribbon, either with or
without the JS.


On Tue, Jun 11, 2013 at 11:36 AM, Andrea Zanni <zanni.andrea84-Re5JQEeQqe8AvxtiuMwx3w< at >public.gmane.org>wrote:

_______________________________________________
Commons-l mailing list
Commons-l< at >lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/commons-l

Re: Redesigning the tag.

Andrea Zanni — 2013-06-11T10:36:07

Hi magnus,
in this page:
http://commons.wikimedia.org/wiki/Commons:Featured_pictures/Animals/Fish?withJS=MediaWiki:Newgallery.js
this image has a strange behaviour:

[image: POTY ribbon
2007.svg]<http://commons.wikimedia.org/wiki/File:POTY_ribbon_2007.svg>

(second row of the Bony fishes, first image)

Aubrey


On Tue, Jun 11, 2013 at 12:26 PM, Magnus Manske <magnusmanske-gM/Ye1E23mwN+BqQ9rBEUg< at >public.gmane.org

_______________________________________________
Commons-l mailing list
Commons-l< at >lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/commons-l

Re: Redesigning the tag.

Magnus Manske — 2013-06-11T10:26:21

Implementation in JavaScript:

http://commons.wikimedia.org/wiki/Commons:Featured_pictures/Animals/Fish?withJS=MediaWiki:Newgallery.js

Good:
* Works.

Bad:
* Needs to load thumbnails twice (for hi-res versions).
* Excessive API usage for getting hi-res thumbnails, but could be grouped
for multiple files per query (I'm just too lazy to implement now).
* Also too lazy to implement changing img title, but possible.

Feel free to improve!




On Tue, Jun 11, 2013 at 10:27 AM, Thomas Morton <
morton.thomas-gM/Ye1E23mwN+BqQ9rBEUg< at >public.gmane.org> wrote:

_______________________________________________
Commons-l mailing list
Commons-l< at >lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/commons-l

Re: Redesigning the tag.

Thomas Morton — 2013-06-11T09:27:24

These look fantastic! I think with hover over captions as optional it could
be a big hit.


On 11 June 2013 03:31, Gnangarra <gnangarra-Re5JQEeQqe8AvxtiuMwx3w< at >public.gmane.org> wrote:

Not if implemented properly. e.g. utilising the <img> tag's title/alt
attributes - in which case it's actually better than the current
implementation!

Tom
_______________________________________________
Commons-l mailing list
Commons-l< at >lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/commons-l

Re: Redesigning the tag.

Andrea Zanni — 2013-06-11T09:07:05

Bawolff, as a simple user I find your gallery very pretty and usable.
I think also that it's a good idea to look at sites that work (Flickr,
Pininterest, Google+, Tumblr),
especially if we want to be read, used and acctract contributors.

Aubrey


On Tue, Jun 11, 2013 at 4:31 AM, Gnangarra <gnangarra-Re5JQEeQqe8AvxtiuMwx3w< at >public.gmane.org> wrote:

_______________________________________________
Commons-l mailing list
Commons-l< at >lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/commons-l

Re: Redesigning the tag.

Gnangarra — 2013-06-11T02:31:23

Requiring a hoover to see a caption becomes an impediment to non sight
readers who rely on various readers.
This format is used on sites like Flickr, Pininterest, Google+ etc.. while
many user spend there time just scraping these sites do we really need to
look them
How does an editor decide what image sizes are,

IMHO rather than doing this to <gallery> tag something thats frowned upon
in GA, A class and FA processes on en.WP anyway this would be better
utilised within the category structure where the more important elements of
image size, and name could be displayed with the hover giving you linking
options.

On 11 June 2013 10:20, bawolff <bawolff+wn-Re5JQEeQqe8AvxtiuMwx3w< at >public.gmane.org> wrote:

Re: Redesigning the tag.

bawolff — 2013-06-11T02:20:06

That's how its currently implemented (with an attribute named mode). How it
all works (Or even if it gets adopted), will depend on the sort of feedback
I get.

You're 100% right, that this would not work well with the COM:QIC workflow,
and there are many places where the captions are important. But I would
argue there are many places where people just have captions as a place
holder text since there is a spot for a caption (Many [not all] galleries
on commons fit this description). In particular, the captions on the
auto-generated galleries in category listings are pretty useless, and could
easily be replaced with something triggered on hover.

Even in encyclopedic contexts, a gallery is used as a collection of pretty
pictures, and the caption is a sort of "see also" text to provide further
context for if one of the images catches the reader's eye.

--bawolff

On Mon, Jun 10, 2013 at 10:53 PM, Daniel Schwen <lists-SYvMc73jUx+zQB+pC5nmwQ< at >public.gmane.org> wrote:

______________________________________________

Re: Redesigning the tag.

Daniel Schwen — 2013-06-11T01:53:26

If this should find its way into core, it should be made optional
(using an attribute of <gallery>)! Please be aware that this would
instantly destroy gallery applications like COM:QIC. Also from a
usability standpoint hiding the captions is probably not always a good
thing. Especially in the context of an encyclopedia rather than a
"pretty picture" site (like flickr).
Daniel

On Mon, Jun 10, 2013 at 6:36 PM, bawolff <bawolff+wn< at >gmail.com> wrote:

_______________________________________________
Commons-l mailing list
Commons-l< at >lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/commons-l

Redesigning the tag.

bawolff — 2013-06-11T00:36:30

[Cross posting to commons-l and design list]

Hi all,

Over the last couple days, I've been looking at making our <gallery> tag a
lot more slick. Compared to other websites, our galleries look very "boxy"
imo. This isn't that bad when it comes to icon/clip art type media, but for
photos I feel we could really do better. So I've tried to make the
galleries be more compact, with rows of images all the same height but
different width, and the caption visible on hover. The only downside to
this is the borders of the gallery become a little ragged, which mostly
looks fine to me (Possibly could be dealt with with js. Would involve a bit
of double loading the images though).

A demo speaks louder than words, hence:

*
http://tools.wmflabs.org/bawolff/gallery/index.php?title=Featured_pictures/Non-photographic_media(contrast
with
http://commons.wikimedia.org/wiki/Commons:Featured_pictures/Non-photographic_media)
*
http://tools.wmflabs.org/bawolff/gallery/index.php?title=Featured_pictures/Animals/Fish(contrast
with
ht

Re: [Design] Flickr redesign

Federico Leva (Nemo — 2013-05-23T18:03:32

Steven Walling, 23/05/2013 19:48:

True. It wasn't there when I wrote my message (I found out reading some 
questions on flickr groups), it seems they also fixed some other bugs.
I'm glad that wasn't a design decision.


The flickr user I mentioned above was surely not a Wikimedia Commons 
user. :)

Nemo

_______________________________________________
Commons-l mailing list
Commons-l< at >lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/commons-l

Re: [Design] Flickr redesign

Steven Walling — 2013-05-23T17:48:52


That's not true. Advanced search is still available just below the search
box, every time you make a search. Cf. http://www.flickr.com/search/?q=dogs

They're probably doing this because they assume that you probably only need
advanced search if you didn't find what you wanted on regular search. Seems
like a pretty safe assumption from a UX perspetive. Obviously that doesn't
account for the use case of Commons people hunting for photos, but that's
hardly the majority of their users.