Post on 17-Jan-2016
Where Value and Innovation Co-exist
Gestures and User InteractionBest Practices
Where Value and Innovation Co-exist
• Gestures
• User Interaction
• Common pitfalls for Developers
• Q&A
© ValueLabs | www.valuelabs.com | Confidential 2
Where Value and Innovation Co-exist
© ValueLabs | www.valuelabs.com | Confidential
http://blog.iskysoft.com/wp-content/uploads/lion-gestures.png
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 | Confidential 4
“
”
Where Value and Innovation Co-exist
© ValueLabs | www.valuelabs.com | Confidential 5
Gestures include movement of
the hands, face, or other parts of
the body
“
”
Where Value and Innovation Co-exist
© ValueLabs | www.valuelabs.com | Confidential 6
Touch: Gesture:
Where Value and Innovation Co-exist
© ValueLabs | www.valuelabs.com | Confidential 7
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:(UISwipeGestureRecognizerDirectionRight | 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
© ValueLabs | www.valuelabs.com | Confidential 9
Where Value and Innovation Co-exist
http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html
© ValueLabs | www.valuelabs.com | Confidential
Where Value and Innovation Co-exist
• Understanding design Requirements
• Paper & Sketch
• Wireframe
• Prototype
• Style Guide
© ValueLabs | www.valuelabs.com | Confidential 11
Where Value and Innovation Co-exist
© ValueLabs | www.valuelabs.com | Confidential 12
Where Value and Innovation Co-exist
© ValueLabs | www.valuelabs.com | Confidential 13
Where Value and Innovation Co-exist
© ValueLabs | www.valuelabs.com | Confidential 14
Where Value and Innovation Co-exist
© ValueLabs | www.valuelabs.com | Confidential 15
https://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/
Where Value and Innovation Co-exist
© ValueLabs | www.valuelabs.com | Confidential 16
http://web1-fall2009.bionicpower.com/wp-content/uploads/2009/10/JR7-IWD-Widget-Wireframes.jpg
Where Value and Innovation Co-exist
© ValueLabs | www.valuelabs.com | Confidential 17
Where Value and Innovation Co-exist
© ValueLabs | www.valuelabs.com | Confidential 18
Where Value and Innovation Co-exist
Where Value and Innovation Co-exist
End users behavior Near-accurate
touches Bad App iconConfusing animations
Too many gestures
User centric language
Where Value and Innovation Co-exist
Thank You