09.13 老齡化產品設計(二):老年人產品的顏色、圖像、排版、交互、導航設計

老年人群體和年輕人群體有很多的不同,在產品設計上也需要有很多區別。之前有分析過老年人的用戶群體特徵,這篇文章我們來看看如何針對老年人群體做產品設計。

老龄化产品设计(二):老年人产品的颜色、图像、排版、交互、导航设计

年輕人焦慮時間飛逝,搬不完的磚、加不完的班、學不完的Knowledge、趕不完的Deadline。聊微信刷微博玩抖音看知乎,在碎片化的時間中刷微博。

老年人感嘆生活平淡,親人遠隔萬里相聚難,網絡繁華複雜騙子多,下象棋打麻將看電視廣場舞,被邊緣化的網絡下尋開心。

生活太苦太乏味,每個人都要含塊糖。

筆者在《老齡化產品設計(一):老人的身體機能有哪些改變》一文分析了老年人視覺、聽覺、觸覺等感官特徵的一些變化,總結了注意、記憶、思維等認知特徵的一些特點。本文與大家一起探討下老齡化產品設計有哪些關注的點。

文章較長,先把總結的設計關注點置前:

  • 重要元素避免使用藍色
  • 保證良好的顏色對比度
  • 使用容易閱讀的字體家族
  • 文字越大越好字高5.62mm左右
  • 讓用戶自行調節字號大小
  • 使用簡單有意義的圖標
  • 提供圖形的名稱
  • 信息架構儘量不改變
  • 多任務時要聚焦當前任務
  • 手勢動作簡單
  • 觸摸目標尺寸間距足夠大
  • 互動時間要長

一、顏色Color

隨著年齡的增長,角膜、瞳孔括約肌、晶狀體和視網膜等生理調節力下降,影響到視覺的靈敏度、明暗、空間、顏色和信息加工的變化。

1. 重要元素避免使用藍色

界面設計上可以使用老年人喜愛的中性色,避免顏色純度、明度過高造成對眼睛的刺激;可以使用對比強烈的互補色突出重要元素的信息內容和功能位置。

但由於晶狀體變黃變渾濁,會選擇性的吸收藍光,從而導致老年人對藍色的鑑別能力比對紅、綠色鑑別能力下降更明顯,所以界面上的重要元素要避免使用藍色。

2. 保證良好的顏色對比度

Human Interface Guidelines: Insufficient contrast in your app makes content hard to read for everyone. Icons and text might blend with the background, for example. An online color contrast calculator can help you accurately analyze the color contrast in your app, to ensure that it meets optimal standards. Strive for a minimum contrast ratio of 4.5:1, although 7:1 is preferred because it meets more stringent accessibility standards.

良好的對比度一直是Material Design 和 Human Interface Guidelines 中著重強調的。在WCAG 2.0 (Web Content Accessibility Guideline,Web內容無障礙指南)中給出了顏色對比度的指導意見:

  • 對比度(AA 級):文本的視覺呈現以及文本圖像至少要有 4.5:1 的對比度;大號文本(字重為 Bold 時大於 18px,字重為 Regular 時大於 24px )以及大文本圖像至少有 3:1 的對比度;
  • 對比度(AAA 級):文本視覺呈現以及文本圖像至少有 7:1 的對比度;大號文本(字重為 Bold 時大於 18px,字重為 Regular 時大於 24px )以及大文本圖像至少有 4.5:1 的對比度。
老龄化产品设计(二):老年人产品的颜色、图像、排版、交互、导航设计

