11

I am designing an application that allows the users to train at home.

I have a step (let's call it step 1) in which the user must be in a position in order to "sync" (step 2) with the app for the upcoming exercises. During that sync period (step 2) the user must move his body or simply move - the way he must move being presented through a video on the screen.

Let's say the screen looks like this, with a title, a picture of the position the user must take and a small description. The call to action must again remind the user that he has to be in a position - in the example I used a general CTA.

Once the user the "CTA" button, the user proceeds to step 2. The step 2 screen looks similar to the step 1 screen, with the image being replaced by a video and the lack of a button. Once the sync is ready the user is prompted by a message (success or failure).

https://i.imgur.com/nC4T62q.png

Current problems:

  • When the user goes from step 1 to step 2, he is not prepared to perform what he sees in the video in order to sync. First he has to read again what he's supposed to do, even if I prepared him in the previous step on what he is supposed to do. By not moving when he reaches step 2 and waiting to process what he has to do, the step seems way harder than it actually is and sometimes the sync fails.

Already tried: moving the video, along with the initial position, to step 1 so he can preview what he is supposed to do. Sometimes the users will start performing in step 1 and they get tired and complain that the sync does not happen.

I am looking for any possible solution that would make the process easier and solve the problem.

Possible solution: I thought about this while writing this. When the user gets to step 2, inform him of what he has to do and add a big countdown when he can begin to perform that movement/action? Maybe during that countdown he can get prepared.

LE: The synchronisation process (step 2) captures the user's motion and compares it to the video. This way, for the following exercises it knows which leg is the left leg, which arm is the left arm etc. The sync takes between 10 to 15 seconds to complete, nothing too tedius. The actions the user has to perform are simple: raise your x knee, raise your y hand etc. Another mention is that this process must be done every time the user starts training.

LE2: The age demographic using the app is 40+ years old

Improve this question
9
  • 5
    Could you please clarify what you mean by "sync" here? I am having a hard time picturing it. Do you mean syncing up the user's body with the image shown on screen?
    – Shreyas Tripathy
    Jul 31, 2019 at 10:52
  • My bad, should have clarified what this sync process mean. I have updated the initial post, you can find the update at the end of the post.
    – Darkkz
    Jul 31, 2019 at 11:31
  • 1
    There's always the chance this isn't a "talk-problem", and is more of a "do-problem"; in that we might not be able to talk through what a good choice is. It may be best to implement a few iterations and do actual user testing on the target demographics (build a prototype of that step interaction for a few ways of doing it, and then give it to target users to see how they interact).
    – Delioth
    Jul 31, 2019 at 18:48
  • Is the sync one single step? From your description in edits, it seems there are several different actions, so you should probably split them if possible: raise your left knee (wait for this to be done and detected), raise your right knee (wait for this be be done and detected), and so on. But you should probably ask yourself how the user is actually manipulating their phone and doing what you're asking them to at the same time...
    – jcaron
    Aug 1, 2019 at 9:49
  • 1
    @mowwwalker I need the user to push the knee behind, but I agree that the text can be improved. We haven't thought about knee locking, and this is a good suggestion, thank you.
    – Darkkz
    Aug 3, 2019 at 13:56

3 Answers 3

Reset to default
33

I think you are putting too much expectation in the video without any prior warning of what will happen.

I have the image of the Olympic's dive: before the jump there's an animation on the screen of how the action will be performed with some technical info, so the viewers already know what they will see.

dive

The same thing you can use in your application, find some way to prevent the user schematically how the next step will be, in this way you are not putting all the future action just in the next step video.

enter image description here

Improve this answer
3
  • 4
    What a great suggestion! Once the user starts (i.e. press the CTA) I could display a progress bar or a countdown so the user has a sense of finality - as some users get confused for how long they should do that action and some may stop 2-3 seconds before the sync is completed thus not completing the sync and having to repeat. Do you believe that once the user starts the sync - presses the CTA button - should I enlarge the small video example that is now displayed in the corner (as per your example)?
    – Darkkz
    Jul 31, 2019 at 12:05
  • 9
    I think the preview video or animation of the future action should be independent of the real video to emphasize the change from one step to the next. But these are already design decisions that surely you will improve with the implementation.
    – Danielillo
    Jul 31, 2019 at 16:27
  • 3
    "prevent" --> "present", probably; tried to edit, but "Edits must be at least 6 characters"...
    – Pablo H
    Aug 1, 2019 at 12:19
7

It is worth considering using time intervals. I think that a counting counter for example from 5-0 could work here (or other time period) A lot depends on the context and environment in which the user is located

It's possibilty to omit the CTA, instead user the counter which changes the step every designated (convenient) time interval. this approach will allow to treat the phone as a screen and reduce interaction, which behaviorally will cause the user to focus on his own body and task

It's a chance for create friendly & pleasurable UI

enter image description here

Improve this answer
4
  • My initial thought was to add the counter so that the user receives a sense of urgency (i.e. in 10 seconds I have to perform what's in the video) while allowing him to figure out what he's supposed to do. I am curious if I can add a preparation countdown (before he starts, that tell him how when he can start doing the motion) and one after that tells him for how long he must do the motion. I have a feeling that two countdowns may become confusing.
    – Darkkz
    Jul 31, 2019 at 11:33
  • 1
    Yes, two countdowns are to abstract and confusing. Danielillo suggest good solution for preparing user, it's good idea to connect those solutions.
    – Piotr Żak
    Jul 31, 2019 at 11:50
  • Thanks for confirming my thoughts - that two countdowns are going to be too confusing. I will use one as per your example, to provide a sense of finality to the sync process and combine this with Danielillo's solution.
    – Darkkz
    Jul 31, 2019 at 12:07
  • @Darkkz I know that the Passion4Profession fitness apps have such a counter before every workout. This way the user doesn't have to press a button, he simply has the phone laying somewhere in visible range and it plays down the exercises in a row. But before each exercise a voice announces what type of exercise follows now.
    – Big_Chair
    Jul 31, 2019 at 12:18
5

Are you using voice/verbal instructions? Cause you should!

Like in any dance or martial arts related class, I think the best way we can learn to do some new or unknown movement is to receive clear physical and verbal instructions, starting with a step by step slow pace explanation accompanied with physical demonstration and verbal instructions.

Mimicking that, the flow could go like this:

  1. What's next?

Screen: [shows name of exercise]

Voice: "Next exercise will be [name], let's remember how it was done"

  1. How it's done?

Screen: [video that slowly shows how to do the excersive step by step at a slow pace]

Voice: [at the same time explaining what the video is showing]

  1. Get ready!

Screen: [shows video transitioning from the exercise explanation to the position that they need to make before starting the real exercise]

Voice: [at the same time explaining that and saying stuff like "in ten seconds we will begin the exercise, remember to {whatever relevant to the exercise} and the count down at least from 3, like 3 2 1 let's go! Ideally synchronized with an on-screen timer]

  1. Results / Feedback.

If the user already knows the instructions you could add the voice-command like "SKIP" to let them go directly to step 3.

Improve this answer

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.