Design
I. Home Page
The PennyPincher logo and home button appear at the top of the page in the header, and both link to the home page. At the bottom of the page, a footer menu holds three buttons, which allow the user to add a new transaction, view their transactions summary, and edit the user settings. Simple images label these three buttons. The header and footer menus appear on all pages in the PennyPincher mobile web app, so that the user can easily access any of the necessary pages quickly and efficiently.
The home page displays a welcome message to the user, the user's total balance, and two drop down accordion menus. When the PennyPincher home page is loaded, the top accordion menu already appears expanded, so that the user will know that these are accordion menus. The accordion menus are also labeled and color coded. The top accordion menu shows the amounts the user owes to other users. It is red and is labeled "You Owe:". The bottom accordion menu shows the amounts other users owe the user. It is green and is labeled "You Expect:". With labeling and color coding, users of PennyPincher will learn the meanings of the colors which are used throughout the web app. Furthermore, including the labels allows for users who may be color blind to still know what both accordion menus show. The "You Owe:" accordion menu appears before the "You Expect:" accordion menu because owing money to other people is usually an immediate or more urgent thing that people want to take care of. Furthermore, the menu is red to show a "negative" balance, since a majority of users will associate the color red with something negative that they may need to take care of immediately.
II. Add a Transaction Page 1
Required Title, Total Amount, and Description of Transaction
The add transaction page contains fields for the user to enter the title, total amount, and description of the new transaction the user wants to create. These fields are required and if they are completed, PennyPincher will alert the user.
Choosing People Involved in the Transaction
...