玩運彩練小喂

Mobile App UX Principles – chp.2 Use 中文化

think with Google

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

 

2・Use

Search

 

“Mobile is a transformative technology. As our percentage of customers adopting mobile continues to grow, mobile can no longer be a limited subset of features or products. And we think with clever use of functions and design, it is possible to give mobile customers 100%.
– Paul Cousineau, Director Mobile Shopping, Amazon.com, No. 1 in the Internet Retailer 2015 Mobile 500

搜尋

手機是革命性的技術。由於我們客戶使用手機購物的比例持續成長,手機不再受限於功能或產品的一部分。我們認為只要有巧妙的功能與設計,很有可能給予手機用戶滿分的體驗。

 

“% of retail apps users who engaged in the type of activities in the past 30 days: Make a purchase online (58%); Look for info about a specific product / service (56%); Browsing (54%); Make a purchase offline (35%); Look for something nearby (35%); Find opinions of reviews from others (34%); Manage or check my account (21%).”
– U.S. Consumer Mobile Apps Study, 2014, Google/Ipsos MediaCT

過去30天,銷售類APP的用戶使用行為分佈:線上購物:58%;查找特定產品/服務的簡介:56%;瀏覽:54%;到門市購物:35%;找附近的東西:35%;搜尋使用心得:34%;管理或查看個人帳戶:21%。

 

The focus at this stage is to enable people to use your app in the way that they intend to. An excellent search facility will help users find what they want quickly and easily, in order to satisfy their needs and drive conversion. In our experience, app search has a far higher conversion rate than non-search app usage, reflecting the higher intent of the shopper. There are a number of ways to enable search, from keyword to product scanning and image search.

本章重點是確保使用者能按照他們期望的方式使用APP。傑出的搜尋機制能幫助使用者快速、輕易找到結果,以滿足需求,提升轉換率。在我們的經驗中,使用APP搜尋的轉換率,明顯比未使用高得多,這也反映出意圖更強烈的消費族群。目前有幾種啟動搜尋的機制,例如關鍵詞、產品掃描以及影像搜尋。

 

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

47%的受訪者表示,當他們想要迅速取得商品資訊,會選擇使用APP,而非行動版網站。

 

Search is displayed prominently(e.g. at top of screen)
If search is a primary function of your app display it prominently, as it can be the fastest route to discovery for users with high intent to convert. eCommerce apps should feature search at the top of their home screen (and if the home screen is long, repeat it at the bottom). For apps with huge inventory, displaying the search field by default would ensure it is both obvious and fast to use.And, provide a prompt to search, which can be a call-to-action to the user and can clarify what to input, e.g. product, brand, category, ID number, etc. 

  • In Android, search is in the app bar at the top of the screen.
  • In iOS, search can have an accompanying scope bar, which enables the users to quickly select the scope of their search, i.e. with clearly defined criteria or category (although, this is no substitute for good information architecture and UX design).

明顯的搜尋欄位(例如擺在畫面頂端)
如果搜尋是APP的主要功能,請儘可能的突顯它,對於有高度轉換意圖(急著下訂/購買)的使用者來說,搜尋正是最快速的捷徑。電子商務類APP應該在主畫面頂端強調搜尋功能(如果主畫面內容過長,請再次於畫面底部呈現)。內含大量商品清單的APP,預設顯示的搜尋欄位必需兼顧顯眼與快速好用。並且,別忘了加個搜尋提示,這能暗示使用者點擊搜尋欄位,同時示範了建議關鍵詞的類型,例如產品名稱、品牌、類型、序號等等。

  • android系統,搜尋欄位置於畫面頂端的app bar內。
  • ios系統,伴隨搜尋欄位出現的scope bar,只要有定義明確的篩選標準或類別,便能協助使用者快速限縮搜尋範圍(不過再怎麼說,好的資訊架構與使用者經驗才是王道)。 
來源:Mobile App UX Principles

 

Auto-suggestions are used(to reduce data entry and provide immediate results)
Provide auto-suggestions (or, predictive text results) as quickly as possible, such as after third character is entered, to provide immediate value and reduce their data entry effort (and mistakes they could make on small keyboards with “fat fingers”). 

