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

前言  什么是表單 
  0.1  表單牽動(dòng)你和我 
    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  三個(gè)層次：關(guān)系、對(duì)話和外觀 
    0.3.3  一個(gè)混亂而典型的表單設(shè)計(jì)流程 
    0.3.4  系統(tǒng)化設(shè)計(jì)流程 
第一部分  關(guān)系
第1章  說服人們回答問題 
  1.1  理解用戶才能設(shè)計(jì)出好表單 
    1.1.1  人們對(duì)表單做出何種應(yīng)答 
    1.1.2  讀者、匆忙填寫者和拒絕者 
    1.1.3  選擇恰當(dāng)?shù)奶釂枙r(shí)機(jī) 
    1.1.4  關(guān)系隨問題變化 
  1.2  影響反饋率的三條法則 
    1.2.1  規(guī)則1：建立信任 
    1.2.2  規(guī)則2：降低社交損失 
    1.2.3  規(guī)則3：增加獎(jiǎng)勵(lì) 
    1.2.4  一份小獎(jiǎng)勵(lì)：在必要時(shí)為用戶提供表單 
  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é) 
  小插曲  注冊(cè)表單：如果不可避免應(yīng)當(dāng)如何應(yīng)對(duì) 
第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  如果沒有競爭對(duì)手該怎么做 
    2.3.2  一個(gè)觀察競爭對(duì)手的示例 
  2.4  小結(jié)：獲得正確的信息 
  案例分析  會(huì)議預(yù)定表：問題協(xié)議樣本 
第二部分  對(duì)話
第3章  提出容易回答的問題 
  3.1  要保證交流順暢 
  3.2  問題要容易理解 
    3.2.1  用常見詞匯提問 
    3.2.2  一次只問一個(gè)問題 
    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：使用簡短、肯定、主動(dòng)語態(tài)的句子 
    4.2.3  法則3：推翻文字的圍墻 
    4.2.4  法則4：先選擇，后行動(dòng) 
    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  一個(gè)“前后對(duì)照”的例子 
  4.6  小結(jié)：說明文字 
  小插曲  提供幫助 
第5章  選擇表單控件 
  5.1  選擇恰當(dāng)?shù)目丶?nbsp;
  5.2  符合用戶對(duì)控件工作方式的預(yù)期 
    5.2.1  鍵入比選擇更自然嗎 
    5.2.2  答案很容易輸錯(cuò)嗎 
    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  日歷有助于顯示相對(duì)日期 
    5.5.2  地圖有助于顯示地理信息 
  5.6  小結(jié)：選擇表單控件 
第6章  填表過程一氣呵成 
  6.1  ?表單填寫過程連貫流暢 
  6.2  按話題分解長表單 
    6.2.1  壓縮字段(較少采用) 
    6.2.2  按話題分成多頁表單(更好的方法) 
    6.2.3  每次只提一個(gè)話題 
    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  善待錯(cuò)誤 
    6.5.1  驗(yàn)證有時(shí)可以提供幫助 
    6.5.2  盡早驗(yàn)證 
  6.6  結(jié)束對(duì)話時(shí)說“謝謝” 
  6.7  小結(jié)：填表過程一氣呵成 
  小插曲  和彈出窗口說再見 
第三部分  外觀
第7章  關(guān)注細(xì)節(jié) 
  7.1  外觀的細(xì)節(jié) 
  7.2  標(biāo)簽位置應(yīng)當(dāng)容易看到 
    7.2.1  眼動(dòng)跟蹤表明用戶的視線集中在字段和標(biāo)簽上 
    7.2.2  用戶會(huì)注意到位于字段上方和左側(cè)的標(biāo)簽 
    7.2.3  用戶只會(huì)查看覺得與字段相關(guān)的標(biāo)簽 
    7.2.4  把標(biāo)簽放在字段上方有時(shí)奏效 
    7.2.5  右對(duì)齊插入式答案的字段標(biāo)簽更有效 
    7.2.6  其他答案類型的字段慎用右對(duì)齊標(biāo)簽 
    7.2.7  詢問個(gè)人資料的表單應(yīng)左對(duì)齊標(biāo)簽 
    7.2.8  拿不準(zhǔn)時(shí)最好左對(duì)齊標(biāo)簽 
    7.2.9  特殊考量因素：標(biāo)簽翻譯 
    7.2.10  確保每個(gè)標(biāo)簽都與對(duì)應(yīng)字段密切相關(guān) 
  7.3  標(biāo)簽?zāi)┪惨用疤?hào)嗎 
  7.4  標(biāo)簽應(yīng)該句子首字母大寫還是標(biāo)題首字母大寫 
  7.5  標(biāo)記必填字段 
    7.5.1 標(biāo)記必填字段；若要標(biāo)記不強(qiáng)制要求的字段，則用“(可選)”標(biāo)識(shí) 
    7.5.2  說明選用的標(biāo)記符 
    7.5.3  示例：必填字段的困惑 
  7.6  選擇易讀的文本：字體和詞匯 
    7.6.1  選用具有良好色彩對(duì)比度的大號(hào)字體 
    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  用戶何時(shí)會(huì)注意品牌風(fēng)格 
    8.2.6  切勿改變用戶的瀏覽器 
  8.3  網(wǎng)格：讓表單整潔有序 
    8.3.1  對(duì)齊幾根垂直的粗網(wǎng)格線 
    8.3.2  創(chuàng)建新網(wǎng)格線，而不是遷就現(xiàn)有的網(wǎng)格線 
  8.4  分組：讓表單條理清晰 
    8.4.1  位置是表示分組最簡單明了的方式 
    8.4.2  過多的線條會(huì)破壞分組 
    8.4.3  切勿改變樣式 
    8.4.4  切勿在分組標(biāo)識(shí)圖案中掩藏文字內(nèi)容 
  8.5  避免兩欄表單 
  8.6  小結(jié)：構(gòu)造簡約的表單外觀 
  案例分析  徹底改變外觀 
第四部分  測試
第9章  測試 
  9.1  我們熱愛可用性測試 
    9.1.1  可用性測試方便快捷、立竿見影 
    9.1.2  我們?nèi)绾螌?duì)表單做專家評(píng)審 
  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)