1

The Current Dashboard of our App.

How can we make it more obvious that there are two action in this top cell of the dashboard?

The first option is to tap on the arrow, which will shuffle through the different 'Featured Workouts' in the app. If the user swipes on the cell, this will change the cell to a new category.

What design elements would you add to let the user know there are two types of actions you can take on this cell?

6 Answers 6

1

In my opinion, those arrows are simply placed terribly wrong if you want to keep that functionality. In UX if you want to do something like that you can either:

Limit the swiping area to change the category to the upper menu like most apps

[Come to think of it, it's counter intuitive to have the swiping area for the new category over the RowingWOD thingy, from an user experience perspective, you never do that.]

or

Place the arrows in line with the bullet navigation.

1

It is true, a non-intuitive user interface can create a great user experience, but this requires a training, a learning process and a tutorial for using an arrow sound really funny for me.

You have links for the categories. If are just titles, change the text in links.

Kepp for the arrows the obvious action only.

0

Users will probably figure out the structure at some point. It does help that the "...enge received" and "shared to..." categories are cut off, implying that there's more in the sides of the screen, which usually results in people scrolling/swiping. And since "featured workouts" is highlighted and will remain highlighted also after pressing the arrows, people will figure out that they're moving within the same category. Also the little circles underneath "Master the Machine" help with the orientation (understanding where the user is located within the app). So the only thing I would potentially change (but not necessarily) is moving the arrows closer to the central item and not directly underneath the other two categories' names, just so the users aren't confused. But every app has a learning curve, this one doesn't seem too problematic.

0

I find something that I would normally look for is the central title being in a larger font than the other two headers. Potentially bring the other two headers inwards a little so that, at a glance, the user can easily tell that they're related in a UI sense.

To avoid the confusion with the swiping and the arrows, I would move the arrows to either side of the •••• page indicator. This will let the user easily know that the arrows are for manipulating that switcher, rather than for the header.

At that point it becomes semi-intuitive that the top menu will be movable using a swipe.

1
  • Obviously a lot of the above relies on the user being used to common mobile user interface techniques and their prompts, but I feel that most people these days are on board with these kind of things.
    – fletch254
    Sep 20, 2016 at 10:00
0

There is no acceptable way to indicate the arrows and swiping do different things - they should not do different things.

You have two independent attributes - category and featured workout. You should display them separately and allow them to be manipulated separately.

I would suggest using two slightly different shaded bands, one to display category, and one beneath it to display featured workouts. Both could then allow swiping and arrows to change the selection - with clear labels and enough consideration of sizes for hit areas for tapping/swiping. Changing the category would also change the featured workouts, but changing the featured workouts would just go through the featured workouts in that category and then loop back to the start of the list.

0

There is another unique way of doing it too, you can increase the height of this section a bit & then fit the vertical swipe for a particular category options. Horizontal swipe will do its job as usual, to switch to left or right categories.Give it a try.

Never always settle for obvious. . .

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy