Began: Nov 24, 2021 | Status: Early Research
Content Disconnected UI
Are there benefits to separating UI from content?
Will animating UI elements help guide the user or distract the user?
Should UI ever move unprovoked or should it only be moved as direct feedback to a user's action?
Hypothesis
By separating content from UI we will be able to create more dynamic experiences which can adapt to and guide the user based on their actions.
Potential Use Cases
Dynamic elements can serve as guides showing the user how to do something or directing their attention to what the result of their action is. Over time the guides can be disabled and the user will be left with a minimal, clutter-free UI.
Creating UIs with no visible buttons.
Allowing other users in collaborative tools to direct the user's attention to a specific part of the UI.
Implementation
I created a handful of Svelte components which I will be using to explore the possibilities of this design pattern. This animation is not intended to pitch any kind of use case. It is purely a technical demonstration.
Mollit nulla et pariatur proident nostrud dolore nostrud. Sint exercitation dolore ut magna. Qui ad do dolor dolore non laboris. Fugiat nisi aliqua esse mollit ut ipsum irure. Reprehenderit incididunt est amet velit sunt commodo minim do qui mollit. Aliqua laboris dolore est cillum eiusmod voluptate cupidatat eiusmod do voluptate duis velit magna. Ad duis amet magna nulla velit. Nostrud amet sit cupidatat eiusmod do commodo nulla non non esse cupidatat consequat mollit. Sunt enim et exercitation cillum.
There are 3 components in my implementation
Dynamic
used for defining a context which scopes IDs and state within itself
DynamicElement
used for defining an element that can be moved and animated
DynamicTarget
used for defining a place a DynamicElement can move to
↑ click
<Dynamic let:set>
<DynamicElement id="main" initial="1">
<div style="text-align: center;">
<br />
↑ click
</div>
</DynamicElement>
<span style="position: relative">
<DynamicTarget id="1">
<button on:click={() => set('main', '2')}> dynamic target 1 </button>
</DynamicTarget>
|
<DynamicTarget id="2">
<button on:click={() => set('main', '1')}> dynamic target 2 </button>
</DynamicTarget>
</span>
</Dynamic>