拿掉顏色檢視視覺設計

多家電視台拿掉顏色後的選舉開票畫面

每當投票結束,總有許多選民會守在電視機前等待開票。以前,我通常會先瀏覽各家電視台的開票畫面,再選擇重要資訊看起來最清楚的一台來觀看,不過2020總統大選開票前,我發現公視將多家電視台的畫面整合在一個「開票直播平台」上,讓觀眾想選哪一家看就立刻可以點開,比起之前需要一台一台切換,好像省了不少時間。

而當各家電視台的畫面擺在一起,也讓人注意到各台之間排版、圖示與呈現手法的差異。究竟開票畫面的設計要怎麼做,才能讓有不同需求的選民都能順利觀看、理解呢?讓我們一起來看看。

掌握資訊的重要性與易讀性

當所有電視台的開票畫面放在一起,就能發現:有些畫面的重要資訊一目瞭然,有些卻較為複雜,需要花一些時間找到重點。

當然,開票畫面要呈現的資訊很多,不可能一次包山包海,而觀眾也可能分布在不同的年齡層,有不同視力與不同資訊需求,因此,設計者需要做的,就是盡可能呈現出大家都重視的重要資訊、用清晰的方式呈現,而刪除掉不必要的訊息。

所有畫面排在一起,很容易看出哪些畫面的資訊較清楚。

例如,總統開票結果通常比區域立委受到更多選民關注,所以必須放在視線的最佳位置,也就是左上角,所佔畫面的比例與文字大小也需要大一些。在進行區域立委或政黨票數探討、或播放其他現場畫面時,也可做畫面更動或縮放,不過要注意過多的更動會形成視覺干擾的負荷,對於民眾獲取資訊是不方便的。又如,總統副總統候選人的號次雖然重要,但絕大多數選民都知道,真的要寫出來,也只需寫上數字即可,不用連「號次」兩字都寫出來。

另外,顏色與圖像若運用得當,有助於快速接收與判讀資訊,例如使用候選人政黨的黨徽或色彩,可以代替政黨資訊,不用另外把政黨名稱寫出來;但這麼做也要適可而止,太多、太雜亂的顏色圖案,反而會造成反效果。至於政黨色彩該用在色塊、票數還是人名等文字上?可能帶來不同的感受,但色塊的易讀性還是比較高。而總統副總統候選人搭配照片,也比起只使用人名為佳,這樣就算不懂中文或者對文字辨識有困難的人也能看懂。

以灰階呈現,確認對比是否夠強烈

在通用設計上,只要文字或背景有色彩,就要注意對比是否夠強烈,特別是充斥複雜資訊與運用多種顏色的畫面,缺乏對比的情況可能會讓色盲、色弱者難以辨別。而最容易掌握對比是否夠清晰的方式,就是將畫面先調成灰階試試看。我們會發現,當得票數字用政黨色彩呈現時,在白底上就沒有使用黑字來得對比清晰。

透過灰階色彩處理後,可掌握對比強度與色盲患者的需要。

當然,有些顏色是無法改變的,如政黨或企業等組織的識別色彩,電視台不可能隨意調整。但這些色彩上的文字顏色,或是這些色彩呈現的大小、形狀與位置,都是可以巧妙設計的。例如不把得票數放在色塊上,而是在旁邊以白底黑字呈現資訊,或是將色彩用在框線上等等,都是可行的作法。

另外,整體設計是否夠簡潔,也能透過灰階畫面檢視。如果在灰階畫面上已經顯得凌亂,一旦恢復色彩後,情況只會更糟。除去色彩後,由於少了鮮艷顏色的干擾,自然能關注到一些細節設計,如形狀、字體大小與粗細、資訊區塊的位置編排等是否恰當,有沒有干擾到重要資訊的易讀性等等。

如同台灣每次的重要選舉,各界總是呼籲選民「不看顏色,選賢與能」。在進行複雜的視覺設計時,或許也可以先「除去色彩」,確認整體設計與資訊呈現是否都能看得清楚。

