在网页设计中如何少让用户费脑筋,保持操作流畅

除了引导用户,还要减少他们的认知流程,以保持流畅状态。千万别把计算这种事情丢给用户,让计算机来处理。

除了引导用户,还要减少他们的认知流程,以保持流畅状态。

尽可能少让用户做计算

千万别把计算这种事情丢给用户,让计算机来处理。

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 显示剩余数量

在界面内体现用户当前所处位置

界面就像机场,如果没有“你在这里”的标记,用户会迷路,因此记得提供标记。

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 在导航菜单上突出当前所选

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 在复杂的界面中提供面包屑导航或步骤图示

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 在页面标题前面部分放置描述性或有用的信息

简化选择类任务

做选择需要费脑筋,简化这类任务让用户少费神

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 指明多数用户选择的选项

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 提供常见搜索关键词列表

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 下拉分类菜单置于相应导航菜单内

使用常规的网页设计界面

创新很好,但不要跟常规的设计方式偏离太远。用户习惯于某些布局、结构。常规设计之所以流行,是因为他们确实可行。

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 使用常规的导航菜单

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 把实用功能放在右上角

每次交互动作后提供反馈

用户跟界面进行互动后,需获得实时反馈。操作成功还是失败了?发生了什么变化?

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 重要的交互动作后反馈提示成功消息

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 显示当前鼠标停留在哪个项目上

最小化等待的负面效果

消灭所有不必要的等待。如果确实要用户等,则最小化该负面效果。

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 加载动画效果使用冷色调减少对用户刺激

蓝色减少刺激(提高放松程度),蓝色加载元素可让用户觉得加载更快(Gorn et al., 2004)。

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 长时间等待时保持用户活跃度(别人他们干等)

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 防止用户上传不支持的文件

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 实时统计显示任务进展

尽可能减少用户对记忆的依赖

别让用户去记住任何东西,将相关信息显示出来

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 让表单标签保持一直可见

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 避免用户点击后就消失的行内标签

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 占位文本放到表单元素的外边

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 为可移动输入添加复制按钮△ (△ Add Copy Buttons to Movable Input△ )

尽量少用锯齿状视图模式

减少用户眼睛来回移动的次数,让各项补充数据保持接近。

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 合并相同的数据字段帮助用户进行对比

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 让表单标签紧贴相应元素并对齐

反馈显示哪些项目是可点击或交互的

用户需要识别哪些元素是可交互的(并且知道如何交互)。

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 使用3D特性设计按钮

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 为可拖拽元素添加点状纹理

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 使用图标和符号传达一个交互动作的意图

你可以通过PowerPoint 或 Keynote的各种形状制作大部分图标

用常见的文字和符合来沟通

大多数情况下,清晰明确胜过创意和术语

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 讲用户懂的语言,不讲程序语言

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 出现外语时,提供翻译按钮

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 颜色的选择要与语义保持一致

当颜色跟语义不一致时,会增加用户处理信息的困扰。如meetup.com上使用红色确认出席,准确应该是用绿色。

尽可能提高界面的可浏览性

多数用户采用浏览扫读的方式处理内容,我们需要接受这种行为。

设计界面时尽量适应这种泛读浏览方式。

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 保持段落简短,高亮关键词组

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 把重要信息放在列表的开头

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 给表格添加交替的行条纹背景

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 编写独立副标题(不要一篇文章就一个大标题)

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 用视觉变化拆分文本

尽可能提高文本的可读性

很明显,文本需要让人易懂,有些技巧能让文本更具可读性。

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 让文本和背景具有鲜明对比

背景上显示文本需要注意,可能需要做一些叠加或模糊处理。(以作者照片为例…)

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 正文的主要部分采用左对齐

界面设计风格保持一致

风格不统一的话用户需要花更多时间学习界面。保持统一的布局和外观可以简化学习过程。

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 制定一份前端风格指引

制定一份稳定,总结界面各元素的设计规格说明

其他元素包括:

  • 颜色
  • 网格和布局
  • 位置和定位
  • 大小和形状
  • 标签和语言
  • 导航
  • 表格
  •  列表
  • 链接
  • 声音和腔调

需要灵感参考?看看Mailchimp的风格指引(http://ux.mailchimp.com/patterns

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 导航菜单保持在相同位置

通过视觉平衡实现设计美感

美观的设计更加好用 – 即美即好用效应原则(Kurosu & Kashimura, 1995).

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 使用数学原理构造设计

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 使用对比性字体

挑选搭配字体时,有人喜欢使用相似的字体,但这种方式是错的,很多时候相似的看上去并不对。

相反,应该精心挑选对比鲜明的字体,新手设计师可以选择serif vs sans-serif(英文字体),如上图

未完待续…

 

译文来自:@企业官网设计精选

原文地址:nickkolenda

 

 

【系列文章回顾】戳下面链接快速到达:

1)在网页设计中帮助用户实现目标

