研發與設計專欄
看不到的細節 - 軟體操作介面 不只好看更要好用
在我們生活中資訊軟體已無所不在,使用者對於介面設計已經不只有視覺層面,甚至是透過什麼方式操控頁面的問題,對使用者感官來說也佔很重要的一部份

在日常生活中,資訊用各種不同的方式,透過不同的媒介,讓人汲取使用,我們也用不同方式操作使用獲得資訊。當數位資訊進入生活中,這些資訊不單是透過眼睛看到,更能與之互動,在互動過程中不僅單向獲取資訊也同時提供資訊。在這一來一往間,使用者介面設計不限於視覺層面,而是延伸到透過什麼方式操作介面的問題,如:掌控大螢幕時,必然需要一定的距離,視線才能掌握資訊,如此一來就需要滑鼠、鍵盤等間接操控使用者介面的工具;但若是在行動裝置等介面上,就可以直接透過握持裝置的手近距離操控。

使用者介面設計最根本的原理─

Fitts law 費茲定律

Fitts law(費茲定律)T=a+b log2 (1+ )可以說是使用者介面設計中最知名且根本的原理之一,Fitts law 定義了游標移動到目標之間的距離、目標物的大小和所花費的時間之間的關係,並透過一個公式來定義此一原則,其中闡述的大致上為目標物越小對於其操作滑鼠移動到的時間會越長。據此概念,當介面上因為不可避免某些不是必須但卻會干擾主要內容的按鈕或選單存在,設計師不可能將之設計的相當巨大,因此在適當的尺寸下,希望選單能盡量離滑鼠作業範圍近一點,以Windows 與Mac 作業系統來說,Windows一向會把視窗選單放在視窗標題列下方,而Mac 作業系統則是將選單放在整個視窗螢幕的最頂端,從這樣看來我們會覺得Windows的設計會讓我們滑鼠移動距離短一點

Mac 把menu bar 放在螢幕頂端,雖然距離變長了,但目標的大小也跟著變成了「無限大」。因為螢幕的邊緣會阻擋住游標的行動,於是使用者可以不必瞄準的將滑鼠往上一甩,不用停下來對準目標物,也就等同於目標的大小變成了無窮大。

在Fitts Law 中,當W 是無限大時,整個log函數得到的結果會變成,也就是說T 就會變成一個簡單的常數值a,跟距離或大小都沒有關係了,而這個道理也可以從許多繪圖軟體,這種需要大量工具,且操作者螢幕普遍很大的情境中發現。在大螢幕的工作範圍內,多數軟體需要將整個視窗的使用最大化,同時一切的工具項目都會圍繞在視窗的最邊緣,中間則是工作內容區塊,這樣在視線中的主區塊將會是主要內容區域,而其他輔助工具或選單則相對在不干擾物件時,達到最容易獲取的位置,也就是螢幕的最邊角。因此筆者通常在設計介面時,會評估某些類型的按鈕盡量安排於畫面邊界,在使用者操控時,可以很快速且習慣性不需要小心瞄準就可以達到的邊緣位置。

      
        ↑ Windows 一向會把視窗選單放在視窗標題列下方。                            ↑ Mac 作業系統則是將選單放在整個視窗螢幕的最頂端。

聚焦螢幕中間 

成為使用者設計界面主流

談完了工具與選單列的位置,回過頭談內容區塊的部份,在大螢幕的操作介面中,人們的視線也如同滑鼠要水平移動一樣的需要較多力氣,當在一個27 吋螢幕前工作時,如果有一行字從螢幕的最左邊寫到最右邊,眼球轉動的幅度會比較大,持續8 個小時眼睛將會感覺疲乏,所以介面中的主要內容多半會聚焦在螢幕中間,左右會留下較多的空間。

不單單是文書編輯工具,知名的國外組織協同溝通工具Slack 的設定畫面中,其畫面左右留下了較多的空白,為的是在大螢幕情況下,讓視線保持在畫面中央,並一路從上到下填寫設定。

↑現今主流操作介面主要將內容聚焦在螢幕中間,左右會留下較多的空間,Slack 的設定畫面即是如此。

Guidelines for form layouts

提出垂直瀏覽原則

筆者在設計許多企業內部的系統介面時,經常遇到需要設計多表單、多表格的案例,然而傳統的介面設計,常常是把畫面塞滿,然而現代介面設計愈發專業以及累積出的經驗,事實上許多設計不再是考量使用者要一眼看到全部的東西,而是如何設計一個好用的使用過程,可以減少使用者思考操作的時間,無形中提升工作效率。在前面提到的表單設計,許多表格設計準則都提示到,表單不應該使用雙欄,因為人類閱讀的動線都是垂直瀏覽的。以微軟所提出的Guidelines for form layouts 中及明確提到這原則。

↑微軟所提出的Guidelines for form layouts,建議以垂直瀏覽的設計為主。

研究發現單欄表單

比多欄表單省時易填寫

國外研究發現,兩個相同內容但不同設計的表單,其中一個表單的填寫順序為單欄,但是中間夾雜許多的文字訊息,甚至文字數量超越填寫項目的數目;另一對照組擁有雙欄,但是沒有太多文字描述的表格的填寫時間的實驗。意外的發現多欄的設計造成了填寫時間兩倍以上的差距。這也是第一次遇到一個多欄表單,每個使用者會遇到的困難,因為使用者會開始疑惑,我該先填右邊還是往下填,到底左右是否有任何關連,或者這個介面是左右捲動的?

介面設計

是關乎心理層面的操作行為

許多介面設計中,設計師的專業是讓使用者的操作在美觀之餘,能讓第一次使用或往後的使用,擁有看不到的方便性,這些方便性從表面很難看到,從Mac 的案例到各種知名的軟體的優良設計案例中,我們都看到這些原則。介面設計並非將畫面塞滿如此而已,而是了解您所不知道的人類學中許多心理層面本能上的操作行為。