Inside 硬塞的網路趨勢觀察

“一秒鐘幾十萬上下，網頁載入速度真的很重要” 與新的 2 篇文章 - Inside 網路趨勢行銷與開發

一秒鐘幾十萬上下，網頁載入速度真的很重要
行動設計第一步：資訊架構
幫你的孩子成立粉絲團是好事嗎？

Posted: 28 Dec 2012 02:28 AM PST

圖片來源：Flickr

編按：原文刊載於 gigpeppers，作者為 Cucumbertown 食譜網站的共同創辦人 Cherian Thomas。

Amazon 的網頁載入時間每多一秒，該公司的年度營收就減少 16 億美元；Google 的搜尋時間每多 0.4 秒，每天的搜尋次數就會減少 8 百萬。這些都告訴我們網頁的載入時間長短非常重要，而 Inside 先前也寫過一篇「科技發展使人們開始失去耐心?」談影片的載入時間與使用者行為的關係，那麼網頁的載入時間是不是也是這樣子呢？

Cucumbertown 用了許多不同的策略，以確保網頁可以在 2 秒內載完，最多 3 秒。我們非常熱衷於改善這件事，甚至還設定了一些提醒機制以防載入時間超過 3 秒。

然而，就在 Chris Zacharias 寫了「Page Weight 很重要（Page Weight 只的不單是網頁檔案大小，還包括網頁自動執行的動作多寡等）」（註一）這篇文章之前，一封 Google Analytics 寄來的信通知了我們，網頁的載入時間超過了 20 秒，我們立刻放下手邊的一切去找出究竟發生了什麼事。

通常網頁載入的延遲發生之後，就會馬上被隨機測試或是我們的重度使用者給發現，但這次並沒有，提醒機制甚至隔了一天才啟動。這把你嚇壞了，一個你還沒有搞清楚的未知問題，比起一些大的臭蟲來說更加危險。

我們便開始進行探測，而結果就如下圖所看到的：

當然，Google Analytics 分析了平均載入時間，而這分析影響了結果。但將這與其他分析結果放在一起看，似乎還是可以得出一些結果。Cucumbertown 的連結被放在一個奈及利亞的美食頻道和一個泰國的知名部落格上，導致大量的流量湧入。網頁載入速度在這些國家就如同你所看到的，可笑的慢。

我們的 Cucumbertown 是一個內容很多的網站，即便利用 requireJS 延遲以及基於使用者需求來載入 JavaScript，與網頁腳本載入有關的成本還是相當顯著。即便載入文件物件模型（Document Object Models）都要花時間。

在美國地區的網頁載入時間為 2.5 秒證實了這件事，DSL 裝置的 43 毫秒載入時間普及全球（註二），現在是時候開始考慮內容傳遞網路（Content Delivery Network）了。

我們在 Zynga 一開始是依賴 Akamai（編按：作者為前 Zynga 資深軟體工程師），隨後換成 LimeLight 。但最近我們發現 CloudFlare 在 Hacker News 上有一些活動，而且他們提供的功能也很吸引人去一探究竟，於是我就決定做個小小嘗試。

現在這個部落格（gigpeppers）就是透過 CloudFlare 來提供的服務，並透過內容傳遞網路來傳遞內容。當網站有大量的流量湧入的時候，這個模式帶來的體驗非常的棒，但如果沒有持續的請求時，這個模式反而會讓之後的網頁載入效率變差，但效率依然還是可以漸漸回到 1.5~2 秒之間。（編按：有點類似靜摩擦力的啟動阻力比動摩擦力還要大的概念。）

我依然認為內容傳遞網路是一種企業用的昂貴方式。但我們這樣一個新創公司現在就正在使用，並把服務提供給全世界，而且這似乎是一個很重要的解決方法。

（註一）Page Weight Matters
（註二）What the FCC’s new metrics tell us about U.S. broadband

行動設計第一步：資訊架構

Posted: 27 Dec 2012 11:28 PM PST

圖片來源：hperticarati

本文轉載自騰訊CDC，翻譯自〈 Designing for Mobile, Part 1: Information Architecture 〉

譯者 lost 註：本文從設計者的角度出發，提出了行動版設計與傳統桌面版設計的不同之處，同時歸納總結、比較多種主流的設計模式和資訊架構，旨在幫助設計、產品、開發相關人員更好的思考行動版設計。分享給大家，希望有所幫助和啟發。

大約在 1993 年，我父親帶回家一部體型碩大、形似磚頭的行動電話（俗稱的大哥大）。當時，我們全家人都對這個稀有產品感到難以置信的興奮，但是沒有人會認為它會對我們的生活產生龐大影響。幾年後，當我的一些朋友決定購買它時，我仍然會把它看作是一種花樣和噱頭。

如今全世界共有 60 億行動訂閱使用者，意味著如果人手一部行動電話，那麼世界上87%的人便擁有行動電話。然而，將近有 30 億人使用桌上型電腦，這和行動電話使用情況差別很大。

