作者：Kent Eisenhuth是皇家藝術(shù)學(xué)會(huì)的會(huì)員，也是Drawing Product Ideas的作者，Kent開發(fā)了改善協(xié)作的視覺語言

使用數(shù)據(jù)可視化案例研究，我們將探索可訪問性優(yōu)先的方法如何引導(dǎo)我們走上為圖表創(chuàng)建更好的視覺設(shè)計(jì)的道路。在整篇文章中，我們將重點(diǎn)介紹如何使用看似受約束的 Web 內(nèi)容可訪問性標(biāo)準(zhǔn) （WCAG） 成為我們設(shè)計(jì)過程中的授權(quán)因素。我們還將討論這種方法如何使我們?yōu)槊總€(gè)人帶來意想不到的更好結(jié)果。

您是否聽說過為可訪問性進(jìn)行設(shè)計(jì)會(huì)為每個(gè)人帶來更好的結(jié)果？下面是一個(gè)關(guān)于輔助功能優(yōu)先的方法如何為圖表帶來整體更好的視覺設(shè)計(jì)的故事。

2018年，Kent是Google Cloud第一個(gè)專門的數(shù)據(jù)可視化團(tuán)隊(duì)的創(chuàng)始成員。凱在團(tuán)隊(duì)成立后不久就加入了。早期，我們在許多Google產(chǎn)品中創(chuàng)建了幾個(gè)突出的可視化效果。我們的團(tuán)隊(duì)是一群充滿激情的設(shè)計(jì)師、研究人員和工程師，他們還編寫了Material Design的數(shù)據(jù)可視化指南。然而，隨著我們繼續(xù)履行我們的使命，我們意識(shí)到我們的工作并不像我們希望的那樣具有包容性，當(dāng)我們開始采用新的可訪問性標(biāo)準(zhǔn)時(shí)，我們意識(shí)到我們還有更多工作要做。我們強(qiáng)烈認(rèn)為，可訪問性超越了合規(guī)性，我們有機(jī)會(huì)創(chuàng)造真正有用的東西。

對可訪問數(shù)據(jù)體驗(yàn)的需求

數(shù)據(jù)可視化是能力主義者

可視化效果僅適用于那些能夠完全看到的人。根據(jù)全國盲人聯(lián)合會(huì)的數(shù)據(jù)，美國有760萬人患有視力障礙。我們還知道，色盲影響全球每12名男性中就有1名。這些人通常不依賴輔助技術(shù)（如屏幕閱讀器）來消費(fèi)Web內(nèi)容，他們將成為我們案例研究的重點(diǎn)。對于大多數(shù)人來說，圖表提供的價(jià)值和見解會(huì)丟失，在某些情況下，圖表提供的信息很少甚至沒有。作為我們組織世界信息并使其普遍可訪問的使命的一部分，我們有責(zé)任通過使每個(gè)人都可以訪問數(shù)據(jù)來成為網(wǎng)絡(luò)的好公民。

可訪問性優(yōu)先的方法帶來了更好的視覺設(shè)計(jì)

與移動(dòng)優(yōu)先類似，可訪問性優(yōu)先方法在設(shè)計(jì)過程的一開始就考慮了可訪問性要求和約束。為了正確地做到這一點(diǎn)，我們通常會(huì)與可訪問性測試團(tuán)隊(duì)一起驗(yàn)證我們的想法，并與殘障人士共同制定我們的解決方案。通過這個(gè)過程，我們學(xué)到了很多東西，它完全改變了我們對表示數(shù)據(jù)的看法。

有許多方法可以使數(shù)據(jù)可訪問，但現(xiàn)在，讓我們專注于視覺設(shè)計(jì)的可訪問性優(yōu)先方法。在過去的兩年中，我們的團(tuán)隊(duì)提出了很多關(guān)于數(shù)據(jù)可訪問性的問題。信不信由你，這些問題中的大多數(shù)都集中在可訪問的圖表顏色，編碼和視覺設(shè)計(jì)上。這就是為什么我們現(xiàn)在想把重點(diǎn)放在視覺設(shè)計(jì)上。我們的可訪問性優(yōu)先方法可確?？稍L問性是圖表視覺設(shè)計(jì)的核心，而不會(huì)影響焦點(diǎn)，犧牲可讀性或添加不必要的圖表摘要。

讓我們將這種方法與紐約市的古根海姆博物館（Guggenheim Museum）進(jìn)行比較。在這個(gè)博物館中，所有的展品和藝術(shù)品都圍繞著一個(gè)大型的無障礙坡道排列，該坡道螺旋式地穿過建筑物的各個(gè)樓層，如下圖所示。

古根海姆博物館標(biāo)志性的內(nèi)部螺旋坡道和中庭景觀。（圖片來源：Evan-Amos）

