11

I am working on redesigning the UI for a Web app that registers users for something work-related (so my audience is captive). One of the main reasons for the redesign is to make it mobile-friendly; I need it to work on smartphones and tablets, as well as desktops.

The place I am stuck is secondary navigation. The registration form is currently in multiple steps, but some are quite lengthy (30+ inputs on one page), so I am planning to break it up into more steps. The old version has breadcrumbs at the top as the user steps through the form, allowing navigation back to pages you have already completed, but not forward.

One advantage to the breadcrumb approach that I don't want to lose is giving the user that sense of where they are in the process. I am concerned that the increased number of screens will make the list of steps too long. I am also concerned about the use of breadcrumbs for mobile devices, especially touchscreens.

Are breadcrumbs still a valid option? Do they make sense in a mobile/touch screen arena at all? If not, what other options do make sense?

EDIT - Here is the first draft of my solution: First draft

Improve this question
0

4 Answers 4

Reset to default
4

Touch-screen UX is a really interesting field. You really need to factor in the quality of the touch-panel, the type of panel (resistive vs. capacitive vs. infrared, etc.), whether the UI can be zoomed via multi-touch, which kinds of devices the UI will run on (just iPad? just mobile tablets? kiosks? tablets and desktop browsers).

The best solution I have for this is vertical breadcrumbs. Here's how I've done it before with some success in usability testing:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Just be aware that the nav items along the side need to be large enough to easily target with a finger (40px square at a standard DPI is a good rule of thumb minimum on high-quality touch panel like a tablet or mobile phone. You can get slightly smaller on a resistive touch panel and you need to be much bigger on a standard SAW or PCT kiosk touch panel).

Note too that this UI also expects you not to enable multi-touch zooming of the interface, which may be a problem.

If, as your recent comment suggests, you need to be able to zoom into the interface a more traditional breadcrumb trail (modified only slightly to permit easier targeting with a finger) can be used effectively (although naturally this can somewhat limit your number of steps; something you should probably be doing anyway):

mockup

download bmml source

Improve this answer
3
  • 1
    According to analytics on our current user-base, we are designing to iPads, iPhones and the occasional Android phone. Thanks for the visual, it has my wheels turning.
    – ph33nyx
    May 30, 2012 at 16:39
  • The combination of phones and tablets may conspire to throw a spanner in the works of this layout, since the variation in screen size will likely mean you need to make the UI zoomable anyway. If so you may have more like with a more conventional breadcrumb trail along the top that users can zoom into to more confidently tap their desired section. Even so, you might like to turn the standard links into nice tall buttons to make them more finger-friendly.
    – Kit Grose
    May 30, 2012 at 23:56
  • 1
    I am choosing this one as it has inspired my solution. I got pulled onto something else for a few days, but I will post my solution this week.
    – ph33nyx
    Jun 4, 2012 at 20:00
3

A couple more ideas:

1.Accordion style wizard; by clicking "Done" in each step user proceeds to the next section. Section headers are always present showing the status and option to edit the section by clicking on the header. Downside is scrolling.

Accordion wizard, mockup created in Axure

2.User can click a control that rolls up the wizard steps and progress.

enter image description here

Improve this answer
1

Breadcrumbs aren't a normal pattern used on mobile, and depending on the page titles and number of pages this list could be quite large on screen. Questions you should be asking are -

  • Do the user's use the breadcrumbs frequently as part of the task?
  • Do they need to go back to specific pages (eg if they are on page 5, have to go back to page 2)?

as you have a captive audience for a work related thing I would just have a 'Back' button at the top of the screen that goes back to the previous page. You could also include a simple progress indicator such as 'Step 2 of 5' so the user knows how far into the process they are.

Improve this answer
1
  • Unfortunately, I cannot number the steps. This "template" will be re-used dozens of times each year, with the exact steps (and number of steps) customized for each instance. One of my team-mates suggested a % to completion progress bar within each category of the form (i.e. personal information)
    – ph33nyx
    May 30, 2012 at 16:35
0

As others mention, breadcrumbs won't be a great experience on mobile. If it's really important for people to be able to jump back to any step in the process, then I suggest showing a menu that displays the current step and provides a list of previous ones, and maybe the steps still to be completed.

If jumping back and seeing upcoming steps isn't as important, just show the current step with back and next controls to step through, but still some indication like the progress bar your coworker suggested, to give people a sense of where they are in the process.

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.