上一篇文章主要講的是體驗好巧網(wǎng)的功能流程,這一篇,主要是從好巧網(wǎng)身上來學(xué)習(xí)優(yōu)秀的產(chǎn)品交互.作為一款讓用戶感覺順暢的產(chǎn)品,他的交互肯定有很多值得我學(xué)習(xí)。我不是一個專業(yè)的交互設(shè)計師。但是,作為一名產(chǎn)品經(jīng)理,目前我對交互有這樣的一個簡樸的觀點。【反饋】，反饋這一點是我覺得的交互最關(guān)鍵的一個點。如果大伙有不一樣的想法，歡迎隨時交流呀~
從好巧網(wǎng)的首頁布局上說起。上次說到好巧網(wǎng)的首頁布局，其突出了搜索框，其他內(nèi)容基本都覆蓋住了，用戶需要往下拉才能看到更多的內(nèi)容。從這一點來看，產(chǎn)品的設(shè)計和交互首先要滿足的是產(chǎn)品面對的客戶本身的需求，想清楚你的產(chǎn)品需要展示給用戶什么內(nèi)容，再根據(jù)內(nèi)容來進行布局。
搜索的二級頁面的交互體驗
二級頁面還是常見的卡片設(shè)計，但從圖片中可以明顯的看到其中的交互細節(jié)，鼠標移動到這個卡片時，卡片會微微浮起，突出展現(xiàn)。其次，鼠標移動到卡片內(nèi)容時，卡片內(nèi)容的文字會由灰色變黑色。這就是兩點交互，帶來了明顯的用戶反饋，效果非常不錯。學(xué)習(xí)。
在三級搜索的第一個頁面，第一點展示的還是位置搜索，把關(guān)于酒店位置的內(nèi)容和酒店特色突出說明。這也是服務(wù)于需求。
而在搜索模塊的內(nèi)容展現(xiàn)，有幾點做得不足：1、彈框頁面的關(guān)閉按鈕顏色不突出，盡管視覺不錯，但引導(dǎo)性大大減弱；2、鼠標移入按鈕的時候，按鈕顏色沒有發(fā)生明顯的變化，反饋并不足夠。
今天關(guān)于彈框關(guān)閉的這個話題，我和在搞火鍋的朋友杰兄聊了一下。因為彈框蓋掉了搜索的整片內(nèi)容，且關(guān)閉按鈕極其不明顯，所以我對這個彈框提了一點改善建議，【鼠標移出彈框】頁面后能夠自動關(guān)閉彈框。但杰兄指出了我考慮不足的地方，如果用戶不小心滑出了彈框頁面，這種體驗不會更加差嗎？其認為最好的方式是通過【鼠標點擊】頁面來關(guān)閉這個彈框，于是，他在彈框外隨便點擊了頁面，彈框果然就自動關(guān)掉了，好巧網(wǎng)的產(chǎn)品經(jīng)理已經(jīng)考量到這點了。學(xué)習(xí)。
從【鼠標移出關(guān)閉彈框】還是【鼠標點擊其他頁面關(guān)閉彈框】這個的討論中，又一次提醒我這樣一個方法論。遇到一個不爽的問題，提出一個解決方案，再想想解決方案可能帶來的問題。這樣對一個問題的考量就會更加全面了。是的，我在這一點還需要改進，再多問自己一個【解決方案可能帶來的問題】，這樣考量產(chǎn)品就會更加全面，值得深深的記在內(nèi)心里。“做什么”“為什么做”“做之后會帶來什么結(jié)果”。
同樣的，我這個時候又有一個問題：“為什么我會下意識的認為這個彈框除了點擊關(guān)閉按鈕，否則無法關(guān)閉？”。思考過后，我認為導(dǎo)致我出現(xiàn)這個問題的原因是：
- 這個彈框的關(guān)閉和用戶常有的點擊關(guān)閉按鈕以及移出鼠標關(guān)頁面的習(xí)慣是不符合的；
- 處于這樣一個用戶場景，當用戶往下拉查看其它搜索內(nèi)容，或者鼠標長時間停留在外面時，彈框頁面是沒有關(guān)閉的。
所以這里有幾種解決方案。
- 保留【鼠標點擊彈框之外頁面關(guān)閉彈框】，在運營上增加一個用戶操作的引導(dǎo)頁面。但從收益上來說，又要增加一個頁面引導(dǎo)的成本。如果不加，用戶的交互體驗就不會那么極致。盡管每個操作都嘗試讓用戶Don't make me think,但這樣一個點擊關(guān)閉操作是增加用戶學(xué)習(xí)成本的。
- 保留【鼠標點擊彈框之外頁面關(guān)閉彈框】，鼠標移出彈框外3秒后自動關(guān)閉彈框/鼠標做下拉操作超過彈框時，自動關(guān)閉彈框。關(guān)于第二種方式，難點就在于幾秒時間關(guān)閉，下拉多深關(guān)閉。這又是需要通過數(shù)據(jù)進行微調(diào)的事情，增加成本的事情。
- 第三種方案，我認為是最省成本，最有效果的方案，就是在灰色的關(guān)閉按鈕外加個紅色外環(huán)。所有之前產(chǎn)生的問題都解決了。
從這個范例中，我學(xué)到的是，不要為了追求頁面效果而忘記交互體驗。
從這個圖片展示中，我覺得是足夠了，盡管有的人認為占滿上半屏幕效果會更好。但這里要考慮兩個因素：1、酒店上傳的圖片大小不一如何解決；2、圖片占用面積過多是否會影響網(wǎng)頁的加載。實際上，我是覺得以創(chuàng)業(yè)公司的資源來說，這樣子已經(jīng)達到主要目的了，而且展示效果也是不錯的，有種看老膠片的感覺有沒有？！
還有一點，就是關(guān)于文字排版的，文字多了，可能會覆蓋掉其他鏈接。這又是好巧網(wǎng)沒有考慮到的。事實上，要是我，我會考慮到這樣的細節(jié)嗎？我的答案是很可能不會。但這一點在提醒我，細節(jié)，細節(jié)。
總結(jié)：從這次的分析當中，有以下幾點值得重視：
1、針對用戶的頁面【反饋】是最需要琢磨的，也是交互的開始。PS:如果我是錯的，請與我討論。
2、產(chǎn)品的內(nèi)容展現(xiàn)要符合用戶的需求；
3、更全面的考量產(chǎn)品，考慮產(chǎn)品的交互，想清楚【做什么】【為什么這樣做】【這樣做會帶來什么結(jié)果】，這種思維也是產(chǎn)品經(jīng)理思維合格的最基本的考核標準。
4、不要為了追求頁面的展示效果而忘記交互，這樣往往會帶來更多的成本。Don't make me think.
5、收益，是公司和產(chǎn)品經(jīng)理都要考慮的一件事情，他會直接的體現(xiàn)在產(chǎn)品的抓大放小上。
PS:允許非商業(yè)性轉(zhuǎn)載,轉(zhuǎn)載請注明出處,謝謝.
============================================
這里只求真，沒有真理。
個人獨立博客：PMFuner.com
記錄一個不懼撞南墻的野路子產(chǎn)品經(jīng)理的故事.
期待分享和交流~