這個(gè)坡道是每個(gè)人在建筑物中體驗(yàn)藝術(shù)品的核心部分，它本質(zhì)上是可訪問的。這比在建筑物中的經(jīng)驗(yàn)要好得多，這些建筑物具有隱藏的坡道，電梯和改裝設(shè)備，供行動(dòng)不便或沒有行動(dòng)能力的人使用。

現(xiàn)在，讓我們來看看如何將這種思維應(yīng)用于可視化圖表設(shè)計(jì)。

挑戰(zhàn)

最近，我們的任務(wù)是幫助開發(fā)人員了解其應(yīng)用、網(wǎng)站和數(shù)字體驗(yàn)的整體延遲和性能。應(yīng)用的基礎(chǔ)代碼庫通常由一系列函數(shù)組成，這些函數(shù)的執(zhí)行是為了使其功能正常工作。代碼結(jié)構(gòu)越高效，函數(shù)執(zhí)行速度越快，整個(gè)應(yīng)用的性能也越好。

減少延遲是任何良好應(yīng)用體驗(yàn)的重要組成部分。畢竟，誰愿意整天盯著加載屏幕呢？很明顯，可視化將提供應(yīng)用底層代碼的可概覽診斷視圖，并且可用于幫助開發(fā)人員發(fā)現(xiàn)應(yīng)用代碼中的低效率。

選擇圖表

為了可視化應(yīng)用性能和延遲，我們考慮了幾種圖表類型。為此，我們希望將代碼庫中的每個(gè)函數(shù)表示為其自己的圖表。對于每個(gè)函數(shù)，我們都會(huì)繪制每次運(yùn)行時(shí)執(zhí)行所需的時(shí)間。

有幾個(gè)圖表用于顯示變量的分布。下圖中的早期探索顯示了代碼庫中同一函數(shù)的所有記錄的執(zhí)行時(shí)間：

繪制在圖形上的示例函數(shù)的執(zhí)行時(shí)間。

考慮輔助功能標(biāo)準(zhǔn)

首先，我們遵循了Web內(nèi)容可訪問性指南（以下簡稱WCAG），以確保我們的可視化符合必要的可訪問性標(biāo)準(zhǔn)。這些指南通常用于確定審計(jì)員是否可以將數(shù)字體驗(yàn)視為可訪問。這使我們能夠縮小選擇范圍并選擇一個(gè)大方向。最初，我們考慮使用直方圖（見上文），因?yàn)樗惹懊骘@示的示例更具可擴(kuò)展性。

顯示為函數(shù)記錄的執(zhí)行時(shí)間的示例直方圖。

考慮低視力用戶

我們知道，可視化需要提供一目了然的見解，即使對于視力低下的人，以200%的縮放級別查看內(nèi)容也是如此。因此，默認(rèn)情況下，可視化應(yīng)該是可擴(kuò)展的，并占用盡可能少的屏幕空間。這樣，在放大時(shí)，低視力用戶不必滾動(dòng)即可閱讀圖表。

當(dāng)直方圖減小時(shí)，比較其條形的高度并將其值映射回壓縮的 Y 軸尤其困難。在這些情況下，可讀性會(huì)迅速下降。下圖突出顯示了壓縮直方圖的一些常見可讀性問題：

具有壓縮 Y 軸的直方圖示例。突出顯示的條形表示的值很難相互比較。（大預(yù)覽)

在某些情況下，我們知道我們想要比較多個(gè)函數(shù)的性能。比較兩個(gè)堆疊直方圖之間的條形高度并不容易：

堆疊直方圖示例。突出顯示的條形表示的值很難相互比較。（大預(yù)覽)

由于我們減小直方圖大小的能力有限，我們也知道滾動(dòng)將成為一個(gè)問題。因此，我們很快消除了使用直方圖的可能性。

相反，我們考慮使用連續(xù)色帶來表示代碼庫中多次運(yùn)行函數(shù)的記錄執(zhí)行時(shí)間（見下圖）。我們還可以堆疊多個(gè)泳道以提供額外的見解。

示例熱圖。（大預(yù)覽)

考慮顏色對比度要求

WCAG 輔助功能指南要求圖形與其背景的對比度至少達(dá)到 3：1。有了這個(gè)要求，我們對顏色值的選擇更加有限，尤其是在白色背景上顯示可視化效果時(shí)，這是Google當(dāng)前品牌的核心部分。為了適應(yīng)這種情況，我們決定使用有限的離散順序調(diào)色板，而不是應(yīng)用映射到連續(xù)值范圍的連續(xù)色帶。

