用戶界面流程圖(故事板)

用戶界面原型 (User Interface Prototype) 是一個很好的方法來探索你的用戶界面 (User Interface or UI),但不幸的是,你會很容易被用戶界面的細節迷住,而忽略了大局。因此,你往往看不到系統 UI 裡高層次的關係和相互作用。用戶界面流程圖 (User Interface Flow Diagram) – 又稱為故事板 (Storyboard) 、界面流程圖 (Interface Flow Diagram) 、視窗導覽圖 (Window Navigation Diagram) 、和内容導覽圖 (Context Navigation Map) – 讓你能夠模擬主要用戶界面元素之間的高層次關係,因此能夠問到基本的可用性問題。

在圖一裡,你會看到為一個大學系統的用戶界面流程圖的開始部分,在 RUP 裡是稱為導航圖。每個框代表主要用戶界面元素,正如你模擬實例 (Instance) / 對象 (Object) 一樣。箭嘴代表它們之間可能的流動,正如你模擬在活動圖 (Activity Diagram) 裡的轉換一樣。例如,當你在桌面的畫面裡,你可以利用學生圖指示帶你到搜索學生的畫面。當你在那裡,你可以回到桌面的畫面或到學生檔案的畫面。

圖一. UI 流程圖
用戶界面流程圖
繼續閱讀

廣告

寬容性 UI 設計

不論你的用戶界面 (User Interface) 設計多麼好,用戶 (User) 始終都會犯錯誤的。不過,你不是無能為力的,你可以想辦法允許用戶從錯誤中恢復起來 (Error Recovery) ,或者甚至更好的就是防止用戶出錯 (Error Prevention) 。其中一個方法就是寬容性 (Forgiveness) 設計 。讓我們更詳細地解釋,而且看一些鼓舞人心的例子。

反饋和錯誤校正

寬容性設計其中最重要的方面就是良好的反饋 (Feedback) 。用戶應該得到通知有什麼(潛在的)錯誤,以及那些錯誤會怎樣影響他們的工作。良好的反饋不單只很好地解釋錯誤的詳情,它還包括了一些用戶能夠執行的行動,以便從錯誤中恢復起來。

但是,不是所有錯誤用戶都能夠撤消到 (Undo) ,有些錯誤是完全不可能逆轉的。這種情況會令用戶變得沮喪,所以提供一些解決方法是非常重要的,以助糾正問題。

防止出錯

反饋是必要的,不單只在發生錯誤之後,它而且是防止用戶出錯重要的角色。用戶應該被警告他們的行動可能會產生的後果。一個很好的例子是,當用戶要離開一個修改過的網頁表單而沒有存儲,一個確認對話框 (Confirmation Dialog) 就能防止資料丟失。

在用戶界面上減少限制條件 (Constraint) 也可以防止用戶出錯。例如,讓一個輸入字段 (Input Field) 能夠接受到各種不同輸入格式,然後讓系統處理它。

有幾個很好的例子

你不必搜索太多就能夠找到一些很好的例子,因為你每一天都使用他們。Google 真的充分利用了寬容性。讓我們來看看他們是怎樣做到這一點。
繼續閱讀

導覽路徑 (Breadcrumbs)

導覽路徑是一種特別導覽形式,它有時在網站上提供。導覽路徑在網站裡顯示目前的位置來幫助用戶定位。。他們通常在主頁開始,然後一步一步列出不同的用戶到過的網頁直至到目前的網頁。導覽路徑通常是互動性的,而且可以用來回到由主頁到目前的網頁之間任何一個網頁。