現代軟體工程講義 7 使用者介面和使用者體驗

文章目錄

• 這不是bug – 如果你輸入中文就沒問題了.
• 使用者需要協助, 但是使用者沒有那麼蠢
• 光dogfood 也不夠
• 即使阿湯哥也受不了
• 人命關天的改進
• 學術搜尋的bug

說到使用者介面 (User Interface)，我們先看一個圖:

 [來源]

有些同學認為UI 設計是充滿創意和非常瀟洒的工作，  另一些同學 (特別是有一定實際項目經驗的) 也許會抱怨,  UI 的工作就是在衣服後面夾夾子, 讓前面好看一些。 其實，電腦軟體的使用者介面 (User Interface) 和使用者體驗 (User eXperience) 是一個巨大的領域 (學者們, 頂級會議, 個人電腦GUI的演變),  網上也流傳了許多建議。 這篇文章只是記錄了一些我最近碰到的零星例子,  在軟體工程課上和同學分享。

 

軟體, 硬體都有很多功能組件, 各個組件還要有機地結合起來，才能滿足使用者的需求。 一個著名的例子是茶壺:

茶壺有什麼功能組件呢?

茶壺蓋,  茶壺體, 茶壺把, 茶壺嘴

下面的茶壺這些組件都有,  但是它們都滿足了使用者的需求了麼?  或者我們可以按照時髦的分類, 叫它們 {普通茶壺, 文藝茶壺, 2 13 茶壺} ?

 

[來自 Design of Everyday Things, by Donald A. Norman]

 

當一個軟體團隊的成員忙著完成自己的“組件”的時候, 他/她是否想到了使用者如何瞭解這些組件? 如何使用這些組件完成使用者的任務?

你的軟體工程師有 empathy “同理心”麼?

 

什麼是同理心? 就是能夠理解別人的處境, 心理, 動機的能力。 西諺 put yourself in other people’s shoes, 正是此意。

1. 從使用者的角度考慮

我們看看最近網上大家談論的比較多的一件事:

近日有網友爆料，福建莆田中國銀行水關頭支行公布的反假幣電子郵箱地址長度超70個字母。該銀行工作人員解釋稱，該地址在內部使用時是中文，和外網銜接會變成一長串代碼。有網友根據GBK編碼翻譯出部分代碼對應的漢字為“出納與現金管理”.

[圖來自於 http://weibo.com/farmostwood ]

我們猜測一下技術人員是怎麼想的:

需求: 要一個電子郵箱地址, 讓人民群眾能發郵件投訴假幣和其他事情。

技術人員: 好, 內網地址搞好了, 工具自動轉成外網的地址.  搞定！ 

測試人員: 把郵件地址 copy/paste 到郵件地址, 發送, 收到了麼? 收到了. 好, 通過!

需求: 好, 把郵件地址印成提示牌搬到營業處去!

有同理心的軟體工程人員是怎麼想的呢?  他們會想到:

我們的客戶是什麼文化水平, 平時在哪種情況下會發現假幣, 他們發現後會怎麼樣發郵件報告? 

他們會在辦公室裡, 一邊喝茶 (用上述三種茶壺之一),  一邊用滑鼠鍵盤 copy/paste 郵件地址複製?

不會, 那他們會怎麼做, 工程人員設身處地自己做一下看看?

 

這不是bug – 如果你輸入中文就沒問題了.

我在工作中時不時要重裝電腦, 我一般裝英文的作業系統。 裝好電腦之後, 第一件事情就是裝中文IME。 系統內建了幾個, 我都覺得不夠好, 所以我想直接裝最新的微軟拼音中文IME。 於是我用我司推薦的搜尋引擎, 輸入 [Microsoft Chinese pinyin IME],  嘿, 搜尋結果中居然都沒有最新版本的連結.  於是我就發郵件給相關項目組的同事提意見 [謝天謝地, 我司email 地址一般都比較短, 而且比較容易找到相關部門的 email]。 幾經email 反覆轉寄/問答之後,  有一個同事回答:

如果你輸入中文 微軟拼音中文IME。 搜尋結果的第一條就是正確的連結!

拜託, 我之所以要搜尋這個東東, 就是因為我的機器不能輸入中文!

令人高興的是,  現在, 搜尋 [Microsoft Chinese pinyin IME] 終於能返回令人滿意的結果了. 

使用者需要協助, 但是使用者沒有那麼蠢

我們必應搜尋有一個 "即時顯示英語解釋" 的功能, 但是這個功能把滑鼠所在的所有英語單詞都解釋一下, 包括小學生都懂的 "a, of, at, on, and, the, he, she, ..."，使用者的滑鼠常常會無意地停留在這些詞語上面, 你就會看到這個 “英語翻譯” 功能自作多情地告訴你 "a" 是什麼意思，順便把頁面的其它文字給遮住了:

我們的PM/Dev/Test 在設計/實現/測試這個功能的時候想過目標使用者的英文水平是什麼樣麼?  他們需要哪個程度的英文解釋?  如果他們連 "a" 都不懂, 他們能來到你這個網頁搜尋含有英文的結果麼?!

光dogfood 也不夠

微軟公司有 dogfood 的傳統, 程式員都自己使用自己的產品 (從自我裝載版開始), 我在 Outlook 做開發的6年中, 大部分時間都用的是非正式的測試版本, 有些是前一天剛構建好的產品。  這種傳統保證開發人員能瞭解軟體功能在實際中的表現, 非常好。 如果我們的員工經常dogfood 自己的產品, 上面提到的問題就不會出現 - 除非微軟員工連 "a" 都需要解釋。。。

但是這一個優秀的傳統也有一個副作用, 由於我們都非常瞭解我們寫的軟體, 我們的心理, 技術能力和一般使用者有很大差別。 有一次一個同在微軟的朋友給我打電話, 問電子郵件軟體 Outlook 的一個怪問題如何解決。 我說, 你到菜單上  Tools | Option | Advanced … 然後把某一個選擇框選沒有就可以了。

他說 - 我哪敢啊, 這還是進階選項 (Advanced Option), 萬一搞錯了怎麼辦?

很多程式員都沒有意識到使用者對那些選項對話方塊中的種種選擇有很大的畏難情緒, 而程式員覺得自己開發的功能必須有幾個進階選項, 才顯得有水平…

 

 

2. 從頭到尾都要記住使用者的選擇

我所在的研究院經常有外國的學生來實習, 或是外國的學者來做短期交流.  為了工作和生活的需要, 他們大多在某大型銀行註冊帳號, 下面的事情我碰到過好幾回:

1. 使用者上了銀行的門戶網站, 把語言改成English, 開始註冊, 雖然介面不是那麼好用, 但是經曆反覆嘗試, 好歹也做完了。
2. 網站要向使用者的手機發簡訊告知密碼, (這些來訪者一般買一個神州行 sim 卡放到他們自己的國外手機裡)。
3. 悲劇:  簡訊是中文的,在這些人的手機上顯示為亂碼。
4. 這些人通常會拿者手機向周圍的人請教, 這時通常有兩個出路:
   1. 把sim 卡放到別人的機器中, 然後再發一次密碼。 //讓別人知道密碼, 總是不爽的事情。
   2. 看這些亂碼中有沒有連續 6 位的數字。             //我看到文字中的亂碼把 6 位元字的第一位也變成亂碼。 猜錯了後果比較嚴重。

使用者使用任何軟體來解決問題, 軟體從頭到尾的各個組件要結合起來把使用者的問題解決了。  使用者在第一步已經告訴系統 - 我要用英文!  負責 “發簡訊”的模組知道這一點麼?  這樣的問題, 可以通過 “基於情境的設計”來強化團隊成員對使用者體驗連貫性的理解。

 

我們微軟亞洲研究院創新工程組 (作者在這裡工作了7年) 裡經常有一些新產品的UI 設計圖, 我注意到大部分設計都是假設使用者是頭一次使用產品, 所以沒有任何積累的檔案, 照片, 處理過的映像, 曾經做過的選擇, 等等。 我同意第一印象很重要, 但是當使用者已經是第 n 次使用你的產品, 你的UI 能否為這些使用者提供方便呢?  你的產品是下面的那一種:

a) 用得越多, 一樣難用, 