自動列出搜尋建議(減少手動輸入並提供快速結果)
儘可能加快秀出搜尋建議的速度,例如在第三個字母輸入時就出現,給予使用者神速的體驗,並替他們省下手動輸入的力氣(尤其用大手指觸控小螢幕上的虛擬鍵盤,很容易打錯字)。

來源:Mobile App UX Principles

 

The first few search results are highly relevant (mobile real-estate is limited!)
With Smartphone screens being so limited in the number of results they can display without the need for scrolling, ensure the user sees a set of – e.g. 3 to 5 – highly relevant results by default; and only after that do they need to scroll. As an ongoing activity, you should regularly check search result quality for top in-app search queries and adjust ranking if needed

頭幾個搜尋結果要高度相關(因為手機螢幕空間有限)
因手機螢幕空間受限,單屏畫面通常只能顯示幾筆資料,所以要確保使用者在未捲動畫面的情況下就能看到3至5則高度相關的搜尋結果,做到這點,才能確定使用者捲動該頁不是多餘動作。因為搜尋是持續、非一次性的活動,開發者應經常檢視APP內熱門關鍵詞的搜尋結果,必要時需更動排序。

 

Provide alternatives when there are no matching search results (no dead-ends)
Avoid giving users dead-ends in their experience when their search produces no matching results. Give them options, e.g. in flight booking suggest alternative airports, in car hire suggest alternative fleet, in retail suggest alternative products or categories. To assist the user further you could employ an ‘intelligent search’ feature that covers singular, plurals and misspellings, etc.

若沒有匹配搜尋條件的資料,別忘了提供替代方案(別讓使用者走進死路)
當使用者輸入的關鍵詞找不到符合的資料,別讓他們產生無路可走的感覺。這時可以提供選項,例如訂票系統可以建議替代航班,租車服務可以建議其他業者,零售業者可以建議購買其他產品或種類。甚至,還可以加入更強大的智慧搜尋功能,讓使用者不需煩惱單數、複數或拼錯字等等的問題。

 

User can easily sort search results
Provide the user with sorting options that are relevant for their search. Do not hide the sort feature within the filtering feature – they are distinct tasks.

隨手可得的排序搜尋功能
設置跟搜尋結果相關的排序選項,這功能不同於過濾搜尋結果,不要把它藏在裡頭。

 

User can easily filter search results
Provide the user with filtering options that are relevant for their search, and enable them to select / de-select multiple options each time they apply the filter to the results.

隨手可得的過濾搜尋功能
設置跟搜尋結果相關的過濾選項,每次過濾都可以單選或複選過濾條件。

 

Recent searches are displayed(to accelerate their experience)
Apps should store all interactions, including recent searches, in order to provide this data to the user the next time they conduct a search. It benefits the user in saving them time and effort in searching for the same item again, and improves the user experience. This is especially important for travel apps, where users often repeat the same searches and would benefit greatly.

列出近期搜尋(加快使用經驗)
紀錄與使用者的所有互動,包含近期搜尋,為下一次的回訪做準備。這不但能省下再次搜尋同一項目的時間和力氣,還能改善使用經驗。這對旅遊類APP尤其重要,因為遊客經常會重複搜尋相同關鍵詞,有這個功能的話幫助很大。

 

Booking form data is pre-populated with suggested data (e.g. a restaurant form)
Automatically pre-populate data in a booking form with suggested data, which in many cases will be accurate for the user and make the process more convenient. For example: Restaurant booking suggested data: Table For (2), When (Tonight), Time (7:00PM), Where (Current Location), etc. Hotel booking suggested data: Location (Current City), Check-in Date (Today), Check- out Date (Tomorrow), Guests per room (2), etc.

訂位表單預填建議值(例如餐廳的網路訂位)
幫使用者預填建議值,大多時候很有用,而且能加快訂位效率。例如,餐廳的網路訂位可以預填:人數(2人)、何日(今晚)、時間(7點用餐)、分店(靠近目前位置)等等。飯店訂房頁面可以預填:所在地(目前所在城市)、入住日(今天)、退房日(明天)、入住人數(2人)等等。

來源:Mobile App UX Principles
來源:Mobile App UX Principles

 

