Speaking of web layouts. Introducing the Magic Hat technique 🎩✨
Tags: webdev, javascript, react, showdev
Published: 2018-03-26 14:23:04

---
title: Speaking of web layouts. Introducing the Magic Hat technique 🎩✨
published: true
description: A recipe for happy designers, happy developers but most of all, happy users. Actually just a UI technique.
tags: webdev, javascript, react, showdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/cfthsff6tl89ik7x0o6k.jpg
---

Can you think of one of the apps you're working on and imagine the following technique applied to parts of it? Then, would you use it?
**The reading should take around 5 minutes.** 
Thanks, Albino.

[[Original post on medium.com](https://medium.com/@albinotonnina/magic-hat-technique-408a3fa590bb)]

Once upon a time (few weeks ago) I’ve been asked to work on a new product. *“Start solo withUI & FE, it’s greenfield, feel free to experiment.”*
I guess that my response, something like “all right”, was a bit underplayed.

<img src="https://thepracticaldev.s3.amazonaws.com/i/twasn9517wnjxltc71a8.gif" width="100%"/>


Sadly, a couple of long long weeks later I didn’t have a clue about how to build an interface for this application.

I said ok, *think*, we’re gonna need a header, we’re gonna need a footer and we’re gonna need a sidebar, that’s all I know. We will then start making pages and we will put the importantstuff in the remaining white space, you know, the app, the <main>, the core, the juice, the *whatever* the user should be playing with.

Something like the next picture here, right?

![This is my canonical idea of a web app](https://cdn-images-1.medium.com/max/5760/1*6DpJPOVyaAkfDsFPhAZdig.png)*This is my canonical idea of a web app*

I said to myself: **No! Wrong! I already put myself in a cage** and I’m barely prototyping! These flows are too complicated to be packed into these *A4/Letter* frozen frames, I said. I’m gonna spend ages figuring out the user flows here. Let’s change perspective. **Let’s go all the way holistic on this!** I said it out loud this time (I’ve got a bit dramatic at that point)

I wanted to make something complex look very simple. I wanted to **give the user a strong feeling of control**. I wanted a *smart* app and I’m not sure I’m doing the right thing here.

<img src="https://thepracticaldev.s3.amazonaws.com/i/3okj7pt8dy1hlj6rtzkc.gif" width="100%" />

## Procrastination to the rescue!

I was obviously looking into my phone to enjoy a **totally deserved** break after these intense brainstorming sessions between me and myself.
You know it, mobile UIs look so clear compared to the ones I build for web apps. The UX there is just right, the cognitive load is low, the motions are just **yummy**.

That and **React**, that’s where this idea of the **Magic Hat technique** comes from. And lots of energy drinks.
The **declarative**, **functional**, **reactive** sides of React, mostly, and the **modularity**.

## 🖼 The MUV

I’ve got this image of a **Minimum Usable View**, a piece of UI that would do just one thing, in isolation, almost pure, like we do in code. Something the user could center with, concentrate on, work with. Something like React components! Smart bricks in a bucket that do one thing that you, *or the user I say*, can put together.

<img src="https://thepracticaldev.s3.amazonaws.com/i/hxm286hyi5fcsg8330bg.gif" width="100%" />
> # Wait!

**Two MUVs could be better than one** actually, if they somehow complement each other. Not three, definitely not four, that would be a lot to process for my brain.

![Two MUV (Minimum Usable Views), totally made up acronym by the way.](https://thepracticaldev.s3.amazonaws.com/i/f82r2edhgugrmpso2rzk.gif)*Two MUV (Minimum Usable Views), totally made up acronym by the way.*

Looks like a [one window drill-down](http://designinginterfaces.com/patterns/one-window-drilldown/) UI pattern but with two, ahem, MUVs. 😎
> When everything’s on one screen or window, the options at each stage are clear, and the user knows they don’t need to focus their attention anywhere else.
[Pattron](http://www.pattron.net/Pattern.aspx?Id=81)

Quite **good for user’s cognitive load:** there is not much going on inside the screen, justwhat you want the user to focus on.

Each **MUV** can and should be designed in almost complete isolation, like a **black box**: things get in, the data, and things get out, something like *declarative intentions*: the user expects to do *that* on the next frame.

Yes, because, like a [Singly Linked list](https://github.com/albinotonnina/javascript-data-structures-and-algorithms/tree/master/src/dataStructures/SinglyLinkedList), **each MUV sets what goes next**.
> A Singly Linked List is a linear collection of data elements, called nodes pointing to thenext node by means of pointer. It is a data structure consisting of a group of nodes which together represent a sequence. Under the simplest form, each node is composed of data and a reference (in other words, a link) to the next node in the sequence.
[Wikipedia](https://en.wikipedia.org/wiki/Linked_list#Singly_linked_list)



<img src="https://thepracticaldev.s3.amazonaws.com/i/p099s2te6tbombw8auzi.gif" />

> # The thing is that at any given point the screen is showing you only two related pieces of UI.

The right view is something the user wanted to happen in the left view, *which is the right view of a previous left view, which is the right view of a previous left v…*
*[…]
[…]
..ich is the right view of the first view.*

## The motions

Naturally, a technique like this really depends on motion.
[The UX in Motion Manifesto](https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc) is a must read article.
Of the 12 principles it describes, I think the one that apply the most are:

3) **Parenting**: Creates spatial and temporal hierarchical relationships when interacting with multiple objects.

6) **Masking**: Creates continuity in an interface object or object group when utility is determined by which part of the object or group is revealed or concealed.

## By the way why this name, the Magic Hat technique?

So I can use these two emojis together 🎩✨ and well, it’s like that: **in a view the user canpick the next thing to put on screen.** It’s pretty much it.

## 🏖 The code sandbox

First, a basic basic demo in React to show *the mechanics*.

[![Edit React Magic Hat example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/r4v7onrpop)

## 🎡 The actual demo

The following one is a little app I put together. I hope it gives you the idea.
From a technical point of view each **MUV** is naturally independent so building an app likethis is quite trivial, since you build each UI in isolation. The *piping* in the UI is done by the implementation of this technique (I did one in React)
The views get the space they want by the way and they can be styled anyway you like. I like to have mine *flex. I love flex. And React Portal.*
> # 🎩 [https://albinotonnina.github.io/demo-magic-hat/](https://albinotonnina.github.io/demo-magic-hat/)

## Advantages?

Imagine **how scalable this could be.** Adding a feature (one or more MUVs) would not break any layout. You just *pipe in* new MUVs and add *links* so to open them from any other MUV.

For the user this should be kinda natural if you think about it. It’s not different from thebrowser experience with the back and forward buttons. It actually works the same way. **It’s the user that *create* his own *path*.**
This path would be the list of MUVs that the user choose to open, a list ready to be persisted or tracked, also.

## 🛠 The React library

This is something I would never dream to do without a UI framework such as React, or Vue, orthe next one probably.
> # Introducing [react-magic-hat](https://github.com/albinotonnina/react-magic-hat) 🎩✨

### Features

⚡🚀 Blazing fast. 60+ FPS hardware-accelerated CSS transforms, using the [FLIP technique](https://aerotwist.com/blog/flip-your-animations/#the-general-approach). Fluid and performant.

🎈Extra light, only 6.5kb and no dependencies.

🧘‍‍Flexible, stateful or stateless (you get both components) and UI-less, you do the layoutingand styling.

🎛 Highly configurable, hope you like the API!

## Conclusion

This is a technique with the purpose of reducing the *the total amount of mental effort thatis required to complete a task involving processing of information,* in short **cognitive load**, by limiting the amount of UI on the screen in favour of a *runtime-like* linked list ofsequential independent UIs called **MUVs** (Minimum Usable Views)

I don’t know how much of an app you can do using this technique, or if the previous sentencemakes any sense to you, but so far I’ve been satisfied every time I did experiments with it.

We sure should never stop experimenting and pulling things out of out magic geeky hats 🎩✨

My name is Albino Tonnina, I’m a developer in [Workshare](http://www.workshare.com), London.
I owe a lot to this company, I learned there that I have a lot to learn, always.

You can find me on [Twitter](https://twitter.com/albinotonnina) or on [GitHub](http://github.com/albinotonnina/) or you can check [my website](http://www.albinotonnina.com).