产品经理不再纸上谈兵——APP表单设计技巧

时间:2024-04-11 07:06:45

分组和默认项表单设计

课程目标

掌握APP表单设计的技巧。

前言

表单是用户用来获取服务的重要输入工具,也是收集UGC的重要入口,更是用户与服务商交互的重要途径,主要交互过程:用户输入、编辑数据,提交给系统,系统给予相关的反馈和提示,设计过程中有很多技巧需要注意。

APP表单设计技巧

产品经理不再纸上谈兵——APP表单设计技巧

1.表单分组
表单的输入项要根据业务规则划分好组,把同一类或相关的内容放在一组,减少用户认知和思考;比如LinkedIn,把个人基本信息、工作经历、教育背景、技能专长都各自进行了分组,QQ的个人设置也根据内容相关性进行了分组。

2.设置默认选项
为某些输入项提供比较贴心的默认值(默认值需要能满足大部分用户的需求)。比如团购产品选择地点的时候,默认值为当前的城市,携程订酒店的时间默认值就是从今天到明天。

3.给用户的格式要求
输入项有格式要求的,用户输入前提示用户,不能等用户输入完提交时才让用户知道有格式要求。尽量在用户输入前提示用户格式要求、选填或必填。

4.错误提示
错误需要及时提示,不能等提交表单时再一一提示,否则很容易挑战用户的耐心。例如免拨创建名片的表单,手机号码位数不对时,焦点离开号码输入框的时候立刻将号码变红,提示用户号码输入有问题。

5.输入焦点和键盘
进入表单填写页面时,可以把输入焦点自动放入第一个输入项,同时弹出输入键盘,让用户少点击一步。随着表单项往下一个个填的时候,已填写的表单项要自动往上移,确保焦点所在的输入项的输入框一定不会被输入键盘挡住。

注意几点细节:
1)手机号码3 4 4分开,方便用户阅读;
2)输入邮箱时,提供后缀选择,减少用户输入,如@sina.com, @qq.com …;
3)输入地点,提供当前位置和热点城市供用户选择;
4)焦点在输入框内且框内有内容的时候,输入框右侧提供删除按钮,可一键删除框内所有内容;

6.匹配和识别
输入键盘自动根据输入类型匹配,比如输入电话号码,那么焦点移入该输入框时自动把键盘切换为数字键盘,以减少用户手动操作次数;
在填写表单的非最后一项时,点击输入键盘右下角的return、换行时,可以自行切换到下一个输入项。
比如IOS原生通讯录添加新联系人时,点击键盘右下角的return和换行都会自动切换到下一输入项。

7.尽量减少页面的跳转
能在一个页面完成的尽量不要再跳转新页面;如果编辑的时候跳转新页面编辑,那一定要在编辑前的页面可以看到设置值。下图的两种性别设置方法,个人更喜好第一种,因为第一种减少了页面的跳转,降低了用户的认知。

8.二次确认
表单填到一半,点击返回或退出最好能有二次对话框确认。键盘输入始终是移动端的痛点之一,好不容易才完成几项内容的填写,不小心点了后退或退出就白忙活了,加上使用环境的影响(比如在公交车上、地铁上),误操作概率更大,所以如果表单填到一半退出,一定要二次对话框确认,如果什么都没填退出,则不需要二次确认了。

小结
APP表单设计技巧:

1.表单分组

2.设置默认选项

3.给用户的格式要求

4.错误提示

5.输入焦点和键盘

6.匹配和识别

7.尽量减少页面的跳转

8.二次确认

思考

1.分析一款成功APP的表单设计?

2.根据本节课所讲技巧,优化自有APP的表单设计?