Product & Service

Product screens are where users make key conversion decisions, e.g. add to basket, add to wish list, book now, call now, complete form, etc. Strong mobile app product screens enable users to quickly transact, save for later, and share the items they have to make decisions on.

產品與服務

產品頁存在許多關鍵因素左右購買決策,例如加入購物車、加入許願清單、立即訂購、立即詢問、填寫訂購單等等。傑出的APP產品頁能促進轉換效率、提升稍後購買的筆數、讓使用者分享他們正在考慮的商品。

 

“By far the largest revenue opportunity in the app economy up to 2017 is e-Commerce. Larger smartphone screens, improving mobile purchase flows on the web and dedicated native apps have already been shifting that behaviour. Removing payment friction will further accelerate the transition to mobile commerce.”
– Vision Mobile, App Economy Forecasts 2014-2017

目前為止到2017年,電子商務會是APP內需經濟中最大的獲利機會。大螢幕智慧型手機,提升了網路購物的流量,手機專用APP也已轉移消費者的購物行為。未來,一旦線上支付的阻礙消除後,電子商務的主戰場會更快轉移到行動裝置上。

 

Product description is easy to scan (find specific info) and skim (get a general overview)
Product descriptions should be high-level (aim for brevity) and laid out clearly, such as in list or bullet- point format, so that it is easy to speed read. The key features or buying dimensions of the product should be the focus, to encourage users’ to click on the product details button (for further information) or add to basket.

產品描述易於細讀(尋找特定簡介)與瀏覽(看個大概)
產品描述應該做到簡潔大方,具備高質感,例如用列表、清單條列,方便快速閱讀。產品主要特徵或影響購買的主因必需是視覺焦點,誘使消費者點擊詳細介紹的按鈕,或直接加到購物車。

 

Hero product image is above the fold(to merchandise your priority offerings)
Don’t make users scroll in order to see the hero image for a product (i.e. the first and main image). There may be additional images below that users can scroll to view. 

大型全版圖片應位於網頁第一屏(以推銷最大賣點)
別讓使用者捲動畫面才能看到產品的大型全版圖片(亦即最重要的主圖)。底下也可以附加其他圖檔供使用者參考。

i15
來源:Mobile App UX Principles

 

Product images are quick to swipe horizontally (and are not stacked in a vertical row)
Users should be able to quickly swipe through an items images horizontally, and not have to scroll down to view a series of images.

產品圖片便於橫向捲動切換(不是全部展開往下堆疊)
產品圖片要用方便使用者橫向捲動換圖的介面,不是讓他們垂直捲動頁面看完一系列圖檔。

 

Product images / videos / other assets are high quality (to reassure new users)
Online and in-app, your images / videos / other assets are the product, since there is no physical dimension of the product. So, they should be high quality, to maximise the impact of merchandise and inventory, capture the attention of app users who may skim, and drive call-to-actions.Android Graphic assets should be crisp: always provide XHDPI (and now XXHDPI) iOS recommends you supply @3x assets for iPhone 6 Plus and @2x assets for all other high-resolution iOS devices.

高品質的產品圖片 / 影片 / 其他相關素材(以收服新使用者)
無論在網路上或是APP,產品圖片 / 影片 / 其它相關素材就是產品的一環,因為使用者無法接觸實體商品。因此,高品質的素材才能最強化商品的賣相,吸引使用者的目光,更可能誘發具體行動。在Android系統,影像解析度至少要XHDPI(目前是XXHDPI),iOS系統建議專為iPhone 6 Plus準備@3x解析度的素材,@2x素材則用於其他視網膜螢幕的iOS裝置。

 

Product images can be easily zoomed into(and are still high quality)
Users should be able to easily zoom into a product image to inspect it in more detail, by double clicking or selecting a zoom button. The zoomed-in images need to maintain high quality. And to avoid making the user think, state the action required, e.g. Double Tap to Zoom.

產品圖片方便放大檢視(即使放大看還是高品質)
方便讓使用者放大圖片檢視產品細節,雙擊圖片或按下放大圖示皆可。放大後的圖檔仍要維持高解析。為了避免讓使用者思索該怎麼使用,請直接講明,例如:連點兩下放大圖片。

 

