天天看點

移動網頁設計9大原則——第1部分

有了谷歌的移動友好算法,你或許以為當代的所有網頁都具備移動相容性。但實際情況卻是:近50%的市場營銷者沒有将網頁優化使之相容移動裝置,雖然這些網站的搜尋流量和排名都在增長。導緻這種現象的原因是什麼呢?是因為移動友好算法的影響不足以促進網頁重新設計?還是移動網頁并沒有給這些網站帶來使用者?

這些資料對于我們了解移動使用者的行為十分重要,不容小觑。因為移動裝置的螢幕較小,而使用者通常在忙碌的情況下使用移動裝置,是以他們更偏向于完整清晰顯示的網站。如果使用者無法快速從某個網站上擷取所需資訊,他們就會轉向另一個網站。這就意味着,網站必須迅速向使用者提供他們所查找的資訊,一刻也不能耽誤。

基于這一點,許多網頁設計者在搭建網站時,會遵循移動第一的原則,確定網頁加載時間短,圖表數量少,或者内容大小适中,不需要使用者去放大縮小。如果你的網頁還不相容移動裝置,别驚慌,改造網頁使其符合響應性設計,或另外設計移動版網頁并沒有你想的那麼複雜。現在已經有許多網站搭建平台可供使用,而且他們與舊網站使用的搭建平台類似。

無論你是否已經完全采用移動政策,還是仍然在尋找最佳方案,在設計移動網頁時,請牢記以下原則:

一般情況下,移動裝置或平闆電腦使用者不會滾動大型的菜單欄或點選數量衆多的子菜單,因為螢幕大小有限,無法顯示太多内容。菜單中必須包含簡練的産品和服務概述,使用者才能縮小他們的查找範圍,這一點很重要。這樣,使用者才能從簡潔明了的菜單欄中點選某個類别或利用搜尋功能進一步篩選。

移動網頁設計9大原則——第1部分

在這家餐廳的移動網頁上,企業标志下方有一個簡單的下拉式清單,展開後有5個選項。因為 “菜單”和“位置”按鈕已經在頁眉顯示,是以就不需要再放入清單。這樣的菜單欄雖然簡單,卻在網站前端和中心位置顯示了最重要的資訊。

當使用者通路餐廳的網站時,可能會檢視菜單、尋找餐廳位置,或者線上下單。carrabba’s的網站能讓使用者迅速快捷地完成以上所有事情,而不至于陷入滿是開胃菜、意大利面以及歡樂時光特惠的子菜單中。

當需要在網頁上填寫聯系資訊時,使用者可不想沒完沒了地填很多内容。他們往往傾向于台式電腦或筆記本,而不是移動裝置來完成此類操作。是以,在設計使用者資訊表單時,請省略掉不必要的字段。

如果聯系表單隻是用來訂閱電子報,那麼僅需登記使用者姓名和郵箱即可。即使是支付表單,也請将字段數減到最少。使用者明白線上購物需要填寫更多的資訊,但網頁設計者必須體諒使用者的時間,尤其是當網站的移動流量不斷增加時。

我們可以用a/b測試來決定表單的理想字段數,即每次改變或移除表單中的一個字段,然後評估表單的完成比例。比如,使用者更願意填寫無需登記電話号碼的表格,是以在測試時,比較一下有無該字段以及該字段為可選或必填項時的不同效果,然後将這些結果與實際獲得的投資回報率做對比,決定是否在表單中保留該字段。

萬事達卡(mastercard)在設計聯系表單時,就十分周到地考慮到了移動端使用者的時間。使用者在他們的網站上隻需填寫姓名、郵箱、主題和評論,就能與卡片的支援團隊取得聯系。這些資訊足以讓從業人員查詢到使用者的賬戶資訊,然後将使用者的需求轉給合适的支援部門,整個過程并不需要耗費太多時間。

移動網頁設計9大原則——第1部分

同時,表格中諸如電話号碼、卡片類型和發夾機構是可選項,使用者可根據自身情況選擇填寫。即使使用者不提供這些資訊,也不影響問題的解決和需求的滿足。使用者對于自己的财務資訊的保護意識非常強,是以請給他們一些空間,不僅要滿足使用者的需求,還要建立起他們對網站的信任。

除了要考慮到表單的字段數,還需要減少使用者輸入的字數。表單字段可以采用多種類型,如下拉式、複選框式以及月曆式。當使用者輸入支付資訊、物流資訊以及預訂行程時,這些類型的字段就能派得上用場。

同時,盡量将表單做得清晰明了,使必填項和可選項一目了然。讓回頭使用者更便捷地應用自動填寫功能,縮短購物的過程,并為那些不願新增賬號的新使用者提供訪客支付選項。

對于旅遊公司而言,利用簡潔的表單為潛在客戶提供便捷的搜尋是關鍵。全球最大的網絡旅遊公司expedia在這方面堪稱完美典範——網站上的按鈕一目了然,使用者搜尋時也隻需填寫很少的字段。

移動網頁設計9大原則——第1部分

當使用者在expedia的網站上查詢航班時,點選“出發城市”或“到達城市”按鈕,無需輸入完整的城市或機場名稱,隻需填寫城市或機場代碼,下拉框中就會出現建議位址以供選擇。而且網站上的月曆功能也比其它網站便捷許多——使用者可以在同一頁面上檢視月曆并選擇出發及到達日期。

行為召喚元件對任何網站設計而言都是必要的,在移動網頁中尤為重要。和電腦端使用者相比,移動端使用者通路網站的目的更加明确。是以在設計移動網頁時,盡可能将行為召喚元件放在最顯眼的黃金位置。

理想情況下,将行為召喚元件放置在頁眉上方,用突出的顔色或字型顯示,在合理的範圍内讓它們更加醒目,并清晰地表達其内容。後續的操作步驟則需要非常清晰,這樣使用者就不用花時間去考慮接下來應該做什麼。

棒約翰披薩(papa john’s)将假日促銷資訊放在網站上最有利的位置,鼓勵使用者線上訂餐時為家人或朋友挑選一份禮物。他們加粗了促銷資訊的文字部分,使其更加醒目,同時也與網站的整體色調及品牌風格相搭配。最重要的是,使用者明白點選行為召喚元件後将看到什麼。商家并沒有用華麗的辭藻和圖檔來迷惑使用者,使用者隻需迅速登入網站然後登出,就能立刻買到他們最愛的披薩。

移動網頁設計9大原則——第1部分