2009-06-14 138 views
3

我已經看到許多廣告/網站通過與谷歌並排設置並且有像下面這樣的標題來吸引凌亂的用戶界面:這是您的網站/這是他們的。醜陋的用戶界面

這一切都很有趣,但實際上,Google只需要一個文本框和一個提交按鈕。

當你的頁面是一個數據輸入表單,比如說一個訂單輸入表單,或者一個新的員工輸入表單時,怎麼樣?

我不能想辦法建立需要大量的數據錄入不文本框,dropdownlists,複選框的雜亂形式等

當然我可以用把只有一個文本每頁,並有50頁的數據輸入表單或嚮導,但我認爲這對最終用戶來說不會有什麼好結果。

任何人都找到了一種方法來創建一個數據輸入表單,收集大量的數據,但不看起來醜陋?

回答

7

如果這類事情上的良好用戶界面非常重要(通常並非如此),那麼隨着用戶進展而變化的屏幕會根據需要顯示字段,這往往是一個好方法。一些向上組合的嚮導屏幕也可能是合適的。

但正如我所說,它通常不是在商業應用程序中非常重要。這些信息必須是可以表現出來的,並且熟悉(這種屏幕絕對是熟悉的)。通常,企業用戶在一個屏幕上需要更多的字段,因此他們可以一次性定義值,而不必轉到不同的屏幕。

此外,大量的字段通常會被高級用戶所欣賞,因爲它們會進入很多地方,多個屏幕只會減慢速度。

這就是說,谷歌有一個複雜的屏幕。它是高級搜索鏈接。他們正在做的是保持簡單的用例。如果你有一個由數十萬人使用的應用程序,那麼一個簡單的用例絕對是值得的。如果您的商業應用有可能在其有生之年不超過幾百人使用,但不一定。

3

而不是試圖在超級雜亂和超級空白之間進行選擇,爲什麼不嘗試和傾向於一個很好的折衷?如果你可以把你的數據輸入表單分成幾個邏輯的「頁面」,這些頁面將許多類似的字段(名字信息,地址信息,以前的工作歷史等等)組合在一起,那麼你可以找到方法來隔離你擁有的東西每頁更好,而不是讓它看起來如此混亂。

0

您已回答了您自己的問題。如果你有很多問題,你需要很多空間。無論這個空間是由物理屏幕區域還是「時空」組成(即點擊來改變窗體)是唯一的邏輯選項(除了不提問某些問題外)。

2

我不是一個美人(我是一名程序員,而不是一個設計師),但是,談論谷歌的網頁,看看advanced search page - 不是美的事情,但也不是一個眼神,即使它是一個允許輸入大量數據的表單。分層對齊的文本輸入字段,在其側面清晰標記「提示」以便解釋,「一個或多個」行上有多個字段,表單允許您準備查詢的實時反饋,可選「可摺疊」區域輸入更少需要的數據。我認爲這是一種合理的技術組合。

1

顯然您至少需要N個輸入控件來獲得N個輸入值的輸入。但是,如果N足夠大,則很可能會將事情弄糟,並由於缺乏或組織而使其無法使用。

例如,想象一下,如果您有大量訂單,並且您的家庭地址郵政編碼位於信用卡到期數據和運輸方式之間,會有多混亂。

關於如何組織表單(在網絡時代之前有許多好的表單;組織表單也是一門藝術)有很多資源。

在我看來,最重要的事情是: 1)組織成清晰可見的部分,所以讀者立即知道去哪裏或大概知道他將提供什麼信息。 2)考慮希克法則 - 組織可以幫助搜索。您不會在編輯菜單下放置「打印」命令,也不會將所有命令放在一個長下拉菜單中。考慮你放置每個輸入的位置。

3)可以很容易地看到什麼是可選的,以及期望的格式是什麼。不要等待驗證顯示用戶他需要9位數的郵政編碼。

4)在同一部分組織輸入,以便您可以自動填充。例如,如果我輸入5位數的郵政編碼或州名,則會自動爲我選擇美國。嘗試填寫郵政編碼等的詳細信息。

