假如下图Facebook输入框什么文字也没有,用户预期可能是输入或其他,因为设计者没有给用户框定搜索边界,因此线索设计模式可以让界面不言自明。
线索模式特点:
- 更好的帮助用户理解输入框要求输入的内容
- 文本提示的位置应该和输入值的位置一致
- 配合下拉菜单或者组合输入框使用
- 使用祈使句,以动词短语开头,以描述输入内容的名词结尾,例如“请选择状态”,“请输入您的账号”或“请输入患者姓名”等
- 输入线索的内容位于用户输入的位置,因此用户会注意到这个地方
2. 说明模式
是指在空白文本字段的旁边或下方,放置一个短语或示例,以解释此处需要输入的内容或提供关于此内容的详细要求及信息。
说明模式特点:
- 使用户无需猜测,同时可以进行上下文提示;
- 使输入框前的字段保持简洁,不要包含太多文本,使用户能够快速明确要输入内容;
- 视觉上将说明模式与线索模式的字段区分开,可以使已经知道要做什么的用户忽略该说明,并将注意力集中在输入操作上;
- 带有引导性的文案处理,会促进用户优化填写方案;
- 操作项一侧或下方,提示需要输入的文本的具体要求和注意事项
典型案例:下图第一个案例每一项后面都有对应的输入说明和输入线索,比如社交账号后简单的说明了其作用, 让用户迅速了解填写什么内容更合适。
另外,好的引导能激发用户的填写*,比如QQ个性签名输入线索展示我的独特态度,非常符合年轻人的定位,填写几率也大大增加了。同时也吸引其他好友的关注,使用户之间互动更频繁,平台也能因此更活跃。
3. 该用线索模式还是说明模式?
慎单独用线索提示,当输入内容过多时,可能会忘记这个提示,适用于简单的输入框,如注册、登陆界面的表单,输入框的长度如果不用暗示信息长度,需要统一输入框长度。
如下图iconfont极易忘记输入新密码的要求,当输入时候会疑惑密码是要字母/数字/符号三者组合,还是单一组合即可。
另外输入错误时会发现和提示内容和输入前不一样,也会造成不解,这些我们在设计过程中尽量避免。