Axure Demo See Axure Menu Again

In my research and development time, I created an Axure tool that automatically creates a full mobile menu prototype from spreadsheet information. The projection was characteristic on the Axure Weblog. Hopefully, this mobile bill of fare tool will immediately salvage yous days of work.

Download the Axure 7 RP starter file
Demo the menu interaction
Exam data

Below I'll describe how to utilize the off-sail, mobile menu framework. Earlier and so, information technology would be worth explaining how I came to develop this menu epitome and when you should utilize it.

While repeaters were introduced equally part of Axure 7 in Dec 2013, I didn't start experimenting with them until September 2015. I mistakenly believed that they were intended exclusively for tabular data. It wasn't until a tight deadline on a tabular array-based estimator project forced me to hack together a prototype with screenshots that I was adamant to master this last Axure functionality.

Equally I began to learn more, I realised I might be able to simplify my workflow using repeaters. Testing out the repeater functionality on a list page revealed some limitations. The mobile carte was my 2nd attempt at testing the limits of what is possible with repeaters. I set myself the claiming of creating a deep, four-level mobile bill of fare without manually having to create over 20 different menu states.

…And it worked.

I know some of my Lean UX peers are probably asking why not merely demonstrate the full menu depth with a single path and explain the limitations to client. While I've used this approach in the past and generally utilise the fastest, simplest technique to communicate an interaction, some clients just want it all. They understand that the additional piece of work will take more time and upkeep. However, their internal workflow may require a fully-realised paradigm. This is especially important when they have internal or off-shore evolution teams. I phone call this approach "Fat Tuna UX", afterwards the expensive sushi ingredient. Information technology isn't "bloated", information technology'due south beautiful and luscious.

Introducing the menu framework

At the center of the automation is an off-canvass mobile card that opens on the current page. This allows users to quickly access the folio'southward subnavigation. If the page does not accept whatsoever pages beneath it, its parent page is opened and the sibling pages are shown. The card includes footer links at the master level and shows breadcrumbs as users dive deeper into the site structure. While deep, off-canvas menus haven't even so established any conventions, this carte du jour is one of the most robust options. Hopefully, it will piece of work for your needs.

Total list of the paradigm'south features:

• Opening menu testify subnavigation of current page, finer overriding the menu'due south last land when closed.
• Domicile icon and link available in bill of fare's get-go level.
• Close icon always available in top left of menu.
• Header navigation included on the main menu only (menuFooter dynamic panel).
• Every menu detail that has subnavigation visually indicates (right arrow icon) that more than options are bachelor to set user expectations.
• Menu pointer behaves the aforementioned as its respective text, opening the side by side level down (subnavigation) in the menu.
• "Home" replaced past "Main bill of fare" back push on all lower level menus. This chemical element does not modify betwixt lower level menus.
• All card levels except "Home", primary navigation prove "View all [menuItemLabel]" to allow access to the listing page itself.
• All tertiary menus and below show the full breadcrumbs trail as "Back" links. This structure allows mobile users who accept entered the site at a page deep in the bureaucracy to orient themselves.

How to use the menu framework

Tutorial difficulty: Easy (no previous repeater feel needed)
Estimated completion time: 20 minutes

1. Download the Axure 7 RP file: https://uxmonty.com/downloads/Automatic-mobile-menus-Webster-1.0.rp
2. Format your sitemap spreadsheet.
   This is the well-nigh of import step. All conditionals and repeater integrators are expecting the spreadsheet information in a particular format. Ideally, this data would closely lucifer established sitemap spreadsheet conventions. However, I did accept to make some compromises to limit Axure complication.
   1. Columns must use the following labels: Element, Parent, Subnavigation.
   2. The Chemical element column is required and should be filled with the menu particular labels. The "Dwelling" card item is contained in the menuHeader dynamic console and should non exist contained in the Element column.
   3. The Parent cavalcade is also required and should contain the carte item'southward summit-level carte. All primary navigation elements must use "Home" as their Parent.
   4. The Subnavigation column is optional.
      1. If the menu item has subnavigation, this cell should not exist empty (I simply put "Yes"). This tells the repeater to brandish the subnavigation icon and to open up the submenu when clicked.
      2. If the menu detail does not take subnavigation, just go out that jail cell bare. When clicked, the pageTitle will be "selected", the menu volition be closed, and the content label will be updated.

The menu repeater information is filtered on the currently selected page or that page'due south parent if it doesn't have subnavigation. Thus, the carte particular rows do not accept to be in any item order, nor should the cavalcade order matter.

3. Copy your spreadsheet into the repeater dataset tab in the REPEATER dynamic panel.
4. Update (or delete) the MenuFooter dynamic console with relevant footer links and social icons: Optional.
5. Preview and publish the navigation.

Hereafter piece of work and limitations

While I'm quite satisfied with all the functionality I managed to squeeze into this prototype, my work is never washed.

Carte peak and scrollbar

The nigh important shortcoming of the carte is that the vertical scrollbar displays unnecessarily. Sadly, I didn't have time to sort this out. Since the menuHeader dynamic panel increases in size as the menuDepth increases, the REPEATER dynamic panel should correspondingly decrease the aforementioned size. I'll have to leave this for some other mean solar day; information technology is a prototype later on all.

Menu depth and breadcrumbs

Listing the breadcrumbs in the mobile navigation is an approach that is simply relevant for 4-level deep IA and shorter. At the 4th level, the menu chrome is already taking upward approximately forty% of the 480 px bill of fare peak, so adding more breadcrumbs would obscure besides much of the menu content. Information architectures that need to get deeper should use a back button instead. In the futurity, I would like to develop this alternative menu framework.

Not adaptive (or responsive)

We usually do desktop and mobile adaptive Axure prototypes for our clients. With this in mind, I created the automated menu every bit a standalone item that tin can be included in small, adaptive views, while a dissimilar navigation prototype is used for larger viewports. Projects or teams that generally as well include a mid-sized viewport or use an off-canvas menu at large screen sizes might consider adding that view to the automatic menu starter file.

jacksonoplices.blogspot.com

Source: https://uxmonty.com/axure-automated-mobile-menus/

Share this post