Refine mobile appʼs  user interface     Edward Chiang           1
Refine mobile appʼs  user interface     Edward Chiang     Polydice, Inc.   Mobile Developer           2
21       Polydice, Inc.     3
App UI4
...5
App6
7
8
9
10
11
11
11
11
Prototype   12
13
Version 0.1          Prototype     14
15
15
15
16
16
16
17
17
17
18
18
18
19
19
iPhone App        Web Service              API             20
iPhone App        Web Service             21
App UI22
iPhone   Quality Test         23
3G24
3GAny where, any time!24
25
25
25
25
25
25
25
26
26
26
26
26
26
26
...27
App UI28
iPhone  Usability test         29
User-Centered Design   DNA             30
31
You are not your user          32
33
34
35
User research lite version            36
37
38
39
Version 0.2       40
Version 0.2       40
Vsersion 0.5        41
Vsersion 0.5        41
Version 0.6       42
Version 0.6       42
Version 0.7       43
Version 0.7       43
Version 0.75     App        44
Version 0.75     App        44
v0.8                     v0.7              v0.6       v0.5v0.2               45
Usability Test              v0.8                     v0.7              v0.6       v0.5v0.2               45
Usability Test              v0.8                     v0.7              v0.6       v0.5v0.2               45
Usability Test              v0.8                     v0.7              v0.6       v0.5v0.2               45
Usability Test          46
”        ”    47
App UI48
iPhone AppUser Acceptance Testing           49
50
50
50
51
51
51
iPhoneWeb Service              52
53
53
53
53
54
54
54
54
55
55
55
55
56
56
56
56
57
57
57
57
57
58
58
58
59
59
59
59
March 21, 2011Version 1.2          60
61
62
And one more thing...          63
64
...        ...   ...      65
66
67
App68
...We are hiring!        Polydice, Inc.    HPX                 69
Thank you!    70
Upcoming SlideShare
Loading in …5
×

Refine mobile app’s user interface

1,311 views

Published on

This slide was present at HP19 event. http://www.hpx-party.com/hpx-events/hp19-mobile-design

