2

I'm working on an Android app and, up until this point, have mostly focused on functionality. But now that most of the functions are implemented, I want to clean everything up and make it presentable.

Unfortunately, some items are way too compressed:

enter image description here

(Note: The numbers are mostly just made up for now just so everything has a value)

As you can see, the text of the food is squished to near-nothingness because I have a serving-size EditText, a food category icon, a settings button, a notes icon (which turns black if there is a note present), and a touch icon on the far right that lets you drag the item around the list to reorder (I'm aware that icon's resolution is not great and will eventually add all the right files for that one).

Clicking the TextView (food name) expands/contracts the nutrition info below it. But even that is an issue because it takes up a lot of space on account of having five items.

So my main question is what a good way might be to reorganize the items so that it is less cluttered, more space-efficient, but still carries all the relevant functionality.

Context:

In this screen, the user can input a variety of foods that they're about to eat. The category icons make for easy visual identification.

The reordering is meant to be easy in that you can click and drag. In this particular screen, reordering is perhaps not as important (since it all gets submitted with the same timestamp), but this same sort of framework is used in another section of my app where workout routines take place, where order does matter (sample picture here). So the reordering here is more for consistency in experience, although I suppose I can do away with it in this situation. But I figure some people will want the ability to group things together / move them around more easily (for instance, someone logging / organizing ingredients for a meal).

I could have done a "hold to reorder item" instead, but I am generally hesitant about functionality that is hidden by long-presses as it's not immediately obvious to many users.

Clicking the actual row item (i.e. the name) is meant to expand/contract the nutrition info.

The serving size TextView can be toggled between serving size mode (e.g. "3 nuggets", "2 servings", etc) and grams mode ("45 grams") by clicking on the text itself (which looks like a link currently). I had wanted this EditText + Textview to be a feature of the collapsed view since it makes it easy for users to quickly see how much of what they're eating in total, and so that they don't have to do two steps to edit their consumed quantity (expand item + enter value, vs. just entering value).

The note field I can wrap into the settings most likely. Although, right now the settings icon only has a singular "Delete" option that comes up, but I could probably get rid of that (and let deletion be handled only through the checkmarks) and replace the settings icon with the note icon. However in the workout routine section of my app, the settings icon does have more functionality, so if I can't figure how what to do with it here, it'll be an issue later anyway.

The checkboxes are meant to facilitate mass deletion. I have a floating action menu where you can select all / unselect all, and delete selected. Or you can press the checkboxes individually. It's less time-consuming compared to deleting each item one by one.

  • Is that a hamburger menu for the app or a menu button for the element? – Alvaro Mar 2 '17 at 16:23
  • @Alvaro Meant to be a drag handle for the element, e.g. i.imgur.com/gvouUKi.gif – user7648400 Mar 2 '17 at 17:20
  • What is the minimum information that can be displayed when the element is collapsed? (Name, Icon, ?) – Alvaro Mar 2 '17 at 20:59
  • @Alvaro Hard to say, because I want to say "everything but the nutrition info," but that leads me back to square one. I feel like there are legitimate reasons to have most of that stuff in the collapsed view, but I'm also not sure how to remove those icons without removing the functionality completely. – user7648400 Mar 2 '17 at 21:06
  • May look a little cleaner if I use Dimitra's idea for switching the drag-handle icon and putting it on the far left, and at the very least merging note and settings. I am guessing the serving info would need to go below the name or something, as opposed to being next to it – user7648400 Mar 2 '17 at 21:10
1

Edit:

You can take some of the functionality to the expanded view. The collapsed view can show the essential information, editable when expanded. The checkbox could be left to the App bar, similarly to how some Android apps do it.


I believe you have too many controls and elements for a list element. Try to rethink how the user will use that screen and separate some of the functionality behind menus.

This is a suggestion as an expandable element, but I really encourage you to rethink the amount of functionality you are assigning to the element (reorder + checkbox + comments + settings + info + expandable looks like too much for a card to me).

  • I find it hard to eliminate any functions as I do find each one to be important in its own right -- notes I can probably reduce to an option in the settings icon at least. Is it considered common to have the checkboxes on the righthand side? – user7648400 Mar 2 '17 at 18:04
  • @user7648400 I am not sure if it is common but it certainly appears in the Material Design guidelines. – Alvaro Mar 2 '17 at 18:06
  • Any way to put the reorder + settings icon into the collapsed view? (I auto-collapse everything during a reorder so the nutrition stats don't clutter things, and it's easier to code for one item moving rather than several) – user7648400 Mar 2 '17 at 18:13
  • @user7648400 If you follow Material design guidelines, and I recommend you for this scenario, then you should decide two actions to display in the collapsed view. For example Checkbox on the left and Reorder on the right. But this means when collapsed: the image probably should not appear, the expandable functionality is kind of hidden because there is no specific button that indicates it. – Alvaro Mar 2 '17 at 18:43
  • @user7648400 Lets see if we can figure out some solution. If you can, edit the question to give a little bit more of context of how the user uses this screen exactly. – Alvaro Mar 2 '17 at 19:02
0

If I understand well the app - please correct me if I am wrong - I would suggest the following changes:

  • I would not use both the icon and the naming. I think only the naming is sufficient (and much more understood than the icon).
  • What you describe as an icon to re-order, to my eyes looks more like a hamburger icon. I would expect when I click it that something opens up. Maybe replacing by this one & placing in the beginning of the row would serve your purposes.

Re-arrange icon

  • To me, it looks strange that you have the servings as a fraction. I would place it next to the number.
  • Is there a common name for this icon? Having trouble finding it in most of the autogenerators – user7648400 Mar 2 '17 at 19:14
  • Actually I couldn't find it either. I am using font awesome library for quite some time but doesn't provide this specific icon – Dimitra Miha Mar 3 '17 at 14:45
  • Material Design library calls it, [More Vertical] [1] (or horizontal), Link: material.io/icons/#ic_more_vert – Rajat Mar 4 '17 at 8:16
  • @Rajat That's a little different from the one shown – user7648400 Mar 5 '17 at 18:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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