<p>Published on <a href="https://blog.prototypr.io/good-ui-bad-ux-and-the-problem-with-spotifys-android-app-165a413b9093?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Lumiq Creative <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*5Ia5gnby24QfervgnilXEA.png"></p>
<p>I’ve been a Spotify user ever since I started listening to music regularly and it’s safe to say I do enjoy its free Android client. Nothing is perfect, however, so it was only a matter of time for me to start noticing flaws in Spotify’s considerably original UI/UX flow. Yes, the issues I am going to mention in this article aren’t such that the average user will notice and consciously be aware of. However, UX is all about the subliminal perception of interfaces and the manner in which the brain makes sense of what it sees. Thus, even if the points mentioned in this story aren’t ones everyone can relate to, they continue to be relevant from a technical standpoint. Good UI coupled with bad UX is a problem surprisingly many products face, and Spotify is a principal example of how weighty both these aspects of interaction design are, as well as how overlooking either one of them can negatively impact the users’ experience with an app.</p>
<h3>Movement and Animations</h3>
<p>It’s probably no surprise that poorly executed animations made their way to the list. Movement is one of the hardest things for designers to communicate in their concepts, and static mockups make this practically impossible, leaving such a crucial aspect of interaction design in the hands of front-end developers.</p>
<p>The elephant in the room is the transition between the main activity of the app and the player page. As soon as a song is played, a grey bar is displayed at the bottom of the screen, presenting the song title and album it belongs to, sandwiched by a play/pause button and an upward-facing arrow. Tapping this arrow opens the player page, which allows for track skipping, modifying the queue, and more. The transition between the two views is executed using the default system animation, which, while seldom suitable, completely doesn’t fit this specific interaction. Instead of the minimised player controls sliding upwards, transforming into their expanded iteration, the user is presented with a clunky animation which doesn’t put across any kind of relation between these two complementary views. While the stock Android transition is still tolerable in this case, the custom ones from many proprietary Android skins aren’t. In the first case, the transition is a simple crossfade, but on many skins, including Xiaomi’s MIUI, the player page ends up sliding in from the right side of the screen, while the indicator suggests the player page will enter from the bottom. Yes, technically, no critisizm should be directed towards an app if it isn’t being run on purely stock Android, which it is developed to run best on. However, considering how small of a percentage stock Android users make for in the smartphone community, not optimising an app for proprietary iterations of the OS isn’t especially welcome.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/253/1*i1gGqeVR6TTNrPq7SFd8xw.gif"><img alt="" src="https://cdn-images-1.medium.com/max/253/1*VCcl-3-upKGnZiaxqe8PbA.gif">Tab transition, home to player page transition</p>
<p>Another example of poorly executed animations is the transition that occurs while switching between home screen tabs using the bottom navigation bar. The usage of a cross-fade for the content area is perfectly suitable, but the same crossfade being used for elements common for all tabs is not. This issue applies to the grey background behind the app header which flashes each time a tab is launched. To make things worse, when the background is actually supposed to leave the screen, it frequently does so too late, remaining visible for a split second, even though all other content has already been replaced.</p>
<p>The transition between the player page and the playing queue, unfortunately, isn’t any better. Once again, it makes use of the default system transition, despite that solution being suitable only for a very narrow range of animations. Many common elements between the two screens are duplicated, and even the header, which is replaced by an almost identical one, is animated in a completely unsuitable manner. The same goes for the music controls, which almost identical in both views, yet aren’t animated fitly.</p>
<h3>Intuitiveness of Interaction</h3>
<p>Related to animations and transitions is the intuitiveness of interaction, the way the app reacts (or doesn’t react) to inputs from the user. Returning to the topic of the queue page, this view is launched by pressing a button at the top right corner of the player page. The header of this page has two buttons: one for returning to the player controls, the other for completely collapsing the track options and returning to the home page. I myself find this very confusing; I’d expect a downward facing arrow to close the topmost dialog, not return to the lowest one, especially if the said dialog entered the screen from the bottom (which, once again, is not always the case). The same issue applies to pressing the back button in the system navigation bar. Moreover, if the arrow button is pressed and the user gets transferred to the home screen of the app, opening the player controls shows the queue page once again, as if these two views were linked to each other. This solution would only be acceptable if the transition between the two linked pages were not one that suggests they are completely different screens.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Za_eXgZne991lRAa9Rfwvw.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*GGFeKSKYz7RG6LetfHkh5Q.png">Player page, song queue</p>
<p>Yet another substantially unintuitive interaction pattern in the app is located within the slide-up options menu that is triggered by tapping the three dots icon. Despite this view sliding up from the bottom and having a half-transparent background at the top, it is impossible to collapse the menu by swiping downwards. Only by pressing the system back button or tapping the greyed out area is it possible to return to the previous page.</p>
<h3>Layout and Navigation</h3>
<p>While generally well thought out, the layout of the Spotify app does, in places, leave a lot to be desired. Apart from small issues, like many important functions being placed at the very top of the screen, making the buttons hard to reach, there is one big, quite noticeable problem.</p>
<p>Instead of a search bar being placed at the top of the home page of the app, there is a separate tab dedicated just for this one function. This would be acceptable if the separate page had any kind benefit, but it doesn’t. The view only displays a search bar and recent searches; something that could have easily been fit inside an expanding component at the top of the main page of the app. To make things worse, the search bar is not even ready for text input upon the tab being opened. It takes yet another tap to begin typing.</p>
<h3>Inconsistencies</h3>
<p>There are many inconsistent design choices in Spotify’s app. For instance, the grey toolbar at the top of the home page is in no way separated from the status bar area, while this is the case in almost all other tabs of the app, where there is a darker background above the toolbar.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*tKYDXjA96BaJbU-iGT2LWg.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*uTfBe8nLY9OEX6icJa3dtQ.png">Comparison of status bar backgrounds</p>
<p>The green action button that many views have in common is frequently integrated differently into various parts of the interface. Sometimes, it is placed within a dark background beneath the toolbar. In other cases, its upper part overlaps the toolbar, while the bottom one is overlayed over the content. Even the player page varies between different playlists, with the cover art of songs sometimes being displayed as a raised square, and in other cases being used as a background for the entire UI. There are also other minor discrepancies between these two iterations of the music controls, including different typography and colours. I’ve also seen cases of the playlist page itself being slightly modified.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*H5784rlNvBl0QRq19vbWpA.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*hegJ6ZkVKwAM8nyShvNYAQ.png">Comparison of action button integration</p>
<p>The glyph icons that the Spotify app uses are also frequently inconsistent. While the navigation bar icons are in bold, modern style, the icons in the Genres &amp; Moods section of the Browse page are detailed, and in some cases almost skeuomorphic.</p>
<p>Rare as they are, popup screens in the app don’t match the rest of the UI either, with their large text and white backgrounds. While this may be the reminiscence of an older version of the player client, it is nonetheless unsuitable.</p>
<p>Finally, rounded screen corners are present in the player page of the app, yet this solution didn’t make its way to any other part of the client.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*mmdH-xZ_gHfhtJHktk8ZaQ.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*A3MZZ4KFWv4IgPHi235NVA.png">White popup dialog, inconsistent iconography</p>
<h3>That’s it</h3>
<p>So there you have it, everything that’s wrong with the Spotify app’s UI. None of these issues are extremely significant, but it goes without saying that eliminating them would result in the client having a more polished look and better user experience. I’d love to know what your thoughts on this topic are, so feel free to drop a comment down below. Thanks for reading!</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=165a413b9093" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/good-ui-bad-ux-and-the-problem-with-spotifys-android-app-165a413b9093">Good UI, Bad UX, and the Problem With Spotify’s Android App</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Good UI, Bad UX, and the Problem With Spotify’s Android App

Top Stories