better follow HIG in UI

[Michael Rooney]

Generally main window could be made slicker by following i.e. Gnome HIG (or just by adding some paddings to elements and better aligning them along the grid). But I say that because I like looks of most Gnome apps.

[arty (me-arty)]

This is my first approach to better design. Unfortunately it mixes padding illustrations with some new ideas (I'm not a graphic designer, so even this drawing took me way too much time).

First: I've added some paddings to table, though these are not too visible. I aligned column contents with column titles, and increased row height by 2px.

Second: I've added more space between account names and "Accounts" title. Also I've removed useless colons.

Third: this is not displayed on design, but it would be nice to draw a line for current date in summary graph. I use wxBanker to know how much I can spend given my expected income, so current date is somewhere in the middle of graph and that's not too convenient.

Following are my ideas on how to generally improve interface.

First: when you need to choose only one item of many, you should use radio buttons. These are much easier to understand then links buttons, only one of which may be active at a time. So I'm pretty sure this idea should be implemented.

Second: "Hide zero-balance accounts" should be named "Show zero-balance accounts" and should be moved to Settings menu (unless it is used every 10 minutes, which I doubt).

Third: "Case Sensitive" checkbox should be moved to Settings menu too (this is based on assumption that most users change this option once in their lives) and named "Case-sensitive search".

Fourth is somewhat speculative. I suppose that when you search all your accounts for something, you do not care for current account. Thus we can remove combobox "where to search: current account or all accounts" and replace it with extra radio button for accounts total. Any time you need to search whole database for something, you enter search terms and just activate "Total" radio button. Bonus: you can see transactions for all your accounts, which is now impossible.

Another speculative idea about search is that most times you do not need to choose what field to search. I'm pretty sure that people will be happy if search goes across all fields, so users won't need to switch anything. I can predict two conflicts: search for 12 dollars will show all transactions in december (12th month) and search for some amount may match same number in description field. Both of these are solved by adding currency to number: search for "$12" or "12 руб" will match only amounts column.

Fifth: I'm pretty sure that current place of account buttons is not a good one. My design shows that these should be put on a toolbar. Text label on at least one of them is an easy way to get what these buttons are for — accounts. That toolbar is a good place to put search field too. In this design I used Gnome stock icons for buttons.

Concerning calculator I do not use it, so I might not see issues with it. I've got two ideas nevertheless. First is to move calculator switch to toolbar (probably duplicated by checkbox in settings menu). Second is not to use built-in calculator, but run system calculator when user clicks that button. I do not insist on these.

That's all for now, I haven't thought yet of transaction adding interface.

[Michael Rooney (mrooney)]

Awesome, thanks for this feedback! I will respond in more detail later but I just wanted to thank you for the mockup and work, there are some nice ideas!

[Michael Rooney (mrooney)]

Okay, I've used your radio box idea in trunk which will become 0.7, and removed the colons as well. I think this is indeed a better, already understood metaphor. I didn't turn the total into a clickable option yet but that could be a good idea; I'm just not sure if "total" makes sense if you can click it. Maybe it should be "All accounts"? This would allow me to remove the selector where you select Current Account or All Accounts like you have done.

Regarding moving the "Show zero-balance accounts" to a preferences menu, it isn't a once-per-user change, especially if you have accounts like Receivable and Payable. They are often zero but once or twice a month I need to add a transaction to them, so I have to temporarily show zero-balance accounts so I can create a transaction in them. Can you think of a better way to do this?

I find the integrated calculator really useful because of the integration that allows you to right-click on a transaction and send/add/subtract the amount/total from it, which would be a lot more tedious if it just spawned the system calculator.

Any thoughts of the balance/calculator, and also a new name for "Total" if it becomes clickable?

[Michael Rooney (mrooney)]

Okay, numbers 1, 2, and 4 are implemented. For #3, case sensitivity, I'm wondering if I should just ditch that option and always have it case-insensitive. It seems kind of rare to care about transactions in such a way where transactions only differ in case, but maybe not.

Any thoughts on this or the previous comment?

[arty (me-arty)]

On "Total": I agree that renaming it to "All Accounts" is a good idea.

On "Zero-balance": I think that "1-2 times per month" is rare enough to move checkbox to menu. After all it only adds one extra click, but removes visual clatter.

On calculator: I had no idea about such integration, so I revoke my proposal to get rid of it : )

On case-sensitivity: I can hardly imagine a good use case for that option, so i'm all for removing it!

[Michael Rooney (mrooney)]

I've changed "Total" to "All accounts". Is there anything in the HIG that might point to the correct capitalization of the second word "accounts"? I'm unsure if it should be "All accounts" or "All Accounts".

I'll move "Show zero-balance accounts" checkbox to the View menu as part of bug #502380, by default checked so you don't run into confusing behavior where accounts mysteriously disappear.

I'll also remove the case-sensitive option, and then upload a screenshot for you, and perhaps you can tell me if you think this bug is fully addressed!

[arty (me-arty)]

http://library.gnome.org/devel/hig-book/stable/design-text-labels.html.en#layout-capitalization
Capitalization Style Guidelines for User Interface Elements:
Radio button labels: Sentence
So it should be "All accounts".

I think on creation of account "Show zero-balance accounts" should be automatically checked too.

