Decided to rebound this great, simple concept by Joshua Tucker, with a slightly refined take on the GUI.
Apart from updating the buttons/box to look identical to the the native GUI, I also changed the '+' icon to something more suitable.
Although the cross made sense iconographically (ICE symbol), putting it in the context of a button, it sends the wrong message to the user that it is an action button, rather than a navigational one. The addition symbol can be found throughout the OS, used as an 'add' action. Thus the user would assume the same here, so I opted for something clearer.
Apart from that, the concept is the exact same! Just a more native take on the GUI side of things. :)
Full Pixels — http://cl.ly/LPcu
Joshua Tucker Original — http://cl.ly/LP21
5 months ago
I think you did a good job not straying too far from a Joshua's original, but I look at this and wonder what could be done with all that dead space at the top. Would the 'Back' or 'Return' button be better served up there?
@Tobia Crivellari ™ @Ted Goas Thanks guys.
The empty space up top is reserved for the numbers dialed (as well as the backspace button) or the emergency contact chosen, it's just in these stills that it seems empty. Upon action it would be filled up. :p
I like the icon choice much better. Great work with that. Now that you got me thinking on those lines, a suggestion I'd have would be to style the alert symbol after the alert symbol used on notifications.
The list looks great too, the only exception would be if it was a scroll view. The reason why I left the shadow out is because I wanted to leave space for the possibility of adding contacts to scroll to beyond the 4 shown.
Looks awesome though.
@Joshua Tucker Thanks, & funny you mention that, it was actually the first variation I tried! I found that the human silhouette was too 'full' (opposed to an exclamation or phone, which are 'slim') to look good inside a hollowed out triangle; also made it harder to identify due to being crammed a bit.
As for the list, though, either way it would need to be a scroll view. You'll notice something about this in the way the lock screen handles notifications; individually they are in bubbles (or in this case, boxes), but aggregated the border is removed and they take up the entire screen space. That's because there there needs to be padding on all sides of a bubble/box to identify it as such, otherwise you have an odd visual of gaps on the left and right.
Even on the iPad, once the notification bubble has vertically extended all the way to the top/bottom bezels (due to many notifications), the bubble then locks and no longer extends, but places all the notifications in a scroll view (so they never touch/extend to the bezel edges). It would be the same here, essentially.
Glad you liked it, keep it up man! :)
Agreed on the scroll view shadow, but at the level it's shown on the alert, it gives the impression that it's not. On the iPad for example, it only shadows the top notification and the rest scrolls underneath.
@Newar EDIT: Now that I think about it, I think we're both approaching this in the wrong way from the icon standpoint. In the end, what's most important? The triangle (as an example), or the contacts icon? The contacts icon is the most important no?
What I'm thinking now is make the Contact icon the full size (56 px height to match), and then take a first aid cross piece out from the bottom. It's the best of both worlds in my opinion since the contact is the biggest icon and the cross section emphasizes emergency.
Going to give it a try.
@Joshua Tucker Great point about the icon, though i'm not entirely sure, either.
It all comes back to what the emergency call function is intended for in the first place. When you go into that mode, you'll notice that the languages cycle, meaning it is intended to be usable and eligible by anyone who picks up or happens upon that phone. So from this perspective, what symbolism for the contacts silhouette applies more: first aid, or emergency?
I think the triangle is more symbolic emergency contacts than a first aid symbol, which wouldn't be applicable for all use cases.
But I do agree about emphasis on the contact, rather than the alert/emergency. Perhaps something like this would be most suitable; http://i.imgur.com/wnaAf.png
@Newar We're seriously on the same wavelength! No joke, I was working on a design exactly like you posted, except, I made the triangle with a white stroke, red background, and white phone to emphasize the urgency. I think the red background makes it pop. The contact is the main, but there's the supplemental part of the emergency triangle.
@Joshua Tucker Haha, nice! Yeah, I think issue of size can be addressed (rather than colorizing) by embedding a slightly larger triangle atop the human, but fixed to the base rather than the top right. Something like the dribble sign up icon, for example, but with a triangle rather than a plus (log out to see what I mean ;p).
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