Gmail 新版回覆 reply 功能

"魔鬼藏在細節中"

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

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

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



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

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

現在，Responsive Web Design 才是王道！

首先來看看大家熟悉的
http://thenextweb.com/

寬版


窄版


手機板




再來看看這幾天出來的beta版 Mashable
http://beta.mashable.com

寬版



窄版


手機板



可以大膽預言下一個是 TechCrunch 嗎?

如何刪除 Zorpia 帳號

由於自己太大意被 Zorpia 網站騙取了Google帳號的授權，發了大量的垃圾邀請給朋友
決定來寫一篇如何刪除 Zorpia 網站的教學

如果你已經不小心心受害，可以參考我下面的刪除方式
如果你還沒受害，看到下面這種信件請不要點選

到 Zorpia 上網站進行刪除的動作

首先，進入網站後點選右上角的 My Account -> 切到 Account Information 頁簽
最右下角有一個 Terminate My Account
不要懷疑點下去就對了

----------------- 20130903 更新新版畫面 ----------------





接著點右下角的 Continue to Terminate (字藏這麼小..真的很很機車)


繼續刪除，不要客氣


刪除到這邊還要你去收信確認一次



收到信後馬上點選連結，刪除 Zorpia 帳號



點選後就確認刪除了




最後，到Google帳號授權中心，找到 Zorpia 解除授權狀態
https://accounts.google.com/IssuedAuthSubTokens


最最後，如果可以，請修改一下Google帳號的密碼以策安全

新浪微博2012改版體驗

這次新浪微博的改版把版面拉寬了
個人非常喜歡開頭的導引動畫


從加入的時間開始

人與人之間的關係

你追蹤的訊息

一直強調你不是孤單的一個人

好用的分類用這種動畫的方式呈現很可愛

強調你才是主角

用動畫的方式告訴你可以強化你的個人圖像

訊息的即時性

加大整體的寬度

個人圖像的設定 (這個很明顯是學facebook啦~)

再度更換一個圖片讓你感受一下

最後更新成功！分享出去，點選link還可以再看一次剛才從頭到尾完整的動畫

這字體挺好看得

最後讓我們看一下改版後的網頁

個人介面如下

右側的聊天訊息介面也很好操作 (雖然這個也是跟 facebook 一樣)


最欣賞的還是有關智能排序的說明

點選後會引導你到智能排序的說明頁面
http://e.weibo.com/2016713117/yvVzomoHL
利用 infographic 的方式說故事給你聽

了解「人」，你才知道怎麼做簡報 - 讀書心得 16~20

100 Things Every Presenter Needs to Know About People
了解「人」，你才知道怎麼做簡報 - 100件你應該要了解的事情

這本書是之前  了解「人」，你才知道怎麼設計！洞悉設計的 100 個感知密碼
作者 Susan Weinschenk 最新的書

• 今日閱讀進度：16~20

節錄與心得：

• 16. Time Is Relative
  
  時間是相對的。
  
  個人覺得，可以說是「節奏是很重要的」。
  
  有一本書叫做《時間的矛盾》，敘述人們對時間的感覺是相對，並非絕對。
  
  你投入越多心智處理活動，你會覺得你消耗很多時間。如果人們作業的每一個步驟前都必須停下來思考，他們會覺得浪費很多的時間。
  
  如果你的簡報需要很多的心智處理，需要一直去想你剛剛到底講得東西是什麼意思，人們會覺得好像過了很多的時間，簡報時間好像拖了很久。
  
  務必讓你的簡報簡化直覺，分成清楚容易了解的小型記憶組塊(Chunks)，要拋出新東西之前確認聽眾是否都已經吸收了解你之前講得內容。
  
  簡報要有進度顯示，如果你今天要講五個重點，請務必讓聽眾了解你現在正在講解第幾個重點。
  
  讓你的簡報看起來簡單扼要，分步驟說明可以減少聽眾花時間去思考多餘的東西。
   
• 17. There Are Four Ways to Be Creative
  
  激發創造力的四種方式
  
  Dietrich 根據不同的腦部活動，發現四種類型的創造力 (Four Kinds of Creativity)
  
  

  	Cognitive 認知型	Emotional 情感型
  Deliberate 人為刻意的	Thomas Edison 湯馬斯．愛迪生	Therapeutic A-ha Moment 靈光乍現
  Spontaneous 自然發生的	Newton and the apple 牛頓跟蘋果	Artist,Musicians 藝術家、音樂家

  
  人為刻意認知型的創造力：你必須擁有針對某個或更多特定領域的相關知識。
  
  人為刻意情感型的創造力：產生這種創造力時，不是把注意力放在特定的知識領域或經驗上，而是情感和情緒上的豁然開朗。
  
  自然發生認知型的創造力：有時候你在想解決某個問題一直想不到新方法，回家的路上，突然就有了靈感。
  
  自然發生情感型的創造力：藝術家特質，不需要特定知識就會發生。
  
  
  如果你要設計一個激發創造力的活動，你要先決定你的主題會是哪一種，上述四種情境跟對象都有很大的不同：
  
  人為刻意認知型：需要高度的知識跟大量的時間，要先有足夠的先決條件，你要提供資源，讓他們可以獲取激發創造力需要的資訊。
  
  人為刻意情感型：需要冷靜思考的時間，不要預期很快有答案，或是跟人互動後就會有答案，這需要離開一段時間，深入思考，才能創造。
  
  自然發生認知型：這種需要暫時下手邊的問題，跳脫情境。要做這樣的練習，你要提出問題，讓大家做一些其他事情，再回來解決這個問題。
  
  自然發生情感型：這種無法設計
  
   
