為什麼人們不捲動頁面？廣告放在頁面上方真的比較有效嗎？

Luke Wroblewski 在 Twitter 上從 12/09 開始提出了一個 "There is no fold" 的討論

探討的是現代跨裝置網頁設計 (contemporary multi-device web design) "捲動" (scroll) 跟 "摺疊" (the fold) 的迷思 (Myth)

我們先來認識一下 "the fold" 英文的解釋是 the typical height of a browser window, about 700 pixels，用比較白話的講法可以說是 "第一屏"，大部分網頁在瀏覽器內可以看到的網頁高度，平均在 700 pixel 左右。

因為剛好最近在研究，我想順便把 Luke 的 Twitter 整理一下給大家參考。

(內嵌 Twitter 原文，請稍微等候一下，別急著滾動 :P )


Part 1
Luke 先提出滾動深度的現象給大家參考，人們常常在整個頁面還沒有 load 完就開始捲動頁面，大約有7成的使用者會只會看第一屏看到的東西
橫軸是網頁由上往下的 pixel 高度 。

There is no fold. [part 1] pic.twitter.com/OlcR1tWy7l
— Luke Wroblewski (@lukew) 2014 12月 8日

Part 2
這張在講的使用者願意去互動的秒數(y軸)跟滾動的高度(x)

There is no fold. [part 2] pic.twitter.com/zdhLXJoHjb
— Luke Wroblewski (@lukew) 2014 12月 8日

延伸閱讀：網頁的捲動行為研究
http://blog.chartbeat.com/2013/08/12/scroll-behavior-across-the-web/

微博 weibo 2014 改版介紹 Redesign

前幾個月都在研究 weibo 的手機觸屏版 http://m.weibo.cn
很喜歡 weibo 的介面跟互動設計
比較舊手機想使用 weibo 也不用擔心安裝 app會跑不動





這週，看到 weibo desktop 版本大改版了
非常喜歡這個 Parallax Scrolling (視差滾動) 設計的介紹頁面
http://www.weibo.com/new (這網址需要有微博的帳號才能看到)

我將畫面擷取下來：

Email (EDM) 設計指南

這個是有名的電子報服務 MailChimp 撰寫的 Email 設計指南
讓設計者學會更有效的應用圖片、字型、Call to Actoin (CTA)
清楚的重點配上圖片，非常有用的指南阿！

以下為我自己整理的重點，詳細可以看最下方的連結

※ content：
專注在單一清楚的重點、簡化再簡化、內容層級分清楚、區塊切割方便掃視、可連外。

※ template：
找一個適合的版型，拖拉編排，最後嘗試整理存下方便未來使用。

※ identity：
清楚的標示自己的 logo。

※ color：
越少顏色才能讓訊息傳達清楚，讓讀者專心在你想傳達的重點上；清楚分開頭尾。

※ images：
使用公司的 logo，讓 user更清楚你從哪來；使用圖片，但要注意圖片的大小。

※ layout：
大多數使用者只花不到 15秒閱讀行銷類的信件，簡潔扼要很重要；排版不要密密麻麻，保留喘息的空間；如有較多文字對齊會更好閱讀；如果內容屬性不同，請分隔清楚。
※ fonts：建議字體大小在 14px-16px，如果要大於 16px，請簡短；選擇適合你的字型，不要超過兩種以上。

※ calls to action：
首先要了解你的 CTAs 是什麼，仔細盤點，一封信件中請不要有過多的 CTAs；給予明確的指示；例如：「購買」、「申請帳號」...等；清楚標示 CTAs 的大小，按照重要性給予不同層級大小；給予的內容跟預期會到達的頁面要盤整清楚，不要讓使用者感到驚嚇。

http://mailchimp.com/resources/email-design-guide/

MIX 2014 筆記與心得(6/6) - 組織文化，Lean UX，與多螢 / 程世嘉

多螢互動體驗設計論壇 http://mix.hpx.tw/2014/ch/agenda/




第6場 - From Corporate Culture to Lean UX (組織文化，Lean UX，與多螢) - 程世嘉 Sega Cheng / iKala 執行長 (* 本場演講另有線上付費LIVE直播服務)


