Interaction design sync №1Will Shown 22 January 2014

Scope of this session

• Statecharts; why they rock so hard

• Interaction design for the web: ‘graceful degradation’

Statecharts

Statecharts show:

• The configuration of states

• The transitions between states

Statecharts are the best way to communicate how interactive features are supposed to work.

Every transition in a statechart shows:

• From which state the transition originates

• Which state the transition goes to

• Which events trigger the transition

Types of states, based on the W3C’s spec:

• Simple: contains nothing

• Complex: contains other states

• History: transitions to the most recent sibling state inside a complex state

Types of transitions:

• State-to-state: the most common type

• Initial: points to the ‘default’ state inside a complex state

Some examples of statecharts

Simple microwave

unplugplug in

onidle

cook

startstop

initial

off

Draggable element

idle

touchrelease

touchdown

dragging touchmove

Prime prototype

animating menuopen

menuclosed

hist

prefsopen

prefs closed

openprefs

openprefs

closeprefs

finishopening

finishclosing

closemenu

openmenu

navigate

initial

Let’s make one together.

Things we might not have discussed:

• Parallel states: complex states where all the children occur simultaneously (good for independent features that behave differently in different global states).

• Execution: things can happen on entry into a state, on exit from a state, or during a transition; if execution is relevant, document it as part of the statechart.

Interaction design for the web

Not all interactive designs will work for every user agent.

As with responsive design, build your interactions up from the web’s native interactive elements.

Keep that plan in your back pocket for when the devs need it.

The web’s native interactive elements:

• radio buttons

• checkboxes

• dropdown menus

• input fields

→

→

Thanks!