有图有对比!125个提升网页可用性的优化小技巧(五) - 优设-UISDC

有图有对比!125个提升网页可用性的优化小技巧(五)

2016/05/20 10254评论区

125-website-usability-optimize-5-1

编者按:这个系列的教程有125个实用的网页优化技巧,每一个技巧都有案例阐述,保证简单易懂。今天@企业官网设计精选 翻译了第四部分 —— 当用户操作错误时,如何在不影响用户体验的情况下快速处理好。一起来收

在很多界面中,错误的产生不可避免。一旦发生错误,要帮助用户快速轻松地处理好。

往期回顾:

  1. 《有图有案例!125个提升网页可用性的优化小技巧(一)》
  2. 《有图有对比!125个提升网页可用性的优化小技巧(二)》
  3. 《有图有案例!125个提升网页可用性的优化小技巧(三)》
  4. 《有图有案例!125个提升网页可用性的优化小技巧(四)》

防止错误产生

设计界面时,不要急着出方案,要尽力设计“无错可犯”的界面。

1learn20160518

△ 按钮在用户点击后进行去除、禁用或替换处理

别跟用户说只能提交一次。可以多次点击的,用户就可能点多次。用户点击后禁用按钮,才能真正避免多次提交。

2learn20160518

△ 只提供可以接受的输入选项

3learn20160518

△ 在表单元素中使用勾选启用、勾选可见的设计方式

4learn20160518

△ 文本输入框结构跟输入格式要求保持一致

监控典型错误信号

界面上有哪些常见错误产生?找出这些错误的信号,做好这些信号的监控。

5learn20160518

△ 搜寻与用户意图矛盾的用词

6learn20160518

△ 若用户已购买过该产品,提醒他们

对功能强大的按钮要区分开以避免误操作

用户会走神,这无法避免。设计时要从视觉上明显区分开那些功能强大的按钮,尽量减少误操作的可能性。

7learn20160518

△ 通过间隔和颜色区分强大功能按钮

8learn20160518

△ 为重大且不可逆的操作添加约束条件

提供便利的方法恢复或退出操作

总是给用户提供选择返回上一步操作或安全/可识别的区域

9learn20160518

△ 使用恢复操作而不是确认操作

10learn20160518

△ 为各页面或功能提供“逃生舱”(退出操作)

例如上图,某些下拉菜单没有退出选项,当用户点了一个选项,就无法取消选择了。

11learn20160518

△ 为弹出窗口或模态窗口提供关闭按钮

尽量减少用户离开一个系列操作步骤的负面影响

允许用户以原来的数据返回到相应步骤页面

12learn20160518

△ 保存用户提交的数据

13learn20160518

△ 让用户回到原来的操作步骤页面(别让用户又从头开始)

加大可移动路径或可点击区域

用户并非完人,他们会误操作,因此要提供有弹性或包容性的设计。

14learn20160518

△ 为小按钮添加一个透明边框(加大按钮的点击区域)

15learn20160518

△ 为弹框或下拉菜单添加一点小小的延迟

16learn20160518

△ 给整个菜单选项容器添加超链接(不要仅限文字区域)

17learn20160518

△ 给主菜单、列表项和辅助图标都加上超链接

用户经常点到不能点击的地方。不要试图矫正这些错误,相反地,为这些常见区域添加点击功能。

提供有用和支持性的出错提示

不要给出“发生错误”这种提示。解释出错原因,最好能给出解决方案。

18learn20160518

△ 解释验证出错的原因

19learn20160518

△ 对于复杂出错提示要提供相关文档或帮助链接

20learn20160518

△ 避免在出错信息中写“你”

记录用户的最近几次操作

在界面上提醒用户最近几次操作

21learn20160518

△ 显示用户最近几次搜索

22learn20160518

△ 已访问链接用不同的颜色区分

23learn20160518

△ 指出哪些项目用户已经看过

分析用户行为找出界面存在的问题

持续迭代改进界面设计,可以从下面这些小技巧开始

24learn20160518

△ 在适当位置收集客户的反馈信息

25learn20160518

△ 添加404错误次数上升的预警设置

26learn20160518

△ 找出那些用户反复访问的页面

如果一个页面浏览数太多(而独立客户数少),就需要仔细检查页面是否有问题导致用户反复访问。

友情宣传下,阿里UED 新开了个公众号,已经发了不少干货,欢迎关注哟:

aliuedqr

「技多不压身的设计师才有高薪资!」

  1. 平面设计:《超赞!设计师完全自学指南》
  2. 交互设计:《交互设计师修炼指南!教你从零开始成为优秀交互设计师》
  3. UI设计:《超实用新手指南!零基础如何自学UI设计?》
  4. 前端开发:《天猫高手来教你!零基础如何系统地学习前端开发?》
  5. 抠图技巧:《从菜鸟到高手!PHOTOSHOP抠图全方位攻略》
  6. 配色方案:《色彩搭配速成!3个实用方法帮你全面搞定配色》
  7. DPI指南:《基础知识学起来!为设计师量身打造的DPI指南》
  8. 交互设计自学路径图:《零基础入门!给非科班生的自学路径图之交互设计篇》

原文地址:nickkolenda

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量130万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/125-website-usability-optimize-5

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 转场动效 优设大课堂 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 配色 视觉设计 素材下载 设计师专访 web前端开发 设计流程 AI教程 用户体验设计 设计理论 神器下载 字体下载 海报设计 设计趋势 设计规范 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 用户体验 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里