細節思考交互設計之浮動條
-顧名思義,浮動條是在頁面沿一定軌跡浮動的表現形式。
不再固定在某一指定位置,而是隨鼠標拖動而動,巧妙的設計會使得在不妨礙網友瀏覽的同時,滿足其增加曝光率的需求。其特殊的表現形式與傳統的形式相比更能聚集網絡訪客的眼球,使得其影響力更深三尺。但是過度的曝光不加思考的一味所有頁面都用浮動條或者疊加大量功能入口,有可能造成用戶使用上的視覺干擾和產生厭煩的心理。
可用于浮動條上的功能主要有:回到頂部、在線客服、用戶反饋/調查問卷、分享
- 回到頂部可以幫助訪客在瀏覽頁面時,尤其是頁面底部沒有導航的網頁,重新找到導航,或者重溫一遍網頁。主要用于頁面比較長,需要回到頂部進行一些操作。
- 在線客服是基于網頁的即時通訊工具,它不需要安裝任何軟件,只需要在瀏覽器窗口就可以進行實時交談。常出現在用戶在流程中比較容易產生疑問的頁面。
- 用戶反饋/調查問卷是想傾聽用戶對網站或業務的想法和期望,使用這些信息來改善最常使用的產品和服務,解決用戶在使用中的問題,更優化的實現用戶期望。用于新業務上線,改版,AB testing…
- 分享功能使瀏覽者可以方便的將網頁分享到一系列SNS站點。通過分享按鈕,網頁將更容易被百度搜索引擎所發現,從而有機會帶回更多的流量。同時也可以增加互動,拉近網民與網站的距離。常出現在活動頁面,產品詳情頁,特色版塊等。
綜合攜程網站現狀,我的建議是:
全站首頁和機票、酒店、高鐵頻道首頁都比較短,內容較密集。用戶還在建立網站印象階段。不建議放任何浮層。
度假的首頁及二級頁面都比較長,且底部也無導航。建議增加“回到頂部”,可以幫助用戶瀏覽。
惠選、團購等攜程的活動版塊及特色產品。建議增加“分享按鈕”,吸引用戶,增加網站流量。
預訂流程中各個功能的使用大致如下圖:
我個人比較贊同的浮層設計是全站統一,局部變化。不要各個頁面都雜亂無章,也不要完全一味的追求所有頁面功能設計一模一樣。
綜合研究發現,我定義的浮層規則是:
- 回到頂部
業務相關頁面:當業務相關的版塊頁面長度超過兩屏,則顯示浮層。
流程相關頁面:需要用戶回到頁首進行操作功能的,頁面長度超過兩屏的,顯示浮層。
- 在線客服
業務相關頁面:當特色業務相關的版塊上線時,用戶需要培養習慣時,則顯示。
流程相關頁面:用戶在操作過程中容易產生疑惑,錯誤的頁面,顯示。
- 用戶反饋/調查問卷
業務相關頁面:當特色業務相關的版塊上線、改版時,則顯示。
流程相關頁面:需要用戶進行復雜操作過程的頁面,顯示。
- 分享
業務相關頁面:特色業務版塊、具體的產品、網站促銷活動時,則顯示。
流程相關頁面:不需要。
- ????補充規則(也是我認為最重要的一點):
整個浮層功能不能影響用戶的正常瀏覽習慣。
轉自攜程UED
評論
師妹寫了好多文哪,厲害!
師妹,不容易啊。