I'm building a breathing and mindfulness application and I have two texts similar to these ones:

Breathing in I know I am breathing in

Breathing out I know I am breathing out

These are shown in a small "popup" dialog on the screen. This dialog is interactive, the user can give input to say whether she is breathing in or out. (Only one phrase is "active")

enter image description here


I'd like to find a way to make it easy for the user to focus on the active breathing phrase

What I've discovered so far

I've been looking at various ways to draw attention to areas in a design, and there's movement, size, color and contrast, space

Movement is very powerful and this is okay for this case since the user will not have to pay attention to anything else. But I'm not sure how to use movement

I'm not sure if moving the text itself would work, perhaps changing the background by changing the color somewhat is one way

  • This is a very good question, on many levels. But probably more appropriately asked in UX design. Not sure how they'll deal with something like this, though. It's such a good question that they might consider it unable to have an absolutely "right" answer. – Confused Dec 5 '17 at 9:02
  • @Confused Thank you for this feedback, i'd be happy to have this question moved there. Can you or another moderator do this? (I don't want to delete the question now that there is an answer to it) Kind Regards, Tord – sunyata Dec 5 '17 at 23:37
  • I have no idea how to move it. I've just been suspended over there for a month for the way I communicate. Yippee! – Confused Dec 5 '17 at 23:49
  • I will not migrate this question for now as it does not seem to be off-topic here and nobody voted to close it yet. (Should it be closed in the future, feel free to flag it for moderator attention. Also, only diamond moderators can migrate questions to a site other than Graphic Design Meta. CC @Confused) – Wrzlprmft Dec 6 '17 at 6:54

Taken from this answer: How to draw attention to a specific area of a design?

Here are some ways you can draw attention, roughly from the least subtle to the most:

  • Movement - While effective, this should be used sparingly because it can grow distracting and annoying.
  • Size - If a design element is larger than everything else, it will stand out.
  • Color - Any deviation from the background colors or other colors used throughout the design will draw the eye.
  • Contrast - A dark object on a light background will stand out. You should also consider logical contrasts in your subject matter, such
    as the following list: apple, orange, pear, bicycle.
  • Text/Copy - Certain words draw the eye: Free, Secret, etc.
  • Whitespace - Giving a design object enough whitespace around it will help differentiate it.
  • Guiding the eye along a path - This can be as subtle as the direction a person's eyes are looking in a photograph or as blatant as an arrow.

You should use size, contrast, and subtle movement. Perhaps your design could mimic the behaviour of the chest when breathing in and out. The interactive pop up should be circular and should expand and contract, with changing text.

Something like this: enter image description here

  • Thank you, this helps, and is a nice way to visualize breathing. One thing though that sets our application apart from many others with breathing visualizations (and makes it more difficult to visualize the breathing) is that the user determines gives the length of the in and out breath as the input to the application which is then visualized (rather than the application setting a length and asking the user to follow this tempo). I think though that we can use these principles in our application of size, contrast and subtle movement. Thank you again! Kind Regards, Tord – sunyata Dec 5 '17 at 23:43

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.