5)使用正確的輸入小部件。如果有四個選項,不要讓用戶鍵入,放一個清除框。

6)在各種顯示器上測試。

7)保存表單時,他們正在填充,以便用戶可以繼續如果會話崩潰。

0

使用標籤頁和手風琴也是減少混亂的好方法。

1

現在,表格設計正變得更加科學。您可以嵌入JavaScript來觀看鼠標動作和時間按鍵和鼠標點擊。還有一些眼動追蹤研究,看看哪些佈局是人們最容易找到的。我最近讀了Luke Wroblewski's Web Form Design,它演示了基於證據完成的表單重新設計示例。它甚至在樣本表格上顯示眼球追蹤,因此您可以選擇讓人們減慢速度的元素。

這是一本很棒的書。顯示工作的佈局。告訴你什麼時候應該給予幫助,什麼時候不應該。如何短語說明。如何處理表單錯誤。等等。

在亞馬遜上有大約六打半的4 1/2星級設計和可用性書籍。如果您使用表單製作網站,那麼您應該跟上最先進的技術,就像您在編碼,部署和測試最佳實踐方面保持創新一樣。

隨着轉換率的提高,提高頁面上的可用性可以使收入發生巨大變化。瞭解人們如何擺脫形式的問題至關重要。

2

確保:

  • TAB和SHIFT-TAB做用戶會期待什麼
  • 相關字段組合在一起
  • 你讓用戶在他們喜歡的格式輸入數據(如果他們想例如使用「 - 」和「()」輸入電話號碼),然後將數據轉換爲您的內部首選格式。
  • 充分利用字體,顏色和分隔符等,要輸入的字段本地整齊。

想想遠程控制。一些遙控器是一組無差別的按鈕,它們的形狀,大小和顏色完全相同。某些遙控器具有明顯的按鈕分組組合,使用按鈕大小,形狀,顏色等等,可以讓按鈕一目瞭然。

您可以擁有兩個遙控器,每個提供相同的功能,但一個看起來很雜亂,另一個看不到。一個混亂的外觀不僅僅是有多少領域。

0

美在眼前。

  • 谷歌很可愛,因爲它只有一個文本框,兩個按鈕和一些指向其他功能的鏈接。
  • 谷歌也是可愛的,因爲高級搜索在那裏,如果你想要它,而不是如果你不需要。
  • Google也很可愛,因爲您可以將它嵌入到個人主頁中,並且可以獲得您自己選擇的各種各樣的neato小工具。

在所有情況下,Google都符合用戶的要求,而不是要求用戶遵守Google。

這是優秀設計的本質 - 適合用戶。

我見過用戶指向一些相當醜陋的屏幕甚至是紙質表單,並說 - 「請像這樣做,因爲這有我需要的一切,我什麼也不需要,我知道在哪裏可以找到所有的」。對他們來說,可怕的雜亂的屏幕就是完美的。我討厭它。

在許多情況下,可自定義的屏幕(如Google主頁)是一個勝利,因爲用戶可以使其變得複雜或簡單。但只有當你能找到一種優雅的方式來提供可定製性而不會分心主要任務。例如,與搜索區域(很容易1/3的屏幕空間)或小部件相比,谷歌主頁定製鏈接是一個非常小的房地產。

谷歌從最簡單的選項(www.google.com)開始,讓用戶挖掘,直到他們找到合適的複雜度級別。

你不可能取悅所有的人所有的時間上的第一次點擊,但你可以取悅大多數人的第一個點擊,和更多的人按第二下...

0

由於bethlakshmi說,你必須適合用戶的界面。如果他們是您自己的人力資源部門,請將其製作成一個大表格,並附帶大量相關表格鏈接,以便他們快速瀏覽並快速填寫大量字段。如果他們是您的客戶,請將任何有用但不重要的字段移至單獨的可選頁面(例如Flickr)。如果他們是臨時的網絡用戶,那麼修剪到對任何人都有用的絕對最小值,並添加一個簡單的方法來獲得更高級的功能(例如Google)。