Sprint UI/UX

By Jonathan Link June 10, 2016 Edition CHIC 2015-2016Discover Aimo project

During this sprint I implemented the design made by Lara Defayes, the media and interaction designer of the team. As you can see the UI design has rather well evolved.

before and after the UI/UX sprint

Before and after the UI/UX sprint

Animations

 

I added some animations to render the interface more friendly and fun at the image of Aimo. The buttons and some informations of the main menu appear in an animated way once the view is loaded.
When the app is waiting for the user to do an action related to Aimo device, the text giving the instructions is pulsing until the action is performed.

main menu

Main menu

the app is waiting for the user to push Aimo's button

The app is waiting for the user to push Aimo’s button

Form

Filling a form is often a painful task in the experience of the user. In order to attenuate this step we postponed it as much as we can in the flow of the app. Once the user fills his information, the form won’t appear again. Some animation were also added when the fields are displayed in order to surprise and encourage the user to fill it.

3

The text fields were redefined for a better integration with the look and feel of the app

Range slider

A large piece of the implementation of the UI was devoted to the making of a range slider. A range slider is a slider with two markers in order to set an interval between two values. This UI component is not part of the items offered by Apple with the development tools. Some external libraries exist but their solutions aren’t enough flexible in term of visual customisation. This is the reason why I chose to create one from scratch to better match to our visual identity.

4

A range slider has been created from scratch

 

When the marker has no more space to move on one side, only the cursor shaped as a little triangle moves along it

When the marker has no more space to move on one side, only the cursor shaped as a little triangle moves along it

The markers cannot overlap

The markers cannot overlap

One of the markers can be disabled

One of the markers can be disabled

A special care has been taken in order to keep visible the value of the marker even when the user’s finger is on it. To avoid the finger obstruction the marker is automatically shifted up in order to avoid being hidden. Because of the finger obstruction some user tends to move their finger down after having tapped an item to better see and control what is happening. If that happen, the marker drops down to its initial position on the bar.

Range sliders from some libraries.

For comparaison some range sliders from some external libraries available on github