Lindsay is observing.....

2014年4月28日星期一

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

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

2014年4月18日星期五

為什麼 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

2014年2月25日星期二

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

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

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

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

2014年2月6日星期四

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

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

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

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

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

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

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

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

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

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

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

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

Android：Muzik
iOS：Muzik Online

2014年1月23日星期四

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 資料刪除後再載入。