Sega 過去曾經在 Google 負責過 Google Search， Google Map， iGoogle ... 等產品。(據說是非常非常聰明的人！)

剛開始先介紹講者自己的公司 - iKala
講者是用互連網的思維在經營公司的，員工不是可有可無的，抱著這種心態慎選你的夥伴！
團隊重點在凝聚！

MIX 2014 筆記與心得(5/6) - 電視體驗設計 / 陳青瑯

多螢互動體驗設計論壇 http://mix.hpx.tw/2014/ch/agenda/




第5場 - 電視體驗設計 - 陳青瑯 / TCL 多媒體 用戶體驗中心總監


這次演講第一個使用寬版 16: 9 比例簡報的講者！(最近對於簡報設計很重視)

MIX 2014 筆記與心得(3/6) - 互動，互動，可以輕舉，不要妄動！誰來讓多螢互動返璞歸真 / 陳建勳

多螢互動體驗設計論壇 http://mix.hpx.tw/2014/ch/agenda/




第3場：互動，互動，可以輕舉，不要妄動！誰來讓多螢互動返璞歸真 ─ 陳建勳 / 香港商壹傳媒出版有限公司台灣分公司 數位發展部總監


講者過去曾經在中天新媒體，目前在壹傳媒。

講者從最近的事件當起頭，當媒體的改革不如你意，你最想跟媒體的互動是抗議，還是佔領？ 講者選擇 "佔領"

MIX 2014 筆記與心得(2/6) - 沒有屏幕的用戶體驗設計 / 唐沐

多螢互動體驗設計論壇 http://mix.hpx.tw/2014/ch/agenda/




第2場 - 沒有屏幕的用戶體驗設計 - 唐沐 / 小米科技 用戶體驗總監，小米路由器產品負責人

唐沐是念國際會計出身，後來改從事國際設計，雖然只差一個字，但實際上差滿多的 (笑)，最早待在金山，2003年來到騰訊，最常聽到當然就是 QQ，QQ曾創下兩億人同時在線的紀錄！

在大陸競爭，企業的基因很重要，三大網路公司 B.A.T (百度、阿里巴巴、騰迅)，網路競爭什麼都想做，但沒有從本質去了解，很容易失敗。(基因的意思是：百度 - > 搜尋。)

QQ設計跟開發得人很多，很重視流程，互聯網的性質很重視細節，因為一點小小的修改都會觸怒某部份的user，但是，唐沐到小米後，世界觀從此改變

講者題到了騰迅的 CDC ，可以說是團隊的成果展現
當場我馬上 google CDC 結果先查到的是美國疾病管制局 (Centers for Disease Control)
後來改 google CDC QQ 才找到 http://cdc.tencent.com/

接著講者題到了 Q影，其實這是一個不錯的產品，花了很多時間研究跟設計，但是因為成本太高，無法進入千家萬戶中。

多屏的互動中，「注意力遷移」是有成本的！

MIX 2014 筆記與心得(1/6) - 多螢情境下的消費行為與服務創新 / 鄭仁富

多螢互動體驗設計論壇 http://mix.hpx.tw/2014/ch/agenda/




第1場 - 多螢情境下的消費行為與服務創新 - 鄭仁富/資策會創新應用服務研究所 FIND組長

剛開始 Richard 介紹了 MIX名稱的由來，談論多螢環境的設計、服務和創新。





早上的第一個議程，資策會的鄭仁富先介紹了目前台灣多螢環境的狀況
(讓來參加的人先了解環境，議程的安排真的很用心！)

[詳細簡報如果講者有公開我再補上]


這邊先說說明手機已經躍升到第三大媒體了！

2018年平板電腦也即將成為第四個千萬指標

不同朋友分享同一個連結的資訊分享設計 - Design of Multiple Posts of The Same Link from Different Friends

我對於資訊分享的呈現一直都很有興趣，從幾個比較大的社群網站(SNS)來看，以分享一個連結來看分為兩種：
只能「轉分享」，不能加上自己的意見：Twitter、Plurk
「轉分享」的同時可以附上自己的意見：Facebook、Google+、Tumblr、Weibo

