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

[Christopher Allan Webber]

It's been a long time since this thread has been raised, but a couple of
things:

 - We now have a reprocessing framework, so we have the option to "move"
   to a new default width of media much more easily.

 - jpope has taken up a role as "design deputy" in MediaGoblin
   (horray!), and has been playing around with a wide theme mockup:

   https://static.jpope.org/images/GMG_preview02.png

I'm pretty excited about how that looks.  I wonder what others think?

 - Chris

address@hidden writes:

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