• 18. People Can Be In A Flow State
  
  人們可能會陷入神迷狀態。(沈迷狀態？！)
  
  這名詞好像有點怪，查了一下發現是，你可能很專注在做一件事情，無視其他東西的存在，專注到忘記自己是誰，在什麼地方，這個就是神迷狀態(Flow State)。
  
  你要怎麼知道你在這樣的狀態？
  例如：「什麼？現在已經四點了！」 這個就是神迷狀態
  
  如果你的簡報可以讓人達到這種狀態，基本上會讓聽者很享受。
  
  在簡報中設計一些活動，因為要達這種狀態，需要聽者跟你的主題有深刻的串連，就算你是很厲害的講者，但光是說，無法讓人達到這樣的狀態，要讓聽者做些什麼！
  
  減少干擾。
  
  你設計的小活動要有挑戰性，但不能太困難。
  
  讓聽者可以做一些小回饋，有回饋比較能保持在這樣的神迷狀態。
  
   
• 19. Culture Affects How People Think
  
  了解文化的差異。
  
  不同地方跟不同文化背景的人對圖片或資訊的反應大不相同。(重點就是你還是要先了解你的聽眾大概會是什麼樣的族群)
  
  如果文化差異很明顯，請準備兩份不同的簡報。
  
   
• 20. People Learn Best In 20-Minute Chunks
  
  如果你常看 TED的演講，你會發現大部分的演講都是20分鐘左右。
  
  Dr. Murphy研究指出，20分鐘左右的演講跟簡報是最容易吸收的，幾乎也都能記住維持一個月左右。
  
  基於這樣的原因，你應該學習將你的簡報以20分鐘為區塊切割，如果是一個時間很長的workshop，舉例：9點到12點。不要在中間10:30放一個長達30分鐘的休息時間，應該放一個15分鐘左右的休息時間，跟3個5分鐘的休息時間。
  
  先試著學會在20分鐘內完成一個簡報，最好是可以剛好20分鐘，也不能太短，如果真的講不完再學會上面的切割方式。

上一篇：了解「人」，你才知道怎麼做簡報 - 讀書心得 11~15

了解「人」，你才知道怎麼做簡報 - 讀書心得 11~15

100 Things Every Presenter Needs to Know About People
了解「人」，你才知道怎麼做簡報 - 100件你應該要了解的事情

這本書是之前  了解「人」，你才知道怎麼設計！洞悉設計的 100 個感知密碼
作者 Susan Weinschenk 最新的書

• 今日閱讀進度：6~10

節錄與心得：

• 11. It's Easier To Recognize Information Than Recall It
  
  辨認訊息比回憶訊息簡單。
  
  辨認是利用情境脈絡，情境脈絡可以幫助你回想。
  
  將人們需要記憶的東西最小化，例如在演講結束後發送 email 提供簡報，內容包涵總結、參考書目、網站、資訊、相關研究資料等；演講前就要讓大家知道你會提供簡報給大家參考，讓大家可以更專注聽你要講得重點，並不是很有壓力的去想要記住全部的內容。
  
  如果簡報中有一些練習，先提供一個有明確指示的簡報，節省練習時需要記憶太多瑣碎的東西。(這一方面可以節省時間)
  
  人們能記住的東西比你像像中來的少，如果有什麼希望他們一定要記得的，簡報中，重複再重複！
   
• 12. Memory Takes A Lot of Mental Resources
  
  「記憶」耗費大量的心智資源。人每秒鐘可以接收到400億個感知訊息，一次可以意識到40個訊息。但這代表我們一次可以處理超過4件事？並不是，你意識到40件事情跟你處理40件資訊是完全不同的！(白話的說法，唸書到底有沒有唸進腦袋裡面？)
  
  「記憶」很容易受到干擾，當你聽完簡報完，遇到朋友問你聽到了什麼？你通常會提到最後聽到的東西，這就是「新近效應」(Recency Effect)；  當你在聽簡報的時候，被手機振動聲響打斷，回了朋友的簡訊，那你最有可能記得的是簡報最開頭的內容，這就是結尾效應 (suffix effect)。
  
  簡報中，確保你有一個很強力的開頭跟結尾。如果你講得內容很多很長，可以採用中間有小區塊的方式，這樣會讓你的簡報有更多的 "小開頭" 跟 "小結尾"，這樣會讓聽講者記住更多的資訊。
  
  用具體的事物或圖像，會更容易記住。
  
  相較於文字，你會比較記得住實際看過得東西 -- 視覺記憶。
  
  如果你想讓人們記住資訊，必須讓他們休息，甚至是睡覺。
  
  人們在學習或是編輯資訊時，不要干擾他們。
  
  簡報中尖的東西真的比較不會被記住！
   
• 13. People Reconstruct Memories each Time They Remember Them
  
  人們每次提取記憶的時候會重新建構他們的記憶。
  
  記憶會改變；回憶時有時候像像看一個短片，你可能覺得記憶就像是很多檔案存在電腦裡，其實並不然，你每次提取的時候都會重新組合，每次線索都有可能改變；曾經遇過一個例子，跟父母斷絕關係的孩子，因為累積了一些事件，對於父母的誤解過深，深刻到他甚至在記憶中覺得父母有打他、丟棄他的寵物....等等行為，但其實後面這些記憶是被影響過，現實生活中並沒有發生這樣的事情，只是過去的記憶太久了，題取出來時已經變質了！
  
  所以「記憶」並不可靠，演講時提供簡報，不管是先提供，或是結束後再寄發，都是好的方式。
  
  如果你擔心聽講者或忘記你在演講中的演練，可以設計一個活動，請他們寫下來，這樣一來，他們回去時可以看到書面的紀錄，加深自己的印象。
   
