1

Suppose you are creating a web application which supposed to work on mobile platforms like Android or iPhone, and one of the features of your app is to give the user an interface for adding, viewing, updating and deleting grocery shopping lists or grocery shopping list items. Shopping list items are supposed to have a name, item catagory, quantity, and price.

I could think of two options:

  • Grid based layout

    Advantage Allows user to see more shopping list items

    Disadvantage Can't add any more attributes

  • Multiple-row list based layout

    Advantage Allows user to add more attributes per item

    Disadvantage Number of visible rows decreases and leads to more scroll for user

Which one would you suggest?

Improve this question
1
  • 3
    Scrolling is of little worry on mobile. Since it's a grocery list app, my inclination would be to go the list route.
    – DA01
    Jan 11, 2013 at 1:42

2 Answers 2

Reset to default
2

Use a table.

Trying the different layouts helps to make it clear (I hope that these were what you meant, the descriptions were a bit ambiguous).

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The separate items are much harder to scan quickly. Changing the order and adding up totals requires much more UI work (adding additional elements, deciding where they should go, etc).

The table based layout is easy to scan by running your eye down the list of items, easy to sort and easy to add totals.

For more info on table design check the Ultimate guide to table UI patterns and Effective design of data tables.

Improve this answer
8
  • 1
    Thanks for the info. However, one key info we are missing here is that we need to capture the info then and there rather than just show read-only list. It would mean that almost 90% of the line will be covered in text-boxes which will make scrolling (swiping) difficult.
    – ripu1581
    Jan 11, 2013 at 12:00
  • 1
    While I think the type on these examples is way too small, I do like the point you are making in that the list/table is much easier to scan. @ripu1581 you're going to have to give us more details about this. Why would your screen be covered in text boxes? It sounds like you are maybe thinking more desktop than mobile with this.
    – DA01
    Jan 11, 2013 at 16:34
  • 1
    if there is an image involved, an image which is easy to use for visual scanning (e.g., faces or vegetables or corporate logos anything else graphically distinctive), then the blocks might work better. because then you can scan using the image and verify you are looking at the right thing using any other details in the block.
    – jlarson
    Jan 11, 2013 at 21:19
  • @DA01 The way I am visualizing Tims's answer is that if you choose to go with a grid based layout and try to put all the fields stacked horizontally with each other (name, catagory, quantity and price), it will result in 4 text-boxes in one line.
    – ripu1581
    Jan 12, 2013 at 3:00
  • @joelarson Since I am entering the item name using text-boxes rather than selecting from a drop down, it would be difficult to find an image for the entered item name always. But I agree that I selecting from a set of items was an option, then Image would help in going with a multi-row based layout.
    – ripu1581
    Jan 12, 2013 at 3:03
1

Considering that your items are not complex data, but list entries, I would use a row approach. The row approach also performs better with variable width of different devices and viewport orientations.

As user @DA01 pointed out in the comments, if you make a list, why not use a list?

It will feel most natural to use, because the way you use a physical shopping list is putting items one after the other, not drawing boxes of items on a table layout to fill the whole paper horizontally.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.