I have a question wizard (Image thumbnails), I have designed my layout as below for desktop and mobile. I am not sure what should be the best place to include page numbers on mobile screen, as I done it here on the screen. My next and previous buttons are fixed on bottom on both the screens. only on mobile screen the page numbers will scroll(with the images) based on the screen height. Is that poor design? or any suggestions appreciated.
1 Answer
I see your mobile screenshot and as i see you have space before and after next and previous text. You can move Next text to right side and Previous text to left side so you have space between them and you will place number in center. please see below attached image for better understand.
same layout for your desktop layout.
-
thanks for your suggestions. In desktop screen I would like to keep the navigation order as it is since it gives user to more user experience with Next & Previous closer together. Also, when it comes to the mobile, I am agree with you putting the page number in between, then again I had some issue with iPhone 5 resolution with the 16px letters and fair amount of padding break the layout.– NPNMay 21, 2017 at 23:51
-
i just suggest you for better user experience. You have to utilize view as per user experience and you can replace 2 of 14 with 2/14 make current page bold or highlighted as its a current page. You can use media query with break point and write code for particular screen where you can face problem. May 22, 2017 at 5:25
-
Yes of cause I am using custom media query. Problem solved by reducing padding left/right and made font size to 15px only in 320px width (iPhone 5). Also, for better a user experience, I made the navigation same as in desktop. Appreciate your support . cheers!– NPNMay 23, 2017 at 0:21
-