上图是新版花瓣和国外printerest登录界面对比 , 由于主色调都是红色 , 而错误提示也是红色 。当用户光标聚焦输入框正在输入时 , 花瓣已提示错误 , 整体视觉提示是过重 , 设计相比之下稍逊色与printerest 。
典型反面案例:下图是追波注册流程 , 由于3个问题没做好 , 在表单过长的情况下 , 用户极大可能性流失 。
输入前用户名没有引导说明输入后未激活用户名和邮件没有实时反馈(前端格式未校验)完全输入后由后端校验 , 错误太多 , 用户易产生畏难心理(为了方便看 , 输入后已激活图三翻译成中文)
问题五:用「线索模式」还是「说明模式」好?
1. 线索模式
是指用示例输入或说明文本以占位符的形式显示在输入框中 , 以帮助用户理解需要输入的内容 , 或给出相关线索的一种设计方式 。信息表达轻盈、简单、与业务逻辑关系弱 。
时间控件中有“请选择日期” , 输入框中会有“请选择日期和日历icon”等线索文字 , 这就是线索设计模式 。
假如下图Facebook输入框什么文字也没有 , 用户预期可能是输入或其他 , 因为设计者没有给用户框定搜索边界 , 因此线索设计模式可以让界面不言自明 。
线索模式特点:
更好的帮助用户理解输入框要求输入的内容文本提示的位置应该和输入值的位置一致配合下拉菜单或者组合输入框使用使用祈使句 , 以动词短语开头 , 以描述输入内容的名词结尾 , 例如“请选择状态” , “请输入您的账号”或“请输入患者姓名”等输入线索的内容位于用户输入的位置 , 因此用户会注意到这个地方
2. 说明模式
是指在空白文本字段的旁边或下方 , 放置一个短语或示例 , 以解释此处需要输入的内容或提供关于此内容的详细要求及信息 。
说明模式特点:
使用户无需猜测 , 同时可以进行上下文提示;使输入框前的字段保持简洁 , 不要包含太多文本 , 使用户能够快速明确要输入内容;视觉上将说明模式与线索模式的字段区分开 , 可以使已经知道要做什么的用户忽略该说明 , 并将注意力集中在输入操作上;带有引导性的文案处理 , 会促进用户优化填写方案;操作项一侧或下方 , 提示需要输入的文本的具体要求和注意事项
典型案例:下图第一个案例每一项后面都有对应的输入说明和输入线索 , 比如社交账号后简单的说明了其作用 , 让用户迅速了解填写什么内容更合适 。
另外 , 好的引导能激发用户的填写欲望 , 比如QQ个性签名输入线索展示我的独特态度 , 非常符合年轻人的定位 , 填写几率也大大增加了 。同时也吸引其他好友的关注 , 使用户之间互动更频繁 , 平台也能因此更活跃 。
推荐阅读
- 探探卸载和注销的区别
- 立冬和冬至有什么区别 冬至和立冬一样吗
- 腊肉什么季节做最好 小雪为什么要腌腊肉
- 霜降吃柿子 霜降为什么要吃柿子
- 低血压和低血糖的区别 如何区分低血压和低血糖
- 乌鸦为什么像写字台是什么意思
- 指纹锁全自动和半自动有什么区别 指纹锁全自动和半自动哪个好
- 白萝卜炖羊肉的家常做法 羊肉和白萝卜是最佳搭档
- 榆木家具和橡木家具哪个好 怎样选择合适的家具
- 涤纶是什么材料 生活中的锦纶和涤纶是一样的吗