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

[Christopher Allan Webber]

Ah, I think I hadn't been realizing until this point that the media
would be opening on the same page without actually switching to the
other page, just showing it in a lightbox?  That might be a good idea
maybe, but I'm a bit confused as to how it totally works.

 - Switching from a gallery to a media page actually seems a *lot* more
   content centric to me.  It changes the URL, etc.  Being on a
   lightbox... that feels more like the media is actually being a
   secondary thing and the gallery is the primary, important thing.

   I do remember there being some HTML5 browser extension where it can
   update the current URL is dynamically, but I forget what that is.

   What might be better is to totally switch the page, but preserve some
   navigation that switches it back.  So maybe not a [X], but some kind
   of return to things "thin header" right over top of the media or
   something?  Not sure.  Something that indicates return.

 - Previously I thought we were talking about supporting both the
   sidebar style *and* the wide, "content-centric" version.  Though
   admittedly I'm not sure how to switch between them.

 - One problem with this is that it has an assumption that the < >
   navigation really knows what kind of gallery it's coming from.  How
   to do that though?  That seems really hard, unless we are actually
   doing the HTML5'y switching the URL as we go but not actually leaving
   the page... if we do that, we can also preserve state about what
   context the user was browsing from.

 - Shifting around a lot of these components dynamically could make
   writing themes and plugins really hard, so if we do this, we do
   indeed have to shift to a more semantic concept of what each "block"
   of things is.  I would encourage *as little shifting as possible*, so
   things like the wide view you propose make me fairly nervous.

I think we've got come cool innovative ideas going on here, but I think
we need to proceed carefully.  But I think this conversation is
good... please do keep it up.


Сергей Давыдов writes:

> 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
>>
>>
> _______________________________________________
> devel mailing list
> address@hidden
> http://lists.mediagoblin.org/listinfo/devel