Re: [GMG-Devel] [RFC] Content-centric theme for MediaGoblin

[Сергей Давыдов]

I've discussed the proposal with Jef in IRC and we've elaborated on
the proposal a bit more, here are the key points:

* The plan in my head is to have just two views:
    - overview / thumbnail view, e.g. as seen on this page:
http://gobblin.se/u/joar/collection/tears-of-steel/
    - and a view for individual works, a content-centric layout for
which I'm proposing.
Clicking an item in overview opens individual work view.

* Clicking "x" in the corner of individual work view returns you to
the overview from where you came, or to the primary collection the
work belongs to in case you followed a direct link. Kinda like a
lightbox.

* The controls (x, <, >) always stay in their place

* Level 2 metadata is basically everything that provides context for
the work. Licensing information is level 3, not level 2 metadata
because if I wanted a CC-licensed pic I'd have search for CC-licensed
works in the first place.

Another point which I probably didn't make clear enough is the
description pop-out. My problem with reading description in layout
like http://ubuntuone.com/45PO9TbwYO8xNgKNUea6Tb is that I have to
scroll down the page to read it and thus cut off a decent chunk of the
work itself.

I want to allow viewing author's description of the work and other
essential metadata without the context change and while still being
able to view as much of the actual work as possible.

So the regular view would look like this:
http://ubuntuone.com/17CNbwQZgUeovgVz3WvVQm
And like this after scrolling down the page:
http://ubuntuone.com/2f7BySU3ufkJtwTSKeAyeJ
(yes, the contrast changes are intentional and the contrast is
calculated according to
http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)

This is what I propose to do on hovering the description in regular
view: http://ubuntuone.com/6YbbDNfA4fxEGxI8fHLdP4
Or, on wide screens, perhaps something like this:
http://ubuntuone.com/6C62Rjsbs4Cz4lFXlYpduf

Here are the Inkscape SVG sources for the above mockups if anybody
wants to fiddle with them:
http://ubuntuone.com/52q27L6WQtfSXNRv0UhZA4
http://ubuntuone.com/10O0yRY4b1qfUMuqnHqs2Q
http://ubuntuone.com/5lZyrMGRXJJEdoRyzFQRhC
http://ubuntuone.com/3CE7ruLjvjmCy2mNDXfO2l

