2

I am designing an interface that allow users to grab photos from multiple photo albums (which they previously created). After importing those pictures, users can select those pictures and then export pictures to PDFs or print them out after they selected all the pictures they want from various albums. Users can also edit and delete pictures they don't wish to be included in the report by pressing the x button at the top right hand corner.

My question is:

1) What is the best way to display pictures from multiple albums without looking too cluttered?

2) How do I categorize the photos so that users will not get confused about which photos are from which album?

3) what is a good way to display these pictures? Here is what the interface currently looks like:

http://i47.tinypic.com/280kzrn.jpg

The size of the images can change, however, it would be helpful if the images can be big enough for the users to see the pictures too. (the window has a fixed size).

Thank you for your help!

Improve this question
6
  • You seem to be missing your picture of what the interface currently looks like....
    – Roddy of the Frozen Peas
    Nov 5, 2012 at 22:48
  • Yeah, sorry about that. Seems like I cannot attach a mockup since I just started this account. ><
    – AmayaMoriko
    Nov 5, 2012 at 22:52
  • If you include a link, someone with more reputation can edit your post and convert it into an inline picture.
    – Roddy of the Frozen Peas
    Nov 5, 2012 at 22:54
  • oh! ok. I'll give that a try. One second.
    – AmayaMoriko
    Nov 5, 2012 at 23:11
  • Alrighty! Mockup is re-uploaded.
    – AmayaMoriko
    Nov 5, 2012 at 23:14

2 Answers 2

Reset to default
1

I would recommend going with a scroll through approach to show the listing of albums and show the images in each album under the scroll.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The album selected can be highlighted in some way (with a brighter color or a border) and the area below the album scroller will be populated with the pics from that album. The advantage of this method is that you can quickly switch between multiple albums and it would scale fairly well if there are a lot of pictures within the album.

However the obvious disadvantage is that if there are a lot of albums, the user might have to scroll to the end to find a specific album.

You could overcome that by providing a search option as given below

Improve this answer
3
  • An inability to see all the selected photos could be a disadvantage too. You may try to add some kind of visual markers (badges) showing a number of selected photos in every album but still user will need to switch albums to review the selection.
    – alexeypegov
    Nov 16, 2012 at 12:12
  • I would suggest making sure a user could leverage the scroll wheel, since the number of pages to leaf through could be very large.
    – Riche Design
    Nov 16, 2012 at 17:48
  • Thank you all for your suggestions! I think this interface works well because of the amount of pictures and since users can pick and choose the album they like in a short amount of time. Instead of the direction buttons, we went with a scroll bar instead, so users can see quickly browse through. Like the idea of search bar too.
    – AmayaMoriko
    Nov 20, 2012 at 18:40
2

You could use a title for the album and a little bit of white space to differentiate albums.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
1
  • 1
    This variant is better (user could see all the selected photos without switching between albums) but may have a performance issue for a large number of albums or photos. I suggest to show just a first 10 (for example) photos of the every album and add a link "show all photos" which will download the entire collection, so the user may quickly decide whatever he or she will need photos from the particular album.
    – alexeypegov
    Nov 16, 2012 at 12:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.