The document discusses best practices for designing the user experience for mobile apps. It focuses on the importance of first impressions through elements like the app icon, loading screen, and welcome page. The icon should show the app's function, interface, and brand. Loading screens should use animations and mimic the app background. Welcome pages should avoid jargon and showcase key information. The document also covers touch gestures like drag, scroll, zoom, and how gestures should follow intuitive metaphors like push and swipe. It questions where touch interactions are appropriate and discusses hidden gestures that can surprise users if not discoverable.

1. Mobile UX
Jack

2. Ch7 第一印象
First Expression

3. APP Icon
First
Expression Loading Screen
Welcome Page

4. • Do
About App Icon • Show Function
• Show Interface
• Show Brand
• Sync App Color
• Using Right Resolution
• Dont
• Complicated
• Hard to Remember
• Similar to other icon
• Using long words
• Using Transparent color

5. Is it a good
icon ?
1 2 3 4
5 6 7 8
9 10

6. About App
Name
Short, short, short

7. About Loading
Screen
• Pretend App
Background
• Show welcome
Image
• Using Special
Animation
• Show Last Screen

8. About Loading
Screen
• Pretend App
Background
• Show welcome
Image
• Using Special
Animation
• Show Last Screen
• Keep Simple

9. 1 2 3
Is it a good
Screen ?
4 5 6

10. About
Welcome Page
• Avoid Expert Terms
• Showing Important
page
• Easy to glance
• Dashboard Design

11. About
Welcome Page
• Avoid Expert Terms
• Showing Important
page
• Easy to glance
• Dashboard Design
• Surprising user

12. Tutors
• Appear once
• Close in setup
• Integrate with UI
• What’s your
experience ?

13. Color Testing Facebook Line
• Did you Remember
the color of the
APP ?
What’s App Evernote
Mos
Google +
Burger

14. Ch8 滑動、兩指輕掐
Touch
縮放、輕觸

15. Question
• How many gestures
you can used in
mobile Apps ?

16. Gestures
http://static.lukew.com/TouchGestureTemplate.pdf

17. Gestures - 2

18. UI Metaphor
• Form follow function
形式源於功能

19. By the way
• Form follow function

20. Touch
Metaphor
• Push
• Drag
• Scroll Down/Up
• Zoom-in & Zoom-out
Push
Drag

21. Touch
Metaphor
• Push
• Drag
• Scroll Down/Up
• Zoom-in & Zoom-out
Scroll Zoom-in
Down/Up & Zoom-
out

22. Question
• Which one you can
click ?
The Answer is Both

23. Non Touch
Metaphor
• Long time push
• Shake
• Slide out

24. Question
• When did you find out
the following
gestures ?
Double Touch
Slides and get
and Zoom-in
control

25. Question
• Where can you
touch ?

26. Question
• Where can you
touch ?

27. Hidden
Gestures
• Pros
• Surprising user
• Speed up expert
user
• Profession
• Cons
• Hard to find out
• Surprising user

28. Hard gestures
• Making tasks harder
to prevent Failure

29. Two fingers
• Resize Image
• Rotate Image
snapspeed

30. Shake
• Shake for fun
• Shake to Back / Redo ?

31. Thanks