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

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

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

尽可能少让用户做计算

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

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

△ 显示剩余数量

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

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

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

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

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

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

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

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

简化选择类任务

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

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

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

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

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

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

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

使用常规的网页设计界面

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

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

△ 使用常规的导航菜单

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

△ 把实用功能放在右上角

每次交互动作后提供反馈

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

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

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

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

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

最小化等待的负面效果

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

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

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

蓝色减少刺激(提高放松程度),蓝色加载元素可让用户觉得加载更快(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

相关推荐

  • 最浓缩的概念:交互是什么?交互的本质及如何理解

    在使用一种产品或东西的整体过程。而无论这个使用行为是有无目的导向。本身这个过程,即是交互的本质。而任何一个交互的过程中必定存在交互对相,及交互的媒介。在这里,我先声明一下哦。以下的分析过程可不那么容易跟得上,思维与对生活细节观察力不够的,请直接跳过。但,以下的内容是当年我在新加坡修用户体验时,在交互过程一环中的必修环节。做好心理准备,那就开始看吧。题外话:而如果想改进这一环节,那么在提升交互环节的效率方式手段上,也无非只能是,1,提升硬件能力来加速。2,减少多余软件操作环节。3,有无改变硬软件间关系的其它模式?题外话:而如果想改进这一环节,那么在提升交互环节的效率方式手段上,也无非只能是,1,提升硬件能力来加速。2,减少多余渠道操作环节,如展开一个个目录,或通过其它模式打开。3,提升系统本身效率。产品设计的体验层级关系:
    核心层:产品本质体验层。---这产品是为达成什么用户目的而生的。
    中间层:产品使用过程中的体验层。---这就是我们所有产品中的交互层。
    最表层:产品的视觉体验层。---这部分就是UI〜我们也知道约炮软件其实并没有什么用,但为什么能相对留存久呢?也就是在于用户在心理层上有侥幸心理。同时加上其在媒体上潜意默化的某某成功的宣传。所以,让用户的心理否定延后。所以,相对来说,知道没什么用,但还是久留一下看看。但大多有头脑的。基本上也在一段时间后最终放弃。

    2017-05-25
  • 内容为王的时代,阿里设计师用实战案例解读内容化设计!

    作者:阿里设计师   编者按:什么是内容化设计?设计师为什么要关注内容?如何通过设计的手段提高内容体验?阿里设计师用一个手淘的实战案例,帮你掌握内容化设计的精髓!   前言 如果说好的产品是运营出来的,那么…

    交互专题 2017-08-07
  • 蔚来ES8正式上市 | 重新定义汽车用户体验

    就在刚才,首届NIO Day蔚来日在北京五棵松体育馆圆满结束。蔚来ES8也正式上市并开启预订。近万名蔚来好友相聚于此今晚,这些信息你不容错过:蔚来ES8正式上市 公布售价蔚来ES8售价公布ES8基准版补贴前售价44.8万起,限量1万辆创始版补贴前售价54.8万,用户也可以选择电池租用方案,车价比常规购买低10万,每月支付1,280元电池月费,同时可享受电池升级服务。ES8上台亮相源于赛道冠军的极致性能4秒SUV俱乐部最大功率480千瓦(...

    2018-02-02
  • AxureUX电商平台WEB端交互原型模板正式发布

    01作品信息作品名称:AxureUX电商平台WEB端交互原型模板作品类型:模板类发布日期:2018-02-25最新版本:v1.0主要适用:Web端软件版本:Axure 8.0文件大小:13MB作品编号:TEM006作品售价:¥169.00详细介绍及演示:http://www.axureux.com/home/templateswebec.html复制以上链接在浏览器打开或点击文章底部阅读原文,建议在电脑上查看原型演示。02作品介绍本作品...

    2018-03-04
  • 同一个人的微博,首页连续出现48条是怎样的体验?

    如果你是微博的轻度用户,可能偶尔觉得刷出来的内容有些不对劲;而如果你是微博的重度用户,那你很可能觉得微博的 timeline 有时候刷的很不爽。

    2017-05-14
  • 大数据应用的用户体验分析

    版权所有©德塔精要,转载请注明出处用户对产品或服务的认同是由用户体验的过程所决定的,一个具备良好用户体验的IT系统对内可以提高员工工作效率,对外可以提高客户满意度和忠诚度,最终为企业带来不菲的经济效益或社会效益。因此,组织的IT战略必须实现IT与业务的融合,面向客户和关注用户体验管理。但目前用户体验管理是当前IT业务运营的弱项,也许我们能够了解IT资源的每个细节,但却不知道用户感受怎么样,不利于IT系统的优化和完善。缺乏用户体验管理以及...

    2018-03-12
  • 【用户体验】机器人教练:第三季!

    【本文转自:哈尔滨腾达集团驾校】WELCOME TO TENGDA我们的腾达欢迎来到腾达驾校机器人教学活动已经举办了两期,机器人教学俨然已经成为了一种时尚热潮,同时也在学员中树立了良好的口碑,学员反响热烈,有越来越多的学员通过此次活动认识了机器人教练,并且想来体验一下机器人教练的庐山真面目。近一周的科二学习,可累坏了学员们、也累坏了教练。在此对大家说一句:大家辛苦了!经过几天风吹日晒,我们的科二学习已经正式接近尾声,本周最后一个科目的练...

    2018-04-23
  • 干货|关于用户体验,你想知道的都在这里

    昨天,高高老师邀请了北师大本部三位学长学姐分享了心理学用户体验的相关知识以及职业发展的经验。三位主讲者分别是:如如学姐、喵喵学姐、大洲学长,都来自北师珠12级应用心理学系。问:用户体验(UX)到底是什么?答:其实行业内并没有统一说法,我觉得它作为一个动词来说可以指一项研究活动,通过用户体验的研究方法去探究用户在某个情境下的痛点或者是需求,然后再恰当地运用用户体验设计去满足他们的痛点和需求;而且人的需求总是随时间和时代的变化而变化,所以用...

    2018-04-01
  • 人工智能对用户体验的影响

    最近两年人工智能技术在金融、安全、交通、医疗、公共服务和制造业等领域逐渐落地,随着技术的成熟,人工智能将会在更多领域影响人类的生活。以人为本的人工智能设计会变得更加重要,本文会从安全性、效率、易用性、场景化、个性化五个方面阐述人工智能如何改善现有的产品和用户体验,这五个方面存在着各种联系并相互影响。安全性越接近系统底层的技术越影响用户体验,例如手机中毒或者信息被盗都会对用户产生巨大影响;如果关系到国家安全,整个社会的秩序都会被扰乱,所以...

    2018-03-26
  • 作为新人的你,应从信息架构、交互流程和交互细节去了解交互设计

    交互设计严格上来说是没有什么套路而言,但是,对于初入行者还是需要有一些需要具体客观的知识点去学习。就像笔者当年刚入行学习工业设计的时候,对工业设计的内涵与外延始终搞不太懂。老师们也没有一直强调工业设计的定义,而是从琐碎的知识点开始,一点点讲解,让我们掌握。当我们掌握了足够多的知识点,工业设计也自然在我们的知识框架中形成。

    2017-05-19