A settings widget for something at work.
A few notes on interaction and function:
* This is the reverse side of a simple data visualisation. Once the settings cog in the upper right corner on the other side is pressed, the widget flips around to reveal some basic settings.
* The red arrow in the top right will return you to the front chart without saving any changes - basically a cancel action.
* The checkbox, once a change is detected, turns green and once clicked saves changes and returns you to the front chart.
* The first field is the chart name, this can be changed at will.
* The next section gives you the option of selecting an accent colour for the widget - this choice is reflected in both the selection graph, slider active range and front chart.
* The graph below is a copy of the front chart - it allows you to select a timeframe within the last 24 hours and refine (and re-render) the front chart using the sliders. This lets you focus on a specific time-period, be it a moment of high activity, or a sudden drop in activity.
10 months ago
Seriously this is quaintly beautiful.
@Ryan Murphy seriously, it is but the text rendering.
Oh wow, love those colors.
@Bobby Giangeruso ⚒ - this is just a mockup of the working, coded version. The text rendering isn't super important ;)
Yeeeer @Bobby Giangeruso ⚒ what Adam said!!! na na na nana anana
@Ryan Murphy lol, you alright man?
First off, it's awesome to see a Dribbble shot with context and interaction well described :)
I'd consider thinking about how changes are saved. If I wanted to change the colour and timeframe for instance. I click the cog, it flips and I select a colour, the tick goes green and flips around, then I'd have to click the cog again, it flips around again and then I can change the timeframe, then it flips back. All feels a bit messy to me. Also how would it know when you've finished changing the name? Lost focus? And what if I want to have a look at a few colours before deciding for definite? In my opinion a better solution would allow the user to change everything they wanted in one go, then click a save button.
The red back arrow, you've said it acts as a cancel feature, so why isn't it a cross? The arrow doesn't help me understand if I click it will my changes be applied or not? A cross gives a much stronger indication that it's a cancel action.
The time selection tool, the dots don't indicate particularly well I can move them. Double ended arrows on the other hand do so much more I think. I'm also interested in your rationale for having the time selector as a different element to the graph. Why not just adjust it on the graph?
Besides those couple of things looks great. Really simple, seems fairly intuitive and a great pallet of colours.
@Jack Holmes Thanks for the very considered feedback Jack. Your point about the green tick comes down to me omitting something from the description. The check will turn green indicating it's active, but the settings will only save and re-flip on click.
The arrow, in my mind, is a good indication of going back - which is what you are doing in essence. I tried having a cross in a box like the tick, but it looked a little clunky.
The only thing I don't like here is the box title. Feels somehow disproportional. But the rest, looks stunning! :)
Have you tried moving the 'back' arrow to the left of the title? Would allow you to have that check box turn green and maybe move over to say 'save' so it's clearly different and has a larger hit area. Would also abolish any misclicks.
Adam, I really love the colors you used in this. Great job on those as well as the simplicity behind it. I know a ton of people have been commenting about your positioning but I don't really think anyone has mentioned it from the user experience perspective per se. What was your reasoning for keeping the red arrow next to the cog? Do you think, from a UX perspective, that most people will understand immediately what each does and not be confused? Or Is it not even relevant for the purpose of this visualisation?
Either way, great job and I'm looking forward to seeing what you do with this!
The colours, the design, the whole lot, love it. It's fantastic that this is the working version, makes so much more sense than mocking it up in Photoshop (or even more behind, "wireframing" haha).
Is this inspired by GoSquared? I think I've seen similar module things. :)
Keep 'em coming, @Adam.
cool widget... thnx for sharing the interactions...
This is perfect!
Awesome looks terrific :)
Thanks for the feedback guys. I'll address some of the comments:
@Matt Kump?? I've taken this back to the canvas a little and dropped out the checkbox in the header - while it kept the window nice and button free, you're spot on about misclicks. I've opted to keep the return arrow where it is, moved over to the right edge (replacing the position of the checkbox) as this is where the settings cog sits on the other side - I think the relationship in position between the cog and the return action works nicely to show they are related actions.
@Cat Smith Thanks! I've decided to move the arrow to the right, so that it and the cog on the reverse side sit in the same position - hopefully this will reinforce the fact the two are related.
@Louis Bullock To some extent yeah, their dashboard is awesome in that it's really modular which is something we are experimenting with too.
Beautiful work - love the simplicity of this :o)
@Adam Whitcroft I agree with the feedback regarding the arrow. It doesn't scream cancel to me.
Apart from that awesome work. I really like how clear the green (turquoise?) is compared to the background, it makes the data easily readable.
Very beatiful and usable widget. I like how you use colors to highlight functionality. Great job @Adam Whitcroft
Beautiful colours, they really do a good job at defining their uses and add to the flow of the interface.
9 months ago
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.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter