Telstra ux presentation 14 dec 2012
•Download as PPTX, PDF•
1 like•463 views
This document provides instructions for basic gestures and interactions on a touchscreen device. It explains how to press and hold to learn more, swipe to select items, slide to pan around the screen, tap for primary actions, pinch to zoom in and out, turn with two fingers to rotate items, and swipe from screen edges to access app or system commands.
More Related Content
More from Nick Hodge
More from Nick Hodge (20)
Recently uploaded
Recently uploaded (20)
Telstra ux presentation 14 dec 2012
- 51. 1 3 2
- 54. Press and hold to learn Swipe to selectSlide to panTap for primary action Pinch to zoomTurn to rotate Swipe from edge for app commands Swipe from edge for system commands
Editor's Notes
- Microsoft Design Language
- Mouse has a language – it’s been fine-tuned over the last 25+ years. We all know how to scroll, how to command on an object etc. For mouse we have a tangible HW device, we can see what’s possible – left/right click, scrollwheel, UI What about touch? Touch interactions are mostly invisible, and Metro guidance is to provide content over chrome
- Encarta 95 … Windows XP Media Center, Zune UI (player & desktop app) >> Phone
- Looks like Windows 95 to me
- It is rooted in Swiss, modern design. In particular as they are expressed in modern transportation systems, on signage and maps, where there is a focus on cleanliness and clarity. It’s about communicating essential information in an honest and beautiful way.
- Modern Style – Bauhaus International Type Style – Swiss Design (1950s, emphasis on grid, sans serif type, bold colours, real pictures) Example here of NYC is Massimo Vignelli Motion Design – cinematography / Saul Bass Movie Helvetica by Gary Hustwit Segoe; Steve Matteson Agfa Monotype
- Motion Design – cinematography / Saul Bass
- A skeuomorph is “an object or feature which imitates the design of a similar artefact in another material”.
- 1 pixel 5 pixels = 1 subunit 20 pixels = 1 unit
- Between elements, 2 subunits (or 10 pixels)
- Top left corner of content is always anchored on 20px grid lines (horizontally & vertically) Padding between items is always multiples of 5px sub-units 10px between items of the same group
- Padding between items is always multiples of 5px sub-units 10px between picture + text Item height and width are also multiples of 5px
- Padding between items is always multiples of 5px sub-units 80px between groups of objects The proportional difference in padding makes the separation between the groups of items clear (you can tell that without any context that there are 2 groups here)
- In addition to using the grid to determine sizing and margins of individual items, we also use the grid to guide the overall page layout Page header is baselined at 5 units (100px) from the top
- Content region has a left margin of 6 units (120px) from the left
- …and aligns to 7 units (140px) from the top
- These are just a couple different varieties of ways different content can be laid out. There are many, many possibilities here. This particular one is what we provided as a base template in Visual Studio. It uses the Metro style silhouette, applies the type ramp, and all items are aligned to the 20px grid. If you have multiple groups of content each with several items you’d like to highlight – which is particularly common on apps’ landing pages – this is a good starting point. However, don’t be limited by this exact layout. This is just 1 expression of the principles. There are many ways to leverage proportions, typography, graphical treatment to add visual variety to your pages. Having visual variety is *particularly* important when designing the landing page of your app. Treat it as the cover to your magazine.
- These are just a couple different varieties of ways different content can be laid out. There are many, many possibilities here. This particular one is what we provided as a base template in Visual Studio. It uses the Metro style silhouette, applies the type ramp, and all items are aligned to the 20px grid. If you have multiple groups of content each with several items you’d like to highlight – which is particularly common on apps’ landing pages – this is a good starting point. However, don’t be limited by this exact layout. This is just 1 expression of the principles. There are many ways to leverage proportions, typography, graphical treatment to add visual variety to your pages. Having visual variety is *particularly* important when designing the landing page of your app. Treat it as the cover to your magazine.
- We have over 2 dozens pre-designed animations. Some are baked into the controls already. E.g. App bar Others can be easily added to your app. You can just specify what UI elements you would like to animation using one of these animations from the library and all the motion and timing will be taken care of. There will be a later deep dive into this topic.
- Hold to learn Mouse has a safe way to learn with hover, touch doesn’t have hover so we created a new learning interaction Good use of a slow interaction because you hopefully only have to learn once, we don’t slow you down for the rest of your life Examples: Rotated appbar button on Start, Shut down menu Tap for primary action – this is pretty basic Slide to pan Swipe to select Our fingers don’t have a second mouse button, so how do we do a secondary action like selection? We leverage the richness and effortlessness of a drag, all you need is a simple swipe in the orthogonal direction of panning Example: Start Select Notice how commands show up automatically when I’ve selected Can also rearrange Pinch/stretch to zoom – both for optical and semantic zoom Swipe from edge to show app and system UI Turn to rotate Use these! That’s our most basic touch pattern.
- We’re not just designing for what’s on the screen, but also for how the device is held. Key takeaway: There is not one correct grip. Users will change their posture, and different people have their favorites, preferred posture can also change based on task. 4 main postures: One hand holding, one hand interacting Two hands holding, thumbs interacting Device rests, two hands interacting Device rests, without/intermitted interaction Notice how: Grips are great for the edge gestures Big screen, and a full hand is pretty much always available for interact with the screen Try your app in different postures – make sure you can interact with it using different grips. However, some interactions might lend themselves to specific grips. For example a game with controls by the thumbs.