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 have a situation where I am not allowed to put buttons on Actionbar as well as bottom bar. The bottom bar has Save and Cancel when in Edit mode and to make it consistent across all screen we are not putting additional icon there.

Now, when in Attachment screen, where we can have images, word doc, pdf, etc. How do we design this screen where we can add attachment as well as delete them. I thought of putting a delete button on top of each attachment and a faded box in the last to add one. But the client want the attachments to be viewable as well. That means if i click on them it should be visible as normal doc. But how to put delete and add functionality.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this question
    
What are the "sections" for? Different file types? –  Matt Obee Sep 6 '12 at 8:39
    
@matt Obee No, they are more like topics or folders. We want to display all files under all the topics sectioned based of topic. –  ajayashish Sep 6 '12 at 8:48
    
Are those sections pre-defined or does the user have to create them? –  Matt Obee Sep 6 '12 at 8:56
    
Comes from the backed. It can be single section or multiple –  ajayashish Sep 6 '12 at 8:58

7 Answers 7

One solution would be to use one row for every item. Here's how we did it:

Image uploader

The example is iOS, not Android but the pattern stays the same.

Additional thought: You don't need a cancel button.

share|improve this answer
    
This looks like a good solution, particularly when you consider things like long file names. –  Matt Obee Sep 6 '12 at 8:41
    
Yes, This is a nice solution but it is based on List view approach. I want to see an approach for thumbnail view. –  ajayashish Sep 6 '12 at 8:43
    
Shouldn't you choose the view that fits the purpose instead of "wanting a grid view" that doesn't seem to work very well? –  Phil Sep 6 '12 at 9:15

Pressing the thumbnail seems like the most natural action for viewing the file. How about repositioning the delete button slightly? I'm still dubious about the grid layout though.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
Cannot be done. We can either perform the image action (clicking and expanding full view) or the delete action. 2 actions cannot be combines together. –  ajayashish Sep 6 '12 at 9:09

Long tap on an item can bring popup context menu with "Remove item" option. In order to inform user that such feature exist you can show text above grid and below title bar e.g. "To remove item long tap and use Remove option". You can introduce aditional logic around text e.g. do not show it once user removes first item. Long tap is one of the standard features on Android and users are used to it.

share|improve this answer

Assuming that delete isn't as common an action as view, you could also put the delete action on the view state (a user taps to view the attachment, and then has the option to delete the attachment or go back to the edit screen for all of the attachments).

share|improve this answer

I imagine a certain area (maybe a bin icon) where items can be dragged to. Items vanish once they arrive at the delete-area. However, a ,,bin'' might not be the best icon, because the user will expect, that he can retrieve icons from the bin. If this is not possible or not intended, the delete area should be visualized another way.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

The approved method is to transition to a contextual action bar on a long press to work on "Data"

That pattern is basically, long press, change the "state" of any items you want to be affected, show contextual action bar that lets a user take action(s) or cancel, then revert back to your standard action bar.

share|improve this answer

I would suggest a combination of some of the comments...

A Click would show the image/expand it, what ever. A longer press shows up a certain area at top or bottom where you can drop the file at...

enter image description here

Additional you can add an area - e.g. at the bottom - to duplicate or edit images or the filenames...

share|improve this answer

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.