Filters taking up too much space.

[ryasmi]

@chrisandryan: "Alex is on the case, and we had a look at the UI. He is concerned about how much screen space is used up by the dates and filter on transaction screen. we had a little play with tabs. check out the transactions gdraw"

[ryasmi]

me: "Yeah I thought that was taking up too much space too. Drop the line in between income and outgoings, it looks messy and the space between the two words is enough for the user to make assumptions. If not fade the line."

@chrisandryan: "You can make the tab look how you want really as long as it looks nice."

[later]

me: "Ok so I've just tried displaying the date horizontally on a nexus one and I cannot fit them in without making the text and buttons smaller."

@chrisandryan: "The design was just a test, so can you come up with something that fits but also doesnt take up too much space."

me: "Is the date actually important or can we just say the date from is behind the current pay day by one, then they click on it and it expands to show the date and allows them to change it? The last pay day is represented as -1, the next as 0."

@chrisandryan: "Can they choose custom date ranges?"

me: "No, because the budgets are surely taken as being the amount of money I can spend in the time between the last pay day and the next."

@chrisandryan: "We definitely shouldn't be restricting people from looking back over longer periods than just one payday."

me: "Yeah of course, I was suggesting we allowed them to change the filter dates by the amount of days between each pay day. So date from could be changed to the next pay day, or the pay day before the previous pay day and back to their pay day in the stone ages."

@chrisandryan: "So i could press the from date and select from a list? of paydays? ie lats payday, jan paydat, dec payday etc?"

me: "I guess, I was just going to put an arrow going forward, and one going back, pressing forward changes the date to the next pay day, and pressing back the opposite."

@chrisandryan: "So what if i wanted to go back 2 weeks and i was payed monthly?"

me: "Press the backwards arrow twice on the date from."

@chrisandryan: "What if i wanted to go back 2 days?"

me: "That would screw up the budgets"

@chrisandryan: "Oh dear. Why does the budgets need to be linked to the dates in the transactions screen?"

me: "I was just suggesting that because I think it's less confusing for the user to manage a single filter."

@chrisandryan: "So budgets are only for current payday and reset each payday so we dont need dates on that screen, then we can view any range of transactions between paydays or custom periods"

me: "I was thinking that we allow the user to set a budget (which is the amount they can spend between 2 pay days), allow them to set the frequency at which they are paid, then the filters will change by the frequency. If the range increases we multiply the budget accordingly. What if you want to see how well you've budgeted for the whole year?"

@chrisandryan: "Yeh, i like the idea. What you gain on onehand you loose on the other i suppose less flexibility on the transactions screen means more on the budgets."

me: "Yeah unless, we keep the arrows to change by pay day on all screens and allow the user to click on the date on the other two and select a specific date, but this doesn't solve our spacial problem. I've think I might have a solution for the space problem, add another button to the top bar that shows the user the filters. If the user selects a date that is not a pay day, when filtering the budgets we pick the closest one as a best effort. Doing that helps the less intensive user too, because they will probably just want information about how they are doing between the next and previous pay day and we therefore hide the extra functionality (filters) until it's required which means less clutter and more space for the information they want."

@chrisandryan: "Sounds good."

[ryasmi]

Fixed in commit 32da6cd8b602cffd43ef3491815faf976033d83e.

[ghost]

I managed to get it down to 2 lines the other day, was going to take another look today: https://docs.google.com/a/nderfisher.com/drawings/d/1r5zkdCXMpYeN5Su5utUyjfvdsGsqRv2b3fpodX_gYzk/edit?usp=sharing

Decided to move the 3 dot page indicators to the top and put the page title above so the user is aware what page they are on at all times, which is an important usability issue. To do this I got rid of the budgeter text because combined with the page title they take too much space and the logo should suffice - might want to change the logo so it doesn't look like an email/message icon. Not sure whether to keep the 3 dots or use a left and right arrow to show there are other pages?

Also, to get rid of the filters it seemed best to put them in a menu button where we can have other options like add/remove transactions etc. and then settings (which is supposed to be a cog, but i'm obviously not as good with google docs as Ryan).

Can't remember what screen this was so just called it transactions as that's the largest, are there mock-ups for all 3 screens?

alex

[ryasmi]

I don't have access to that document (I have requested access - you should get an email).

3 dots I put them at the bottom, simply because it's where they are most commonly found. In addition if you read a book, the page numbers are usually at the bottom of the page which I assume is the reason why they are commonly found at the bottom. Using three dots implies that the content can be swiped, which although less practical for us in terms of code is far more fun and natural to the user.

Logo I certainly agree with changing from the mail icon and possibly just using the icon instead of the text.

Filters Button I discussed this with @chrisandryan today on Facebook (see the conversation in my previous comment). We decided adding the filter button was probably the best way forward.

Settings Button I think we decided that there was something built-in for this so we were going to use that instead, I don't remember exactly. @chrisandryan can explain that better than me.

3 Mock-Ups Yes just need your email so I can give you access or ask @chrisandryan to sort it.

[ghost]

Yea, that's where the dots usually are, just take up space so if we can integrate them into the title bar we get an extra row back. I think i've seen on a few apps that the dots only come up when you swipe then they fade out, maybe we can do something like that?

actually, the settings button can just be in the menu, I doubt people will need to access it often enough to warrant it being on every screen, which frees up space for the filter button or some others.

alex@nderfisher.com, chris has been 'sorting it' for a week or so :P

[ryasmi]

Along the top bar we have the following buttons: filters, add, remove, transactions, and summary. The transactions button is essentially a shortcut to the page (saves swiping), in fact, if we change the transactions button to a home icon we can make the app icon a variant of the transactions icon. Talk to Chris about the summary button.

You should have access to the designs now. I suggest putting all future documents you make on Google Drive in the folder I've shared (that way you don't have to keep sharing the documents).

'sorting it' lol. Loving the email address by the way.

[ryasmi]

I've just made an updated version of the UI. I have made annotations using comments, give them a quick read.

Accounts V4