線下終端屏幕價值拆解:商業價值 = 視覺價值 X 操作價值(轉化率)

產品老司機手把手教寫文檔,10天線上課程,零基礎掌握產品經理必備7大文檔撰寫法。了解一下>

本文跟大家聊聊線下終端屏幕的交互體驗。關注這塊,是因為最近在思考一個問題:線下屏幕空間有限,如何最大化屏幕的商業價值?

線下終端設備,并不像手機,像 Android,iOS 系統都已經有非常成熟的設計語言,官方也會提供設計指南,供設計師參考。不管細節怎么變,只要大框框不變,設計出來產品不會太難用。但線下終端設備跟手機使用環境完全不一樣,雖然運行都是一套系統——Android,用戶的使用環境大不一樣,完全照搬手機端設計語言,反而會用戶帶來麻煩。

隨意舉兩個場景:

  1. 元素取色:大部分時間,用戶是在室內使用手機,色彩淡一點深一點都沒問題。像戶外的販賣機,取色就要深些。本來受成本支出的影響,屏幕不可能用得非常好。如果畫像顏色過淺,太陽光一照過來,你可能什么都不清。
  2. 對話框位置:毫無疑問,手機上的彈窗肯定是居中顯示。這一點如果要照搬到線下終端上,體會可能會很差。因為你不知道你屏幕相對用戶的位置,如果用戶面對的是一塊大屏幕,居中顯示彈窗可能相對于用戶偏下。用戶需要下蹲才能點到按鈕,很不自然。或者再進一問,彈窗是必要的嗎?

為什么從用戶體驗談起?

為了更好理解什么是好的用戶體驗?好在哪里?什么是不好的用戶體驗?不好在哪里?我特意去體驗的一些帶有屏幕的終端交互,特別是屏幕比較大的。

像下面的這個機器屏幕非常大,我正常站過去,視覺的水平線正好停留在購買流程那一欄區域。如果我要查看商品,就要低頭查看,查看第一排的商品還好,垂直視角并不大,眼睛不會覺得不適。

線下終端屏幕價值拆解:商業價值 = 視覺價值 X 操作價值(轉化率)

查看第二排,第三排商品,就有些難受,因為俯視視角比較大,眼睛很容易感覺疲勞。要么往后退,要么下蹲一些。而選擇商品或者點擊『下一步』,『下一頁,更不方便了,必須要下蹲才能夠得著那個按鈕。

既然作為交互的終端,在設計之初要考慮到這點。從交互的角度來講,屏幕的結構設計是失敗的。

柜機下方的區域不符合自然交互習慣,沒必要設計到那里。如果考慮到讓用戶看到更多的內容,更應該想到用戶的視覺范圍在哪里,用戶操作區域在哪里?在合理的區域,依照用戶的自然視距來設計商品的大小,能夠放置的商品并不會比圖中的少。

商品擺放的位置會影響到用戶的決策。像超市,便利店,特別是藥店,深諳此道。對一般人來說,買藥是非常低的頻次,對藥品的價格并不了解。什么樣的藥一般花多少,完全沒有概念。藥店為了最大程度獲取利潤,往往將利潤高的商品擺在最顯眼的位置,而常用的品牌,利潤較低的商品一般都放在貨架的下面。

用戶交互的過程:視覺->操作->決策

同樣的道理,如果你想要讓你的產品的商業價值最大化,你需要關心以下兩點,不管你的產品是實物還是服務:

  • 用戶的視覺焦點在哪里?你想讓他看到什么?
  • 用戶的操作習慣什么樣的?你想讓用戶做什么操作?

抽象一下用戶跟柜機交互的過程:從視覺到操作,再到決策。

線下終端屏幕價值拆解:商業價值 = 視覺價值 X 操作價值(轉化率)

以藥品售賣機交互流程為例。從商業角度出發,自然是幫助用戶在最短的時間里找到想要的商品,然后付款完成交易。我們可以將這個流程按上面的交互拆解三個步驟:

  1. 查找商品-視覺;
  2. 選擇商品-操作;
  3. 付款買單-決策。

決策是我們期望用戶完成的動作,但它依賴于前兩個步驟。所以,我們盡可能做到的是,幫助用戶順利完成視覺和操作的任務。

如何衡量視覺價值

1. 視覺垂直范圍

當我們站立時,人眼的垂直視覺可分幾個區域:

  1. 最佳視覺區。最佳覺區在視平線以下 0-10° 范圍內。這個很容易體會到,不管你是看書還是對著電腦,眼睛自然狀態都是向下垂的。
  2. 良好視覺區。良好視覺區在視平線以下 10°-30°,視平線以上 0-25° 之間。
  3. 最大視覺區。最大視覺區在視平線以下 30°-70°,視平線以下 25°-50° 之間。

