玩運彩練小喂

Mobile App UX Principles – chp.3 Transact 中文化

think with Google

原文出處:
Mobile App UX Principles: Improving User Experience and Optimising Conversion

3・Transact

 

The focus at this stage is to help users progress through each checkout stage with minimal effort, with sufficient reassurance, and to convert without hesitation.

本階段重點在於如何讓使用者十足安心、毫不猶豫、輕輕鬆鬆完成線上付款的每個步驟,順利轉換成功。

 

42% of all mobile sales generated by the leading 500 merchants in m-commerce in 2014 will come from mobile apps.”
– Internet Retailer 2015 Mobile 500

預計到了2014年,500大企業在行動商務的銷售總額當中,將有42%來自於手機APP。

 

“% of category apps users w ho have made app purchase in the last 30-days on products, services, and subscriptions: Retail (50%); Travel (44%); Local(48%); Technology (65%); Finance (38%).”
– U.S. Consumer Mobile Apps Study, 2014, Google/Ipsos MediaCT

過去30天,曾在APP上購買產品、服務或訂閱的使用者,其使用的APP類型佔比:銷售類(50%)、旅遊類(44%)、地區類(48%)、科技類(65%)、金融類(38%)。

 

User is reassured at all checkout stages by relevant messaging that encourages them to proceed to the next stage (without hesitation!)
Provide visible and clear messaging specific to this stage of their transaction journey, which reassures and encourages them to progress to the next without hesitation. For example:

  • Basket: secure checkout, first time shopper discount, spend £X more for free delivery.(See image 21)
  • Personal & Address Details: free delivery, premium delivery options, or pre-paid returns.
  • Payment: confirmation of the payment options available, payment security employed, costs displayed in a simple and transparent way.(See image 21)
  • Checkout & Confirmation: customer support options and availability, e.g. self-service ( videos, demos, FAQs, forums, etc.) or live support (email, web chat, click-to-call, etc.)

在付款程序中的每個階段,都清楚告知重要訊息,目的是讓用戶放心,更願意進入下個步驟(毫無遲疑)
在付款程序中的每個階段,都要有明顯、清楚的說明,先讓用戶安心,他們才會毫不猶豫繼續下個步驟。所謂的重要訊息,舉例如下:

  • 購物車:線上交易安全、首購折扣、免運費的消費金額,如圖21。
  • 個資與地址:免運費方案、進階運送選項、預付費退貨。
  • 付款:支援的付款方式、線上交易安全保證,以及清楚、透明的費用明細,如圖21。
  • 結帳與確認:客服資訊與服務範圍,例如自助式(教學影片、操作示範、常見問題、論壇等等)或即時客服(電子郵件、線上通話、點擊通話等等)。

 

圖21 來源:Mobile App UX Principles

 

 

Basket

At the basket stage we need to nudge them towards either checkout (to convert) or continue shopping (to increase average basket value). It should clearly confirm all items added and costs (itemised and total). You should also consider: enabling users to edit items; and cross-selling products (e.g. recommended items) or services (e.g. finance available).

在購物車階段,需促使用戶完成結帳(轉換)或繼續購物(提高購物車平均消費金額)。購物車得清楚條列待購商品與金額(包含明細與總價),另外可以考慮:允許修改訂單內容;交叉銷售其他商品(例如推薦商品)或服務(例如融資方案)。

 

User can edit key product attributes(e.g. for a product: colour, size or quantity)
Enable users to change their minds and edit product attributes – e.g. colour of a dress, size of bicycle, etc. – within the checkout stage, instead of trying to click back through the funnel or re-search for the product. This is in addition to editing the quantity of a product, which most apps already allow you to do and is hygiene.(See image 22)

可以編輯關鍵的商品屬性(例如商品的色彩、尺寸或數量)
結帳流程中應當保留使用者改變心意的空間,亦即可以變更商品屬性,例如衣服的顏色、單車的尺寸等等,別讓用戶重新搜尋或一頁一頁返回訂購商品的畫面。另外大多數APP也能直接修改訂購數量,這樣的做法比較乾淨俐落,
如圖22。

 

圖22 來源:Mobile App UX Principles

 

User can see related or recommended products
Display a set of related or recommended products to the one that the user is currently looking at. Related products are valuable to the user because they are in-context to what they are considering, and are valuable to the business because they could increase the average basket value.(See image 23)

使用者能看到相關或推薦商品
展示一系列與使用者正在尋找的商品有關連或推薦購買的品項。這類資訊與使用者正在考慮購買的商品有脈絡關係,是有用的資訊,同時能拉高購物車的平均消費額,創造買賣雙贏,如圖23。

 

