Web表單設(shè)計(jì)：創(chuàng)建高可用性的網(wǎng)頁表單

前言  什么是表單 
  0.1  表單牽動你和我 
    0.1.1  糟糕的表單后果很嚴(yán)重 
    0.1.2  優(yōu)良的表單眾人皆歡喜 
  0.2  煮酒論表單 
    0.2.1  只談設(shè)計(jì)不談技術(shù) 
    0.2.2  只談網(wǎng)頁不談紙質(zhì)表單 
    0.2.3  可用性：讓表單更好用 
    0.2.4  制表流程：試試你就知道 
  0.3  一些定義，兩種流程 
    0.3.1  表單，一看便知 
    0.3.2  三個層次：關(guān)系、對話和外觀 
    0.3.3  一個混亂而典型的表單設(shè)計(jì)流程 
    0.3.4  系統(tǒng)化設(shè)計(jì)流程 
第一部分  關(guān)系
第1章  說服人們回答問題 
  1.1  理解用戶才能設(shè)計(jì)出好表單 
    1.1.1  人們對表單做出何種應(yīng)答 
    1.1.2  讀者、匆忙填寫者和拒絕者 
    1.1.3  選擇恰當(dāng)?shù)奶釂枙r機(jī) 
    1.1.4  關(guān)系隨問題變化 
  1.2  影響反饋率的三條法則 
    1.2.1  規(guī)則1：建立信任 
    1.2.2  規(guī)則2：降低社交損失 
    1.2.3  規(guī)則3：增加獎勵 
    1.2.4  一份小獎勵：在必要時為用戶提供表單 
  1.3  表單應(yīng)該有多長 
  1.4  誰來回答問題 
    1.4.1  考慮身體差異 
    1.4.2  通過提問了解用戶 
    1.4.3  了解用戶如何理解表單 
    1.4.4  你是否足夠了解自己的用戶 
    1.4.5  通過創(chuàng)建人物角色，反映用戶的現(xiàn)實(shí)情況 
  1.5  小結(jié) 
  小插曲  注冊表單：如果不可避免應(yīng)當(dāng)如何應(yīng)對 
第2章  獲得正確的信息 
  2.1  為什么要收集信息 
    2.1.1  詢問利益相關(guān)者 
    2.1.2  詢問使用信息的人 
    2.1.3  運(yùn)用問題協(xié)議研究信息使用方式 
  2.2  表單發(fā)布機(jī)構(gòu)是否已經(jīng)持有信息 
    2.2.1  使用表單發(fā)布機(jī)構(gòu)已經(jīng)持有的信息 
    2.2.2  避免重復(fù) 
  2.3  了解別人的問題 
    2.3.1  如果沒有競爭對手該怎么做 
    2.3.2  一個觀察競爭對手的示例 
  2.4  小結(jié)：獲得正確的信息 
  案例分析  會議預(yù)定表：問題協(xié)議樣本 
第二部分  對話
第3章  提出容易回答的問題 
  3.1  要保證交流順暢 
  3.2  問題要容易理解 
    3.2.1  用常見詞匯提問 
    3.2.2  一次只問一個問題 
    3.2.3  將否定的問題轉(zhuǎn)換為肯定的問題 
    3.2.4  謹(jǐn)慎的分組方式有助于明確含義 
    3.2.5  不要加入決策點(diǎn) 
    3.2.6  要知道文化差異 
  3.3  讓人容易找到答案 
    3.3.1  插入式答案 
    3.3.2  搜集式答案 
    3.3.3  第三方答案 
    3.3.4  創(chuàng)造式答案 
    3.3.5  回答策略不匹配將產(chǎn)生問題 
    3.3.6  了解用戶將在何處獲取答案 
    3.3.7  清楚誰擁有你需要的數(shù)據(jù) 
    3.3.8  幫助用戶找到答案 
    3.3.9  標(biāo)簽內(nèi)容要符合用戶獲取答案的方式 
  3.4  讓答案容易判斷 
  3.5  讓表單答案容易填寫 
  3.6  小結(jié)：提出容易回答的問題 
第4章  說明文字 
  4.1  撰寫實(shí)用的說明文字 
  4.2  5條簡明語言法則 
    4.2.1  法則1：以常見的方式使用常見詞匯 
    4.2.2  法則2：使用簡短、肯定、主動語態(tài)的句子 
    4.2.3  法則3：推翻文字的圍墻 
    4.2.4  法則4：先選擇，后行動 
    4.2.5  法則5：使用有幫助的標(biāo)題 
  4.3  刪繁就簡 
  4.4  放置適當(dāng) 
    4.4.1  貼切的標(biāo)題 
    4.4.2  提前告知需要搜集哪些信息 
    4.4.3  將用戶引導(dǎo)至不同的表單 
    4.4.4  用問題替代說明文字 
  4.5  一個“前后對照”的例子 
  4.6  小結(jié)：說明文字 
  小插曲  提供幫助 
第5章  選擇表單控件 
  5.1  選擇恰當(dāng)?shù)目丶?nbsp;
  5.2  符合用戶對控件工作方式的預(yù)期 
    5.2.1  鍵入比選擇更自然嗎 
    5.2.2  答案很容易輸錯嗎 
    5.2.3  有多少選項(xiàng) 
    5.2.4  是否允許用戶做多重選擇 
    5.2.5  選項(xiàng)是否在視覺上突出 
    5.2.6  用戶理解問題是否需要參看選項(xiàng) 
  5.3  清晰地描述選項(xiàng) 
  5.4  合理的順序 
  5.5  慎用專門控件 
    5.5.1  日歷有助于顯示相對日期 
    5.5.2  地圖有助于顯示地理信息 
  5.6  小結(jié)：選擇表單控件 
