Designing Efficient Web Forms: On Structure, Inputs, Labels And Actions
Designing Efficient Web Forms: On Structure, Inputs, Labels And Actions
SETTING DEFAULT VALUES
https://www.smashingmagazine.com/2017/06/designing-efficient-web-forms/#setting-default-values
-
90% 用户一定选择的话，才放默认选项
INPUT MASKS
https://www.smashingmagazine.com/2017/06/designing-efficient-web-forms/#input-masks
-
通过下划线，空格和 dash
-
有固定格式比如
-
指定 email
-
信用卡
-
电话号码
-
让用户可以很确定的填写内容
DESKTOP-ONLY: AUTOFOCUS FOR INPUT FIELD
-
默认 focus 是很好的体验，这让用户知道从哪里开始
-
但是手机就不一定要，因为 keyboard 需要站大部分的空间
MOBILE-ONLY: MATCH KEYBOARD TO INPUT
-
不同的 input，需要不同的 keyboard
LIMIT TYPING (AUTOCOMPLETION）
https://www.smashingmagazine.com/2017/06/designing-efficient-web-forms/#limit-typing-autocompletion
-
减少用户操作是做表单的使命
-
Autocomplete 是个不错的方法
NUMBER OF WORDS
https://www.smashingmagazine.com/2017/06/designing-efficient-web-forms/#number-of-words
-
控制表单出现的文字数量
-
用户会花很多时间在阅读上，这不好
SENTENCE CASE VS. TITLE CASE
https://www.smashingmagazine.com/2017/06/designing-efficient-web-forms/#sentence-case-vs-title-case
-
Sentences case 比起 title case 更加容易读
-
避免使用 uppercase
THE RESET BUTTON IS PURE EVIL
-
建议不要用 reset，没给出原因
VISUAL APPEARANCE
https://www.smashingmagazine.com/2017/06/designing-efficient-web-forms/#visual-appearance
-
按钮设计要能被区分，可以通过 elevation
Validation
https://www.smashingmagazine.com/2017/06/designing-efficient-web-forms/#validation
-
记得，用户不喜欢填表格！
-
错误提示不要等到结束了再告诉他，要尽快让用户知道
-
不要展现一推的错误提示
Protecting Data
https://www.smashingmagazine.com/2017/06/designing-efficient-web-forms/#protecting-data
-
把用户 input 的内容视为神圣的（有点夸张！）
-
重视用户输入的内容，让他们在不小心刷新时，还依然保留
Conversational Interfaces: New Ways Of Designing Forms
https://www.smashingmagazine.com/2017/06/designing-efficient-web-forms/#protecting-data
-
这不是第一次看到了，概念是通过对话来填写表格内容
-
因为我们大部分都是使用 mobile 通讯软件，而大家都非常习惯使用这工具。通过 chatbot 去提问和收集，达到填写表格的效果
