天天看點

如何設計一個互動好轉化率高的表單

表單在網頁設計、app或者軟體界面當中被廣泛的使用,因而表單設計是個比較重要的工作。一個好的表單,不僅僅是界面設計上的展現,表單的互動和體驗也尤為重要。本文總結了表單設計的八大技巧,希望對大家有所幫助。

根據表單的運用場景,标簽應采用對應的展現形式,常見的展現形式有以下三種:左标簽、頂部标簽、行内标簽。

A. 左标簽

在一些網頁表單當中,标簽局左是最常見的一種形式。左标簽的展示形式給人一種秩序感,也便于使用者在填寫表單的過程中快速的辨識标簽内容。左标簽的這種形式一般用于網頁當中,不适合在手機端或者小屏下的移動端出現,因為小螢幕的尺寸有限,标簽居左會占用較大的空間,輸入框就會受限。

如何設計一個互動好轉化率高的表單

B. 頂部标簽

頂部标簽指的是标簽位于輸入框上方,這種形式一般出現在一些移動端當中。頂部标簽可以使輸入框的寬度變大,使用者在填寫資訊也可以比較得到完整的展示。但這種布局方式也有一個缺不好的點,就是這個表單可能需要滾屏,使用者才可以看完。

如何設計一個互動好轉化率高的表單

C. 行内标簽

行内标簽常常出現在手機端的注冊界面當中,這樣的設計可以節省頁面空間,是以大部分app的界面設計都采用這樣的設計。當然,部分網站pc端的表單設計中也會用到這種設計。

如何設計一個互動好轉化率高的表單

一些英文界面的表單設計,我們要避免标簽的全大寫。全部大寫的标簽容易造成閱讀和浏覽上的困難。

如何設計一個互動好轉化率高的表單

對于特定的标簽,像驗證碼、郵編這樣的标簽,在設計的時候需要采用合适的輸入框長度。畢竟這樣的輸入框是使用者可預見的,是以輸入框的長度可以不需要太長。

如何設計一個互動好轉化率高的表單

在表單中常出現複選框的設計,這樣的情況需要特殊處理。比如在注冊的過程中,會有性别的選擇,是以通常設計該表單的時候我們會将男女橫排在一行。但是對于内容多的情況下,就建議采用豎排的排序方式。

如何設計一個互動好轉化率高的表單

在表單送出的時候,出現多個按鈕的情況下,需要做明确的區分,這樣有利于使用者在操作過程中友善辨識操作步驟。

如何設計一個互動好轉化率高的表單

使用者在填寫表單的過程中,對于輸入的錯誤資訊需要有幫助的提醒文本,對于較為複雜的提示文本需要做一個隐藏圖示。

如何設計一個互動好轉化率高的表單

有些表單内容較多,可以采用*号标注幾個必填項來讓使用者縮短表單的填寫時間。

如何設計一個互動好轉化率高的表單

對于出生年月日、地區等特殊标簽,最好設計成可選項,減少使用者的使用成本。

如何設計一個互動好轉化率高的表單

一個好的表單設計,需考慮到使用者的方方面面。而好的使用者體驗還要盡可能的簡化操作步驟,全部手動輸入的模式費時費力,對使用者來說也不是一種友好的體驗。是以表單的設計,需要滿足界面上美感的同時還需要考慮到使用者體驗。

現在實際分析幾個案例:

大家可以實際操作下,注冊界面比較簡潔,标簽都采用居左标簽的設計方式。是個比較不錯的表單,但是個人覺得公司/組織那一項可以省略,畢竟不是必填項。

如何設計一個互動好轉化率高的表單

這個網站的表單設計也比較簡潔,但是有個嚴重的弊端,就是Account和Password标簽的填寫框内提示資訊太長,以至于後面部分重要内容被隐藏了。這個其實不利于使用者體驗,剛好在三位數和六位數的位置隐藏掉,使用者不能第一時間做出精準的判斷。其實設計師大可以把填寫框的寬度增長一些,或者把填寫的提示内容精簡下,這樣可以事半功倍。

如何設計一個互動好轉化率高的表單

案例三:某設計官網(這個不附連結了)

因為這是一個反例,是以小編把相關資訊模糊了。改網站的注冊按鈕進去之後,居然顯示要加群才可以獲得邀請碼注冊,于是小編加了群,進群要邀請碼卻沒有答複的。整個過程體驗下來不是特别舒服,之後那個網站小編再沒有打開過。

如何設計一個互動好轉化率高的表單

表單雖然在整個網站或者app中占比不高,但是表達足可以體驗互動的一些細節體驗。一個不好的表達設計可能會讓使用者放棄該站點,比如文中提到的案例三。本文提供的幾點設計表單的技巧,希望可以幫助大家提升表單的使用者體驗和轉化率。

如何設計一個互動好轉化率高的表單

繼續閱讀