如何設計老齡化產品(二):12個必須關注的設計點 - 優設-UISDC

                                        如何設計老齡化產品(二):12個必須關注的設計點

                                        2018/09/22 評論區

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

                                        年輕人焦慮時間飛逝,搬不完的磚、加不完的班、學不完的 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,對于老人來說,引起注意的響應時間和閱讀文字的速度等都比較慢,所以這些互動的時間得長。再比如其他聲音、振動的反饋也需要適當放大來提高互動效果。

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

                                        歡迎關注作者的微信公眾號:「圓滾滾的設計」

                                        圖片素材作者:Manu

                                        「為每個用戶做無障礙設計」

                                        優設大課堂

                                        非特殊說明,本文版權歸原作者所有,轉載請注明出處
                                        本文地址:http://www.ndwc.tw/designing-elderly-products-2

                                        發表評論 加載中....

                                        評論加載中....

                                        uisdc

                                        評論區都快餓癟了,看看我期盼的小眼神...

                                        sketch 優設大課堂 轉場動效 界面設計 設計師 扁平化設計 交互設計師 排版布局 職場 平面設計 設計師專訪 素材下載 設計流程 視覺設計 配色 用戶體驗設計 web前端開發 AI教程 海報設計 設計理論 神器下載 字體下載 設計規范 設計趨勢 動效設計 psd下載 產品設計 圖標設計 logo設計 ICON 神器推薦 職場規劃 App設計 字體設計 酷站推薦 交互設計 ui設計 設計師職場 優秀網頁設計 用戶體驗 ps技巧 酷站 PS教程 網頁設計 經驗分享
                                        wechat

                                        優設官方微信

                                        50萬設計師關注

                                        微信號:youshege

                                        把好文章收藏到微信

                                        打開微信,掃碼分享
                                        學設計 優設網 在這里

                                        江苏11选5开奖结果