Bullet Accounts User Interface in 5 Points
Recently, we added the ability for users to add comments to items in Bullet Accounts. I’m going to explain how we approached this user interface change using 5 key points. There is quite a lot of talk around designing interfaces; with buzz comes a lot of magical mystique. I can assure you there is no magic with interface design; it’s just a very simple process. If you follow these five core points, you should be able to improve your page focus. Of course, there are higher level questions you should be asking, like ‘what do you want the user to be doing’, ‘why is the user here’, but for the purpose of this post we’ll focus on the layout aspects.
The five points we’re going to look at are:
Spacing is a weird thing. If you’ve too much white space it becomes a stronger focus than the content. Obviously you can use that to your advantage on landing pages.
Very simple: just make sure you align everything. If you don’t, your eye starts to jump and that’s tiring. If there is symmetry, your eye will just follow the flow. Our eyes are great at spotting patterns or breaks in them, so keep copy and boxes aligned.
In Bullet, we use big form fields for a couple of reasons:
1) It gives the user a feeling of simplicity. You see that even more on the Bullet Dashboard with the use of big buttons.
2) Page space is a premium commodity. You don’t want your pages to be to long or cluttered. Using big form fields took up tones of page space, but as a result it really forced us to think in absolutes? Like symmetry, our eyes look for breaks in patterns, so don’t give them the chance.
Keeping those big boxes constant in the site is important on all levels, even though we felt the comment box was a little big as a result.
Ask yourself ‘What does the user want to do?’. With comments, it’s either viewing a comment or creating one. Simple hey!
What I mean by this is ‘What copy should be bold? What copy should be in italics etc?’. A really simple task to do is make all your copy grey. Then apply ‘Focus’, – ‘What is the most important and common piece of information here that the user will look for’. When you find that out, select that copy and make it black. Look at the page and you’ll start to see the focus becoming clear. The key thing here is to only darken the ‘most common piece’, of information.
Development Screen Shots
Below, we’ll show you screen shot from the pages with the functionality that John wanted to include, and we’ll show you how we applied these 5 points.
In fig1 below you can see the invoice screen with a ‘closed’, comments box at the bottom.
As you can see in the final edit below fig 6 we have hit those five points: there is even spacing of white and copy space, our layout is consistant, the weighting is bringing focus to the key items, the comment box and the comments made. We could probably add a little more spacing between the comments. Also note everything is aligned, and I include the weighting in that too.
Below is the original, see how you’re eye focuses like this “Comments Heading’, then ‘X’, then ’29 May, 2012′, in the new version above it’s ‘Comments Heading’, so the user know’s what they’re reading and then ‘Comments’.