如果鄉民們和 Teddy 一樣都是 programmers 的話，在開發軟體的時候一定會遇到一個問題：『使用者介面要如何設計？』平平都是做手機的，人家 Apple 的 iPhone 使用者介面就設計的那麼好，而我們的卻那麼...鳥...（這一句要用唱的：人家的介面是真正的介面，我們的介面是人家不要的我們把它撿起來...）。你可能會不服氣的說，人家 Apple 或其他國際級的大公司，都有專門研究『人機介面』或是『使用者介面』的人，設計的好是應該的。好吧，有鑑於台灣都是『中小企業』居多的這個特性，想要和這些『財閥』相比是很難滴，但是軟體還是要寫啊，就算不是要賣錢的，只是給公司內部使用的系統，軟體介面不好用也是會常常被使用者念個不停甚至被恥笑。
Teddy 相信這個問題一定困擾著不少的 programmers，因為你可以把程式寫得很好，但是卻不一定知道要如何把『使用者介面設計的很好（容易）使用』。有些開發團隊雖然有所謂『設計介面』或是『做網頁的人』，這些人雖然可以把『畫面做出來』，但卻不一定具備設計容易使用介面的知識與能力。從軟體開發的角度來看，研究這個問題的領域叫做『人機互動』（Human-Computer Interaction, HCI） 或是『人機介面』（Human-Computer Interface, HCI）。由於台灣人常常抱持著『
假設你是 team leader，由於上輩子燒好香，在你的團隊中擁有所謂『做網頁的人或是設計UI 的人』，你是否常常會覺的這些人的『網頁（UI）設計的不夠好』但是卻因為自己缺少 HCI 的知識而經常有『就算想開罵卻不知從何罵起』的遺憾（友藏內心獨白：讓恁爸來罵一定可以罵到『牽絲』）。來來來，有以上困擾的鄉民們，今天 Teddy 介紹這一帖藥，服用後只要『光呼吸就可以達到減肥的效果』，保證一週內最少可廋 5 公斤...XD
藥方就是 Jenifer Tidwell 的...知道這個作者的人會以為 Teddy 要介紹 Designing Interfaces 這本書，答錯。這本書太厚了，看不下去（而且要錢）。這邊有免費的 paper 可看：
COMMON GROUND: A Pattern Language for Human-Computer Interface Design
這篇 paper 顧名思義就是要介紹好幾個 HCI 的 patterns。可能是 Teddy 看 patterns 看習慣了，總覺的 Jenifer Tidwell 的這篇 paper 寫得比 Designing Interfaces 這本書要容易閱讀。 Jenifer Tidwell 在 paper 中將她所提出來的 HCI patterns 分了好幾的類別，每一個 pattern 的內容就請鄉民們自己花時間去看（Teddy 可以幫鄉民們們省錢但是卻沒辦法幫鄉民們省時間啊），在這邊看一個 Teddy 覺的很有用的分類和其所包含的 patterns 與每一個 pattern 的 solution：
How does the content or available actions unfold before the user?
- Navigable Spaces：Create the illusion that the working surfaces are spaces, or places the user can "go" into and out of.
- Overview Beside Detail：Show the whole set of objects, or the whole undetailed data set, in one part of the display area, to act as an overview of the content.
- Step-by-Step Instructions: Walk the user through the task one step at a time, giving very clear instructions at each step.
- Small Groups of Related Things: Group the closely-related things together, nesting them in a hierarchy of groups if needed.
- Series of Small Multiples (unwritten): 歹勢，作者沒寫。
- Hierarchical Set: Show the data in a tree-like structure.
- Tabular Set: Show the data in a table structure.
- Chart or Graph: Show the data plotted against time or some other variable. Plot it together with other variables for further comparison
- Optional Detail On Demand: Up front, show the user that which is most important and most likely to get used. Details and further options which won't be needed most of the time -- say 20% or less of expected uses -- can be hidden in a separate space or working surface (another dialog, another piece of paper, behind a blank panel).
- Disabled Irrelevant Things: Disable the things which have become irrelevant.
- Pointer Shows Affordance: Change the affordance of the thing as the pointer moves over it.
- Short Description: Show a short (one sentence or shorter) description of a thing, in close spatial and/or temporal proximity to the thing itself.
以 Step-by-Step Instructions 為例，這個 pattern 所要解決的問題是：
How can the artifact unfold the possible actions to the user in a way that does not overwhelm or confuse them, but instead guides them to a successful task completion?
也有人把這樣的 pattern 叫做 Wizard，講這個名字大家就瞭了。當各位在設計使用者介面，或是 review 別人設計的介面時，如果了解了這些常用的 HCI patterns，至少就有一種可以用來評估的標準。舉一個最簡單的例子，假設你的程式有一個『Print』的功能，可是使用者的電腦並沒有裝印表機。『照理講』一般正常的地球人在此情況下會把這個『Print』功能（例如畫面上的 Print button）給 disable。但是，恰巧你聘請的是遠從火星來的 programmer，沒有把『Print』功能給 disable。
路人甲：有人這麼白目的嗎？
Teddy：別懷疑...
相信鄉民們都是受過高等教育的地球人，當遇到這樣的火星人一定要用有教養的方式來教育他。
地球人：你是『丁丁』啊... 說溜了嘴...來來來，靠...近一點，先來個愛的抱抱，再讓我教你，這邊應該要套用 Disabled Irrelevant Things 這個 pattern 喔...
火星人：喔...嗯...那泥...原來還有這一招...偶了解啦...（偶是許x美，不是丁丁啦）
地球人：一定要幸福喔...XD
以上...差不多就是這個意思了。
***
不知道鄉民們有沒有注意到，這篇 paper 的標題叫做 COMMON GROUND，看到這裡應該就了解了吧。如果不知道讓 Teddy 說給你聽。在還沒有學習這些 HCI patterns 之前，地球人和火星人在溝通使用者介面上遇到困難。但是，雙方都學習了 HCI patterns 之後，就有一個『共通的基礎』可以相互討論了。
看到這邊一定會有鄉民們想說：『我聽 Teddy 你在哪邊放風吹（風箏）』... 實際上 UI 設計哪有那麼簡單... 是沒那麼簡單，HCI 還包含了很多議題，例如 task analysis 和 usability 以及設計精美的小 icon 。但是在練會絕世武功之前，好歹先買把『小扁鑽』隨身攜帶著，不然是很難在『
***
友藏內心獨白：有便宜的牛內還不趕快搶。
沒有留言:
張貼留言