iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for...
Transcript of iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for...
![Page 1: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/1.jpg)
iTunes for macOSUsability Issues and Solutions
Presentation © 2018 carlospwk.com iTunes is a registered trademark of Apple inc.
![Page 2: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/2.jpg)
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
![Page 3: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/3.jpg)
IssuesiTunes’ core usability issues can be found in:
• Responsive design
• Navigation
• Status messages
3
![Page 4: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/4.jpg)
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
![Page 5: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/5.jpg)
5
Full width All UI elements are visible…
RESPONSIVE DESIGN
![Page 6: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/6.jpg)
6
Responsive …columns narrow down and song titles are truncated…
RESPONSIVE DESIGN
![Page 7: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/7.jpg)
7
Minimum width …large part of the UI is hidden and only accessible via horizontal scrolling.
RESPONSIVE DESIGN
![Page 8: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/8.jpg)
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
![Page 9: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/9.jpg)
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
![Page 10: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/10.jpg)
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
![Page 11: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/11.jpg)
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
![Page 12: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/12.jpg)
12
“Radio” tab uses an awkward horizontal scrollbar…
1. INCONSISTENT NAVIGATION
![Page 13: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/13.jpg)
13
…“Store” tab uses draggable sliders and clickable navigation buttons
1. INCONSISTENT NAVIGATION
![Page 14: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/14.jpg)
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
![Page 15: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/15.jpg)
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
![Page 16: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/16.jpg)
16
The root of “Store” tab uses vertical breadcrumbs as secondary navigation…
*click*
2. SECONDARY NAVIGATION
![Page 17: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/17.jpg)
17
…the screen for a single album view uses a horizontal breadcrumb navigation.
2. SECONDARY NAVIGATION
![Page 18: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/18.jpg)
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
![Page 19: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/19.jpg)
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
![Page 20: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/20.jpg)
20
Secondary navigation offers to change media type when clicked…
3. REDUDNANT NAVIGATION
![Page 21: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/21.jpg)
21
…media type switch is already implemented in the Top Bar navigation element
3. REDUDNANT NAVIGATION
![Page 22: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/22.jpg)
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
![Page 23: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/23.jpg)
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
![Page 24: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/24.jpg)
1. System StatusISSUES
• Not indicating if the system is still active and working can frustrate the user
24
![Page 25: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/25.jpg)
25
Switching tabs shows an empty screen before content loads, without any indication of progress or activity…
1. SYSTEM STATUS
![Page 26: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/26.jpg)
26
…adding a loading animation to the mouse cursor indicates iTunes is still active
1. SYSTEM STATUS
![Page 27: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/27.jpg)
1. System StatusSOLUTIONS
• Adding a status “bar” or in this case, a mouse icon animation reduces uncertainty over the state of the program
27
![Page 28: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/28.jpg)
2. TooltipsISSUES
• Icons without labels can be difficult to interpret correctly and using tooltips inconsistently doesn’t make sense
28
![Page 29: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/29.jpg)
29
Hovering the mouse cursor over an icon does not show a tooltip in the “Albums” tab…
2. TOOLTIPS
![Page 30: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/30.jpg)
30
…but does so in the ‘Songs’ tab
2. TOOLTIPS
![Page 31: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/31.jpg)
2. TooltipsSOLUTIONS
• Adding tooltips to all or most labelless icons is an easy non-intrusive way to increase usability
31
![Page 32: iTunes for macOS€¦ · Description • iTunes (12.7.3) for macOS is Apple’s application for buying, downloading, playing media content and accessing i-devices • It suffers from](https://reader035.fdocuments.net/reader035/viewer/2022071100/5fd8feb67d27875ec679dd12/html5/thumbnails/32.jpg)
Author
Carlos Kynäslahti
UX & front-end designer
• http://www.carlospwk.com
32