search

Broward-Drupal / broward-drupal

Broward Drupal projects
8 stars 0 forks source link

Navigating the Event menu system #65

Open modulist opened 6 years ago

modulist commented 6 years ago

The objective of this UI is to create a mobile-friendly user experience with a completely flat menu structure and a layout based on a one-page design pattern.

Navigation will function like a mobile app's menu with a limited number of icons to lead to the main parts of the site. For an event site, the crucial links are 1) event information (venue, cost, dates, etc.); 2) schedule; 3) speakers; and 4) community.

In order to pull this off, I'm proposing a new kind of menu that we can call an overflow menu. The menu will display only a few icon links with a More... button that leads to additional text links.

Normal state at 375 pixels wide:

event menu - 375 normal

Expanded state at 375 pixels wide When the More... link is expanded, you will see a search widget followed by a series of text links, and another More... link if the menu goes beyond a certain number of items. event menu - 375 expanded

The second More... link can be expanded to a menu with a vertical scrollbar if needed: popup - expanded

Expanded state at 768 pixels wide:

Here you can see a Community icon before the More... link, which was the first text link on the expanded menu in the 375 pixel version event menu - 768 expanded

Additional specs for hover and active states can be found in Figma ›

shaal commented 6 years ago

I think the second "more..." in the menu is confusing and results in a giant list of options, Maybe instead it should say 'sitemap', and take users to a dedicated sitemap page? https://www.nngroup.com/articles/site-map-usability/

Solamsnake commented 6 years ago

I agree with David, the second more is confusing or maybe using an other word than "More..." and keep the same idea can help...