有图有案例!125个提升网页可用性的优化小技巧(四) - www.looksinfo.com网 - UISDC

有图有案例!125个提升网页可用性的优化小技巧(四)

2016/05/12 9799评论区

125-website-usability-optimize-4-1

编者按:这个系列的教程有125个实用的网页优化技巧,每一个技巧都有案例阐述,保证简单易懂。今天@企业官网设计精选 翻译了第四部分 —— 在网页设计中兼顾所有用户和场景的3个技巧。一起来收!

往期回顾:

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

尽可能兼顾不同用户的知识和技能水平

用户可能是新手、专家或介于两者之间,要根据用户情况设计界面。

1qy20160512

△ 使用适当的新人引导(四种主要的新人引导策略)

这四种用法刚好可以用一个2*2的矩阵来表示。根据下方图示选择最适合你界面的方式:

2qy20160512

3qy20160512

△ 为新手用户添加提示而不干扰专家用户

4qy20160512

△ 使用卡片分类构建信息架构

若你想了解用户如何确定或概念化菜单分类,使用开放式卡片分类;

若你想了解用户如何将现有元素归类到预制分类,使用封闭式卡片分类;

尽可能适应用户的操作流程

用户会有不同的需求,根据不同操作流程调整界面设计。

5qy20160512

△ 让用户控制数据的呈现方式

6qy20160512

△ 让用户控制数据的排序方式

其他排序标准包括:

  • 按字母顺序
  • 按可用性
  • 按分类
  • 按日期
  • 按距离
  • 按热门程度
  • 按价格
  • 按相关性
  • 按大小

7qy20160512

△ 让用户控制数据显示的数量

8qy20160512

△ 构建用户画像以区分具体操作流程

9qy20160512

△ 让用户通过新标签页打开页面

很多用户习惯先打开页面,后续再去浏览。

尽可能提高网页的可及性

让残疾人群也可以访问使用你的界面。这不仅是好的做法,还可以避免法律后果(看你做的是什么产品)

10qy20160512

△ 在HTML5中使用语义标签

11qy20160512

△ 使用多种提示来沟通反馈信息

大约8%的男性是色盲(Chan, Goh, & Tan, 2014)。不要单独通过颜色来传达信息,提供多种提示。

尽可能兼容各种输入和极端个例

应该允许用户输入各种信息而无后顾之忧。

12qy20160512

△ 解决自动生成信息带来的不好结果

(译者注:上图客户旅游目的地是奥斯威辛,通过模板消息“<目的地名称>玩得开心”,会生成“奥斯威辛玩得开心”的提示,但奥斯威辛集中营是个负面的联想,“奥斯威辛集中营玩得开心”,会让用户不爽。保险起见,改成提示“旅途愉快”)

13qy20160512

△ 使用支持多种输入格式的表单元素

14qy20160512

△ 显示能解决搜索者需求的结果

15qy20160512

△ 使用能处理错别字、同义词或变体词的搜索

尽可能兼容所有媒介

界面需要在各种环境都能运作(如不同设备、浏览器等)

16qy20160512

△ 根据用户浏览器定制不同的操作指引

17qy20160512

△ 在小型设备上使用单窗口深入的方式

未完待续…

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

aliuedqr

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

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

原文地址:nickkolenda

yestone-uisdc-2

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

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

www.looksinfo.com大课堂

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

发表评论 加载中....

评论加载中....

uisdc

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

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

您还没有登录

www.looksinfo.com启用更安全省心的 微信扫码登录

微信扫码

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

把好文章收藏到微信

打开微信,扫码分享
学设计 www.looksinfo.com网 在这里

首页百度一下360搜索 搜狗搜索 神马搜索"