Refine mobile app’s user interface
6 likes562 views
The document outlines the process of refining a mobile app's user interface over multiple versions. It describes prototyping an initial version, testing it on iPhone and for usability, gathering user feedback, and iteratively releasing new versions with interface improvements. The final version, 1.2, is released in March 2011 along with an announcement that the company is hiring.
Refine mobile app’s user interface
- 1. Refine mobile appʼs user interface Edward Chiang 1
- 2. Refine mobile appʼs user interface Edward Chiang Polydice, Inc. Mobile Developer 2
- 3. 21 Polydice, Inc. 3
- 4. App UI 4
- 5. ... 5
- 6. App 6
- 7. 7
- 8. 8
- 9. 9
- 10. 10
- 11. 11
- 12. 11
- 13. 11
- 14. 11
- 15. Prototype 12
- 16. 13
- 17. Version 0.1 Prototype 14
- 18. 15
- 19. 15
- 20. 15
- 21. 16
- 22. 16
- 23. 16
- 24. 17
- 25. 17
- 26. 17
- 27. 18
- 28. 18
- 29. 18
- 30. 19
- 31. 19
- 32. iPhone App Web Service API 20
- 33. iPhone App Web Service 21
- 34. App UI 22
- 35. iPhone Quality Test 23
- 36. 3G 24
- 37. 3G Any where, any time! 24
- 38. 25
- 39. 25
- 40. 25
- 41. 25
- 42. 25
- 43. 25
- 44. 25
- 45. 26
- 46. 26
- 47. 26
- 48. 26
- 49. 26
- 50. 26
- 51. 26
- 52. ... 27
- 53. App UI 28
- 54. iPhone Usability test 29
- 55. User-Centered Design DNA 30
- 56. 31
- 57. You are not your user 32
- 58. 33
- 59. 34
- 60. 35
- 61. User research lite version 36
- 62. 37
- 63. 38
- 64. 39
- 65. Version 0.2 40
- 66. Version 0.2 40
- 67. Vsersion 0.5 41
- 68. Vsersion 0.5 41
- 69. Version 0.6 42
- 70. Version 0.6 42
- 71. Version 0.7 43
- 72. Version 0.7 43
- 73. Version 0.75 App 44
- 74. Version 0.75 App 44
- 75. v0.8 v0.7 v0.6 v0.5 v0.2 45
- 76. Usability Test v0.8 v0.7 v0.6 v0.5 v0.2 45
- 77. Usability Test v0.8 v0.7 v0.6 v0.5 v0.2 45
- 78. Usability Test v0.8 v0.7 v0.6 v0.5 v0.2 45
- 79. Usability Test 46
- 80. ” ” 47
- 81. App UI 48
- 82. iPhone App User Acceptance Testing 49
- 83. 50
- 84. 50
- 85. 50
- 86. 51
- 87. 51
- 88. 51
- 89. iPhone Web Service 52
- 90. 53
- 91. 53
- 92. 53
- 93. 53
- 94. 54
- 95. 54
- 96. 54
- 97. 54
- 98. 55
- 99. 55
- 100. 55
- 101. 55
- 102. 56
- 103. 56
- 104. 56
- 105. 56
- 106. 57
- 107. 57
- 108. 57
- 109. 57
- 110. 57
- 111. 58
- 112. 58
- 113. 58
- 114. 59
- 115. 59
- 116. 59
- 117. 59
- 118. March 21, 2011 Version 1.2 60
- 119. 61
- 120. 62
- 121. And one more thing... 63
- 122. 64
- 123. ... ... ... 65
- 124. 66
- 125. 67
- 126. App 68
- 127. ... We are hiring! Polydice, Inc. HPX 69
- 128. Thank you! 70
Editor's Notes
- #2: 0/20 \n大家好，我叫 Edward，我今天要跟各位分享題目是 Refine mobile app’s user interface。我覺得作為開發人員，或者設計師最難的事情是做出打動人心的應用軟體，所以我今天要在短短 20 分鐘要跟各位分享開發人員奮鬥故事。\n
- #3: 0/20\n我在 Polydice Inc 擔任 Mobile Developer，對於 HPX 部份我從 HP12 開始參加到現在，另外我也有參加網站企劃讀書會。\n\n在三月時候，聽到今年五月將會有 Mobile Design 的主題，我相當的興奮。那時後我的專案故事還在進行當中，我就跟 Richard Tasi 說我想要可以分享我的經驗。\n
- #4: 1/20\n那時後只有這樣想法：不管此專案未來會進行怎麼樣，也還不知道 App Store 上面下載量好不好，無論如何我一定要認真做。\n
- #5: 1/20\n精彩內容可以分為三個不同階段，如何來改善與提升我們 App UI 的使用\n
- #6: 1/20~2/20\n
- #7: 2/20\n\n
- #8: 3/20 分析市面上的 APP 有哪些功能\n可以對大家做調查\n
- #9: 2/20\n豐富的線上最新資料可以做查詢\n
- #10: 3/20\n從頭開始做畫面、動線、資料呈現的討論\n
- #11: 3/20\n黑板討論建立我們 App 的 Concept\n
- #12: 4/20\nPost it! 將我們的各個 iPhone 功能、動線排出來\n
- #13: 4/20\nPost it! 將我們的各個 iPhone 功能、動線排出來\n
- #14: 4/20\nPost it! 將我們的各個 iPhone 功能、動線排出來\n
- #15: 4/20\n開始製作第一階段要交給客戶的 Prototype 畫面\n
- #16: 5/20\n這是我的辦公桌，用 MacBookPro 製作 Prototype 是件愉快的事情。\n
- #17: 5/20\n讓大家來瞧瞧我們第一版的設計，這也是我們第一階段 on time 交給客戶的。\n
- #18: 5/20\n首頁、根據所在位置查詢附近的房屋，可以將資訊過濾\n
- #19: 5/20\n首頁、根據所在位置查詢附近的房屋，可以將資訊過濾\n
- #20: 6/20\n觀看每一個房屋資訊、如果觀看覺得不想錯過，就將它加入最愛\n
- #21: 6/20\n觀看每一個房屋資訊、如果觀看覺得不想錯過，就將它加入最愛\n
- #22: 6/20\n點選每一個房屋，可以進去看更多照片，一張一張的滑動瀏覽\n
- #23: 6/20\n點選每一個房屋，可以進去看更多照片，一張一張的滑動瀏覽\n
- #24: 6/20\n除了所在位置，我們可以跨區域查詢，根據各種查詢條件，帶出查詢的房屋列表回來。\n
- #25: 6/20\n除了所在位置，我們可以跨區域查詢，根據各種查詢條件，帶出查詢的房屋列表回來。\n
- #26: 6/20~7/20\n除了看房屋，我們可以透過手機了解附近的分店、點選靠近的分店，可以進一步透過各種管道接洽。\n
- #27: 7/20\n畫面敲定後，就是讓假的頁面資料傳接 API，換上栩栩如生的真實資料\n
- #28: 7/20\n當 API 越接越多，手機上的動線和資料呈現越來越逼真。\n
- #29: 8/20\n當開發到一陣子，我們就開始思考著，這樣的 UI 動線是不是好的，順不順？\n
- #30: 8/20\n我們帶著 iPhone 測試去，我們怎麼測試確保那些待在辦公室開發以為已經解決，但是還是會有特殊狀況事情我們待發現。\n
- #31: 8/20\n我們在哪邊測？\n
- #32: 8/20\n在這些環境下，幾乎跑了大台北，我們發現了很多不是預期中的狀況發生了。\n
- #33: 8/20\n在這些環境下，幾乎跑了大台北，我們發現了很多不是預期中的狀況發生了。\n
- #34: 8/20\n在這些環境下，幾乎跑了大台北，我們發現了很多不是預期中的狀況發生了。\n
- #35: 8/20\n在這些環境下，幾乎跑了大台北，我們發現了很多不是預期中的狀況發生了。\n
- #36: 8/20\n在這些環境下，幾乎跑了大台北，我們發現了很多不是預期中的狀況發生了。\n
- #37: 8/20\n在這些環境下，幾乎跑了大台北，我們發現了很多不是預期中的狀況發生了。\n
- #38: 8/20\n程式串接沒有 Bug，但是怎麼會出現這樣的資訊呢？無論如何，這是要解決的。\n
- #39: 8/20\n程式串接沒有 Bug，但是怎麼會出現這樣的資訊呢？無論如何，這是要解決的。\n
- #40: 8/20\n程式串接沒有 Bug，但是怎麼會出現這樣的資訊呢？無論如何，這是要解決的。\n
- #41: 8/20\n程式串接沒有 Bug，但是怎麼會出現這樣的資訊呢？無論如何，這是要解決的。\n
- #42: 8/20\n程式串接沒有 Bug，但是怎麼會出現這樣的資訊呢？無論如何，這是要解決的。\n
- #43: 8/20\n程式串接沒有 Bug，但是怎麼會出現這樣的資訊呢？無論如何，這是要解決的。\n
- #44: 9/20\n我們要探索品質，不要讓 APP 因為操作過承造成當掉跳掉，我們希望資料能夠合理正常的呈現，我們要修正這些意外中的事情。\n
- #45: 10/20\n當我們的努力到覺得差不多，可以見人的時候，我們的改善 UI 機會二出現了！\n
- #46: 10/20\n
- #47: 10/20\n
- #48: 10/20\n我要感謝 HPX 讀書會社群，這是我參加第二組時候閱讀的書，互動設計。這本書讓我學會很多這領域的知識。\n
- #49: 11/20\n花些時間來瞭解使用者，就能降低做出不被喜愛的使用者經驗，而讓我們可以有機會做出好的成果。\n
- #50: 11/20\n如果能越早做修正，成本會比較低之外，程式也比較好改\n
- #51: 我們讓使用者操作我們開發中的 APP，而我開發人員則站在旁邊安靜的觀察、安靜的紀錄。尤其身為開發人員看著使用者困惑的表情、驚奇的表情，這樣更能讓自己知道，開發貼近使用者的自我要求，是如此的重要。\n
- #52: 11/20\n這個過程我們是要反覆式的設計，做改善再做測試。\n
- #53: 11/20\n我們用什麼方法來花些時間來瞭解使用者呢？我們希望能降低做出不被喜愛的使用者經驗，而讓我們可以有機會做出好的成果。這 Lite version 也是參加互動設計讀書會學到，當初是由 Richard 出給我們該組的作業，我將這作業帶入到 Mobile 應用。\n
- #54: 12/20\n
- #55: \n
- #56: 12/20\n
- #57: 12/20\n
- #58: 13/20\n
- #59: 14/20\n
- #60: 14/20\n
- #61: 14/20\n
- #62: 12/20\n
- #63: 12/20\n
- #64: 12/20\n
- #65: 14/20\n
- #66: \n
- #67: 15/20\n
- #68: 15/20\n
- #69: 15/20\n樣式客戶非常的在意，要能 Follow 全球既有軟體的配色、色調。這邊沒啥空間可以商量。\n
- #70: 15/20\n樣式客戶非常的在意，要能 Follow 全球既有軟體的配色、色調。這邊沒啥空間可以商量。\n
- #71: 15/20\n對於資料呈現是否正確，顯現出來是否足夠，該顯示顯示、該隱藏的隱藏，最了解的是客戶，也由他們跟我們回報他們所發現。\n
- #72: 15/20\n對於資料呈現是否正確，顯現出來是否足夠，該顯示顯示、該隱藏的隱藏，最了解的是客戶，也由他們跟我們回報他們所發現。\n
- #73: 16/20\n
- #74: 16/20\n豐富九宮格的首頁、支援使用者登入帳號、使用者等待過程有提醒\n
- #75: 16/20\n豐富九宮格的首頁、支援使用者登入帳號、使用者等待過程有提醒\n
- #76: 16/20\n豐富九宮格的首頁、支援使用者登入帳號、使用者等待過程有提醒\n
- #77: 16/20\n跨區域查詢、房屋豐富資訊列表、地圖找房屋\n
- #78: 16/20\n跨區域查詢、房屋豐富資訊列表、地圖找房屋\n
- #79: 16/20\n跨區域查詢、房屋豐富資訊列表、地圖找房屋\n
- #80: 16/20\n多了達人積分功能、看地理位置、附近街景\n
- #81: 16/20\n多了達人積分功能、看地理位置、附近街景\n
- #82: 16/20\n多了達人積分功能、看地理位置、附近街景\n
- #83: 16/20\n觀看房屋內部格局、照片總攬、喜歡可以分享出去，或者選擇推薦。\n
- #84: 16/20\n觀看房屋內部格局、照片總攬、喜歡可以分享出去，或者選擇推薦。\n
- #85: 16/20\n觀看房屋內部格局、照片總攬、喜歡可以分享出去，或者選擇推薦。\n
- #86: 16/20\n可以找到附近分店、看哪個分店最靠近、看距離想看房屋路程大概多近多遠、可以看方位找方向。\n
- #87: 16/20\n可以找到附近分店、看哪個分店最靠近、看距離想看房屋路程大概多近多遠、可以看方位找方向。\n
- #88: 16/20\n可以找到附近分店、看哪個分店最靠近、看距離想看房屋路程大概多近多遠、可以看方位找方向。\n
- #89: 16/20\n可以找到附近分店、看哪個分店最靠近、看距離想看房屋路程大概多近多遠、可以看方位找方向。\n
- #90: 16/20\n看看達人排行榜、看看個人收藏好屋\n
- #91: 16/20\n看看達人排行榜、看看個人收藏好屋\n
- #92: 16/20\n看看成交行情、試算自己貸款與攤還方式、貼心功能設定\n
- #93: 16/20\n看看成交行情、試算自己貸款與攤還方式、貼心功能設定\n
- #94: 16/20\n看看成交行情、試算自己貸款與攤還方式、貼心功能設定\n
- #95: 16/20\n
- #96: 16/20\n東森新聞報導\n
- #97: 16/20\n客戶為 iPhone app 操作影片\n
- #98: 17/20\n最後我要跟大家分享這段歷程的使命感怎麼來！\n
- #99: 17/20\n
- #100: 17/20\n因為這個問題存在，所以我要用我的長才，來提供解決辦法\n
- #101: 17/20\n
- #102: 17/20\n
- #103: 17/20\n
- #104: 18/20\n
- #105: 19/20 最後，我要謝謝 Polydice，也要謝謝 HPX 和網站企劃讀書會社群\n