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.
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.
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
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.
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.
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.
Looks like a one window drill-down 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
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, 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
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 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.
🎡 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/
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 🎩✨
Features
⚡🚀 Blazing fast. 60+ FPS hardware-accelerated CSS transforms, using the FLIP technique. 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, 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 or on GitHub or you can check my website.