Metro Principles
There are four Principles of Design for Windows Phone applications.
MSDN: Metro is the name of the new design language created for the Windows Phone 7 interface. When given the chance for a fresh start, the Windows Phone design team drew from many sources of inspiration to determine the guiding principles for the next generation phone interface.
- Typography
- Motion
- Content
- Honesty
Then, at //Build/ in 2011, Metro was re-elaborated for to transition developers toward Windows 8 Metro development. There are five Principles for Windows 8 Metro applications.
Channel 9: Windows 8 marks the next step in the evolution of the Metro design style. Through the bold use of color, typography and motion, Metro design style brings a fresh new approach to user experience.
- Pride in craftsmanship
- Be fast and fluid
- Authentically digital
- Do more with less
- Win as one
One reoccurring principle across Metro applications is animation. In Windows Phone development it is Motion. In Windows 8 development it is Be Fast and Fluid.
Animation adds to your app!
MSDN: There are two kinds of motion in Windows Phone:
- Transitions: visual feedback given to users as they move from one view to another, anywhere in the UI. Transitions are triggered by user action
- Animations: visual feedback confined to a local element within a view, but not always as a result of user action. One example is the lock screen’s “hop” motion, which informs the user how to unlock the device.
As a user spends more time inside your app, or as tasks in your app become more sophisticated, high-quality motion becomes increasingly important: it can be used to change how the user perceives their cognitive load and your app’s ease of use. Motion has many other direct benefits:
- Motion delights the user. Animations and other visual feedback create moments of surprise and intuition. Delights also endear the device and app to the user.
- Motion adds hints towards interaction. Motion is directional: it moves forward and backward, in and out of content, leaving minimal “breadcrumb” clues as to how the user arrived at the present view. For example, the Panoramic Entrance animation can draw the user’s eye across the main navigation as the app opens, giving the user a clue about how to operate the Panorama control.
- Motion masks slow performance. When network speeds lag or the system pauses to work, animations can make the user’s wait feel shorter.
- Motion adds personality. A well-considered Metro design uses motion to create the impression that an app is concerned with the here and now, and helps counteract the sensation that the user is burrowing into nested hierarchies.
- Motion adds consistency. Transitions can help users learn how to operate new applications by drawing analogies to tasks that the user is already familiar with.
- Motion adds elegance. Animations can be used to let the user know that the phone is processing, not frozen, and it can passively surface new information that the user may be interested in.
Animation Guidelines
This blog article is about Windows Phone. It steps through how it should be used, where it is already used, and how you can use it, too.
Super-duper-warning: do you remember the <blink> tag in early HTML? It took about 10 seconds for people to hate that tag; it took about 11 seconds for people to hate sites using that tag. Animations could become the <blink> tag for your application if you overuse them – think “subtle”, think “fast”, think “graceful”.
Remember, we are fighting against UNINSTALL!
Jerry’s Animation Rules
- Animations should continue an action. If a user presses something, it should recess. If a user pans, it should move. This is using animation as feedback to the user.
- Animations should be natural. If the user presses something, animating another element is unnatural. As your animations continue an action, it should continue it on the subject.
- Animations should communicate something. Why are you animating? If the users presses something, a recess is a natural response. It says “got it, thanks!”
- Animations should be simple. Your animation is communicating something, but it can’t communicate too much. It will be slight and fast. Let it’s thesis be short.
- Animations should be optional. You have to start from the position that your user will not even see your animation. You cannot make the animation an integral part of your UI.
- Animations should be fast. Since animations should continue a physical action (like touch), its duration should reflect the actual time if it was physical.
- Animation should be subtle. Subtle does not mean difficult to see. It means it is delicate and slight; don’t shake the whole page, simply recess the item the user pressed.
MSDN Animation Rules
- Each animation is part of the system, and no animation should stand out as different.
- Each animation serves a purpose, and gets out of the way quickly.
- Animations appear in 2.5 dimensions, not 3D, and do not make use of elaborate textures, lighting, or extrusions. For example, the Tilt animation does not reveal any depth behind a touch target: only a flat surface. This emphasizes content.
- UI elements can push other UI elements around. For example: if an object expands on a page, it should expand the page downward in an animated way.
- Motion can be triggered by both hardware and software interactions. Transitions need to be aware of all possibilities.
- Actionable items get movement based off of user interaction. For example, the Tilt animation activates to show an object is being touched.
- If an item is updated to a level of importance that bears the user's attention, motion should be used to inform the user.
Note: Since animations can be overdone, it is tempting to skip them completely. I argue no animation is as wrong as bad animation. Take the extra time. Understand the framework. Use my samples.
Do a good job.
Let’s look into our toolbox. What can we actually do?
Must Have Animations
Continue to Part 2.
0 comments:
Post a Comment