2015 年 24 個最佳互動網站

已發表: 2021-07-12

今年每個人都對網絡視頻的流行大加讚賞,但一種鮮為人知的視覺內容形式——交互式網站——可能更具吸引力。 這些網站通過令人驚嘆的攝影、視頻、文字和互動元素將觀眾吸引到豐富的故事中,創造出刺激的個人體驗。 這些是眾多優秀交互式網站中最優秀、最閃亮的明星(每年這個時候我們都在黑暗中度過了很多時間——為使用一個荒謬的比喻道歉)。 無論如何,這些是我們認為真正好的交互體驗應該做的一些事情:

  • 使大量數據可訪問且具有相關性
  • 告知或娛樂
  • 使用交互性為每個觀眾創造獨特的體驗
  • 創建靜態內容所沒有的情感聯繫

以下是我們最喜歡的 24 個,由 Visually 辦公室周圍的人提名。 這包括來自新聞媒體、品牌、地緣政治組織和只是為了好玩的設計師的互動。 如果您真的想深入挖掘,您還可以查看我們從 Visually 社區中挑選出來的員工的完整列表。 我們試圖保持公正,但由於我們製作了一些我們引以為豪的互動網站,因此有一些網站溜進了名單。 我們已經調用了我們在下面工作的那些。

時間:太空一年

時間_太空中的一年

重要原因:這個互動網站介紹了美國宇航局宇航員斯科特凱利在 2015 年的國際空間站之旅和他在太空中的時間。它以劇集的形式呈現,讓您可以輕鬆地分塊瀏覽旅程。 這些圖像在視覺上令人驚嘆,主題激發了我們所有人的孩子般的探索精神。 最重要的是,該站點通過向您展示國際空間站當前的位置來打破第四面牆,然後解釋如何走到外面並在天空中發現它。

最佳互動質量:動態背景引入了記錄凱利旅行和工作的視頻片段。 頁面左側的導航面板使您可以輕鬆地從一個部分到另一個部分進行單擊,並且它還具有您期望從 NASA 獲得的那種實時遙測。

路虎:消失的遊戲

路虎_消失的遊戲

重要原因:這種互動使作者威廉博伊德的書面故事栩栩如生。 它將自己描述為“使用數字和社交時代令人難以置信的技術講述的冒險”。 翻譯,這意味著它是一個交互式視頻,觀眾可以控制他們收到的刺激。 刪除圖像,閱讀滾動腳本,聆聽敘述,或將其全部關閉以觀看無聲電影。

最佳互動品質:有限的導航按鈕將重點放在令人驚嘆的視覺效果和故事情節上。 隨著讀者向前滾動,內容會發生變化——允許觀眾設定自己的節奏。

TSN:貧民窟聯隊

TSN_貧民窟聯隊

重要原因:這個來自巴西貧困貧民窟的真實故事描述了被足球文化塑造的堅強的年輕女性。 具有戲劇性過渡和令人驚嘆的視覺效果的出色報告。

最佳互動品質:故事以深刻的統計數據編織了強大的人類敘事。 這種高質量的報導、攝影和設計的組合非常吸引人。

NPR:一個女孩可以做夢

NPR_一個女孩可以夢想(1)

重要原因: NPR 將音頻、視頻和互動故事板配對,帶領觀眾前往阿富汗的一所學校,近距離了解女性在教育系統中面臨的挑戰。

最佳交互質量:將靜止幀混合在一起以創建推動故事向前發展的動畫。 文本被分成小塊,覆蓋在圖像的底部,以創造更輕鬆的閱讀體驗。

Cohn & Wolfe:膽固醇計數

Cohn & Wolfe_膽固醇計數

重要原因:此解釋性內容通過有關膽固醇相關問題的統計數據(從平均膽固醇水平到意識和教育)逐個介紹讀者。 完全披露:視覺製作此內容。

最佳交互質量:可點擊的地圖使這個故事栩栩如生,每個州的單獨數據可視化使故事保持一致和引人入勝。

照片世界:Snapchat 有多大?

照片世界_Snapchat有多大

重要原因:這種互動非常有趣。 通過顯示相對於 WhatsApp、Facebook 和 Instagram 每秒有多少圖像在 Snapchat 上共享,每個平台上的內容創建範圍很快就變得顯而易見。

最佳互動質量:隨著每個社交平台共享的照片總數不斷增加,計時器會一秒一秒地計時。 這為頁面增加了緊迫感,並立即使內容與查看者相關。

