Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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!

share|improve this question
    
You seem to be missing your picture of what the interface currently looks like.... –  Roddy of the Frozen Peas Nov 5 '12 at 22:48
    
Yeah, sorry about that. Seems like I cannot attach a mockup since I just started this account. >< –  AmayaMoriko Nov 5 '12 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 '12 at 22:54
    
oh! ok. I'll give that a try. One second. –  AmayaMoriko Nov 5 '12 at 23:11
    
Alrighty! Mockup is re-uploaded. –  AmayaMoriko Nov 5 '12 at 23:14
show 1 more comment

2 Answers 2

up vote 1 down vote accepted

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

share|improve this answer
    
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 '12 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 '12 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 '12 at 18:40
add comment

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

share|improve this answer
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 '12 at 12:18
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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