• 14. Forgetting is Programmed In
  
  遺忘是件好事。
  
  人們總是在遺忘，而且這不是一個有意識的決策。
  
  如果你希望人們記住，準備一個總結的簡報，方便他們按照線索想起來。
   
• 15. People are Driven To Create Categories
  
  人們自然會去分類。
  
  人們喜歡把事物做分類。
  
  如果你沒有提供分類，人們自己會去分類。
  
  適當地分類比誰來分類來的重要。
  
  如果資訊量龐大且沒有分類，人們會感覺有壓迫感而且想要嘗試去分類組織。
  
  記住前幾個重點，3~4個項目的法則，可以幫助你分類你要講得重點。

上一篇：了解「人」，你才知道怎麼做簡報 - 讀書心得 6~10
下一篇：了解「人」，你才知道怎麼做簡報 - 讀書心得 16~20

現在的網站告訴你「我有紀錄Cookie」是種禮貌

上次看到 英國政府資料公開相關網站有公開的 Cookie說明

再度看到一個英國網站有說明 Cookie

http://www.radiotimes.com/news/2012-08-21/there-wont-be-much-of-benedict-cumberbatch-in-the-first-hobbit-movie
請注意正下方那一條

" We use cookies to improve your experience of our website. Cookies perform functions like recognising you each time you visit and delivering advertising messages that are relevant to you. Read more "





這次更厲害了！
導引到的 Cookies Policy 更為詳盡

主要有

• Cookie 基本定義

• 什麼是瀏覽器 Browser

• Cookie 的種類：第一方 Cookie、第三方 Cookie、Session Cookie 跟 Persistent Cookie 的不同，甚至還介紹了 Flash Cookie 是什麼，提供的服務廠商 Adobe 的控制面板位置在哪？

• Web Beacons 的使用

• 最後也說明了網站使用了 Google Analytics 的分析服務

• 第三方的廣告服務提供商有那三家？

• 最後還提供了 Data Protection 團隊的 email，告訴你：「如果你對你的隱私有疑慮，歡迎跟我們聯絡」！

真的是太詳盡了！

Blog文章的圖片點選互動問題

Blog 文章大多會有圖片作輔助
我長期寫文章的習慣是圖片不允許點選

不能點選，又無法改變大小其實會造成小小的問題
在太小的解析度下，你的文章版面會破版
在太大的解析度下，圖片太小，會看不清楚


讓我來三個可以點選的例子給大家參考

1. Desiring Clicks 是一個中文討論 UX/UI、設計心理學等相關資訊的好網站 (同事 aco 推薦的)
但我在閱讀網站文章時，一直會遇到一個不太方便的設計問題

以下面的文章為例：連結使用者熟悉的生活經驗

我是一個繪圖筆使用者，使用習慣會點選後拉動整體的頁面
並非滾動滑鼠滾輪 (筆電觸控面板也是類似的使用情境)
所以當我閱讀下面的文章時，偶爾會點到圖片


但當我點到圖片時，會直接開啟圖片 (原頁)
我必須回到上一頁，才能繼續完成閱讀
而圖片呈現的大小就是文章裡面原本的大小


這樣的互動算有問題嗎？
只有一個小小的問題，讓我們看第二個例子就知道





2. 這個例子是 Google 官方的Blog
http://googleblog.blogspot.tw/2012/08/the-self-driving-car-logs-more-miles-on.html

Google 官方的 Blog 版面都很一致，文章中圖片的大小也有限制
互動也跟第一個例子相同，當你點選圖片的時候，會直接開啟圖片


但是注意了！圖片大小是有差別的
這個 Blog 的圖片可以點選
主要目的是為了讓你點選圖片後可以看到較大較清晰的圖片
所以當我不小心點到的時候，比較沒有第一個例子那種"被打斷"的感覺
反倒會稍微看了一下大圖，再點選 [前一頁] 回到文章中繼續閱讀


再來，讓我們看一下第三種





3. 最後這也是 Google 官方的 blog 之一
Inside Search 主要講跟 Search 相關的新聞跟互動等資訊
http://insidesearch.blogspot.tw/2012/07/make-your-mark-on-google-with-handwrite.html

如果你的 Blog 文章的圖片有需要放大且願意讓讀者點選的話
這種才是最好的方式，使用 Lightbox (但個人覺得背景不要太黑會更好)

當我點選中間那張圈起來的圖片時



使用Lightbox的方式開啟，不會有中斷閱讀的感覺，還可以放大看清楚預設的選項







最後，還是想推薦 Desiring Clicks 這個網站，很多有關 UX/UI 的好文章。

《操作介面設計模式》 第九章 使用社群媒體

Designing Interfaces
Patterns for Effective Interaction Design
Chapter 9 : Using Social Media

讀書會重點整理

Google Docs 版本:



SlideShare 版本:

Designing Interfaces chapter 9 from Lindsay Hsieh

data.uk.gov 英國政府資料公開網的 Cookie 說明

https://www.gov.uk/
只要有在研究使用者經驗的朋友們
應該都知道要參考這個網站的準則

美國歐巴馬政府推動 data.gov
所以 www.uk.gov 也可找到 英國政府資料公開相關網站

http://data.gov.uk/




大家有注意到最下方有條黑色的 bar嗎？



竟然是告訴你「我們網站會使用Cookie來豐富你的使用者體驗」
我從沒看過有網站公開說明他們如何使用 Cookie

點下「我想知道更多」，導到一個 http://data.gov.uk/cookies-policy 介紹