仲量聯行:廣場:技術

仲量聯行_廣場

重要原因:這種選擇你自己的冒險風格互動旨在幫助初創公司在紐約市尋找辦公空間。 用戶對自己進行簡介,然後獲得大量數據以幫助他們了解如何找到合適的總部。 完全披露:視覺製作此內容。

最佳交互質量:將內容劃分為多個桶,即使對於房地產局外人來說,內容也很容易上手。 數據可視化和清單的結合使信息看起來很流暢,同時保持可操作性。

傑森戴維斯:世界機場

傑森戴維斯_世界機場

重要原因:您一直想知道世界上的機場相對於人口中心的運營地點。 誒? 好的。 這很重要,因為它看起來很酷。

最佳互動品質:將鼠標懸停在地球的任何部分,以了解哪個機場為每個地區服務。 單擊並按住以旋轉地球並發現您不知道存在的交通樞紐。

人口參考局:2015 年世界人口數據表

人口參考局_2015年世界人口數據表

重要原因:此互動突出了全球女性面臨的機遇和挑戰。 這是大量重要數據,整齊地導入一系列視頻和交互式圖表。

最佳交互質量:導航包含在一個帶有大量可點擊按鈕的滾動屏幕中,以顯示比較 2015 年和 2050 年全球人口、生育率、教育等統計數據的數據。

紐約時報:租房好還是買好?

紐約時報_租房好還是買好

重要原因:無論您住在美國的哪個地方,這組數據驅動工具都將幫助您理解抵押貸款與租賃的爭論。

最佳交互質量:滑動比例允許用戶從大量數據點中進行選擇——一個地點的年數、房價、未來租金增長的預測等等——以明確他們的租賃或購買決定。 頁面右側的計算器已安裝到位,讓讀者可以了解各種輸入的變化如何影響他們的購房前景。

Zazzle:十週年

Zazzle_十週年

重要原因:一個供製造商和設計師推出和銷售定制產品(無需自己生產)的平台,Zazzle 在這種豐富的體驗中講述了它的故事,部分是時間線,部分是數據驅動的解釋器。 完全披露:視覺製作此內容。

最佳互動質量:觀眾可以看到在 Zazzle 上製作的生動的設計流,並結合解釋公司影響的統計數據。 來自真實客戶的圖像和故事增加了深度並強調了與 Zazzle 合作的價值。

23 和我:23 對染色體。 一個不可思議的你。

23 和我

重要原因:如果您在遺傳學部分沒有在科學課上專心聽講,您實際上可能會在這裡學到一些東西。 完全披露:視覺製作此內容

最佳互動質量:彩色染色體對是可點擊的,並顯示與每個染色體相關的祖先和遺傳疾病的信息。 反應靈敏的獎勵積分。

薩克森:美國能源

Saxum_US of Energy

重要原因:此互動式可讓您輕鬆了解有關美國能源生產和消費的大量信息。 您首先查看廣泛領域的廣泛趨勢,然後深入查看每個州的詳細信息。

最佳交互質量:可點擊地圖與比較工具配對,讓您找到最相關的信息,然後為其提供上下文。

目標勝利:50 個廢物狀態

目標勝利_50個廢物狀態

重要原因:如果你是一名政治家或政治組織者,這個會讓你變得嬌氣。 這種互動顯示了政治電視廣告的影響實際上是多麼小。 完全披露:視覺製作此內容。

最佳互動質量:數據可視化疊加在美國地圖上,顯示出每一個廣播美元中有 75 美分被浪費在錯誤的選民身上。 哎呀。

馬丁奧利維爾:誰攫取世界財富?

馬丁奧利維爾_誰攫取世界財富

重要原因:我們經常聽說收入不平等,但這種可視化通過用可視化的豬比喻進行分解,使主題更加生動。

最佳互動品質:簡單性使這種互動成為可能。 移動的方格很容易理解,數字的謹慎使用清楚地講述了懸殊的故事。

Lynn Fisher & Nick Crohn:機場代碼

機場代碼

重要原因:您現在可以解讀登機牌上所有奇怪的首字母縮略詞。 最重要的是,這是一個不錯的設計,有一天可能會幫助您在 Jeopardy 中獲勝。

最佳互動品質:我們喜歡這種互動的綜合性,其中包括來自世界各地的機場。 單擊任何圖塊以了解有趣的事實。 請務必單擊“關於”選項卡,以獲得精心挑選的 GIF,其中包含 Leslie Nielsen 和來自Airplane 的機組人員

