精彩內容

smart phone money
三月 10

拿起一張名片並且覆蓋你的手機,是不是把螢幕都遮住了呢?

目前市場上手機螢幕約為 4 ~ 5 吋,要將平常在電腦上操作的結帳頁面,呈現在一張名片大小的手機螢幕上,可是一個大挑戰!顯然,直接移植並不是最好的方式。受限於螢幕尺寸的緣故,手機上不容易呈現整個網頁的訊息,一張表格必須切割成許多小任務逐一完成,而當使用者填寫時,又必須喚醒螢幕鍵盤( Touch keyboard ),此時所能夠顯示的資訊就只剩下不到 50 % 了!

smart phone money

一個糟糕的介面,不只會讓使用者按下返回鍵離你而去,賣家也將錯失一筆寶貴的訂單,更糟的是,萬一消費者盛怒之下跳槽到別家平台業者,那可就傷腦筋了!因此每個手機介面設計者都該仔細思考,如和何將內容進行分類( Categorize ),並以最佳化( Optimize )體驗的形式呈現。

reBuzz 整理了 6 大付款頁面的設計法則,快來看看你是不是也遇到了同樣的問題!

  • 法則一:標題就是最好的說明書

千萬不要預設用戶會閱讀填寫說明!

當用戶輸入資料時,那些說明可能早已被拉到看不見的地方,因此欄位標籤必須做到所謂的情境獨立( Context – independent ),像是下圖的例子,這是某拍賣平台在電腦上付款頁面,最上層的「 Shipping Address 」 字樣顯而易見,然而當移植到手機時,使用者可能只看見空格上方的 「 Address 」,而忽略了最上方的說明,不知道應該填寫住家地址,還是商品寄送地址,以此例來說,開發者應該將欄位上方標籤改為「 商品寄送地址 」,而非只有「 地址 」二字。

擷取

另外,我們也很常見到許多網站上列著「 請輸入代碼 」的欄位,往往會讓使用者摸不著頭緒,其實只要簡單改成「 贈品認證碼 」、「 銀行驗證碼 」等,便不容易讓用戶造成誤解,可見得想要跳脫流程開發的思考框架,最好的方法還是把自己當成使用者多操作幾次!

  • 法則二:不必停下來思考的操作流程最誘人

大約有 60 % 的使用者曾在結帳過程中,發生不曉得如何接續下一步驟的狀況,漸進式揭露( Progressive disclosure )可以讓使用者以直覺方式操作,使用階層和巨集來簡化使用者所看到的資訊,讓他們一個頁面只需要選擇一次,並適時引導至下一步驟。

舉例來說,在選擇帳戶的頁面提供 3 種選項,分別為以遊客身分結帳、登入已建立帳戶及創建新帳戶,並且將需填寫內容分別收斂至 3 個選項中,當使用者點選後,才會連結到該內容,這種方式不但大大降低認知複雜度,即便是較年長者都可以輕易理解。

圖片1111

  • 法則三:不只實用,更要易用

所謂易用性就是一種以使用者為中心的設計概念,易用性的設計重點在於讓網頁操作能儘可能符合使用者的自然習慣與需求,付款流程的優劣同樣取決於頁面的易用性程度( Usability ),但有兩個狀況經常導致使用者無法順利完成付款:

狀況一:使用者看不見曾輸入過的內容。

由於屏幕的限制,當使用者打完了一長串的郵件地址,卻很難檢視是否填錯,因為前面部份已超出螢幕而被截掉;看看下圖一,循網頁設計邏輯,設計者通常會將說明標籤( Label )置於空格左方,但使用手機時卻會造成填寫空間嚴重不足,行動頁面的設計,應將標籤置於空格上方,以最大化使用者填寫空間

狀況二:設計不良的內隱式標籤。

