Display + Interaction

There is an everlasting need of design to simplify the user interface.

At the same time, there is a reciprocal expectancy of the end-user to interact with the user interface, without the need to think about the way it works. Swipe gestures were introduced with touch based devices, enabling the user to directly interact with the device and therefore excluding the additional devices such as mouse from the interaction equation.

In the following case, the element that is used to display the content is in the same time being used as an interaction element. Defining the element in such way enables us mapping of interaction into a meaningful user action, minimising the UI elements on the screen and keeping the display element in user’s focus. In this particular case, direction and swipe amount is translated into contextualised user action.

Here is a walkthrough over the components displayed in the image above:

Main Component
- holds the method that propagates actions based on matrix props received from the Swipe Component 
- ie. if matrix props from Swipe Component has a vertical direction and a negative delta, it will trigger an appropriate action to dedicated Display Component

Swipe Component
- holds previous and current swipe state in order to calculate delta and direction
- on swipe event it creates the matrix props in the realtime manner, based on user's interaction
- on swipeEnd event it emits the final matrix props to the Main Component
- component emits props when the user's interaction has ended
- interaction effects can be additionally fine tuned over config thresholds

Display Components
- receives props from the Main Component to trigger a component method and manipulate the component's content

While thinking about the different use cases for applying the approach above, see it’s application on www.borisvidosevic.com/composition.

Thanks for reading!