關於電子商務網站 UIUX 二三事

操作流程概念化,其實依據品牌定位,有些通則不一定適用,但是使用者優先是要無時無刻記在心裡

以行動裝置為第一優先

無論工程師或是設計師 千萬不能陷入專家陷阱,因為每個人的心智模式不一樣, 只須記住一件事情,以使用者意見為中心,來評估優化事項

  • 主要點擊區範圍應擴大
  • 手機menu可以滿版
  • 商品照片一定要用清晰的畫素
  • 無連結地方可以不用做滑鼠效果
  • 首頁的商品建議加入價錢 得到的反饋是:不一定 如果網站是走高價位,顯示價錢無意義

社群連結不用太大按鈕

可透過ga分析 是否有些區塊 很少人點擊 根據數據統計,僅有0.2%的顧客會願意分享,但增加分享按鈕卻會降低您的頁面速度,在現在使用者普遍耐心不足的狀態下,或許省略分享按鈕是個更棒的選擇。

排版簡單 清晰

  • 視覺表現應統一
  • 選單顏色太多 視覺雜亂
  • 手機模式 點擊部分需要多點空間
  • 顏色選單建議可控制在三個顏色以內 一旦將網站的顏色框定在簡單的配色方案之中,那麼就會留給內容更大的發揮空間。

讓客戶分心的地方不要太多

  • 彈出窗口的必要性
  • 找不到自己的位置
  • 跟商品無關的blog/連結必要性

在介面上整合相似的功能,避免版面破碎化

  • 設計師常因無心而設計出多欄位卻又相似的元素或功能,在頁面上就會顯得多餘甚至混淆影響使用者的操作。

讓社群來證明您的價值,而非老王賣瓜

  • 利用社群的力量來幫助你說服客戶是相當聰明的策略,且可有效的提高轉換率。用戶看到別人的認可,或是討論你的產品服務時,會加強他們想要了解或使用的動機,所以試著把使用者的推薦文或是數據證明放在網站上吧!

讓可點擊和可選擇之元件的樣式有所差異,避免混淆

應用視覺元素之手法可以幫助使用者了解介面上的功能與結構,例如顏色、深度與對比度等。同時為了與你的使用者精準的溝通,需點擊的行為(如連結或按鈕)與需選擇的元件(如選單)設計上要有所區別,同時上方的文字必須描述清楚,才有利使用者辨別。

別讓使用者填太多表單

人類天生不喜歡麻煩的事物,就如同大家不喜歡在網站上填寫太多的表單。每新增一項必填欄位,訪客放棄填寫的風險就越高。此外,並非所有人打字都相當快,而且在移動裝置上輸入簡直就是件苦差事。所以盡可能的只留必要欄位,不那麼重要的就不要讓使用者填了。但如果你真的有非常多必填欄位,可以試看看將第二重要的資訊在提交第一重要的資訊後,出現於單獨的頁面上,請使用者繼續填寫。

避免讓使用者產生已經滾到 “網頁最底部” 的錯覺

沒錯,長型的滾動頁面的設計相當符合人性,但要小心訪客可能會因為設計不良而產生“已經滾到最底部”的錯覺,這會大大的降低轉換率。

你可以透過視覺化的圖標或是小動畫,來告知或暗示使用者:網頁還沒置底,你們還可以繼續往下閱讀。另外,設計時也需小心各主題之間留白區域的尺寸,因為過大也會讓人產生底下無資訊的想法。

以聚焦手法吸引使用者的目光,效果大於頁面上滿滿的連結

我們常會在頁面上留下許多”連結”,目的在於可以滿足使用者可能的所有需求(例如可了解更多)。不過,假如你的目的是讓使用者捲到頁面底部時,採取你期待他們做的動作,那你必須思考上述的做法是否恰當。因為在中間安插任何連結都可能導致使用者分心而忽視了你最希望他們做的事情,所以放置連結,其數量與位置都要取得平衡。怎麼取得平衡必須仰賴大家的經驗,不過至少我們知道減少多餘的連結,可增加使用者注意到你”最重要動作 (可能是按鈕)”的機會。

直接操作比多階層下拉式選單 (contextless menus) 來的直覺

針對介面上的元素直接操作有時比整合的操作工具列還要來的方便直覺。如下圖,若各項目皆有一些可以讓使用者操作的功能,我們可以藉由點擊或鼠標覆蓋的方式來呈現一些功能或進行操作(如刪除或重新命名等)。另外還有一種常見的操作方式,就是點擊項目後,該項目會轉變為可編輯的狀態。

然而,多階層下拉式選單(context of button)十分常見,但過多的階層可能會增加操作的步驟,所以下次設計時不妨考慮減少階層或直接操作的方法。

當下就可以操作,何必再多開分頁

當頁面上有一些我們期望使用者做,並會帶來價值的功能時(例如留下聯絡方式),最好可將實際的表單或欄位放置於本頁上。如下圖,欄位若能與頁面整合在同一層,其帶來的好處大於還要連結至別頁輸入的方式。

那我們該怎麼做呢?首先,必須精簡流程的步驟,盡可能的讓使用者花最少的時間。接著,將精簡化的表單或欄位放置於該頁面上,除了可讓使用者直接操作外,使用者也可藉此預估完成所需的時間,這樣他們進行操作的意願會更高。

comments powered by Disqus