Mobile App UX Principles – chp.5 Usability Hygiene(43p~46p) 中文化

think with Google

Mobile App UX Principles: Improving User Experience and Optimising Conversion

這篇文章的重點是附件的完整報告:Mobile App UX Principles,2015年4月發佈,全文將近50頁,以下簡譯第五章重點。

5・Usability hygiene


Text and content is easy to read (even outside in sunlight)
For text to always be legible you should use a font size at-or-above 11 points (even when users select a small text size); and the font used throughout the app should be consistent. Make sure there is sufficient perceivable contrast between the app content and the background, especially when used outside in sunlight. In Android, type should be specified in scale-independent pixels (sp), and layouts supporting scalable types tested against these settings.

– 為了使文字容易辨識,字級應該在11pt以上(就算使用者自訂更小的字級,也要hold住)。
– APP內使用的字體應當一致。
– 確認圖地對比夠大,尤其在大太陽下使用。
– android的字級單位應當用SP(文字大小是相對非絕對,視使用者的系統偏好設定),只要畫面中有可調字級的文字存在,就要多實測不同設定值。
編按:關於字體單位SP的補充說明請見Android User Interface Design: Basic Font Sizes。使用者在手機顯示設定裡變更文字的基本尺寸,如下圖,將會改變單位為SP的文字大小。例如:24SP的文字在"Huge"狀態下會比"Normal"更大,但24PX的文字大小不受"Huge"或"Normal"狀態影響。

來源:Android User Interface Design: Basic Font Sizes


34% prefer an app – versus a mobile website – when they have poor WiFi or 3G connection.
Google App Re-engagement, UK, 2015



Content is accessible when user has no connection (i.e. no 3G or WiFi)
Make sure that key content within the customer journey is accessible – i.e. cached in-app – even when there is little or no data connection via either 3G or WiFi. This needs to be carefully identified and prioritised, to enable a seamless user experience and to avoid abandonment.

– 善用快取暫存關鍵內容,確保使用過程中能隨時看到,即便當下3G或wifi的連線品質不佳,甚至毫無訊號。
– 這環節很重要,需審慎、優先處理。目的是達到無接縫的使用體驗,減少使用者砍APP的機率。


Spacing and size of content and controls make them easy to interact with
Make it easy for users to interact with app content and controls by providing sufficient spacing between all elements for controls to be easily touched / tappable. Design touch / tap elements that provide direct feedback when normal, pressed, disabled, etc. (e.g. Android uses illumination and dimming) to help the user see the whole tappable area and learn what the tappable elements are throughout the app.
Android recommends controls have a touch target size of 48dp for on screen elements such as buttons, icons, tabs with icons, etc.
iOS recommends tappable controls have a hit target of about 44 x 44 points.

– 為操作介面與周邊元素保留足夠的間距,使用者才好觸控、點擊。
– 可觸控、點擊的操作介面需設計直接回饋,意指點擊前、後、無效等狀態的樣式(相當於android系統用加亮與變暗來表示)。一方面使用者能清楚看到點擊範圍,同時認知APP當中可以觸控的按鈕長什麼樣子。
– 螢幕上例如按鈕、圖標、頁籤等觸控介面,android系統建議適合點擊的面積為48dp,至於ios系統則是44pt。


Modal views are used for self-contained tasks within a multi-step process
When users need to achieve a simple self-contained task within a multistep process, and that task doesn’t belong in the app UI constantly, use a modal view. iOS has two modal views: vertical and flip. They can either cover the whole or part of the screen, contain copy and functionality, and should be completed or cancelled, and exited easily

模態檢視(modal views)的功能五臟俱全,在多步驟流程中能獨立完成特定的工作。
– 當使用者在多步驟的流程中必須完成一項簡單的特定工作,而這項工作又不算常態的APP介面,這時候就可以使用模態檢視。
– ios預設兩種模態檢視的過場效果:垂直(vertical)與翻轉(flip),這兩種過場可以遮蓋整個畫面,或遮住部分畫面。介面內包含文本與功能,方便完成工作、取消或離開。


Primary call-to-action buttons are sticky / persistently visible (even when screen is scrolled)
It is good practice to have call-to-action buttons above the fold, and on pages with rich or detailed content, it can be enabled by having a persistently sticky button at the bottom of the screen – visible even when the screen is scrolled – for users to act at any given moment. (See images 37, 38, 39)

即使畫面捲動,仍要看得見動作按鈕(primary call-to-action buttons)。
– 理想狀況是一開啟畫面,動作按鈕就在視線內。
– 在商品的詳細資訊頁,可以把動作按鈕持續固定在螢幕最下方,捲動畫面時也一樣,方便使用者隨時點選。(如原文的圖37、38、39)。

來源:Mobile App UX Principles


In forms, call-to-actions that are below the fold automatically scroll-up after the user has populated the necessary fields (users should never have to look for call-to-actions)
If a form has a call-to-action below the fold, make it easy for users to see and act on it, by automatically scrolling the button in to view once the user has populated the necessary fields



Form labels are either above form fields or are floating labels (in Android)
Form labels should be above form fields so that users can easily see what they are filling in and why. Form fields to the side greatly reduce the space available for the fields. Form field descriptions within the field disappear once text entry begins and if a user is then distracted they may not remember what they need to complete later.
In Android, instead of putting form labels above fields, a floating inline label can be used, e.g. when a user engages with a text input field it causes the label to move and float above the field, so as to guide the user whilst entering data.

