8

I'd like some help figuring out a good interface design for my app. It will be a checklist application, I guess somewhat similar to a todo list but instead of for things todo it is for documenting a process (like a bank employee might have "Open New Business Checking" or "Closing Procedures"). You can also thing similar to an airplane pilots checklist (i.e. "Start Up Procedures" would include items such as: "Fuel Pump - On", "Fuel Mixture Rich").

It will also have multiple levels where an item could be broken down into sub items (as deep as you want). So for example for a banker you might have as an item under "Open New Business Checking" an item that says "Do Credit Check" and this could be itself broken down into "Log onto blah blah site", "Select Beacon Score", "Hit Submit"). Again subitems could be broken down further, on and on.

I've already got my main interface that has a list of your topics and it customizes itself to fit phone and tablet interfaces as appropriate using fragments. So i'm interested in setting up the detail section (a screen on phones, a seperate pane on single screen for tablets).

This will be where the red rectangle is on the following images:

Image 1: Master Phone Screen

Image 2: Detail Phone Screen

Image 3: 7" Tablet

Image 4: 10" Tablet

(Not enough rep to embed pictures, and can only have two links. For images 3 and 4 please copy and paste the URLs. I appologize for the inconvenience. If someone with more rep could please post my pics for me that would be great.)

Image 1: Master Phone Screen

https://i.stack.imgur.com/9R5WG.png

Image 2: Detail Phone Screen

https://i.stack.imgur.com/BSO7J.png

Image 3: 7" Tablet

i.stack.imgur.com/xAsoz.png

Image 4: 10" Tablet

i.stack.imgur.com/ynxtH.png

Tasks:

  • Add a new item
  • Edit an item
  • Attach multimedia to an item
  • Delete an item
  • Remove attachment on item
  • Break down item into subitems

Obviously I will have a list.

Should I have the actions available on a long press menu?

Or should I have a tool bar to include those items? Or a combination of the two?

Should Add/Edit pop up a dialog to accept input or should they be able to edit directly in the list (and is that difficult to implement in android?)?

Reordering: Drag and drop or select and have Up/Down button?

1 Answer 1

8

You have lots of questions here; this answer will include my suggestions for some of them.

  1. Add item should be an action (in the action bar) on the list.

  2. Edit, Delete, Attach Multimedia, and Break down item seem like they should be actions on the item itself, therefore should be shown as actions on the item detail screen.

    • Long-pressing the item in the list should select it (triggering multiple-selection mode if possible), and show the contextual action bar, where these item-specific actions are shown. This is basically a shortcut.
  3. Regarding whether or not to pop up a dialog for Add item and Edit: on Android, dialogs are discouraged. If possible, show edit controls inline, or present a separate item creation/editing screen.

  4. Regarding drag and drop vs. up/down buttons for reordering, the Android Design principles state:

    Allow people to directly touch and manipulate objects in your app. It reduces the cognitive effort needed to perform a task while making it more emotionally satisfying.

    Thus, drag/drop and direct manipulation, in general, is preferred.

As a side note, looking at your screenshots, you don't need text labels for every action in the action bar. You should only show text labels for the absolute most important actions, or those that don't have obvious iconography (and even then, try for an icon instead). Note that users can long-press an action on the action bar to see its title.

6
  • Thx, I'm reading now. I tried to upvote you but don't have enough rep yet (hint hint :P). I always up vote people nice enough for an answer :-) Anyway thanks, reading your response now... Jul 31, 2012 at 15:55
  • 1
    Great response, thank you so much! :-) I appreciate insights from someone who knows the android design guidelines because I absolutely want to give a seamless and true android experience to my users. Let me follow up with the same numbers you listed above 1) That's fine for the phone interface, but on the tablet there will already be a + icon for adding a new checklist, how would I differentiate adding an item? 2) Contextual action bar sounds perfect, I read about them just last night :-) ) running out of room, I'll continue... Jul 31, 2012 at 16:00
  • 3) Do you know if that is default behavior for a list item? Should I roll my own widget? I would be grateful for some direction. 4) Excellent, I'm sure this is well documented but if you have any direction here also, that would be sweet :-). Let me ask...would it be OK to have two ways to do something? Like drag and drop, but maybe also a "Up" and "Down" button in context action bar? Last question, not mentioned yet: since you know the guidelines, you know the color swatches? Could I pick any colors from that and still be a proper android app? I want to pick a hilight color. TY!!! :-D Jul 31, 2012 at 16:04
  • 1
    (1) You could also have an inline "Add item" list item at the top/bottom of the list (depending where it makes sense) (3) there isn't built-in behavior AFAIK (4) you should check stackoverflow.com for that, and it's generally not necessary to show both up/down and drag/drop. an app that does this really well is Tasks Free by Team Tasks. Regarding colors, Android Design has color swatches you can use, but you shouldn't feel limited to them. Jul 31, 2012 at 16:09
  • 1
    1) Understood, I've seen similar with "Color Note". Great! 3) I know of that app. They have the same design philosophy that I want to follow! I will check it out. :-) 4) OK, I agree with your initial point that drag/drop allows the user to touch and interact and is the android way :-) ... on the color, I want just a hint like how the core apps sometimes use blue. BTW, I didn't realize who you were initially until my friend pointed it out. Thank you so much for answering my question! This totally made my day. :-) <3 Google Jul 31, 2012 at 16:29

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.