I'm working on a medical calculator android app. It's design is based on cards as in the image below. My question is : what is the best approach to make the users know these are buttons and can be pressed ? Also the numbers (the 3 areas) can be pressed to be overwritten, how can I make the user know that these numbers can be pressed ? Thank you.

enter image description here

  • Can you explain further - what is top right number? what is left number, what are two right numbers? and which needs to be editable – xul Dec 4 '18 at 16:53
  • The top right numbers (the colored ones) represent the drug concentration (Not clickable). The other 3 areas of numbers represent the drug dosage calculation (which are the clickable ones) – Bialy Dec 4 '18 at 23:24

In keeping with the other two answers, I would pursue a strict overview / edit mode information architecture with this type of application.

The overview layer should provide neatly ordered high-level drug type, delivery mode, and dosage information with emphasis on legibility and ease of finding. Present this as a deck of cards, as you're already doing. Some people are on complex drug regimes that can easily make for 15-20 item lists. My apologies by the way, I am merely inferring that this is the overall purpose of your application - it might be helpful to add user workflow information to minimise conjecture by your respondents.

If you stick to one of the Material recommended card designs with a recurrent pattern, you can optimise your overview mode UI detailing to facilitate passive consumption of the information, i.e. read above edit.

In order to offer your users ergonomically feasible edits, have them toggle easily from overview to edit mode, one drug at a time. The affordance to do so can be a single edit button or tap target in a recurrent location - this way each card needs only one interactive element, which solves your spacing problem. You might even map a double-tap-to-edit type interaction onto the entire card if you manage to build a micro-animation of sorts that zooms the card to fill the entire screen; something you should definitely user test before committing to.

In edit mode you can take advantage of the entire screen, which makes interaction patterns like...

  • tap-to-overwrite,
  • sliders or scrubbers
  • numeral spinners (with floor and ceiling)

...ergonomically feasible.

Material has UI pattern elements for all of these things.

A simple save call-to-action causes the app to consume any changes made, and reverts to overview mode, which is a highly learnable pattern. Besides handling the space layout problem, this slightly more compartmentalised interaction mode is also safer. This is a medical / pharmaceutical application, by the looks of it, so you need to minimise the opportunity for user error above all else - the last thing you want to see happen is someone accidentally overdosing, which could have legal as well as moral consequences. On that note, test your design with users thoroughly. Consider that with age and conditions like diabetes come vision and hand-to-eye coordination problems in some patient cohorts.

It is tempting to have users edit information in-situ, as you might do on a desktop application where space is less of a concern. However space conflicts - between high information density and ergonomically feasible interaction patterns - are an inherent challenge with mobile apps, which is why I would recommend working with depth of navigation instead. Best of luck!

| improve this answer | |
  • Actually the app already uses 2 levels architecture. The overview layer is just as shown above, and the detailed layer is when he clicks on the uppermost right small arrow button. However your comment inspired me to remove the 2 small buttons and depend on single & long clicks on the title of the drug (creating ripple effect) with a small tutorial illustrating this action at the very beginning of the app. What do you think ? – Bialy Dec 4 '18 at 23:33

1. Cards

what is the best approach to make the users know these are buttons and can be pressed ?

Follow the Material Design guidelines to provide better user experience for Android platform. Take a look on a Cards spec. There is no any reason to invent a bicycle here.

enter image description here

2. Content editing

how can I make the user know that these numbers can be pressed ?

  1. You can have EDIT button as an action, which is 100% understandable by users

  2. Provide edit functionality as a separate screen. First, users will focus on the editing task. Second, you'll have a lot of screen space to make editing more comfortable to users

enter image description here

| improve this answer | |
  • Thank you for this much informative answer, but sadly I think applying this extra row to my card will make it more taller & may not fit small screens specially when the keyboard is visible & also I need to show about 2 cards the same time. – Bialy Dec 4 '18 at 23:26
  • Also the edit button will not help here as what I meant by overwriting is to click "any" of the "3" black numbers, then an input dialog is shown where the user can re-write the dosage value, then the app recalculates the result according to his input. I know this sort of apps will not be that much clear for non-medical persons, but your contribution really inspired me a lot. Thank you again. – Bialy Dec 4 '18 at 23:29
  • @Bialy please note, you can use smaller cards which contains read-only info and the single action only (see Action area 1 in the spec) tied to the whole card. On click, the app switches to edit mode. – Alexey Kolchenko Dec 5 '18 at 7:44

Maybe try using actual button or input on elements or using the same shadow and border. The inputs will probably be harder.

| improve this answer | |

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.