5 分鐘與我一起探索最佳的搜尋體驗

Transcript

1. 5 分鐘 與我⼀一起探索 「最佳的搜尋體驗」
2. 00:00
3. 前 30 秒：
4. 前 30 秒： 1. 我是誰
5. 前 30 秒： 1. 我是誰 2. 你們會聽到什什麼
6. 前 30 秒： 1. 我是誰 2. 你們會聽到什什麼 3. 我希望你們帶走什什麼
7. Jason
8. Jason 前端⼯工程師
9. Jason 前端⼯工程師 Positive Grid
10. Jason 前端⼯工程師 Positive Grid ⼀一家服務吉他⼿手的產品公司
11. Jason 前端⼯工程師 Positive Grid ⼀一家服務吉他⼿手的產品公司 雜食性的⼯工作者
12. Jason 前端⼯工程師 Positive Grid ⼀一家服務吉他⼿手的產品公司 雜食性的⼯工作者 UI/UX 設計 ⽤用⼾戶測試研究 ⽤用⼾戶訪談 內容運營 產品運營 專案管理理
13. Jason 前端⼯工程師 Positive Grid ⼀一家服務吉他⼿手的產品公司 雜食性的⼯工作者 UI/UX 設計 ⽤用⼾戶測試研究 ⽤用⼾戶訪談 內容運營 產品運營 專案管理理 團隊缺什什麼
 我就做什什麼
14. Jason
15. Jason 做出有⼈人會⽤用 也養得飽 10 個⾃自⼰己的產品
16. 接下來來 4 分鐘 你們會聽到什什麼？
17. 你們會跟我⼀一起探索 如何設計⼀一個好的“搜尋框”
18. 最後 我希望讓你們帶走什什麼？
19. 我希望藉由這次的體驗 讓我們了了解“同理理⼼心”的重要
20. 00:30
21. 在設計⼀一個好的搜尋框前 我想先問你們 4 個問題
22. 因為時間非常緊迫 希望你們可以跟上速度 ⽤用第⼀一直覺回答問題
23. 第⼀一題 你們家的產品有搜尋框嗎？
24. 第⼆二題 如果有，它長什什麼樣⼦子呢？ 如果沒有，為什什麼呢？
25. 第三題 如果你是設計師，你曾經設計過搜尋框嗎？ 如果你是⼯工程師，你曾經時做過搜尋框嗎？
26. 最後⼀一題 如果你是設計師，⽽而且你有設計過搜尋框， 你給的設計稿是什什麼樣⼦子呢？ 如果你是⼯工程師，⽽而且你曾經實作過搜尋框， 你拿到的設計稿⼜又是什什麼樣⼦子呢？
27. 這是我曾經拿到的設計稿 相信⼤大家都不陌⽣生
28. 01:00
29. 剛剛是前⾔言，接下來來⼀一分鐘 讓我們⼀一起思考 如何設計⼀一個“搜尋框”
30. 搜尋框有哪些元件？
31. 搜尋框有哪些元件？
32. 如果你要解決的搜尋需求 是跨裝置，包含 Desktop 和 Mobile 的話
33. 第⼀一個同理理⼼心⼩小練習： 如果你是設計師， 你覺得⼯工程師需要什什麼樣的資訊才能完成？
 如果你是⼯工程師， 你覺得設計師提供給你的設計資訊⾜足夠嗎？
34. 現在我需要你們 跟我⼀一起想⼀一個問題 Desktop 和 Mobile 上的 搜尋框使⽤用情境是⼀一樣的嗎？
35. 因為接下來來 我提供給你們的資訊都是主觀的
 所以我需要你們跟我⼀一起想 什什麼才是最好的搜尋框⽤用⼾戶體驗
