老齡化產(chǎn)品設(shè)計(jì)(二):老年人產(chǎn)品的顏色、圖像、排版、交互、導(dǎo)航設(shè)計(jì)
老年人群體和年輕人群體有很多的不同,在產(chǎn)品設(shè)計(jì)上也需要有很多區(qū)別。之前有分析過老年人的用戶群體特征,這篇文章我們來看看如何針對(duì)老年人群體做產(chǎn)品設(shè)計(jì)。
年輕人焦慮時(shí)間飛逝,搬不完的磚、加不完的班、學(xué)不完的Knowledge、趕不完的Deadline。聊微信刷微博玩抖音看知乎,在碎片化的時(shí)間中刷微博。
老年人感嘆生活平淡,親人遠(yuǎn)隔萬里相聚難,網(wǎng)絡(luò)繁華復(fù)雜騙子多,下象棋打麻將看電視廣場(chǎng)舞,被邊緣化的網(wǎng)絡(luò)下尋開心。
生活太苦太乏味,每個(gè)人都要含塊糖。
筆者在《老齡化產(chǎn)品設(shè)計(jì)(一):老人的身體機(jī)能有哪些改變》一文分析了老年人視覺、聽覺、觸覺等感官特征的一些變化,總結(jié)了注意、記憶、思維等認(rèn)知特征的一些特點(diǎn)。本文與大家一起探討下老齡化產(chǎn)品設(shè)計(jì)有哪些關(guān)注的點(diǎn)。
文章較長(zhǎng),先把總結(jié)的設(shè)計(jì)關(guān)注點(diǎn)置前:
- 重要元素避免使用藍(lán)色
- 保證良好的顏色對(duì)比度
- 使用容易閱讀的字體家族
- 文字越大越好字高5.62mm左右
- 讓用戶自行調(diào)節(jié)字號(hào)大小
- 使用簡(jiǎn)單有意義的圖標(biāo)
- 提供圖形的名稱
- 信息架構(gòu)盡量不改變
- 多任務(wù)時(shí)要聚焦當(dāng)前任務(wù)
- 手勢(shì)動(dòng)作簡(jiǎn)單
- 觸摸目標(biāo)尺寸間距足夠大
- 互動(dòng)時(shí)間要長(zhǎng)
一、顏色Color
隨著年齡的增長(zhǎng),角膜、瞳孔括約肌、晶狀體和視網(wǎng)膜等生理調(diào)節(jié)力下降,影響到視覺的靈敏度、明暗、空間、顏色和信息加工的變化。
1. 重要元素避免使用藍(lán)色
界面設(shè)計(jì)上可以使用老年人喜愛的中性色,避免顏色純度、明度過高造成對(duì)眼睛的刺激;可以使用對(duì)比強(qiáng)烈的互補(bǔ)色突出重要元素的信息內(nèi)容和功能位置。
但由于晶狀體變黃變渾濁,會(huì)選擇性的吸收藍(lán)光,從而導(dǎo)致老年人對(duì)藍(lán)色的鑒別能力比對(duì)紅、綠色鑒別能力下降更明顯,所以界面上的重要元素要避免使用藍(lán)色。
2. 保證良好的顏色對(duì)比度
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.
良好的對(duì)比度一直是Material Design 和 Human Interface Guidelines 中著重強(qiáng)調(diào)的。在WCAG 2.0 (Web Content Accessibility Guideline,Web內(nèi)容無障礙指南)中給出了顏色對(duì)比度的指導(dǎo)意見:
- 對(duì)比度(AA 級(jí)):文本的視覺呈現(xiàn)以及文本圖像至少要有 4.5:1 的對(duì)比度;大號(hào)文本(字重為 Bold 時(shí)大于 18px,字重為 Regular 時(shí)大于 24px )以及大文本圖像至少有 3:1 的對(duì)比度;
- 對(duì)比度(AAA 級(jí)):文本視覺呈現(xiàn)以及文本圖像至少有 7:1 的對(duì)比度;大號(hào)文本(字重為 Bold 時(shí)大于 18px,字重為 Regular 時(shí)大于 24px )以及大文本圖像至少有 4.5:1 的對(duì)比度。
有一些在線工具可以幫助我們測(cè)試對(duì)比度是否滿足 WCAG 2.0 AA 的「色彩無障礙設(shè)計(jì)」標(biāo)準(zhǔn),比如WebAIM`s Color Contrast Checker、Contrast-ratio、EightShapes Contrast Grid、Color Tool等網(wǎng)站。
二、排版Typography
為了給用戶帶來良好的閱讀體驗(yàn),需要考慮設(shè)計(jì)的易讀性。易讀性是指人們能否看見、區(qū)分、認(rèn)出你所提供的文本里的文字。
1. 使用容易閱讀的字體家族
據(jù)不完全統(tǒng)計(jì),英文字體已有幾萬種,中文字體也有幾千種,但大部分都是垃圾。
英文主要有襯線字體 Serif 和無襯線字體 Sans-Serif 兩種類型,中文主要有宋體、黑體、楷體等,若用西方的字體分類,宋體可以列為襯線字體,黑體為無襯線字體,楷體介于兩者之間。
在屏幕界面上,無襯線字體看起來比較醒目,輪廓清晰,因此可以避免視覺疲勞。所以iOS和Android等系統(tǒng)的默認(rèn)字體都是無襯線字體,如San Francisco、Robot、微軟雅黑、思源黑體等。
但是也有觀點(diǎn)認(rèn)為:襯線字體可以增加人們閱讀時(shí)的視覺參考,在文章篇幅較長(zhǎng)的情況下,能夠提高正文閱讀肯辨認(rèn)的連續(xù)性,則襯線體的可讀性更強(qiáng)。
同時(shí)也可以提高字重,加粗文字使輪廓更加清晰。一般情況下我們使用regular肯medium兩種字重,對(duì)于老齡化產(chǎn)品,可以再提高一個(gè)等級(jí)。
2. 文字越大越好字高5.62mm左右
在Ant Design設(shè)計(jì)語言中有講到確認(rèn)最小字體的方法,通過肉眼到物體之間的距離、物體的高度以及人的最小可接受視角,構(gòu)成一個(gè)三角函數(shù)關(guān)系。
ANSI/HFS 認(rèn)為:對(duì)于普通用戶,最小視角0.3度時(shí)的閱讀效率最好,一般眼睛距離電腦屏幕為50cm,根據(jù)三角函數(shù)公式能算出合適的字高。對(duì)于不同PPI的屏幕可以通過兩輪換算(cm到inch,inch到pixel)得出最小字號(hào)。
有一個(gè)叫”Visual Angle Calculator”的網(wǎng)站有個(gè)程序可以直接計(jì)算,建議使用。
老人視覺能力下降,有學(xué)者研究表明老人偏好的最小可接受視角是0.75度,而視距是43cm,換算之后相當(dāng)于字高5.62mm。而在JIS規(guī)格中的《不同年齡最小可讀文字大小》也有記載,希望可供參考,如下圖:
3.?讓用戶自行調(diào)節(jié)字號(hào)大小
對(duì)于一個(gè)系統(tǒng)來說標(biāo)準(zhǔn)方案并不一定能夠滿足所有人,老人隨年齡增加,視力障礙愈發(fā)嚴(yán)重,讓用戶自行調(diào)節(jié)字號(hào)大小,可以滿足不同時(shí)期的需求,如iOS系統(tǒng)中總共有12種尺寸可以選擇。
三、圖像Iconography
這里的圖像主要代指圖標(biāo),在GUI設(shè)計(jì)中,圖標(biāo)的基本功能是迅速傳遞信息,同時(shí)也可以區(qū)分內(nèi)容層次,增加界面的韻律。
1. 使用簡(jiǎn)單有意義的圖標(biāo)
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: 圖標(biāo)應(yīng)該是簡(jiǎn)單的圖形語言以及高辨識(shí)度。清晰、直觀的圖標(biāo)更能明確指代含義便于識(shí)別記憶。
各大廠的設(shè)計(jì)規(guī)范都指明圖標(biāo)設(shè)計(jì)需要簡(jiǎn)單友好和高辨識(shí)度。邏輯推理和概括抽象等思維能力越老越喪失,在圖標(biāo)上的設(shè)計(jì)更應(yīng)該注意,符合自然感知,能準(zhǔn)確的表達(dá)含義,避免過度抽象。
2. 提供圖形的名稱
是否給圖標(biāo)加上標(biāo)簽文字一直是個(gè)爭(zhēng)論不休的話題。有人認(rèn)為“只要對(duì)圖標(biāo)的熟悉程度夠高,圖標(biāo)的含義便會(huì)烙印在用戶的記憶中”,而在《About Face》中也說到“使用圖標(biāo)能提高中間級(jí)用戶的使用效率;而使用文字,對(duì)于新手用戶更適合?!痹诰W(wǎng)頁端可以有鼠標(biāo)懸浮到圖標(biāo)上再顯示標(biāo)簽文字的解決方法,而在手機(jī)端就尷尬了。
對(duì)于老齡用戶,或許有部分用戶是沒接觸過互聯(lián)網(wǎng)產(chǎn)品的,或許有部分用戶是從門戶網(wǎng)站就開始接入互聯(lián)網(wǎng)的,20年變遷逐漸變老。但我們不能對(duì)用戶的知識(shí)儲(chǔ)備做任何假定,還是盡量提供標(biāo)簽文字為好。
四、導(dǎo)航Navigation
1. 信息架構(gòu)盡量不改變
搖一搖、朋友圈、公眾號(hào)、微信支付、看一看、小程序,無論添加了多少新功能,微信能夠始終保持底部四個(gè)標(biāo)簽欄,這樣的產(chǎn)品不多的。
可見設(shè)計(jì)產(chǎn)品初期,好的信息架構(gòu)是多重要。
用戶在產(chǎn)品上完成一個(gè)任務(wù),必然會(huì)從一個(gè)地方探索著到達(dá)目的地,就像去超市購(gòu)物,一個(gè)好的導(dǎo)航系統(tǒng)能夠指引我們很快的找到想買的商品,則在產(chǎn)品中清晰的UI導(dǎo)航是非常重要。
固定不變的導(dǎo)航系統(tǒng)能讓用戶記憶路徑,進(jìn)入超市知道去哪里買洗漱用品,去哪里買水果,不看導(dǎo)航指引牌就可以徑直走過去。固定的UI導(dǎo)航系統(tǒng)可以使用戶依靠肌肉記憶使用產(chǎn)品,效率更高。長(zhǎng)期程序性記憶不會(huì)隨年齡增加而衰減,但短期的情景記憶會(huì)損失,這就意味著老人學(xué)習(xí)新概念的能力較差,更改了導(dǎo)航系統(tǒng),可能又得花很大的成本去學(xué)習(xí)。
五、交互Interaction
人和系統(tǒng)如何“對(duì)話”,簡(jiǎn)單直接是有效法則。在老齡化產(chǎn)品設(shè)計(jì)時(shí),還是有很多交互方面的注意點(diǎn)。
1. 多任務(wù)時(shí)要聚焦當(dāng)前任務(wù)
隨著年齡增長(zhǎng),工作記憶有所衰退,記一件事情需要更長(zhǎng)的時(shí)間,存儲(chǔ)新的記憶比年輕人差。在生活中老年人經(jīng)常會(huì)用紙筆記錄來輔助記憶,我爺爺就打印了一張待辦事項(xiàng)的紙,每天在紙上劃掉吃過的藥。所以在產(chǎn)品設(shè)計(jì)中要注意的是,需要逐步介紹產(chǎn)品功能,防止認(rèn)知過載;由于記憶差,則盡量避免跨屏任務(wù);在長(zhǎng)任務(wù)中,給出明確的反饋和最終目標(biāo)的提醒。
2. 手勢(shì)動(dòng)作簡(jiǎn)單
從電腦端“單擊、雙擊、拖拽”等,到如今手機(jī)端“單擊、長(zhǎng)按、3D touch、雙指捏合”等交互動(dòng)作,用戶可以操作的手勢(shì)動(dòng)作越來越多。隨著年齡增大,人們的運(yùn)動(dòng)控制能力退化,對(duì)于老年人固然不會(huì)進(jìn)行比較復(fù)雜的手勢(shì)動(dòng)作,還是以“點(diǎn)擊、滑動(dòng)”為主。
如果必須要使用這些復(fù)雜的操作,務(wù)必確保這些激活的動(dòng)作可以通過點(diǎn)擊或UI按鈕來實(shí)現(xiàn)。或者可提供視頻幫助,用戶就可以隨時(shí)查看如何正確進(jìn)行手勢(shì)操作。
3. 觸摸目標(biāo)尺寸間距足夠大
老人的視覺和觸覺的感知能力降低,在界面設(shè)計(jì)中需要放大觸摸目標(biāo)使目標(biāo)項(xiàng)足夠清晰,能夠提高老人點(diǎn)擊的準(zhǔn)確率和速度。44*44 point是Apple HIG建議的一個(gè)最小點(diǎn)觸面積,這里的44point可以換算成物理尺寸為0.27英寸(6.86mm)。有文章建議老齡化產(chǎn)品的點(diǎn)觸最小目標(biāo)為10.5mm,同時(shí)減少相鄰互動(dòng)元素之間的距離,至少相距2mm。
再說“Fitts` Law”中表明任意一點(diǎn)移動(dòng)到目標(biāo)中心點(diǎn)位置所需的時(shí)間與該點(diǎn)到目標(biāo)的距離和大小有關(guān),距離越大時(shí)間越長(zhǎng),目標(biāo)越大時(shí)間越短。所以為了提高效率,需要講點(diǎn)擊目標(biāo)設(shè)定為合理的尺寸大小。
4. 互動(dòng)時(shí)間要長(zhǎng)
老年人由于生理原因?qū)е伦⒁饬σt鈍些且較難持久,失去了年輕時(shí)控制注意過程所需的精度和速度。所以產(chǎn)品與老人互動(dòng)時(shí)需要持續(xù)較長(zhǎng)時(shí)間,比如一般的Toast會(huì)展示3s,對(duì)于老人來說,引起注意的響應(yīng)時(shí)間和閱讀文字的速度等都比較慢,所以這些互動(dòng)的時(shí)間得長(zhǎng)。再比如其他聲音、振動(dòng)的反饋也需要適當(dāng)放大來提高互動(dòng)效果。
綜上,本文從顏色、排版、圖像、導(dǎo)航、交互等界面設(shè)計(jì)的基礎(chǔ)內(nèi)容,對(duì)老齡化產(chǎn)品設(shè)計(jì)提供了幾點(diǎn)建議,皆在提高產(chǎn)品使用的可用性和易用性,滿足老年人的使用需求,體現(xiàn)出科技產(chǎn)品對(duì)老年人的關(guān)懷,能夠繼續(xù)享受數(shù)字科技生活。
作者:舟航,微信公眾號(hào):圓滾滾的設(shè)計(jì)
本文由 @舟航 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Unsplash ,基于 CC0 協(xié)議
我覺得讓我茅塞頓開,文章中我會(huì)備注資料來源的
大大你好,我是一名大學(xué)生,我做了一個(gè)老年閱讀APP參加互聯(lián)網(wǎng)加的比賽,能參考您的穩(wěn)重理念嘛?
文章好棒??!方便說一下您的郵箱嘛!有驚喜呦?。?*^▽^*)
hang89757@126.com 我就不信驚喜是廣告
優(yōu)秀,2篇都看完了, 即使現(xiàn)在仍舊以年輕人為主,但很多產(chǎn)品已經(jīng)開始在暗搓搓的計(jì)劃老年產(chǎn)品了,不能用年輕人的視角解讀老年產(chǎn)品,
2篇文章都從根本上描述了老年產(chǎn)品的緣由,獲益頗多