Cookie 的本身的定義
Cookie 名稱說明
Cookie 的用途、用在什麼樣的地方、紀錄了哪些跟你有關的資訊
Cookie 的使用期限


最後，如果你同意了，也了解了！非常感謝您啦！

了解「人」，你才知道怎麼做簡報 - 讀書心得 6~10

100 Things Every Presenter Needs to Know About People
了解「人」，你才知道怎麼做簡報 - 100件你應該要了解的事情

這本書是之前  了解「人」，你才知道怎麼設計！洞悉設計的 100 個感知密碼
作者 Susan Weinschenk 最新的書

• 今日閱讀進度：6~10

節錄與心得：

• 6. People Process Information Best in Story Form
  
  在前幾章有提到，人們對情緒的反應，「說故事」就是一個最好的方法。
  
  亞里斯多德說過基本的故事結構要有開始(beginning)、中段(middle)、結束(end)。
  
  這章讓我想到一本書 Storytelling for User Experience，這是一本教你如何說好故事的書，我也唸了大概一半了，對這個章節來講是很好的輔助。
  
  「故事」會暗示的因果關係，故事中提到 The Invisible Gorilla 《為什麼你沒看見大猩猩？：教你擺脫六大錯覺的操縱》提到的例子，人們會自行建立關聯，小心使用暗示，就可以建立完整的故事結構。
  
  說故事是人們最自然的溝通方式。
   
• 7. People Learn Best From Examples
  
  從範例中學習是最快速方法
  
  亞里斯多德講到的說故事，還有一個重點叫做「衝突」(Conflict)，故事到中段有了衝突，也就是故事的「高潮」(Climax)，是最容易引起注意的。
  
  完整的故事(也就是範例)可以讓人在思考的時候更完整，之後也更容易回想起。
  
  不要只告訴別人怎麼做，太抽象了，直接呈現給他們看。
   
• 8. Short-Term Memory is Liminted
  
  短期記憶是有限的。
  
  如果使用 fMRI (functional magnetic resonance imaging) 核磁共振掃描大腦，當你在思考得時候你的前額葉皮層會看到少量的活動，但是當你處在極端的壓力下時，這塊地區會停止運作。
  
  當你要傳達一項新資訊，多花點時間將你的表達的東西組合成一個故事，找一個適當的範例，或是建構一個練習(前面三個可以組合在一起最好)，這樣人們才可以將你的東西從短期記憶儲存到長期記憶中。
   
• 9. People Remember Only Four Items At Once
  
  人們一次只能記憶四樣東西。
  
  之前提過魔術數字是 7 加減 2，不過近期發現其實所謂的魔術數字應該是4，人們在不分心的狀態，只能同時處理 3~4 件事情。
  
  P.S.念到這邊回去翻  了解「人」，你才知道怎麼設計！洞悉設計的 100 個感知密碼 這本書，發現有部份章節內容幾乎是重複的，作者將前面有關 "人類記憶" 的基本認知心理學範疇，重新整理規劃放進給 "簡報者" 看的這本書裡。兩本書一起念，真的有重新複習 "認知心理學" 課程的感覺。
  
  結合之前跟 David Chuang 課程上學到的東西，簡報上最好就是 3個重點，最後不要超過 4個，方便讓來聽簡報的人可以記住你想傳達的重點。
  
  如果你有12項重要事項要傳達，試著將這些區塊分成 3 個大區塊，其中包涵哪幾項的方式，先讓聽眾記住 3 大項才是重點。
   
• 10. People Have To Use Information To Make It Stick 
  
  人們必須使用資訊，才能記住資訊。
  
  念到這章看到關鍵字 - Schema 基模。上認知心理學時，這一直是我最無法用自己言語表達的東西，印象中的解釋「人們將訊息以基模的形式儲存在長期記憶中，並利用它來提取記憶」。
  
  想要人們記住某件事情，你要不斷地重複，熟能生巧。
  
  如果你在簡報之前，越了解你的聽眾，你越能辨識跟了解特定族群擁有的基模，這會讓你的簡報更成功。
  
  若人們既有的基模，跟你想傳達的訊息有關，請確認你真的知道基模的內容。如果可以跟現有認知的基模連結，聽眾就更能輕易的記住你要傳達的訊息。

上一篇：了解「人」，你才知道怎麼做簡報 - 讀書心得 1~5
下一篇：了解「人」，你才知道怎麼做簡報 - 讀書心得 11~15

了解「人」，你才知道怎麼做簡報 - 讀書心得 1~5

100 Things Every Presenter Needs to Know About People
了解「人」，你才知道怎麼做簡報 - 100件你應該要了解的事情

這本書是之前  了解「人」，你才知道怎麼設計！洞悉設計的 100 個感知密碼
作者 Susan Weinschenk 最新的書

這本書不是單純教你怎麼"寫"簡報，是怎麼當一個好的演講者


這本尚未翻譯成中文，100件事情，擔心自己讀完就忘光，所以來個自己跟自己開讀書會的方式來個重點節錄跟段落式的心得報告好了！



今日閱讀進度：

• 前言 
• How People Think and Learn  1~5

節錄與心得：

• 前言
  如何利用心理學成為一個更好的簡報者
  
  開頭就提了 Dale Carnegie 講到一句有趣的話：
  「對一個簡報者來說永遠有三種簡報，一個是你準備好的簡報，一個是你真實呈現的簡報跟一個你理想中的簡報。」

• 第一個段落 How People Think and Learn
  
  Albert Einstein 說：「我從不『教導』我的學生，我只嘗試去提供一個狀態讓他們可以去學習。」
  
  如果你想有效的跟人溝通，你應該要學著去了解人門怎麼思考，怎麼過濾訊息，怎麼學習。

