0

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

Option 1 (device page):

Option 1 (device page)

Option 2:

Option 2

Option 2 (Device page):

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.

new redesign

  • Define "Better UX". We have no information about the needs of your target audience or the business goals of this redesign therefore any answers you get here will be opinion rather than evidence based. In my opinion both interfaces look incredibly cluttered and I would rethink what you need to show and what alternative ways there might be to show the information. This feels like a school/college project. If it is, then I suggest you put more energy into understanding why the original iTunes interface might have be designed the way it is - you'll get better marks and actually learn things. – Andrew Martin May 8 '17 at 15:27
  • @AndrewMartin , business goal as written in my my question is to make navigation more intuitive. I want to improve current navigation of iTunes. – Peter May 8 '17 at 18:50
  • 1
    Holy moly. You are clumping up so much together that don't really associate with one another. You're making the UI so busy for no reason. – Majo0od May 9 '17 at 15:44
  • 4
    There's no improving iTunes UI. It needs to be burnt to the ground and rebuilt from scratch. There is so much technical and UI debt with that app that it's a nightmare. Is this a school project? If so, tell your professor this isn't a UX problem. It's a product problem. – DA01 May 9 '17 at 16:06
  • 3
    @DA01 if I was the prof and you showed me a complete product rework (even a failed attempt) I'd give you extra credit and a candy bar 👏 – plainclothes May 9 '17 at 17:58
4
+50

What I'm getting right now is this way

enter image description here

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.

  • you have a point saying that playing controls and playing widget are separated so they should be together. Also I agree with you that back/forward buttons have poor signification of their use. – Peter May 8 '17 at 18:57
1

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.

enter image description here

  • I wouldn't put separate device names (like "John's iPhone"), because it's longer than "Devices" and user can connect several devices, which would massively expand menu. Also I'm not sure if it's a good UX decision to put icon in a menu where all items are words and it doesn't look attractive. – Peter May 5 '17 at 21:04
1

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. enter image description here

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. enter image description here

  2. enter image description here

  • If you are interested in more supporting evidence or research regarding the topics I mentioned let me know – UX Research May 9 '17 at 15:40
  • thanks for the links on UX Psychology topics, that is helpful. You wrote about drop-downs and methods of hiding menu items to reduce the clutter but what I'm trying to do is to show all main navigation options to improve discoverability. Also I wouldn't put main navigation in the sidebar as there is third level navigation there (as on my image #2). Having three levels of navigation in the sidebar will create even more clutter, I suppose. The navigation will become too complicated. I have just made new version of UI, I think it is less confusing. – Peter May 10 '17 at 21:28
  • Oh okay, dicoverability is a key element too I just didn´t know that you were considering it for this specific case. Taking that into consideration, I think the new approach you took is better to achieve that. I find the new design less cluttered, but the flow and grouping of elements could be improved. I would put the progress bar for the song below the song details instead of the search bar. And the subcategories for the sections music, movies, etc. below as a third line of content instead of displaying it to the right. – UX Research May 10 '17 at 22:20
  • I get that displaying navigation in two rows makes is more clear but consider scalability. This UI designed for 15" screen and those three UI blocks (navigation, play controls and song info) are already located pretty tight to each other. There will be a scalability problem on smaller screens and when user decides to minimize a window, don't you think? – Peter May 11 '17 at 7:05
  • Yes for sure I didn´t know you were considering scalability too. If you want to consider responsiveness as well (when the window is minimized), you could consider a layout where elements are moved to a third row to keep all of the elements visible. I also think it is important to consider how often certain features will be used and if it is imperative to have them available at a first level display (e.g. Itunes U, podcasts, tv shows) – UX Research May 11 '17 at 15:08
0

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.

  • 1
    I'd need to see the data Kissmetrics is referring to, but that is generally a UX myth. Those rules-of-thumb usually refer to short term memory in the context of a list being recited or memorized. Navigation is usually always present and therefore doesn't need to be retained in short term memory. – DA01 May 9 '17 at 16:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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