Page History

Instead of having a lengthy tutorial or video explaining exactly what our 
application did, we decided to put a short blurb on app startup that would 
have a short and sweet explanation of the purpose of our application. The rest 
of the directions on how to use the application would be conveniently placed 
throughout the app in the form of helpful toast reminders that were static or 
pop-ups. We decided to use this method because most users we talked to did not 
want to bother with a lengthy tutorial video explaninig function/usability.

• Static page with an image for the description and a single button to continue for simplicity

Our home page consisted of a list of old trips that the user created, and a 
small input segment for new trips to be added. We decided to keep our home 
interface clean and simple because we realized this made the app more 
organized and easily accessible by our users. Another attempt to make the app 
easily naviagatable lay in our top menu bar. It easily allows the user to 
navigate to each of the 4 different pages in our app, the home page, packing 
tips page, packing page, and settings page. We resized our icons to be larger 
after initial user testing showed us that users were having difficulty 
pressing the buttons if they had smaller than average smartphones.

• A SQLite database was used for the backend, storing each trip along with the trip information the user inputs in it
• All data is stored internally on the phone
• The list of past trips, when selected, will lead to the packing page for that specific trip
• A single text field allows users to enter new trips
• Pressing the continue button will lead to the trip information page, where users can enter trip data, but does not save the trip in the database just yet
  • We decided to delay saving the trip into the database until after the user had entered their trip details for safety reasons, since users could decide not to add the trip and back out of the page, leading to extraneous data entries in the database
• To eliminate the need for a context menu and save space for the application, an action bar at the top with buttons to navigate between the main pages of the app was implemented

Our trip settings page was created with efficiency in mind. Pictures are much 
more expressive than drop down word menus would be, so for each setting we 
used a big icon to represent that particular setting so the user could easily 
and quickly select which option they preferred. To keep the app less 
cluttered, we used simple colors (white and grey) with torquoise to make 
certain images (aka, the highlighted/pressed buttons) stand out. These color 
decisions were made after users explained that selecting some buttons seemed 
to have no feedback.

• We used Android's SharedPreferences feature to keep track of the current trip name the user is accessing on the phone
• SharedPreferences were also used to keep track of the choices the users made in selecting/entering trip information
• Once all trip information is entered, and the user hits continue, the information is added into the database and a list of items is generated
• The trips are canned - 2 trips were programmed into the app, and one trip is randomly chosen as the user's trip
• The quantity of items are determined by the duration of the trip and the item itself (e.g. for a 7 day trip, the app suggests bringing 7 shirts but only 1 toothbrush)
• Error checking is apparent when the user tries to continue without filling in all the information - the page will not advance, and a toast will appear prompting the user to fill out all information
• Information is not saved when the user decides to go back, since we decided not to distinguish between users accidentally hitting go back and users intentionally going back for sake of time in developing the app.

In our packing section, our final design included two major components, a 
shelf and a backpack. Things on the shelf reprsented items that needed to be 
packed and things in the backpack represented things that you already packed. 
To show which items belonged to which object, we had a bubble in the middle of 
the screen that either pointed to the backpack or the shelf, depending on 
which object you were currently looking at. The bubble concept was added after 
intial tests revealed that users were confused as to which view they were 
currently looking at, the shelf or the backpack.

• To represent the different categories of items, a tab layout was implemented
• The shelf view with the items to be pack displays items in the category of the selected tab, which is tap-able and draggable as well
• Tapping items to add to the bubble underneath will log that many copies of the item as packed in the database
• Tapping items in the bubble will do the opposite
• The backpack is also a listener for drag events, allowing users to pack items in bulk
• Each item is given an automatic weight of 1 lb, and the scale to the right of the backpack displays the weight of the items in the bag

Items from the shelf could be tapped or dragged into the backpack. These items 
would then appear in the bubble above the backpack, indicating that these were 
the items that were already packed. Beside the backpack is a weight that tells 
you how heavy your current items are. Additionally, as an added reinforcement, 
the backpack will change into different forms of transportation depending on 
how heavy your items are. For example, if you are carrying 50lbs worth of 
material, the image of the backpack would change to a luggage case. Once 
again, an image is more expressive than numbers or words, so this visual 
representation helps the user's efficiency.

• The application keeps track of the weight of the items in the bag, changing the image based on weight

The edit mode of our application is the mode in which you "edit" the shelf. 
The user would do this in two conditions: 1) he doesn't want to bring a 
particular item that the app auto generated for him to bring, or 2) he wants 
to add an item that the app did not generate for him. When entering edit mode, 
a trashcan will appear in the bottom left corner to indicate that dragging 
objects into the trashcan will delete them. Additionally, + marks appear at 
the bottom of each item, which signifies that you can add additional items. If 
the items you want do not appear, there is also a small input that appears 
right below the shelf which says "add new item."

• The edit button switches the application into 'edit mode', changing the bubble to contain items that, when tapped, will be added to the unpacked list in the database.
• The list of items contain all the items viewable from each category tab
• The trashcan is also a listener for drag events, allowing users to discard items they do not want to pack from their shelf
• Editable text fields allow the user to add items not visible in the current list to the shelf

•  Viewing trip information, such as packing tips and weather information is visible via the question mark button in the action bar
• Tabs reveal static pages displaying information based on the trip chosen