A quick idea to improve the current invoice status toolbar that sits directly above your draft invoice in FreeAgent. Shown are three common states.
Bearing in mind you actually use the device to move through the various states (as opposed to it simply being a breadcrumb), do you think the various active/current, disabled, completed and actionable regions are as effective as they could be? Any other comments appreciated.
almost 3 years ago
I appreciate the idea and how you're trying to convey lots of information, but I don't think people will get it. This looks too much like a hierarchical breadcrumb instead of sequential steps, and I don't think it's a good idea to change the wording according to the current step.
Totally user-friendly as usual mr robbie...
The second one did confuse me a bit, the fact that the 2 items on either side of the completed 'sent' item are actionable.
Is this cus you might make a draft of an already sent x. ?
(Aside from it being out of context and me not knowing the process, it all made sense bar that one thing)
Oh... and the only other thing: the fact that on the 1st line, I assume 'paid' is disabled as the user needs to progress further, yet on the 3rd line, the first 2 items are disabled cus they're completed...(as i understand it) What's getting me is that they both have the same display state... nothing to diferentiate them
But seriously I'm nit-picking (albeit constructivly, it's still nit-picking) - looks awesome man.
Update: i think changing the wording is what makes it more usable and users more likely to interpret it as actionable, as apposed to just a breadcrumb, that being said, i think in the 3rd line, if the process is complete then 'mark as sent' should still be 'sent' as in the 2nd line. to keep it consistent.
Thanks for the feedback Sacha. Regarding the word changing: it's probably a little confusing because of the way I've presented it here, but there are different ways a user can end up seeing these various statuses. That said, it's a fair point, and one reason why we've been looking at some completely different ways of changing the statuses of invoices. Cheers!
Chris: Yeah, you can make a sent invoice into a draft again. This is a consequence of the way the app has evolved, but something we've spoken about changing.
Good catch with the same visual treatment of disabled vs. completed stages. A subtle tick appended to stages that are both completed and subsequently disabled could help clarify that. Thanks!
I think it works, but have you thought about replacing 'Add manual payment' with something like:
[strong]Payment Outstanding[/strong] [smaller](Add manual payment)[/smaller]
I think that makes more sense compared to 'Paid'
Approve of this process! It's very good and I'm pleased you are taking the time on the UX like this. :)
Very nice Robbie!
I like the design but, speaking as a FreeAgent user, I occasionally find myself having to look twice at this even after using it for a couple of years.
How about keeping it as a breadcrumb trail but moving the links? I think the problem with it is the way the text has to change because it's a menu as well as a status indicator. The 'Save PDF' and 'Send by Email' links are already on a separate part of the page and I think it would make it a lot clearer if these other actions ('Make Draft', 'Mark as Sent', 'Add a Manual Payment') were in the same place.
Andy: That's a fair suggestion, though I think symptomatic of a bigger issue surrounding the way we're wrongly treating 'statuses' and 'actions' the same way here. Thanks for the input, much appreciated.
Zach: We're constantly discussing iterative improvements like this in the dev pit all the time, so it's great to be able to open it up and get feedback from users and non-users alike before making decisions. More to come!
Sascha: Thanks :)
Simon: I'm with you on the having-to-look-twice thing, and you're absolutely right that there's a problem with using it as a menu vs. status indicator.
I agree with your suggestion of relocating the invoice actions next to the rest of the invoice action buttons for contextual reasons, but there just isn't enough room to accomodate them all at smaller screen resolutions (I'm inclined to think it'd be button overload too).
I think there may be a solution in the use of a device similar to the 'More' dropdown button, where the actions appear as menu items in the dropdown and the current status appears as the button title. Thanks very much for your input.
Hey Robbie, Apple called - they said they'd like their breadcrumb back please.
Nah - I like it. It's very Apple-y but it makes sense I guess.
I was going to mention what Chris mentioned about the states of the Paid, and the first two items on the 3rd bar - but he beat me to it. I was a little confused to see 2 states of completeness effectively - the green tick and text, and the greyed out. Should there be so much of a difference?
Can't think of much else to feedback. I don't use the system, so can't envisage it in place.
Haha! I particularly love the "I guess" bit, Alex. I'll be sure to tag future UI stuff with 'apple'. Cheeky bugger.
Thanks for your feedback, folks. It's now live in the app!
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