行動裝置存在於我們的生活中，隨之而來也為行動版設計帶來了一系列新的限制和機遇，來看看我們是不是應該更新一下自己的設計方法吧。

行動有何不同？

關於行動設計，我們最先需要了解的是它的不同之處，這並不僅僅指尺寸上的不同。行動裝置的屬性與規格也帶來了不同的設計啟示和要求。由於行動裝置更輕更便攜，我們通常覺得它們更便於使用。由於頻繁使用行動裝置，我們與它們之間建立了獨特而富有情感的連結。

屬性與規格

絕大多數行動裝置配有觸控螢幕，使用者主要藉由手勢及一些簡單的界面元素進行操作。由於受限於螢幕尺寸，有時我們希望螢幕中的顯示內容結構更簡單精緻。同樣由於受限於頻寬和連線速度，行動版上的設計需要改善載入時間，減少資料傳輸量。

為何，何地與何時

由於需要不間斷查看手機訊息，我們往往會更頻繁地使用手機。乘坐公交車時、街上漫步時或看電視時，它們都無處不在。甚至，我們通常「做」一些其他事情時也在使用。這意味著我們可能在一些複雜的視覺環境中或是一系列干擾條件下使用手機。

我們如何行動和感知

使用行動裝置時，我們有不同的態度、行為和優先順序。作為 Going Mobile 2012 研究的一部分，使用者體驗設計機構 Foolproof 指出行動裝置賦予我們一種新的自由感和控制感。還有一些使用者反而對他們的行動裝置產生了非常真實的情感。Foolproof 指出當智慧型手機不在身邊時，63% 的人會感到失落不安。他們把這些設備描述為「有生命的」，是他們身體和人格的一種延伸。

行動裝置從根本上改變了使用者的期望，因此對於設計師而言，非常重要的一點是遵從以使用者為中心的設計流程來進行設計。但存在的問題在於：以往那些最佳的傳統實踐方法並不總是可以參照。

「行動」概念如何影響設計師

行動裝置差異化直接影響了以使用者為中心的整個設計過程：從使用者研究到最終的開發和實現方案的測試。而實現方法和資訊架構是整個設計流程中受影響最大的。

行動設計實現方式

不同於傳統網站，行動設計有四種主流方式。瀏覽器中顯示的網站可區分成行動版網站（特地為行動裝置而設計的網站）或 responsive design 網站（根據裝置顯示範圍大小重新排列、布局的設計）的內容。人們安裝的 app 不是原生 app 就是混合型 app。混合型 app 提供更加靈活的方式，從網頁上讀取內容，（即透過瀏覽器閱讀），同時提供了類似原生 app 的界面。

每一種方式都有正反兩面。選擇哪種樣式取決於項目的設計背景。（下面的表單中，星星越多，效果越好）

行動資訊架構

行動裝置同樣也有自己的資訊架構樣式庫。盡管responsive design網站的結構可能更多遵從「標準化」樣式，而諸如原生 app 則透過採用標籤試的導航結構。建構行動網站或 app 並沒有所謂「正確」的方法。接下來我們會看到一些最流行的樣式：階層式、輻射式、「俄羅斯娃娃式」、Tabbed view、便當盒/儀表板和篩選器樣式等。

階層式（Hierarchy）

層級樣式有一個索引頁和一系列子頁面的標準網站結構。如果你在設計一個 responsive design 網站，你可能會受限於此，然而它所帶來的額外樣式可以幫助你為適應行動裝置而調整體驗。

Luke Wroblewski 在〈行動優先（Mobile First）〉中告訴我們要先關注重要的內容：可以幫助我們創造更好的使用者體驗的產品特性和使用者使用過程。

適用範圍：整理需要跟桌面版保持一致結構的複雜網站。
注意事項：多方位的導航結構用在小尺寸螢幕上可能會給使用添麻煩。

輻射式（Hub-spoke）

輻射樣式為使用者提供便於跳轉的中央式索引，這是 iPhone 過去主畫面的模式。使用者無法在分頁之間切換而必須回到中央跳轉。一直以來，這種樣式主要用於工作流程受限的桌面版（通常是技術上的限制，諸如表單或者購買流程中受到限制）。然後，這種樣式在行動裝置上越來越流行，這是由於使用者使用行動裝置時會專注於單一任務，以及由於設備本身的外型因素。這種樣式的流行使得全局性導航愈來愈難用。

適用範圍：多功能工具，其中每個都有不同的內部導航和目標。
注意事項：這種樣式不利於使用者進行多工操作。

俄羅斯娃娃（Nested doll）：

這種樣式採用漸進式導航以引導使用者查看更詳細的內容。當使用者操作不方便時，這是一種快速簡單的導航方法。點擊「前進」或「後退」，使用者可以強烈感知自己所處何處。

適用範圍：app 或網站的主題奇特或者主題之間密切相關。它們也是和在其他樣式底下使用，諸如標準的階層式或輻射樣式等等。
注意事項：使用者無法在不同內容中快速切換，因此需要考慮這種樣式是否方便查詢，而不能讓它成為搜尋內容的絆腳石。

Tabbed view

這是 app 使用者熟悉的樣式（編按：iPhone 內建的音樂、照片、App Store 都是採用這種形式）。這種形式透過工具欄目錄集合為一系列的內容。這樣使用者便可以在第一次打開 app 時快速看過、了解 app 的全部功能。

適用範圍：基於一個相似主題的工具項和多工情況。
注意事項：這種樣式不太適合有複雜結構的 app，較為適用於非常簡單的內容結構。

便當盒/儀表板（Bento box/Dashboard）

便當盒/儀表盤樣式透過元件展示相關工具或內容的部分訊息，再把更詳盡的內容連結到索引介面。由於這種樣式很複雜，它在桌面版顯示會比在行動版更為適合。這種顯示醒目有力，使用者只需要掃一眼就可以理解關鍵訊息，但它非常依賴訊息清晰的設計呈現。

適用範圍：主題相似的多功能工具和以內容為主的平板電腦 app。
注意事項：儘管平板電腦的螢幕提供更多空間承載這種樣式，但更為重要的是我們要理解使用者如何與每個部分的內容互動，以及我們要確保 app 簡單、有效、使用愉快。

Filtered view

最後，Filtered view 讓使用者用篩選的方式來切換不同內容，從而在一系列的數據中導航。篩選同分面搜索方法一樣，是一種很棒的適合使用者查詢內容的方法。

適用範圍：內容數量龐大的應用或網站，諸如文章，圖像和視頻。它可能為雜志樣式的應用或網站提供了好的基礎，或者是它可以作為另一個導航樣式內的子樣式。
注意事項：行動裝置上，由於篩選和分面搜索很複雜，所以很難在較小的螢幕上展示。

下一步

自從我第一次看到大型的磚頭式行動電話起，已經過了將近二十年，（而我買第一支行動電話也過有大約十二年了）。如今我、我父親和我認識的人幾乎都有一支智慧型手機，我們習慣頻繁地使用它們溝通、交流並管理我們的生活。每年科技都會進步，因此我們要清楚地知道自身需求並與時俱進。設計友好的行動和桌面資訊架構正是創造絕佳行動體驗的第一步。

幫你的孩子成立粉絲團是好事嗎？

Posted: 27 Dec 2012 08:58 PM PST

圖片來源：Flickr

如果你有一個Facebook、Twitter 或 Instagram 帳號，每個月你都可能會在這些平台上見證新生兒的誕生。透過這些平台，你可以非常準確的知道新生兒誕生的時間、他們在肚子裡的樣子、第一餐吃什麼、兄弟姐妹有誰、在什麼地方旅行等等。單看這些孩子的照片，你自然會很感動。但考慮到那些還未出生或懂事，自己的一切就被父母曝光在了網上這種情形，其背後隱藏的問題，同樣值得深思。

你可能從未真正見過這些孩子，只因他們父母孜孜不倦的分享，你見證了他們的成長過程，甚至你還會喜歡上其中的一、兩個。父母無疑是愛孩子的，他們喜歡在網路上分享自己孩子的種種，是因為他們為孩子們感到驕傲。這本來無可厚非，只是，為什麼我們要反思這種行為呢？

原因很簡單：孩子們在自己懂事或成年之後，應該有權利去選擇他們自己在網路上的形象。而父母在孩子還未出生時就開始分享他們的生活細節，實際上已經在慢慢地扼殺這種選擇權了。他們對於自己懂事前的形象沒有任何表達意見的權利，甚至可能讓孩子認為，來自網路的認可要高於自己的自尊。

圖片來源：Flickr

未來這種情況可能也不會有所改善，因為 Facebook、Twitter 或 Instagram 可能從未考慮過這方面的問題。這些網站上的資料，首先應該是屬於個人的，之後才是屬於平台的。成熟的商業體系和服務，可以將發佈在這些平台上的資訊永久的保存下去（即使被使用者刪除）。那麼，為何我們還如此放心的將我們小孩的照片發佈上去？

我們目前對習慣於共用資訊背後可能帶來的問題，缺乏系統性的考量和審慎的思考。網路服務商也竭盡所能的讓共用過程變得簡單，這也使得過度共用一直很「熱門」。有什麼能比分享一張照片、發一篇推文更有趣？而諸如「喜歡」和「讚」這種功能，也驅使父母們分享的更多。只是，我們或許該冷靜一下，克制自己想要分享的衝動，將重心放在孩子們身上，冷靜地考慮他們的未來。

最後，希望所有看到這篇文章的父母們能夠坐下來好好想想自己的行為，以及可能會對孩子未來造成的影響。畢竟，隱私應該是父母能給孩子最好的禮物。