原始來源:天下獨立評論 余虹儀專欄 「「不看色彩、只看本質」──拿掉顏色以後的開票畫面長怎樣?

此文正式取得「獨立評論@天下」授權刊登

相關閱讀:〈視覺障礙的種類與困擾〉、〈門牌設計的通用設計考量〉、〈路標設計與登山教育

視覺障礙的種類與困擾

一個互動設計的介面搭配螢幕,可以模擬白內障、青光眼、飛蚊症和黃斑部病變視覺障礙所看到的畫面

2019年中秋節的前一晚,在打羽毛球的過程中,不小心被夥伴的球拍打到右眼。歷經了漫長的急診等候及處理過程,確定沒有傷到視力,算是不幸中的大幸。然而,在前往醫院途中,或在急診室外候診時,我真真實實體驗到了視障者的不便。

因受傷暫時拿下隱形眼鏡的我,一眼近視700多度,另一眼因腫脹而幾乎睜不開,即使有人攙扶,前方也都沒有任何人、物品或障礙阻擋,我也發現自己不太能放心前進。平時走路算快的我不得不小心翼翼的緩步向前,似乎一切習以為常的生活,都變成了慢動作。

你知道嗎?兩眼視差超過200度,就會影響生活

受傷第二天,右眼已經可以微微張開了,但主要還是仰賴戴上隱形眼鏡的左眼在看東西。很明顯可以感覺到,自己對距離感的掌握變得比較不精準,很容易撞到房中的桌椅、電風扇;也發現兩眼視差太大,不論看近看遠,都有些許模糊感,對焦需要多費點神。

眼科醫生表示,兩眼視差只要超過200度,就會影響生活了!受過傷的眼睛也較容易產生飛蚊症、青光眼等病變,需要定期追蹤檢查,平時還要多留意看東西是否有模糊或產生黑影等現象,一有異狀應立即就醫。

視覺設計該考量的各種觀看情況

在進行視覺設計時,設計者想像的主要觀看者,大多是一般視力正常的人。然而,有視覺障礙的人其實不在少數。

近視和老花,某程度都算是視覺障礙,只是可以透過眼鏡矯正;但白內障、飛蚊症、黃斑部病變、青光眼、色盲和色弱等障礙,則較難單純透過輔助改善。很多人對於視覺障礙者眼中看到的世界不太了解,也難以想像,為了讓更多民眾能認識不同的視覺障礙,2014年台北設計城市展的通用設計展區曾設計一個互動裝置,可調整螢幕上的文字大小與背景顏色的對比,也能選擇不同視覺障礙進行模擬畫面。

台北設計城市展通用設計展區的視覺互動裝置,希望讓參觀民眾關注更多視覺障礙者的視覺設計需要。

由於現代人長時間觀看電視、電腦與手機螢幕等3C產品,不僅近視孩童和高度近視人口的比例越來越高,白內障患者的人數也快速增加,眼睛病變患者的年齡層更是逐漸下降。預防甚於治療,除了避免用眼過度,定期檢查眼睛之外,對於各種視覺障礙也要有基本的認識。

不同視障者的不同需求

很多人少有與視障者相處的經驗,對於如何和視障者相處,要注意哪些事,常常一知半解。

在引導視障者時,協助者應伸出手臂供他們扶握,而非抓或推他們。如遇見導盲犬或服務犬,除非被賦予權限,否則也應避免與狗狗互動。另外,青光眼患者是周邊視野被遮蔽、看不清楚,與他們對話時要避免站在兩側;黃斑部病變患者則是中心視野被遮蔽,與他們對話應避免站在正前方。

最左邊螢幕呈現的是模擬黃斑部病變患者所看到的畫面。

總之,不是只有全盲的人才是視障者,各式各樣的視覺病變也都需要不同的協助。藉由通用設計考量到不同群體的需求,也能使更多人在社會上便利生活。

原始來源:天下獨立評論 余虹儀專欄 「視障者不是只有盲人!從一次受傷,體會到通用設計的重要

此文正式取得「獨立評論@天下」授權刊登

相關閱讀:〈考量視障者行走的安全〉、〈視覺以外的感官洞察力〉、〈五感減一洞察訓練

