Cover

常聽到有人抱怨你的視覺化出包嗎?為什麼在臉書分享的效果總是這麼差?我們這次整理了幾個很方便的工具,讓我們可以在發表網頁視覺化作品之前確認作品的效果與正確性,以避免做了半天卻沒有人看得到的窘境。一起來學習吧!

網路是很棒的跨平台呈現媒介,跨平台、即時且互動的多媒體效果使網頁成了絕佳的視覺化平台。網頁技術發展了數十年,開發者與設計師早已熟悉使用各式各樣的輔助工具來調整網站,但由於跨領域的隔閡,資料科學家、新聞與媒體工作者、行銷專員等等非技術背景的行業對這方面仍沒有這麼熟悉,即便要動手做或學習,仍有一層層的門檻與阻礙。

所幸科技進步的很快,現在網路上已經有很多方便易上手的工具可以讓不了解技術背景的人也能略窺網頁最佳化之一二,這就讓我們來逐一介紹吧!

1. Google Mobile Friendly Test

Mobile Friendly Test

想知道自己的作品適不適合在手持裝置上看嗎?將作品網址貼到 Mobile Friendly Test , Google 便會告訴你你的作品適不適合在手持裝置上看,同時告訴你網頁對於手持裝置來說有什麼問題。

2. Google Page Speed

Page Speed

類似 Mobile Friendly Test ,這次則是針對網頁整體的表現來評價,包括網頁載入速度、使用者體驗等等。據說體驗好的網站也有機會提升在 Google Search 中的排名,間接的增加搜尋產生的瀏覽量喔!

3. Facebook Debugger

Facebook Debug Tool

我們在之前的「Open Graph?跟資料視覺化有什麼關係?」一文中說明了 Open Graph 與社群網路之間的運用,其中便有提到 Facebook Debugger 這個工具,在你正式發表你的視覺化作品之前,務必要先讀過這篇文章,並使用 Facebook Debugger 測試你的作品是否妥善的設定了 Open Graph 。

良好設定的 Open Graph 可以戲劇性的提升作品的點擊率,即便我們的目的不是要有很大的流量,我們也希望能夠用最好的方式呈現到讀者面前,因此務必要確認過這點。

4. MobileTest.me

mobiletest.me

現今絕大多數的視覺化作品.都.沒.有.良好的手機體驗,這是很可惜的一件事。手機體驗很難幾個字解釋清楚,雖然使用 Google Mobile Friendly Test 工具可以取得一個評價,但互動性與整體作品的表現並沒有辦法看到。

為了了解自己的作品跨過不同裝置之後的表現如何,這時你可以使用 Google Chrome 內建的開發工具,或是利用類似 MobileTest.me 這類的即時測試工具來看看作品在不同尺寸之下的瀏覽體驗如何。

5. Google Analytics

Google Analytics

前面談到的都是事前的準備工作,而 Google Analytics 可以提供我們事後的分析數據。透過 Google Analytics 我們可以了解讀者的地理位置、閱讀的時間、使用的瀏覽器與裝置、停留時間等等的技術細節,這些資料可以讓我們應用在未來開發的決策上。

例如,如果我們發現我們絕大多數的讀者都使用微軟 Internet Explorer 7.0 版本,那我們絕對不會想用像是 SVG、Canvas 等 IE7 不支援的網頁技術。如果我們的讀者大多停留 30 秒就走了,那我們就可以開始思考是否作品真的內容並不足以讓使用者停留更久,或是根本大家就對這類型的議題毫無興趣。

Google Analytics ( 或是類似服務 ) 所提供的資訊相當重要,堪稱我們在網路上的眼睛,不過他的功能也相當多元且複雜,未來有機會我們再另行專文為大家介紹。

結語

看完這一系列的工具,是否忽然驚覺自己之前都是閉著眼睛在做視覺化呢?沒關係,從今天開始,這些基本功大家都入門了,網路、資料、視覺化的道路是寬廣且漫長的,大家再一起慢慢來學習成長吧! 🙂

 


Written by infographics.tw

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *