Contextual Menu by Force Push

Pablo Stanley
A free video tutorial from Pablo Stanley
Product Designer
4.3 instructor rating • 7 courses • 110,018 students

Lecture description

Add a context menu activated by force push on the apple watch with two rows of buttons with icons.

Learn more from the full course

Apple Watch UX: Design Beautiful UI and User Experiences

Learn how to design and prototype smooth user experiences and beautiful interfaces for the Apple Watch in less than 2hrs

01:42:19 of on-demand video • Updated April 2015

  • Design smooth user experiences for the Apple Watch
  • Quickly learn the Apple Watch Human Interface Guidelines
  • Design apps for the Apple Watch from scratch
  • Create user stories for the Apple Watch and design with them
  • Create an interactive prototype for the Apple Watch
English [Auto] Okay so we just finish the seinen or player the next thing they we're going to do is doing context menu context menu if you remember appear when you force touch a screen. So let's say you are here. But over here it's already too crowded. So there's a very rewind a pause force for a forward and speed control. So a lot of stuff going on in a small screen so you need it but you still need some options some other things. So to control to access those things we need a force. The force is when you don't only tap but you also press a little bit of touch of force on the screen and that will bring context menu. So context menu is going to make this so or requirements are Marcas complete save for later and add a note. So over here I put a template of different options that you can use Remine at node. Really nice icons that you can use but for our story we need Marcus comp. So we have this save for later probably we can if you read the lecture you can save it for later and add or note so here's an added note and a microphone. So let's go ahead and select these three and then duplicate them. Let's put them over here. And that's it like this so perfect so we have buttons here. Let's go ahead and analyze them. They don't seem very well I'd say first of all let's group them together so this one and this one and let's make it a group like this one. It's a group too. And then this one this one and this one it's a group two. So this one. Let's apply it to the airport to the center. It's let's give it a little bit more space. Perfect. We have a close menu because this is can I use it to close this Modal context menu that appears. So we have a close button. So there you go. We're pretty much done. But you know what. For adding a note I want to make it a little bit more dominant. I want to invite people to add and no. So for doing that I'm going to make a read. So I'm going to make this button right. But instead of black I'm going to use white as the icon and this means this is going to be a little bit more dominant and is almost telling you you should add a note you know. So that's pretty much it. You force touch here and then you have the strength. There's a context menu where you can Marcus complete the lecture you can favor it and save it for later. Or you can add a note. So on the next lecture we're going to go ahead and actually prototype how making a note looks like. So that's good. This was a chart like you're awesome.