b) 用得越多, 越發難用,

c) 用得越多, 越來越好用?

 

我在寫這個部落格的同時, 就被一個 a) 類型的使用者體驗折磨:

                

 

想其它的編輯軟體一樣, Windows Live Writer 可以讓使用者選擇字型, 是選擇字型的介面, 你可以看到所有字型是按照字母順序排列, 你要選“雅黑”字型, 怎麼辦呢? 你就滾動菜單, 仔細找到 Microsoft … 開頭的字型, 然後選 Microsoft YaHei. 對於第一次使用這個軟體的使用者, 這沒什麼可說的。 軟體沒法預計使用者會用什麼字型, 使用者得自己從所有的字型中選擇 (它還可以做得更好, 但是暫且不提).

但是我已經用這個軟體在這個電腦上寫了十幾個部落格, 我常用的就是兩三個英文字型, 和兩三個中文字型。 為什麼這個軟體記不住, 為什麼要強迫我每次從長長的菜單中選擇我選過 N 次的字型?

隨著我電腦上字型的增多, 這個設計還可能惡化為 b) 用得越多, 越發難用。

 

Windows Word 就有一個更好的設計, 它把字型劃分為 word 模板的佈景主題字型 / 最近使用的字型 / 所有字型。 把軟體做成這樣, 很難麼?

 

                

 

3. 短期刺激和長期的好處/壞處

一些實習生在 微軟學術搜尋 上做一些新功能, 例如展現學者師承關係的 家族樹 (genealogy / family tree)。 經過長時間的努力, 他們終於拿出了第一版:

 

 

當大家看到某個學者的老師, 學生, 學生的學生通過動畫一個接著一個蹦出來的時候, 大家感覺的確很酷!  於是大家把連結發給別人欣賞… 非常好… 但是, 有人問: 如果我第二天又來到這個介面, 看到的東西有變化麼?  怎麼知道那些資訊是新的呢?   同學們回答: 看不到, 但是這個動畫多酷啊! 

問: 那使用者會每天都來看這個酷的動畫麼?

答: …

 

即使阿湯哥也受不了

前不久布朗大學的 Andy Van Dam 教授來研究院訪問, 他講了很多圖形學/人機互動方面的趣事。 大家都知道電影裡經常有使用者用手勢就可以控制電腦的情境,   Tom Cruise 主演的 〈Minority Report〉 (少數派報告) 就是一例:

 

 

阿湯哥看起來是挺瀟洒的, 伸伸胳膊, 做個手勢, 就可以把大螢幕上面的資料搬來搬去。 不亦樂乎。 Andy 教授說, 在拍電影的時候, 要反覆拍多組鏡頭, 湯姆同學反覆地伸胳膊, 揮手, 揮手, 揮手… 終於受不了了,  胳膊都抬不起來了。 後來劇組只好用細鋼絲線把他的手臂吊起來, 才完成那些動作的拍攝。

如果你要在電腦前工作 兩分鐘,  你用什麼控制電腦:

a) 滑鼠鍵盤,

b) 手勢

c) 語音

如果你要在電腦前工作 8 小時呢? 

 

