1

I am building an (Android) app having a button whose text values represent states:

  • "Start" --> pressing it will initiate connection to my server
  • "Starting" --> gives visual cue that button was pressed, and now waiting for server to respond
  • "Stop" --> pressing it will connect to the server and ask it to end the action
  • "Stopping" --> gives visual cue that button was pressed, and now waiting for server to respond.

I noticed that during jumpy ride without glasses, the text "Stop" and "Start" look too similar and the User needs a better indication of the current state.

Questions:

  1. Is it better to replace the (localized)text with images? if so, what are reasonable international symbols?
  2. OR add image to the text ( e.g. on left side )?
  3. If I replace the background color based on the state, what are reasonable colors? ( e.g. concept of traffic lights)

I looked into this question which touches a similar topic.

PS: the app has to work on a wide variety of phones, and must be trivial to operate. No training, no small fonts, no fine shades. Only clear bold symbols that can be read while the phone is mounted on vibrating mountain bike handlebar in bright sunlight :)

I thought about the old paradigm (in the '90?) of depressed button image which was so clear, but the contemporary theme guidelines seems to be against it.

Thanks

  • 2
    It would help if you could explain context exactly. So what does the application does, what will happen when is connected to the server and so on.. Your 1, 2, and 3, questions are all affirmative, and all have multiple solutions that depend on context. – xul Sep 20 '18 at 14:26
  • The app sends periodically the rider's (== user) location to a server. This data is then used during emergency , so every aspect of the app has to be both robust, foolproof and easy to use. I plan to upload a beta soon to Playstore and can post a link here if people care to see. – noam cohen Sep 21 '18 at 13:19
1

Separate the functions into different buttons. Then you can tell at a glance which is active. As a bonus, you won't need extra colors or icons in your UI.

One button for Start, one for Stop. The status messages can then go near the buttons.

enter image description here

  • 1
    I guess what I'm suggesting is that the best practice for multi-state buttons is to not use multi-state buttons. – Ken Mohnkern Sep 21 '18 at 12:38
  • I was fixed on the idea of a single button, but your idea is interesting - I am not bound to a single button. What is the visual difference between line 1 (Stopped and can Start) to line 3 ( started and can Stop)? – noam cohen Sep 21 '18 at 13:22
  • @noamcohen - Lines 1 and 3 are the same. Just showing the click on one button then the other. – Ken Mohnkern Sep 21 '18 at 20:35
  • so in line 1, the Stop is disabled/grayed-out and in line 3 the Start is disabled? I want to have visual cue to the current state. This reminds me (in a good way) the ancient car radios where you pressed a station button and the other button would pop out. – noam cohen Sep 23 '18 at 5:51
  • @noamcohen You're absolutely right. Disable whichever one isn't clickable. (Sorry, I missed that detail.) – Ken Mohnkern Sep 24 '18 at 15:14
1

I would suggest to use a background colour which normally represents these particular actions. Keep it simple - green for starting and red for stopping. As you mentioned you there is a need to wait for a server response so it is useful to communicate this visually. What I have done here is to fade the button out in this state and adding a progress bar to show a loading indication. See the example below:

Start, Starting, Stop & Stopping button states

Certainly it is worth to consider to add some symbols if you feel like. For example, to help to communicate more clearly with colour-blind users.

  • 1
    perhaps a tweak on this design is to have a spinning thing next to "starting" instead of a color fade. the progress bar underneath might be hard to see with a quick glance if this is a mountain bike app. and the faded color for "...ing" might not be noticeable in bright sunlight when you're on your bike (using the OP scenario). nice idea, though. you'd also have to consider color deficient users, such as red-green color "blindness" (deuteranopia), where both colors will look sort of brownish, making it hard to tell "start" from "stop" again as in the OP. – slugolicious Sep 20 '18 at 20:38
  • indeed in the current implementation I added a "circular progress bar" that is visible from pressing Start until server responds (or timeout). Regarding usability in sunlight, I am thinking of adding audio cues to use operations , e.g. say "Starting!" – noam cohen Sep 21 '18 at 13:25

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.