p23
圖23 來源:Mobile App UX Principles

Personal & Address Details

Give first time users sufficient reassurance so that they input their data and progress to the payment stage without hesitation, and pre-populate data for return user convenience.

告知新用戶必要的資訊,使他們放心提供個資並毫無懷疑的完成付款程序。至於回流客,可以預填的欄位就先幫他們輸入。

 

User has distractions removed with a quarantined screen
Provide a clean environment to speed users through checkout screens, by removing all extraneous content and navigation / menus that could distract them, and display only the minimum essential content and actions to drive conversion.(See image 24)

獨立的畫面能避免使用者分心
去除額外的內容、導覽列 / 選單,以及所有會造成使用者分心的元素,整個結帳畫面保持清楚簡潔,只放最精簡、必要的內容和操作按鈕,加速使用者完成付款,如圖24

 

圖24 來源:Mobile App UX Principles

 

For return user, personal and address details are pre-populated
Automatically pre-populate personal and address data to streamline the purchase. Not storing and pre-populating previously entered data will make the transaction more arduous.

幫回流客預填個人資料與地址
自動填好個人資料與地址欄位,簡化購物流程。若未留存客戶先前輸入過的資料,也沒有進一步用來預填欄位,將不利於轉換率的提升。

 

“47% of respondents prefer apps – versus a mobile website – when they need to complete a task or transaction quickly.”
– App-Nesia in the UK: The Need for Re-Engagement Marketing, 2015

當有處理工作或快速購物的需求,47%的回覆者偏好使用app,而非行動版網站。

 

For return user, the end-to-end transaction process is within a single screen (i.e. from details to checkout)
Return users, who have all of their details- personal, address and payment – stored in- app, should be presented with a single screen transaction experience, where all data is pre- populated (with options to edit), so that they can complete it fast and conveniently. They shouldn’t have to click from screen to screen through the checkout journey.(See image 24)

針對回流客,開始到結束的交易流程通通集中在單一頁面內(亦即從購買明細到結帳)
APP已有回流客先前訂單的資料,舉凡個資、寄件地址、付款方式等等,這些都可以預先幫客戶輸入到對應欄位,並呈現在一頁當中待使用者確認或修改,這樣的購物經驗會比一頁一頁點擊確認更快速又方便,如圖24。

 

Payment

Maximise conversion at the payment stage by reassuring users, and employing convenient input methods, such as: scanning cards, payment options and express payment for first time users; and pre-populating data for return users; etc.

設法將付款階段的轉換率提升到最大,做法上除了先讓用戶放心,還可以採用方便的輸入方式,比如影像掃描、付款方式選擇,以及開放首購者使用電子錢包,為回流客預填欄位等等。

 

Costs are transparent (itemised and total costs)
Shopping baskets should display all of the items within it and their associates costs, discounts or savings, and total cost. Checkouts should also display the associated taxes, delivery costs and total costs.

透明化的應付款項(列出明細與總價)
購物車內應列出所有待購項目以及相關費用、折扣或購物金,以及總價。結帳頁也需明列相關稅金、運費與總價。

 

For return user, payment details are pre- populated (for convenience)
Automatically pre-populate payment data, for the same benefits as above. The only field that requires manual entry each time – for security reasons – is the CVV field.

為回流客預填付款明細(為了便利性)
自動預填付款資料,優點同前述。考慮到線上交易的安全性,唯一需要每次手動輸入的欄位,就是信用卡背面的安全碼(CVV)。

 

User is only presented with payment options accepted in their country
Provide users with payment methods appropriate to their country. Provide multiple options to users to ensure you capture the full range that users would pay with in each country, e.g. credit card, debit card, Paypal, etc.

僅提供使用者可以在該國家使用的付款方式
提供適用於該國使用者的付款方式。多樣化的支付選擇是為了涵蓋各個國家使用者偏好的付款方式,例如信用卡、VISA金融卡 / 簽帳卡(debit card)或Paypal等等。

 

Express payment / checkout option is provided (e.g. Google Wallet, PayPal, Apply Pay)
Some customers prefer express payment / checkout methods as a more convenient alternative to credit and debit cards and manually entering personal and address details. Certain types of goods also lend themselves more to these methods, such as low-cost or one-off purchases, which the user doesn’t have to consider too hard. Reducing the number of steps in the checkout process and amount of data input required will increase the app conversion rate. Alternative methods include PayPal, Apple Pay and Google Wallet.

  • With Apple Pay, avoid displaying the payment button if the user can’t pay that way (i.e. no authenticated card set-up or not on an Apple support device).

