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

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 (這網址需要有微博的帳號才能看到)

我將畫面擷取下來：

不同朋友分享同一個連結的資訊分享設計 - 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繼續分享，我可以看到被分享的數字。



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

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

Gmail 新版回覆 reply 功能

"魔鬼藏在細節中"

如果你跟我一樣常常看 這個網站 http://littlebigdetails.com/
你可能也會發現 Gmail 這個設計的貼心小功能

讓我先用亂數假文產生器寫封信示範給大家看

收到信，當我閱讀信件的時候，將閱讀的文字反白起來，點選右上角的回覆 (Replay) 按鈕



貼心的 Gmail 會將你反白的文字當作你回信時引用的文字，直接幫你引用

這樣的設計真是太貼心了！