keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
113,965,162,911 pixels dribbbled
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
32 Responses (page 1 of 2)
A small part of the UI of that thing at work, but this is probably one of my favourites.
While we've worked really hard to make the process of creating visualisations as easy and intuitive as possible, the nature of the data driving them necessitates a bit of setup. With this in mind, we came up with what we've labelled the 'double delete' button.
Addendum:
@Jimmy had some great input, which I'll be putting in place tomorrow. I've amended the function write-up to match his suggestion:
It works like this: The top state is the button itself, this sits unobtrusively in the bottom right corner of each tile's settings pane. On hover, the button expands to show the red 'Delete' state - click once and you get the green 'Are you sure?' state - another click and the tile is gone.
So all told, you need to click the button twice to delete the tile. Hopefully this will stop any accidental deletions.
3 months ago
Pro
Daryl Ginn
http://www.youtube.com/watch?v=yNY6ZstdUdY
3 months ago
Pro
Mike Busby
Very clean!
3 months ago
Pro
Jimmy
Do you mean if you hover over the white icon, you get the red icon? Click the red icon, gets you the green icon. Click the green icon confirms delete.
Cause clicking the white, gets you the red but hovering the red, switches to green, means you'll never see red since as soon you click white, you're hovering over the red, which takes you to green. Or am I just confusing myself… :P
3 months ago
Pro
Joe Barber
Question- Wouldn't the user already be hoving it if they've just clicked the button? So the "Delete" state would either just flash for a second or never be seen?
Edit: Yeah, Same question as @Jimmy
3 months ago
@Jimmy No you've got it. At the end of the day, we just want to alert people that they are about to delete the visualisation widget, so clicking on a trash can and getting an "Are you sure?" still solves the problem perfectly. The red state is more about giving the button a little finesse.
@Joe Barber Potentially yes - but that's ok. There is still the feeback mechanism to make sure they want to delete which is the end goal :)
3 months ago
Pro
Dominik Martin
Amazing flat UI!
3 months ago
Nice. I’ve been spending a lot of time rethinking buttons recently. You seem to have nailed the “how can we get more out of them?” I’ve been asking myself.
3 months ago
I find this to be a bit of an anti-pattern, but hell, if you implement it and "double delete" becomes a thing...I'll eat my hat.
3 months ago
What's the font please?
3 months ago
@Ben Howdle It has been implemented :) What about it do you find an anti-pattern? Surely it's no different than a click followed by a prompt that pops up? This is just more elegant.
3 months ago
Pro
Jimmy
@Adam Whitcroft Oh, I have no problems with the 2x clicking. Just a lil confused with the order - click hover click vs hover click click.
I think hover click click may be more intuitive than click hover click.
Man, I sound like a mechanical pencil.
3 months ago
@Jimmy Aah I see what you mean - thanks for the input, that's a good idea. I'll give it a go tomorrow.
3 months ago
Agree with @Jimmy, and that's how I first imagined it working. Lovely work, in any case.
3 months ago
Pro
Jeffrey de Groot
Like it! Only small detail I would change is the thickness of the checkmark. Compared to the thickness of the trash bin it seems a little out of proportion;)
3 months ago
I'm with @Ben Howdle, this feels like an anti-pattern to me. Why have you opted for a double delete instead of an undo feature?
3 months ago
@Jack Holmes As I mentioned to @Ben Howdle I don't see how this is an anti-pattern. If you go to delete a shot on Dribbble, you click delete and this pops up, asking you to confirm. They have chosen not to use a recover feature, and so have we. Where would it go in the interface? This action applies to deleting a visualisation widget - once that is gone, should be keep a list of all the ones you have deleted with an option to restore them?
This is just a more elegant way of doing a pretty standard click + confirm dialogue. I hope that makes sense.
3 months ago
@Adam Whitcroft I understand where you're coming from, and agree that you're solution is much more elegant than most.
However your solution to the problem of accidently deleting something doesn't take into account habituation. People see "are you sure" messages everywhere, as a result we've built up habits of just clicking "yes" until the system does what we want. Most often only once deletion has occurred does the "oops I didn't mean to do that" moment happen. Undo functionality resolves this. Without the ability to undo you risk users feeling like they've done something wrong, which no software should ever do in my opinion.
Your description of the Dribbble interaction only confirms this is an anti-pattern to me. "Something which is commonly used but ineffective in solving the problem".
Exactly how you go implemting it, without undstandung the full product I couldn't really go into.
I hope this doesn't come across too negatively, just thought it would be worth mentioning the problem you're trying to solve, not just how lovely the little trash can icon is.
3 months ago
Rebound
Suggestion
by Dan Berko
Great Idea!
My only suggestion:
Since you're implying that delete has an "alert" connotation with red, following the call to action with green disarms me. I don't feel as though I need to be worried about the implications of the action.
However, I do like that we're asking the user to confirm their decision. So if we're to follow that thought, this is what I would consider a logical step since we're still alerted to performable action.
If this is a poor idea, let me know and I'll crawl back into my design hole. ;)
3 months ago
I can see where @Ben Howdle and @Jack Holmes can get the anti-pattern thing. I really like this solution, I think its a brilliant use of space, but I also feel like popups/prompts are better because they focus your attention and screen on the question/task. When it's something as important as deleting, it should be the only thing they are focusing on. In my opinion, when you try and save space and introduce elegant solutions, you can sometimes lose people's attentions. Take this for example; when they press the delete button, the user still has access and a view of the rest of the site. They need to focus their attention on that little section for the duration of the action. Haha, this is really hard to explain; I hope it makes sense.
But on the other hand, a problem with popups is sometimes people forget which 'thing' they are deleting/actioning. This is where I think this shows its advantages because its attached to the actual 'thing' that you are deleting/actioning.
i'll stop rambling now...
3 months ago
Nice and clean like it :)
3 months ago
love it!
3 months ago
Pro
Eddie Lobanovskiy
Beautiful work Adam!
3 months ago
Pro
Oskar Levinson
Beautiful! And what a great example of what dribbble comments should be like. Constructive feedback and discussion :)
3 months ago
well done! but i think that those colors are over used these days.
3 months ago