...
While hurting efficiency, deleting bills individually helps prevent errors; however, users may ignore confirmations out of habits and still delete bills accidentally. There is no error recovery currently in place so if a delete is mistakenly made, the user must redo their previous work. It is also ambiguous if deleting a household deletes the entire household or just unlinks it from the account, which could cause further errors. Bill status is shown clearly in every interface which will allow any mistakes that have been made in submitting the bill to be seen immediately after the mistake is made.
Design 2
Storyboard 2
Rob Miller is a returning user of to Housebill.com. He navigates to the site's home page, where he is greeted by the friendly "Welcome to Housebill!" banner. Because he is an experienced user, Rob does not bother looking at the main page with the screenshots and just types in his username, "BobtheBanker," and password, "SuperSecretBob," into the column on the left for returning users. He clicks the "Login" button, which takes him to his User Page.
Here, he sees his username, a list of the households that he is a part of, his current balance, and the credit card that he has on file. Under these pieces of information are collapsible/expandable lists that detail the bills that he has due, the money he owes to other members, the money that other members owe him, and his recent activity. On the left column of the User Page, Rob sees a list of the households he belongs to and a button to add new households. Under that, but also in the left column, is the pertinent information to his most commonly accessed household. Here he sees that household's address, a list of members, and a list of pending members. These pending members are people who have requested to join the household, but have not yet been approved by the members of the household. Rob clicks on the "Add new" button to add a new household.
This takes him to a "New Household" screen, where he enters the name of this household, as "MyHouse." Rob also enters the address of the household, and in the box labeled "Members to Invite," Rob enters the email addresses of the other members of the household.
After clicking "create", Rob is redirected back to his User Page. Rob decides to click on one of the households, specifically the new one he just added, which is titled "MyHouse". He sees the 'Bills' version of the Household Page, which gives him a detailed list of of the bills for the household. Rob then decides to put in an entry for the water bill, and starts by clicking on the "Add new" button.
He is taken to an Edit Bill screen, where he enters the type of the bill as "water", the due date as "3/12/11", the total amount as "$50", and in the shares section, he breaks down the bill by who owes what. After clicking on "Save Changes," he is directed back towards his User Page.
Rob looks over the bills for the "MyHouse" household. Alice, one of his suitemates, has already entered a couple of the bills for the household, and Rob decides to check over them. The bills are ordered by due date, and also show the amount of the bill, as well as whether or not payment has been made. Rob clicks the "+" next to the water bill he recently created, expanding the listing and giving details. He sees that Alice has already paid her share, and decides to do the same.
He clicks the "Pay Now" button next to the $20 that he owes for the water bill, which takes him to a Confirm Payment Page. He sees the name of the bill, the amount, his username, and the last four digits of his credit card number. Everything looks correct, so Rob clicks the "Confirm" button to submit his payment.
Once back at his User Page, Rob clicks the tab to go into Calendar View, which shows him all of his bills laid out by date. He sees that his next bill is not due for a while, and decides that he is ready to log out of Housebill.
Analysis 2
Learnability
A frequent user will be used to navigating only the left column of the site, which is where all of the login fields are located. Buttons that allow users to perform actions on a bill (edit, pay, etc.) are clearly labeled and placed next to the listing for that bill. Links to other main pages on the site are displayed prominently in the taskbar at the top of the user page. This lets users access the bills, user, and calendar views. A new user will be able to understand the overall structure, although some functions need to be better grouped. For instance, the Household display in the lower left hand column could use some "change" or "add new" buttons so that the user does not need to search for the Household View in the main User Page to make these types of edits.
Visibility
Information about users and frequently accessed households is visible in the left sidebar. The other pages the user can view (user details, calendar, etc.) are listed in the taskbar at the top of the page. On the pages that list bills and show how much money the user owes, lines of data can be expanded to show further details, but by default they are collapsed to maintain visual simplicity. Clickable links are underlined; the user's current page is highlighted in the taskbar. Any information that needs to be entered has an associated text field, which provides the appropriate affordances. However, some of the pages contain too much information, which could be a hindrance to the user. The User Page faces this issue.
Efficiency
There is a bit of redundancy, which users may find confusing. For example, the User column on the left displays information that is simultaneously displayed on the middle of the User Page. This real estate may be used for other means so that the information in not doubly presented. Users can find a bill from the user page, the bill listing page, or the calendar. This makes is easier for the user to find a piece of information, but the information scent used to get to it may need more fine-tuning. Overall, the ability to navigate to a page from multiple locations will help efficiency by forcing the user not to navigate through a longer route and will help learnability by not forcing the user to memorize one distinct path.
Error Prevention
This implementation is not great at dealing with error prevention. This design does not allow the user to undo transactions, although before a transaction goes through the user must review a confirmation page. In addition, information tends to be clustered together, so mis-clicks could be an issue. To deal with this, it would be a good idea to place less information on a screen.
Design 3
Storyboard 3
Rob Miller is a first time user to Housebill.com, and is looking for a way to organize his bills between himself and all of his suitemates. He looks at the main page of the site, and reads the static descriptions there. Intrigued, he clicks the "Join Us" button, which directs him to a form to make his account.
Rob fills out his username, "testUser", along with his password "SuperSecretBob", and chooses to leave his email out for now. While filling this information out, Rob is reading the right-hand column of the sign-up page, which lists a bunch of benefits to using Housebill. Convinced, he clicks "Create Account," which takes him to the logged in page.
On the logged in page, Rob has the option of either joining a household, or starting a new one. He also sees a pie chart of his budget/spending in the lower right-hand corner, but seeing as how he has no budget yet, this feature is grayed out. Similarly, he sees a calendar directly above the pie chart, but it does not have any information on it yet.
Rob is not sure if any of his friends are on Housebill, so he decides to make a new household by clicking on "Create a Household." This takes him to the Create a Household Page, which tells him to pick a household name, for which he enters "test House." He enters a password for the household that other users would use to gain access, and sets it to "home." In the share with friends section, Rob enters his suitemate's email, "email@bla.com". The site also tells Rob the link to this household in case he wants to send someone that link, but he chooses not to do that at the moment. Rob hits the "Create Household" button, and is transported back to his User Page.
Now that Rob has added a household, he sees the options of "Add a Bill" and "Pay a Bill" under this "test House" header. This household section also has subsections for what Rob owes, what is owed to Rob, and what the household's outstanding bills amount to. Because there are no bills yet, Rob decides to add the water bill to the test House household, and clicks the "Add a Bill" button. This takes him to the "Add a Bill Form."
While Rob was looking at his user page, one of his friends decided to join Housebill. He sees his "friendUser," which is the username that they chose, among the list of users. The Add a Bill page lets Rob pick a household, pick the users that he wants to bill, set whether this billing amount is in an "exact" form or in the form of a percentage, and then enter the total bill amount. Rob sets the percentages to 50% - 50% for the split between friendUser and himself for the water bill. He puts in the bill amount as $100, and files the category as "Utilities." There is a calendar in the lower right-hand corner that Rob users to set the due date of the bill to the 15th of March, 2011. He does not want the bill to repeat each month, at least not yet, so he finishes his form but clicking on the "Add BIll" button.
The next screen that Rob sees is a confirmation screen, which summarizes the bill that he was about to add. He goes over the fields that he has entered, and clicks "Confirm," which creates the bill.
Upon creation of the bill, the user is taken to the main User Page screen. Here, the user sees the test House household, along with the bill that was just created. The Pie chart is no longer grayed out, and the calendar now displays the date when the water bill is due. There is a "news" subsection of the test House Household, and it updates to say that "testUser added waterbill."
Rob then clicks on the "test Household" link itself, which gives him a breakdown of what him and friendUser each owe, and offers him the ability to pay his bill with a "pay" button. Rob is not ready to pay his bill yet, so he decides that he has made enough progress for one day and signs out of his session.
Analysis 3
Learnability
Learnability of the site for the initial tasks is good. The website uses large buttons to transition the user to the different states of creating an account, creating or linking to an initial household, and adding or paying a bill. Learnability for some of the less frequently used tasks like deleting a household or bill may be more difficult since there is no information scent on the main user interface to direct users to where these additional features can be found.
Visibility
Visibility on this site is very much like learnability. There is little information scent to direct users to the less frequently used features of the site making their visibility poor. This is a trade off for good visibility of the states the user would normally find himself in where the information is very good linking him from one view to another. Also, the user receives instant feedback on every action they commit, also helping visibility.
Efficiency
An advantage of this design is the efficiency of having most states that the user would want to see available from the original user view. The direct manipulation of bill creation helps error prevention by only allowing "approved" information to be entered into the bill form; however, users trying to create bills quickly will find the direct manipulation will slow down progress by making users need to click more objects instead of being able to navigate through the form by tabs.
Error Prevention
The confirmation screen after creating a bill helps prevent error prevention by making users confirm the bill information twice. There appears to be nowhere to edit bills once the bill is created, which will allow errors to propagate if they are created. The detachment of having the delete bills and household from the main interface will prevent accidental deletions helping error prevention.
Design 3
Storyboard 3
Rob Miller is a first time user to Housebill.com, and is looking for a way to organize his bills between himself and all of his suitemates. He looks at the main page of the site, and reads the static descriptions there. Intrigued, he clicks the "Join Us" button, which directs him to a form to make his account.
Rob fills out his username, "testUser", along with his password "SuperSecretBob", and chooses to leave his email out for now. While filling this information out, Rob is reading the right-hand column of the sign-up page, which lists a bunch of benefits to using Housebill. Convinced, he clicks "Create Account," which takes him to the logged in page.
On the logged in page, Rob has the option of either joining a household, or starting a new one. He also sees a pie chart of his budget/spending in the lower right-hand corner, but seeing as how he has no budget yet, this feature is grayed out. Similarly, he sees a calendar directly above the pie chart, but it does not have any information on it yet.
Rob is not sure if any of his friends are on Housebill, so he decides to make a new household by clicking on "Create a Household." This takes him to the Create a Household Page, which tells him to pick a household name, for which he enters "test House." He enters a password for the household that other users would use to gain access, and sets it to "home." In the share with friends section, Rob enters his suitemate's email, "email@bla.com". The site also tells Rob the link to this household in case he wants to send someone that link, but he chooses not to do that at the moment. Rob hits the "Create Household" button, and is transported back to his User Page.
Now that Rob has added a household, he sees the options of "Add a Bill" and "Pay a Bill" under this "test House" header. This household section also has subsections for what Rob owes, what is owed to Rob, and what the household's outstanding bills amount to. Because there are no bills yet, Rob decides to add the water bill to the test House household, and clicks the "Add a Bill" button. This takes him to the "Add a Bill Form."
While Rob was looking at his user page, one of his friends decided to join Housebill. He sees his "friendUser," which is the username that they chose, among the list of users. The Add a Bill page lets Rob pick a household, pick the users that he wants to bill, set whether this billing amount is in an "exact" form or in the form of a percentage, and then enter the total bill amount. Rob sets the percentages to 50% - 50% for the split between friendUser and himself for the water bill. He puts in the bill amount as $100, and files the category as "Utilities." There is a calendar in the lower right-hand corner that Rob users to set the due date of the bill to the 15th of March, 2011. He does not want the bill to repeat each month, at least not yet, so he finishes his form but clicking on the "Add BIll" button.
The next screen that Rob sees is a confirmation screen, which summarizes the bill that he was about to add. He goes over the fields that he has entered, and clicks "Confirm," which creates the bill.
Upon creation of the bill, the user is taken to the main User Page screen. Here, the user sees the test House household, along with the bill that was just created. The Pie chart is no longer grayed out, and the calendar now displays the date when the water bill is due. There is a "news" subsection of the test House Household, and it updates to say that "testUser added waterbill."
Rob then clicks on the "test Household" link itself, which gives him a breakdown of what him and friendUser each owe, and offers him the ability to pay his bill with a "pay" button. Rob is not ready to pay his bill yet, so he decides that he has made enough progress for one day and signs out of his session.
Analysis 3
Learnability
Learnability of the site for the initial tasks is good. The website uses large buttons to transition the user to the different states of creating an account, creating or linking to an initial household, and adding or paying a bill. Learnability for some of the less frequently used tasks like deleting a household or bill may be more difficult since there is no information scent on the main user interface to direct users to where these additional features can be found.
Visibility
Visibility on this site is very much like learnability. There is little information scent to direct users to the less frequently used features of the site making their visibility poor. This is a trade off for good visibility of the states the user would normally find himself in where the information is very good linking him from one view to another. Also, the user receives instant feedback on every action they commit, also helping visibility.
Efficiency
An advantage of this design is the efficiency of having most states that the user would want to see available from the original user view. The direct manipulation of bill creation helps error prevention by only allowing "approved" information to be entered into the bill form; however, users trying to create bills quickly will find the direct manipulation will slow down progress by making users need to click more objects instead of being able to navigate through the form by tabs.
Error Prevention
The confirmation screen after creating a bill helps prevent error prevention by making users confirm the bill information twice. There appears to be nowhere to edit bills once the bill is created, which will allow errors to propagate if they are created. The detachment of having the delete bills and household from the main interface will prevent accidental deletions helping error prevention.
Design 4
Storyboard 4
Rob Miller is a returning user of Housebill.com. He navigates to the site's home page, where he is greeted by the friendly "Welcome to Housebill!" banner. Because he is an experienced user, Rob does not bother looking at the main page with the screenshots and just types in his username, "BobtheBanker," and password, "SuperSecretBob," into the column on the left for returning users. He clicks the "Login" button, which takes him to his User Page.
Here, he sees his username, a list of the households that he is a part of, his current balance, and the credit card that he has on file. Under these pieces of information are collapsible/expandable lists that detail the bills that he has due, the money he owes to other members, the money that other members owe him, and his recent activity. On the left column of the User Page, Rob sees a list of the households he belongs to and a button to add new households. Under that, but also in the left column, is the pertinent information to his most commonly accessed household. Here he sees that household's address, a list of members, and a list of pending members. These pending members are people who have requested to join the household, but have not yet been approved by the members of the household. Rob clicks on the "Add new" button to add a new household.
This takes him to a "New Household" screen, where he enters the name of this household, as "MyHouse." Rob also enters the address of the household, and in the box labeled "Members to Invite," Rob enters the email addresses of the other members of the household.
After clicking "create", Rob is redirected back to his User Page. Rob decides to click on one of the households, specifically the new one he just added, which is titled "MyHouse". He sees the 'Bills' version of the Household Page, which gives him a detailed list of of the bills for the household. Rob then decides to put in an entry for the water bill, and starts by clicking on the "Add new" button.
He is taken to an Edit Bill screen, where he enters the type of the bill as "water", the due date as "3/12/11", the total amount as "$50", and in the shares section, he breaks down the bill by who owes what. After clicking on "Save Changes," he is directed back towards his User Page.
Rob looks over the bills for the "MyHouse" household. Alice, one of his suitemates, has already entered a couple of the bills for the household, and Rob decides to check over them. The bills are ordered by due date, and also show the amount of the bill, as well as whether or not payment has been made. Rob clicks the "+" next to the water bill he recently created, expanding the listing and giving details. He sees that Alice has already paid her share, and decides to do the same.
He clicks the "Pay Now" button next to the $20 that he owes for the water bill, which takes him to a Confirm Payment Page. He sees the name of the bill, the amount, his username, and the last four digits of his credit card number. Everything looks correct, so Rob clicks the "Confirm" button to submit his payment.
Once back at his User Page, Rob clicks the tab to go into Calendar View, which shows him all of his bills laid out by date. He sees that his next bill is not due for a while, and decides that he is ready to log out of Housebill.
Analysis 4
Learnability
A frequent user will be used to navigating only the left column of the site, which is where all of the login fields are located. Buttons that allow users to perform actions on a bill (edit, pay, etc.) are clearly labeled and placed next to the listing for that bill. Links to other main pages on the site are displayed prominently in the taskbar at the top of the user page. This lets users access the bills, user, and calendar views. A new user will be able to understand the overall structure, although some functions need to be better grouped. For instance, the Household display in the lower left hand column could use some "change" or "add new" buttons so that the user does not need to search for the Household View in the main User Page to make these types of edits.
Visibility
Information about users and frequently accessed households is visible in the left sidebar. The other pages the user can view (user details, calendar, etc.) are listed in the taskbar at the top of the page. On the pages that list bills and show how much money the user owes, lines of data can be expanded to show further details, but by default they are collapsed to maintain visual simplicity. Clickable links are underlined; the user's current page is highlighted in the taskbar. Any information that needs to be entered has an associated text field, which provides the appropriate affordances. However, some of the pages contain too much information, which could be a hindrance to the user. The User Page faces this issue.
Efficiency
There is a bit of redundancy, which users may find confusing. For example, the User column on the left displays information that is simultaneously displayed on the middle of the User Page. This real estate may be used for other means so that the information in not doubly presented. Users can find a bill from the user page, the bill listing page, or the calendar. This makes is easier for the user to find a piece of information, but the information scent used to get to it may need more fine-tuning. Overall, the ability to navigate to a page from multiple locations will help efficiency by forcing the user not to navigate through a longer route and will help learnability by not forcing the user to memorize one distinct path.
Error Prevention
This implementation is not great at dealing with error prevention. This design does not allow the user to undo transactions, although before a transaction goes through the user must review a confirmation page. In addition, information tends to be clustered together, so mis-clicks could be an issue. To deal with this, it would be a good idea to place less information on a screen.