你會(huì)構(gòu)建表單組織嗎?
面對(duì)優(yōu)秀表單設(shè)計(jì),人們能夠不費(fèi)吹灰之力就能填完表單,這里有視覺與交互設(shè)計(jì)考慮因素對(duì)表單的影響,但更重要的因素是表單的內(nèi)容及組織方式。以下是經(jīng)過多年的設(shè)計(jì)實(shí)踐我們能得到的一些原則:
- 應(yīng)當(dāng)花時(shí)間評(píng)估表單中的問題。應(yīng)當(dāng)提高警覺,去除一切不必要的問題。
- 表單所提問題(標(biāo)簽)應(yīng)當(dāng)盡量簡潔。
- 如果人們會(huì)誤解簡潔標(biāo)簽,應(yīng)當(dāng)尋找使用自然語言的機(jī)會(huì),澄清表單要求人們回答的問題。
- 表單所提問題來自多個(gè)不同人或部門,應(yīng)當(dāng)確保表單統(tǒng)一口徑。
- 可以將表單內(nèi)容組織成邏輯組,有助于瀏覽和完成填寫。
- 如果可能,應(yīng)當(dāng)以對(duì)話形式構(gòu)建表單。主題間的自然間斷有助于組織表單。
- 如果表單可自然分成若干主題,一個(gè)網(wǎng)頁可能就足夠組織表單。
- 如果表單包含大量問題,同時(shí)有若干主題,可能需要多個(gè)網(wǎng)頁來組織表單。
- 如果表單包含大量問題,而只和一個(gè)主題相關(guān),一般需要一個(gè)較長網(wǎng)頁來組織表單。
- 可以考慮在表單填完之后提出可選問題?赡軙(huì)比在初始表單中就提出這些問題能獲得更多答案。
- 可以考慮采用Web慣例調(diào)查發(fā)現(xiàn)特定類型網(wǎng)站如何組織表單。
- 應(yīng)當(dāng)采用最少的必要視覺信息來區(qū)分內(nèi)容組。
- 英文網(wǎng)站首字母應(yīng)當(dāng)大寫,使內(nèi)容組更容易瀏覽。
Effortmark公司可用性顧問,卡羅琳·賈勒特說:“先考慮人,在考慮像素。”開始設(shè)計(jì)前要思考一個(gè)問題:用戶真正關(guān)心什么?設(shè)計(jì)師在關(guān)注像素的同時(shí)可能忽視了人因因素-比如標(biāo)簽?zāi)┒耸欠裥枰胖妹疤?hào)等微妙細(xì)節(jié)。用戶真的不關(guān)心冒號(hào)。其實(shí)用戶真正關(guān)心的是問題的內(nèi)容和為何要問這些問題。從了解用戶開始,并了解你的公司搞清楚為什么表單要這么設(shè)計(jì)?是用戶關(guān)心的關(guān)系點(diǎn)問題么?“保留,刪減,延遲,解釋”形成更好問題的四大策略,同時(shí),多種視角的平衡用戶需求與商業(yè)需求。
你還應(yīng)該注意哪些表單設(shè)計(jì)細(xì)節(jié)?
設(shè)計(jì)表單時(shí)要注意細(xì)節(jié)問題的處理,比如:表單的命名、起始頁、清晰的瀏覽線、注意力分散最少、進(jìn)程指示、Tab鍵跳轉(zhuǎn)等。其實(shí)還有一點(diǎn)就是讓用戶知道完成表單的路徑。
- 確保表單名稱符合人們的期望,并簡潔解釋每個(gè)表單的用途。
- 如果表單需要時(shí)間或者查詢信息才能填寫,可以采用起始頁來設(shè)定人們的期望。
- 由始至終采用清晰瀏覽線和有效視覺步伐來引導(dǎo)人們,確保說明清晰的填寫完成路徑。
- 對(duì)于關(guān)鍵任務(wù)表單,比如結(jié)算表單或者注冊表單,應(yīng)當(dāng)去除會(huì)分散注意力的部分、任何導(dǎo)致人們放棄填寫的鏈接或內(nèi)容。
- 如果表單分為多個(gè)已知的有序網(wǎng)頁,可以采用進(jìn)程指示來傳達(dá)范圍、狀態(tài)和位置等信息。
- 如果表單沒有清晰的有序網(wǎng)頁,不要采用進(jìn)程指示,應(yīng)當(dāng)采用更籠統(tǒng)的進(jìn)程指示,而不要設(shè)置錯(cuò)誤期望。
- 設(shè)計(jì)表單布局時(shí),應(yīng)考慮使用Tab鍵的“跳轉(zhuǎn)”體驗(yàn)。
- 采用“tabindex”HTML屬性來控制表單的跳轉(zhuǎn)順序。
Oracle可達(dá)性主管,彼得·沃勒克說:“對(duì)許多殘障用戶而言,表單的設(shè)計(jì)可達(dá)性尤其重要?蛇_(dá)性的核心是可用性。例如,如果網(wǎng)頁不能使用或者無法開始,可達(dá)性首先需要“超級(jí)設(shè)計(jì)”(Uber-design)。包括:超級(jí)減少痛苦、超級(jí)明示完成路徑、超級(jí)考慮情鏡、超級(jí)確保一致溝通。同時(shí)可以遵循W3C制定的互聯(lián)網(wǎng)內(nèi)容可達(dá)性指南(WCAG)和美國采購法508章的最佳可達(dá)性指南。
原文:http://www.alitedesign.com/archives/415
本文鏈接:http://m.95time.cn/design/doc/2010/8139.asp
出處:藍(lán)色理想
責(zé)任編輯:bluehearts
上一頁 Web表單設(shè)計(jì):表單結(jié)構(gòu) [2] 下一頁
|