large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="http://ift.tt/2oXrSXG">medium bookmark / Raindrop.io</a> |  </p>
<div>
<div>
<div>
<div>
<div>
<div><img src="http://ift.tt/2oXtNLY" alt="1*3i0h1Q4uWfx1fA08GaPOCw.gif"></div>
</div>
<p>As a UX designer, you have three fundamental disadvantages when it comes to analyzing motion for usability.</p>
<ol>
<li><strong>Static</strong> — you’ve trained your brain over years to see design as something that doesn’t move. In this article, I’m going to help you train your brain to see design as it happens <em>in time</em>.</li>
<li><strong>Timing</strong> — really good motion based interactions happen quickly. They are designed to be perfectly seamless. It’s hard to spot the five simultaneously acting <a href="http://ift.tt/2oiC7I6">UX in Motion Principles</a> that are at play in half a second.</li>
<li><strong>Vocabulary</strong> — you lack the fundamental vocabulary which lets you understand what you’re seeing. You can overcome problem one and two, but unless you have the vocabulary, you’re totally out of luck.</li>
</ol>
<div></div>
<p>Fortunately for you, I carved out 3 months of my life and produced the lumbering Creating Usability with Motion: The UX in Motion Manifesto which racked up nearly 120,000 views in the first 4 weeks of its release.</p>
<p>In this article, we’re going to fit a few more of the pieces together. But first a brief digression.</p>
<p>I find humans to be somewhat disconcerting animals. I enjoy watching unscripted street fights on YouTube to support my confirmation bias. After several years of this, I started noticing things happening that tend to make a huge difference in a street fight. Opportunities for de-escalation being one. Watching your six (or your back), being another. Size and skill not always dictating outcome. Luck making a big difference (how scary is that?). Things like that.</p>
<p>Over time I developed an eye for split second events on video. Will this help me in a real street fight? Probably not even a little. It does help me analyze the hell out of rapidly moving UI, though. Plus, I’ve been analyzing motion in user experiences for the better part of 15 years.</p>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<p>Let’s analyze this tasty little nugget put together by <a href="http://ift.tt/1SuESQt">Mr. Charles Patterson</a>.</p>
<div>
<div><img src="http://ift.tt/2atALVk" alt="1*HTwAAZufpECUGrpxo5yejA.gif"></div>
</div>
<p>Credit: <a href="http://ift.tt/1SuESQt">Charles Patterson</a> for <a href="http://ift.tt/1qK7Bj4">InVision</a></p>
<p>In the remainder of this article, I will call your attention to five ways that usability is being created by motion, through the use of the following UX in Motion Principles: Parallax, Masking, Offset &amp; Delay, Overlay, and Easing.</p>
<p>There are arguably more principles at play, but for now, we’re going to focus on these five.</p>
<p>In some ways, analyzing motion for usability involves a lot of squinting and <em>not </em>looking. The reason is that the human eye is completely hijacked by all sorts of things. Color, faces, shapes, contrast, bare skin, and yes, motion. In order to ‘read motion’ properly, you need to start training your eye not to distract your brain (I’m being poetic— your eye is merely a sensing organ, it doesn’t do any ‘thinking’). It usually takes about 10 cycles through a looping animation, but eventually you can get the hang of it.</p>
<p>I think of this process as cultivating ‘design blindness.’ It’s kind of like ‘<a href="http://ift.tt/1vLPcEn">nose-blindness</a>,’ which if you don’t know what that is, you should click the link. It’ll probably explain a lot for you. In this case ‘design blindness’ is a good thing, because it allows you to see everything <em>except</em> the design, leaving the motion remaining.</p>
<p>With ‘design blindness,’ because you’re feeding your eyes and brain the same environmental stimulation, eventually your brain gets quiet and you’ll stop getting hijacked by the things you don’t want to focus on, like the visual design itself.</p>
<p>Now you can start to sensitize yourself to the motion. Forget all the elements, colors, fonts, faces, shapes, etc. Only allow your mind to be stimulated by the motion itself (you’re getting sleepy, you feel yourself wanting to register for my workshop).</p>
<p>Now you can begin to feel what the motion does to your mind.</p>
<p>Full disclaimer, this can take some time. I have about a 15 year head start on you, plus I practice imagining motion based user experiences in my mind, looping the motion hundreds of times, because I am just that insane.</p>
<p>With my firm yet gentle hand, dear reader, you should be able to pick this up far quicker than I did.</p>
<p>Your job now is to get your consciousness out of the way and let this little puppy just talk to you. Sometimes even I get stuck and can’t quite ‘hear’ what the reference is telling me. Kateryna, will see me walking somnambulistically around the house muttering, “talk to me,” over and over to nobody in particular, which is actually pretty creepy. She says she’s used to it, but I’m not convinced.</p>
<p>To give you a different way of thinging about this (as if this article wasn’t weird enough), I tend to think of the usability created by motion as if it were music. This means like with any piece of music, you can be immersed in the entire landscape of sound, or you can step back and listen to the individual instruments, melodies and rhythms working together.</p>
<p>This can be like that.</p>
<p>The second disadvantage (timing) is fairly easy to overcome. Because the motion occurs in under a second, I find it useful sometimes (though not always) to slow it down. I simply save the gif to my desktop, load it into something like After Effects or Quicktime, and go thorough it frame by frame. This can have the dual effect of seeing what’s going on, and regaining some of your sanity.</p>
<p>The third disadvantage (vocabulary), <a href="http://ift.tt/2oiC7I6">I already solved for you in this article</a>, and now I’ll make it even easier. We’re going to separate out five of the UX in Motion Principles in this reference, so you can see them as individual instruments in a motion landscape.</p>
<p>Wiser people than myself consider this the ‘forest/trees’ technique: zoom in to the tree, then zoom out to the forest. Keep doing this until you’re nauseous or until you regain your self respect and quit your design career for a life of environmental activism.</p>
<div>
<div><img src="http://ift.tt/2oXFeDv" alt="1*Jqj9GHunX4HXnIL17EAGsQ.gif"></div>
</div>
<p>One of the first ways I notice usability being created through motion is the parallax inside the cards. The Parallax principle has the effect of cognitively ‘pushing back’ selected elements while cognitively ‘pulling forward’ other selected elements. The use of Parallax is extremely effective in this example in defining temporal hierarchy.</p>
</div>
<div>
<div>
<div><img src="http://ift.tt/2oaOdE2" alt="1*gojtKOh9Ii2E5jAUyOTkPg.jpeg"></div>
</div>
</div>
<div>
<div>
<div><img src="http://ift.tt/2oXCfdZ" alt="1*iUX158USL4_-apT5MBigqw.gif"></div>
</div>
<p>The second way the motion creates usability is through the Masking principle. Masking creates <em>object continuity</em> meaning that the utility of the object continuously flows from one state to the next, creating a simple, clean narrative. In this example, the card background seamlessly transforms into the header image.</p>
<div>
<div><img src="http://ift.tt/2oaVfbR" alt="1*2uAyJ9ORN6dYk_Y3ZuM19g.gif"></div>
</div>
<p>The third way I notice motion creating usability is through the UX in Motion principles of Offset &amp; Delay, and Overlay. As I’ve mentioned previously, the opportunities to support usability can often overlap and be used simultaneously and synergistically. This is such a case. The utility of Offset &amp; Delay is to define object relationship <em>in time. </em>The ‘building on’ approach tells our mind that the new objects are separate, reinforcing the visual. The use of Overlay gives the user a sense of spatial relationship within the scene, and an ‘ordering’ in the paradox of visual flatland.</p>
<div>
<div><img src="http://ift.tt/2oXuqoE" alt="1*nTDhY7FeW2LKhY9vdZIWSg.gif"></div>
</div>
<p>The fourth (or is it the fifth?) way I notice motion creating usability is through the fulfillment of expectation. Using easing, the objects transition in a more or less seamless way. Notice the ‘ease in’ and how it has the subtle effect of ‘slowing’ down the interaction. One must always be careful on the use of ease-ins. Easing should always feel clean, crisp, and snappy. A good rule of thumb is ‘fast but not too fast.’ If after watching the interaction a thousand times, it starts to feel a hair slow, I’d shave off the extra time.</p>
<p>If you made it this far, congratulations! I’ll be checking the comments here, so feel free to post questions and examples. Go forth and practice!</p>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<p>As a quick plug, if you want me to speak at your conference or lead an onsite workshop for your team on the exciting topic of motion and usability, go <a href="http://ift.tt/2otw5BW">here</a>. If you want to attend a class in your city go <a href="http://ift.tt/2om5j0Y">here</a>. Finally, if you want me to consult on your project, you can go <a href="http://ift.tt/2otewSl">here</a>. To get articles on ‘usability and motion’ sent directly to your inbox, click below.</p>
<div></div>
</div>
</div>
</div>
</div>
<div><a href="http://ift.tt/2oXrSXG">http://ift.tt/2oXrSXG</a></div>


How to analyze usability from motion – UX in Motion – Medium

How to analyze usability from motion – UX in Motion – Medium

Top Stories