Hello Everyone,
for the past week I have been iterating on the commons android visual design. Wanted to share the current iteration for feedback/comments/suggestions.
https://upload.wikimedia.org/wikipedia/commons/c/c6/Commons_media_discovery_...
I love it. But why cheese as the home screen background? Would it rotate through featured images or... always cheese? ;)
More seriously, the step between the first screen and the appearance of the login screen is not obvious. Would users just need to tap anywhere to begin logging in? Seems like we could increase discoverability there.
On Fri, Feb 15, 2013 at 10:59 PM, Shankar Narayan notnarayan@gmail.comwrote:
Hello Everyone,
for the past week I have been iterating on the commons android visual design. Wanted to share the current iteration for feedback/comments/suggestions.
https://upload.wikimedia.org/wikipedia/commons/c/c6/Commons_media_discovery_...
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Hi !
Le 16 févr. 2013 08:24, "Steven Walling" swalling@wikimedia.org a écrit :
I love it. But why cheese as the home screen background? Would it rotate
through featured images or... always cheese? ;)
Always cheese I hope (a good like this one) !
More seriously, the step between the first screen and the appearance of
the login screen is not obvious. Would users just need to tap anywhere to begin logging in? Seems like we could increase discoverability there.
Same question. Discover a featured image is a good idea, but you can merge step one and two, in order to log in at the first screen.
Other question: when do you describe the picture you take ?
Great job :)
Benoît
On Fri, Feb 15, 2013 at 10:59 PM, Shankar Narayan notnarayan@gmail.com
wrote:
Hello Everyone,
for the past week I have been iterating on the commons android visual
design. Wanted to share the current iteration for feedback/comments/suggestions.
https://upload.wikimedia.org/wikipedia/commons/c/c6/Commons_media_discovery_...
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
-- Steven Walling https://wikimediafoundation.org/
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
On Fri, Feb 15, 2013 at 10:59 PM, Shankar Narayan notnarayan@gmail.comwrote:
Hello Everyone,
for the past week I have been iterating on the commons android visual design. Wanted to share the current iteration for feedback/comments/suggestions.
https://upload.wikimedia.org/wikipedia/commons/c/c6/Commons_media_discovery_...
Just an update - me and Yuvi have been trying to figure out the best size to display thumbnails in the "my uploads" and similar views.
At the moment the mockups and the iOS implementation show two items across on a phone-sized screen, for about ~6 items on screen at once. File title isn't shown until you tap into a detail screen.
The Android implementation currently uses more ample thumbnails which take the full device width, and reserved some space to show the title. This only shows ~2-3 items on screen at a time on a phone, but the pictures look _awesome_ and you may be able to more easily distinguish adjacent similar issues due to seeing the title.
(I've also proposed the idea of a selectable zoom control (either pinch-zoom or a slider), but this gets complicated and probably isn't the way to go.)
For comparison, the iOS "Photos" app shows 4 items across, and the Android "Gallery" app shows 3 items across. Neither shows titles or filenames, and neither has controllable zoom on the overview.
Do we want to go even smaller like the photo gallery apps to squeeze more items in? Or stay large to show the title on the main screen? Or go with a middle-ground that shows off images well but doesn't have room for titles?
-- brion
Heres a mockup[1] of both the views that are being discussed. This should help us decide which one to pick :). This decision is critical as we may want to use the same view across the app to maintain consistency.
Smaller thumbnails take less real estate, and gives one a sense of there being a *lot* of images. Also, its easier to swipe through many images in one go. As the thumbnails are smaller, having text overlays would take away a lot of focus from the image.
[1] http://upload.wikimedia.org/wikipedia/commons/5/5d/Commons_gallery_view_opti...
On 20 February 2013 00:15, Brion Vibber bvibber@wikimedia.org wrote:
On Fri, Feb 15, 2013 at 10:59 PM, Shankar Narayan notnarayan@gmail.comwrote:
Hello Everyone,
for the past week I have been iterating on the commons android visual design. Wanted to share the current iteration for feedback/comments/suggestions.
https://upload.wikimedia.org/wikipedia/commons/c/c6/Commons_media_discovery_...
Just an update - me and Yuvi have been trying to figure out the best size to display thumbnails in the "my uploads" and similar views.
At the moment the mockups and the iOS implementation show two items across on a phone-sized screen, for about ~6 items on screen at once. File title isn't shown until you tap into a detail screen.
The Android implementation currently uses more ample thumbnails which take the full device width, and reserved some space to show the title. This only shows ~2-3 items on screen at a time on a phone, but the pictures look _awesome_ and you may be able to more easily distinguish adjacent similar issues due to seeing the title.
(I've also proposed the idea of a selectable zoom control (either pinch-zoom or a slider), but this gets complicated and probably isn't the way to go.)
For comparison, the iOS "Photos" app shows 4 items across, and the Android "Gallery" app shows 3 items across. Neither shows titles or filenames, and neither has controllable zoom on the overview.
Do we want to go even smaller like the photo gallery apps to squeeze more items in? Or stay large to show the title on the main screen? Or go with a middle-ground that shows off images well but doesn't have room for titles?
-- brion
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Images are all manner of aspect ratios and thus they will not line up like you make out in the mockups unless you arbitrarily crop them or do something funky with them, and making them smaller limits the funky things that can reasonably be done.
On 20/02/2013 08:37, Shankar Narayan wrote:
Heres a mockup[1] of both the views that are being discussed. This should help us decide which one to pick :). This decision is critical as we may want to use the same view across the app to maintain consistency.
Smaller thumbnails take less real estate, and gives one a sense of there being a *lot* of images. Also, its easier to swipe through many images in one go. As the thumbnails are smaller, having text overlays would take away a lot of focus from the image.
[1] http://upload.wikimedia.org/wikipedia/commons/5/5d/Commons_gallery_view_opti...
On 20 February 2013 00:15, Brion Vibber <bvibber@wikimedia.org mailto:bvibber@wikimedia.org> wrote:
On Fri, Feb 15, 2013 at 10:59 PM, Shankar Narayan <notnarayan@gmail.com <mailto:notnarayan@gmail.com>> wrote: Hello Everyone, for the past week I have been iterating on the commons android visual design. Wanted to share the current iteration for feedback/comments/suggestions. https://upload.wikimedia.org/wikipedia/commons/c/c6/Commons_media_discovery_app.png Just an update - me and Yuvi have been trying to figure out the best size to display thumbnails in the "my uploads" and similar views. At the moment the mockups and the iOS implementation show two items across on a phone-sized screen, for about ~6 items on screen at once. File title isn't shown until you tap into a detail screen. The Android implementation currently uses more ample thumbnails which take the full device width, and reserved some space to show the title. This only shows ~2-3 items on screen at a time on a phone, but the pictures look _awesome_ and you may be able to more easily distinguish adjacent similar issues due to seeing the title. (I've also proposed the idea of a selectable zoom control (either pinch-zoom or a slider), but this gets complicated and probably isn't the way to go.) For comparison, the iOS "Photos" app shows 4 items across, and the Android "Gallery" app shows 3 items across. Neither shows titles or filenames, and neither has controllable zoom on the overview. Do we want to go even smaller like the photo gallery apps to squeeze more items in? Or stay large to show the title on the main screen? Or go with a middle-ground that shows off images well but doesn't have room for titles? -- brion _______________________________________________ Design mailing list Design@lists.wikimedia.org <mailto: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 Wed, Feb 20, 2013 at 8:53 AM, Isarra Yos zhorishna@gmail.com wrote:
Images are all manner of aspect ratios and thus they will not line up like you make out in the mockups unless you arbitrarily crop them or do something funky with them, and making them smaller limits the funky things that can reasonably be done.
On iOS I'm cropping them to squares for the grid view. This is pretty common, and you'll see it done in the system 'Photos' or 'Gallery' apps on iOS and Android as well as sites like Flickr in big list views.
Generally you see the image in its full aspect ratio on a detail view.
-- brion
That has danger of removing the relevant parts of the image or in the case of panoramas, just plain misrepresenting them as something they ain't, though.
On 20/02/2013 10:35, Brion Vibber wrote:
On Wed, Feb 20, 2013 at 8:53 AM, Isarra Yos <zhorishna@gmail.com mailto:zhorishna@gmail.com> wrote:
Images are all manner of aspect ratios and thus they will not line up like you make out in the mockups unless you arbitrarily crop them or do something funky with them, and making them smaller limits the funky things that can reasonably be done.On iOS I'm cropping them to squares for the grid view. This is pretty common, and you'll see it done in the system 'Photos' or 'Gallery' apps on iOS and Android as well as sites like Flickr in big list views.
Generally you see the image in its full aspect ratio on a detail view.
-- brion
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
I personally prefer the larger images, and I'm okay with cropping things because I think it's possibly going to be a software necessity.
(I used to crop my gallery thumbnails at the same aspect ratio as the image themselves, so it was some 72x72 pixel frame of something much larger and it was a surprise what the photo was in the end.)
On Feb 20, 2013, at 10:01 AM, Isarra Yos zhorishna@gmail.com wrote:
That has danger of removing the relevant parts of the image or in the case of panoramas, just plain misrepresenting them as something they ain't, though.
On 20/02/2013 10:35, Brion Vibber wrote:
On Wed, Feb 20, 2013 at 8:53 AM, Isarra Yos zhorishna@gmail.com wrote: Images are all manner of aspect ratios and thus they will not line up like you make out in the mockups unless you arbitrarily crop them or do something funky with them, and making them smaller limits the funky things that can reasonably be done.
On iOS I'm cropping them to squares for the grid view. This is pretty common, and you'll see it done in the system 'Photos' or 'Gallery' apps on iOS and Android as well as sites like Flickr in big list views.
Generally you see the image in its full aspect ratio on a detail view.
-- brion
Design mailing list
Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
-- -— Isarra
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
--- Brandon Harris, Senior Designer, Wikimedia Foundation
Support Free Knowledge: http://wikimediafoundation.org/wiki/Donate
+1 to larger images with Image titles on them. Tapping on them shows you the uncropped full image (+ details)
I also like b.
Very nice, all!!
On Thu, Feb 21, 2013 at 12:04 PM, Yuvi Panda yuvipanda@gmail.com wrote:
+1 to larger images with Image titles on them. Tapping on them shows you the uncropped full image (+ details)
-- Yuvi Panda T http://yuvi.in/blog
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
I like option B because it emphasises content and it provides a simplified exploration mode (scroll down) which is suited for exploring "my uploads". Nevertheless there are some aspects to consider:
- *List length.* One inconvenient for option B may be the list becoming too large to scroll. If recently added images appear on top, the need for scrolling will be greatly reduced (since recent content is more likely to be accessed). If other order (e.g., alphabetic) is preferred instead, adding a scroll thumbhttp://www.androidpatterns.com/uap_pattern/scroll-thumbmay help with navigation. - *Adequacy to the task.* Although option B is adequate for a task such as the ones the user is expected to do in "my uploads" a tile layout may be considered for other tasks such as image curation (where a broader overview may be desired to spot problematic images in a gaze). - *Reduce noise.* I would consider to remove descriptions and show only the title with a bigger typeface using the room currently used for the description. Displaying the title is probably enough for the user to identify his own uploads. The description can be shown either in the separate detail view or on top of the image itself when tapping.
Pau
On Thu, Feb 21, 2013 at 11:46 PM, Heather Walls hwalls@wikimedia.orgwrote:
I also like b.
Very nice, all!!
On Thu, Feb 21, 2013 at 12:04 PM, Yuvi Panda yuvipanda@gmail.com wrote:
+1 to larger images with Image titles on them. Tapping on them shows you the uncropped full image (+ details)
-- Yuvi Panda T http://yuvi.in/blog
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
Once again, Pau is the smartest guy in the room, being able to articulate my thoughts better than "I like it".
On Feb 22, 2013, at 11:09 AM, Pau Giner pginer@wikimedia.org wrote:
I like option B because it emphasises content and it provides a simplified exploration mode (scroll down) which is suited for exploring "my uploads". Nevertheless there are some aspects to consider: • List length. One inconvenient for option B may be the list becoming too large to scroll. If recently added images appear on top, the need for scrolling will be greatly reduced (since recent content is more likely to be accessed). If other order (e.g., alphabetic) is preferred instead, adding a scroll thumb may help with navigation. • Adequacy to the task. Although option B is adequate for a task such as the ones the user is expected to do in "my uploads" a tile layout may be considered for other tasks such as image curation (where a broader overview may be desired to spot problematic images in a gaze). • Reduce noise. I would consider to remove descriptions and show only the title with a bigger typeface using the room currently used for the description. Displaying the title is probably enough for the user to identify his own uploads. The description can be shown either in the separate detail view or on top of the image itself when tapping.
Pau
On Thu, Feb 21, 2013 at 11:46 PM, Heather Walls hwalls@wikimedia.org wrote: I also like b.
Very nice, all!!
On Thu, Feb 21, 2013 at 12:04 PM, Yuvi Panda yuvipanda@gmail.com wrote: +1 to larger images with Image titles on them. Tapping on them shows you the uncropped full image (+ details)
-- Yuvi Panda T http://yuvi.in/blog
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
-- Pau Giner Interaction Designer Wikimedia Foundation _______________________________________________ Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
--- Brandon Harris, Senior Designer, Wikimedia Foundation
Support Free Knowledge: http://wikimediafoundation.org/wiki/Donate
+1 for always cheese.
Let's not forget that featured images come in all flavors of ... appropriateness[1]
I agree that cropping sucks when an important part of the subject get's dropped, but since we have so little space we probably can't use a constant-height thumbnail combined with a image-on-page fitting technique like the one used for Google Images. It's interesting to note that on mobile they dispense with this technique and go straight to cropped thumbnails.
- Trevor
[1] http://rubenerd.com/wikimedia-commons-no-censorship/
On Fri, Feb 22, 2013 at 11:55 AM, Brandon Harris bharris@wikimedia.orgwrote:
Once again, Pau is the smartest guy in the room, being able toarticulate my thoughts better than "I like it".
On Feb 22, 2013, at 11:09 AM, Pau Giner pginer@wikimedia.org wrote:
I like option B because it emphasises content and it provides a
simplified exploration mode (scroll down) which is suited for exploring "my uploads". Nevertheless there are some aspects to consider:
• List length. One inconvenient for option B may be the listbecoming too large to scroll. If recently added images appear on top, the need for scrolling will be greatly reduced (since recent content is more likely to be accessed). If other order (e.g., alphabetic) is preferred instead, adding a scroll thumb may help with navigation.
• Adequacy to the task. Although option B is adequate for a tasksuch as the ones the user is expected to do in "my uploads" a tile layout may be considered for other tasks such as image curation (where a broader overview may be desired to spot problematic images in a gaze).
• Reduce noise. I would consider to remove descriptions and showonly the title with a bigger typeface using the room currently used for the description. Displaying the title is probably enough for the user to identify his own uploads. The description can be shown either in the separate detail view or on top of the image itself when tapping.
Pau
On Thu, Feb 21, 2013 at 11:46 PM, Heather Walls hwalls@wikimedia.org
wrote:
I also like b.
Very nice, all!!
On Thu, Feb 21, 2013 at 12:04 PM, Yuvi Panda yuvipanda@gmail.com
wrote:
+1 to larger images with Image titles on them. Tapping on them shows you
the uncropped full image (+ details)
-- Yuvi Panda T http://yuvi.in/blog
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
-- Pau Giner Interaction Designer Wikimedia Foundation _______________________________________________ Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Brandon Harris, Senior Designer, Wikimedia Foundation
Support Free Knowledge: http://wikimediafoundation.org/wiki/Donate
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design