Dissecting the Apple Core
Rethinking the iTunes Experience
See this and more work on my portfolio website.
Something most of us can agree on is that iTunes is a mess. The software started off as a simple, single-ish purpose application to organize and listen to music. Over time, you could buy music, and eventually movies, podcasts, and more.
Ultimately, desktop iTunes’ biggest problem continues to be a confusing navigation experience that can’t handle the large bundle of features.
Analysis
This is iTunes’ current set up in terms of navigation:
Starting from the left, you have main pages such as music, movies, and podcasts. In the center, you can further customize your view below by selecting playlists or the iTunes store for that first category. On the far right, you can change view or sort the content by artist, album, genre, etc.
If you’re confused, that’s valid. What Apple is really trying to convey is this:
One snafu in this paradigm is that Apple makes it hard to go from your library to the iTunes store, and do so across multiple sections.
Here’s a visual representation of what I’m referring to:
On the one hand, it makes sense to split the store into chunks defined by your primary navigation, but on the other, to integrate store pages so decentralized within your library makes the experience too confusing.
Question: why can’t iTunes Store just be a single landing page for ALL media?
It’s hard to be nice about it, but the navigation is one big anti-pattern from my perspective. It’s confusing and inconsistent. Navigation needs to have an experience that reflects its definition: where am I now, and where can I go?
The experience ignores basic usability by changing outcomes under the user’s nose.
Proposed Solution
iTunes is and will always be an over-loaded mess until Apple decides to unbundle its features into intelligent, separate parts that are still easy to manage.
That said, I worked its current features through a few concepts of top-down navigation redesigns (literally and figuratively). As a result, playback controls moved as well.
I find the end result to be much more intuitive and Mac-friendly than the existing experience. One area I didn’t touch very much was the main content views themselves (store, my music, etc). But more on that later.
For now, some goals:
- Create a more informative and consistent nav structure.
- Divide iTunes Store logically from the rest of my library.
- Use Apple’s Human Interface Guidelines.
Some major questions I had were sadly impossible to really test, but here is two of them based on my own experiences over the years:
- How frequently do users enter the iTunes Store for only one or two types of media?
- How often do users get lost navigating between content views and primary category views (music, movies, etc)?
Wireframes & Concept
Responsiveness is another relevant issue to consider, so I targeted two break points, where a minimum width would be enforced on the far right:
Top-level navigation would collapse into a “more” category. Similarly, volume and like/queue/repeat/shuffle become bubbles when condensed far enough.
I went through a few rounds of content organization here, and even pivoted away from what I started with.
Once the direction made sense, I designed a high-res concept came together pretty fast. The content view is very similar to existing iTunes.
Although bundling is a bit of a downer, I had to rely on an overflow menu to account for extra content. I’m not sure if there’s any way around it, but I think it works for now. At full-screen, all options are visible, at least.
The user would be able to shuffle these top-level items to fit their preferences by selecting “Edit” in the context menu, much like the current app. Small up/down arrows on each row could then indicate rearrangement.
In iTunes’ current design, connected devices are lost in the clutter of the navigation, so it felt appropriate to bring that into a more prominent location beside the username.
The Old
The New
All the sorting and grid view options sit on the right of the secondary nav and rarely would need to change. Aside from the grid view buttons, the content filter dropdown can move across all primary nav screens, including the store.
Selecting the store from any primary nav item could default the Store’s secondary nav to the section you came from, in some cases. For example, if you’re in your movies library and select iTunes Store, the movies section would be your default location upon arriving:
If you’re shifting between sections of the iTunes Store, colors can change in coordination with the library sections to promote associations, further reinforcing the user’s placement in the navigation tree.
Here’s a collection to show some sample colors for fun, among a few UI organisms:
Let’s revisit our goals and see how we’re doing:
• Create a more informative and consistent nav structure.
Check.
• Divide iTunes Store logically from the rest of my library.
Check, although not perfect, it’s at least not awkward.
• Use Apple’s Human Interface Guidelines with a custom icon family.
Also check.
Speaking of the iTunes store, it actually looks pretty good as-is so not much needs to change there. I did prefer bread crumbs, though, as back buttons aren’t very informative in a store experience:
Playback Controls
You’re probably wondering where the playback bar is. Well, I moved it to the bottom to give it its own space, as well as a visual refresh to match the sub-nav bar:
All the same controls are there but with a more Spotify-esque layout.
On the Library View
One other issue related to navigation: the way iTunes changes the layout of My Music’s visual library view depending on if I’m filtering artists, albums, composers, or the like:
This is a good way to indicate I’m in a new area but entirely unnecessary within what I’m proposing (I’d argue it’s more confusing this way anyway).
As such, we can just separate concerns by making the content filter separate from the view filter.
Closing Comments
Just to reiterate, I consider iTunes’ chief issue to be navigation — both in functionality and informativeness. Apple uses persistent items in most of its apps across platforms, but this is one experience where it was simply poorly thought out from the get-go.
iTunes has many problems but it would be my hope this design could set a better stage moving forward.
I used Sketch to mockup the interface and Illustrator to make my fancy navigation and playback icons (anything in the designs that isn’t below was borrowed from the wonderful Ionicons icon font by Ben Sperry). I also used Marvel to build a simple prototype.
And of course, a link to the basic prototype.
Thanks for reading!
Please let me know what you think and if you feel this approach would be an improvement. :)