顏色可以映射到一組分組的值范圍或條柱。這種技術(shù)被稱為數(shù)據(jù)分箱，它使我們能夠?qū)⑤^小范圍的顏色應(yīng)用于可視化。在這樣做的過程中，我們可以確保我們使用的顏色符合WCAG的最低3：1對比度要求。

下圖顯示了連續(xù)調(diào)色板和分箱離散連續(xù)調(diào)色板的比較：

連續(xù)調(diào)色板和離散順序調(diào)色板的比較。（大預(yù)覽)

為了實(shí)現(xiàn)所需的 3：1 顏色對比度，我們在每個(gè)熱圖圖塊之間打開了空白。這樣，我們就不必?fù)?dān)心顏色的陰影滿足彼此的對比度。

具有高對比度調(diào)色板的熱圖示例。（大預(yù)覽)

雖然此更新滿足 WCAG 輔助功能要求，但它使熱圖更難閱讀。此外，這種可視化的大膽性質(zhì)可能會(huì)將焦點(diǎn)從可視化之外可能更重要的屏幕元素上移開，例如警告和警報(bào)。

考慮色盲用戶

為了減少對解釋顏色的依賴性，WCAG要求使用顏色之外的東西來傳達(dá)意義。這可以是紋理、圖形元素、圖標(biāo)符號(hào)或其他編碼。很容易添加任何紋理，圖標(biāo)或圖形元素來滿足此要求。但是，必須非常小心地完成。在對可訪問圖表設(shè)計(jì)進(jìn)行的幾項(xiàng)可用性研究中，我們發(fā)現(xiàn)參與者誤解了這些添加的內(nèi)容。通常，人們覺得它們代表了額外的指標(biāo)，狀態(tài)或帶有意想不到的含義。最后，我們必須選擇一些微妙而有效的東西。

經(jīng)過仔細(xì)考慮，我們選擇了其他編碼。一旦我們引入了將值范圍裝箱的想法，我們就可以再次考慮使用框高度來表示五個(gè)可能的值范圍，如下圖所示：

圖表圖例，演示如何使用框高度來表示值范圍。（大預(yù)覽)

通過此更改，我們可以絕對控制箱子高度的范圍，并且可以確保很容易比較所有箱子的高度。下圖說明了應(yīng)用于圖表的這一想法：

演示使用框高度表示值范圍的可視化效果。（大預(yù)覽)

回避顏色對比度要求

現(xiàn)在我們已經(jīng)添加了第二個(gè)編碼，我們想看看如何改進(jìn)設(shè)計(jì)。雖然WCAG建議所有顏色與白色背景的對比度達(dá)到3：1，但我們找到了一些在指南范圍內(nèi)工作的方法，同時(shí)使用更廣泛的值范圍。由于我們現(xiàn)在使用多種編碼（例如，色調(diào)和框高度）來傳達(dá)含義，因此我們意識(shí)到我們的選擇有點(diǎn)開放。

為了達(dá)到所需的對比度，我們在每個(gè)盒子的頂部和底部添加了端蓋。這些端蓋的厚度為3px，對比度為4.5：1。我們添加了微妙的圓角，以賦予其視覺吸引力，并確保它符合Google材料設(shè)計(jì)系統(tǒng)的美學(xué)。

使用端蓋標(biāo)記塊的頂部和底部的示例。（大預(yù)覽)

由于端蓋的位置各不相同，并且它們達(dá)到了所需的對比度，因此我們可以對盒子填充物應(yīng)用更廣泛的陰影范圍，以加強(qiáng)意義并創(chuàng)建更具吸引力的視覺設(shè)計(jì)。然后，我們可以使用最初沒有達(dá)到所需對比度的淺色調(diào)。我們可以在下面的實(shí)踐中看到一個(gè)這樣的例子。添加端蓋是確保低視力和色盲用戶仍然可以閱讀圖表的聰明方法。

應(yīng)用于可視化效果的端蓋示例。（大預(yù)覽)

新的圖表類型

生成的圖形是部分直方圖和部分熱圖 - 我們稱之為熱通道。它使用裝箱范圍來表示事件的時(shí)間和數(shù)量。這是對幾種圖表類型的重大修改，這些圖表類型嚴(yán)重地成為自己的新圖表類型。

樣品熱道可視化。（大預(yù)覽)

那么，為什么對于視力充足的人來說，這是一個(gè)更好的可視化呢？

作為人類，我們大多數(shù)人生來就具有潛意識(shí)地發(fā)現(xiàn)環(huán)境中的趨勢，模式和異常值的天生能力。我們通過我們看到的圖像來做到這一點(diǎn)，它幾乎是瞬間發(fā)生的。

想象一下，你正在雜貨店購買農(nóng)產(chǎn)品。很容易發(fā)現(xiàn)發(fā)霉的農(nóng)產(chǎn)品，這些農(nóng)產(chǎn)品可能不安全食用。這種能力被稱為預(yù)注意處理，幾十萬年來一直是我們作為一個(gè)物種生存不可或缺的一部分。

