itunes for macos€¦ · description • itunes (12.7.3) for macos is apple’s application for...

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

• carlos@carlospwk.com

• http://www.carlospwk.com

32