We want to hear from you! Edit entries by logging in (top right) or create your own!


Revision for “Motion” created on April 20, 2015 @ 21:39:16

Motion is any movement or change in position or time (wikipedia) <ul> <li>The <a href="http://www.google.com/design/" target="_blank">Google Material design style</a> has a whole section dedicated to <a href="http://www.google.com/design/spec/animation/meaningful-transitions.html#" target="_blank">motion in digital interaction design</a>. [caption id="attachment_668" align="alignnone" width="300"]<a href="http://ixtranslation.com/wp-content/uploads/2015/04/Screen-Shot-2015-04-20-at-8.27.43-PM.png"><img class="size-medium wp-image-668" src="http://ixtranslation.com/wp-content/uploads/2015/04/Screen-Shot-2015-04-20-at-8.27.43-PM-300x107.png" alt="Google Material Design Style motion guidelines" width="300" height="107" /></a> Google Material Design Style motion guidelines[/caption]</li> </ul> <ul> <li>Motion is essential in animation in order to make characters objects seem alive: <a href="https://www.youtube.com/watch?v=IJNR2EpS0jw" target="_blank">Dumb Ways To Die (animated short)</a></li> </ul> <h5>Analysis</h5> <strong>Informational</strong> Motion is naturally highly informative, if used with thought &amp; intent. Very few successful motions exists on their own. This element is used to connect sequence through structure; highlight elements and dim others through zooms; relay a mood or feeling through embodiment. It is a design element that is 4D in that it uses time as a variable. <strong>Orientational</strong> Motion can be invariably used for many, if not almost every digital interaction. However an element unique to screen based interactions might be in ability to give contextual feedback to user actions and commands. The design challenges deals specifically with the limitations of hardware specifications that are overcome and differentiated with a fluid software interactions. <strong>Feedback</strong> Because motion is an "in-between" design element, it is difficult to pinpoint "A" example. One approach is to see motion's role; it acts as a bridge. It is a mechanism for feedback that needs to connect a user action with a task the user is trying to accomplish. Because the user is often trying to accomplish a multitude of tasks with limited input options, the bridge, hence motion, is very important in making the experience feel connected and seamless. <ul> <li><a href="http://www.dangersoffracking.com/" target="_blank">DangersOfFracking.com</a> uses parallax motion (and graphics) to tie together different parts of their website.</li> <li><a href="http://smartdesignworldwide.com/thinking/microinteractions-why-details-matter/" target="_blank">Dan Saffer writes about how 'microintearctions' are an important way to give users feedback</a>. Motion is often a keep way of creating nuanced details in digital interaction design.</li> </ul> <strong>Metaphorical:</strong> Motion uses a lot of natural physics; action and reaction. Some examples are elements that are overlaid upon one another have shadows (3D), elements that are in the distance fade (proximity). http://www.youtube.com/watch?v=dNJdJIwCF_Y <strong>Symbolic</strong> <em>"The beauty and great challenge of motion is that it is inherently intuitive. But let me clarify. Motion is intuitive to judge whether or not it is working, but it is not as intuitive to create interactions. This is often because 1. interactions need work across demographics. 2. but every demographic and culture is different. 3. because we experience a large part of motion intuitively, it is difficult to clearly identify and articulate the entirety of what constitutes the motion and effect you are trying to design/achieve."</em> <strong>Performative</strong> This prompts me to think about "unnecessary motions." Motion is not always needed, especially when motion is added to an interaction for the sake of having a transition. An unintuitive, unnecessary, repetitive, redundant motion or transition can be very distracting, annoying, and even downright painful to use an app or interaction. This often appears in Powerpoint presentations or even a Powerpoint alternative called <a href="http://prezi.com/presentation-software/?gclid=CNTuwIG998QCFdgJgQod_zkAzQ" target="_blank">Prezi</a>. <hr /> <em><span style="color: #808080;">2 contributors</span></em>

OldNewDate CreatedAuthorActions
April 20, 2015 @ 21:39:16 Jack
April 20, 2015 @ 21:38:41 Jack
April 20, 2015 @ 21:38:13 [Autosave] Jack
April 20, 2015 @ 20:28:39 Jack
April 20, 2015 @ 20:10:15 Jack
To leave more detailed comments, visit the discussion tab above.
Fonts by Google Fonts. Icons by Fontello. Full Credits here »