如何设计一个优秀的向导式界面(Wizard)
軟件界面設計中的“向導式界面”這個術語翻譯自英語中的“Wizard”一詞。大部分字典上對于Wizard的解釋是男巫、奇才的意思。不過從其用途來看,似乎向導的譯法更加形象。向導,顧名思義,就是能帶領或指引別人到達目的地的人。在實際使用中,這種交互方式的確就像一個向導一樣,一步步地引領用戶向前。在每一步中,它會詢問用戶一些簡單的問題。最后,根據用戶的輸入信息,它將能夠幫助用戶完成一個復雜的任務。
從軟件可用性的角度來看,向導式界面試圖達到的可用性目標包括易學習性和易記憶性,這兩個可用性目標在如下兩個應用環境中顯得尤為重要:
1.從用戶特征來看,用戶是新手,希望能快速上手使用;
2.從任務特征來看,任務有一定復雜度并且使用頻率很低。由于具有這樣的特點,用戶很難將任務所需的操作全部記憶在頭腦中,這就需要界面將這些操作全部呈現出來,以一種外部知識的方式提供給用戶,從而減少用戶的記憶負擔。
具體來說,向導式界面最常見于三種應用環境中:
1.軟件安裝向導,它用來幫助用戶完成安裝軟件的任務;
2.種是創建復雜的文檔或對象,比如vs.net的向導可以幫助你很快地建立起一個C++或其它語言的項目工程,這其中已經包含了一個工程所必需的所有文件;
3.任務的各個步驟之間具有很大相關性,后面的步驟會根據用戶在前面步驟中的不同輸入而發生變化。
從應用平臺看,起初向導式界面只是出現在桌面應用中。不過,隨著Web應用的迅速發展,有越來越多的Web應用中的某些任務也采用了這種形式的交互方式,例如在進行新用戶注冊或完成網上購物的過程。
那么,如何才能設計出一個友好易用的向導式界面,以使其能更好地滿足以上的可用性目標呢?下面將應用有關的可用性啟發式原則,得出一些向導式界面設計的指導性準則。
一. 盡可能展示出用戶當前在整個向導過程中的位置
具體來說,在進行界面設計時,要通過各種視覺手法來告訴用戶,這個向導過程總共有哪些步驟、用戶已經完成了多少步,以及還有多少步未完成等信息。這些要求其實是任何信息導航設計所要達到的一些基本目標。如果一個界面設計達到了這些目標,它就能使得用戶具有一種對整體的把握感。當用戶看到自己所完成的每一步所帶來的進展以及他在整體上正在一步步地向成功接近時,他就會更加有信心并愉快地完成整個任務。
有兩種方式可以用來向用戶展示當前進度。第一種方式比較簡單,即在每個步驟的頁面上顯示類似“第2步(總共7步)”,或 “Step 2 of 7” 格式的文字,如圖1所示。
(圖1,VC++ 中的MFC Application Wizard 界面中的第四步)
第二種方式是在每個步驟的頁面上的固定位置顯示一個所有步驟名稱的列表,并且用一種醒目的方式顯示出當前所處的步驟。這種方式不僅可以讓用戶看到當前的進度,而且還能看到接下來的那些步驟的名稱,如圖2所示。在這個例子中,用戶當前是在“Database Support”步驟中,后面還有三個步驟有待進行:“User Interface Features”,“Advanced Features”以及“Generated Classes”。
(圖2,vs.net 2005 中MFC Application Wizard的界面)
二. 向導式界面的步驟個數以及每個步驟上的信息量的設置
現在假設,向導式界面需要從用戶那里收集10項信息以便完成一個任務。那么,應該設置多少步驟以及如何將這10項信息分配到那些步驟上呢?
這里有三個因素在設計時需要加以考慮。
2.1 在每個步驟中,界面要求用戶輸入的所有信息項應該具有高度內聚性,即從邏輯上來說,這些信息項之間是高度相關的,或者說是一個整體。比如說在新會員注冊的向導中,有某一步是要求用戶提供家庭住址的。在這里,家庭住址所包含的國家名稱、城市名稱、街道以及郵編等信息從邏輯上來說構成了家庭住址這個完整的信息單元,因而它們被放在一個步驟中是合適的,盡管從物理設計層面來看,這個步驟的界面中包含了多個輸入控件,比如單行文本框、下拉列表等等。另一方面,在很多情況下,每個步驟中實際上就只有一個控件,比如只有一個單行文本框或一組單選按鈕,這些物理上的單一界面元素自然也就滿足了邏輯上的內聚性要求。
2.2 向導式界面的操作過程是一個完全由計算機控制的交互過程,用戶所能做的只能是被動地根據計算機給出的要求來提供一些簡單的信息或做出選擇,而無法根據自己的意愿來對所要操作的對象或要完成的任務進行隨心所欲的操控。這樣,過長的向導步驟個數會令用戶感到受到了極大的約束,同時他們也會感到任務過于繁瑣和困難。這樣的設計結果就違背了采用向導式界面方式的初衷。
有關于步驟的恰當個數并沒有一個嚴格的量化準則,不過一般的指導性建議是不要超過10個,正如《Designing Effective Wizards: A Multidisciplinary Approach》一書中所建議的。另外,無獨有偶,在Vs.net 2003中有一個工具是專門用來幫助程序員制做向導式界面的,該工具所允許的最大的步驟則是8個,如圖3所示。
(圖3,Vs.net 2003 中的制做向導軟件的工具界面)
為了得到特定于你的應用中所需的向導式界面所能允許的步驟個數,最可靠的方法還是進行可用性測試,以便發現在超過多少步驟后用戶就難以忍受了。
2.3不難看出,向導式界面所要收集的信息總量也對向導個數及每步中的信息量有很大影響。顯然,為了保證步驟個數不會太多并且每個步驟內的信息高度內聚,信息總量是有個上限的。這意味這不能試圖在向導式界面中要求用戶提供太多的信息,而應當只要求用戶提供完成任務所必須的基本信息。那些高級設置應當通過其它類型的界面來完成。
三. 避免顯示無用的圖片
有很多的向導式界面會在其每個步驟的畫面中的某個位置,比如左側或右側,顯示一副圖片,如圖4所示。這種設計的問題在很多其它類型的界面設計中也都存在,那就是,界面設計中的圖形設計不是為了表達某種信息,而純粹是為了修飾的目的。軟件就其本質來說是一種工具,而不是掛在墻上的藝術品;用戶購買軟件是為了使用它,而不是像看風景一樣地欣賞它。由于這樣的原因,在發生沖突時,軟件的功能性和可用性的優先級應當高于美觀方面的考慮。在向導式界面的設計中,通常情況下每個步驟的畫面都是一個不太大的窗口,很少會有窗口大小是全屏或接近全屏的向導式界面。這就意味著在每個步驟中,軟件所能利用的屏幕空間是很有限的。在這種情況下,將寶貴的空間用于一副不能向用戶傳達任何有效信息的圖片就是在浪費了。這樣的圖片所占據的空間完全可以用來顯示其它一些更有意義的信息,比如上文提到的用于展示當前進度的所有步驟的名稱列表,或者,它也可以如下文將要提到的那樣,根據用戶在當前步驟中的選擇,以一種可視化的方式顯示做出這個選擇后的效果。
(圖4,Windows XP中添加新用戶時的向導式界面,注意其左側毫無意義的那幅圖片)
四. 在向導結束前,將用戶的輸入以某種方式顯示給用戶以便確認,并且越及時越好
這一準則應用了反饋原理。該原理指出,任何同人進行交互的系統,都需要將其內部狀態以某種方式表現出來,尤其是要對用戶的輸入動作進行反饋,只有這樣,用戶才能知道系統是否檢測到并接受了自己的輸入,以及自己的輸入是否正確,這樣用戶才能進行相應的后續操作,比如調整自己的輸入或改正錯誤。缺乏反饋的系統會讓用戶感覺茫然和焦慮。以網上銀行的交電話費功能為例,在系統的提示下,你輸入了自己的電話號碼,此時如果系統沒有任何反饋就直接從你的帳戶里扣掉一筆金額,你還還敢用這樣的系統碼?萬一在輸入電話號碼按錯了按鍵,豈不是幫別人交了錢?幸好,網上銀行系統考慮到了這一點,在你輸入完號碼后,系統會首先把你的輸入的號碼念一遍,然后再念出要繳費的金額,最后才讓你按某個鍵來確認繳費。
軟件中的向導式界面有著和網上銀行類似的對于反饋的需求。它必須以某種方式顯示出用戶都做了哪些輸入和選擇,這樣用戶才能放心地讓向導完成任務,并且在按下最終的確認按鈕之前對于任務完成之后的情況明明白白。這就是為什么大多數向導式界面的最后一個步驟都是將用戶在前面的步驟中輸入的內容以明細表的形式顯示出來,以便用戶根據它來進行確認。因此,提供一個總結頁面(Summary)是對向導式界面的一個基本要求。
在此基礎上,如果有可能,在向導中的每一步都應當根據用戶的輸入,在界面上的某個區域顯示出用戶輸入所將產生的結果,從而能讓用戶更加及時地看到將來的結果并立刻進行調整,而不是等到了最后一步發現錯誤時,不得不一直按“上一步”按鈕倒退到所要修改的那一步。當每一步所產生的結果能構以一種可視化方式表現時,這種及時反饋的策略就顯得更為必要和可行了。
以圖1中的MFC Application Wizard的第四步為例,這一步要求用戶設置將要生成的項目的界面風格,例如是否有工具條、是否有狀態條、控件是否具有三維立體效果等等。該步驟左側的圖片是一個對于將要生成的界面風格的預覽區域,其樣式將根據用戶的選擇實時變化。例如,如果用戶選擇了“Docking toolbar”項,則工具條就會顯示出來。顯然,這樣的及時反饋策略能夠讓用戶對于每一步操作都胸有成竹,信心百倍。
總結
向導式界面是一種著眼于幫助人們處理復雜任務或不常見任務的交互策略。為了更有效地達到上述目標,我們需要對其中的很多交互細節加以認真處理。本文從一些可用性原理及交互設計原理的角度出發,考查了一些在設計向導式界面時應注意的問題,它們將有助于你設計出一個更加友好和易用的向導式界面。
總結
以上是生活随笔為你收集整理的如何设计一个优秀的向导式界面(Wizard)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: (Spinner) android中Sp
- 下一篇: eclipse/myeclipse高亮显