• 1. People Process Information Better in Bite-Sized Chunks
  
  大腦在很短時間可以處理非常多的訊息，但是大腦可記憶的有限，使用漸進式揭露的方式可以有限且有效的提供足夠得訊息給你的聽眾。
  
  大腦對於小型記憶組塊的處理效果比較好。
  
  有點在複習之前學的的認知心理學。
  
  Know Who Needs What When，你要知道誰在什麼時間需要什麼，你才能學會使用漸進式揭露資訊的方式，務必要先做好研究！

• 2. People Need Context
  
  了解聽眾是很重要的事情！
  
  去年，David Chuang 教導的簡報技巧教學時，就有提到這個，一個好的簡報者要知道台下來聽簡報的人，了解的內容有多少，你才能在你的簡報中適當的提供訊息。
  
  文中提到一個段有趣的對話
  作者問了一個客戶：「你覺得使用者來用你的網站『感覺如何』？」
  客戶腦中只有數據：「我們的轉換率有5%」
  作者轉換方式追問：「那你覺得當人們在使用你的網站時的情緒是如何？」
  客戶：「我們平均停留秒數有1.68秒！」
  
  這段讓我整個大笑，有時候我們透過一些工具的分析，就以為我們了解我們的使用者，那都只是個參考！

• 3. People Filter Information
  
  使用者會過濾訊息。
  
  當初看到這個標題有點不解，過濾？是不想看還是不願意看，還是根本沒看到？
  
  原來這個『過濾』比較像是我們聽眾常常有很多"預設的立場"或是"刻板印象"，當你知道他們是這樣的族群時，你要懂得使用方法讓他們接受你想要傳達得觀點，作者自己本身就是一個很好的例子，她是一個 Apple 產品使用者，當她已經歷經從 Windows 轉換到 Apple 的過程，變成一個 fans，當她的朋友想要跟她介紹 Android 手機有多好用時，她其實根本聽不進去。
  
  如何讓聽眾聽進去？取得信任，讓他們知道『你知道』，你可以先從一個好的起頭開始，例如：「我知道 iPhone 的某某功能非常的好用......」再來可以用一些點"驚嚇"他們，例如：「你知道全世界有5成的人使用 Android 手機，其實只有3成的人使用 iPhone嗎？ 」
  
  再來，建立一個「認知失調」(Cognitve Dissonace) 的情境，簡單是一個讓對方發現自己有矛盾現象出現的情境，再深入一點，就是在對方深信的某個觀點上，製造一個「兩難」的情境，這時候，他就會感到動搖，想聽聽你的意見是什麼？
  
  
  P.S.到這邊幾乎都是 David Chuang 上課的的複習阿！

• 4. The More Uncertain People Are, The More They Defend Their Ideas
  
  其實這章就類似「兩難」了，當人們越無法抉擇，他們越會去懷疑自己原先的立場。
  
  人們越是不確定，他們越會去捍衛自己的觀點。

• 5. People Have Mental Models
  
  人們永遠有一個自己的心智模型，他們會從過去的經驗發展出一個預設好的想法，這些會影響你的簡報，這個就是我們必須要去深入了解你的聽眾的地方了，他們來自什麼樣的背景，對於你的講的東西有了解多深入，這些領域他們碰觸過多久？他們可能會有哪些預設的想法？這些都是簡報前重要的功課！

下一篇：了解「人」，你才知道怎麼做簡報 - 讀書心得 6~10

使用者介面設計的概念

原文出處：http://bokardo.com/principles-of-user-interface-design/

共有20條。

嘗試翻譯成中文，並加上一些自己的意見跟例子，有錯誤煩請指教。 : )


使用者介面設計的原則
Principles of User Interface Design


前言：

「設計不僅只是簡單的組裝、排列或是編輯，設計是為了增加價值及意義，說明、簡捷化、明確化、調整、突顯、戲劇化、說服甚至是有趣一點」- Paul Rand

"To design is much more than simply to assemble, to order, or even to edit; it is to add value and meaning, to illuminate, to simplify, to clarify, to modify, to dignify, to dramatize, to persuade, and perhaps even to amuse." - Paul Rand


1. 「明確目標」為首要任務

對任何介面而言，明確目標是首要也是最重要的任務，人們必須要能辨別那是什麼，才能有效使用你設計的介面，你要關心使用者為何需要介面、讓使用者了解介面能幫助他們和什麼互動，讓使用者能預測使用介面後會有什麼效果，這樣就能讓使用者順利的操作介面。神祕感和延遲出現是有保留的空間可以使用的，但是不可以引起任何的困惑，「明確目標」為使用者帶來信心有助於後續的操作。100個明確的畫面勝過1張但是不知道在做什麼的畫面。

Clarity is job #1
Clarity is the first and most important job of any interface.
To be effective using an interface you've designed, people must be able to recognize what it is, care about why they would use it, understand what the interface is helping them interact with, predict what will happen when they use it, and then successfully interact with it. While there is room for mystery and delayed gratification in interfaces, there is no room for confusion. Clarity inspires confidence and leads to further use. One hundred clear screens is preferable to a single cluttered one.

讓我想到一些網站為了想要有所謂"社群"的互動，加上很多奇怪的功能，結合facebook帳號等等，但如果加上社群的互動會影響到原先的目標，這設計就失去了原本網站的目的了！


2. 介面是為了互動而存在

介面的存在是為了讓人和世界可以互動，介面可以幫助人們確認、明白、使用或展現關係、把我們群聚在一起或是將我們分開、讓我們體驗及給予我們授權服務。使用者介面的作用不只是為突顯介面設計本身的藝術，也不是一個紀念碑。介面完成互動的任務的效率是可以被測量的。最好的介面設計可以啓發、喚醒、加強我們和世界的關聯。