欄位標籤(label)位於輸入欄位上方,或是運用material design的浮動標籤(android版)。
– 欄位標籤放在上方,使用者輸入資料時,可以很容易看到正在輸入的資料,知道提供這些資料的原因。
– 當標籤與輸入欄位並排,等於吃掉輸入表單的空間。
– 若把說明擺在輸入欄位內,缺點是開始輸入資料時,說明文字就會消失。若使用者稍後分心,未能一氣呵成填完,再回來操作時,可能也搞不清楚接下來要填什麼了。
– android版本的APP,目前可以運用material design模組,使欄位標籤變成"浮動的行內標籤"(floating inline label)。簡單講,當使用者點擊輸入欄位,原本在欄位內的標籤不會消失,轉而移動到輸入欄位上方。


Form submission errors are reduced through communication (explanations of what to put into specific form fields)
Explain to users what you expect them to enter in each form field and in what format. This will reduce the amount of errors and increase the percentage of users completing the process

– 向使用者說明各個欄位要填哪些資料,以及格式的要求,以降低失敗率,提高完成填寫的機率。


Form input is validated in real-time (after field entry you will see if it is correct or not)
Warning people that they are making mistakes even as they make them will save them the time and frustration of submitting and then discovering mistakes.

– 出錯當下就講。
– 不要等到使用者按下送出鍵才告知錯誤,既浪費時間又打擊他們的信心。


In a form, cursor is placed in first field and the appropriate input is displayed by default
Reduce the number of form clicks and help focus the user, by placing the cursor in the first form field by default, and by displaying the appropriate input type (e.g. keyboard or dial-pad) by default. Make this effort on behalf of the user so that they can complete forms faster.

– 減少表單填寫過程中的點擊次數,藉由一些技巧幫助使用者保持專注,例如第一個輸入欄位不需點擊,預設進入輸入狀態,並顯示適當的輸入介面(例如虛擬鍵盤或純數字撥號鍵)。
– 為使用者多做這些,讓他們能更快填完表單。


In a form, user can select from a list of horizontal tags above the virtual keyboard (instead of from a vertical list hidden below it)
Mobile screens are cut in half when the virtual keyboard is displayed, and the majority of a vertical list is hidden. So when the user needs to choose from a form list, consider using a horizontal tag list, which are displayed above the keyboard and makes better use of the available screen to help the user choose. (See image 40)

– 當虛擬鍵盤呈現出來時,手機螢幕為切成兩半,且大多數的直排清單是隱藏的。
– 所以當使用者需要從列表中的清單做選擇時,會考慮使用橫排選項中的清單,其呈現在鍵盤上方且善用充足的螢幕空間以助使用者選擇。(如原文的圖40)。

來源:Mobile App UX Principles


In a form, telephone number entry is restricted to a dial-pad (i.e. numbers only)
When users need to enter a telephone number, only display the dial-pad, to limit their input to numbers and not characters. This will reduce their choices and mistakes, and accelerate completion. Considerations include: display the number format that they need to input by default with an input mask – and not by gradual reveal – to assist them; don’t accept characters entered (mask them out).

– 當某個欄位要求使用者輸入電話號碼,出現的虛擬鍵盤應當是撥號鍵盤,以限制使用者輸入數字,而非文字。這做法的用意在於限縮選項、減少錯誤發生,以加快完成速度。
– 注意事項:在輸入欄位設定輸入遮罩(input mask),導引使用者在指定格式內輸入電話號碼,並非採用漸進揭露(gradual reveal)的方式協助使用者。同時輸入欄位要自動濾掉文字。


In a form or basket, user can edit item quantity using a stepper control (e.g. in basket or checkout)
When users need to increase or decrease the quantity of an item in a basket, use the +/- stepper control (which consists of two segmented control tabs). A stepper enables the user to make small adjustments to a quantity, and is especially relevant for items categories or high priced items that are unlikely to be increased or decreased by more than one or two. Avoid dropdown menus. (See image 41)

在表單或購物車頁面,修改購買數量的操作介面建議用步進控制項(stepper control)。
– 當使用者需要增加或減少購物車裡的商品數量,理想的操作介面是帶有一個"+"與一個"-“號按鈕的步進控制項。
– 步進控制項方便使用者微調商品數量,特別適用於項目類別或高價商品,因為調整幅度通常不超過1~2筆。
– 避免使用下拉選單。(如原文的圖41)

來源:Mobile App UX Principles


In a form or basket, user can select from a set of options – that are related but mutually exclusive – using a segmented control (e.g. for selecting gender or title) When users need to select from a set of 5-or-fewer options – that are related but mutually exclusive – provide a segmented control, e.g. when selecting their gender (M | F) or their title (Mr | Miss | Mrs | Sir | Lord). Segmented controls display all options by default, enabling the user to compare and quickly select. Be consistent and avoid mixing images and text in a single segmented control tab, or across the set of controls. (See image 42)

在表單或購物車頁面,使用者可以藉由分段控制項(segmented control)點選相關但互斥的選項(就像選擇性別或稱謂)。
– 需要使用者從5個以下相關又互斥的選項中做出選擇時,應提供分段控制項,例如選擇性別或稱謂。
– 預設情況下分段控制項會列出所有選項,方便使用者對照並快速完成選擇。
– 保持介面的一致性,避免在單一選項或整組選項中混搭圖像與文字。(如原文的圖42)



你的電子郵件位址並不會被公開。 必要欄位標記為 *