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

2020-12-21 人人都是產品經理

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

年輕人焦慮時間飛逝,搬不完的磚、加不完的班、學不完的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 協議

相關焦點

  • 交互乾貨必收 | App界面互動設計規範
    在上篇《APP界面設計風格》確定下來後,產品經理(兼互動設計)還不用著急將所有的交互稿扔給設計師進行細緻的界面設計。在細節設計啟動前,拉上設計師和安卓前端開發、ios前端開發一起商議確定設計規範先吧!APP設計規範指對APP界面進行風格統一,對界面元素的樣式、顏色和大小設定統一的規範和使用原則。與設計、前端約定好統一的設計規範很重要,約定設計規範可以減少產品、設計、前端的溝通成本;可以使界面設計整潔、統一,減少界面元素的重複設計;可以減少設計素材,控制安裝包的大小。
  • 【To G設計賦能】政務網站信息無障礙設計(研究篇)
    以網際網路環境為例,網際網路產品可以被老年人、視障者、聽障者、讀寫障礙人士等用戶順利使用。近年來,隨著網際網路的快速發展,很多人已經開始廣泛使用電子政務,政府也越來越多地以在線方式向大家提供信息和服務。2.為老年人設計(1)使用較大的字號為了確保老年人用戶能清晰瀏覽網站,而且考慮到並不是每個用戶都使用高解析度的顯示設備,大字號的界面對於他們來說是很重要的。同時,我們還需要避免出現擁擠的大段文字,儘量把信息進行合理的分解,增加留白空間,通過排版組合讓用戶更清晰明確地獲取信息。
  • 產品形態設計——產品定位和產品策略(二)
    上一篇文章,提到了產品定位在產品工作中的重要性,以及我們應該如何以理想的方式去找到並描述自己的產品定位。在確定了自己的產品定位以後,下一步,就要進入到產品的形態設計,以及更深入的功能互動設計。產品形態是什麼到底什麼是產品形態?或者說在產品的形態設計階段,我們到底要確定什麼內容?
  • 滴滴秋招產品筆試題分析(1):給老年人設計出行APP
    編輯導讀:如何設計一款APP是筆試題中常見的一個題型,結合具體的用戶需求和使用場景進行拓展即可。本文作者對滴滴秋招的一個產品經理筆試題進行拆解,闡釋了拿到題目之後的思考方向,分享給大家~~滴滴真題:給60歲以上老年人群體設計一款出行APP。
  • UI、交互、PM應該懂的產品提示文案設計
    一般來講產品的UI設計有三大設計元素組成:色彩、圖形、文字。其中提示文案設計最容易被忽視隨意編寫,或帶有設計者個人人格屬性,與產品調性不相匹。總結:文案設計從產品調性、用戶特徵出發。二、用戶思維,給用戶價值感受
  • 產品設計方法論:設計價值觀,產品設計的指南針(一)
    編輯導語:設計師在進行不同的設計需求時,產品設計方法論可為設計師提供明確的步驟與框架;設計師在設計產品時應該如何思考、從哪個方向進行思考才能設計出用戶體驗好的產品;本文作者分享了關於產品設計方法論中的設計價值觀,我們一起來看一下。
  • 產品系列(四):聊聊產品策劃和產品設計
    二、產品設計產品設計是將產品策劃的方案更具體的表現出來,就像建築設計師已經構思了建築的整體結構,但還需要把更多的細節設計出來。產品設計階段要產出的東西是產品的核心業務流程圖、產品原型圖、用例描述。1.產品經理要建立自己的「組件庫」,在組件庫裡,有自己常用元件,例如按鈕、表單、文字、圖片等,還要有一些組合組件;例如BANNER、常用表單、新聞列表、導航等;另外還有一些頁面模板,例如註冊登錄、用戶中心、常見首頁等。有了「組件庫」,在將產品功能界面化時,可以快速的構建。3.
  • 「驚豔」的導航設計案例欣賞
    簡潔高效的導航菜單設計,能夠有效優化搜索,改善用戶體驗。今天,我們將研究一些網頁導航設計方案。這些案例新穎奪目,生動有趣,原創前衛,令人過目難忘。其中有些設計的複雜程度更將超乎你想像。推選這些案例,不光是因為這些創意的原創性,還有包含其中的先進設計技巧,可以啟發靈感,幫助大家對網頁導航設計領域有更多的認知和了解。01 JovaJova的導航菜單幹淨、整潔、均衡且布局得當。細直線條,網格布局,黑白配色方案以及清新醒目的排版,拼出了幾何韻味十足的優雅界面。淺色的背景,與之相得益彰。
  • 惠州手持除蟎儀產品設計哪家好
    惠州手持除蟎儀產品設計哪家好護理用吹風機結構比較簡單,尺寸比較小。 該產品結合了其他產品的功能和特性,其使用環境的變化、壁掛浴室也可以作為裝飾品使用。 產品尺寸使用浴室產品的相關產品尺寸作為獲取產品外觀尺寸的參考。
  • 歡迎頁/新手引導頁設計:建立良好的產品第一印象
    歡迎頁/新手引導頁如何設計,才能建立良好的產品第一印象呢?一、定義Onboarding英文入職指引,個人翻譯成——新用戶歡迎頁(新手引導頁),指的是啟動App的啟動頁(Launch Screen)之後的歡迎頁面,是用戶對產品的第一印象。
  • 什麼是設計——交互&UI
    二、網際網路產品設計1. 設計流程一般來說網際網路產品的實現主要分為5個階段,以職能劃分為:產品、交互、UI、開發、測試。產品提出需求,交互搭建架構,UI定義風格系統,開發負責實現與落地,完成功能測試後投產上線,而設計(交互/UI)處在產品流程的中間環節。2.
  • 語音互動設計的流程及方法
    二、VUI與GUI相比的優勢與劣勢以目前我們TXD團隊沉澱的 GUI 設計原則為檢驗標準,進行橫向切割,縱向對比 VUI 的優勢劣勢。目前的語音產品包括:純語音(天貓精靈)和語音及界面結合(iphone 的 siri)兩種配置。在設計之初,我們需要了解語音產品的基本硬體配置,這其中也包括麥克風、攝像頭、聽筒、設備聯網程度等,因為,產品的配置會影響我們後期的設計策略與體驗。例如:問語音產品:「世界十大旅遊勝地都是哪些?中國56個名族都有什麼?」
  • 時尚的不僅僅是它們的服裝,還有它們的網站設計
    為了贏得用戶的信任,服裝公司非常依賴他們網站的視覺設計。網上商店試圖在現實世界中複製熟悉的,愉快的和令人上癮的購物氛圍。任何時尚類網站的主要目標是展示他們的產品,所以高質量的圖片是時尚類網站的主要組成部分,這點上和旅遊網站設計不謀而合,當然有吸引力的排版還可以將時尚類網站推向更高層次。
  • 互動設計定律和用戶體驗地圖
    UI 界面的導航設計,為了給用戶提供明確的設計嚮導,兩種導航(底部導航欄和頂部導航欄)的欄目設計通常都控制在 5 個之內,欄目功能過多用戶不容易記憶,5 個之內的導航設計方便用戶記憶和快速操作。
  • 產品設計:「用戶提示」知多少
    二、浮層類提示浮層類提示,屬於較輕量級交互提示,以頁面浮層的形式提示用戶,而非牽動整個界面,主要作用是解釋說明,和文本校驗或是對截斷部分內容進行補充(tooltip控制項)。一般以非模態對話框技術處理。應用:應用於額外說明的場景中,為了滿足產品某項功能。或者大量文字信息截斷,需hover顯示場景中。
  • 三分鐘帶你了解產品設計四大基本原則
    用戶看重的是產品的概念模型,強調用戶體驗,即產品如何設計,為用戶體驗服務。用戶體驗就是產品的核心競爭力,就是產品的生命力。所以,要想懂得如何產品設計,需要了解用戶體驗主要有哪些分類,才能更好地根據每個用戶體驗的分類進行相應的產品設計。用戶體驗可以分為以下四個類型:感觀體驗:呈現給用戶視聽上的體驗,強調舒適性。一般在色彩、聲音、圖像、文字內容、網站布局等呈現。
  • 概念設計和細節設計為什麼在產品設計中都很重要?
    在產品設計開發過程中,工業設計公司的設計團隊可以進行概念設計和詳細設計。了解兩者之間的差異及其在產品設計中的作用對於成功實現任何產品概念至關重要。為什麼兩者在產品設計中都很重要呢?我們一起來看看。它提供了對所提議產品的描述,描述了它應該做什麼,應該如何使用,以及從幫助用戶理解的一組集成思想和概念中看起來是什麼樣子。它是交互,體驗,流程和策略的設計。它是實現人員,知識,產品,服務,流程和盈利能力的願景和無限可能性的關鍵。每個人都在設計師的圖紙上顯示不同的顏色。它基於更抽象的思維,直到您準備好創建詳細設計。2.什麼是細節設計?
  • 聊聊那些有趣的互動設計
    在賈伯斯把「設計」擴展到了普通人都能感受到其威力的今天,我們鼓吹簡約,我們鼓吹用戶體驗,我們鼓吹創新,我們鼓吹酷的產品,我們更鼓吹生存。那些「酷」的創造,並不一定就「好」,但值得書寫。滑鼠和軌跡球說到「酷」的設計,讓我們先忘掉吹上天的 iPhone 以及幾乎統治世界的 Windows 吧。
  • 解密APP導航設計的類型與標準
    導航設計是產品設計中非常重要的一部分,在APP中導航設計更是直接影響用戶對設計的體驗感受,所以導航菜單設計需要考慮周全,發揮導航的價值為構築「怦然心動」的產品打下基礎。所謂導航指的是:引導用戶訪問欄目、菜單、分類等布局結構形式的總稱。
  • 老年人保險產品覆蓋5900多萬人 平安養老險:養老保險將走向「產品+...
    來源:證券時報作者:孫璐璐證券時報記者 孫璐璐我國已進入老齡化社會,60歲以上老年人已達2.5億人。一方面,老齡化進程的快速推進,養老儲備備受關注,個人商業養老保險需求十分旺盛;另一方面,老年人對於保險保障的需求巨大,但由於老年人的身體狀況較差,商業老年保險產品開發比較複雜,保險公司普遍持謹慎態度。