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:

1) Spacing
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.

2) Symmetry
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.

3) Consistency
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.

4) Focus
Ask yourself ‘What does the user want to do?’. With comments, it’s either viewing a comment or creating one. Simple hey!

5) Weighting
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.

Fig 1 - Online Accounting - Edits

Fig 1

In fig2, John sent me the expanded view. We’ll look a little more closely at what comments we both agreed on. Keep in mind 5 simple things: spacing, symmetry,  consistency, focus and weighting.
Fig 2 - Online Accounting - Edits

Fig 2

In fig3 below, you can see a couple of changes we wanted to make to the comment box.
Fig 3 - Online Accounting - Edits

Fig 3

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.

Fig 6 - Online Accounting - Edits

Fig 6

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’.

Fig 2 - Online Accounting - Edits

Fig 2

One such question I still have in my head is Fig1 the comments box is just below the notes box. The end user will ask ‘What’s the difference? ‘notes’, v’s ‘comments’, are they not the same thing?’. Notes is for adding a note to the invoice (public) and the comments are for the user (internal). So they have quite a strong apposing function. Do you think they should be so close?


Pin It on Pinterest

Share This