2013/4/23 Jef van Schendel <address@hidden>:
> What's this? Actual design discussion on the mailing list? How delightful.
> :)
>
> Really though, thanks for this, great stuff (and wow, that Google+ comment
> box is jarring!).
>
> Nice analysis of existing solutions! I totally agree with your evaluations,
> as well as the design goals you mentioned. I think we're all on the same
> page when it comes to those.
>
> I'm not sure I understand your proposal fully, for instance, what exactly is
> overlaid on what? Maybe a slightly higher fidelity mockup could help, or we
> could discuss it on IRC. That said, what I understand of it sounds like a
> good idea.
>
> I've actually got a branch floating somewhere that modifies MediaGoblin's
> layout so the image take up the full width of the column, pushing the
> metadata downwards. It wasn't implemented because of bandwidth
> considerations, among other things, but I really think that should not be an
> issue. We should be able to make it work.
>
> I really like the scrolling idea. The way you described it sounds very
> dynamic and JavaScript-y to me, which is not necessarily a bad thing, but it
> could also be done in a more subtle way. If we design it in such a way that
> the comments, for instance, stay "below the fold" of the page they would
> require scrolling to become visible. Something like that would be a very
> natural-feeling solution, I think.
>
> One of the tricky things we need to deal with is contrast, which is
> especially an issue for dark UI's and I'm guessing the reason some of the
> existing galleries have such dark backgrounds. But again, no reason we can't
> make this work.
>
> Let's keep talking about this!
>
> Jef
>
>
> 2013/4/21 Сергей Давыдов <address@hidden>
>>
>> Hello,
>>
>> I've noticed the MediaGoblin tour page
>> (http://mediagoblin.org/pages/tour.html) mentions that one of the
>> design goals is showing off the content without getting in the way.
>> This is something that resonates with me because, as a visual arts and
>> UX design enthusiast, I couldn't help but notice that it's a sore spot
>> of almost all web galleries out there. Pages made for the purpose of
>> showing off an individual creative work show anything but the actual
>> work, yet it's the creative work I care about the most as a viewer.
>>
>> To clarify, my priorities as a viewer are:
>> 1) The creative work itself.
>> This is what I opened the page for in the first place! I don't care
>> about the metadata or similar works yet, I want to see this one first,
>> in full. And after I see it, I'll probably want to have a look at...
>> 2) Author's comment on the work.
>> What it's supposed to be, what idea the author wanted to express with
>> it, etc. After I read it (and probably had another look at the work
>> itself), I may be interested in...
>> 3) Metadata.
>> A few elevated points aside (like licensing information or creation
>> date to put the work in perspective), metadata is tertiary. I only
>> will view it if I'm very, very interested in the work. And to decide
>> if I'm interested or not, I have to view items (1) and (2) first.
>>
>> I believe MediaGoblin could do better than other web galleries and
>> better than it does currently. I have a design proposal that would
>> (hopefully) perform better than any of that. I'll focus mostly on
>> images because that's the content type I deal with the most but all of
>> this is applicable to all other content types except audio.
>>
>> But before I propose anything, let's have a look at prior art:
>>
>> * Flickr individual view page (e.g.
>> http://www.flickr.com/photos/thomashawk/331999068/) is a disaster. The
>> actual image takes up roughly a quarter of screen size. To make things
>> worse, the solid white background makes dark images very hard to see.
>>     It does bring up a kinda content-centric view on extra click on
>> the image, the image still don't take up all the available screen
>> size; I have to make god-knows-how-many extra clicks to download the
>> picture - which is the only way to view it in full.
>>     In addition, the content-centric view doesn't let me view author's
>> comment, which robs work of its expressive quality. I have to go back
>> into the jarring white to read the description. Ewww.
>>
>> * DeviantART (e.g. http://fav.me/d5t0v47) does a better stab at
>> presenting content than Flickr. The picture takes up a decent amount
>> of screen space by default and enlarging it to your screen size is a
>> click away and doesn't require a huge context change. However, the
>> rather bright background ruins the immersion, especially in darker
>> pictures like http://fav.me/d606vsx
>>
>> * Google+ (e.g.
>>
>> https://plus.google.com/photos/+LinusTorvalds/albums/5862011644981926737/5862011647461363794)
>> does present the image on a dark background, but still ruins the
>> immersion with a _white_ comment box on the side, filled with opinions
>> of random strangers about the work. The box is so contrast and
>> distracting that I can hardly view the actual content! Another problem
>> is that metadata is hidden away in hardly discoverable sub-submenu.
>>     On the bright side (no pun intended), the zooming feature can be
>> applauded. Best zooming handling so far! The navigation buttons on the
>> side and the x for closing the individual view are also well-done.
>>
>> * Dropbox (screenshot:
>> http://pix.toile-libre.org/upload/original/1366327532.png) jumps
>> straight to the content-centric view because they have no metadata to
>> display. The solid #000000 background is too harsh for bright pics and
>> blurs the borders of really dark pics like mine. The controls are
>> reasonable.
>>     Dropbox fades out most controls if there's no mouse movement, to
>> this state: http://pix.toile-libre.org/upload/original/1366327792.png
>> Fading out essential controls like the close button completely doesn't
>> seem to be a good idea, but hiding the navigation buttons probably is.
>> The implications for tablet devices are complicated, I'll leave that
>> for another discussion.
>>
>> * Ubuntu One (screenshots:
>> http://pix.toile-libre.org/upload/original/1366327978.png,
>> http://pix.toile-libre.org/upload/original/1366327998.png) is similar
>> to Dropbox, but has a surprisingly decent design (although the bottom
>> left caption is misaligned since recently, which ruins it). It's UX
>> design which concerns us, so let's imagine it's in the bottom left
>> corner, where it should be.
>>     Then the image gets visually escalated due to the shadow around it
>> and darkish background (although not dark enough, as seen in
>> screenshots) and the chrome gets nicely out of the way thanks to the
>> fine-grained contrast and location of controls in the corners.
>>
>> * MediaGoblin 0.3.3 (e.g. http://gobblin.se/u/joar/m/40-years-later/,
>> http://gobblin.se/u/andrewstopheles/m/bird-sanctuary/) - the
>> background color seems to be wisely chosen for once! Still, the actual
>> content (image in this case) does not use a great deal of available
>> screen space. It is not visually escalated either because of the big
>> and high-contrast font used for metadata. In fact, metadata is the
>> element that catches the eye the most (at least for photos - e.g. in
>> http://gobblin.se/u/andrewstopheles/m/bird-sanctuary), eclipsing both
>> the content and author's description. As a viewer, it's not the EXIF
>> FNumber I want to look up first, it's how the image actually looks. In
>> fact, I have no idea what that that fnumber thing is in the first
>> place.
>>     A better view at the content is available on clicking the preview
>> of the image; however, it just submits the raw image to the browser,
>> which is often an overkill in terms of file size (photos again!). It
>> doesn't let me view the author's description of the work easily
>> either, not to mention metadata or navigation.
>>
>> In the view of strengths and weaknesses of prior art, here's my proposal:
>> * Selecting an individual work from gallery view will open it in
>> content-centric view, bypassing the almost metadata-centric view
>> present now. Metadata should be displayed after, not before the
>> content.
>> * The content-centric view borrows most of layout from Ubuntu One,
>> here's a rough mockup to illustrate:
>> http://ubuntuone.com/45PO9TbwYO8xNgKNUea6Tb
>> * The work itself is visually elevated over everything else with a
>> shadow, everything else has moderate contrast (kinda like Ubuntu One).
>> * Scrolling down the page reveals author's comment on the work in full
>> along with non-essential metadata. Scrolling preserves the positions
>> of "close" and "previous"/"next" buttons.
>> * To make viewing author's description of the work easier and less of
>> a context change, + to allow viewing it alongside the work, the full
>> description should be shown in full on hovering its beginning:
>> http://ubuntuone.com/5IGGWTcWt5I5T993BTPQHM
>> * Images should be zoomable with mouse wheel, like they are in Google+
>> * Ideally, non-essential controls should fade out if the mouse is not
>> moved for some time, but this has so many implications that it's a
>> topic for another discussion.
>>
>> The design goals I'm pursuing here are:
>> First, presenting the user with three distinct levels of information:
>> level one - the works itself; level two - title of the work, author's
>> comment and essential metadata; level three - non-essential metadata,
>> viewer comments, etc.
>> Second, making transitions between the levels as smooth and effortless
>> as possible with the least possible context change.
>>
>> I believe most of these points can be implemented as a theme (except
>> probably zooming). I'm afraid I won't be able to contribute actual
>> code since my knowledge of web markup languages is very limited.
>>
>> I'd love to hear any input on the ideas expressed here, especially
>> from the original designers of MediaGoblin. It's not like I can be
>> right about everything from the ground-up, but at least I can get the
>> ball rolling :D
>>
>> Regards,
>> --
>> Sergey "Shnatsel" Davidoff
>> _______________________________________________
>> devel mailing list
>> address@hidden
>> http://lists.mediagoblin.org/listinfo/devel
>
>