有一些在線工具可以幫助我們測試對比度是否滿足 WCAG 2.0 AA 的「色彩無障礙設計」標準,比如WebAIM`s Color Contrast Checker、Contrast-ratio、EightShapes Contrast Grid、Color Tool等網站。

二、排版Typography

為了給用戶帶來良好的閱讀體驗,需要考慮設計的易讀性。易讀性是指人們能否看見、區分、認出你所提供的文本里的文字。

1. 使用容易閱讀的字體家族

據不完全統計,英文字體已有幾萬種,中文字體也有幾千種,但大部分都是垃圾。

英文主要有襯線字體 Serif 和無襯線字體 Sans-Serif 兩種類型,中文主要有宋體、黑體、楷體等,若用西方的字體分類,宋體可以列為襯線字體,黑體為無襯線字體,楷體介於兩者之間。

老龄化产品设计(二):老年人产品的颜色、图像、排版、交互、导航设计

在屏幕界面上,無襯線字體看起來比較醒目,輪廓清晰,因此可以避免視覺疲勞。所以iOS和Android等系統的默認字體都是無襯線字體,如San Francisco、Robot、微軟雅黑、思源黑體等。

但是也有觀點認為:襯線字體可以增加人們閱讀時的視覺參考,在文章篇幅較長的情況下,能夠提高正文閱讀肯辨認的連續性,則襯線體的可讀性更強。

同時也可以提高字重,加粗文字使輪廓更加清晰。一般情況下我們使用regular肯medium兩種字重,對於老齡化產品,可以再提高一個等級。

2. 文字越大越好字高5.62mm左右

在Ant Design設計語言中有講到確認最小字體的方法,通過肉眼到物體之間的距離、物體的高度以及人的最小可接受視角,構成一個三角函數關係。

ANSI/HFS 認為:對於普通用戶,最小視角0.3度時的閱讀效率最好,一般眼睛距離電腦屏幕為50cm,根據三角函數公式能算出合適的字高。對於不同PPI的屏幕可以通過兩輪換算(cm到inch,inch到pixel)得出最小字號。

有一個叫”Visual Angle Calculator”的網站有個程序可以直接計算,建議使用。

老龄化产品设计(二):老年人产品的颜色、图像、排版、交互、导航设计

老人視覺能力下降,有學者研究表明老人偏好的最小可接受視角是0.75度,而視距是43cm,換算之後相當於字高5.62mm。而在JIS規格中的《不同年齡最小可讀文字大小》也有記載,希望可供參考,如下圖:

老龄化产品设计(二):老年人产品的颜色、图像、排版、交互、导航设计

3. 讓用戶自行調節字號大小

對於一個系統來說標準方案並不一定能夠滿足所有人,老人隨年齡增加,視力障礙愈發嚴重,讓用戶自行調節字號大小,可以滿足不同時期的需求,如iOS系統中總共有12種尺寸可以選擇。

老龄化产品设计(二):老年人产品的颜色、图像、排版、交互、导航设计

三、圖像Iconography

這裡的圖像主要代指圖標,在GUI設計中,圖標的基本功能是迅速傳遞信息,同時也可以區分內容層次,增加界面的韻律。

1. 使用簡單有意義的圖標

Material Design:System icons are designed to be simple, modern, friendly, and sometimes quirky. Each icon is reduced to its minimal form, expressing essential characteristics.

Human Interface Guidelines: Create recognizable, highly-simplified designs. Too many detials can make an icon confusing or unreadable. Strive for a simple, universal design that most people will recognize quickly and won`t find offensive.

Ant Design: 圖標應該是簡單的圖形語言以及高辨識度。清晰、直觀的圖標更能明確指代含義便於識別記憶。

各大廠的設計規範都指明圖標設計需要簡單友好和高辨識度。邏輯推理和概括抽象等思維能力越老越喪失,在圖標上的設計更應該注意,符合自然感知,能準確的表達含義,避免過度抽象。

2. 提供圖形的名稱

是否給圖標加上標籤文字一直是個爭論不休的話題。有人認為“只要對圖標的熟悉程度夠高,圖標的含義便會烙印在用戶的記憶中”,而在《About Face》中也說到“使用圖標能提高中間級用戶的使用效率;而使用文字,對於新手用戶更適合。”在網頁端可以有鼠標懸浮到圖標上再顯示標籤文字的解決方法,而在手機端就尷尬了。

對於老齡用戶,或許有部分用戶是沒接觸過互聯網產品的,或許有部分用戶是從門戶網站就開始接入互聯網的,20年變遷逐漸變老。但我們不能對用戶的知識儲備做任何假定,還是儘量提供標籤文字為好。

