|From:||Jef van Schendel|
|Subject:||Re: [GMG-Devel] [RFC] Content-centric theme for MediaGoblin|
|Date:||Tue, 23 Apr 2013 16:57:39 +0200|
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...
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.
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:
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
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/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
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
* The content-centric view borrows most of layout from Ubuntu One,
here's a rough mockup to illustrate:
* 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:
* 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
Sergey "Shnatsel" Davidoff
devel mailing list
|[Prev in Thread]||Current Thread||[Next in Thread]|