BBC 未來:地心之旅

BBC Future_地心之旅

重要原因:作為一個孩子,你可能夢想從你的後院挖一個洞到世界的另一端。 在某種程度上,這種互動實際上可以讓您做到這一點。 您將前往地球的核心,並了解有關沿途發現的大量荒謬的事實。

最佳互動品質:穿上蒸汽朋克裝備,深入地下,了解西方文化中墳墓的標準深度、企鵝可以跳入的距離等等。 我們喜歡帶有插圖的潛水車,沿著通往核心的路徑散佈的數據點,以及當您向下滾動時風景的變化方式。 這個很有趣,也很有趣。

PartyPoker:你的撲克大腦

PartyPoker_你的撲克大腦

重要原因:你的科學怪人會喜歡這些插圖,這些插圖描繪了大腦如何根據撲克技能水平發揮作用——初學者、業餘愛好者或專家。

最佳互動品質:您不僅可以查看大腦的活動圖像,還可以翻轉卡片、觀看解說視頻並閱讀有關如何在牌桌上激怒對手的技巧。

聯合國教科文組織統計研究所:落後

UNESCO_落後

重要原因:正如我們已經指出的,今年的許多最佳互動都聚焦於全世界女性面臨的關鍵問題。 這種互動是平等的教育和宣傳。 我們可以一起幫助促進全球教育。

最佳互動品質:深入了解故事,您會發現頁面左側邊距中的導航點。 您將查看真實人物的照片,在解釋性文本的上下文中查看圖表,最後,了解如何發揮作用。 #leftbehind 標籤的使用鼓勵在社交媒體上繼續對話。

ElkanoData:移動中的粉絲

ElkanoData_移動中的粉絲

重要原因:在這個基於國際門票銷售的世界上最受歡迎的活動的驚人可視化中,娛樂成為一項全球性的運動,從體育到音樂會再到劇院。

最佳互動品質:我們喜歡這樣一個事實,即一旦您啟動此互動,它就會關閉並運行。 例如,弧線顯示誰購買了超級碗的門票,數據會立即彈出以顯示有多少球迷離開他們的國家前往賽事,哪些地點代表了主要的原籍國等。 讓數據流過您,或停止它以獲得詳細的快照。

大集團:奧斯卡禮服

大集團_奧斯卡禮服

重要原因:你知道你在電視上觀看這些頒獎典禮只是為了看看你錯過了哪些風格趨勢(在某些情況下是為了開玩笑)。

最佳互動品質:點擊 1954 年以來的任何一條裙子,您將看到該款式的放大版,讓其各自的名人大放異彩。 我們喜歡每個彈出框頂部的醒目社交分享圖標和簡潔的演示文稿。 更少的花里胡哨可以使演示更具吸引力。

華盛頓郵報:多數人的錯覺

華盛頓郵報_多數人的錯覺

重要原因:這篇新聞文章中的互動測驗問題向我們展示了我們對任何主題的影響力和流行觀點的本質知之甚少。

最佳互動質量:在此新聞故事的頂部使用快速互動可以儘早吸引讀者,並鼓勵進一步閱讀和消化數據可視化。 它還通過展示它所描述的社會現象來使故事個人化。

WBEZ,好奇之城:巴士集結

WBEZ_Curious City Bus Bunking

重要原因:將您對漫長的公共交通等待時間的沮喪情緒引導到這個幽默而有教育意義的互動中。

最佳互動品質:可點擊的箭頭讓讀者可以在故事中向前和向後導航,這一步一步地解釋了公交車時刻表是如何自然地混亂的。 它繼續提出問題的解決方案 - 同時明確每個仍然可能會讓騎手感到不安。 我們喜歡這種互動方式使復雜的概念易於理解並建立情感聯繫。

聯合國教科文組織統計研究所:失學兒童

聯合國教科文組織_失學兒童

重要原因:此互動解決了兒童無法獲得進一步發展、支持未來家庭和回饋社區所需的教育的問題。

最佳互動質量:動畫介紹為觀眾奠定了基礎,然後右側軌道上的可點擊按鈕可以讓您一瞥各個國家的教育差距。 數據點按地點(農村和城市)、性別和相對財富細分了教育不平等。 每點擊一次,動畫兒童就會在頁面上來回跑動,強調這些是真實的人,他們的夢想沒有得到滿足。

尋找更多靈感? 查看更多我們最喜歡的交互式可視化,或查看終極視頻手冊,了解視頻營銷的提示、技巧和最佳實踐。