“Self-help” is becoming the new norm 1-in-3 shoppers use their smartphones to find information instead of asking store employees.
– Mobile in Store Research, 2013, Google

每三個消費者當中就有一位寧可用智慧型手機搜尋商品資訊,死都不去問店員。“自助”嚴然成為新的購物模式。

 

Helpful product content is easy to find and is reassuring (e.g. product details, specs, FAQs)
Users expect to see product details, and the depth of content provided should be appropriate for each type of product, in order for the user to make a conversion decision. Specifications should be provided for products that customers may need to see in order to make a purchase decision, e.g. for large ticket items (like cars), technical items (like computers), complicated items (like insurance cover).

有用的產品內容要好找,且能釋疑(例如詳細資訊、規格、常見問題)
使用者期待看到產品的詳細介紹,內容的深度應適合每種類型的產品,好讓使用者下購買決策。產品規格也要提供,例如:大型商品(如汽車) ,3C類(如電腦) ,複雜商品(如保險),消費者下單前可能會想知道細節。

 

Customer reviews or testimonials are easy to find and are reassuring
At this key conversion point, users may need to further research the item or see related info, before making a decision. Such self serve content could be in the form of FAQs, a general help section in the app, a size guide overlay on the product screen, etc.

消費者的意見回饋或商品的相關證明資料要好找,且具有可信度
在即將購買前的關鍵環節,使用者可能會進一步研究跟產品有關聯的資訊,再做出決定。這類自助傾向的內容可以是網站或APP內的常見問題,或擺在商品頁上的建議尺寸等等。

 

“28% of shoppers will abandon their shopping cart if presented with unexpected shipping costs.”
– VWO, eCommerce Survey 2014

在購物車才列出額外運費,有28%的消費者會取消訂單。

 

Costs are transparent (including taxes)
Items should clearly display all costs and any associated taxes to reassure users. Unexpected shipping costs, taxes, etc. are the most cited reasons why users abandon shopping funnels.

收費公開透明(包含額外費用)
清楚列出商品的所有費用,包含額外稅金,以取信於人。意外降臨的運費、稅金等等,是扼殺轉換率的元兇。

 

Stock / inventory (ideally local) availability information is provided (for impulse or last minute shoppers)
Availability of stock or inventory (e.g. hotel rooms) is important to app users, since they are the users that are most likely to purchase or book at the last minute or on impulse, and you need to satisfy their urgency. And “local” availability enables users to buy / book nearby and then collect / arrive immediately. 

秀出庫存  / 各地存貨量(對付衝動型或撐到最後才出手的消費者)
對於衝動型或到最後才出手的消費者,庫存量很重要,可以滿足應急需求,例如飯店的剩餘房間數。各地存貨量方便使用者就近購買 / 訂購,再快速取貨。

i16
來源:Mobile App UX Principles

 

Primary call-to-action button is the most prominent on-screen element, and secondary call-to-action button is in close proximity to it
The primary CTA should be the most prominent button on screen, and your eyes should naturally be drawn to it, e.g. Add To Basket, Book Now, Submit Form, etc. And, secondary CTAs should be in close proximity to it, to satisfy cross-device behaviours (micro-conversions), via features such as Email Product, Add to Wish List, etc.

主要召喚使用者行動的按鈕,必須是畫面上最突出的元素,附近可以放次要按鈕
主要召喚行動的按鈕必須是畫面上最突出的元素,能吸引目光,例如加到購物車、立即訂購、送出訂購單等等。附近可以擺次要按鈕,以顧及跨裝置的操作行為(微轉換率),例如轉寄商品資訊、加到願望清單等等。

 

