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

[Christopher Allan Webber]

Heya Sergey,

This is a GREAT email.  I think I agree with almost everything you
said.  There are some barriers towards reaching the goals you've laid
out, and I'll explain what they are inline, but I think they are
surmountable with a hopefully to-be-coming technical change.

I'm excited by a lot of the things you say, though also I should note
that I think it would be good to get a weigh-in from Jef van Schendel
who really is the one who drives MediaGoblin's look and feel.

So, comments inline:

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

> 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.

I think I agree with all of your assessments.

(Also note: the exif stuff can be improved... someone wrote a branch for
this recently I thought, but now I'm having a hard time finding it!  It
hid the EXIF stuff by default...)

> 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.

So, some irony: the original plan for media views was closer to this.
Here was my first ascii art mockup of how things would look:

  http://dustycloud.org/gfx/goodies/mediagoblin_media_view_mockup.txt

The pressure to change this is mostly my own fault and doing.  We had
some debate, at last minute I was really worried about losing the
approach to present metadata nicely and also possibly the bandwidth
implications of really wide/huge things.

So here's the thing; this view might really be good.  And actually it's
very probable we can support both.... I've suggested before that we
actually design the main theme with that intention, and actually give
media entries permission to be able to switch between those contexts.

Inspiration for this comes partly also from YouTube, where you start out
with the media on the left and a sidebar on the right, but there's the
"large player" option where the viewer expands to the right and the
sidebar shifts below it.

However, I'm not actually sure UI-wise what shifting between those
contexts might be like.

Here's the thing though: we can't do this at present because we're
"locked in" to the current resolutions.  Once your media goes through
processing, there's no way to "send it back" to get additional sizes.

There's a rough proposal for that:
  http://wiki.mediagoblin.org/Feature_Ideas/Reprocessing
and relatedly:
  http://wiki.mediagoblin.org/MediaTypeRefactor

(That's one of the suggested GSoC things btw.)

> * 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

This is the one thing that's maybe a bit strange to me :)

> * Images should be zoomable with mouse wheel, like they are in Google+

That's an interesting feature and a good idea; I think it's
implementable separately from this design.  I'm not totally sure how
it'd work technically... does it fetch a higher resolution image?  This
might be a good plugin, anyway.

> * 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.

We've been talking about whether or not to make the "sections" of the
templates more semantic; this seems like a good way of thinking of things.

> 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

Great email!  As said, I think we need to discuss it more, and there's
some technical hurdles that keep this from moving forward, but it's a
lot of great food for thought!

 - Chris