Skip to main content
Share Your Experience: Take the 2024 Developer Survey
8 votes
Accepted

What to do with this "wasted" space in my side bar navigation mockup?

Some ideas: Logo / Brand name Remove "Menu" and make the breadcrumb smaller, so it doesn't suggest some relation with "File"
Alvaro's user avatar
  • 16.8k
8 votes
Accepted

I need to justify why having two sidebars on the same side is wrong

Learn, don’t justify Here's your problem: How can i justify my assumption Don't justify it — test it. User experience is about discovering the answer, not enforcing it through ...
plainclothes's user avatar
  • 21.3k
7 votes

Should an opened sub-menu collapse when the user opens other sub-menu?

When user triggers an action, let it happen. Don't initiate another action simultaneously unless it behaves like toggle/switch. Explanation: Here user clicks on one of the categories (Material design,...
Jivan's user avatar
  • 3,728
5 votes

How to display two sidebars on mobile?

Two usable options come to mind. 1. Accordion menus 2. Sliding panels
plainclothes's user avatar
  • 21.3k
5 votes
Accepted

Home link inside sidebar. Sidebar opens on click. Clicking home should open sidebar or home?

The pointer cursor alone doesn't seem like a clear enough indicator that clicking the logo or sidebar will open a menu. Try adding a caret icon (>) or menu peek effect with Javascript to allude to the ...
Peter Arthur's user avatar
4 votes

Minimalistic expandable / accordion menu button style

An alternative is doing as Material design deals with expansion panels: As you can see when a panel is expanded, it separates from the others to deal with this problem.
Alvaro's user avatar
  • 16.8k
4 votes
Accepted

Minimalistic expandable / accordion menu button style

You can give a color to the background of content inside the accordion panel, such as #f4f4f4 or light grey which will improve the depth and more noticeable.
Rob H. Yamin's user avatar
  • 1,789
4 votes

What to do with this "wasted" space in my side bar navigation mockup?

I don't think you need the space at all.
Eric Stoltz's user avatar
  • 1,754
4 votes

Actions inside a dropdown

Why not just display the "Edit" Option below after the user has chosen the project?
Pectoralis Major's user avatar
3 votes

Thin left sidebar instead of hamburger menu for mobile

Mobile screen real estate is precious. There just isn't very much of it. The popularity of the "hamburger" menu is because it preserves as much of that real estate as possible for your content; all ...
Daniel Beck's user avatar
  • 4,592
3 votes

What to do with this "wasted" space in my side bar navigation mockup?

Your app's icon or company logo. Clicking it should take the user to screen the "Home" link does. Using your icon or logo will re-enforce your brand and appear natural to the user.
jColeson's user avatar
  • 1,495
3 votes
Accepted

RWD - Drag to background

When the item is being dragged, the panel could hide itself or move out of the way. Check out these demos from Codrops for inspiration. (Your interaction would be the opposite of most of these, but ...
Nate Green's user avatar
  • 2,483
3 votes
Accepted

How to show long navigation list horizontally?

Try keeping the scope of items to a single day, and use a horizontal day timeline to hint at volume of upcoming (and past) events with badges. Pair this with a narrower event sidenav (see below) and ...
Mike M's user avatar
  • 24.7k
3 votes

How to choose between a Popover, Inspector, or Toolbar to edit properties?

It depends on the context, and the amount of functionality you need to complete a task. Popovers Apple declares in their Human Interface Guidelines: Use a popover to expose a small amount of ...
Mike M's user avatar
  • 24.7k
2 votes

Hide sidebar or show small side bar for web app

The reliance of your users on the current project and the frenquency at which switching project occurs is going to dictate the design chose here. At first glance this one works best. The space remains ...
alexbouchard's user avatar
2 votes

Should an opened sub-menu collapse when the user opens other sub-menu?

Yes! it should close. Unless there is direct relation between the submenu items like if user would like to compare or interchange elements(i.e. they're customizable) or you can drag and drop things ...
Harshit Choudhary's user avatar
2 votes

Material Design - bottom navigation with upper tabs?

You could split them into Categories with the use of Chips just like Google Play Store does. Take a look at the screenshot below. How this helps is, that it removes any element of horizontal swiping....
Swapnil Borkar's user avatar
2 votes

How to display two sidebars on mobile?

I create a little prototype to deal with this situation on devices with little space. You can find it here http://5rsg1w.axshare.com/ First you show your users a Menu-Button Then the first level ...
Peter's user avatar
  • 93
2 votes

UI: add buttons to Sidebar boxes

See if you can replace the buttons with icons and place them in title bar:
Dipak's user avatar
  • 16.2k
2 votes

Is it ok to use Bottom Nav Bar with Tabs for sub-level?

It's perfectly ok to use bottom nav bar, and also recommended to do so considering the size(height) of current smart phones. Thumb is the primary finger most users use for single hand interactions ...
Dipak's user avatar
  • 16.2k
2 votes

Navigation for dependent pages

I recommend sitting down with a little paper and mapping out how you think people want to use all of this information. Think about some of the following questions and try to come up with more. What ...
Joshua Lowry's user avatar
2 votes
Accepted

How long should a swipe action be to open a sidebar?

Do Not Use a Swipe Action if what you are building is a webpage. If it's a mobile app, let the system i.e Android or iOS etc. handle the drawer or sidebar speed. But if its a mobile view for a ...
Adedoyin Akande's user avatar
2 votes
Accepted

Best practice to best illustrate side navbar children

I don't think you'll find any "best practice" for this particular module. But here are some visual cues for the user to better understand the level changes. The change in arrow direction with an ...
Shreyas Tripathy's user avatar
2 votes
Accepted

Why do most interfaces rely on sticky top bars instead of sidebars?

I am not aware of any studies, but below is my personal experience why sidebars should be rarely used if you target desktops. Sidebars scale badly on large or ultrawide screens, unless you fill the ...
jaskij's user avatar
  • 365
2 votes

Left Sidebar Menu design with hierarchy

I would like to suggest to revamp your current flow if it still in the design process. The sidebar is useful when you have two levels of hierarchy. For the three-level hierarchy, I recommended put ...
Rishi Shah's user avatar
2 votes

Collapsible sidebar vs horizontal tabs

It's always best to avoid making the user scroll horizontally. Without seeing your UI, it's hard to tell if the six horizontal tabs should be replaced by vertical ones - if your users find the ...
Izquierdo's user avatar
  • 12.7k
2 votes
Accepted

Conflict between sidebar and tables with many columns

You can collapse the sidebar and not rely only on icons but also on tooltips that show up while hovering on the icon.
Talita's user avatar
  • 36
1 vote

Is it useful for users to have different UI of side menu in each page?

It is considered best practice to keep navigation and other similar elements consistent throughout a site. Consistent navigation helps the user know where they are within the site at a glance and ...
tsulli's user avatar
  • 13
1 vote

Validation in Slide Outs (desktop)

should i disable yellow navigation bar "Filter List" (img 2) and don't allow user to back? so, when he open filters slide-out again he see this invalid filter slide out, not all list of filters No ...
prazor9's user avatar
  • 858

Only top scored, non community-wiki answers of a minimum length are eligible