...
The home page displays a welcome message to the user, the user's total balance, and two drop down accordion menus. The user's total balance is the difference of the amounts displayed in the two accordion menus. The amount in the red accordion menu is negative. If the user's total balance is red, then this amount is negative, and shows that the user owes more money than he or she expects from other people.
When 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 This red accordion menu displays the net amount that you owe other users. The bottom accordion menu shows the amounts other users owe the user. It is green and is labeled "You Expect:". This green accordion menu displays the net amount that other users owe you. 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.
Within each accordion menu, PennyPincher provides a list of users and amount that you owe the user or the amount that the user owes you. These fall under their respective accordion menus. Tapping on any of these users will bring you to the page which will show you the details of your transactions with the selected user.
II. Add a Transaction Page 1
...