[Michael Rooney (mrooney)]

Okay, here is a screenshot of where it currently stands. I think I've addressed everything except the column title alignments as that is out of my control. I also haven't warmed up to the idea of a toolbar yet, but I might in the future :)

Have I missed anything such as padding?

Also if you have any advice on bug #497643 (a more intuitive way to add transactions) that would be great as I think it is a real problem where people aren't figuring out how to enter transactions.

[arty (me-arty)]

I've checked out latest version from launchpad and it's definitely better then 6.1! Radio buttons for account do relieve me, as much as persisting active account. Also I like new design of summary graph. Good job!

But I still have comments.

Can you control the look of a table in any way? I didn't mean titles alignment, but row contents alignment. Also increasing row height will make table look better. Unfortunately I failed to find anything on customizing wxWidgets in internet.

"More options" button is useless now after case-sensetivity option is removed. I think "match field" option should be in place of this button, if I failed to persuade you to remove this option at all.

Accounts block will be better with some paddings increased. I still think that extra frame here should be removed, but if you disagree with me on that, please at least increase its inner and outer paddings to 12px (afaik this is most used spacing in HIG). Same applies to add/remove buttons: current 3px between them should be increased to 6 or even 12px too. Also please consider making "Remove account" button the last of four.

Gnome applications have larger spacing between radio buttons, so if you do want to adhere to HIG, these spaces should also be increased.

Many other elements stick very close to window or frame borders:
 * "more options" button
 * "match field" selector
 * "recurring" checkbox
 * "transfer" label
 * "repeats…" labels

Just now i've found small inconsistency in calendar. Description and amount fields have icon inside them, but calendar field has icon outside. That's not too good.

[Michael Rooney (mrooney)]

Thanks for testing the latest version!

The table is an ObjectListView (http://objectlistview.sourceforge.net/python/) so I can do anything that can do. I have some control of the cell alignment, such as right-aligning the Amount and Total columns, and left aligning the Date and Description columns. Do you think any of that should change? Or are you referring to aligning it vertically centered?

Why do you think it would be better to increase the row height? Do you mean increase it by just a few pixels, such as in your original screenshot? I think that might be beneficial, I'll look into the documentation.

The More options is indeed a bit silly now, though I'd eventually like to move the time range control in the graph up into the search area, and then move the search out of the tabs (perhaps into what will become the toolbar area) so it applies to transactions and the graph.

I will indeed increase the account button padding and make remove the last one. I think in the future I will move it into a toolbar but I'd like to get this release out and then iterate on it.

I could increase spacing for the radio buttons, but with a lot of accounts space is already tight so I'm not sure how beneficial it would be.

I'll look at the paddings of the things you suggest, and the date icon inconsistency is valid indeed, though it's not possible to put the icon inside. Do you think I should move the other icons outside?

[arty (me-arty)]

I've checked ObjectListView and it's not capable of what I want to do. If you look at design mockup I've provided earlier, you would see that text in column title has exactly the same X coordinate as in a row, they both are left-aligned to the same vertical line. But unfortunately wxWidgets aren't about good design :(

Same applies to row height. Yes, I want to increase it by a couple of pixels, but again, looks like wxWidgets do not let you do that.

You've got good point on moving time range to search options.

It's a shame that date control doesn't support image in it. Moving images outside of text controls is not a good idea, because it won't be obvious which control they refer to. Actually I thought that maybe you don't need them at all? I myself can't recall any other place I've seen anything like that.

[Michael Rooney (mrooney)]

I could remove the icons in the Description and Amount controls; I
just thought it added nice visual cues for the controls. It seems like
the slight inconsistency could be worth the usability; the date picker
is a rather different control anyway. What are your thoughts?

I increased the paddings for the account controls and moved the Remove
button to the end. I think I also implemented all of the spacing fixes
you mentioned, and after looking around at other places in the app, I
improved the spacing for the controls under the summary graph as well
as in the account config dialog when an account has recurring
transactions. Have a look at revision 512! (http://bazaar.launchpad.net/~mrooney/wxbanker/trunk/revision/512)

The only other two things I thought of was that the total amounts in
the account list should have some right-padding, and that maybe the
"All accounts" and the amount should be bold or have a horizontal
above them to make it more distinct and easier to locate.

[arty (me-arty)]

Yeah, I agree that this inconsistency in date picker isn't too bad, it may just stay there.

Paddings look good, you've done a great job! And amounts in accounts list might look better with right-paddings. As for "All accounts" horizontal line is better because it distracts less.

[Michael Rooney (mrooney)]

I added a small 3px padding after the amount totals, and also added a 3px padding before the "All accounts" item to make it stand out a bit more (it didn't seem that wxPython provides a way to use a system horizontal rule, though I might investigate cairo later).

I'm going to mark this bug as fixed as sufficient for the 0.7 release; thanks for all your awesome feedback and work! I think you have really helped to shape the 0.7 release. Please definitely feel free to file as many usability or otherwise bugs, however trivial, for the future (separate bugs for each issue are very helpful as well) at https://bugs.launchpad.net/wxbanker/+filebug.

[arty (me-arty)]

Yes, this is definitely better. I hope other users of wxBanker will like this new release : )