4

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?

Improve this question

2 Answers 2

Reset to default
5

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...

Improve this answer
4
  • We don't have space to have preview box on the side, but I like the layout that you proposed. Thanks.
    – Mariusz Ciesla
    Jun 9, 2011 at 13:29
  • 1
    See how he has text links for download and delete ;) , I like this solution better too. Nice one romke!
    – jonshariat
    Jun 9, 2011 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.
    – rombarcz
    Jun 10, 2011 at 10:22
  • For clarity purposes, I would differentiate the download button from the delete button.
    – Virtuosi Media
    Oct 27, 2011 at 7:51
6

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)

Improve this answer
2
  • 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 Ciesla
    Jun 9, 2011 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, 2011 at 14:24

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.