Interfaces exist to enable interaction
Interfaces exist to enable interaction between humans and our world. They can help clarify, illuminate, enable, show relationships, bring us together, pull us apart, manage our expectations, and give us access to services. The act of designing interfaces is not Art. Interfaces are not monuments unto themselves. Interfaces do a job and their effectiveness can be measured. They are not just utilitarian, however. The best interfaces can inspire, evoke, mystify, and intensify our relationship with the world.



3. 不息代價的取得注意力

我們生活在一個容易被打擾的世界，其實很難靜下心來閱讀，因為無時不刻會有事物嘗試打斷你或是吸引你的注意力。注意力是寶貴的。別在你的應用程式側欄裡塞滿一堆讓人分心的東西...永遠要記得這個畫面一開始是為了什麼目的設計的。如果是為了讓人閱讀，最起碼等到都讀完了才跳廣告(如果一定要放的話)。保持注意力不止你的讀者開心，最後的結果也會變得比較好。把這視為首要目標之一，注意力是先覺條件，不計代價的保護他們。

We live in a world of interruption. It's hard to read in peace anymore without something trying to distract us and direct our attention elsewhere. Attention is precious. Don't litter the side of your applications with distractible material…remember why the screen exists in the first place. If someone is reading let them finish reading before showing that advertisement (if you must). Honor attention and not only will your readers be happier, your results will be better. When use is the primary goal, attention becomes the prerequisite. Conserve it at all costs.



4. 保持使用者的掌控權

人們在自己能掌控的環境下會感到最舒適，輕率的軟體設計奪走這份舒適感，強迫使用者進行不如自己預期的互動，令人困惑的路徑及讓人驚嚇的結果。 利用定期重整系統狀態、描述因果關係讓使用者能掌控 (如果你這樣做，以上就會發生)，另外對每次的操作結果做出提示。不用擔心說了"顯而易見"的癈話，因為通常 "顯而易見"這件事並不存在....

Keep users in control
Humans are most comfortable when they feel in control of themselves and their environment. Thoughtless software takes away that comfort by forcing people into unplanned interactions, confusing pathways, and surprising outcomes. Keep users in control by regularly surfacing system status, by describing causation (if you do this that will happen) and by giving insight into what to expect at every turn. Don't worry about stating the obvious…the obvious almost never is.



5. 直覺式操作是最好的

無存在感的介面，就是最棒的介面、像我們平常操作實體的東西一樣。由於這不是每次都能達成，隨著元素的資訊不斷增加，我們設計介面來幫助我們和元素互動。加上不一定需要的圖層是件簡單的事，或是加個華麗的按鈕、Chrome、圖片、選項、處理效能、視窗、附件...結果我們就在忙著變換這些UI元素然後忘了重要的事。你應該緊抓原始目的的直覺...設計出盡可能精簡的界面，盡量置入人們天生就習慣的手勢，這樣一來順暢的界面會讓使用者覺得自己是直覺得在操作想動作的目標物件。

Direct manipulation is best
The best interface is none at all, when we are able to directly manipulate the physical objects in our world. Since this is not always possible, and objects are increasingly informational, we create interfaces to help us interact with them. It is easy to add more layers than necessary to an interface, creating overly-wrought buttons, chrome, graphics, options, preferences, windows, attachments, and other cruft so that we end up manipulating UI elements instead of what's important. Instead, strive for that original goal of direct manipulation…design an interface with as little a footprint as possible, recognizing as much as possible natural human gestures. Ideally, the interface is so slight that the user has a feeling of direct manipulation with the object of their focus.



6. 一個畫面一個主要任務

設計每個畫面都要提供使用者有價值的單一操作，讓介面更好學習、好用，新增或擴充也更簡易。一個畫面有兩個以上的主要操作很容易讓人困惑。就像撰寫文章要有單一強力的主題，每個畫面也都應該有單一且明確的存在目的。

One primary action per screen
Every screen we design should support a single action of real value to the person using it. This makes it easier to learn, easier to use, and easier to add to or build on when necessary. Screens that support two or more primary actions become confusing quickly. Like a written article should have a single, strong thesis, every screen we design should support a single, strong action that is its raison d'etre.

這讓我想到註冊一些資訊常常有過長的表單，常到你怎麼滾動都滾不完，如果可以嘗試切開任務，讓使用者對任務有體驗，會是一個較好的方式


7. 次要的動作保持在次要

畫面上有單一的主要主題時可以擁有多重的次要動作，不過要讓它保持在次要！就像是你必須先擁有一篇文章，你才能有東西讓人分享到 Twitter 上....文章存在的目的是為了讓人可以閱讀可以了解。讓次要得動作放在次要得位置，可以讓他們以比較輕量化的方式呈現，或是等你主要的動作結束後它才會呈現。

Keep secondary actions secondary
Screens with a single primary action can have multiple secondary actions but they need to be kept secondary! The reason why your article exists isn't so that people can share it on Twitter…it exists for people to read and understand it. Keep secondary actions secondary by making them lighter weight visually or shown after the primary action has been achieved.

先有東西，才能分享給大家，如果是要經營一個內容需要靠User來經營的網站，就應該要想辦法把內容建立起來，再去思考怎麼散播出去的問題。


8. 提供自然的下一步

很少有互動是註定被放在最後的，所以請貼心的為使用你的系統的人設計每一個"下一步"的互動方式。你要預期未來的每一個互動跟每一個可能，設計出來的東西要能符合每一個可能。就樣我們跟其它人開始一段談話，為了能進一步互動提供一個好開頭。別讓人不知所措的停留在那