在別的行業也有類似的情況, 很久以前百事可樂和可口可樂在市場上競爭很激烈, 一次Pepsi 宣布他們的新型飲料在使用者實驗中大獲好評, 測試使用者 “嘗了都說好”, 可口可樂公司立馬買了對方的飲料, 在自己的實驗室也做使用者實驗.  不料結果真的像競爭者說的那樣, 大部分使用者都很喜歡Pepsi公司的新飲料。 這下可口可樂公司裡一些人士開始著急了, 紛紛尋找對策。 但是過了幾個月, 市場資料顯示這個在實驗室裡很受歡迎的飲料並沒有產生巨大的銷量, 這是怎麼回事?  是投放市場不對, 還是供貨跟不上, 還是實驗室裡的使用者撒謊?  後來大家才知道在實驗室裡喝幾口飲料和在消費者家裡喝是很不一樣的.  [注: 在 Malcom Gladwell 的 Blink 書裡面看到]

在實驗室裡: 大家漱口之後, 品嘗幾口或一聽飲料。                               //新產品甜味較大, 口感很好, 我喜歡!

在家裡: 美國消費者一次買一箱 (24聽), 坐在沙發裡, 一邊看電視一邊喝。    //新產品甜味較大, 喝多了太膩味, 喝不下去了。再也不買了。 

 

 

4. 不讓使用者犯簡單的錯誤

大家坐飛機都會看到座位前有一個小遙控器,  它能控制座位前小電視, 閱讀燈, 還能呼叫空乘人員。 這個高科技的東東有哪些 UI 上的問題和好設計呢?

 

首先怎麼把這個遙控器拿出來就是一個問題 (遙控器反面還有許多按鈕, 要拿出來才能用)。 你會注意到遙控器的周圍, 尤其是右上方有不少硬物撬動的痕迹, 看來一些乘客不得其門而入, 乾脆來硬的。

據說, 空姐和空哥們對此類遙控系統一個最大的抱怨就是乘客會無意中按到 “呼叫空乘人員”那個按鈕 - 等乘務員放下手中工作跑過去的時候, 乘客會一臉無辜的說 – 啊, 我沒有叫你啊…  如果空姐還沒有太疲憊, 她們會教育乘客哪個鍵是做什麼用, 然後悻悻而去。

我們看一下這幾個鍵, 左上方: 呼叫乘務員, 右上方: 取消呼叫;  下方: 閱讀燈。 可以想象, 在長途飛行, 照明不足的情況下, 乘客很容易犯錯誤。

如果我們是設計人員, 我們有什麼好辦法呢?  <現代軟體工程> 的同學們在課堂上提了不少想法:

1. 用不同的的顏色來表示
2. 用不同的聲音做反饋
3. 提供多國文字的說明
4. 在按鈕裡面裝燈
5. 要使用者再確認一次

這些想法很有意思, 但未必真正解決問題, 也許會帶來新的問題。

1. 多種顏色在光線比較暗的時候未必分得清, 使用者還是會亂按。
2. 聲音的反饋發生在按鍵之後, 錯誤已經發生
3. 看說明再操作的使用者不多
4. 裝燈多費電, 而且看過去所有座位前面都有幾個小燈在閃爍, 有些乘客也許很不爽。
5. 如何? “再確認一次”呢? 使用者會高興麼?

這個遙控器本身也體現了設計的改進:

從側面看, 你會注意到 - [呼叫] 有意地做得不太突出 (不是乘客按了太多次的緣故);  [取消呼叫] 按鈕則特別突出; [閱讀燈] 按鈕則是正常高度。

根據著一個報道:

http://www.reuters.com/article/2011/06/21/us-airshow-button-idUSTRE75K1XR20110621

報道裡提到 – 很多乘客為了避免誤按 [呼叫] 按鈕, 乾脆連閱讀燈也不想開了。

新型的 737 飛機內部設計終於把 [呼叫] 按鈕和 [閱讀燈] 按鈕分開老遠放置, 同時用不同的顏色區分。 原來的設計被很多人抱怨過 – 還上了 baddesign 的網站。 這一貌似簡單的改進據說也花了很多年的時間。

 

 