Multiple Posts of The Same Link from Different Friends 我自己翻譯成「不同朋友分享同一個連結的資訊分享設計」


先以 Facebook 為例，我分享了一個 link，朋友們可以點選 share繼續分享，我可以看到被分享的數字。



點選後我可以哪些朋友分享了我的連結，進而還可以看到朋友的朋友還有誰繼續分享了這個連結？這些朋友在分享的時候下了什麼註解？

為什麼 Facebook 2013年改版失敗了?

還記得去年2013年3月 Facebook 推出了一個可以跨移動裝置的版本叫做 "Goodbye Clutter" aka "雜亂不見了"，當時開了記者會，各大新聞網站做了現場文字轉播，但這版本經過幾次A/B測試後，再也沒有上線，直到今年 2014年 3~4月，Facebook 開始推出新的設計風格，陸陸續續改成全新的風貌，大家都在討論新版的優缺點，我一直在找「為什麼上一版失敗了？」終於讓我找到一篇。



http://www.theverge.com/2014/3/6/5469952/facebook-goes-back-to-basics-with-latest-news-feed-redesign

下面這段是 News Feed (動態消息) 的 Product Manager , Greg Marra 說明的原因，我節錄幾個重點：

1. 使用者並不喜歡我們隨意的搬動他們的家具，你會破壞他們的 "肌肉記憶"。

什麼叫做 "肌肉記憶"，舉例：你的身體學會騎腳踏車，你已經學會一種平衡騎車的方式，突然要你反過來騎車就叫做 "break muscle memory"

2. 收起側欄的選單的設計方式，用 Hamburger Icon 把側欄收起來的方式讓大多數的使用者困擾，這也是最近大家都在討論 Hamburger Icon 的最大問題。看起來 "經過簡化" 且 "很酷" 的設計，其實並沒有辦法幫助你在網站中順暢的瀏覽。

3. 「不需要重新學習新的東西」("You don't need to relearn anything") 變成是 News Feed (動態消息) 小組最重要的的目標。

4. 重新思考複雜的資訊處理方式，例：如果有人貼了一個連結，另外有兩個人分享，該怎麼呈現會比較清楚？怎麼把區塊切分開來？個人照片該歸屬在什麼地方？


以下是原文節錄：

"People don't like us moving their furniture around, because you break muscle memory," says News Feed product manager Greg Marra. Facebook's dark-themed sidebar, which collapsed into a strip of icons depending on your screen size, was just too confusing for most users, he says. "That's a particular design idea that looked cool but didn't help you get around the site," Marra says. "You don't need to relearn anything — that was one of our big themes." Facebook has also redesigned and simplified what were previously considered complex post types. If a friend commented on a post about a link that two friends shared, indentations — while accurate in terms of attribution — made things look really messy, Marra says. Profile photos have also notably been moved back inside story cards, like in the old News Feed, to limit clutter.

文章提到 Facebook 成立了新的 Creative Lab，著重在使用者的體驗上，還因此產出了一個很棒的 app產品 叫做 Paper

Facebook 在 2013年學習到更重要的一件事就是，Mobile 跟 Desktop 是必須完全切開來看。當你想要保持所有產品設計的一致性時（也就是上一版在做的事情），你無法顧到在不同裝置使用的體驗，雖然看起來很像，但其實大不相同！

節錄：

While News Feed doesn't look as "new" as last year's redesign tests looked, Facebook seems to have learned a key lesson: mobile and desktop are not equal. Last March's redesign was pitched as way to create visual parity between the company's desktop and mobile apps. "We recognize that while we strive for design consistency, part of that is recognizing that the way you use things on a PC is different from how you use things on your phone," says Marra, "but it's important that we cut these from the same cloth."

感謝這篇文章，我也從 Facebook 2013 版的失敗中學習到很多！

這篇也很棒： http://dcurt.is/facebooks-predicament

IxDA Taiwan 22th 2014 The Design Thinking of Content-based 筆記

這應該是我第二次參加 IxDA 的活動，之前一直沒有參加到有工作坊的活動，這次終於可以體驗到了！這次的主題叫做「The Design Thinking of Content-based」邀請了天下雜誌的資深網路編輯 陳紹謙(Diedy) 與大家交流！




