複雜應用程式的表格設計

原文 Form Design for Complex Applications，本文章已經過作者同意翻譯並轉載，歡迎分享文章連結。

作者為 Andrew Coyle 目前在 @Flexport 擔任 Designer Leader，有興趣的朋友可以前往他的 Twitter了解更多。

從複雜的ERP系統到Facebook，應用程式讓輸入資料的意義變得不同。表格有許多的表現形式並且提供了一個路徑讓用戶提交資料。本文介紹了13種不同呈現表單的方式，並且探索資料輸入的未來。

1.插入式視窗/表格(Modal)

簡單的插入式視窗/表格對於較不複雜且有限的輸入欄位來說可以運作的很好。這樣的方式通常也容易執行並且也是個簡單易懂的使用體驗。但是，一些需要額外插入或彈跳視窗的複雜交互流程可能會導致用戶發生錯誤。此外，插入式視窗也阻止了用戶與應用程式的其他部分進行互動，除非你把這個視窗關閉。所以可以想一下，在較長的表單也許可以採用獨立的頁面，並且對上下文內容進行個別編輯。

2.多重插入式視窗/表格(Multi-modal)

多重插入式表格(也許有更好的名字)會以可拖動的視窗呈現，讓用戶可以一次和多個表單進行互動。使用者可以在頁面上拖動這些視窗看到視窗下面的資訊。多重模態讓有經驗的使用者可以同時處理大量訊息，而不是需要拉出不同畫面、重複切換頁面等等。但這方式對於新手用戶來說可能是有問題的，因為他們可能會因此迷失方向並且送出錯誤的資料。

3.滑出(Slideout)

滑出形式會從主畫面的一部分中用滑出的方式出現，或者把內容推開以容納表單。就像插入式表單一樣，這個展示方式是有上下文關係的，並且讓用戶從主畫面去參考資訊。滑出視窗通常允許有更長的形式，因為它佔據了整個螢幕的高度。

4.彈出視窗(Popover)

彈出式表單對於快速進入表單和編輯是個滿棒的方式。彈出視窗呈現相關資料在上下文中，因此使用者不會在應用程式中迷失。

5.行內表格(Inline)

行內表單讓用戶可以很輕易找到輸入並且直接在資料出現的地方進行編輯而不需要透過其他的畫面。行內表單可以有編輯和檢視模式，或是輸入欄位可以被編輯和自動保存，就像使用者在操作獨立的欄位一樣。

6.可編輯的表格(Editable Table)

與行內表格類似，可編輯表格讓使用者直接操作該資料的欄位。它非常適合表格資料的輸入，例如電子表單或發票列表。

7.接續(Takeover)

Takeover模式讓用戶能夠與複雜的表單進行交互，同時能夠快速返回上一個步驟。Takeover非常適合用於不需要後續畫面的系統資料。

8.引導(Wizard)

Wizard讓用戶逐步填寫資料。Wizard對於複雜的表單來說是很棒的，當使用者需要經歷一段不熟悉的過程時就應該使用Wizard。但Wizard對於高度使用、需要反覆修改的表單來說是一個典型糟糕的使用者體驗，有點像強迫使用者要一直往前進。

譯者按：Takover和Wizard的差別在於，Takeover可以重複往返前後步驟填完資料之後一次提交，而Wizard則是填寫完一個步驟後就提交一次，直到填完三個步驟。

9.區塊表單(Sectioned Form)

分段表格非常適合用來輸入複雜的信息。好處是使用者擁有表單的完整上下文，而不是像Wizard一樣的多頁式表單，而且使用者可以自由地在整個表單中填寫資料，而不是線性地填寫資料，提供更大的靈活性。

10.拖放(Drag & Drop)

雖然不是典型的表格樣式，但是拖放編輯器讓使用者從預設的輸入框中選擇並將其拖動到所見即所得的顯示介面中。藉由模仿真實的物理世界，這樣的交互方式讓過程增加了一點樂趣。

11.所見即所得(WYSIWYG)

所見即所得(What you see is what you get)編輯器被用於文字編輯器像是Microsoft Word、電子郵件製造器像是MailChimp、網站出版商像是SquareSpace等等。WYSIWYG編輯器讓用戶不需要擁有HTML/CSS/JS的知識就能創造豐富的內容。

12.填空(Fill in the blanks)

有時候可用性的最佳實踐可以忽略美感和有趣的互動而不會造成較差的用戶體驗，但對於此我寫了一片文章，叫做美感對可用性的影響。填空型表格在一個句字或段落中呈現，讓使用在輸入資料的同時完成完整的句子。

13.可對話的未來使用者介面

對話的用戶界面（CUI）通常包括了“ 機器人 ”接收任意的語音或文字。機器人接著回答或提供進一步的表單來解決請求。機器學習已被用於更好地解釋輸入資料和作出適合的回應。

有很多關於對話用戶界面的炒作。許多設計師認為CUI是未來的Web表單。微信的成功也驗證了可個模式的可信度。然而， Yunnuo Cheng 和 Jakob Nielsen指出，微信整體服務的優勢更多來自於讓人親近和易於操作的圖形界面(GUI)，而不是它的會話界面(CUI)。

CUI遇到許多可用性問題，其中包括：缺乏探索性和可以隨意完成的路徑。對話介面的同質化不是表格設計的未來，但它已經被發現是未來許多聊天App的一個收集資料輸入的方式。

我期待著未來的設計可以融合CUI與豐富的圖形界面。小型的嵌入式應用可以基於用戶輸入來呈現，並且可以引導出更大的應用程式，也許可以不只是在聊天視窗裡面。或者是當使用者在應用程式中迷失時可以使用CUI。了解更多詳情，Tomaž Štolfa有寫了一篇關於未來的CUI。

隨著數據輸入變得標準化、OCR功能增加、軟體設計流程自動化，許多表單將變得老舊過時。但是使用者永遠需要一個好的介面。我希望這些不同的表單演示可以幫助你構建更好的應用程式。

本文是專注於建構可用性和美學的使用者界面模式資料庫計劃中的一部分。如果你覺得這個主題聽起來很有趣的話，歡迎訂閱並收到更新資訊。

本文由Lin Simon翻譯，如有翻譯上的錯誤或不順暢的地方還請各位多多指教，有任何建議也歡迎隨時告訴我:D