有些設計者可能會想,作成內隱式標籤不就解決這個問題了嗎? 但這麼一來,用戶卻更難操作了,付款流程是一個需要高度專注的作業,使用者常需要重新檢視填寫內容,或者比對填寫的內容與標籤是否一致,而內隱式標籤在填寫時自動消失的特性,迫使使用者必須將打過的內容全部刪除,然後點擊其它空格,才能重新看見標籤(下圖二)。

這種設計其實不應該出現,尤其是網路支付這類型交易行為伴隨著風險與不安的情緒,可以預期絕大多數使用者會多次檢視填寫的內容是否正確無誤。

圖片111

  • 法則四:跟著做就對了! 內隱式標籤的正確使用時機

上段談及的內隱式功能雖然不適合當作標籤,卻非常適合輔助說明。使用者可能會出現這樣的疑惑:「 生日欄位該使用什麼樣的格式?」、「 應該填入阿拉伯數字嗎? 」,事實上,這並非行動頁面才會出現的問題,如狀況一所提及,高達 9 成的電子商務網頁都有著標籤定義模糊( Unclear field label )的狀況。

這時就可以應用內隱式補充說明,有時候使用者會不清楚標籤的意思,例如像 CCV2 (信用卡背面的驗證碼)這類的專有名詞,這時開發者就需要加以說明,另外一種狀況是,使用者不清楚填寫格式,例如電話該以國際碼 +886 呈現 還是使用 09xx 開頭?

這時透過內隱式功能加上一個範例,就讓使用者更清楚填寫內容。

  • 法則五:聰明反被聰明誤,小心設計自動建議

不曉得你是不是也曾有過這種經驗:在使用觸控鍵盤時,需要不停轉換鍵盤介面,且時常因為輸入錯誤而導致驗證失敗。看看下圖一,明明是要打 street,手機卻一直要你改成 ate!

圖片11

這些小細節在技術上不難解決,困難的是設計者必須針對每個選項作鍵盤最佳化,這邊提供一個更簡單的方式來避免大部份的問題,請關閉自動校正( Auto correct= off )、關閉自動大寫( Auto capitalize = off )、關閉表單驗證( No validate ),給操作者更大自由度進行填寫。

  • 法則六:善用自動偵測機制,讓填表單輕鬆又簡單

雖然關閉部份驗證功能可使提升操作自由度,但設計者仍然必須避免買家送出錯誤訊息,為了提高資料正確性,建議搭配自動偵測( Auto-detect )及自動完成( Auto-complete )功能,雙管齊下。

舉例來說,「 國家 」這個選項,很容易就可以利用智慧型手機進行 IP 定位( IP geo-targeting )直接帶出客戶所在地,因此就很適合透過自動偵測機制來填入,並且提供下拉式選單以供使用者自行變更。

類似地,「 城市 」 的選項也可以透過相當普及的 GPS 定位 來抓取用戶所在地,自動填入對應的郵遞區號( ZIP code ),只要多加注意這些小細節,便可以有效降低使用者耗費的精神,避免不必要的糟糕體驗。

magnify class

行動經濟,體驗設計仍是王道

成功的新創服務,必須經過一次又一次需求開發到驗收測試( User Acceptance Test )的輪迴,使用者經驗談起來簡單,做起來卻也不會太難,以行動付款來說,拿起一支時下最in的手機,躺在沙發上左滑右滑,就可能會發現在實驗室測試時沒發現的問題。

現在你仍認為行動支付市場太小嗎?還是由於服務體驗設計不佳呢?歡迎和我們分享你的想法!

◎推薦閱讀

提高超連結點擊率的二不三要

四種加速時間感的心理學設計方法

你不可不知的網站色調設計!

(圖片來源:thelir@flickrintel free press@flickr。)







標籤:, , , ,

van

出生於屏東,目前旅居台北 喜歡分享一切新奇有趣的事物


Copyright © 2014 reBuzz 來報這 | All Rights Reserved

无觅相关文章插件,快速提升流量