Published in: Design, Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,311
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • 0/20 \n大家好,我叫 Edward,我今天要跟各位分享題目是 Refine mobile app’s user interface。我覺得作為開發人員,或者設計師最難的事情是做出打動人心的應用軟體,所以我今天要在短短 20 分鐘要跟各位分享開發人員奮鬥故事。\n
  • 0/20\n我在 Polydice Inc 擔任 Mobile Developer,對於 HPX 部份我從 HP12 開始參加到現在,另外我也有參加網站企劃讀書會。\n\n在三月時候,聽到今年五月將會有 Mobile Design 的主題,我相當的興奮。那時後我的專案故事還在進行當中,我就跟 Richard Tasi 說我想要可以分享我的經驗。\n
  • 1/20\n那時後只有這樣想法:不管此專案未來會進行怎麼樣,也還不知道 App Store 上面下載量好不好,無論如何我一定要認真做。\n
  • 1/20\n精彩內容可以分為三個不同階段,如何來改善與提升我們 App UI 的使用\n
  • 1/20~2/20\n
  • 2/20\n\n
  • 3/20 分析市面上的 APP 有哪些功能\n可以對大家做調查\n
  • 2/20\n豐富的線上最新資料可以做查詢\n
  • 3/20\n從頭開始做畫面、動線、資料呈現的討論\n
  • 3/20\n黑板討論建立我們 App 的 Concept\n
  • 4/20\nPost it! 將我們的各個 iPhone 功能、動線排出來\n
  • 4/20\nPost it! 將我們的各個 iPhone 功能、動線排出來\n
  • 4/20\nPost it! 將我們的各個 iPhone 功能、動線排出來\n
  • 4/20\n開始製作第一階段要交給客戶的 Prototype 畫面\n
  • 5/20\n這是我的辦公桌,用 MacBookPro 製作 Prototype 是件愉快的事情。\n
  • 5/20\n讓大家來瞧瞧我們第一版的設計,這也是我們第一階段 on time 交給客戶的。\n
  • 5/20\n首頁、根據所在位置查詢附近的房屋,可以將資訊過濾\n
  • 5/20\n首頁、根據所在位置查詢附近的房屋,可以將資訊過濾\n
  • 6/20\n觀看每一個房屋資訊、如果觀看覺得不想錯過,就將它加入最愛\n
  • 6/20\n觀看每一個房屋資訊、如果觀看覺得不想錯過,就將它加入最愛\n
  • 6/20\n點選每一個房屋,可以進去看更多照片,一張一張的滑動瀏覽\n
  • 6/20\n點選每一個房屋,可以進去看更多照片,一張一張的滑動瀏覽\n
  • 6/20\n除了所在位置,我們可以跨區域查詢,根據各種查詢條件,帶出查詢的房屋列表回來。\n
  • 6/20\n除了所在位置,我們可以跨區域查詢,根據各種查詢條件,帶出查詢的房屋列表回來。\n
  • 6/20~7/20\n除了看房屋,我們可以透過手機了解附近的分店、點選靠近的分店,可以進一步透過各種管道接洽。\n
  • 7/20\n畫面敲定後,就是讓假的頁面資料傳接 API,換上栩栩如生的真實資料\n
  • 7/20\n當 API 越接越多,手機上的動線和資料呈現越來越逼真。\n
  • 8/20\n當開發到一陣子,我們就開始思考著,這樣的 UI 動線是不是好的,順不順?\n
  • 8/20\n我們帶著 iPhone 測試去,我們怎麼測試確保那些待在辦公室開發以為已經解決,但是還是會有特殊狀況事情我們待發現。\n
  • 8/20\n我們在哪邊測?\n
  • 8/20\n在這些環境下,幾乎跑了大台北,我們發現了很多不是預期中的狀況發生了。\n
  • 8/20\n在這些環境下,幾乎跑了大台北,我們發現了很多不是預期中的狀況發生了。\n
  • 8/20\n在這些環境下,幾乎跑了大台北,我們發現了很多不是預期中的狀況發生了。\n
  • 8/20\n在這些環境下,幾乎跑了大台北,我們發現了很多不是預期中的狀況發生了。\n
  • 8/20\n在這些環境下,幾乎跑了大台北,我們發現了很多不是預期中的狀況發生了。\n
  • 8/20\n在這些環境下,幾乎跑了大台北,我們發現了很多不是預期中的狀況發生了。\n
  • 8/20\n程式串接沒有 Bug,但是怎麼會出現這樣的資訊呢?無論如何,這是要解決的。\n
  • 8/20\n程式串接沒有 Bug,但是怎麼會出現這樣的資訊呢?無論如何,這是要解決的。\n
  • 8/20\n程式串接沒有 Bug,但是怎麼會出現這樣的資訊呢?無論如何,這是要解決的。\n
  • 8/20\n程式串接沒有 Bug,但是怎麼會出現這樣的資訊呢?無論如何,這是要解決的。\n
  • 8/20\n程式串接沒有 Bug,但是怎麼會出現這樣的資訊呢?無論如何,這是要解決的。\n
  • 8/20\n程式串接沒有 Bug,但是怎麼會出現這樣的資訊呢?無論如何,這是要解決的。\n
  • 9/20\n我們要探索品質,不要讓 APP 因為操作過承造成當掉跳掉,我們希望資料能夠合理正常的呈現,我們要修正這些意外中的事情。\n
  • 10/20\n當我們的努力到覺得差不多,可以見人的時候,我們的改善 UI 機會二出現了!\n
  • 10/20\n
  • 10/20\n
  • 10/20\n我要感謝 HPX 讀書會社群,這是我參加第二組時候閱讀的書,互動設計。這本書讓我學會很多這領域的知識。\n
  • 11/20\n花些時間來瞭解使用者,就能降低做出不被喜愛的使用者經驗,而讓我們可以有機會做出好的成果。\n
  • 11/20\n如果能越早做修正,成本會比較低之外,程式也比較好改\n
  • 我們讓使用者操作我們開發中的 APP,而我開發人員則站在旁邊安靜的觀察、安靜的紀錄。尤其身為開發人員看著使用者困惑的表情、驚奇的表情,這樣更能讓自己知道,開發貼近使用者的自我要求,是如此的重要。\n
  • 11/20\n這個過程我們是要反覆式的設計,做改善再做測試。\n
  • 11/20\n我們用什麼方法來花些時間來瞭解使用者呢?我們希望能降低做出不被喜愛的使用者經驗,而讓我們可以有機會做出好的成果。這 Lite version 也是參加互動設計讀書會學到,當初是由 Richard 出給我們該組的作業,我將這作業帶入到 Mobile 應用。\n
  • 12/20\n
  • \n
  • 12/20\n
  • 12/20\n
  • 13/20\n
  • 14/20\n
  • 14/20\n
  • 14/20\n
  • 12/20\n
  • 12/20\n
  • 12/20\n
  • 14/20\n
  • \n
  • 15/20\n
  • 15/20\n
  • 15/20\n樣式客戶非常的在意,要能 Follow 全球既有軟體的配色、色調。這邊沒啥空間可以商量。\n
  • 15/20\n樣式客戶非常的在意,要能 Follow 全球既有軟體的配色、色調。這邊沒啥空間可以商量。\n
  • 15/20\n對於資料呈現是否正確,顯現出來是否足夠,該顯示顯示、該隱藏的隱藏,最了解的是客戶,也由他們跟我們回報他們所發現。\n
  • 15/20\n對於資料呈現是否正確,顯現出來是否足夠,該顯示顯示、該隱藏的隱藏,最了解的是客戶,也由他們跟我們回報他們所發現。\n
  • 16/20\n
  • 16/20\n豐富九宮格的首頁、支援使用者登入帳號、使用者等待過程有提醒\n
  • 16/20\n豐富九宮格的首頁、支援使用者登入帳號、使用者等待過程有提醒\n
  • 16/20\n豐富九宮格的首頁、支援使用者登入帳號、使用者等待過程有提醒\n
  • 16/20\n跨區域查詢、房屋豐富資訊列表、地圖找房屋\n
  • 16/20\n跨區域查詢、房屋豐富資訊列表、地圖找房屋\n
  • 16/20\n跨區域查詢、房屋豐富資訊列表、地圖找房屋\n
  • 16/20\n多了達人積分功能、看地理位置、附近街景\n
  • 16/20\n多了達人積分功能、看地理位置、附近街景\n
  • 16/20\n多了達人積分功能、看地理位置、附近街景\n
  • 16/20\n觀看房屋內部格局、照片總攬、喜歡可以分享出去,或者選擇推薦。\n
  • 16/20\n觀看房屋內部格局、照片總攬、喜歡可以分享出去,或者選擇推薦。\n
  • 16/20\n觀看房屋內部格局、照片總攬、喜歡可以分享出去,或者選擇推薦。\n
  • 16/20\n可以找到附近分店、看哪個分店最靠近、看距離想看房屋路程大概多近多遠、可以看方位找方向。\n
  • 16/20\n可以找到附近分店、看哪個分店最靠近、看距離想看房屋路程大概多近多遠、可以看方位找方向。\n
  • 16/20\n可以找到附近分店、看哪個分店最靠近、看距離想看房屋路程大概多近多遠、可以看方位找方向。\n
  • 16/20\n可以找到附近分店、看哪個分店最靠近、看距離想看房屋路程大概多近多遠、可以看方位找方向。\n
  • 16/20\n看看達人排行榜、看看個人收藏好屋\n
  • 16/20\n看看達人排行榜、看看個人收藏好屋\n
  • 16/20\n看看成交行情、試算自己貸款與攤還方式、貼心功能設定\n
  • 16/20\n看看成交行情、試算自己貸款與攤還方式、貼心功能設定\n
  • 16/20\n看看成交行情、試算自己貸款與攤還方式、貼心功能設定\n
  • 16/20\n
  • 16/20\n東森新聞報導\n
  • 16/20\n客戶為 iPhone app 操作影片\n
  • 17/20\n最後我要跟大家分享這段歷程的使命感怎麼來!\n
  • 17/20\n
  • 17/20\n因為這個問題存在,所以我要用我的長才,來提供解決辦法\n
  • 17/20\n
  • 17/20\n
  • 17/20\n
  • 18/20\n
  • 19/20 最後,我要謝謝 Polydice,也要謝謝 HPX 和網站企劃讀書會社群\n
  • Refine mobile app’s user interface

    1. 1. Refine mobile appʼs user interface Edward Chiang 1
    2. 2. Refine mobile appʼs user interface Edward Chiang Polydice, Inc. Mobile Developer 2
    3. 3. 21 Polydice, Inc. 3
    4. 4. App UI4
    5. 5. ...5
    6. 6. App6
    7. 7. 7
    8. 8. 8
    9. 9. 9
    10. 10. 10
    11. 11. 11
    12. 12. 11
    13. 13. 11
    14. 14. 11
    15. 15. Prototype 12
    16. 16. 13
    17. 17. Version 0.1 Prototype 14
    18. 18. 15
    19. 19. 15
    20. 20. 15
    21. 21. 16
    22. 22. 16
    23. 23. 16
    24. 24. 17
    25. 25. 17
    26. 26. 17
    27. 27. 18
    28. 28. 18
    29. 29. 18
    30. 30. 19
    31. 31. 19
    32. 32. iPhone App Web Service API 20
    33. 33. iPhone App Web Service 21
    34. 34. App UI22
    35. 35. iPhone Quality Test 23
    36. 36. 3G24
    37. 37. 3GAny where, any time!24
    38. 38. 25
    39. 39. 25
    40. 40. 25
    41. 41. 25
    42. 42. 25
    43. 43. 25
    44. 44. 25
    45. 45. 26
    46. 46. 26
    47. 47. 26
    48. 48. 26
    49. 49. 26
    50. 50. 26
    51. 51. 26
    52. 52. ...27
    53. 53. App UI28
    54. 54. iPhone Usability test 29
    55. 55. User-Centered Design DNA 30
    56. 56. 31
    57. 57. You are not your user 32
    58. 58. 33
    59. 59. 34
    60. 60. 35
    61. 61. User research lite version 36
    62. 62. 37
    63. 63. 38
    64. 64. 39
    65. 65. Version 0.2 40
    66. 66. Version 0.2 40
    67. 67. Vsersion 0.5 41
    68. 68. Vsersion 0.5 41
    69. 69. Version 0.6 42
    70. 70. Version 0.6 42
    71. 71. Version 0.7 43
    72. 72. Version 0.7 43
    73. 73. Version 0.75 App 44
    74. 74. Version 0.75 App 44
    75. 75. v0.8 v0.7 v0.6 v0.5v0.2 45
    76. 76. Usability Test v0.8 v0.7 v0.6 v0.5v0.2 45
    77. 77. Usability Test v0.8 v0.7 v0.6 v0.5v0.2 45
    78. 78. Usability Test v0.8 v0.7 v0.6 v0.5v0.2 45
    79. 79. Usability Test 46
    80. 80. ” ” 47
    81. 81. App UI48
    82. 82. iPhone AppUser Acceptance Testing 49
    83. 83. 50
    84. 84. 50
    85. 85. 50
    86. 86. 51
    87. 87. 51
    88. 88. 51
    89. 89. iPhoneWeb Service 52
    90. 90. 53
    91. 91. 53
    92. 92. 53
    93. 93. 53
    94. 94. 54
    95. 95. 54
    96. 96. 54
    97. 97. 54
    98. 98. 55
    99. 99. 55
    100. 100. 55
    101. 101. 55
    102. 102. 56
    103. 103. 56
    104. 104. 56
    105. 105. 56
    106. 106. 57
    107. 107. 57
    108. 108. 57
    109. 109. 57
    110. 110. 57
    111. 111. 58
    112. 112. 58
    113. 113. 58
    114. 114. 59
    115. 115. 59
    116. 116. 59
    117. 117. 59
    118. 118. March 21, 2011Version 1.2 60
    119. 119. 61
    120. 120. 62
    121. 121. And one more thing... 63
    122. 122. 64
    123. 123. ... ... ... 65
    124. 124. 66
    125. 125. 67
    126. 126. App68
    127. 127. ...We are hiring! Polydice, Inc. HPX 69
    128. 128. Thank you! 70

    ×