網(wǎng)站設(shè)計的?對話框設(shè)計指南。

網(wǎng)站設(shè)計對話框可用性廣泛的指南

相反，你可能閱讀，peppering與漂亮的按鈕形式，顏色和字體和大量的jQuery插件不會使其可用。事實上，這樣做，你會被處理（在非結(jié)構(gòu)化的方式）什么構(gòu)成形式的可用性三分之一。

在這篇文章中，我們將提供實用的指引，您可以輕松地遵循。這些準(zhǔn)則已制作的可用性測試，現(xiàn)場測試，網(wǎng)站跟蹤，眼動追蹤，網(wǎng)站分析和用戶的不滿，客戶支持人員的實際投訴。

[?編者按：必須有專業(yè)的網(wǎng)頁設(shè)計師和開發(fā)人員：印刷粉碎書籍捆綁，是您日常工作?的實際洞察力獲取包馬上！

網(wǎng)站設(shè)計表單的可用性是很重要的為什么

ISO 9241標(biāo)準(zhǔn)定義為“效益，效率和滿意度與指定用戶在特定環(huán)境中實現(xiàn)特定的目標(biāo)?！笔褂镁W(wǎng)站時，用戶有一個特定的目標(biāo)網(wǎng)站的可用性。如果設(shè)計得好，該網(wǎng)站將滿足這一目標(biāo)組織的網(wǎng)站背后的目標(biāo)對齊。站在用戶的目標(biāo)和組織的目標(biāo)之間是經(jīng)常的表單，因為，盡管在人機互動，形式的進步保持互動的主要形式為用戶在網(wǎng)絡(luò)上。事實上，形式往往被認(rèn)為是完成目標(biāo)的征途上的最后也是最重要的階段。

讓我們的最后一點澄清討論的三種形式主要用途 。作為盧克Wroblewski一書中指出Web窗體設(shè)計：填補空白，每一個形式存在，主要有三個原因之一：商業(yè)，社區(qū)或生產(chǎn)力。下表轉(zhuǎn)換成每個用戶和業(yè)務(wù)目標(biāo)，即在于他們身后的這些原因 ：

使用的形式，盧克Wroblewski基于?Web窗體設(shè)計：填補空白。

因此，形式和可用性之間的關(guān)系有兩個方面：

1. 形式可以使一個網(wǎng)站可用或不可用，因為他們站在用戶實現(xiàn)他們的目標(biāo)的方式;
2. 形式需要使用，以幫助用戶實現(xiàn)這一目標(biāo)。

這個職位將集中在第二點，因為可用的形式，自然會有助于網(wǎng)站的整體可用性，因此第一個方面。

網(wǎng)站設(shè)計表單的六個組成部分

網(wǎng)站設(shè)計對話框是一個設(shè)計師和用戶的必要性和的往往是一個痛點。隨著時間的推移，用戶已經(jīng)形成了如何形成的外觀和行為的期望。他們通常期望網(wǎng)絡(luò)形式有以下六個部分組成：

1. 這些標(biāo)簽告訴用戶相應(yīng)的輸入字段意味著什么。
2. 輸入字段輸入域讓用戶提供反饋。他們包括文本字段，密碼字段，復(fù)選框，單選按鈕，滑塊和更多。
3. 操作這些鏈接或按鈕，用戶按下時，執(zhí)行動作，如提交表單。
4. 幫助這提供了有關(guān)如何填寫表格的援助 。
5. 訊息訊息給基于其輸入的用戶反饋。他們可以是積極的（如指示的形式提交成功）或負(fù)（“您所選擇的用戶名已被使用”）。
6. 驗證這些措施，確保由用戶提交的數(shù)據(jù)符合可接受的參數(shù) 。

Skype的登記表格包含了所有六個組成部分。

通過三個方面的形式解決可用性

盡管在布局，功能和用途的不同，所有的形式主要有三個方面，加Jarrett和格里加夫尼指出，在他們的著作形式，工作：Web窗體設(shè)計可用性：

1. 關(guān)系的形式建立的用戶和組織之間的關(guān)系 。
2. 會話建立的用戶和組織之間的對話 。
3. 外觀的方式看，他們建立的關(guān)系和對話。

對于形式是可用的，所有三個方面需要解決的。讓我們看看在各個方面的依次找出如何使一個窗體真正實用的指引，您可以輕松使用 ，。

看點1：關(guān)系

“沒有人是一座孤島，”17世紀(jì)的英國詩人，諷刺作家，律師和牧師約翰多恩曾說。事實上，人類的關(guān)系蓬勃發(fā)展，他們風(fēng)情，友好，專業(yè)或業(yè)務(wù)。一個形式，是指建立或加強的用戶和組織之間的關(guān)系 。做得不好時，它可以預(yù)先防范或終止這種關(guān)系。

考慮到這一點，一些原則：

• 關(guān)系是在信任基礎(chǔ)上的，所以在表單中建立信任是至關(guān)重要的 。這是可以通過的標(biāo)志，圖像，顏色，排版和文字。用戶會感到放心知道，真誠組織形式。
• 每個關(guān)系有一個目標(biāo)，它的愛情和幸福在一個浪漫的關(guān)系或業(yè)務(wù)關(guān)系的金融增益 。問問自己，您的表單的目標(biāo)是什么 ？
• 相應(yīng)的其目的形式的名稱。該名稱將告知用戶什么形式，他們?yōu)槭裁匆顚懰?。
• 就像在一個關(guān)系，知道其他人是必不可少的。知道您的用戶和總是考慮是否你 問的問題是適當(dāng)?shù)?，如果是這樣，無論他們是及時的。這將灌輸?shù)酱绑w的自然流動 。
• 了解你的用戶也將幫助您選擇適當(dāng)?shù)恼Z言，并刪除多余的文字 。它將幫助你的工藝平衡您的需求和用戶的接口。
• 不要問形式的范圍之外的問題。在關(guān)系中，你會成為不信任的人問問題的地方。同樣的事情發(fā)生了在線。咨詢與利益相關(guān)者看到什么樣的信息真的是需要。
• 在行為或外觀的突然變化將使用戶心急火燎 。同樣，也不要引進之間的形式或在形式的步驟之間的突然變化。

