Exploring new ways
of interaction.

Hey! Welcome to a journey exploring user interfaces and motion design.

This post will be all about my experimentation with Spotify and how I came up with some new cool (but useful) stuff for the mobile app… So, let’s get started!

Mood-board and first Ideas.

Let’s begin with some ideas and visual references of what I’ve found interesting out there.

    1. In UI, the sense of space is clearer when the transitions between pages are fluid and easy-to-follow with the eyes, simply because we never lose track of where we are.
    2. Also in virtual spaces, interacting and playing with dimensional elements make us feel them as if they were real. New technologies such as the 3D touch (or Force Touch) are interesting to convey all these sensations. For instance, Instagram uses this technique in one of their menus (see dimensional reference below).
    3. As designers, we all know that less is more, so our task is to simplify the interface by removing all unnecessaries elements. The good news is that we are in a virtual scenario, so we can play with gestures and other established actions (such as swipe, drag, hold, press…).

Credits: 3d Swipe and flip for detail by Minh Pham, Shazam, Instagram, Apple, Google.

Research. Principles and goals.

3D touch tech.
You may know already what is 3D Touch or Force Touch, but just in case, here is a quick excerpt from Wikipedia: “Force Touch is a technology developed by Apple Inc. that enables trackpads and touchscreens to distinguish between various levels of force being applied to their surfaces. It uses pressure sensors to add another method of input to Apple’s devices.”

Peek and Pop example by Maciej Dyjak

One of the most intrensting things about this is that we can set subtle vibrations when using 3D touch, in order to convey real sensations to the user.

About spatial interfaces.
This is one of the most important I learned recently. Creating logical virtual spaces is decisive to guide and offer visual maps to users. It enhances the navigation experience and is determinating to the user when he is making decisions. If you want to read more about this, I recommend this link.

Hierarchy.
How are elements related to each other? Are they at the same level of importance (siblings)? Or are they dependents one to the other (parent-child)? All of this is relevant for our structure and also for our space system that we will think of as designers.

Parent-Child transition by Goolgle Material

 

Motion.
How cool is using motion design for anything, you can achieve real engaging apps by making beautiful animations, but again, our task is designed with intelligence, So, get it simple. Here are some few tips:

  • Use animation and motion effects judiciously, don’t require animations unless they’re vital to your app’s purpose.
  • Strive for realism and credibility.
  • Use consistent animation.
  • Make animations optional.

And some principles and techniques to include:

  • Motion has to be informative, focus and expressive.
  • Bear in mind principles like expectation, continuity, narrative, and relationship.
  • Apply a correct choreography in your transitions.

Now that we have collected all this ideas we can go ahead to my favourite part, creating. So let’s turn off the lights…

Design

Spotify problems and goals.

Spotify has a big problem, and that is, the huge music content that is available for us: Artists, songs, albums, podcasts, playlists… 

The endpoint has to be a brand-new interface that enhances the user experience, considering all the principles and ideas that I’ve been taken during the initial research.

UI sistem design

Horizontal navigation: A simpler way of going back and forth between the main sections. It will help the user to get a fluid navigation and control of the app.
Consistent use of attributes: Use of attributes such as text weight and sizing will create continuity and a logical narrative.
Rounded style: Suggestions and hints the user with which the element is likely to interact.
A full-interactive mini player that will allow us to have (in a finger shot) the most common actions when listening to music.
3D touch in action:. Cards that are susceptible to interact with by pressing them. The idea of Peek and Pop in order to offer users quick actions.
Generating depth: This will tell the user where he is in a visual way. Allowing also going back and forth quickly between pages.

Navigation

Aimed for a fluid way of navigating, the movement within the app will be based on horizontal and vertical swipe gestures, this way users will perform a smooth and seamless navigation experience. The hierarchy will be visually explicit through new UI hints based on a new layering concept.

Principles and Techniques applied:

  • Horizontal navigation: between siblings pages.Horizontal swiping gestures
  • 3D ‘layering’ navigation: Parent-child transitions. Vertical swiping gestures.

Playlists preview

One of the most recurrent features to help user experience is Peek and Poop, whether it be made by 3D touch or long tap events. This allows the user access to useful actions and make quick decisions. In Spotify, we are missing that feature which probably would make life easier since we have tons of playlists from which to choose. The navigation-flow it’s easy: Long-press on the playlist you’d like to preview, and the content of this playlist will pop up for you.

The Mini Player

After rethinking the UI, I feel that I have more freedom to engage with interactions and gestures. So why we don’t redesign also the Spotify player… Currently, this player is a full-width layer that takes in a large part of the screen from the bottom. Reducing the viewport area.

This player doesn’t fit in our new concept, so our purpose is creating a better user experience with the help of an expressive interface.

If we go back to the ’00s, we probably were using mp3’s or iPod’s to listen to music… remember this? When we could control all our music with just one finger. Next song on the right, Volume up and down by circular scrolling… multiple options but just one control pad (there weren’t touchable screens). So, let’s make a wink to the 00’s!

These will be our main gestures:

  • Tap: Pause or play
  • Swipe up: Song info and quick options suggested (like or sharing)
  • Double swipe-up/ Long swipe-up: Go to the song
  • 3D touch: Seek forward
  • Swipe L/R: Prev/Next Song.
  • Long press: Like song.

*Optional suggestions. Showld we allow the user to be able to personalize their own gestures actions?

Final Design