門牌設計的通用設計考量

台灣的門牌

新北市新的門牌設計(2019年3月底)引發了廣大討論,重點不外乎:新的門牌設計樣式美感欠佳,且功能不如現有的門牌。美感的部分也許各方看法不一,但新門牌的「功能」很明顯存在了不少使用上的問題。

其實,從社會需求的角度看來,門牌的設計應該導入「通用設計」,考量到所有使用族群的觀看能力與使用需求。

在馬路上即能觀看清楚,是門牌設計的一大重點。

先釐清門牌設計的使用族群

提到門牌的使用族群,大家很自然地就會先想到郵差。郵差確實經常需要依門牌投遞信件,但郵差通常都有固定送信的區域,做久了便會很熟悉該區的地址與住家。反而是不太熟悉、初來乍到的訪客,很仰賴查看門牌。

而任何人在觀看門牌的時候,不是在交通工具上(比如坐在車內),就是走在路上。像是計程車司機、汽機車駕駛、搭公車或走在人行道的民眾等。因此,能在馬路上就看清楚,將是門牌設計的一大重點。

文字大小和顏色對比是基本考量

門牌屬於說明性標示,文字資訊不宜過多,文字大小也不能過小,同時,必須將觀看距離納入考量。根據日本國土交通省公共交通機關旅客設施順暢移動整備方針,若觀看距離為4~5公尺內,建議字體高度應大於20mm,而門牌便是屬於這樣的觀看距離。

此外,字體的選擇應避免使用筆畫較細的明體,在觀看時才不會產生筆畫斷掉而無法辨識的狀況。當然,直接使用通用設計的字體,就可避免上述情況。

除了文字大小與觀看距離,說明性標示在進行色彩設計時,也應避免使用過多顏色,特別是多色混雜。另外,文字顏色和底色也需要考量色盲與色弱患者的辨識情況。例如不宜使用紅色文字和綠色底圖,會導致紅綠色盲難以辨識文字。最保險的用法是搭配白色,因為色盲與色弱患者皆能辨識白色,不論是何種顏色文字搭配白底,或是何種顏色底圖搭配白字,都可以看得清楚。同時,顏色對比也非常重要,文字和底圖兩個顏色的明度差應在5以上。

若呈現灰階,資訊仍可清楚辨識,對色盲和色弱患者就無影響。

透過視覺設計提供方向性

在台灣,門牌編號主要是採取馬路兩邊一側雙號、一側單號的排列。因此,看到第一個門牌號碼,便可知悉目標門牌在這排,或是到對面找尋。但在號碼變大或變小的方向性上,就要走一小段,看到兩個以上的門牌號碼才能確定。

為了讓汽車或機車駕駛可以看到第一個門牌,就確知目標門牌的方向,其實也可以在視覺上進行方向性的設計,提供箭頭或類似形式的圖示資訊,也能減少駕駛在路上找門牌產生停停走走,進而影響到交通的情況。

原始來源:天下獨立評論 余虹儀專欄 「好門牌,不用嗎?從「通用設計」的角度,給新北市門牌一些建議

此文正式取得「獨立評論@天下」授權刊登

通用設計參考書單

五本通用設計觀念與原則的書籍

在設計領域,以通用設計為主題的書籍很少。因此,在推薦通用設計參考書單時,通常不會只有推薦通用設計觀念介紹,或是通用設計教科書,也會提及相關的書籍,包括認識不同使用族群和五感設計等多方面。另外,為了讓更多人了解通用設計觀念可以運用在各個領域,也會分享不同領域的通用設計應用實例書籍。

通用設計觀念與原則的書籍

對通用設計觀念還不甚了解的人,建議可以先從介紹通用設計觀念與原則的書籍著手。如下:

  1. 《愛˙通用設計-一個充滿愛與關懷的設計觀念》
  2. 《通用設計教科書》
  3. 《Universal Design通用設計的法則-從人性出發的設計學》
  4. 《Universal Principles of Design》
  5. 《Universal Design: Creating Inclusive Environments》