了解你的用戶 。很容易讓注冊用戶登錄新用戶注冊。Debenhams的，使得這種區(qū)別勉強明顯 。

另一方面，亞馬遜，簡化注冊和新客戶的過程 。

看點2：談話

一個形式進行了交談。像交談，它代表了雙方之間的雙向溝通，在這種情況下，用戶和組織。事實上，用戶填寫的表格，以發(fā)起與組織的溝通。

例如，社交網(wǎng)絡(luò)，用戶將填寫一份登記表格，告知他們想加入該組織。（不論是自動或手動），邀請他們的請求，該組織將詢問用戶一些問題，如他們的名字（在標(biāo)簽的形式），姓氏，電子郵件地址等等。接受（或拒絕）后，該公司將結(jié)果告知用戶，從而完成通信過程。

從這個角度看觀看形式產(chǎn)生一些有用的指引：

• 如前所述，一個形式的談話，而不是審訊。將讓用戶感到心急火燎，（如果他們不離開），他們將最有可能給你你想聽到的答案，而不是真理，在標(biāo)簽中的積極措辭。
• 為邏輯上的標(biāo)簽，反映的自然流動的談話。例如，不會怪異，問別人他們的名字后，才問了其他一些問題 ？更復(fù)雜的問題，應(yīng)該對的形式結(jié)束 。
• 集團的相關(guān)信息，如個人的詳細(xì)信息。從一個問題的流動到下一個會更好類似的談話 。

  ?

  雅虎的登記表有效的相關(guān)內(nèi)容通過紫色的標(biāo)題和細(xì)紋的群體。

  ?

  

  雖然經(jīng)常接觸組相關(guān)的內(nèi)容，它分離的群體太多，這可能會混淆用戶。

• 作為一個真正的交談中，每個標(biāo)簽應(yīng)在一段時間解決的一個話題，幫助用戶在相應(yīng)的輸入字段回應(yīng)。
• 自然暫停?在一次談話，表明引進空白，如何組標(biāo)簽和是否打破多個頁面的形式 。
• 在任何談話中，人們得到分神的背景噪音 。因此，消除雜亂，如橫幅和不必要的導(dǎo)航，可能會分散用戶填寫表格 。

  ?

  Dropbox的提供了一個很好的例子，一份登記表應(yīng)該是什么樣子?？崭袷怯行У?，整潔的頁面。

看點三：外觀

網(wǎng)站設(shè)計的外觀或用戶界面（UI）是一個Web表單的可用性，并有這幾個準(zhǔn)則。為了簡化成六個組成部分的討論，讓我們的小組，他們前面介紹的。

