0

Web UI

I have a web-app which has like the above attached image,I want to display the same in mobile but in a meaningful and more convenient way,Need some advice for design the above in mobile.

Description of the image/UI:

In the Top left : There is a heading contain the exercise name just below that there is an Image (Exercise image) right to it there is the exercise description and below there are fields where you can add the set 1. Number of set 2. The weight you can add and delete the Sets respectably.

In the down there is Skip and Next button to go next screen .

IamAbhijit
  • 203
  • 1
  • 8

1 Answers1

1

The first step of transforming something from (as far as I can tell) desktop to mobile is to sort your information by importance and then presenting that information under each other, or in multiple steps.

Since you didn't give much context, I can only judge from the image. It seems like you have multiple steps, there are specific UI controls on different platforms for that:

Android: Steppers
iOS: Page Controls (I'm not sure if there's a better control for that)
Didn't find something specific for Windos Phone, but here's a general link.

Big_Chair
  • 6,815
  • 3
  • 30
  • 50
  • All though your answer is not very accurate but some points like steppers really applicable in my app.What i was asking is how to position these elements (Like Exercise name,Exercise image,Exercise Des,Set 1,Set 2 so on so that its usability and look and feel would look good on mobile device – IamAbhijit Aug 08 '16 at 10:28