五本通用設計觀念與原則的書籍

不同領域的通用設計應用書籍

在任何領域都可以應用通用設計觀念,例如以下的三本書分別是介紹公園、時尚和色彩的通用設計應用。

  1. 《公園のユニバーサルデザインマニュアル―人と自然にやさしい公園をめざして》
  2. 《ユニバーサルファッション宣言》
  3. 《Color Universal Design カラーユニバーサルデザイン》

三本通用設計應用的書籍,包括色彩、公園和時尚通用設計

除此之外,高齡化社會,公共建設與居家環境都很需要導入通用設計。公共設計要考量全體民眾,可多看看探討此範疇的設計書籍。

  1. 《指示標誌系統設計法則規劃方針》
  2. 《道路の移動円滑化整備ガイドライン》
  3. 《Circle》第5期:到處都是指標,為什麼我還是會迷路?
  4. 《和設計大師一起逛車站》

介紹標誌設計和道路規劃的三本書

建築或室內設計領域的通用設計應用,則可參考以下書籍:

  1. 《Universal Design for the Home: Great Looking, Great Living Design for All Ages, Abilities, And Circumstances》
  2. 《High-Access Home: Design and Decoration for Barrier-Free Living》
  3. 《台灣室內設計》第17期:室內空間的通用設計
  4. 《臺北市居住空間通用設計指南》

四本室內設計通用設計應用的書籍

通用使用性的書籍

產品介面越來越複雜,如何讓不同年齡、知識能力與經驗的使用者在任何情境下都能自行操作,並有良好的使用性,即是通用使用性(Universal Usability)強調的方向之一。特別是現在有很多自助操作系統(Kiosk),非常需要符合通用使用性,才能讓初次使用者能順利操作、完成任務,同時不會讓熟手感到繁瑣而不願使用。

  1. 《Universal Usability》
  2. 《Universal Usability-Past, Present, and Future》
  3. 《使用者介面之通用使用性與介面模式》
  4. 《Designing the User Interface: Strategies for Effective Human-Computer Interaction (6th Edition)》
  5. 《 Universal Interface Inspection Methods》
  6. 《 Designing Training and Instructional Programs for Older Adults》
  7. 《Designing Effective Wizards: A Multidisciplinary Approach》
  8. 《Webビジネスのためのユニバーサルデザイン成功の法則65》

四本通用使用性相關的書籍

探討五感的書籍

通用設計七大原則之一的易感性原則在強調設計應考量不同感官能力的使用者,也就是讓失去某一感官,或是某些感官能力較差的人也能接收到重要資訊。由此可知,多了解人類的五感能力,閱讀探討五感設計的書籍,對通用設計能力的提升肯定是有幫助的。

  1. 《Age Of Super Sensing センシングデザインの未来》
  2. 《Haptic五感の覚醒》
  3. 《氣味之謎:主宰人類現在與未來生存的神祕感官》
  4. 《觸覺不思議》
  5. 《感官之旅–感知的詩學》
  6. 《換一雙眼睛散步去:跟11位專家在日常風景中找到驚奇》

四本與五感主題相關的書籍

介紹特殊使用族群的書籍

多了解不同使用族群的能力與需要是從事通用設計很重要的基礎,可以多看看探討熟齡族和老年人的相關書籍。而心理學或認知主題相關的書籍有助了解使用者的行為能力和需求,也可廣泛學習。

  1. 《搶占熟齡市場:最有購買力的新興族群引爆10大商機》
  2. 《Designing Training and Instructional Programs for Older Adults》
  3. 《超高齡社會的消費行為學:掌握中高齡族群心理,洞察銀髮市場新趨勢》

探討為熟齡族或老年人設計的書籍

另外,多了解視障者、聽障者和輪椅使用者等不同身障者的相關書籍與研究也很重要。如果覺得有些書籍的內容略為艱深,也可觀看以特殊使用族群為角色的電影作為入門。想讓小朋友培養通用設計觀念,則可透過具通用設計觀念的繪本,從故事中自然感受到族群融合,了解到世界上有著各式各樣的人。