1。標(biāo)簽

• 個別單詞與句子，如果一個標(biāo)簽的目的是簡單易懂，如要求的名稱或電話號碼，然后一兩句話應(yīng)該足夠了。但是，一個短語或句子可能是必要的，以消除歧義。

  

  亞馬遜的登記表格包含完整的句子，而個別的詞就足夠了。

• 句子的情況下-標(biāo)題的情況下應(yīng)該是“名稱和?S?urname“或”名稱和?s urname“？句子的情況是稍微容易一些- ，從而更快-比標(biāo)題大小寫遵循語法 。有一件事是肯定的：從來不使用全部大寫，或其他形式會顯得不專業(yè)，難以進行掃描。

  

  快速掃描Barnes＆Noble的登記表中的標(biāo)簽是多么困難？

• 冒號結(jié)束標(biāo)簽的一些桌面應(yīng)用程序，如Windows操作系統(tǒng)的用戶界面的指引建議在形式的標(biāo)簽結(jié)束冒號。一些在線表格設(shè)計者堅持這一點，主要是因為舊的屏幕閱讀器主要依靠結(jié)腸符號來表示一個標(biāo)簽 ?，F(xiàn)代的屏幕閱讀器依賴于標(biāo)記（具體而言，標(biāo)簽標(biāo)簽） 。否則，冒號是一個優(yōu)先的問題，既不增強也不削弱形式的易用性，只要是一貫的風(fēng)格 。
• 標(biāo)簽對齊：頂部與左與右共同的意見相反，上面的輸入域，并不總是最有用的標(biāo)簽位置。它的理想，如果你希望用戶盡可能快地填寫表格 。但有時，當(dāng)你要故意慢下來，讓他們通知，聚精會神地閱讀的標(biāo)簽 。此外，單個列保持一個長期的形式，使用戶向下滾動頁面是比它在試圖把一切都分解成列的每個對齊方式都有其優(yōu)點和缺點“倍以上 ?！?/span>

  

  *時報“取自“窗體中放置標(biāo)簽“利瑪竇Penzo 。

  

  形式不應(yīng)該包含多個列。請注意，是多么容易忽略這里列化妝野人（更不用提有關(guān)“必填項”在底部的注意）。

2。輸入字段

• 輸入字段的類型提供適當(dāng)?shù)妮斎胱侄晤愋偷幕A(chǔ)上被要求的是什么。每個輸入字段的類型，有其自身的特點，用戶習(xí)慣于。例如，使用單選按鈕如果只有幾個選項是允許的，并檢查盒，如果允許多種選擇。
• 自定義輸入字段不發(fā)明新類型的輸入字段。Flash網(wǎng)站的初期，這是共同的，它似乎卷土重來，我看到了一些奇怪的輸入與jQuery實施領(lǐng)域。簡單的往往是最有用的。輸入字段接近他們改變盡可能的HTML渲染 。

  

  改變接口輸入字段會混淆用戶。

• 限制輸入字段的格式，如果您需要限制用戶輸入的數(shù)據(jù)格式，那么至少這樣做的方式，不會刺激用戶。例如，顯示MM / DD / YYYY的一個日期的文本字段旁邊，而不是考慮使用下拉領(lǐng)域，或者更好的是，一個日歷控件 。
• 明確區(qū)分強制性與可選字段不能由用戶輸入字段留空。該公約是使用一個星號（*）。任何符號都會做，只要一個傳說是可見的，以表明這是什么意思（即使它是一個星號） 。

3。動作

• 小學(xué)與中學(xué)的行動主要操作鏈接和按鈕，在表單中進行必要的“最后”的功能，如“保存”和“提交”。輔助的動作，如“后退”和“取消”，使用戶能夠收回數(shù)據(jù)，?他們進入。如果點擊錯誤，二次行動，通常有不良的后果，所以使用的主要行動，只有在可能的情況下 。如果你必須包括二次行動，讓他們少的視覺重量比的主要行動。

  

  沒有明確小學(xué)和中學(xué)的行動之間的區(qū)別，很容易導(dǎo)致失敗。上述動作按鈕被發(fā)現(xiàn)在一個漫長的形式結(jié)束在招生圣?圣路易斯社區(qū)學(xué)院。試想一下，意外按下“重置表單”按鈕。

