Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have a series of questions, aimed at being an enjoyable experience, with a nice solution for the desktop already worked out, using a styled navigation bar, which doubles as a progress bar for the process (much like bottom left http://medialoot.com/item/organic-flat-ui-kit/)

My problem is translating this idea to mobile...

share|improve this question
    
Can you provide a textual description of what you want to imitate from that page? May be explain the situation with more detail. –  PatomaS Apr 7 at 2:41
    
Sure, thanks for the reply. This is to be a staged process, like a wizard or questionaire. Each section can have an icon associated with it, so an icon only version of a nav is a possibility. The desktop version uses a nav bar similar to the progress bar indicated in the flat ui graphic I linked to, this doesn't translate too well onto the mobile experience as the desktop will features titles on hover. I'd love some examples of mobile staged processes, questionaires or wizards if anyone has any? The important part for me is the user knowing exactly where they are in the process. –  Chris Apr 7 at 8:52

2 Answers 2

For now I have decided to design a Journey based solution for this task. I will be using numbered steps, with a "Step 1 of 9" as the first page focus, accompanied by a flat design progress bar to quickly show the progress along the journey.

Each step will be able to use swipes to navigate between the steps, with a button included to jump to top-level navigation page, which uses a grid based set of icons.

Any feedback and advise would be really awesome. All the best.

share|improve this answer
    
Thanks for all the feedback guys!!!!!! –  Chris Apr 8 at 0:55

A way of communicating the progress of a user, whilst retaining the same basic look of the desktop app might be use a 'cropped' progress bar above the mobile interface (perhaps using images instead of dynamic controls)

Here is an example of a cropped progress bar (I crudely replaced the "2" with a "2/9")

enter image description here

The right hand side greyed-out connection tells the user that there is another question to come. Having something like this at the very top of the page could be an unobtrusive way of communicating progress.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.