|B端产品中,Web端表单如何设计( 三 )
本文插图
知识扩展:什么是7加减二法则?
早在19世纪中叶 , 爱尔兰哲学家汉米尔顿观察到 , 有一个神奇的7±2效应;意思就是人们的短时记忆的信息量是7个 , 可能会上下浮动2个 。
针对多行文本框的设计建议:
使用可拉伸的文本框比固定框更好 , 从使用体验讲 , 可变化的文本框使页面整体效果更统一 。
固定文的文本框当输入文本超过其设置的宽度 , 会出现内滚动条 , 当页面上出现两个滚动条时(大页面的滚动条) , 在使用操作上会带来一定的混乱 。
本文插图
2)选择框
包括下拉列表、选框、开关、日期选择器等 。
对于选择框有如下几个建议:
a. 避免设置默认值:除非您认为大部分用户将选择该值 , 尤其是必填字段 。
为什么?
因为你可能会增加错误 , 用户会快速扫描表单 , 所以他们可能会跳过一些已经有默认值的字段 。
但是这个规则不适用于智能的默认值 , 也就是根据用户的信息设置的默认值;因为智能的默认值可以使表单更快 , 更准确地完成 。
例如:根据定位数据预先选择用户所在的国家/地区 。
不过 , 请谨慎使用 。
b. 当选项很多时 , 提供检索功能 。
c. 提示信息要明确 , 要让用户明确自己选择的是什么 。
本文插图
3)单选框与复选框
a. 按一定的逻辑进行选项排序 , 例如根据发生的可能性、难易程度、风险大小来排序 。
b. 选项应该易于理解 , 容易区分 。
c. 尽可能提供默认选项 。
4)关于控件的选择
a. 选择框优于输入框 。
任何高密度的操作 , 都会引起用户的不适;因此 , 在输入项的选择时 , 用选择来代替键盘输入 。
- 一方面:简化用户的操作 , 点击次数远小于输入 , 减少用户的操作密度;
- 另一方面:减轻用户的认知、记忆负担 。
用户可以通过选择项 , 清晰明确的知道有哪些值可以选择 , 对于一些无关紧要 , 或者用户较难理解的输入项 , 可以预制默认值 , 可以照顾到各阶段的用户 。
b. 单选框与下拉选择框 。
单选框较为适合选项较少(少于五个) , 同时选择项之间较为类似 , 需要强调或对比时 , 可以优先考虑单选框 。
另外 , 当选项能见度和快速响应优先时 , 也建议优先考虑单选框 。
因为相较于下拉选择 , 用户可以通过展示出来的选项 , 直接选中目标选项 , 提升输入效率 。
下拉选择框较为适合选项较多(超过五个) , 有默认选项或者选择项之间有较大差异 , 同时下拉选择 , 最好不要引起随后输入项数量以及页面的变化;否则下拉选择的收起以及页面的变化 , 易引起用户不适 。
若选项过多 , 超过二十个 , 最好引入模糊匹配以及一定排序规则(首字母排序、数字排序等) , 方面用户提前预知选项的大致位置 , 或通过模糊检索找到相应的选项 。
5)关于必填项
大多数情况下 , 所有字段都是必填项 , 只有几个字段是可选的 , 一般用“*”标记必填字段 。
但星号并不适合所有类型的用户 , 记得之前客户问星号是什么意思?
它是页面中的标签还是描述中的标签;同时 , 并且红色会从用户方面引起负面关联 , 因为红色表示错误 。
为了避免这种误解 , 可采用文本框内暗提示 。
推荐阅读
- 广告位|商业化产品经理 | 在线广告(7): 设计一个广告位要考虑什么
- 工业互联网|“走进美的工业互联网”无锡站:最强矩阵联合亮相世界级软硬结合产品
- 财经杂志|螃蟹不要乱吃,医疗产品明令直播禁区,快手此时入行是“入坑”吗?
- 互通lightroom教程|如何拍摄高级感服装产品图
- |复盘总结:2020年8月京东产品方向管培的群面回顾
- 开课|上新三款产品,开课吧为数字化人才打造“差异化竞争优势”
- 中年|Archax携手Algorand以共同开发新型DeFi产品
- 产品|动辄$20W+高薪!产品经理凭啥叱咤互联网科技界?
- 百度|一步一脚印,百度地图15周年盛典回顾产品进阶史
- 5G,虚拟现实|中国联通重磅推出多款潮流产品,受到青年人追捧
