Replies in-line

Jared Zimmerman  \\  Director of User Experience \\ Wikimedia Foundation               
M : +1 415 609 4043 |   :  @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.org> wrote:
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.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

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