At Fry-IT
Lesson learned on "Save expense" button usability
13th of December 2007
Yesterday I sat down with a lady and introduced her to SnapExpense and I stayed whilst she was submitting the first expense. Between the talking I shut up and just sat back observing what she was doing how she reacted. A cheap and quick usability study. I learned a lesson about the "Save expense" button on a form.
The form consists of a big image (the expense) and a form at the bottom. Below the form are some miscellaneous options ("Split expense" and "Delete expense").
What happened was that after she had filled in the Amount and VAT she started scrolling the page up and down and rolled the mouse over the "Split expense" button. She even asked me "Do I split the expense?". That's when I had to cut in and say "No, you press Save expense now".
I suspect the reason she didn't see the button was because it was too close to one of the input sections ("Expense date" in this case). Perhaps I should make the "Save expense" button bigger and with more whitespace padding around it and place it more centred instead of being in the "right hand column" like it is now.
What do you think is the best caption for the button? "Save expense" is quite obvious I think. Perhaps it should just "Save" or "Save chances". Ideas welcomed.
Comment
Hi
I'm Lisa, a friend of Z and Marcus's. I am a Usability/Interaction Designer by trade.
You really should divide the functionality up so that the input part of the tool and the actions on the whole item e.g. the expense are seperate. In other words ... Save, Delete and Split should be grouped together.
This is how users expect functionality to work.
When they are grouped liked that you don't need to put "Save Expenses" because it is obvious that all the functionality applies to the whole item.
I've done hundereds of usability studies - one is always suprised by what users do with your tools. I really recommend doing it whenever you can (however quick and dirty it is). Good stuff (-:
I'd say there are multiple reasons as to why the user was uncertain.
All elements have the same appearance and visual weight in the form controls. They are all of equal size, the only thing that differs between them is the positioning.
Try grouping the elements together and apply different visuals to them. I think the "Save expense"-button actually may be harder to spot as of now with it's current placement and looks.
I think keeping "split expense" and "save expense" grouped together while keeping the "delete expense" button a bit to the side (have a look at the save forms of any OSX application for a good general idea of how this can be done effectively if you aren't keen on reading up on some HCI).
Actually, I think the "delete expense" button is redundant and poses a potential threat against user input data when you're creating a new expense. Why would you want to delete something that you just created?
http://www.useit.com/alertbox/application-mistakes.html
has some good reading about common problems, even if you don't agree with all his points.
http://particletree.com/features/rediscovering-the-button-element/
also may have some helpful tips (from the creators of WuFoo).
Usability studies always show whitespace is very important... although developers tend to naturally avoid it. The technincal people tend to want as much functionality in as little space as possible. Making buttons and fonts different size looks bad! The solution is in the whitespace... The more important something is the more whitespace it should have around it. Try it, see what you think.