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'm working as a one-man user interface team for Kanbanery and I'm currently working on improving our user interface and user experience for task attachments. Currently we support two types of task attachments - regular attachments (just shown as a list) and attachments that we can preview (images etc.) that generate a thumbnail.

My task is to make it obvious how to preview and how to download attachment without making it too busy (our UI is pretty busy as it is).

enter image description here

Currently clicking on thumbnail expands the image to a modal window and clicking the title (or the "arrow down" icon) downloads it. I don't think that's obvious enough. Also, I don't like the fact that big pictures take so much space.

Any ideas on how to improve it?

share|improve this question

2 Answers 2

up vote 4 down vote accepted

If you don't want to clutter you UI and you have attachments with and without preview I'd stick to simple list, I'd add as small thumb as possible on that list and make preview box (like lightbox) not covering that item/list to ease next/previous preview on hover (or add preview/zoom button).

Something like this:

hover zoom

You could also make next/prev buttons in lightbox as well as download link in lightbox footer to ease navigation through preview-able attachments...

Also to make it more elegant I'd stick with square thumbs...

share|improve this answer
    
We don't have space to have preview box on the side, but I like the layout that you proposed. Thanks. –  Mariusz Jun 9 '11 at 13:29
    
See how he has text links for download and delete ;) , I like this solution better too. Nice one romke! –  jonshariat Jun 9 '11 at 16:19
    
I'd use absolute positioned preview box ABOVE existing content (with z-index), something like huddletogether.com/projects/lightbox2 has to offer but simpler. You only need preview when you're scoping through files so having reserved blank space on tight UI is pointless. Side note: Links for download & delete are larger than only icon, so it's little easier to hit. –  romke Jun 10 '11 at 10:22
    
For clarity purposes, I would differentiate the download button from the delete button. –  Virtuosi Media Oct 27 '11 at 7:51

Dont be scared to use text links, google of course loves them. Here is how google treats attachments in gmail:

attachemnts in gmail

Now I think this is rather ugly and un organized but the UX works very well. I know exactly how to download each one and how to view each one, etc

You could do something like this:

hover over

It could be on hover over or just there. (you dont have to use a drop shadow haha)

share|improve this answer
    
We don't need Google to love us, it's a closed project management application and attachments are visible only for users that have access to your board. Also, I have about as much space on-screen that my screenshot has, since it's a Kanban-based tool and that's the width of a Kanban column. I like the second idea on hover though, that is pretty nice. –  Mariusz Jun 9 '11 at 7:51
1  
I didn't say you needed google to love you. I said it's good UX but it's ugly. You have enough space for text. –  jonshariat Jun 9 '11 at 14:24

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.