• 命名約定避免通用詞，如“提交”的行動，因為他們給人的印象，是通用的形式本身 。說明性字詞和短語，如“加入LinkedIn，”是首選。

  

  雖然可口可樂正確的主要操作按鈕提供了更多的重視，它解決通用詞“提交”注冊與我們“本來更有幫助。

4。幫助

• 陪文本形式你應(yīng)該從來沒有向用戶解釋如何填寫表格。如果它不看起來像一個形式或它太復(fù)雜填寫，然后重新設(shè)計它是你唯一的選擇。附帶的文字應(yīng)當(dāng)使用只在需要的地方，如解釋為什么信用卡數(shù)據(jù)被請求或出生日期將如何使用或鏈接到“條款和條件?！边@樣的文本往往被忽略，所以它簡潔易于閱讀。作為一個經(jīng)驗法則，不超過100字的解釋（合并）。
• 用戶觸發(fā)的動態(tài)幫助，而不是包括幫助文本旁邊的每個輸入字段，只在有需要時。你可以顯示一個輸入字段，用戶可以按一下當(dāng)他們需要幫助該領(lǐng)域的時，旁邊的圖標(biāo)。更妙的是，動態(tài)顯示幫助當(dāng)用戶點擊進入一個輸入字段輸入數(shù)據(jù)。這種實施工作正變得越來越普遍，是比較容易實現(xiàn)，如jQuery JavaScript庫 。

  

  Skype的注冊表單包含兩個用戶觸發(fā)的幫助（藍(lán)色框是通過點擊問號觸發(fā)）和動態(tài)幫助（建議的用戶名 ）。

5。消息

• 錯誤消息，通知用戶發(fā)生了一個錯誤，它通?？梢苑乐顾麄冞M一步出發(fā)的形式 。強調(diào)通過顏色（通常是紅色），熟悉的意象（如警告標(biāo)志），突出（通常在窗體的頂部或旁邊發(fā)生錯誤的位置），大字體，或結(jié)合這些錯誤消息 。
• 成功的消息通知用戶，他們已經(jīng)達(dá)到了一個有意義的形式里程碑 。如果形式是漫長的，一個成功的消息鼓勵用戶繼續(xù)填寫。這樣的錯誤消息，成功消息應(yīng)突出。但他們不應(yīng)該繼續(xù)阻礙用戶。

6。驗證

• 只有在需要的地方過多的驗證是完全沒有壞，因為它會妨礙用戶。限制驗證，以確認(rèn)關(guān)鍵點（如用戶名），確保逼真的答案（如不允許超過130歲），并暗示可能的數(shù)據(jù)范圍是有限的，但太長的反應(yīng) ，包括在一個下拉菜單（如國家代碼前綴）。
• 智能默認(rèn)使用智能默認(rèn)使用戶的形式完成的更快，更準(zhǔn)確 。例如，預(yù)先選擇用戶的國家，根據(jù)其IP地址 。但謹(jǐn)慎使用，因為用戶往往離開，因為它們是預(yù)先選定的領(lǐng)域。

  

  Twitter的登記表格，同時使用動態(tài)驗證的姓名，電子郵件地址，密碼和用戶名和智能默認(rèn)（“記住我的登錄” ）。

結(jié)論?開端

“結(jié)論”這個詞是不是就在這里。這是你的出發(fā)點，采取我寫的，它應(yīng)用到你自己的形式。好消息是，有更說這一切，在這里作出的每一個點上你可以找到豐富的資源。對于初學(xué)者來說，下面列出了三本書，啟發(fā)了我寫這篇文章時。正如我剛才在開始時，只調(diào)整快捷方式的用戶界面不會讓你的形式更實用。我還有什么可說呢？現(xiàn)在你的理論。轉(zhuǎn)到你的手臟。

??? 免費網(wǎng)絡(luò)營銷顧問：我們?yōu)槟峁┟赓M的網(wǎng)絡(luò)營銷顧問服務(wù)，您需要了解關(guān)于如何開展網(wǎng)絡(luò)營銷，電子商務(wù)，網(wǎng)站設(shè)計等的事宜，歡迎隨時聯(lián)系我們。

??? seo友好的網(wǎng)站管理系統(tǒng)：除了優(yōu)質(zhì)的網(wǎng)站空間，網(wǎng)站管理系統(tǒng)，和網(wǎng)站設(shè)計外，我們的網(wǎng)站管理系統(tǒng)更是seo友好的，包括：自定義欄目名，Google Sitemap自動生成，靜態(tài)頁面生成等等，讓您的網(wǎng)站。