我嘗試過在頭不動情況下,去觀看最大視覺區的內容,很不舒服。當然,用戶在實際交互過程中,并不會這么做,稍微抬下頭或低下頭就可以了。所以,當你設計 UI 布局時,還是盡可能將重要內容放置在最佳視覺區。

線下終端屏幕價值拆解:商業價值 = 視覺價值 X 操作價值(轉化率)

有了垂直視角范圍,你還需要知道視距和身高,再結合初中學的三角函數公式就能計算出用戶視覺不同區域。提到視距,這個數據非常有意思。在我測算之前,我想肯定是在一個動態范圍內,即使對某個人來說。誰知在測試過程中發現,我多次走到屏幕面前,眼睛與屏幕之間距離都是一個固定的數據。即使換另一個人來測試,數值仍是一樣,而我與對方的身高相差 20cm+。

線下終端屏幕價值拆解:商業價值 = 視覺價值 X 操作價值(轉化率)

2. 屏幕區域視覺價值分解

根據上面測算的數據,你就能知道用戶不同視覺區域落在屏幕的范圍。而了解了屏幕不同區域劃分,就能有針對性面向用戶設計 UI。

線下終端屏幕價值拆解:商業價值 = 視覺價值 X 操作價值(轉化率)

如何衡量操作價值

1. 手臂操作范圍

與視覺類似,因為人體抬手動作的習慣,手臂在不同活動范圍的感知也是一樣。下面是個人在實際體驗過程中經驗總結,并不是從人體工程學嚴謹角度推導出來。僅針對站立時的屏幕交互場景,并不適用于其它站立的交互場景。

根據手臂活動范圍的感知情況,我劃分了四個區域:

  1. 操作最佳區。操作最佳區對應的是最佳視覺區域范圍,視平線以下 0-10° 的垂直區域。
  2. 操作良好區。同樣借用了良好視覺區范圍,視平線以下 10°-30° 的垂直區域。
  3. 操作一般區。實際體驗中發現,當手指抬過視平線以上時,開始覺得有些不自然,當越過頭頂時,開始覺得有些費力。所以,我將操作一般區范圍定義在:視平線與身高之間垂直的區域。
  4. 操作費力區。當手指越來頭頂時,為保證手指區域落在視覺范圍內,需要抬頭,用戶會感覺到費力,而所能抬高的極限范圍就是臂長了。所以,我將操作費力區定義在:身高與臂長之間的垂直區域。

線下終端屏幕價值拆解:商業價值 = 視覺價值 X 操作價值(轉化率)

2. 屏幕區域操作價值分解

同樣,按視覺價值分解的思路,根據操作難易的維度,來劃分屏幕的操作價值。考慮到大部分用戶右手操作習慣,沒有將整個平行區域定義劃為最佳操作區。而是僅將右半部分劃分最佳操作區,左半部分并入到操作良好區。

線下終端屏幕價值拆解:商業價值 = 視覺價值 X 操作價值(轉化率)

商業價值 = 視覺價值 * 操作價值(轉化率)

如果將流程的完成看作為商業價值的完成,那么商業價值就有兩部分完成:視覺價值和操作價值。視覺價值決定用戶看到的商品/服務價值,操作價值影響用戶點擊的轉化率。需要注意的是,視覺價值 > 操作價值。用戶只有先看到,才可能會去操作。兩者相乘才是最終的結果,即:

商業價值 = 視覺價值 * 操作價值(轉化率)

假如你也負責的產品涉及線下終端屏幕的交互,不妨看一看,你們的設計是否合理,如何改進UI方案,提升商業價值。當然,上面分解的思路是從用戶體驗入手,提供了一個設計框架。在實際的產品設計中,還要看最終的數據效果如何,只有驗證通過的方案,才是好的方案。

#專欄作家#

lei,微信公眾號:monster_talks,人人都是產品經理專欄作家。豐巢產品經理。主導過智能硬件,物流行業的啟動項目。專注To B業務策劃和數據分析,輔助業務決策。

本文原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自Unsplash,基于CC0協議

給作者打賞,鼓勵TA抓緊創作!
評論
歡迎留言討論~!
  1. 謝謝,剛好要設計大屏顯示的ui就看到這篇文章,收益良多

    回復
  2. 請教下目前,線下功能屏市場如何?往這個方向做會遇到哪些問題?

    回復
浙江十一选五开奖查询