2)在网页设计中如何引导用户的注意力

3)在网页设计中如何少让用户费脑筋,保持操作流畅

4)在网页设计中兼顾所有用户和场景的3个技巧

5)当用户操作错误时,如何在不影响用户体验的情况下快速处理好

 

 

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/29314/

(0)
CatherineCatherine
上一篇 2017-05-23 21:15
下一篇 2017-05-23 23:24

相关推荐

  • “用户体验” 才是售电公司的未来(中电联课程)

    本文由全球首家智能传媒平台—中传媒平台(CMCNP)提供对于售电公司来说,用户体验就是电力用户用电过程的一个主观感受。那这样就有一个疑问:用电还有什么区别吗?电本身就是无差别的商品。所以,售电公司就应该提供差异化增值服务以满足用户体验。如果不谈用户体验,那售电公司单凭价差、所谓的增值服务去吸引用户,去谋未来?价差谁比的过电厂的售电公司,增值服务谁不会,不知道中国人最擅长的就是“借鉴”吗?如果是这样,独立售电公司在市场上就真的没什么竞争力...

    2018-02-05
  • 基于数据的可用性研究

    小编语:这是一篇关于交互设计与可用性研究的古老的文章,今天小编翻出来给新交互师们看一下~ Thomas Baekdal在The Battle Between Usability and User-Experience中提到,可用性较高的产品并不一定带来好的用户体…

    2015-01-24
  • 传递数据背后的故事——图表设计

    7大洲中最高的山峰:
    南极洲,文森峰,16050呎 4892米
    南美洲,阿空加瓜山,22841呎 6962米
    非洲,乞力马扎罗山,19340呎 5892米
    亚洲,珠穆朗玛峰,29035呎 8848米
    欧洲,厄尔布鲁士山18510呎 5642米
    北美洲,麦金利山20320呎 6194米
    大洋洲,卡斯滕土山16024呎 4884米

    2017-06-04
  • 交互干货必收 | App界面交互设计规范

    在上篇《APP界面设计风格》确定下来后,产品经理(兼交互设计)还不用着急将所有的交互稿扔给设计师进行细致的界面设计。在细节设计启动前,拉上设计师和安卓前端开发、ios前端开发一起商议确定设计规范先吧!

    2017-06-04
  • AXURE免费元件库分享-web

    分享个WEB端axure元件库下面是元件库地址:https://pan.baidu.com/s/1pLXHuf5

    2018-03-05
  • 当戒指也走向智能化

    小编导语:这是这是一个不错的创新产品设计,特意推荐给大家看看哦。 这款叫做 Smarty Ring 的智能戒指使用了防过敏不锈钢材质,宽 13mm,厚度为 4mm,黑色给人一种酷炫高冷的感觉。 它不仅可以当手表使用,而且它…

    2015-04-11
  • 通过微信学习用户体验和产品迭代

    这几天一直不停的开会,讨论产品,活生生的从运营的位置跑偏到了产品,似乎可以调岗了,andy一直在聊迭代的问题,想来想去,觉得还是微信做的最牛逼,那就翻翻历史,聊一聊吧。微信是2011年1月21日才面世的,为什么能在短短六七年的时间实现9亿多用户?在QQ已经在通讯社交行业占据霸主地位时,微信又是如何脱颖而出实现反超的? 在米聊率先面世创下不俗业绩后,微信又是如何后来居上的? 微信的成功对于产品人来说有很多值得挖掘、学习的地方。初期的微信和...

    2018-05-05
  • 微交互:如何塑造优质的产品细节?

    本文作者将与大家探讨微交互是如何塑造优质的产品细节的,一起来看看吧~“最好的产品通常会做好两件事情:功能和细节。功能能够吸引用户关注这个产品,而细节则能够让关注的用户留下来。”

    2017-05-01
  • 尼尔森交互原则,讲的到底是什么?

    这几天,脑海里面一直回绕着一个声音,尼尔森,尼尔森交互,尼尔森交互十大原则。blues老师的讲解至今让我记忆犹新,如果真的让我选择一款产品进行尼尔森交互分析,我想应该就是简书了。

    2017-06-01
  • Mockplus实例之一看就会de五个交互功能

    实例来源:豆瓣新加日记(https://www.douban.com/note/create)先看看豆瓣新加日记的网页:再看看已经制作好的原型预览页面:在原型制作中有五个有特色的交互功能:1 题目和正文切换时,边框颜色变深这里需要交互…

    2016-07-27