「西雅圖時報」X MULE 設計團隊：網站改版的背後故事 圖文好讀版：http://ppt.cc/lKRc 美國老牌地方日報「西雅圖時報」的線上新聞網站，在一個月前悄悄改頭換面了。「西雅 圖時報」是美國華盛頓州最大的日報，於1891年開始發行。在報業變遷迅速的時代，「西 雅圖時報」提供線上新聞之餘，仍沒有間斷地提供紙本新聞。當最主要的競爭者「西雅圖 郵訊報」（The Seattle Post-Intelligencer）在2009年結束他們的紙本印刷，改為專注 在網路報紙後，「西雅圖時報」現在成為西雅圖唯一的主流印刷日報。 如果將「西雅圖時報」的讀者依出生年代分成三種類型，可以發現嬰兒潮時期（大約是 1946～1964年間）出生的讀者多只閱讀紙本日報，X世代（在1960～1980年初期出生）的讀 者則多會同時閱覽紙本和線上新聞，而千禧年世代（在1980年代初期～2000年初期出生； 或是稱為Y世代）的「西雅圖時報」讀者則只會閱讀線上新聞。有鑑於新世代的讀者不再鍾 情於紙本新聞，而多專於線上新聞，「西雅圖時報」決定投入一億兩千萬台幣幫助他們數 位化，包括後端的新聞內容管理系統，以及前端的線上新聞網站。 看看下面這張由「西雅圖時報」發布的推特文章，左邊是舊的新聞網站，而右邊是首次採 用響應式網頁設計（Responsive Web Design）的新版網站，有發現前後版本有甚麼差異嗎 ？ http://ppt.cc/201q 負責「西雅圖時報」新聞網站改版的設計公司 Mule ，分享了他們幫忙「西雅圖時報」所 做的改版內容，以及幫助改版時該注意的大小事。透過這些分享，除了可以看出網站改版 前後的差異，也可以了解這些決定背後的考量。 了解編輯和記者的工作流程 由於「西雅圖時報」新聞網站改版不只和讀者有關，也和編輯群以及記者們息息相關，因 此 Mule 表示，設計新網站除了站在讀者的角度，也應深入了解編輯和記者的工作流程， 以便在規劃時列入考量。 了解新聞機構現在和未來的營利模式，並和（廣告）銷售團隊保持密切合作 廣告收入是經營新聞網站的重要一環，然而如何在網站上安插廣告而達到最高效益，也是 門學問。除了需要好的配置，讓讀者容易閱讀新聞外，同時也需要考量廣告商的要求，包 括廣告版面大小及置入位置。 對 Mule 設計團隊而言，他們遇到更棘手的問題是，「西雅圖時報」部分的未來廣告空間 已經預先賣給廣告商，因此假設設計團隊希望在規劃時減少「展示型廣告」的空間，讓 「西雅圖時報」未來可以順利轉型成付費牆（paywall）的營利模式，他們得考慮已經出售 的網路空間，幫助合作新聞機構適應不同階段的變更。 他們也表示，不只合作新聞機構原先的廣告計劃會影響網站改版，網站改版也會導致新的 廣告模式應運而生，同時新聞機構銷售團隊的獎金，可能也會因為廣告模式改變而受影響 ，因此和他們保持密切合作非常重要。 行動裝置至上 考量越來越普及的行動裝置（像是智慧型手機與平板裝置），行動裝置上的閱讀體驗也日 益重要。因此為「西雅圖時報」打造一個容易閱讀的行動裝置網站，成了設計團隊的的目 標之一。Mule 團隊特別提到，行動裝置網站的設計也需要考慮廣告規劃，如何在小螢幕上 配置廣告，成了設計團隊和合作新聞機構需要溝通的部分。 http://ppt.cc/enLX 更好的線上閱讀體驗 如何在新聞文章中有效置入廣告，卻又能盡量不干擾讀者的閱讀體驗呢？這一直是新聞機 構內部，編輯團隊和廣告銷售團隊間的掙扎。Mule 設計公司選擇的作法是，在長篇文章網 頁頁面的中間欄位放置新聞，而廣告則選擇放在挑選過的段落，前提是盡量減少對中間欄 位新聞文字的壓縮，降低對讀者閱讀過程的影響。因此，依照新網站的設計，文章的重要 性和長度將決定廣告的數量。 http://ppt.cc/R6X9 兩方的緊密溝通 從前述分享不難看出，一個成功的網站改版，不只需要設計團隊的巧思，同時也得依賴新 聞媒體機構和設計團隊的緊密溝通。 傳統新聞媒體進行數位轉型，包括成立自己的線上新聞網站，已經是這個時代不爭的現況 ，然而「西雅圖時報」的網站改版說明，如果傳統新聞媒體想要立足於新媒體世代，不只 要有線上足跡，更重要的是要能隨時追上讀者的腳步，和時代的趨勢；而透過 Mule 設計 團隊的分享，也讓我們看到這個過程中的種種考量。 原文出自：新媒體世代 http://ppt.cc/gXNT http://ppt.cc/lKRc 參考資料：The Seattle Times, Puget Sound Business Journal, The New York Times, & Mule --

※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 72.33.31.114 ※ 文章網址: https://webptt.com/m.aspx?n=bbs/Media-work/M.1427226773.A.333.html