四、導航Navigation

1. 信息架構儘量不改變

搖一搖、朋友圈、公眾號、微信支付、看一看、小程序,無論添加了多少新功能,微信能夠始終保持底部四個標籤欄,這樣的產品不多的。

可見設計產品初期,好的信息架構是多重要。

用戶在產品上完成一個任務,必然會從一個地方探索著到達目的地,就像去超市購物,一個好的導航系統能夠指引我們很快的找到想買的商品,則在產品中清晰的UI導航是非常重要。

老龄化产品设计(二):老年人产品的颜色、图像、排版、交互、导航设计

固定不變的導航系統能讓用戶記憶路徑,進入超市知道去哪裡買洗漱用品,去哪裡買水果,不看導航指引牌就可以徑直走過去。固定的UI導航系統可以使用戶依靠肌肉記憶使用產品,效率更高。長期程序性記憶不會隨年齡增加而衰減,但短期的情景記憶會損失,這就意味著老人學習新概念的能力較差,更改了導航系統,可能又得花很大的成本去學習。

五、交互Interaction

人和系統如何“對話”,簡單直接是有效法則。在老齡化產品設計時,還是有很多交互方面的注意點。

1. 多任務時要聚焦當前任務

隨著年齡增長,工作記憶有所衰退,記一件事情需要更長的時間,存儲新的記憶比年輕人差。在生活中老年人經常會用紙筆記錄來輔助記憶,我爺爺就打印了一張待辦事項的紙,每天在紙上劃掉吃過的藥。所以在產品設計中要注意的是,需要逐步介紹產品功能,防止認知過載;由於記憶差,則儘量避免跨屏任務;在長任務中,給出明確的反饋和最終目標的提醒。

2. 手勢動作簡單

從電腦端“單擊、雙擊、拖拽”等,到如今手機端“單擊、長按、3D touch、雙指捏合”等交互動作,用戶可以操作的手勢動作越來越多。隨著年齡增大,人們的運動控制能力退化,對於老年人固然不會進行比較複雜的手勢動作,還是以“點擊、滑動”為主。

老龄化产品设计(二):老年人产品的颜色、图像、排版、交互、导航设计

如果必須要使用這些複雜的操作,務必確保這些激活的動作可以通過點擊或UI按鈕來實現。或者可提供視頻幫助,用戶就可以隨時查看如何正確進行手勢操作。

3. 觸摸目標尺寸間距足夠大

老人的視覺和觸覺的感知能力降低,在界面設計中需要放大觸摸目標使目標項足夠清晰,能夠提高老人點擊的準確率和速度。44*44 point是Apple HIG建議的一個最小點觸面積,這裡的44point可以換算成物理尺寸為0.27英寸(6.86mm)。有文章建議老齡化產品的點觸最小目標為10.5mm,同時減少相鄰互動元素之間的距離,至少相距2mm。

再說“Fitts` Law”中表明任意一點移動到目標中心點位置所需的時間與該點到目標的距離和大小有關,距離越大時間越長,目標越大時間越短。所以為了提高效率,需要講點擊目標設定為合理的尺寸大小。

4. 互動時間要長

老年人由於生理原因導致注意力要遲鈍些且較難持久,失去了年輕時控制注意過程所需的精度和速度。所以產品與老人互動時需要持續較長時間,比如一般的Toast會展示3s,對於老人來說,引起注意的響應時間和閱讀文字的速度等都比較慢,所以這些互動的時間得長。再比如其他聲音、振動的反饋也需要適當放大來提高互動效果。

綜上,本文從顏色、排版、圖像、導航、交互等界面設計的基礎內容,對老齡化產品設計提供了幾點建議,皆在提高產品使用的可用性和易用性,滿足老年人的使用需求,體現出科技產品對老年人的關懷,能夠繼續享受數字科技生活。

題圖來自 Unsplash ,基於 CC0 協議


分享到:


相關文章: