More intuitive navigation solution

Question

I'm doing redesign concept of iTunes and decided to display primary navigation option in the center. But when device is connected navigation gets more complicated so I have two options, the first one is to add "Device" item in to primary navigation menu and the second one is to put device icon besides search bar. Which one has better UX?

Option 1:

Option 1 (device page):

Option 2:

Option 2 (Device page):

Option 1 pros: Navigation in the first option is more intuitive as "Devices" item located in the same row as other primary level navigation items. When there are no connected devices "Devices" item disappears from the menu and shows up only when device is connected.
Option 1 cons: top menu gets wider and it might be a problem on when program is minimized.

Option 2 pros: Less items in the primary level navigation bar. Back to the option 1, all those items in the menu lead to a content pages and "Devices" item looks out of this category, not a logical placement. Second option doesn't have this problem.
Option 2 cons: If user is located on the device page (see last image), those top navigation menu looks as it would relate to the connected device. For example, user might think that "Music" menu item in the top menu will show him music on the device, the same goes with other menu items.

UPDATE: I took into considerations your advises and made redesign so it looks less shuffled. Also it has better responsiveness as main navigation is located at the bottom and has more space.

Answer 1

What I'm getting right now is this way

As I see your layouts I find this little cluttered. I find the play controls are at the left and what is playing widget is kept at the right side and in between the Main Menu is sandwiched.

Right bottom of header at left side is next, previous buttons and then besides that is search input.

I find the widget arrangements is not contextual like it would be nice to keep play controls and ongoing song widget besides each other and should be visible only when any song is playing not setting it visible by default.

Similarly the next, previous buttons are not positioned contextually and it doesn't signify what is their use by being besides search input control.

I personally feel that top header can be entirely provided for primary menu and its sub menu items besides search and download button (There could be more room for other buttons like device). Accordingly Play controls and song widget could be set visible dynamically at the bottom or after header section. When a user clicks on any song this panel is set visible.

Answer 2

I'd combine both options to get a 'best of both worlds' approach.

Use option one where 'Devices' is a main menu item, but without the sub menu. Instead of 'devices', either as "John's iPhone" (option two) or an devices icon.

It tackles both cons.

• Because there is only one active item in the only main menu, there is no confusion (con from option two as you describe).
• Use an icon to reduce main menu width. (con from option one as you describe).

When your device is the active menu item, the user knows the rest is not part of the device since it is not active.

See the image below.

Answer 3

Understanding the thinking mental models can help you approach the design from a new angle: https://uxplanet.org/psychology-in-design-principles-helping-to-understand-users-10bcf122f4b0

I agree with the fact that it might look too cluttered. Overall option A is more clear because you are creating a process path by relating the highlighted word 'devices' with the action that is happening on the left - which aligns with the "Gestalt Principles": https://www.usertesting.com/blog/2016/02/24/gestalt-principles/

Visual feedback and letting users know what is happening is key for a good user experience.

On the other hand to solve the cluttered problem you could explore:

• drop-down menus for some of the options and group some of the categories
• just show a few options followed by ... (or some other indicator) that other options are available. (Maybe the user could even customize the bar and chose the main actions they want readily available among podcasts, movies, shows, etc)

Another observation on the overall design and following similarity and continuation principles - the fact that you have the music controls on one corner and the music details on the other corner can create some discrepancy or increase mental load. You can explore grouping similar or related items next to each other.

It´s just an idea, but I would suggest that you play around and consider other types of displays and menus - like the side bar - to implement elements and reduce the clutter.

I would not add an icon to a menu where al the other options are text, unless you position the icon of devices somewhere else where it stands out on its own. Still, I would not recommend using icons without any text because if can have a negative impact on the experience of non-experts or new users.

"Michael Zuschlag says that “icons contrary to intuition, do not necessarily help the user find a menu item better than a text label alone (see Wiedenbeck S 1999. The use of icons and labels in an end user application program: an empirical study of learning and retention, Behaviour & Information Technology, 18(2), p68-82). It’s not worth it.” He also discusses his views on UX Exchange." (http://uxmyths.com/post/715009009/myth-icons-enhance-usability)

---

Edited Layout suggestions:

1. 

2. 

Answer 4

You should be considering these three things when you're creating your primary navigation: parallelism, primacy, and clutter.

Parallelism - do all of the options in your primary navigation bring you to similar areas? The rest of the options bring you to content types, and device isn't a content type. This might be a reason to separate it out.

Primacy - if you do put Devices in the primary navigation, where should it go? Do you anticipate that it will be one of the most-visited, or least-visited? Remember that people will remember the first and last items of a list the best, so if quick and easy recall is important, you'll want it at the beginning or end.

Clutter - Your horizontal menu as it exists right now doesn't have a lot of spacing. What happens when your user makes their iTunes window smaller than what you're designing at currently? Does adding more items complicate the issue?

Ultimately, some quick usability research will tell you more than any semblance of best practices can. Showing people version 1 and asking them to access their iPhone options and comparing those results to the same test with version 2 can help you to pinpoint the issues that exist in either design.