Download presentation
Presentation is loading. Please wait.
1
Where Value and Innovation Co-exist Gestures and User Interaction Best Practices
2
Where Value and Innovation Co-exist Gestures User Interaction Common pitfalls for Developers Q&A © ValueLabs | www.valuelabs.com | Confidentialwww.valuelabs.com 2
3
Where Value and Innovation Co-exist © ValueLabs | www.valuelabs.com | Confidentialwww.valuelabs.com http://blog.iskysoft.com/wp-content/uploads/lion-gestures.png
4
Where Value and Innovation Co-exist A gesture is a form of non-verbal communication in which visible bodily actions communicate particular messages © ValueLabs | www.valuelabs.com | Confidentialwww.valuelabs.com 4 “ ”
5
Where Value and Innovation Co-exist © ValueLabs | www.valuelabs.com | Confidentialwww.valuelabs.com 5 Gestures include movement of the hands, face, or other parts of the body “ ”
6
Where Value and Innovation Co-exist © ValueLabs | www.valuelabs.com | Confidentialwww.valuelabs.com 6 Touch: touchstart touchend touchmove touchcancel Touch Events Gesturestart Gesturechange Gestureend Gesture Events Gesture:
7
Where Value and Innovation Co-exist © ValueLabs | www.valuelabs.com | Confidentialwww.valuelabs.com 7
8
Where Value and Innovation Co-exist Tapping (Single, double tap) Pinching in and out (also known as zoom in & out) Panning (dragging) Swiping (horizontal or vertical or diagonal) Code Snippets UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget: self action: @selector(imageTap:)]; [tapGesture setNumberOfTouchesRequired : 1]; [view addGestureRecognizer:tapGesture]; - (void)imageTap:(UITapGestureRecognizer *)sender { // identifier can be referenced in sender.view.tag } Rotating Long press (also known as touch and hold) UIPinchGestureRecognizer *pinchGesture = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(scalePiece:)]; [pinchGesture setDelegate:self]; [piece addGestureRecognizer:pinchGesture]; UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panPiece:)]; [panGesture setMaximumNumberOfTouches:2]; [panGesture setDelegate:self]; [piece addGestureRecognizer:panGesture]; UISwipeGestureRecognizer* recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipeFrom:)]; [recognizer setDirection:(UISwipeGestureRecognizerDi rectionRight | UISwipeGestureRecognizerDirectionDown | UISwipeGestureRecognizerDirectionLeft | UISwipeGestureRecognizerDirectionUp)]; [[self view] addGestureRecognizer:recognizer]; [recognizer release]; UIRotationGestureRecognizer *rotationGesture = [[UIRotationGestureRecognizer alloc] initWithTarget:self action:@selector(rotatePiece:)]; [piece addGestureRecognizer:rotationGesture]; UILongPressGestureRecognizer *longPressGesture = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(showResetMenu:)]; [piece addGestureRecognizer:longPressGesture];
![Where Value and Innovation Co-exist Tapping (Single, double tap) Pinching in and out (also known as zoom in & out) Panning (dragging) Swiping (horizontal or vertical or diagonal) Code Snippets UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget: self [tapGesture setNumberOfTouchesRequired : 1]; [view addGestureRecognizer:tapGesture]; - (void)imageTap:(UITapGestureRecognizer *)sender { // identifier can be referenced in sender.view.tag } Rotating Long press (also known as touch and hold) UIPinchGestureRecognizer *pinchGesture = [[UIPinchGestureRecognizer alloc] initWithTarget:self [pinchGesture setDelegate:self]; [piece addGestureRecognizer:pinchGesture]; UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self [panGesture setMaximumNumberOfTouches:2]; [panGesture setDelegate:self]; [piece addGestureRecognizer:panGesture]; UISwipeGestureRecognizer* recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self [recognizer setDirection:(UISwipeGestureRecognizerDi rectionRight | UISwipeGestureRecognizerDirectionDown | UISwipeGestureRecognizerDirectionLeft | UISwipeGestureRecognizerDirectionUp)]; [[self view] addGestureRecognizer:recognizer]; [recognizer release]; UIRotationGestureRecognizer *rotationGesture = [[UIRotationGestureRecognizer alloc] initWithTarget:self [piece addGestureRecognizer:rotationGesture]; UILongPressGestureRecognizer *longPressGesture = [[UILongPressGestureRecognizer alloc] initWithTarget:self [piece addGestureRecognizer:longPressGesture];](http://images.slideplayer.com./26/8649508/slides/slide_8.jpg "Where Value and Innovation Co-exist Tapping (Single, double tap) Pinching in and out (also known as zoom in & out) Panning (dragging) Swiping (horizontal or vertical or diagonal) Code Snippets UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget: self [tapGesture setNumberOfTouchesRequired : 1]; [view addGestureRecognizer:tapGesture]; - (void)imageTap:(UITapGestureRecognizer *)sender { // identifier can be referenced in sender.view.tag } Rotating Long press (also known as touch and hold) UIPinchGestureRecognizer *pinchGesture = [[UIPinchGestureRecognizer alloc] initWithTarget:self [pinchGesture setDelegate:self]; [piece addGestureRecognizer:pinchGesture]; UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self [panGesture setMaximumNumberOfTouches:2]; [panGesture setDelegate:self]; [piece addGestureRecognizer:panGesture]; UISwipeGestureRecognizer* recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self [recognizer setDirection:(UISwipeGestureRecognizerDi rectionRight | UISwipeGestureRecognizerDirectionDown | UISwipeGestureRecognizerDirectionLeft | UISwipeGestureRecognizerDirectionUp)]; [[self view] addGestureRecognizer:recognizer]; [recognizer release]; UIRotationGestureRecognizer *rotationGesture = [[UIRotationGestureRecognizer alloc] initWithTarget:self [piece addGestureRecognizer:rotationGesture]; UILongPressGestureRecognizer *longPressGesture = [[UILongPressGestureRecognizer alloc] initWithTarget:self [piece addGestureRecognizer:longPressGesture];")
9
Where Value and Innovation Co-exist © ValueLabs | www.valuelabs.com | Confidentialwww.valuelabs.com 9
10
Where Value and Innovation Co-exist http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html © ValueLabs | www.valuelabs.com | Confidentialwww.valuelabs.com
11
Where Value and Innovation Co-exist Understanding design Requirements Paper & Sketch Wireframe Prototype Style Guide © ValueLabs | www.valuelabs.com | Confidentialwww.valuelabs.com 11
12
Where Value and Innovation Co-exist © ValueLabs | www.valuelabs.com | Confidentialwww.valuelabs.com 12
13
Where Value and Innovation Co-exist © ValueLabs | www.valuelabs.com | Confidentialwww.valuelabs.com 13 Design Principles LearnabilityEfficiencyMemorabilitySimplicityVisibilityConsistency
14
Where Value and Innovation Co-exist © ValueLabs | www.valuelabs.com | Confidentialwww.valuelabs.com 14
15
Where Value and Innovation Co-exist © ValueLabs | www.valuelabs.com | Confidentialwww.valuelabs.com 15 https://s3.amazonaws.com/files.digication.com/M21573cd1ce8c5f40488f8b5ed56855eb.jpghttps://s3.amazonaws.com/files.digication.com/M21573cd1ce8c5f40488f8b5ed56855eb.jpg http://designreviver.com/wp- content/uploads/2010/08/dr_iphone_sketch_04.jpg http://designreviver.com/wp-content/uploads/2010/08/dr_iphone_sketch_03.jpg http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/design-an-iphone-bank-app-in-photoshop-part-1/http://designreviver.com/wp- content/uploads/2010/08/dr_iphone_sketch_04.jpghttp://designreviver.com/wp-content/uploads/2010/08/dr_iphone_sketch_03.jpg http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/design-an-iphone-bank-app-in-photoshop-part-1/
16
Where Value and Innovation Co-exist © ValueLabs | www.valuelabs.com | Confidentialwww.valuelabs.com 16 http://web1-fall2009.bionicpower.com/wp-content/uploads/2009/10/JR7-IWD-Widget-Wireframes.jpg
17
Where Value and Innovation Co-exist © ValueLabs | www.valuelabs.com | Confidentialwww.valuelabs.com 17
18
Where Value and Innovation Co-exist © ValueLabs | www.valuelabs.com | Confidentialwww.valuelabs.com 18
19
Where Value and Innovation Co-exist
20
End users behavior Near-accurate touches Bad App icon Confusing animations Too many gestures User centric language
21
Where Value and Innovation Co-exist Thank You
Similar presentations
