Where Value and Innovation Co-exist Gestures and User Interaction Best Practices.

Where Value and Innovation Co-exist

Gestures and User InteractionBest Practices


• Gestures

• User Interaction

• Common pitfalls for Developers

• Q&A

© ValueLabs | www.valuelabs.com | Confidential 2


© ValueLabs | www.valuelabs.com | Confidential

http://blog.iskysoft.com/wp-content/uploads/lion-gestures.png


A gesture is a form of non-verbal

communication in which visible

bodily actions communicate

particular messages


“

”



Gestures include movement of

the hands, face, or other parts of

the body

“

”



Touch: Gesture:


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];


http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html

© ValueLabs | www.valuelabs.com | Confidential


• Understanding design Requirements

• Paper & Sketch

• Wireframe

• Prototype

• Style Guide




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/



http://web1-fall2009.bionicpower.com/wp-content/uploads/2009/10/JR7-IWD-Widget-Wireframes.jpg


End users behavior Near-accurate

touches Bad App iconConfusing animations

Too many gestures

User centric language


Thank You

Where Value and Innovation Co-exist Gestures and User Interaction Best Practices.

Documents

Transcript of Where Value and Innovation Co-exist Gestures and User Interaction Best Practices.