Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
5 分鐘與我一起探索最佳的搜尋體驗
Search
shiningjason1989
October 17, 2018
Design
1
47
5 分鐘與我一起探索最佳的搜尋體驗
shiningjason1989
October 17, 2018
Tweet
Share
More Decks by shiningjason1989
See All by shiningjason1989
I want to be a web guitar player
shiningjason1989
0
220
PikaPika
shiningjason1989
2
780
前端之今天的我,未來的我們
shiningjason1989
0
240
深入淺出 Redux
shiningjason1989
2
12k
Progressive Web App 之是否是我的未來
shiningjason1989
4
1.5k
Flux 角色詳解
shiningjason1989
4
9.3k
Flux 流程詳解
shiningjason1989
2
9.1k
如何打造一個百人 stars 的 React Native 元件
shiningjason1989
1
260
前端魔法師召集令
shiningjason1989
1
240
Other Decks in Design
See All in Design
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
300
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
22
7.6k
デザインテクノロジストが先導する プロダクト開発の世界
degudegu2510
0
350
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
3.7k
Apple提供アプリのナビゲーションバーアイテムクイズ / 20231110-hig
uhooi
1
170
新しい資産運用サービスALTERNA(オルタナ)の伝え方の工夫
layerx
PRO
0
910
20231122_Design Leader Impact Award_Presentation_FAKE Okazaki
okazakityo
1
240
3D空間を扱うUI表現とユーザビリティ
akinen
0
440
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
yasuhiroyokota
2
1.2k
Ride or Die Animatics
warwatkar
0
140
JBUG東京#22登壇資料_日頃クライアントワークを行っているディレクターが自社コーポレートサイトリニューアルを担当して学んだこと
webnaut
0
170
LT:11年前の「ここにいる」の話 #fukuoka_a11yconf_前夜祭
garyuten
0
110
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
219
21k
Pencils Down: Stop Designing & Start Developing
hursman
116
11k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
10
4.6k
The Power of CSS Pseudo Elements
geoffreycrofte
58
5k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Unsuck your backbone
ammeep
662
57k
Happy Clients
brianwarren
91
6.4k
Building Applications with DynamoDB
mza
88
5.6k
Writing Fast Ruby
sferik
619
60k
Building Your Own Lightsaber
phodgson
97
5.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
29
6k
Transcript
5 分鐘 與我⼀一起探索 「最佳的搜尋體驗」
00:00
前 30 秒:
前 30 秒: 1. 我是誰
前 30 秒: 1. 我是誰 2. 你們會聽到什什麼
前 30 秒: 1. 我是誰 2. 你們會聽到什什麼 3. 我希望你們帶走什什麼
Jason
Jason 前端⼯工程師
Jason 前端⼯工程師 Positive Grid
Jason 前端⼯工程師 Positive Grid ⼀一家服務吉他⼿手的產品公司
Jason 前端⼯工程師 Positive Grid ⼀一家服務吉他⼿手的產品公司 雜食性的⼯工作者
Jason 前端⼯工程師 Positive Grid ⼀一家服務吉他⼿手的產品公司 雜食性的⼯工作者 UI/UX 設計 ⽤用⼾戶測試研究 ⽤用⼾戶訪談
內容運營 產品運營 專案管理理
Jason 前端⼯工程師 Positive Grid ⼀一家服務吉他⼿手的產品公司 雜食性的⼯工作者 UI/UX 設計 ⽤用⼾戶測試研究 ⽤用⼾戶訪談
內容運營 產品運營 專案管理理 團隊缺什什麼 我就做什什麼
Jason
Jason 做出有⼈人會⽤用 也養得飽 10 個⾃自⼰己的產品
接下來來 4 分鐘 你們會聽到什什麼?
你們會跟我⼀一起探索 如何設計⼀一個好的“搜尋框”
最後 我希望讓你們帶走什什麼?
我希望藉由這次的體驗 讓我們了了解“同理理⼼心”的重要
00:30
在設計⼀一個好的搜尋框前 我想先問你們 4 個問題
因為時間非常緊迫 希望你們可以跟上速度 ⽤用第⼀一直覺回答問題
第⼀一題 你們家的產品有搜尋框嗎?
第⼆二題 如果有,它長什什麼樣⼦子呢? 如果沒有,為什什麼呢?
第三題 如果你是設計師,你曾經設計過搜尋框嗎? 如果你是⼯工程師,你曾經時做過搜尋框嗎?
最後⼀一題 如果你是設計師,⽽而且你有設計過搜尋框, 你給的設計稿是什什麼樣⼦子呢? 如果你是⼯工程師,⽽而且你曾經實作過搜尋框, 你拿到的設計稿⼜又是什什麼樣⼦子呢?
這是我曾經拿到的設計稿 相信⼤大家都不陌⽣生
01:00
剛剛是前⾔言,接下來來⼀一分鐘 讓我們⼀一起思考 如何設計⼀一個“搜尋框”
搜尋框有哪些元件?
搜尋框有哪些元件?
如果你要解決的搜尋需求 是跨裝置,包含 Desktop 和 Mobile 的話
第⼀一個同理理⼼心⼩小練習: 如果你是設計師, 你覺得⼯工程師需要什什麼樣的資訊才能完成? 如果你是⼯工程師, 你覺得設計師提供給你的設計資訊⾜足夠嗎?
現在我需要你們 跟我⼀一起想⼀一個問題 Desktop 和 Mobile 上的 搜尋框使⽤用情境是⼀一樣的嗎?
因為接下來來 我提供給你們的資訊都是主觀的 所以我需要你們跟我⼀一起想 什什麼才是最好的搜尋框⽤用⼾戶體驗
02:00
讓我們換位思考,⾓角⾊色扮演 今天,你是⼀一個 Spotify 的⽤用⼾戶 你需要找⼀一⾸首歌
如果你⽤用的是桌上型的 Spotify...
那麼,我們可以設計成什什麼樣呢?
如果你⽤用的是⼿手機中的 Spotify...
那麼,我們可以設計成什什麼樣呢?
03:00
如果你剛剛的設計跟我的想法⼀一致 那麼要怎麼實作呢?
isMobileOrTablet hideClearButtonInDesktop desktop: onclick=selectAllText mobile: onclick=focusOnEndOfText
所以實作上是可以辦到的 但是 我們這樣做的⽬目的是什什麽?
Progressive Web App 結合多項網⾴頁新技術 讓網路路應⽤用在安全、性能和體驗上⾯面 都有全⾯面的升級
Progressive Web App 結合多項網⾴頁新技術 讓網路路應⽤用在安全、性能和體驗上⾯面 都有全⾯面的升級
所以 如果你想給⽤用⼾戶最好的體驗 這些枝微末節在團隊有時間的時候 都可以花點⼼心⼒力力在這裡
04:00
你遇到的搜尋框有沒有更更複雜的需求?
“建議搜尋”⼜又該怎麼做呢?
桌上型的 Chrome
⼿手機中的 Chrome
⼿手機中的 KKBOX
Dieter Rams 10 Principles of Design 1. Good design is
unobtrusive 2. Good design is thorough down to the last detail 3. …
有些好設計 你可能感覺不到它的好和壞 但是你常常⽤用它
04:30
最後 30 秒
你們看過 Tedx Talks 中 Simon Sinek How great leaders inspire
action? 這部影片嗎?
Why, How, What
這部影片給我的幫助很⼤大 讓我不論溝通或思考都遵循著 Why, How, What 這個順序
但是 我們剛剛談到了了How ⼀一開始談到了了 what 其實我們是倒敘著來來的
現在讓我們拉遠⼀一點看“搜尋框” 我們剛剛討論了了 UI/UX/前端實作 現在我們從產品設計層⾯面去看
我們真的需要⽤用到搜尋框? 為什什麼需要? ⽤用⼾戶需要⽤用到嗎? 為什什麼⽤用⼾戶會需要⽤用到?
我們真的需要⽤用到搜尋框?
我們真的需要⽤用到搜尋框? 為什什麼需要?
我們真的需要⽤用到搜尋框? 為什什麼需要? ⽤用⼾戶需要⽤用到嗎?
我們真的需要⽤用到搜尋框? 為什什麼需要? ⽤用⼾戶需要⽤用到嗎? 為什什麼⽤用⼾戶會需要⽤用到?
因為⽤用⼾戶需要找到對他有價值的內容?
不過,請⼤大家仔細想想 你平常會在什什麼時候⽤用到搜尋框? 在⼿手機上會常⽤用到嗎?
假設你想到了了,那 它的設計是什什麼? 它有哪些功能?
因為常在移動情境中使⽤用⼿手機 在⼿手機上很難打字 像我就⼿手殘 所以⼿手機上的搜尋框使⽤用機率 真的是微乎其微
所以在⼿手機上很多搜尋框 會設計成這個樣⼦子
None
None
或是甚⾄至沒有搜尋框
以前是⼈人找內容,現在是內容找⼈人
根據機器學習或是好友推薦等 讓⽤用⼾戶找到有價值的內容
根據機器學習或是好友推薦等 讓⽤用⼾戶找到有價值的內容
04:50
最後 前⾯面分享的都是我主觀的想法
最好的搜尋框長什什麼樣⼦子 在這個 talk 中也不是最重要的
我希望可以給⼤大家帶走的是 ⽤用同理理⼼心去設計,多問為什什麼 然後期待⼤大家都能看到問題的本質 且做出有⼈人⽤用還可以養活 10 個⾃自⼰己的產品
5 分鐘 與我⼀一起體會 「同理理⼼心的重要性」