Provide a natural next step
Very few interactions are meant to be the last, so thoughtfully design a next step for each interaction a person has with your interface. Anticipate what the next interaction should be and design to support it. Just as we like in human conversation, provide an opening for further interaction. Don't leave a person hanging because they've done what you want them to do…give them a natural next step that helps them further achieve their goals.



9. 外觀是跟隨行為改變的 (如同樣式必須配合功能)

人事物按照我們所預期的去進行會讓我們感覺到最安心舒適。當某人或某件事的行為始終按照我們所期望的的去進行，我們會感到跟他們保持一個友好的關係。設計元素就應該按照他們應該要有的行為去設計。意思就是，當有人只要光看著一個元素，就應該要能預測這個元素是做什麼的。就像是如果它是個按鈕，它就應該要長得像一個按鈕，不要用什麼可愛的互動覆蓋基礎的行為，先將你的創造力放在為這些互動的關心上。

Appearance follows behavior (aka form follows function)
Humans are most comfortable with things that behave the way we expect. Other people, animals, objects, software. When someone or something behaves consistently with our expectations we feel like we have a good relationship with it. To that end designed elements should look like how they behave. In practice this means that someone should be able to predict how an interface element will behave merely by looking at it. If it looks like a button it should act like a button. Don't get cute with the basics of interaction…keep your creativity for higher order concerns.



10. 保持一致性

跟著前面的規則，視覺元素應該要保持一致性，除非他們的行為是不同的。行為相同的元素看起來應該要相同，但是不相像的元素要保持他們的不一致性。新手設計師通常在會把相同視覺處理 (使用重複的程式碼) 用在其實應該要用不同的視覺處理比較是適合的情況上，這點需要多花點努力去了解。

Consistency matters
Following on the previous principle, screen elements should not appear consistent with each other unless they behave consistently with each other. Elements that behave the same should look the same. But it is just as important for unlike elements to appear unlike (be inconsistent) as it is for like elements to appear consistent. In an effort to be consistent novice designers often obscure important differences by using the same visual treatment (often to re-use code) when different visual treatment is appropriate.



11. 強烈的視覺變化運作最佳

強烈的視覺變化可以讓畫面有清晰的層次感。也就是說當使用者每次都看到有相同順序的相同項目，比較弱的視覺變化給予使用者較少的線索讓目光停留在特定的項目上，最後會讓使用者感覺到困惑跟混亂。在變化繁雜的環境中，保持一種強烈的視覺層次是很困難的，因為視覺的重量是相對的。當所有東西都是粗體呈現，那就沒有所謂的"粗體"了。當有一個視覺強烈的元素加到畫面中時，設計者應該要重新調整頁面上所有元素的重量分配，才能再次呈現出視覺的強弱變化。大多數人不會注意到視覺重量這件事，但這其實是最簡單的設計方法，你只要加強某項或削弱某項。

Strong visual hierarchies work best

A strong visual hierarchy is achieved when there is a clear viewing order to the visual elements on a screen. That is, when users view the same items in the same order every time. Weak visual hierarchies give little clue about where to rest one's gaze and end up feeling cluttered and confusing. In environments of great change it is hard to maintain a strong visual hierarchy because visual weight is relative: when everything is bold, nothing is bold. Should a single visually heavy element be added to a screen, the designer may need to reset the visual weight of all elements to once again achieve a strong hierarchy. Most people don't notice visual hierarchy but it is one of the easiest ways to strengthen (or weaken) a design.



12. 靈巧的編排以滅少判斷的需要

如同 John Maeda 在他的書中提到的，簡單、靈巧的編排螢幕上的元素可以讓使用者看到更多。這樣做人們可以更快更簡單了解你設計的介面，因為你已經用你的設計清楚的說明了內容彼此的關係。將相同元素圈起來，利用方向跟位置呈現自然的關聯。透過巧妙的安排降低使用者對你的內容認知的負擔，他們不用花時間去思考哪些東西跟哪些東西有關連，因為你已經把關聯做好了。不要強使用者花時間去思考，用你的設計的關聯直接呈現在頁面上給他們看。

Smart organization reduces cognitive load

As John Maeda says in his book Simplicity, smart organization of screen elements can make the many appear as the few. This helps people understand your interface easier and more quickly, as you've illustrated the inherent relationships of content in your design. Group together like elements, show natural relationships by placement and orientation. By smartly organizing your content you make it less of a cognitive load on the user…who doesn't have to think about how elements are related because you've done it for them. Don't force the user to figure things out…show them by designing those relationships into your screens.


13. Highlight 不要只用顏色做變化

有關物理的顏色呈現主要決定在光線的變化，就像我們可以看到樹一整天的在太陽下的光影有非常不一樣的變化。在物理的世界裡，顏色跟陰影有很大的關係，顏色不能被當成只是一個表面的色彩。我們可以用高亮彩的顏色，幫助吸引注意力，但這不是唯一的方法，如果是一個需要長時間閱讀的介面，可以採用柔和的背景，降低整體的亮度，突顯你要注意的顏色。當然也可用活潑亮麗的色彩當背景，但是要確保可以適合你的觀眾。

Highlight, don't determine, with color

The color of physical things changes as light changes. In the full light of day we see a very different tree than one outlined against a sunset. As in the physical world, where color is a many-shaded thing, color should not determine much in an interface. It can help, be used for highlighting, be used to guide attention, but should not be the only differentiator of things. For long-reading or extended screen hours, use light or muted background colors, saving brighter hues for your accent colors. Of course there is a time for vibrant background colors as well, just be sure that it is appropriate for your audience.