需支援電子錢包(例如Google wallet、Paypal、Apple Pay)
部分客戶偏好用更便利的電子錢包付款,取代信用卡與簽帳卡,這樣就不需要再手動輸入個資及地址了。有些像是低價商品或一次性消費的類型,也支援電子錢包付款,如此一來用戶就不會為了選擇付款方式傷腦筋。減少結帳步驟與輸入欄位的數量將會提升轉換率,此外支援電子錢包付款也有幫助,像是Paypal、Apple Pay與Google wallet。

  • 若用戶無法使用Apple Pay付款,請勿顯示Apple Pay的付款按鈕(亦即,尚未認證完成或使用Apple不支援的裝置)

 

For first time user choosing a card payment, after entering the first four digits of the long card number, the Card Type is automatically detected (e.g. Visa debit card)
For first-time users or guest checkout, avoid asking users to choose their card type. After they’ve entered their cards’ first four digits the – credit or debit – card should be automatically recognised, and displayed for their recognition and reassurance.

針對首次選擇信用卡付款的用戶,一旦輸入頭四位信用卡號,將自動辨識出卡別(例如VISA金融卡
針對首次使用或以訪客身份結帳的用戶,勿要求他們選擇卡別。無論信用卡或簽帳卡,應該在頭四位卡號輸入後自動被辨識出來,顯示在畫面上讓用戶確認、放心。

 

For first time user choosing or registering a card, all data can be entered sequentially in a single field (e.g. 16-digit long number, then MM/ YY and finally CVV)
For first-time users or guest checkout, avoid forcing users to toggle between multiple fields in order to populate their card details. Instead, request all data be entered in a single field, with in-line instructions for each piece of sequential data required. For example, when users reach the payment card details they will already have provided their full name, and now just need to provide their card: 16-digits long number, MM/YY, and CVV. This is far more convenient for users than toggling between multiple fields and pogoing up-and-down between fields and the number pad.(See image 25)

針對首次使用、登錄信用卡的用戶,應將輸入欄位集中在一列(例如,長達16位數的卡號、到期月份 / 年份與卡片背面的安全碼)
針對新用戶或訪客,在結帳畫面有許多欄位,一個填完必需手動切換到下一個,這個切換動作不應該出現在信用卡資料的欄位。反之,應當把所有信用卡資料的欄位集中在一列,再以提示文字區分各項資料的位置。舉例來說,當使用者即將輸入付款信用卡時,往往已經填完全名,剩下的16位數卡號、到期月 / 年,以及信用卡安全碼,便能集中在一列輸入欄位裡。這個做法更加便利,無需再切換不同的輸入欄位,畫面與虛擬數字鍵盤也不會因為持續切換欄位而上下移動,如圖25。

 

For first time user choosing a card payment, an option to scan it is displayed(for convenience over manually entry)
Give users the option to conveniently scan their payment card instead of manually entering data. Benefit to user is convenience (it takes a few seconds instead of a minute) and benefit to business is 100% accurate data captured and less basket abandonment – no more long numbers entered incorrectly, or names not entered exactly as they appear on the card, etc.(See image 25)

為初次選用信用卡付款的消費者,提供掃描卡片的選項(便利性大勝手動輸入)
提供使用者掃描付款信用卡的便利功能,而非只能手動輸入。這項做法方便了使用者(只需幾秒就搞定,不用一分鐘),也能保障銷售端收到完全正確的資料,減少人為的訂單錯誤,不再出現一長串卡號輸入錯誤,或者姓名與信用卡不符等窘境,如圖25。

 

圖25 來源:Mobile App UX Principles

 

If ID card is requested, an option to scan it is displayed (e.g. passport or driving license)
For the same reasons and benefits of providing users’ with the option to scan payment cards, some businesses / apps – such as airlines, car hire, insurance, loyalty schemes, etc. – could capture ID card data by enabling users to scan their passport, driving license, etc. to capture mandatory ID. This would provide greater user convenience and speed them through the funnel.

若需要使用者提供身分證明,別忘了附上影像掃描的功能(例如護照或駕照)
與掃描付款信用卡同樣的原因與優點,部分企業端 / APP,舉凡航空公司、車輛租賃、保險、忠誠方案(loyalty schemes)等等,藉由用戶掃描護照、駕照等證件擷取身份證資料,以取得強制性的識別資料。這項功能將給予使用者極大便利,加速通過原本緩慢的過程。

 

Checkout & Confirmation

Maximise conversion at the final checkout stage with: the removal of all distractions (everything that doesn’t lead to a conversion decision); customer service reassurance; giving return users a single screen checkout experience; confirming the key transaction details; and contextual content that provides value beyond the immediate transaction (and contributes towards retention).

在最後的結帳階段,主要重點是極大化轉換率,可以透過以下做法:移除所有干擾(只要無助於完成轉換的都算);售後服務保證;為回流客設計單一結帳畫面的體驗;確認關鍵的交易細節;安排與訂購商品有脈絡關係的內容,為當下交易創造更多附加價值(對應用程序的留存率也能產生貢獻)

 

With new technologies, we may see mobile conversion exceed desktop conversion, which is why every company today needs to be mobile-first. There is absolutely no question smartphones and tablets will be central to web retailing moving forward, and that these mobile devices will be at the core of driving overall growth.”
– Vishal Agarwal, EVP & CMO, Nomorerack. com Inc., No. 78 in the Internet Retailer 2015 Mobile 500

隨著新技術的發展,我們能見證到行動裝置的轉換率勝過桌上型電腦,這就是為什麼今天每間公司都需要以行動為優先。無庸置疑目前智慧型手機與平板電腦將會是推動網路零售的重要角色,也是拉抬整體經濟成長的核心。

 

User can select their preferred delivery date / time
Allow users to select their preferred delivery date / time, and remove this unnecessary barrier to conversion. Users may not be able to make a pre-selected date, due to work or family commitments, or holidays. Consider providing a range of options to meet all scenarios, and tiering delivery charges in order to fulfill that level of service quality.

能自訂喜歡的收件日期 / 時間
允許用戶自訂喜歡的收件日期 / 時間,並排除會干擾轉換的不必要因素。由於工作、家庭因素或強碰假日,用戶不見得能預先指定時間,所以可以考慮提供一系列的選項,以滿足所有可能的情況。

 

If user closes the app during a partial checkout, when re-opened all form inputs are restored enabling them to continue conveniently
If a user chooses to close the app mid-way through a – partial – checkout, on re-opening the app, all of the form input data should be restored, allowing the user to continue where they left off conveniently.

若用戶在結帳程序中關了APP,應暫存該用戶已經輸入的資料,當下次重新開啟時,才能很方便地繼續操作
若用戶在結帳程序中關閉了APP,所有已經輸入的資料應被保留下來。之後用戶開啟APP時,才能很方便地接續他們上次中斷的地方繼續操作。

 

Confirmation screen reassures the customer with completed transaction information
Provide reassuring information related to the customer’s purchase or booking, e.g. the item(s), prices, taxes, delivery address, expected delivery date, print invoice, links to FAQs, customer service contact options, etc. These things will reassure customers, direct them to helpful self-service content, and reduce volume to the customer service centre. (See images 26, 27)

訂單確認畫面要列出完整的交易資訊,讓用戶安心
列出該用戶消費或訂單的完整內容,例如品項、價格、稅金、寄件地址、預計收件日、列印發票、常見問題的連結、客服聯絡方式等等。這些資訊能使用戶安心,並指引他們自行取得有用的資訊,以減少客訴,如圖26、27。

 

圖26 來源:Mobile App UX Principles

 

p27
圖27 來源:Mobile App UX Principles

 

Confirmation screen provides contextual content (to provide value beyond the checkout)
Post-payment or post-booking confirmation screens are an important stage to begin the retention effort, through contextual content that provides value beyond the transaction, and helps create differentiation. For example:

  • Retail transaction: send SMS reminder an hour before delivery
  • Car booking: address and map of collection station and drop-off stations
  • Event booking: Add to Calendar, Send to Passbook or TripIt

    (See image 28)

確認頁附上與訂購商品有脈絡關係的內容(提供超越交易本身的附加價值)
付款後或訂購後的確認頁依然很重要,關係到應用程式的留存率。這個階段可以安排與訂購商品有脈絡關係的內容,一方面帶給用戶超越期望的附加價值,同時創造差異化。舉例來說:

  • 零售交易:寄達前一小時傳簡訊提醒客戶
  • 租車預訂:取車與還車的地址與地圖
  • 事件預訂:加到行事曆、傳送到Passbook(ios內建的APP)或Triplt(規劃行程的APP)
    如圖28

 

圖28 來源:Mobile App UX Principles

 

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *