DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Dreamweaver教程 >> Dreamweaver相關 >> 保守的使用下拉菜單
保守的使用下拉菜單
編輯:Dreamweaver相關     

    摘要:

    下拉菜單經常帶來更多的可用性問題,並且常常容易被混淆。這是因為網頁設計師們往往會在不同的幾種情況下使用它。同時,滾動的菜單降低了網頁的可用性,因為用戶無法在單一的一個掃視上看到他們想看到的所有選項。

    很明顯,下拉菜單在好的網頁設計中有其自己的位置。但是,有限的交互式部件導致了網頁設計師們濫用下拉菜單,這帶來了可用性問題並且容易讓人誤解。設計師們會在各種不同的情況下使用下拉菜單,包括:命令菜單:根據用戶所選的選項,進行不同的操作。

    導航菜單:把用戶帶到網站上新的位置。

    表單填寫:在填寫表單時,讓用戶通過下拉菜單來選擇某一選項。

    挑選值:從一系列可用的值中,選擇一個。

    只有最後一種情況和傳統的圖形用戶界面設計相一致。特別是,當使用下拉菜單來作為命令菜單時,看起來非常困難。命令菜單僅出現在標准的菜單工具欄上。盡管Mac和Pc使用兩種不同的執行菜單,但兩者都表明命令菜單不同於挑選值菜單。事實上,在“Macintosh Human Interface Guidelines”的87頁,明確的說:“不要使用下拉菜單作為命令菜單。”

    變革前景展望

    網站的確需要一套更豐富的標准交互式部件-至少得像80年代由Mac公司提出的設計調色板一樣豐富。給出更加具體的部件,設計者們可以為每種目的選擇正確的表達方式,從而增加用戶掌握環境的判斷力。目前而言,相當多的設計師們混淆了這些動作的使用方法,因此很少有用戶會在在給定的時間內明白它們可以做什麼。

    不幸地,短時間內還不會出現更好的浏覽器。如果打算使用增強的設計部件標准,我推薦在兩年或更長時間後使用,因為浏覽器功能的突破,會非常緩慢。

    因此,可以預見,我們還得使用這一易使人混淆的、單一的圖形用戶界面部件——下拉菜單。

    避免使用的設計

    下拉菜單是有它們的好處的。首先,它們節省了用戶的屏幕空間。當它們僅顯示一個正確的選擇時,可以防止用戶選擇不正確的步驟。最終,由於它們是一個標准的部件(甚至是令人討厭的部件),用戶知道當他們碰到它時應該怎麼辦。

    盡管它有以上的優點,但是如果設計師們盡量少用下拉菜單,那麼網頁的可用性會得到提高。下面舉了幾個在設計中應該避免使用的例子:

    交互式菜單:當用戶在一個下拉菜單中選擇了相應的選項後,同一頁面中的另一個下拉菜單自動改變。這會使用戶感到非常迷惑。

    很長的菜單:這意味著用戶不能掃視所有的項,而必須拉動滾動條。通常,在這種情況下,使用正規的HTML的超鏈接列表會更有效。

    州、城市縮寫菜單:例如U.S. 寄信地址。用戶直接鍵入"NY"會比在一個需要滾動的下拉菜單中進行選擇,方便快捷得多。雖然讓用戶自己輸入數據時,為了保證數據的正確性,必須增加數據校驗腳本,但從可用性角度來說,這通常是一種最好的方法。

    用戶非常熟悉的數據菜單:例如,他們的出生年月。用戶常常會鍵入這樣的信息,讓用戶從下拉菜單中選擇年份、月份,破壞了規則,你完全可以為用戶創建更多的東西。正如下面的例子,所展示的:

    在最近的在鈕約召開的網絡世界會議上,我和Kara Pernice Coyne介紹了一些網站可用性方法。在介紹中,我們為觀眾展示了一個小小的用戶測試。在用戶注冊面面上,用戶必須在一個表單的文本框中輸入她的街道地址,在一個下拉菜單中選擇所屬的州。猜猜看,發生了什麼?一開始用戶在文本框中鍵入了完整的地址,因為以前她一直是這麼做的。當看到下拉菜單時,她顯然有點兒驚奇,然後她不得不重新回到輸入地址的文本框,刪除剛才她已經輸入的州部分信息。

    在這個小測試中我們得出,有時候對單一的用戶進行測試,能夠清楚反映一些問題。一旦你看到操作中的誤解,你就會意識到,使用一個“有用的”下拉菜單以節省用戶輸入的時間所帶來的害處遠遠大於它所帶來的好處。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved