1

I have a web app with a flow involving deep nested resources e.g

class -> attendance dates -> attendance (show) -> edit attendance

I explored various nav options like -

Whatsapp

unidirectional flow with a back arrow and page title in navbar

whatsapp account settings page


Amazon

constant navbar with a hamburger menu button for universal slide out menu and relying on browser / mobile back button for going back.

amazon notifications page

My app presently has a Whatsapp style nav on mobile with a hamburger menu button that toggles a slideout menu on level 1 pages i.e classes. On desktop, I show the slideout menu all the time (kind of like GMail on desktop).

my app's ui on a deeply nested page

When on 2nd or 3rd level pages, the user has to click on back arrow twice or thrice to get back to a first level page and then he can access the main slideout menu.

Most of my app's users are teachers who are a bit uncomfortable with my current UI. What's the best mobile UX pattern for such resources? A pizza menu on top right corner with link to dashboard? Or breadcrumbs?

5
  • 3
    "Most of my app's users are teachers who are a bit uncomfortable with my current UI" = any details on what they find uncomfortable? Have you observed them using the app to see what typical paths they take through it? Have you considered a toolbar at the bottom? In general, the WhatsApp model is preferred when people typically have to open the app to tackle one particular task. The hamburger menu is preferred when people have to open the app to perform a whole bunch of different tasks.
    – DA01
    Jun 24, 2015 at 16:04
  • 1
    Example: If they edit & update an attendance, they land back on attendance show page which shows them the changes they have made. Now from this page, they have to click back arrow twice to get back to classes page from which they can access main navigation. -- On Whatsapp it's the same, you need to go back 3 times. One option I am considering is to show details and forms in a modal so that users stay on same page.
    – Jagira
    Jun 24, 2015 at 16:11
  • 3
    So are you saying teachers do have to accomplish multiple tasks while inside the app? If so, then you may want to consider the toolbar model ala instagram or facebook. Also, don't be too hung up on 'pages' on apps. Often tapping back 3 times can actually be a lot faster than tapping a menu icon, scrolling, then tapping the new location.
    – DA01
    Jun 24, 2015 at 17:16
  • 2
    And modals are an option too, though realize the user needs to dismiss the modal as well. You're not necessarily saving effort in that sense.
    – DA01
    Jun 24, 2015 at 17:17
  • 1
    Great points. I agree, closing modals will take similar effort. I will try something like this - lh3.googleusercontent.com/… (the bottom toolbar). That way major nav links will always be accessible.
    – Jagira
    Jun 24, 2015 at 17:40

2 Answers 2

2

From what you have said, it seems like your app is 4 levels deep: class -> attendance dates -> attendance (show) -> edit attendance.

Here's a suggestion that I just came up with, it may not be the best because I have not tested it but see if its of any help. NOTE IT DOESN'T INVOLVE A BACK BUTTON!

But, a caveat, depending on the amount of dates, and the amount of edit options, you may need pagination and modify bits of the UI.

See here enter image description here

If this is useful, please upvote or comment so I get feedback. Thanks.

1

It sounds like the main case is for people looking for the easiest in and out. There are obviously multiple options for any interface pattern but I'd suggest using a mix of tab bar and one-step back. That means you'd follow a similar nested pattern like you have today, segregating the categories to the given tab bar items which would act as individual home buttons per category, and the back button would behave as the single step back.

This isn't the perfect solution either. If you're mainly building for android you can skip the on-screen back button altogether, and possibly skip the tab bar and have a home button on the nav bar left.

To really answer the question though you need to answer this one: what is the goal, and what is the easiest way for the audience (demographic) to reach that goal successfully. We're not fully clear on the goal so we can't give the best answer or suggestions beyond what you've told us.

1
  • Is tehre a precedent for assigning a multi-step jump to a Back button? Android and iPhone have different standards for teh behaviour of what appears to be the same button.
    – JeromeR
    Oct 25, 2015 at 9:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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