Entering Multiple Items and Their Properties, how to go about on Mobile App?

Question

I'm developing a simple Bill Splitting App

First step is to add the people, then on the second page you add the items and who it belongs to.

Now my issue here is that I'm not sure how to approach this to make it user friendly. As you can see on the Add Items page, you type in the name(or default name will be issued if blank) the price, then you select the people who belong to that item. Click the Add button to save. This saves it to the list at the bottom of the page in the app where you can edit, etc.

My issues here are:

• I'm wondering if this page is too long. When the user clicks add, they wont see that it has been added to the list below.
• If I add it on a seperate page, is that too many pages to navigate too? I kind of wanted to minimize the the steps as much as possible, but still allow them to come back for editing properties.

I really want this app to have UX in mind. What do you guys think?

Answer 1

Not sure what the gear icon does here but can you change it to a badge with the total number of items? That way the only thing left on the page is Item Name, Price and people who ate some of it. Clicking ADD can animate the number in the top right corner as it increases to indicate that it's up there. Clicking the number in the top right corner can list all the items with remove buttons next to each one.

Answer 2

I think your first UX challenge is that the Add Button will fall off the bottom of the screen (fall beneath the fold) as soon as you add a few people. If that Add button's click is the moment that you save your data, then letting it leave the visible part of the screen is dangerous. The user may leave the app with unsaved data and should the app subsequently close (due to resource crunch or the phone being turned off), that data would be lost forever.

To address this, I would suggest saving your data every time it changes. Change the quantity, auto save it. Add a person to an item, auto save it. There should never be a moment when the data on the screen and the data which has been saved differ from each other.

Similarly, why are you waiting for them to press the Done button before splitting the bill? Just add each person's current total next to their name in the "person selection" area.

This should allow you to drop both the Add and Done buttons, leaving you with two lists, (items and people) and two buttons (new-item and back).

The item entry form should only appear after new-item is tapped, or when one of the existing items is tapped, signifying that the user wants to edit that previously entered item.

Tapping the user list, selecting a user when the item entry form is not open, should possibly repurpose the item list, showing the selected user's price for each item (along with how many people are also paying for that item's total purchase).

One more thought... How much does the sushi cost? Is the app dedicated to a particular restaurant, so the prices are already know to it, or should a unit price field be added near the quantity field?

Answer 3

Think of the use case first! (And I was led astray by the simple "Bill Splitting" title - I consider calculating every part down to the penny as parsimonious (the mean meaning!) and not really social).

So the bill is on the table, and the guy (or girl) who paid it wants their money back. I think the easiest way to go is to run down this list of items on the bill, entering its name and price and eaters, item by item:

[Salad] 
[13] 
[x]  Alex
[x]  Edward
[ ]  Barney
     [New Eater] 

[Next Item] [Finished]

[New Eater] is an empty text field where you can enter another person to pay for this. It might be good to check this box by default, that way you can run through the items with minimal overhead (entering people only when the have to pay for this item).

[Next Item] will advance to the next item, i.e., clear the item name and price and the eater checkboxes. You can scroll the item pages horizontally by swiping, if you like (back and forth for corrections).

[Finished] will calculate the tally for everyone and display it on another page.

EDIT

Don't forget the tip! E.g., after [Finished], you can display a page with "Tip" as item name, a field for the amount, and all people checked.