下面就讓我按照筆記內容節錄當天的一些重點



天下雜誌是1981年起家的，從創刊理念開始講起，還沒進入網路時代的讀者跟現在的TA，重新檢視過後，其實沒有太大的差別，因為「人有興趣的東西其實一樣，是閱讀的工具不同了！」
維持 "紙本" 帶進來的氣質，很多基本的排版方式是不變的，Ex: 網格、文字的設計...等。

MUZIK ONLINE 會員忘記密碼流程設計

https://www.muzik-online.com/
對 Muzik 的古典樂 android app很有興趣，想先去網站確認會員資格
發現了有趣的 "忘記密碼流程設計"

來到會員登入頁，點選下方"忘記密碼"





我已經被其他網站的流程制約，總覺只需輸入我的email，寄一個驗證用的 link 讓我重新設定密碼即可。所以當我看到下圖的輸入表單讓我非常疑惑，以為點錯，甚至還回到上一頁再重新點選。





因為我非常確定我曾經申請過會員，疑惑的輸入我想要設定新密碼後，按下送出；出現了一段文案「系統將寄認證信至您所設定的電子信箱，請確認後並點選所附的網路連結」，到這邊我就比較能理解這個系統設計的邏輯了！






收信看到了一個這樣的連結：「點選下列連結將會修改您的密碼。」






點下連結後，回到會員登入頁，我的新密碼就重新設定完成了！





優點：不需要另外設計一頁"重新設定密碼"的頁面，將密碼設定的流程簡化兩步了！有顧到部份的安全性！
缺點：使用者第一次進入時，可能會無法理解"忘記密碼"當頁的設計；如果沒有去變更密碼收到信件會不知所措。


我滿欣賞這樣的流程設計，下面提出可以更好的作法：

「忘記密碼頁」：
除了 "新密碼" 這樣的提示之外，可以告知使用者，送出後會使用信件驗證的方式 "啟動" 你設定的新密碼，應該會更清楚。

「信件部份」：
1. 若不是該會員去設定，可添加「這不是我本人去修改密碼」的連結，讓會員連到"忘記密碼"頁，重新設定。
2. 或是直接告知使用者，「若你沒有去設定忘記密碼，請勿理會這封信，15分鐘之後此連結即將失效」。


最後，個人想推薦 Muzik 的 APP，對愛聽古典樂的朋友們，是一大福音阿！之後若有更棒的音質，我會購買每月的會員服務的！

Android：Muzik
iOS：Muzik Online

Chrome 清除快取並強制重新載入

當 Ctrl + F5 或是 Ctrl + Shift +R 沒有用的時候，你可以試試這個！

今天同事分享的，原來很早就有這個功能 "清除快取並強制重新載入" ，我一直都只會用快捷鍵...

1. 按下F12
2. 長壓重新整理按鈕
3. 點擊最後一個  "清除快取並強制重新載入"




我用英文版來介紹



"Normal reload" 正常重新載入

The same thing as pressing f5. This will use the cache in every way possible. If the browser can avoid re-downloading JavaScript files, images, text files, etc. then it will.

跟 F5 "重新整理"是相同的，會使用 Cache 資料，JS檔案、圖片、txt檔案都會重複使用。


"Hard reload" 強制重新載入

Don't use anything in the cache when making the request. Force the browser do re-download every JavaScript file, image, text file, etc.

跟我們平常使用的 Ctrl + F5 是一樣的，不使用 Cache 資料，重新載入所有的檔案。


"Empty Cache and Hard Reload" 清除快取並強制重新載入

Obviously if the cache is empty then it will have to do a hard reload. This will again force the browser to re-download everything. However, if the page makes any after-the-fact downloads via JavaScript that weren't part of page load, then these might still use the cache, which is where emptying the cache helps because it makes sure that even these won't use cached files.

跟上面 "強制重新載入" 一樣不使用 Cache 資料，也會重新載入所有的檔案，但多做的一件事就是把先所有的 Cache 資料刪除後再載入。