1. 모바일앱UX/UI실무 적용가이드

2. Hello! I’m JinWook, Shin I focus on mobile strategy I work at blinkfactory, inc. We make a brandapp for mobile Check the http://brandapp.co.kr And You can find this slide on the web Slideshare (http://www.slideshare.net/delph2a)

3. Agenda 모바일앱사용자의 이해 모바일앱 성공을 위한 UI/UX설계전략 모바일앱UI/UX 개발 가이드 모바일앱UI/UX 개발이슈 모바일앱UI/UX 개발 팁 및 기법 모바일앱UI/UX 개발사례를 통한 개발 방법론

4. UI vsUX

6. UI UI is the interface

7. UX UX is The person, their surroundings, the handling of the iPhone and its uses, etc

8. What’s app? ? ? ?

9. Mobile Web vsApp

10. Mobile web Mobile optimized A website or web application specifically designed and developed for the dimensions, interactions and performance of a web browser on an Apple iPod Touch, iPohne and/or iPad or any mobile device

11. Native application A program designed and developed to run independent of a web browser, compiled specifically for an Apple iPod Touch, iPhone and/or iPad

12. Know your medium

13. Know your audience

14. Ask yourself What does my audience expect? What does my audience want? What do you want your audience to want

15. User expectations Access Anywhere (we’re mobile) Quick Response Time (we’re impatient) Resource Non-intensive (we’re battery cautious)

16. If I had asked people what they wanted, they would have said ‘faster horses.” Henry ford

19. Flipping the mobile phone Entertainment Location Awareness Capturing and Sharing Experiences Helper tools Payments calls

20. Mobile Context On the move I’ve a few minutes to kill I’m settled and engaged(alone/group)

21. Utility Content Toys Tools Communications Games

22. User Experience Apps should feel apple-like Don’t create a potential negative experience, gracefully handle poor connectivity Exploit the technology & delight

23. Design & tech tips Below 10Mb and users can download app. Untethered Swap functionality for hot areas Account for accidental touches in UX proximity Keep the error notification as passive as the situation merits Support rotation fully or not at all Use sound – Hint, iPhone is iPod with a phone in it

24. PDA : Business / focused Mobile : social / limited Smartphone : techie / complicated

25. PDA iPhone Mobile Smartphone

26. Iphone Big, HD display Good touch-screen “Feel-good” UX Appstore

27. Before It’s painful to explore! Now It’s fun to explore!

28. What makes your app mobile

29. Micro-tasking Local bored

30. The 8 criteria for good UX Provide valuable feedback Behave with consistency Behave in a familiar way Be obvious and efficient Be responsive and perform Help people & bussinessaccomplish goals Be brand consistent & elegant Be progressive & trustworthy

31. brand

34. Scott McCloud’s «Understanding Comics»

35. Keep It simple, StupidOnly a few options per screen

36. About good apps Focus on mobile context Optimize for micro-tasking Use sensors to enhance local context Create opportunities for exploration Complex != complicated Do one thing and do it well

37. Finger-Friendly Design Use the thumb’s hot zone Design to a 44-pixel rhythm Be generous with space Content at top, controls at bottom Avoid scrolling where practical Put secondary controls behind hidden doors

38. Space

39. Hot zone

40. 44 rhythm

47. App idea 1 Make use of “Gap Time” and “Half-Time”

48. What apps work? Time wasters & games Supplement to a web app / service Bite-size chunks of information

49. App Idea 2 Alleviate Inconvenience 불편함 해결 유틸리티

50. What apps “work”? Time-sensitive info / alerts Location-based apps

51. App idea 3 Content is almost freeBut people will Pay for Great UX

53. 스케치 프로토타입아이디어를 자극하는 디자인을 결정짓는 제안하는 설명하는 탐색하는 수정하는 질문하는 답변하는 시도하는 점검하는 선동하는 해결하는 추상적인 구체적인 애매한 묘사하는

54. Case

55. Find your focus

56. Scope= Product

57. Users Want the Apple Experience

58. Type of app 3 application “types”

59. iPhoneHIGuidelines Online at : http://bit.ly/humaninterfaceguidelines 135page

60. Productivity Utility Immersive

61. frame

62. frame

63. Getting attention

64. Displaying content

65. Gestures & interactions

66. TableView Great for drilling down hierachical content

68. Tab Bar Great for independent modal screens Only four mode recommended, rest is “more”

70. Anti patterns

71. What’s a Design pattern Reusable solution to a common problem Extractions of proven solutions Collectively emergent

72. What’s an anti patterns A design pattern that causes at least as many problems as it solves, despite better options existing

73. Anti-Patterns Are Not Bugs Dumb features Crappy code Bad habits

74. Splash screens are evil, even when they’re pretty

76. Forget “quit” and “launch” Replace with “pause” and “unpause” Think about fast app cycling Don’t put branding ahead of users

78. Give the impression that your app unpausesinstantly Make app cycling addictive

79. Navigation sucks

80. Alert

81. The bouncer Providing value only for registered users

83. If possible, allow users to register from the app

85. Tap, swipe, and drag, shakeare uncharted territory

87. Focus on the user Don’t over do it

88. Do not try to build for everyone If you build for everybody, you wind up building for nobody

89. Think Big, Build small

90. Thank you jinwook@blinkfactory.com