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

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

2016/05/05 9404评论区

125-website-usability-optimize-2-1

编者按:这个系列的教程有125个实用的网页优化技巧,每一个技巧都有案例对比,保证简单易懂。今天@企业官网设计精选 翻译了第二部分 —— 在网页设计中帮助用户实现目标,一起来涨姿势!

第一期回顾:《有图有案例!125个提升网页可用性的优化小技巧(一)》

让常用功能和重要数据信息更接近用户

预测用户的意图,让他们尽可能接近目标。

1qyjx20160505

△ 筛选出或跳至用户正在搜索的条目

2qyjx20160505

△ 将用户常选项目列为默认选项

3qyjx20160505

△ 产品列表页上把重要数据信息展示出来

很多时候用户需要像踩弹簧高跷杖一样,点击一个产品,查看信息,返回上一页,再反复操作以查看其他产品。这种设计的可用性差。应把重要信息直接放在主要页面,减少用户反复操作的次数。

如果你怕这样页面会杂乱,也可以设计成鼠标悬停时显示(如下面这样)

4qyjx20160505

△ 鼠标悬停时显示有用信息

5qyjx20160505

△ 常用功能直接展示出来

6qyjx20160505

△ 用仪表面板方式展现主要数据和状态

7qyjx20160505

△ 把常见答案放在下拉列表的头部

交互状态的及时反馈呈现

通过传达所有相关信息减少不确定性。

8qyjx20160505

△ 在机器驱动的任务中显示当前进度和剩余时间

如上传文件是系统在处理,用户不知道内部运作情况,通过显示进度条可以让用户知道进展。

9qyjx20160505

△ 复杂或冗长的交互状态要及时反馈呈现

10qyjx20160505

△ 按次序显示操作步骤总数

11qyjx20160505

△ 显示类目下的条目数

同一任务,可为客户提供多种完成方式

用户喜欢的操作方式不一样。为同一目标提供不同路径,让用户选择最符合他们自己的方式。

12qyjx20160505

△ 用户可通过用户名或电子邮件登录系统

13qyjx20160505

△ 为重复操作类功能提供键盘快捷键

14qyjx20160505

△ 让用户可以拖拽元素

15qyjx20160505

△ 让用户直接编辑数据信息

反馈呈现交互动作的限制条件或参数要求

为每一个交互动作做好准备。用户需要什么?他们如何继续?

16qyjx20160505

△ 描述清楚你需要用户输入什么

17qyjx20160505

△ 实时显示密码要求并反馈输入状态

18qyjx20160505

△ 为表单元素预填通用参数

19qyjx20160505

△ 显示表单的必填和选填信息

反馈显示交互动作的预期结果

在用户进行交互操作之前,他们应该了解预期结果是什么

20qyjx20160505

△ 使用描述性按钮标签

21qyjx20160505

△ 根据当前的输入,显示结果预览

22qyjx20160505

△ 按次序显示或预览下一个项目

23qyjx20160505

△ 使用智能菜单项明确操作内容

当用户取得进展时,给予奖励或肯定

用户取得进展了吗?他们的交互成功了吗?让用户知道,同时引导他们继续。

24qyjx20160505

△ 保证链接与目标页面的一致性

25qyjx20160505

△ 为新加入用户提供速效指引环节(如迅速建立人脉)

26qyjx20160505

△ 进度条从大于0%的地方开始

解决用户的核心需求

很多时候,我们只解决了用户的表层需求。深入下去,探究为何用户需要某些功能或信息,然后解决他们的底层需求

27qyjx20160505

△ 显示当前时间办公室处于开放还是关闭状态

28qyjx20160505

△ 显示事件的新近状态

如最近发表的评论,显示为几天之前而不是具体日期,用户可明确感知是新评论。

未完待续…

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

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

原文地址:nickkolenda

yestone-uisdc-2

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

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

优设大课堂

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

发表评论 加载中....

评论加载中....

uisdc

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

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

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

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