新鮮蘋果和爛蘋果的視覺比較。（大預(yù)覽)

可視化是利用這些核心功能的圖形。在我們的例子中，我們通過設(shè)計(jì)這個(gè)特定的圖表來利用這些功能。在瀏覽它的幾毫秒內(nèi)收集見解和價(jià)值是相當(dāng)容易的。

在熱道的情況下，在瞥一眼時(shí)會(huì)發(fā)生視覺上的“斑點(diǎn)”效果。當(dāng)它瞇著眼睛或稍微模糊時(shí)，它甚至?xí)３终玖ⅰＮ覀優(yōu)榱藵M足可訪問性要求和WCAG標(biāo)準(zhǔn)而做出的所有視覺設(shè)計(jì)決策都是圖表設(shè)計(jì)的核心部分。由于這些想法沒有修改到現(xiàn)有的圖表中，因此我們能夠創(chuàng)建一個(gè)可訪問的圖表，而無需添加無關(guān)的圖表或犧牲視覺設(shè)計(jì)和拋光。

除了美學(xué)上的好處之外，我們的可訪問性優(yōu)先方法還為圖表帶來了更多有用的應(yīng)用。為了開始，熱通道可視化可以重復(fù)堆疊（見下文），以便人們可以了解堆棧中不同事件類型的相關(guān)性。

通過堆疊的熱通道測量三種功能的性能。（大預(yù)覽)

作為獎(jiǎng)勵(lì)，我們意識(shí)到這個(gè)可視化也可以作為迷你圖閱讀：

熱通道簡化為迷你圖。（大預(yù)覽)

它也可以很好地用作小倍數(shù)：

熱車道在記分卡中作為一組小倍數(shù)工作。（大預(yù)覽)

最后，它可以顯示幾百萬個(gè)數(shù)據(jù)點(diǎn)。當(dāng)我們開始在日常工作中應(yīng)用它時(shí)，我們很快意識(shí)到可能性是無窮無盡的。在我們看來，視覺打磨在最后幾個(gè)例子中確實(shí)閃耀著光芒。

結(jié)論

如果我們沒有預(yù)先考慮可訪問性要求，我們可能已經(jīng)確定了通用熱圖或直方圖，并且不會(huì)考慮將它們組合在一起。我們將錯(cuò)過創(chuàng)建適合每個(gè)人的更具可擴(kuò)展性和可瀏覽性的可視化效果。與移動(dòng)優(yōu)先運(yùn)動(dòng)如何改進(jìn)我們設(shè)計(jì)數(shù)字產(chǎn)品體驗(yàn)的方式類似，可訪問性優(yōu)先的方法可以使我們能夠從根本上創(chuàng)建更好的數(shù)據(jù)表示，從而為每個(gè)人提供更多的見解和價(jià)值。

可訪問性不僅僅包括視覺設(shè)計(jì)嗎？

這僅僅是個(gè)開始。雖然視覺設(shè)計(jì)是可訪問性的核心部分，但我們一直在重新思考數(shù)據(jù)可視化的整體方法，并且我們一直專注于以為每個(gè)人提供價(jià)值和見解的方式表示數(shù)據(jù)，無論他們的能力如何。例如，我們一直在以易于使用鍵盤導(dǎo)航的方式構(gòu)建圖表，供運(yùn)動(dòng)技能有限的人使用。

在構(gòu)建圖表時(shí)，我們確保遵循使用正確的角色、地標(biāo)和屬性創(chuàng)建可訪問的富 Internet 應(yīng)用程序 （ARIA） 的規(guī)范，以便瀏覽器的屏幕閱讀器可以正確解釋圖表的所有元素。我們還在確定更好的方法來使用文本突出顯示數(shù)據(jù)中的新興趨勢、峰值、低谷和異常值。在某些情況下，我們甚至使用超聲處理，并提供富有洞察力的音頻摘要，在數(shù)據(jù)中顯示見解。請繼續(xù)關(guān)注將來有關(guān)此內(nèi)容的更多信息。

資源

要開始考慮數(shù)據(jù)可訪問性，請查看以下一些資源：

• 網(wǎng)站內(nèi)容輔助功能指南;https://www.w3.org/TR/WCAG21/
• 材料 3 的可訪問性:https://m3.material.io/foundations/accessible-design/overview
• “Google's Six Principles for Design Any Chart”，Manuel Lima:https://medium.com/google-design/redefining-data-visualization-at-google-9bdcf2e447c6
• 材料設(shè)計(jì)中的數(shù)據(jù)可視化:https://material.io/design/communication/data-visualization.html

編輯：塵淵文化 321one。com