Currently we have very different upload detail and add-category screens between Android and iOS versions of the Wikimedia Commons uploader app.
I've put descriptions and quick comparative videos on mediawiki.org: https://www.mediawiki.org/wiki/Apps/Commons/Categories
Impressions and ideas welcome!
(Y'all can try the Android version with categorization from Google Play -- the iOS version in the App Store doesn't yet have categories but you can try the older version to get a feel for the layout and the first data entry screen. For those on the beta group, there'll be a push via TestFlight later today.)
-- brion
Thanks Brion.
Vibha & Jared, it would be great to get you guys to weigh in on this. --tomasz
On Thu, May 9, 2013 at 5:02 PM, Brion Vibber bvibber@wikimedia.org wrote:
Currently we have very different upload detail and add-category screens between Android and iOS versions of the Wikimedia Commons uploader app.
I've put descriptions and quick comparative videos on mediawiki.org: https://www.mediawiki.org/wiki/Apps/Commons/Categories
Impressions and ideas welcome!
(Y'all can try the Android version with categorization from Google Play -- the iOS version in the App Store doesn't yet have categories but you can try the older version to get a feel for the layout and the first data entry screen. For those on the beta group, there'll be a push via TestFlight later today.)
-- brion
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Here's a quickie alternate mockup of the gallery & detail screens: https://brionv.com/misc/commons-mockup/ Source at https://github.com/brion/commons-mockup
Mockup uses actual items from this month's Picture of the Day feed.
This explores the more 'mosaic'-style model to the gallery view where items aren't cropped and have variable height. I like this for a single column, but I'm not satisfied with how it could work sensible in multi-column.
Clicking/tapping on individual images transitions to a detail screen, with the image stretched, cropped and darkened in the background as we currently do on Android's title/description screen. We can imagine a fancier transition, such as animating the image from its place in the gallery view as it zooms in to the full screen (oooh!) but I didn't mock up the transition yet. ;)
Detail screen contents are based on one of Jared's mockups, using a more compact category view. The items on the detail screen load asynchronously, so be warned they jump around a bit. We'd want to make such things much smoother "for real" of course... we'd also probably use this screen to provide sharing controls, etc.
If the categories, description etc are large, we can easily go beyond a screenfull, and have to scroll this screen. Should the background image stay still during scrolling or should it move a little, parallax-y? (ooooh more visual effects)
Do we want to use the detail screen as the data-entry screen on new uploads as well, or keep them distinct?
Do we need a separate 'view image' screen that can handle pan/zoom?
How will we scale this up on tablets?
Thoughts, ideas?
-- brion
On Fri, May 10, 2013 at 10:50 AM, Tomasz Finc tfinc@wikimedia.org wrote:
Thanks Brion.
Vibha & Jared, it would be great to get you guys to weigh in on this. --tomasz
On Thu, May 9, 2013 at 5:02 PM, Brion Vibber bvibber@wikimedia.org wrote:
Currently we have very different upload detail and add-category screens between Android and iOS versions of the Wikimedia Commons uploader app.
I've put descriptions and quick comparative videos on mediawiki.org: https://www.mediawiki.org/wiki/Apps/Commons/Categories
Impressions and ideas welcome!
(Y'all can try the Android version with categorization from Google Play
--
the iOS version in the App Store doesn't yet have categories but you can
try
the older version to get a feel for the layout and the first data entry screen. For those on the beta group, there'll be a push via TestFlight
later
today.)
-- brion
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
On Sun, May 12, 2013 at 2:18 PM, Brion Vibber bvibber@wikimedia.org wrote:
Here's a quickie alternate mockup of the gallery & detail screens: https://brionv.com/misc/commons-mockup/ Source at https://github.com/brion/commons-mockup
Now with tablet-size concepts:
https://brionv.com/misc/commons-mockup-tablet-big/ ^ same thing scaled up to 1024x768
For both the phone and tablet sizes it might make sense to either crop or scale down images that would appear larger than the screen size. Scaling down would leave black bars, but cropping might give a wrong impression.
https://brionv.com/misc/commons-mockup-tablet-small/ ^ uses 3 vertical columns in portrait, 3 horizontal rows in landscape; scrolls in opposite direction
The theory on this is that we'd do some kind of size adjustment like justified text to keep from having a ragged edge where the columns/rows wrap. Imagine that images are squished or stretched or given extra whitespace or something to fit.
Note I've included a couple extra images not in the previous mockup version; the first in the batch is now an "extra tall" image, to compare with the "extra wide" horizontal panorama.
-- brion
On Mon, May 13, 2013 at 3:21 PM, Brion Vibber bvibber@wikimedia.org wrote:
On Sun, May 12, 2013 at 2:18 PM, Brion Vibber bvibber@wikimedia.orgwrote:
Here's a quickie alternate mockup of the gallery & detail screens: https://brionv.com/misc/commons-mockup/ Source at https://github.com/brion/commons-mockup
Oh and I totally forgot this now has a 'rotate' button to show a landscape concept. This scrolls horizontally.
-- brion
On Mon, May 13, 2013 at 3:22 PM, Brion Vibber bvibber@wikimedia.org wrote:
On Mon, May 13, 2013 at 3:21 PM, Brion Vibber bvibber@wikimedia.orgwrote:
On Sun, May 12, 2013 at 2:18 PM, Brion Vibber bvibber@wikimedia.orgwrote:
Here's a quickie alternate mockup of the gallery & detail screens: https://brionv.com/misc/commons-mockup/ Source at https://github.com/brion/commons-mockup
Oh and I totally forgot this now has a 'rotate' button to show a landscape concept. This scrolls horizontally.
New version of https://brionv.com/misc/commons-mockup/ mosaic layout concept, now with selectable simulated devices at phone and tablet sizes.
Photos are oriented along the 'long' side of the screen, with even column(s) and scrolling along that direction -- vertical for portrait, horizontal for landscape. That's one column for phones, two for 7-inch Android tablets, and 3 for other tablets. Photos that would be "longer" than the screen are shrunk down a bit and centered in the column; this keeps extreme panoramas and such from going too crazy, but doesn't break up the mosaic flow the rest of the time.
In RTL, the horizontal layout/scrolling could be flipped, but I haven't mocked that.
The layout algorithm isn't quite perfect and sometimes leaves uneven columns, but it's just a demo. :)
The small green numbers are sequence numbers and are just there to get a feel for the layout's order. They wouldn't be shown 'for real'.
Questions: * Is this generally good? Should we continue to pursue this design? * This mosaic layout attempts to put chronologically adjacent items near each other across the columns, but things don't always scan in order because there aren't even rows that cut across the columns. If this is too confusing, we could switch to a Google Image Search style mosaic for tablet view, where we have even rows instead of columns. This would be inconsistent with the phone view, then.
* Any feedback on the detail page? Should everything be overlaid or should there be a drawer, or a swipe, or?
-- brion
*Replies in-line* * * *Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmermanhttps://twitter.com/JaredZimmerman
On Mon, May 20, 2013 at 8:09 AM, Brion Vibber bvibber@wikimedia.org wrote:
On Mon, May 13, 2013 at 3:22 PM, Brion Vibber bvibber@wikimedia.orgwrote:
On Mon, May 13, 2013 at 3:21 PM, Brion Vibber bvibber@wikimedia.orgwrote:
On Sun, May 12, 2013 at 2:18 PM, Brion Vibber bvibber@wikimedia.orgwrote:
Here's a quickie alternate mockup of the gallery & detail screens: https://brionv.com/misc/commons-mockup/ Source at https://github.com/brion/commons-mockup
Oh and I totally forgot this now has a 'rotate' button to show a landscape concept. This scrolls horizontally.
New version of https://brionv.com/misc/commons-mockup/ mosaic layout concept, now with selectable simulated devices at phone and tablet sizes.
Photos are oriented along the 'long' side of the screen, with even column(s) and scrolling along that direction -- vertical for portrait, horizontal for landscape. That's one column for phones, two for 7-inch Android tablets, and 3 for other tablets. Photos that would be "longer" than the screen are shrunk down a bit and centered in the column; this keeps extreme panoramas and such from going too crazy, but doesn't break up the mosaic flow the rest of the time.
* Jared —
I think this design direction is good, still not 100% sold on the multi-column, but need to investigate more. *
In RTL, the horizontal layout/scrolling could be flipped, but I haven't mocked that.
The layout algorithm isn't quite perfect and sometimes leaves uneven columns, but it's just a demo. :)
The small green numbers are sequence numbers and are just there to get a feel for the layout's order. They wouldn't be shown 'for real'.
Questions:
- Is this generally good? Should we continue to pursue this design?
* Jared —
yes, a few notes, right now there is a gap between images which is medium grey, would like to see this in black, and gone all together as options *
- This mosaic layout attempts to put chronologically adjacent items near
each other across the columns, but things don't always scan in order because there aren't even rows that cut across the columns. If this is too confusing, we could switch to a Google Image Search style mosaic for tablet view, where we have even rows instead of columns. This would be inconsistent with the phone view, then.
* Jared —
Gotta play with this more on tablet to have an informed view *
- Any feedback on the detail page? Should everything be overlaid or should
there be a drawer, or a swipe, or?
* Jared — I actually like the overlay more than i thought i would, however the blue links are nearly impossible to read, couple design notes here *
- * is the image being blended to (overlaid on) a black background or a dark grey one? black my be better
* - * Perhaps try an additional black to transparent gradient overlay from the top of the screen to further increase the readability of the text at the top * - * For the text, at a 1px black hard drop shadow for further contrast and **read ability * - * Can we set the background image height to the screen height of the device, and anchor left, so the image overflow goes to the right? then set the background to fixed so it does not scroll with the page? * - * lack of left margin on text makes me uncomfortable, perhaps equal too or half the top margin *
-- brion
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
My comments inline and purple. Thanks for the feedback!
On Mon, May 20, 2013 at 11:17 AM, Jared Zimmerman < jared.zimmerman@wikimedia.org> wrote:
I think this design direction is good, still not 100% sold on the multi-column, but need to investigate more.
Yay! If we don't go multicolumn, we need *some* kind of tablet layout; I'm not sure if keeping everything fullscreen on a tablet makes sense in the upload list view. :)
- Is this generally good? Should we continue to pursue this design?
Jared —
yes, a few notes, right now there is a gap between images which is medium grey, would like to see this in black, and gone all together as options
Hmm, you should see no gap at present (except during initial loading before the layout is complete)... sometimes I see a 1px black gap. (Note that a couple of the images here actually have tiny borders of their own, such as the maps, but there's not much we can do about that.) Looks like there's also a slight glitch that shows through gray background instead of black if you view on an iPhone or other small-screen device (it also doesn't handle the rotation properly when viewed on an actual device, I'll try and fix that.)
* This mosaic layout attempts to put chronologically adjacent items near
each other across the columns, but things don't always scan in order because there aren't even rows that cut across the columns. If this is too confusing, we could switch to a Google Image Search style mosaic for tablet view, where we have even rows instead of columns. This would be inconsistent with the phone view, then.
Jared —
Gotta play with this more on tablet to have an informed view
Excellent, let me know if it's worth pursuing; the column algo needs some work before being used. :)
- Any feedback on the detail page? Should everything be overlaid or
should there be a drawer, or a swipe, or?
Jared — I actually like the overlay more than i thought i would, however the blue links are nearly impossible to read, couple design notes here
Naturally yes, links will need a legible color!
I've got a couple general issues with the overlay though: * When we run out of room on the screen, how should we deal with scrolling? Keep the image still, scroll it evenly with the foreground, or have it scroll more slowly than the FG (parallax effect)? * How can people view the image fullscreen or zoomed in? Do we need another button to get to that? Or some way to dismiss/hide the overlay? (I like the idea of a drawer that can be opened/closed to show all the details, but I'm not sure on it.) * How will this scale up to tablet view? (Possibly on tablet view we could have the overlay be a separate pane from a zoomable image view?)
* *
is the image being blended to (overlaid on) a black background or a dark grey one? black my be better
Black.
Perhaps try an additional black to transparent gradient overlay from the top of the screen to further increase the readability of the text at the top
For the text, at a 1px black hard drop shadow for further contrast and **read ability
*nod* That'll help!
Can we set the background image height to the screen height of the device, and anchor left, so the image overflow goes to the right? then set the background to fixed so it does not scroll with the page?
What to do on images taller than the screen aspect ratio? Show black, or
crop to top? Or crop to center?
lack of left margin on text makes me uncomfortable, perhaps equal too or half the top margin
*nod*
Also some other ideas on info/controls to show:
* multilingual options for description -- descriptions can be stored in multiple languages; currently the mockup just fetches English. Giving people a chance to translate a description on the detail page would be a great microtask. * article usage list with links to the pages... be warned, potentially long! (optional: filter to just articles, or include full list of meta and user pages?) * (potential for the future) image editing tools * (for the future) how to trigger audio/video playback for media items? * we need to work out what the "use this photo in an article" feature does; if we don't want to build a full thing that actually inserts things into pages, we need to at least have a documentation page to link to. * should we expose file metadata? (basic things like type/size, complex things like EXIF contents table) * how should we expose GPS data? an inline map, or a trigger to bring up the info? How do we make the same interface work for editing/adding coordinates?
-- brion
*Replies in-line*
* * * * *Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmermanhttps://twitter.com/JaredZimmerman
On Mon, May 20, 2013 at 12:06 PM, Brion Vibber bvibber@wikimedia.orgwrote:
My comments inline and purple. Thanks for the feedback!
On Mon, May 20, 2013 at 11:17 AM, Jared Zimmerman < jared.zimmerman@wikimedia.org> wrote:
I think this design direction is good, still not 100% sold on the multi-column, but need to investigate more.
Yay! If we don't go multicolumn, we need *some* kind of tablet layout; I'm not sure if keeping everything fullscreen on a tablet makes sense in the upload list view. :)
- Is this generally good? Should we continue to pursue this design?
Jared —
yes, a few notes, right now there is a gap between images which is medium grey, would like to see this in black, and gone all together as options
Hmm, you should see no gap at present (except during initial loading before the layout is complete)... sometimes I see a 1px black gap. (Note that a couple of the images here actually have tiny borders of their own, such as the maps, but there's not much we can do about that.) Looks like there's also a slight glitch that shows through gray background instead of black if you view on an iPhone or other small-screen device (it also doesn't handle the rotation properly when viewed on an actual device, I'll try and fix that.)
* * *Jared — Gaps are gone, but i could have sworn i saw them on my iphone last night*
- This mosaic layout attempts to put chronologically adjacent items near
each other across the columns, but things don't always scan in order because there aren't even rows that cut across the columns. If this is too confusing, we could switch to a Google Image Search style mosaic for tablet view, where we have even rows instead of columns. This would be inconsistent with the phone view, then.
Jared —
Gotta play with this more on tablet to have an informed view
Excellent, let me know if it's worth pursuing; the column algo needs some work before being used. :)
- Any feedback on the detail page? Should everything be overlaid or
should there be a drawer, or a swipe, or?
Jared — I actually like the overlay more than i thought i would, however the blue links are nearly impossible to read, couple design notes here
Naturally yes, links will need a legible color!
I've got a couple general issues with the overlay though:
- When we run out of room on the screen, how should we deal with
scrolling? Keep the image still, scroll it evenly with the foreground, or have it scroll more slowly than the FG (parallax effect)?
*Jared — parallax could be nice, could be distracting, would have to see it in action. basically the goal is not to see black, either on the bottom of the right edge, I'm ok with not even being able to see the whole image when in details view with the text overlay. *
- How can people view the image fullscreen or zoomed in? Do we need
another button to get to that? Or some way to dismiss/hide the overlay? (I like the idea of a drawer that can be opened/closed to show all the details, but I'm not sure on it.)
- How will this scale up to tablet view? (Possibly on tablet view we could
have the overlay be a separate pane from a zoomable image view?)
*Jared — we might want to have this be yet another screen, however given the point of the app ( uploading your own images) this may not even be needed, wonder what users would say if this view doesn't exist…? *
is the image being blended to (overlaid on) a black background or a dark grey one? black my be better
Black.
Perhaps try an additional black to transparent gradient overlay from the top of the screen to further increase the readability of the text at the top
For the text, at a 1px black hard drop shadow for further contrast and **read ability
*nod* That'll help!
Can we set the background image height to the screen height of the device, and anchor left, so the image overflow goes to the right? then set the background to fixed so it does not scroll with the page?
What to do on images taller than the screen aspect ratio? Show black, or
crop to top? Or crop to center?
*Jared — see above , depends on the anchoring and if we can do the parallax scrolling without making people ill, but ideally it would always be edge to edge image, anchored top left. *
lack of left margin on text makes me uncomfortable, perhaps equal too or half the top margin
*nod*
Also some other ideas on info/controls to show:
- multilingual options for description -- descriptions can be stored in
multiple languages; currently the mockup just fetches English. Giving people a chance to translate a description on the detail page would be a great microtask.
*Jared — yep *
- article usage list with links to the pages... be warned, potentially
long! (optional: filter to just articles, or include full list of meta and user pages?)
*Jared — mabye show most recent 3 with a link to expand to more and have them sorted by usage type? it would be good to show the titles of the pages rather than their URLS *
- (potential for the future) image editing tools
*Jared — how would this work with image that are uploaded already? would it just create a version? A trumping feature could be good, "Upload a new version of this picture" *
- (for the future) how to trigger audio/video playback for media items?
*Jared — I like autoplay (without sound) as long as we could show a meaningful still when there isn't bandwidth to load the video *
- we need to work out what the "use this photo in an article" feature
does; if we don't want to build a full thing that actually inserts things into pages, we need to at least have a documentation page to link to.
*Jared — In the short term i was just thinking about showin the user the link from the *http://commons.wikimedia.org/wiki/File:Confronting_Death_(8173127957).jpg#Use this filehttp://commons.wikimedia.org/wiki/File:Confronting_Death_(8173127957).jpg# *action on the image page of commons* * *
- should we expose file metadata? (basic things like type/size, complex
things like EXIF contents table)
*Jared — yes but collapsed by default. *
- how should we expose GPS data? an inline map, or a trigger to bring up
the info? How do we make the same interface work for editing/adding coordinates?
*Jared — yes, but thats a bigger design problem, that my team will need to think about, in the short term perhaps a text link to "Show image on map" opening in gMaps or Apple maps if the location is tagged in the image . *
-- brion
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design