We've been working hard on this ADN and Twitter client and we wanted to experiment on an interesting and straightforward way of selecting multiple accounts. The animation is terrible as I created it in PS but it should give you an idea of switching between them, just slide left or right to swap, easy! The plus button attached to each account is there for adding even more accounts :)
about 1 year ago
Cool! @Fabio Basile
I'm not sure the + icon is needed next to every account, though. (How often will you need to add accounts?) Maybe just at the end or beginning of the row?
This looks slick. I'm curious how this will interact in real life. If I look at the animation I think this 'can' get very annoying because the hit area is very small and mistakes to pull the content sections are likely.
Basically this: http://cl.rbbrt.me/LC5p
That's all we want. :))
@Jack Bingham Thank you! There are two issues with that, 1 we don't know how long a name is going to be, so the position of the button has to be flexible. 2 the other accounts peeking from the right could overlap the button. Still heavily working on this part though :)
When would the partially visible timeline update to show the different timeline? That would need to be smooth, or it would ruin the effect.
Also, it seems to me that a better method for adding new accounts might be by having an additional, empty "account" that you can tap to sign in to a new account.
Nice to see you're trying to do things with the UI that nobody's thought of yet :)
Basically a great way to switch accounts, but what happens on the right side of the screen? Does it stay the same until I close the menu? Could be misleading, doesn't it?
I like the idea, but I am not sure what you want to archive with the "+". Add new accounts? Or add something to the account? I would keep the add account option somewhere different.
Yeah i'm with @Jack Bingham on this one. Maybe you could include a + after the horizontal list? How about a + inside an empty avatar container? Failing that account management could be handled elsewhere in the app? Looks great though @Fabio Basile - Cant wait :)
@Robert van Klinken thank you! Right now the entire area is a scrollable table, I made sure the buttons and general 'hit' areas are big enough to be tapped easily. Also adding new account is an operation you don't need to do frequently, swapping them is the most used action and it needs to be fast and easy to use.
@Fabio Basile Ah I see! A bit like the Path menu nowadays.
@Jelly @Sven Read @Matt Sellers great point guys, we'll definitely look into the empty account instead of the plus. @Marcel Wichmann nope the view refreshes immediately once the account is selected. Currently you can also scroll that right view while the side menu is visible :)
I think it's a nice soft and easy to understand interaction.
Also a great plus for the overall APP to have this feature on such easy reach - that's really nice!
The one @Robert points out - on having this two UI slide interactions tightly together... But I mean... it's not that you'll always be changing accounts, right? ;)
Another PRO: This looks sleek as hell! ;)
@Robert van Klinken @Samuel Couto thank you guys! :) Trying to keep it innovative and usable. Regarding the Cons, it might be hard to see on the shot but on the actual app it's impossible to tap on other elements by mistake. On this particular element for example the entire row can be scrolled. There is no need to tap on the peeking account to activate it, just scroll and once the other account is in view the entire screen will refresh showing you the changes :)
+1 on the whole "new slide for adding accounts". Either by sliding all the way to the left (or right) and maybe with an auto-focus on the input field, making it a breeze.
I also share the concern about the right side of the screen (the feed). You'd either need to gray it out, switch it immediately on swipe (which could be problematic with several accounts) or have an "active"-button thrown in there neatly (tab-confirm on the selected account?).
Looking great though.
I'm waiting for this!
1. Nice interaction to switch between accounts. Since the same app handles both Twitter and APN, shouldn't there be an indicator as to which account belongs on which network? Or am I missing out on something?
2. There is a possibility of the over-slide (main window) closing in when the user is trying to switch between accounts using a right-to-left-swipe. Hope that is taken care of. :)
@Nikh thank you! :) 1. Unfortunately there will need to be two apps for this, Twitter won't let us include ADN on the same app, they are very strict about this apparently. 2. The entire account selecting part can be slided, there is enough space for it not to be an issue :)
@Fabio Basile : 1. Ah damn it! They always have to. :/
2. Great. :D
Looking forward to this.
One thing @Fabio Basile - Push will be crucial! At least for me. :)
@Benjamin Fritz same here! :) Definitely looking into push! :)
Lovely concept - tiny thing though, rather than
[Profile 1 +] [Profile 2 +] [Profile 3 +]
[Profile 1] [Profile 2] [Profile 3] [Add an account +]
Seems redundant to have it on every slide.
e: was just about to post then realised that's what everyone else has said — leaving my comment to reiterate :)
I like how you have the overflowed slide peeking onto the current slide though, makes it very discoverable (which is the problem with lots of off-canvas interactions)
@Fabio Basile It could be the deal breaker at the end :-/ One can't neglect the ongoing server costs for a decent amount of users.
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