A recipe for happy designers, happy developers but most of all, happy users. Once upon a time (few weeks ago) I’ve been asked to work on a new product. “ I guess that my response, something like “all right”, was a bit underplayed. Start solo with UI & FE, it’s greenfield, feel free to experiment.” <a href="https://medium.com/media/8545b698990c6c0fa11af58cce86d0e8/href">https://medium.com/media/8545b698990c6c0fa11af58cce86d0e8/href</a> 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, , 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 important stuff in the remaining white space, you know, the app, the <main>, the core, the juice, the the user should be playing with. think whatever Something like the next picture here, right? I said to myself: and I’m barely prototyping! These flows are too complicated to be packed into these frozen frames, I said. I’m gonna spend ages figuring out the user flows here. Let’s change perspective. I said it out loud this time (I’ve got a bit dramatic at that point) No! Wrong! I already put myself in a cage A4/Letter Let’s go all the way holistic on this! I wanted to make something complex look very simple. I wanted to . I wanted a app and I’m not sure I’m doing the right thing here. give the user a strong feeling of control smart <a href="https://medium.com/media/74c881b01e4ec74e3fa2358cb94a5e84/href">https://medium.com/media/74c881b01e4ec74e3fa2358cb94a5e84/href</a> Procrastination to the rescue! I was obviously looking into my phone to enjoy a 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 . totally deserved yummy That and , that’s where this idea of the comes from. And lots of energy drinks.The , , sides of React, mostly, and the . React Magic Hat technique declarative functional reactive modularity 🖼 The MUV I’ve got this image of a 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, , can put together. Minimum Usable View, or the user I say <a href="https://medium.com/media/d52a9bbef75ff16a213388d74544d7e2/href">https://medium.com/media/d52a9bbef75ff16a213388d74544d7e2/href</a> Wait! actually, if they somehow complement each other. Not three, definitely not four, that would be a lot to process for my brain. Two MUVs could be better than one Two MUV (Minimum Usable Views), totally made up acronym by the way. Looks like a UI pattern but with two, ahem, MUVs. 😎 one window drill-down 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 there is not much going on inside the screen, just what you want the user to focus on. good for user’s cognitive load: Each can and should be designed in almost complete isolation, like a things get in, the data, and things get out, something like : the user expects to do on the next frame. MUV black box: declarative intentions that 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 the next 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. is a must read article.Of the 12 principles it describes, I think the one that apply the most are: The UX in Motion Manifesto Creates spatial and temporal hierarchical relationships when interacting with multiple objects. Parenting: 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. Masking: By the way why this name, the Magic Hat technique? So I can use these two emojis together 🎩✨ and well, it’s like that: It’s pretty much it. in a view the user can pick the next thing to put on screen. 🏖 The code sandbox First, a basic basic demo in React to show . the mechanics <a href="https://medium.com/media/c8d539ec9b1b32b97b8d441c034cfdfc/href">https://medium.com/media/c8d539ec9b1b32b97b8d441c034cfdfc/href</a> 🎡 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 is naturally independent so building an app like this is quite trivial, since you build each UI in isolation. The 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 MUV piping flex. I love flex. 🎩 https://albinotonnina.github.io/demo-magic-hat/ Advantages? Imagine how this could be. . You just new MUVs and add 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 the browser experience with the back and forward buttons. It actually works the same way. This path would be the list of MUVs that the user choose to open, a list ready to be persisted or tracked, also. scalable Adding a feature (one or more MUVs) would not break any layout pipe in links It’s the user that their own . create path 🛠 The React library This is something I would never dream to do without a UI framework such as React, or Vue, or the next one probably. Introducing 🎩✨ react-magic-hat Features ⚡🚀 Blazing fast. 60+ FPS hardware-accelerated CSS transforms, using the . Fluid and performant. FLIP technique 🎈Extra light, only 6.5kb and no dependencies. 🧘‍‍Flexible, stateful or stateless (you get both components) and UI-less, you do the layouting and styling. 🎛 Highly configurable, hope you like the API! Conclusion This is a technique with the purpose of reducing the in short , by limiting the amount of UI on the screen in favour of a linked list of sequential independent UIs called (Minimum Usable Views) total amount of mental effort that is required to complete a task involving processing of information, cognitive load runtime-like MUVs I don’t know how much of an app you can do using this technique, or if the previous sentence makes 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 🎩✨ If you like the idea write me a comment, tell me what you think, do the clapping thingy, if you like :) My name is Albino Tonnina, I did a million UIs. Right now I’m a developer in , London.I owe a lot to this company, I learned there that I have a lot to learn, always. Workshare You can find me on or on or you can check . Twitter GitHub my website

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Speaking of web layouts. Introducing the Magic Hat technique ✨

Too Long; Didn't Read

People Mentioned

Company Mentioned

Albino Tonnina

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Speaking of web layouts. Introducing the Magic Hat technique ✨

Too Long; Didn't Read

People Mentioned

Company Mentioned

Albino Tonnina

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES