Interaction

Guidelines

Communicate subtly

To ensure a clear and delighting experience, the state of an interaction should be communicated subtly. Good interactive states have clear affordances but do not drastically change a components appearance.

Be consistent

Interaction states should be applied consistently throughout the interface in order to be recognisable for users. If interaction states are applied inconsistently, they can hinder the user experience.

Consider input devices

Different input devices require different interaction states. This needs to be top of mind when designing as Leviy’s interface is interacted with via touch screen, as well as keyboard, mouse and in the future maybe even voice.

Signifiers

Signifiers are visual cues that help users understand what the interface will do when they interact with it. In the Leviy interface three kinds of signifiers are used: explicit, hidden and negative:

Explicit signifiers direct users to the preferred action. An example of this could be a dialog asking if the user wants to delete X, where the button to confirm this deletion will contain the word “Delete”.

Hidden signifiers are signifiers that appear after interaction, such as a tooltip on hover.

Lastly, negative signifiers communicate to the user that a certain action can not be used, such as a disabled state of a component.

Feedback indicators

Feedback indicators communicate the progress or result of an interaction. This help users understand that the interface is working on their request or what action the user must take to complete an action where a problem appeared. Progress bars, spinners, snackbars and validation errors are used to provide the user of feedback in the Leviy interface.

Styles

Placeholder for examples of different interaction state styles

Resources

Our interaction states are based on Material Design’s guidelines. Make sure to also read States.