書籍:

  1. 《一公升的眼淚─亞也的日記》(脊髓小腦萎縮症)
  2. 《150cm Life》(矮個子)
  3. 《衰神左撇子》(左手慣用者)

電影:

  1. 《小星星。眨眼睛》(視障者)
  2. 《聽見天堂》(視障者)
  3. 《聽說》(聽障者)
  4. 《寶米恰恰》(雙胞胎)
  5. 《搖滾上月球》 (罕見疾病)
  6. 《霍金:愛的方程式》(漸凍人)
  7. 《我想念我自己》(阿茲海默症)

繪本:

  1. 《阿迪和朱莉》
  2. 《Guji-Guji》

兩本具通用設計觀念的繪本

 

「2014臺北設計城市展」通用設計展區

由左至右的展版介紹是循序漸進的

通用設計展區顧問內容

擔任「2014臺北設計城市展」通用設計展區的策展顧問,提供展覽規畫之方向及建議。

通用設計展區顧問重點

此展區以推廣通用設計觀念為目的,加上通用設計即是注重所有使用者需求的設計觀念,故策展以觀者角度出發,掌握以下五個重點:

通用設計觀念說明展板
展覽一開始先介紹通用設計觀念,再透過視覺、互動和體驗設計逐步加深觀者印象。

1. 傳遞正確的通用設計觀念

在傳遞通用設計觀念時,希望讓參觀者知道通用設計並不影響美學,亦即符合BUD(Beautiful Universal Design)。並能理解無障礙設計與通用設計有何不同,以及無障礙設計導入通用設計有何助益。

2. 讓參觀者有機會感同身受

在現場進行不同使用族群的模擬體驗,設計互動體驗設施,讓參觀者藉此對其他族群產生關懷及同理心。

3. 注重展覽的邏輯性與順暢度

讓參觀者能有循序漸進的理解,並注重各種面向的整合。在介紹順序上,先陳列看得見,再呈現看得懂的視覺設計案例。

4. 以生活案例讓參觀者有所感

在不同面向的通用設計,盡量以生活中容易看見的設計與容易遇到的困擾做為案例,讓參觀者容易理解,並了解通用設計的重要性。

5. 讓參觀者也成為觀念傳遞者

展覽內容豐富多元,參觀者不一定能記住所學到的新知識。將通用設計基本觀念與原則做成展覽紀念品(可愛插畫與圖說的小紙),吸引參觀者帶走,可留存閱讀,也可向家人朋友分享此觀念。

通用設計展區顧問成果

可調整螢幕上文字及背景顏色的互動式裝置
可調整螢幕上文字及背景顏色,並可加上青光眼、飛蚊症、白內障和黃斑部病變的互動式裝置。

透過文字與背景,以及可選擇不同視覺障礙效果的互動設計,讓參觀者了解文字與背景即使強調對比清楚,也可採用兼具美感的配色。

兩張沙發,一張很軟,一張很硬
在展場放置兩張外觀一樣的沙發,但其中一張很軟,另一張很硬。

以一張較硬、一張較軟的沙發,讓進行模擬體驗的參觀者感受到老人和孕婦較難從很軟的沙發自行起身。

由左至右的展版介紹是循序漸進的
讓觀者先了解視覺的通用設計,再感受資訊的正確性及理解性。

考量展覽的邏輯性與順暢度,在介紹的順序上,強調通用設計應先求看得見,如文字大小(視覺設計)等,再求看得懂,如資訊的正確性及理解性(資訊設計),從觀看到體驗(空間設計)。

透過相同的居家擺設,模擬陳列出色弱者所看見的狀態(圖中右方),讓參觀者感受一樣的生活場景,不同視覺障礙者看到的畫面卻大不同。

以可愛的圖文繪製通用設計重要觀念及原則在一張張小紙上
將通用設計重要觀念及原則,以可愛的圖文繪製,做成日曆形式,讓觀者可撕下來帶走。

除了認識通用設計,還希望大家可以落實通用設計觀念在生活及工作上,讓世界變得更美好!讓參觀者帶些什麼(知識、同理心…)回家吧!