36. 02:00
37. 讓我們換位思考，⾓角⾊色扮演 今天，你是⼀一個 Spotify 的⽤用⼾戶 你需要找⼀一⾸首歌
38. 如果你⽤用的是桌上型的 Spotify...
39. 那麼，我們可以設計成什什麼樣呢？
40. 如果你⽤用的是⼿手機中的 Spotify...
41. 那麼，我們可以設計成什什麼樣呢？
42. 03:00
43. 如果你剛剛的設計跟我的想法⼀一致 那麼要怎麼實作呢？
44. isMobileOrTablet hideClearButtonInDesktop desktop: onclick=selectAllText mobile: onclick=focusOnEndOfText
45. 所以實作上是可以辦到的 但是 我們這樣做的⽬目的是什什麽？
46. Progressive Web App 結合多項網⾴頁新技術 讓網路路應⽤用在安全、性能和體驗上⾯面 都有全⾯面的升級
47. Progressive Web App 結合多項網⾴頁新技術 讓網路路應⽤用在安全、性能和體驗上⾯面 都有全⾯面的升級
48. 所以 如果你想給⽤用⼾戶最好的體驗 這些枝微末節在團隊有時間的時候 都可以花點⼼心⼒力力在這裡
49. 04:00
50. 你遇到的搜尋框有沒有更更複雜的需求？
51. “建議搜尋”⼜又該怎麼做呢？
52. 桌上型的 Chrome
53. ⼿手機中的 Chrome
54. ⼿手機中的 KKBOX
55. Dieter Rams 10 Principles of Design 1. Good design is unobtrusive 2. Good design is thorough down to the last detail 3. …
56. 有些好設計 你可能感覺不到它的好和壞 但是你常常⽤用它
57. 04:30
58. 最後 30 秒
59. 你們看過 Tedx Talks 中
 Simon Sinek How great leaders inspire action？ 這部影片嗎？
60. Why, How, What
61. 這部影片給我的幫助很⼤大 讓我不論溝通或思考都遵循著
 Why, How, What 這個順序
62. 但是 我們剛剛談到了了How ⼀一開始談到了了 what 其實我們是倒敘著來來的
63. 現在讓我們拉遠⼀一點看“搜尋框” 我們剛剛討論了了 UI/UX/前端實作 現在我們從產品設計層⾯面去看
64. 我們真的需要⽤用到搜尋框？ 為什什麼需要？ ⽤用⼾戶需要⽤用到嗎？ 為什什麼⽤用⼾戶會需要⽤用到？
65. 我們真的需要⽤用到搜尋框？
66. 我們真的需要⽤用到搜尋框？ 為什什麼需要？
67. 我們真的需要⽤用到搜尋框？ 為什什麼需要？ ⽤用⼾戶需要⽤用到嗎？
68. 我們真的需要⽤用到搜尋框？ 為什什麼需要？ ⽤用⼾戶需要⽤用到嗎？ 為什什麼⽤用⼾戶會需要⽤用到？
69. 因為⽤用⼾戶需要找到對他有價值的內容？
70. 不過，請⼤大家仔細想想
 你平常會在什什麼時候⽤用到搜尋框？ 在⼿手機上會常⽤用到嗎？
71. 假設你想到了了，那 它的設計是什什麼？ 它有哪些功能？
72. 因為常在移動情境中使⽤用⼿手機 在⼿手機上很難打字 像我就⼿手殘 所以⼿手機上的搜尋框使⽤用機率 真的是微乎其微
73. 所以在⼿手機上很多搜尋框 會設計成這個樣⼦子
76. 或是甚⾄至沒有搜尋框
77. 以前是⼈人找內容，現在是內容找⼈人
78. 根據機器學習或是好友推薦等 讓⽤用⼾戶找到有價值的內容
79. 根據機器學習或是好友推薦等 讓⽤用⼾戶找到有價值的內容
80. 04:50
81. 最後 前⾯面分享的都是我主觀的想法
82. 最好的搜尋框長什什麼樣⼦子
 在這個 talk 中也不是最重要的
83. 我希望可以給⼤大家帶走的是 ⽤用同理理⼼心去設計，多問為什什麼
 然後期待⼤大家都能看到問題的本質 且做出有⼈人⽤用還可以養活 10 個⾃自⼰己的產品
84. 5 分鐘 與我⼀一起體會 「同理理⼼心的重要性」