既然說到飛機, 我就再舉一個搞笑的例子:

http://www.codinghorror.com/blog/2010/03/the-opposite-of-fitts-law.html

 

如果我們把 [緊急彈射座椅] 這一按鈕放在戰鬥機控制板上這些按鈕之中: [噴水刷窗] [FM 電台] [彈射座椅] [機艙燈]

可以想象有不少悲劇會發生…  這一設計也可以稱為 - 腦殘設計中的戰鬥機。

 

 

人命關天的改進

我從這本書 [注] 裡看到在手術室裡, 麻醉師麻醉的過程中會用到不同的輸液藥品, 有兩個管子一模一樣, 但是有截然不同的用途, 這成為不少醫學事故的問題根源所在。

怎麼改進?  大家有很多建議:

1. 加強培訓
2. 在兩個管子上加明顯的標記
3. 增加人手, 確認步驟, 每次操作前多人確認。
4. 加重對此類事故的處罰方式
5. 把兩個管子的介面做得完全不一樣, 讓犯錯誤變得不可能

你選擇哪一個選項? 

醫院裡選擇了 (5) 這個選項。 實施了這個改進之後, 手術室裡因為麻醉失誤而導致的死亡數量減少了95%

 

 

學術搜尋的bug

我最喜歡的一個項目是 微軟學術搜尋, 儘管許多使用者覺得它的 UI 不錯,  它仍有很多可以改進的地方, 一個叫 西喬的同學就給提出了下面的建議:

 

 

5. 使用者體驗和品質

 

好的使用者體驗當然是所有人都想要的,  如果它和產品的品質有衝突, 怎麼辦?   犧牲品質去追求使用者體驗, 能變成利潤麼?

GE 公司的總裁 傑克·韋爾奇講過這個故事 (來自 《贏》 第 5 章):

1990年代, 韋爾奇注意到核磁共振機器的通道特別狹窄， 在長達幾十分鐘的檢查過程中, 病人常常有得了幽閉恐懼症的感覺。 傑克做過類似的檢查, 深有體會。他問, 能不能把通道做得大一些?  專家說那樣會降低掃描成像的品質。

他又問, 對於那些不需要太多精度的檢查, 能否犧牲一些成像品質, 換取使用者的良好體驗呢? 專家說, 他們會考慮的… 然後就沒有下文了。

不久, 日本的日立公司推出了寬通道的掃描裝置, 並奪取了大量的市場份額。 GE 被動迎戰, 花了兩年時間才趕上對方。

 

6. 你姥姥的遙控器

我們大家平時都說要向某某大師或某某產品學習, 把最重要的功能做好交給使用者，把那些無關緊要的功能藏起來, 做減法...  但是程式員們心裡還是想把進階功能 “秀”出來。  我們都用過各種電視/DVD 播放程式的遙控器，功能很強，按鈕很多吧？ 你有沒有注意到老人家用遙控器時的困難?  

下面一個 "設計" 大膽地做了減法，  解決了姥姥的問題:

 (連結)

這麼少的按鈕, 轉念一想, 這像不像蘋果公司iPod 的介面?

 

練習 - 總是要還的

良好的使用者介面和體驗能讓使用者在使用軟體的過程中感到愉悅; 機械的, 腦殘的使用者體驗設計會讓使用者浪費時間, 增加學習成本, 犯本可避免的錯誤, 心情沮喪, 甚至出事故。

 

光讀部落格不動腦是不行的,  我們不妨來做一個練習, 是一個室內空調控制器的使用者介面, 我自己嘗試過多次仍然不得其解。

如果我發現空調是開著的 (不管冷熱), 我要把它關了, 應該怎麼操作呢? 理想的介面是我只要做一個操作, 就可以搞定。

實際上使用者要做幾次操作呢?

 

 

 

-----------------------

[注: ] Influencer: The Power to Change Anything  (link)