User can see suggested products or listings(e.g. similar 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.

使用者可以瀏覽建議商品或清單(例如相似或推薦商品)
在使用者正在關注的商品附近展示一組相關或推薦商品。相關商品很有用,它和使用者考慮購買的商品有關聯性;同時幫到企業端,因為能提升購物車的平均消費金額。

來源:Mobile App UX Principles
來源:Mobile App UX Principles

 

User can see clear and persistent basket or booking symbols
A persistent basket or bookings symbol in the main navigation bar is easily accessible (usually top of screen, but not always) and reminds users of its contents and cost (could be itemised and / or total). It provides reassurance and simple editing of its contents.

常駐、明顯的購物車或訂購圖示
主導覽列上常駐購物車或訂購圖示,好處是伸手可及(通常位在螢幕頂端,但也有例外),同時提醒使用者尚未結帳的商品與售價(單價、總價)。這麼做可以讓人放心,也等於是簡便的修改訂單功能。

 

 

Cross Device & Offline

Consumers increasingly research and consider products and services across multiple touchpoints – devices, apps and browsers – and also offline touchpoints, such as telephony and retail stores. It is therefore paramount that brands enable users to transition from their Smartphone app to their next – digital or offline – touchpoint, as part of a seamless journey towards conversion. This will enable cross-device and offline conversions, and satisfy the behaviours of consumers today.

跨平台與非網路管道

越來越多的消費者會透過多重管道研究、評估商品與服務內容,亦即使用不同裝置、APP與瀏覽器,也包含了非網路類型的管道,像是電話與銷售門市。因此,品牌業者首要考量讓使用者從智慧型手機的APP過渡到數位或非網路類型的接觸管道,變成是無縫轉換體驗的一部分。這樣將會促進跨平台與非網路管道的轉換率,同時滿足時下消費者的購物行為。

 

Smartphones are transforming the in-store shopping experience. 90% of smartphone shoppers use their phone for pre-shopping activities. 84% use their devices to help shop while in a store.
– Mobile in Store Research, 2013, Google

智慧型手機正在改變實體商店的購物體驗。90%的智慧型手機購物族群,舉凡購物前相關的前置作業,都是透過手機進行。84%的消費者會在門市裡使用手機輔助他們購物。

 

Product scan or image search feature is easy to find (e.g. to find product details by scanning a barcode or searching via an image)
Some users want to find product details by scanning items in-store (via the camera and scanning a barcode or QR Code), or by searching with an image (that they photograph or upload). They should be able to find these features and activate them quickly, from the home screen, menu, search icon / field, or search screen. It is convenient for users’, as it reduces the need to engage retail staff, or search using keywords, and is another route to conversion. The benefit to a pure play is being able to engage the user without needing a store presence. The benefit to a multi- channel retailer is enabling users to showroom and convert them.

很容易找到商品掃描或影像搜尋功能(例如掃描條碼或開啟影像搜尋撈出產品資訊)
有些使用者會在店裡直接掃描(開啟照相功能並掃描條碼或QR code),或使用影像搜尋(拍照或上傳圖檔),取得商品的詳細資訊。所以這類功能不但要讓使用者找得到,還要能快速開啟。介面可以擺在主畫面、選單、搜尋圖示 / 欄位,或是搜尋畫面。這是方便的功能,有了它就不用跟店員交手、不用輸入關鍵詞,也是另一條能貢獻轉換率的途徑。這樣做還有其他好處,像是只有虛擬通路的業者,無需實體店面也足夠應付消費者。另外,有多種銷售通路的業者,更可以在實體賣場讓顧客乖乖掏錢。

來源:Mobile App UX Principles
來源:Mobile App UX Principles

 

Product or booking can be saved (e.g. to a wish list, favourites, or customer account)
Some users choose not to convert in a single session, while other had no intention of converting, for whom the ability to save their product or booking is an important feature – so that they can continue with their purchase of booking later on. 

可以儲存商品或訂單(例如存在願望清單、最愛或個人帳號)
有些使用者不會在第一時間結帳,也有人沒意願購買,對他們來說,儲存商品或訂單是很重要的功能,方便稍後再完款。

來源:Mobile App UX Principles
來源:Mobile App UX Principles

 

“52% of all sharing is from Smartphones.”
– ShareThis, Q4 2014 Consumer Sharing Trends Report

52%的轉貼分享是透過智慧型手機

 

Wishlist, favourites and basket are synced to a customer account (for access later on any device / browser)
Users should be able to switch from their Smartphone app and continue research, shopping or booking on any of their other devices / browsers, with all items synced in their basket, wish list or favourites, etc.

願望清單、我的最愛與購物車同步到會員帳號(方便用其他裝置 / 瀏覽器存取)
購物車、願望清單或我的最愛等功能當中的內容,應該做到自動同步,即便使用者從智慧型手機的APP切換到任一裝置或瀏覽器,都能繼續研究或選購商品。

 

Product can be easily shared (e.g. via email, G+, Facebook, Twitter, LinkedIn)
Enable users to share – via email or social network – an item with others for further consideration and to assist them in making a purchase decision. Some categories require more research that others, and some users like recommendations, while others need to confer with friends or family. Try to use native platform share functionality in Android and iOS.

方便轉貼商品資訊(例如透過電子郵件、google plus、facebook、linkedin)
讓使用者可以轉寄商品資訊或分享到社群,徵詢其他人的意見,做為選購前的參考。某些商品需要更深入的研究,有人喜歡看網友推薦,有人會找朋友或家人商量。試著導入Android與iOS平台各自的原生分享機制。

 

User can click-to-call in-app
Users can easily click-to-call (CTC) the brand from within the app. The more complicated the purchase process and / or the higher the price to be paid, or more limited the inventory, the more important it is to position CTC as a primary call to action, visible and accessible when / where users expect it to be. CTC is a key micro-conversion that should be tracked and the value attributed to mobile. 

APP內支援點擊通話
使用者可以很容易在APP內點擊通話,聯絡業者。越是繁雜的購物流程、越高價的商品、越有限的庫存,就越有必要將點擊通話強化為主要召喚行動的按鈕,將它擺在當使用者需要時便能立即發現、使用的明顯位置。因智慧型手機的普及,點擊通話具有存在價值,其微轉換的表現也很關鍵,需要加以追蹤。

來源:Mobile App UX Principles
來源:Mobile App UX Principles

 

User can find contact centre availability easily(e.g. on a Contact Us screen)
Users who choose not to CTC from a high-level icon or CTA (e.g. on home screen or primary menu bar), should be able to easily find the brands contact centre screen and availability information, e.g. days and hours (and special days like bank holidays); and what happens outside of that availability (e.g. call when next open, leave a message or call back, etc.).

很容易找到有用的客服中心資訊(例如在聯絡我們的網頁)
就算使用者不理會畫面上高度重要的點擊通話按鈕,或主要召喚動作按鈕(例如在首頁或主要選單列),也能輕易找到該品牌的客服頁面和有用的相關內容,例如營業日與營業時段(還有特殊節日,像是銀行公休);以及非上班時間的處理方式(例如請在下次營業時間來電、留言或稍後回撥等等)

 

“Shoppers who use mobile more, spend more in-store. Frequent mobile shoppers spend 25% more in-store than people who only occasionally use a mobile phone to help with shopping.”
– Mobile in Store Research, 2013, Google

越是重度使用手機的消費者,會在實體通路花越多錢。經常使用手機購物的消費者會比偶爾使用手機輔助購物的人,在實體通路多支出25%的金額。

 

User can locate a business nearby using Smartphone location data (e.g. retail store)
Once users have confirmed the app can access the Smartphones’ location feature, they should be able to easily locate a nearby a brands’ physical business in-app (be it a retail store, car hire station, or hotel, etc.). The more complicated the purchase process and / or the higher the price to be paid, or more limited the inventory, or the more experiential the item, the more important it is to position a store locator as a primary call to action, visible and accessible when / where users expect it to be. Mobile-to-offline is a key micro-conversion that should be tracked and the value attributed to mobile. (See image 20)

透過智慧型手機的定位功能,幫使用者找出距離最近的商店(例如銷售門市)
一旦使用者授權APP取得手機衛星定位,他們應該可以很輕易地透過APP找到距離最近的實體通路(零售商店、租車公司、飯店等等)。購物流程越複雜、價格越高、庫存越少,或越需要實際體驗的商品,尋找門市的功能就越顯重要,應將它突顯為主要召喚行動的按鈕,擺在當使用者需要時便能立即發現、使用的明顯位置。因智慧型手機的普及,虛實整合的行動商務(M2O, Mobile-to-offline)具有存在價值,其微轉換的表現也很關鍵,需要加以追蹤。

 

發佈留言

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