iTunes for macOSUsability Issues and Solutions
Presentation © 2018 carlospwk.com iTunes is a registered trademark of Apple inc.
Description• iTunes (12.7.3) for macOS is Apple’s
application for buying, downloading, playing media content and accessing i-devices
• It suffers from bloat, bugs and usability issues
• The application could be improved by applying usability guidelines
2
IssuesiTunes’ core usability issues can be found in:
• Responsive design
• Navigation
• Status messages
3
RESPONSIVE DESIGN
• If the iTunes window is reduced to minimum size, only some UI elements scale correctly and the rest are hidden from view
• The only way to see the hidden elements is to use horizontal scrolling
4
Issues
5
Full width All UI elements are visible…
RESPONSIVE DESIGN
6
Responsive …columns narrow down and song titles are truncated…
RESPONSIVE DESIGN
7
Minimum width …large part of the UI is hidden and only accessible via horizontal scrolling.
RESPONSIVE DESIGN
RESPONSIVE DESIGN
8
Solutions
Increase minimum window dimensions from 955 px to 1120 px
PROS CONS
• Easy to implement • Doesn’t require UI redesign
• Some users might have a very low resolution which would make iTunes even less usable
RESPONSIVE DESIGN
9
Solutions
Design a truly responsive UI without the need for horizontal scrolling
PROS CONS
• UI will work on almost any screen, regardless of resolution
• Expensive and lots of work • Limited benefit considering
the size of the user base with display resolutions less than 1120px
NAVIGATION
1. Inconsistency in navigation elements between similar content screens
2. Missing, inconsistent or incomplete secondary navigation (breadcrumb & scroll bars)
3. Secondary navigation enables switching between media types creates redundancy
10
Issues
1. Inconsistent navigationISSUES
• Both tabs have nearly identical navigational elements which require different interaction from the user
• Users have to memorize the difference between the two
11
12
“Radio” tab uses an awkward horizontal scrollbar…
1. INCONSISTENT NAVIGATION
13
…“Store” tab uses draggable sliders and clickable navigation buttons
1. INCONSISTENT NAVIGATION
1. Inconsistent navigationSOLUTIONS
• Unify navigation under a single style of horizontal scrolling (preferably “draggable” scrolling)
• Remove horizontal scroll bars since they are more difficult to use and don’t have a dedicated mouse scroll wheel
14
2. Secondary NavigationISSUES
• Using different styles of breadcrumbs in different locations is confusing
• The user has to scan the screen again to find the secondary navigation
15
16
The root of “Store” tab uses vertical breadcrumbs as secondary navigation…
*click*
2. SECONDARY NAVIGATION
17
…the screen for a single album view uses a horizontal breadcrumb navigation.
2. SECONDARY NAVIGATION
2. Secondary NavigationSOLUTIONS
• Use horizontal breadcrumb navigation consistently across all pages, in the same location
• Consistency makes navigation easier and helps the user to know which screen they are at
18
3. Redundant NavigationISSUES
• Using two separate menus to do the same thing increases interaction cost
• Users might think the context of the current sub-screen will translate over to the new media type (eg. Country music -> Western films)
19
20
Secondary navigation offers to change media type when clicked…
3. REDUDNANT NAVIGATION
21
…media type switch is already implemented in the Top Bar navigation element
3. REDUDNANT NAVIGATION
3. Redundant NavigationSOLUTIONS
• Remove the ability to switch media types from the vertical breadcrumb navigation
• Redundancy might seem harmless but it most of the time it strains the user’s memory, costs time and depletes attention
22
STATUS MESSAGES
1. No loading animation visible to inform the status of the system to the user
2. Tooltips are used sparingly or not at all
23
Issues
1. System StatusISSUES
• Not indicating if the system is still active and working can frustrate the user
24
25
Switching tabs shows an empty screen before content loads, without any indication of progress or activity…
1. SYSTEM STATUS
26
…adding a loading animation to the mouse cursor indicates iTunes is still active
1. SYSTEM STATUS
1. System StatusSOLUTIONS
• Adding a status “bar” or in this case, a mouse icon animation reduces uncertainty over the state of the program
27
2. TooltipsISSUES
• Icons without labels can be difficult to interpret correctly and using tooltips inconsistently doesn’t make sense
28
29
Hovering the mouse cursor over an icon does not show a tooltip in the “Albums” tab…
2. TOOLTIPS
30
…but does so in the ‘Songs’ tab
2. TOOLTIPS
2. TooltipsSOLUTIONS
• Adding tooltips to all or most labelless icons is an easy non-intrusive way to increase usability
31
Author
Carlos Kynäslahti
UX & front-end designer
• http://www.carlospwk.com
32