14. 分斷說明

只在螢幕上呈現最需要的資訊。如果要吸引人們抉擇，只能出現足夠的資訊，讓他們選擇，然後後續逐漸深入之後細節。避免試圖一次就呈現跟解釋全部的資訊，如果可以的話，將可以延遲出現的資訊逐步的呈現，這樣會讓你的資訊更清楚。

Progressive disclosure

Show only what is necessary on each screen. If people are making a choice, show enough information to allow them the choice, then dive into details on a subsequent screen. Avoid the tendency to over-explain or show everything all at once. When possible, defer decisions to subsequent screens by progressively disclosing information as necessary. This will keep your interactions more clear.



15. 幫助及說明使用連結

在理想的介面設計中，「幫助」或「說明」其實是沒有必要，因為介面是應該是要可以讓人學習跟可以使用的。「幫助」是幫助上下文能串連的東西，應該是在真的有需要的時候才出現，平常應該是隱藏的狀態。讓人們自己去尋求幫助，讓他們自己找到問題的答案，這些權責在他們的身上，我們才能知道他們到底需要什麼。重點不在把「幫助」「說明」放在可能需要的地方，重要的是你要確認人們可以順暢的使用你的介面設計。

Help people inline

In ideal interfaces, help is not necessary because the interface is learnable and usable. The step below this, reality, is one in which help is inline and contextual, available only when and where it is needed, hidden from view at all other times. Asking people to go to help and find an answer to their question puts the onus on them to know what they need. Instead build in help where it is needed…just make sure that it is out of the way of people who already know how to use your interface



16. 關鍵時刻: 簡化使用者導覽

第一次使用經驗是最重要的，也是設計師常常忽略的。為了讓使用者更快的上手，最好的設計就是設計良好的第一次導覽，也就是還沒開始使用過得第一次接觸。這樣的導覽不能從一張空白的畫布開始解說起...應該要提供一個方式跟指引，加入使用者進入狀況，多數這樣的導覽會混雜著內容的互動，當使用者開始了解你的規則，他們更能成功使用你設計的介面。

A crucial moment: the zero state

The first time experience with an interface is crucial, yet often overlooked by designers. In order to best help our users get up to speed with our designs, it is best to design for the zero state, the state in which nothing has yet occurred. This state shouldn't be a blank canvas…it should provide direction and guidance for getting up to speed. Much of the friction of interaction is in that initial context…once people understand the rules they have a much higher likelihood of success.

Dropbox 跟 Cacoo 的使用者導覽都是不錯的案例。


17. 已知問題最有價值

人們會尋求去尋求那已知問題的答案，並非淺在問題或是會來可能會發生的問題。因次，請避免去設計出那些「假設問題」的介面，觀察那些實際已經發生的行為，並設計介面去解決這些已知的問題。當然這樣沒有那些天馬行空的創意來的有趣，但這些是最實際可以解決人們在使用你的介面時遇到的問題。

Existing problems are most valuable

People seek out solutions to problems they already have, not potential problems or problems of the future. Therefore, resist creating interfaces for hypothetical problems, observe existing behavior and design to solve existing problems. This isn't as exciting as blue sky wondering but can be much more rewarding as people will actually use your interface.



18. 最棒的設計肉眼看不到

「對厲害的設計感到好奇感」通常不會被大家注意。其中的原因，一個成功的設計，使用者會專注在他想要達到的目標，而非這個介面長得如何...當他們順利的達到目的，他們會感到滿足，不需要額外對這些狀況最其它反應。當一個設計師，要達到這樣是滿困難的，我們很少收到正面的回應，我們很少知道哪些設計是好的。但，厲害的設計師是設計出好介面的核心，而且他們也知道快樂的使用者通常是沉默的。

Great design is invisible

A curious property of great design is that it usually goes unnoticed by the people who use it. One reason for this is that if the design is successful the user can focus on their own goals and not the interface…when they complete their goal they are satisfied and do not need to reflect on the situation. As a designer this can be tough…as we receive less adulation when our designs are good. But great designers are content with a well-used design…and know that happy users are often silent.



19. 從其他設計領域開始下手

視覺及平面設計，排版，文案，資訊架構學和視覺設計......所有這些都是界面設計的一部分。他們都都有自己的專業，不要企圖跟他們劃分界線，或看不起其他的領域，從他們身上學到學到很多專業且幫助你，更可以從看似無關的東西學起，接觸你不熟悉的領域，從出版、寫程式、書本裝訂 、玩滑板、空手道......等等？

Build on other design disciplines

Visual and graphic design, typography, copywriting, information architecture and visualization…all of these disciplines are part of interface design. They can be touched upon or specialized in. Do not get into turf wars or look down on other disciplines: grab from them the aspects that help you do your work and push on. Pull in insights from seemingly unrelated disciplines as well…what can we learn from publishing, writing code, bookbinding, skateboarding, firefighting, karate?



20. 介面存在是為了讓人能使用

在大多數的設計學科中，成功最簡單的定義就是當有人願意去使用就是好的設計。像是一個漂亮椅子但坐起來不舒服，沒有人願意坐，這就是一個失敗的設計。因次介面的存在就為了創造一個好用的環境去讓人使用，就像你設計了一個好用的設計品。設計絕對不是拿來滿足設計師的雄心壯志，最重要的是它要「能用」！

Interfaces exist to be used

As in most design disciplines, interface design is successful when people are using what you've designed. Like a beautiful chair that is uncomfortable to sit in, design has failed when people choose not to use it. Therefore, interface design can be as much about creating an environment for use as it is creating an artifact worth using. It is not enough for an interface to satisfy the ego of its designer: it must be used!