改進扇貝單詞app中的資訊可視化
1、簡介
這篇博客是一個資訊可視化的案例研究，
這學期我們學習了一門資訊可視化課程，發現資訊可視化居然是一個非常有趣并且相當有挑戰性的領域，在完成了這門課的學習后，我們迫不及待地想找到一些真實的、有影響力的可視化案例來實踐一下我們的專業技能，
但當我們從互聯網上尋找有關資料可視化的案例研究時，我們感到有一些失望，因為網路上關于資料可視化的文章或博客基本上都在討論一些很fancy很復雜的可視化，雖然它們確實很牛X并且有啟發性，但對我們來說不是那么可實踐，作為大學生，我們更想研究一些簡單的、有著常見錯誤的圖表，比如折線圖或者箱線圖，以使我們的論文、網站等作品更加專業，對讀者（用戶）更加友好，
突然，我們想起來，在一個我們每天都在使用的app里，有一個可視化完全符合我們的要求！
這是不是更有意思了——網路上關于產品級的可視化案例研究并不常見！
注：后文中的配圖里可能會出現英文注釋，這是因為我們這門課的教授是個老外，這篇博客直接搬的課程作業中的配圖
2、可視化的背景
扇貝單詞我相信同學們都聽說過（至少我覺得用扇貝背單詞比用其他軟體記得牢），如果不了解的話可以看一下他們的官網，了解可視化的背景是很重要的，我們將在下一節中討論這一點，
假設現在大家都已經了解了扇貝單詞，下面就讓我們來看一下這個可視化——
為了讓用戶能夠更加科學地背單詞，扇貝在“學習資料”板塊中畫出了用戶的記憶曲線，并將其與艾賓浩斯遺忘曲線進行對比，可視化及其相關界面如下圖所示：
因為扇貝單詞app是一款豎屏應用，而這個圖表又太長，所以用戶必須左右滑動螢屏才能查看完整的可視化，下圖展示了完整的圖表和滑動方式：
如果您仔細查看這張圖表，您肯定會對它感到困惑，就和我們當時一樣，這也是我們想要研究這個可視化案例的原因，確實，它有一個明顯的缺點，但還不止于此，現在，就讓我們一起著手分析并改進它吧！
3、分析和改進
正如上文中提到的，如果我們想要分析一個資訊可視化，必須首先明確它的背景關系（背景），可視化的背景關系主要包括以下四點：
- 目的：它用來做什么？（探索性的還是描述性的）
- 讀者：它的讀者是誰？
- 媒介：它是在什么地方呈現的？
- 視覺引導：有沒有向讀者呈現其他的引導？
首先，這個可視化的目的是向用戶呈現記憶曲線，而不是探索資料（比如通過散點圖探索變數間的相關性），或者說，它是描述性的可視化而不是探索性的，這意味著它的質量必須過關（探索性的就沒必要了，比如建模前的探索性資料分析時畫的圖），另一方面，它被呈現在扇貝單詞app上，它的用戶是app的用戶，值得注意的是，扇貝是一款豎屏手機應用，最后，正如在上面的圖中所看到的那樣，這個可視化沒有啥其他的可視化引導，所以我們只關注圖表即可，
為了能夠更好地分析并改進可視化，我們使用Python和matplotlib復現了這張圖表，如下圖所示：
現在我們可以更深一步地分析它了，首先，正如您所看到的，它的x軸是不均勻的，這很容易讓用戶感到迷惑，尤其是在看得不仔細的時候，但是，正如我們在上一節中所提到的，不要忘了扇貝是一款豎屏app，這意味著圖表太長的話看起來會非常不方便，既然如此，那我們為什么不把它分成兩個x軸分布均勻的圖表呢？這樣的話我們甚至都不用左右滑動螢屏了！
注意第一張圖中x軸的刻度間隔是1天，第二張圖中是30天，
現在我們已經解決了最主要的問題，但是，如果你仔細觀察圖表，你會發現圖中還有一個令人困惑的地方，既然x軸上已經標注了“N日后”，為啥x軸0刻度處的label要設定為“今”？把它改為“0”不是更合適嗎？
為了縮短篇幅，我們只展示此后的改進結果中的第一張圖，
接下來，我們的作業將與認知理論有關，認知理論通過理解人類的心理程序來解釋人類的行為，這是因為資訊可視化通過視覺元素與人們交流資訊，這就意味著一個優秀的可視化作品必須考慮人類有關視覺的記憶和注意等認知心理學要素，
隧道效應（Cognitive Tunneling）是有關資訊可視化的認知理論中最重要的理論之一，隧道效應是人們在一個特定事物上集中注意力時無法觀察周圍事物的心理狀態，這個理論支持了很多資訊可視化的黃金法則，下面是一條很重要的可視化指南：
直接注釋（label）視覺元素，避免讓用戶不直接地查看視覺元素，只有當空間很小時使用legend，隧道效應經常發生在查看視覺元素時，如果發生了隧道效應，用戶將會無法順利地取得相關資訊，除非視覺元素離它的標簽很近，如果用戶只能來回地查看legend，他們的作業記憶（working memory）有可能超負荷，
那么，就讓我們直接注釋圖表中的兩條曲線吧：
現在，我們將要解決圖表垃圾（Chart junk）的問題，圖表垃圾是一個圖表中對用戶理解資訊起不到任何幫助，反而會干擾用戶獲取資訊的視覺元素，圖表垃圾會占用讀者的作業記憶，干擾讀者的注意，使得他們無法最有效地獲取可視化中的資訊，
可能在app的可視化中，因為圖表長度的問題，不得不使用（虛線和背景構成的）網格（grid）來引導讀者的視覺，但現在，它確實起不到任何作用了，我們可以把它當成圖表垃圾移除，注意，網格是最常見的圖表垃圾之一，在使用之前一定要想好有沒有必要！
最后，讓我們來考慮一個非常特殊的問題——色盲問題！據統計，色盲影響著大約8%的男性和0.5%的女性（我記得當年我們學校模考的時候理綜出過這題），占比并不低，其中，紅綠色盲是最常見的，然后是藍黃色盲和全色盲，讓事情變得好些的一個簡單方法就是使用對色盲友好的配色，詳見https://personal.sron.nl/~pault/，
在改變了曲線的配色之后，我們得到了最終的可視化——
4、總結和討論
最后，讓我們總結一下我們都做了哪些作業：
- 分析了可視化的背景關系；
- 將圖表拆分成了兩個x軸刻度均勻的圖表；
- 將圖表x軸第一個刻度的標簽改為了“0”；
- 直接注釋了圖表中的曲線；
- 移除了網格和背景；
- 將曲線的顏色改成了對色盲友好的配色，
現在，我們得到了一個更加科學的可視化！
但是，考慮一下，我們改進后的可視化是否過于simple？ 它真的適合作為app中產品級別的可視化嗎？ 我們是否可以添加一些裝飾性的視覺元素，以使可視化效果更加美觀，但又不降低太多可讀性？ 資訊可視化離不開批判性思維和用戶反饋密，我們采訪了我們的同學和這門課的教授，包括教授在內的大部分人認為我們的作業非常出色（雖然還是有些人有著不同的意見），不知道您有沒有不同的見解？ 歡迎討論哈！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/234860.html
標籤：其他