16. You need „large“ buttons …
Apple-Guidelines for
Application icon:
Size for iPhone (in pixels):
57 x 57
or 114 x 114
(high resolution)
Size for iPad (in pixels):
72 x 72
23. So many posibillitys …
http://gestureworks.com/about/open-source-gesture-library/a
24. So many posibillitys …
http://gestureworks.com/about/open-source-gesture-library/a
25. … but use only some of it.
Gesture Action
Tap To press or select a control or item
Drag To scroll or pan.
Flick To scroll or pan quickly.
Swipe In a table-view row, to reveal the Delete button.
Double tap To zoom in and center a block of content or an
image. To zoom out (if already zoomed in).
Pinch open To zoom in.
Pinch close To zoom out.
Touch and hold In editable text, to display a magnified view for
cursor positioning.
(Standard Gestures in the iOS,
Source Apple iPhone Human Interface Guidelines)
27. You need a concept ...
• Applications
• Web-only Content:
Web applications, Optimized webpages,
Compatible webpages
•Hybrid applications
28. … and emotional Interfaces.
• Interface should based on the way people think and
work, not on the capabilities of the device.
• Model your application’s objects and actions on objects and
actions in the real world.
• Direct manipulation means that people feel they are
controlling something tangible, not abstract.
• Applications should respond to every user action
with some visible change
35. Tweaking performance
• Hardware accelerated rendering is not always
available
• Avoid morphing shapes as these have to be rendered
on each „frame“ (expensive)
• Complex or finely structured shapes are more
expensive to render than large simple shapes
• Avoid large changes in scale
• Avoid default bitmap fill mode
• Simplify vector graphics
• Avoid filters
• Carefully picking bitmap sizes if content will need to
be sized down…
• …but ideally, the content would always be 'right-sized'
37. Different event-handlers
(E.g. capture touch-events)
Safari: FireFox:
touchstart for finger MozTouchDown
Sent when the first finger touches the surface.
Sent when the user beings a screen touch action.
gesturestart.
Sent when the second finger touches the surface. MozTouchMove
touchstart for finger
Sent when the user moves his finger on the touch screen.
Sent immediately after gesturestart when the second finger
touches the surface.
MozTouchUp
gesturechange for current gesture.
Sent when both fingers move while still touching the surface. Sent when the user lifts his finger off the screen.
gestureend.
Sent when the second finger lifts from the surface.
touchend for finger
Sent immediately after gestureend when the second finger lifts
from the surface.
55. Conclusion
• The users expects a „snappy“ interface
• Expect to spend a lot of extra time on this
• Keep it simple and stupid
• Try to preload data in a intelligent way
• Do tests on the actual device
56. „If you want to adress touch-enabled devices today and
aim at a „small“ application go for HTML5“
„For large, feature-rich (& responsive) apps go for
native solutions
(or think of crosscompiling)“
57. Follow me:
Follow me: www.x ing.com/profile/Robe
rt_Zinner3
www.t witter.com/reimark or
or r.zinn er@brand-royal.de
kosack@wwsc.de