第6章  填表過程一氣呵成 
  6.1  ?表單填寫過程連貫流暢 
  6.2  按話題分解長表單 
    6.2.1  壓縮字段(較少采用) 
    6.2.2  按話題分成多頁表單(更好的方法) 
    6.2.3  每次只提一個話題 
    6.2.4  先提符合預(yù)期的問題，后提意料之外的問題 
    6.2.5  少提突兀的問題 
    6.2.6  解釋多次出現(xiàn)的問題之間有何差異 
  6.3  使用進(jìn)度指示器 
  6.4  勿因突變而讓用戶感到意外 
    6.4.1  避免不通知就改變頁面 
    6.4.2  按照用戶的要求改變頁面 
    6.4.3  基于早期輸入的信息創(chuàng)建自定義表單 
    6.4.4  不要將標(biāo)簽用作表單的導(dǎo)航方式 
  6.5  善待錯誤 
    6.5.1  驗(yàn)證有時可以提供幫助 
    6.5.2  盡早驗(yàn)證 
  6.6  結(jié)束對話時說“謝謝” 
  6.7  小結(jié)：填表過程一氣呵成 
  小插曲  和彈出窗口說再見 
第三部分  外觀
第7章  關(guān)注細(xì)節(jié) 
  7.1  外觀的細(xì)節(jié) 
  7.2  標(biāo)簽位置應(yīng)當(dāng)容易看到 
    7.2.1  眼動跟蹤表明用戶的視線集中在字段和標(biāo)簽上 
    7.2.2  用戶會注意到位于字段上方和左側(cè)的標(biāo)簽 
    7.2.3  用戶只會查看覺得與字段相關(guān)的標(biāo)簽 
    7.2.4  把標(biāo)簽放在字段上方有時奏效 
    7.2.5  右對齊插入式答案的字段標(biāo)簽更有效 
    7.2.6  其他答案類型的字段慎用右對齊標(biāo)簽 
    7.2.7  詢問個人資料的表單應(yīng)左對齊標(biāo)簽 
    7.2.8  拿不準(zhǔn)時最好左對齊標(biāo)簽 
    7.2.9  特殊考量因素：標(biāo)簽翻譯 
    7.2.10  確保每個標(biāo)簽都與對應(yīng)字段密切相關(guān) 
  7.3  標(biāo)簽?zāi)┪惨用疤枂?nbsp;
  7.4  標(biāo)簽應(yīng)該句子首字母大寫還是標(biāo)題首字母大寫 
  7.5  標(biāo)記必填字段 
    7.5.1 標(biāo)記必填字段；若要標(biāo)記不強(qiáng)制要求的字段，則用“(可選)”標(biāo)識 
    7.5.2  說明選用的標(biāo)記符 
    7.5.3  示例：必填字段的困惑 
  7.6  選擇易讀的文本：字體和詞匯 
    7.6.1  選用具有良好色彩對比度的大號字體 
    7.6.2  版式不宜多變 
    7.6.3  應(yīng)用空白讓段落更容易閱讀 
  7.7  小結(jié)：關(guān)注細(xì)節(jié) 
  小插曲  用襯線字體還是無襯線字體 
第8章  構(gòu)造簡約的表單外觀 
  8.1  令表單外形美觀的關(guān)鍵因素 
  8.2  用戶知道你是誰嗎？logo和品牌風(fēng)格 
    8.2.1  品牌信息過少妨礙建立信任 
    8.2.2  品牌風(fēng)格元素應(yīng)保持適量 
    8.2.3  謹(jǐn)慎配色 
    8.2.4  在標(biāo)簽、字段和按鈕上應(yīng)用少量品牌風(fēng)格 
    8.2.5  用戶何時會注意品牌風(fēng)格 
    8.2.6  切勿改變用戶的瀏覽器 
  8.3  網(wǎng)格：讓表單整潔有序 
    8.3.1  對齊幾根垂直的粗網(wǎng)格線 
    8.3.2  創(chuàng)建新網(wǎng)格線，而不是遷就現(xiàn)有的網(wǎng)格線 
  8.4  分組：讓表單條理清晰 
    8.4.1  位置是表示分組最簡單明了的方式 
    8.4.2  過多的線條會破壞分組 
    8.4.3  切勿改變樣式 
    8.4.4  切勿在分組標(biāo)識圖案中掩藏文字內(nèi)容 
  8.5  避免兩欄表單 
  8.6  小結(jié)：構(gòu)造簡約的表單外觀 
  案例分析  徹底改變外觀 
第四部分  測試
第9章  測試 
  9.1  我們熱愛可用性測試 
    9.1.1  可用性測試方便快捷、立竿見影 
    9.1.2  我們?nèi)绾螌Ρ韱巫鰧＜以u審 
  9.2  如何進(jìn)行可用性測試 
    9.2.1  測試更多用戶(通常5  位就夠了) 
    9.2.2  設(shè)法找到“真實(shí)的”用戶 
    9.2.3  測試參與者與目標(biāo)用戶有何差異 
    9.2.4  思考用戶將在哪里找到答案 
    9.2.5  了解測試參與者的想法 
  9.3  最后的話 
延伸閱讀 
參考文獻(xiàn)