設計師經常搞混的控件運用規則

0 評論 1859 瀏覽 4 收藏 5 分鐘

同一控件在不同場景下體驗就會發生變化,交互設計要學會根據不同場景使用不同控件,今天要聊的是form控件的場景運用,這也是國內設計師經常搞混了的,交互就是要將細節扣到底,才能發揮真正的價值。

form控件在移動端常見的場景有:輸入文本信息、輸入驗證碼、輸入密碼等等,今天要聊的是輸入驗證碼和輸入密碼這兩個場景form控件運用。

常見form控件是橫桿的樣式,在輸入普通文本和輸入驗證碼的場景下,該控件樣式毫無問題,但是在輸入密碼的場景下,就有體驗問題產生了,用戶無法快速知道輸入了多少位數密碼,而密碼通常使用*代替加大了確定位數的難道,對用戶產生了不確定感。

設計師經常搞混的控件運用規則

每次輸入密碼時,我都得數著自己的輸入位數,害怕一不小心就輸入多了,因為我的密碼是6個0。

為了解決該問題,設計們設計出了限定位數的form控件,這樣用戶就可以不用去數自己輸入的密碼位數,可以愉快地輸入密碼。

設計師經常搞混的控件運用規則

不用擔心多輸入了位數或少輸入了位數。

但是限定位數的form控件運用在輸入驗證碼的場景下,就會產生新的體驗問題,密碼*號,導致位數不可知,但是驗證碼是可見的、易數的,不存在輸入密碼的體驗問題。而在此場景下,用戶的訴求是快速輸入驗證碼,所以通常會使用復制粘貼,而該form控件不支持復制張貼,該控件對于用戶來說是一個黑盒。

設計師經常搞混的控件運用規則

用戶以為該控件是支持復制張貼的,最后只復制了一位數,導致又得回去看短信驗證碼,重新輸入。

在前幾年,很多app默認讀取手機短信自動填充驗證碼,幫助用戶節省粘貼復制的操作流程,由于國內用戶安全意識逐年增高,心理抵觸app讀取短的行為,帶來了很大的不安全感。雖然縮短了操作流程,但是不符合用戶心理認知,所以近年來,設計者們都取消了默認填充的系統行為。

而在輸入驗證碼的場景下,使用常見的form控件就不會出現該問題。

設計師經常搞混的控件運用規則

airbnb的輸入驗證碼,搜狗輸入法將復制驗證碼流程縮短了兩步,極大的提升了輸入驗證碼的體驗。

控件的運用,需要根據不同場景下用戶為完成任務的訴求而確定。

在輸入密碼的場景下,用戶訴求是準確快速輸入密碼,密碼位數通常是固定的,所以有了限定位數的form輸入框幫助用戶輸入。

在驗證碼的場景下,用戶訴求是快速輸入驗證碼,除了自動填充的方案,最快的就是復制粘貼了,所以常見的from表單適合該場景。

 

本文由 @火炬 原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自 Unsplash,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!