首页

用户体验设计定义&详细案例

seo达人


一个设计的存活或死亡依赖于它适应人类的行为和认知限制的能力。

 

一、什么是用户体验?

用户体验(User Experience,简称UE/UX)这个词是在上世纪90年代中期,由用户体验设计师 唐纳德·诺曼(Donald Norman)所提出和推广。

定义:用户在使用产品过程中建立起来的一种纯主观感受。即用户在使用一个产品或系统之前、使用期间和使用之后的全部感受,包括情感、信仰、喜好、认知印象、生理和心理反应、行为和成就等各个方面。

 

二、可用性原则

可用性指的是产品对用户来说有效、易学、高效、好记、少错和令人满意的程度,即用户能否用产品完成他的任务,效率如何,主观感受怎样,实际上是从用户角度所看到的产品质量,是产品用户体验的核心,不好的可用性会导致用户放弃使用产品。

可用性由易学性、效率、可记忆性、容错性、满意度、实用性、个性化、可预测性组成。

 

01 易学性

指的是用户学习如何与产品进行交互,以实现目标所花费的时间和精力,即用户能否在初次使用产品时完成简单的任务或实现用户目标。

 

02 效率

用户在使用产品一段时间后,能否在合理的时间完成想要达成的目标任务。这里以腾讯视频为例,用户能否快速的下载想要的东西,在同一系列中,可以快速下载更多的相关内容。

 

03 可记忆性

我们常说互联网是有记忆的,好的产品体验是帮助用户去记忆。用户在体验中,要对一些有意识、无意识的行为进行记忆是一个比较大的负担,如果在一些环节通过系统能帮用户记录,会降低用户的负担。比如在搜索、历史记录、浏览记录等。

 

04 容错性

用户在使用产品时,发生错误后,能否快速帮助用户识别和纠正错误,帮助用户从错误中恢复的能力。如常见的注册登录,当用户属于邮箱格式不对的时候,给出提示,并且告知错在哪里。如果提示语只是:”请输入正确的邮箱” 用户可能会疑惑,错在哪里。

 

05 满意度

满意度指的是用户与设计互动产生的愉悦程度,可以是用户使用产品时流畅的交互和优秀的视觉设计,也可以是用户在产品中得到的满足感。比如sir语音交互,王者荣耀等级(满足感)

 

06 实用性

产品能否提供用户在完成任务时所需要用到的基本功能,例如P图类软件,用户需要对图片进行裁剪、添加滤镜、抠图、美颜、补妆、添加文字、去除水印、添加文字等操作。

 

07 个性化

在满足实用性的基础上 针对用户提供不同场景下的功能定制,如美图秀秀,在提供图片美化的同时,针对用户不同的使用场景还提供视频剪辑、视频美容等功能。

 

08 可预测性

用户能够预测到下一步操作或者整个流程的交互,将会发生什么。举例淘宝的购买流程。点击购买按钮> 选择商品属性> 付款> 输入密码> 购买成功; 用户在点击购买按钮开始就能够预测到下一步或者整个流程的步骤会发生什么。

 

三、可见性原则

可见性是用户根据界面中可见元素确定产品可以做什么的设计原则。

 

01 物理功能可见性

物理功能可见性是基于对象的物理外观。在视觉上,这种类型的功能可见性使用户能够立即清楚地看到在设计界面中能干什么。例如当我们使用音乐类软件,最常使用的就是播放/暂停,上一曲/下一曲。我们就会寻找去这些图标。其次是分享、收藏、下载、评论等功能需要用到的功能展示在页面中,这就是功能可见性。

 

02 状态可见性

当信息或者列表过多时区分状态的展示,将重要的状态信息呈现在尽可能高的信息层级当中。如iOS信息和QQ邮箱中区分未读信息的微标。如果将这些徽标隐藏起来,会极大地破坏易用性,因为人们将不得不进入一个个邮件详情页当中进行确认,才能获取到原本由徽标提供的状态信息,这样的互动非常低效且乏味。

 

03 步骤可见性

当用户在执行某项任务的时候应该清晰明了的告知用户目前在什么步骤,后面还有多少步骤,完整清晰的流程展示。如果将这些信息隐藏起来,用户会困惑当前进行到哪一步,接下来还有多少步骤。

 

四、可供性原则

强调需要明确的视觉线索向用户展示产品可以做什么。例如用户界面中的交互元素(如滚动条、命令按钮和图标等)的设计必须能够为用户提供足够清楚的建议,让用户可以清晰地辨别出这些元素所代表的意思是什么、它们的功能是什么,以及如何与它们进行交互行为(点击、长按、滑动 等)

 

五、反馈

给用户及时、恰当的反馈,是体验设计中非常重要的一项原则;对每个用户的操作都应该有恰当的系统反馈(包含视觉、听觉、触觉)。

 

01 告知性

明确告知用户当前操作发生了什么。如点击下载和下载过程给出相对应的反馈及进度条。

 

02 动作连接性

当用户产生某个动作时,给予相对应的连接反馈。如大概用户点击某个按钮时,按钮默认的外观与点击后的外观发生变化,结合现实世界的开关去思考(按下 开灯)动作与反馈是连接的,即时的。

 

六、希克定律

希克定律,是1951年由威廉·埃德蒙·希克首先提出的,认为人们从数组中选择目标的时间取决于可用选项的数量。也就是当一个人所面临的选择越多,做出选择所花的时间就越多,当面临选择的数量增加,做出决定的时间也会跟着增加。

 

如京东筛选,在搜索结果页会将筛选条件收起,因为里面的筛选条件内容过多。用户会在当前页面选择的时间增加.将一些项目分组放入二级下单,并且做好归类,用户能够更迅速的作出决定。

 

七、费茨定律

费茨定律,是1954 年 由保罗.菲茨首次提出,在人机交互中指的是通过图形用户界面使用鼠标或其他类型的指针从一个起始位置移动到一个最终目的所需的时间。

 

  • T:代表完成移动所需的平均时间
  • A:代表光标开始/停止时间
  • B:代表光标移动速度
  • D:代表从起点到目标中心的距离
  • W:代表目标的尺寸

简单来说就是指:随着目标的距离增加,移动到目标的时间更长,并且随着目标的尺寸减小,选择目标的时间也会增加。

所以在界面设计当中会遵循越重要的功能,占据面基会越大。重要图标的点击热区也会增大。便于用户快速点击。

 

屏幕外边缘和四个角部比屏幕中的其他位置都更容易被定为和选中,所以我们在进行产品设计的过程中,会将常用/重要的操作放置在屏幕边缘处,便于用户操作。

 

八、神奇数字 7 ± 2

神奇数字7±2法则是1956年由 乔治·米勒 所提出的,根据乔治·米勒的研究,人类短期的记忆一般一次只能记住5-9个。也就是为什么大多数APP底部导航为5个的原因。

 

由于人类的大脑处理信息的能力有限,大脑会将复杂信息划分成 块 和小的单元。如:京东和每日优鲜的分类处理。

 

人类短期的记忆一般一次只能记住5-9个,所以人们总是倾向于把一串数字拆分为多个较短的部分进行记忆。如银行卡号和手机号码等。

 

九、复杂守恒定律

复杂守恒定律是1984年由 拉里·泰斯勒 所提出的,也称作泰斯勒定律。认为每一个产品设计的过程中,都有其固有的复杂性,存在着一个临界点,超过了这个点产品设计的过程就不能再简化了,你只能将固有的复杂性从一个地方转移到另外一个地方。

在产品设计中,会尽量的简化界面。当功能过多时进行一个整合的处理,跳转或者滑动操作。如查看更多或者常见的汉堡导航。

 

十、新乡重夫:防错原则

新乡重夫认为遗忘有两种:一种是疏漏,另一种是忘却。他建议采用一些措施来预防产品的缺陷。

防错原则认为大部分的意外都是由设计的疏忽,而不是人为操作疏忽。因此,在设计中要有必要的防错机制;比如常见的信息输入状态,未输入置灰不可点,输入变为可点击状态。

 

微信拍一拍:微信在出了拍一拍功能之后,很多时候点击头像的时候会不小心拍到别人,现在的拍一拍是可以撤销的,在客户端鼠标悬浮上就可以进行撤回,移动端长按出现撤回弹窗,两分钟内有效。

 

微信朋友圈动态:点击返回图标会出现的弹窗,避免误操作。利用防错原则,可以避免用户重新编辑。微信当中有很多友好的体验细节。可以多多去感受。

 

十一、奥卡姆剃刀原理

奥卡姆剃刀 定律 :它是由14世纪英格兰的逻辑学家、圣方济各会修士奥卡姆的威廉 (William of Occam,约1285年至1349年)提出。 这个 原理 称为“如无必要,勿增实体 ”,即“ 简单有效原理 ”

 

01、只放置必要的元素

不必要的元素会降低设计的效率,不管是实体、视觉或者认知上,多余的设计元素,有可能造成失败或者其它问题。这并不意味着不能提供给用户很多的信息,可以用「更多信息」来实现。如夸克浏览器,首页只放置重要功能 搜索 和几个整合内容的图标入口。

 

02、减少点击次数

让用户通过较少的点击就能找到他们想要的东西或使用功能。如音乐类软件,在播放音乐之后进入其他的tab,在上面都会悬浮播放/暂停的区域。都能够随时操作。

 

03、“老人”规则

就是产品的易用性,如果年纪大点的人,也能够轻松使用所设计的产品那么是成功的。如抖音沉浸式的体验,简单的滑动就能够观看想看的内容。目前抖音的用户老年人也逐渐包含在内,并且抖音会根据用户的停留时长等推送用户感兴趣的内容。

 

04、减少“段落”个数

页面的使用率,当你想要在一屏新增很多内容时,页面的布局就会变得拥挤和区域变小,容易过于干扰用户做出选择,重要功能不够突出等。夸克浏览器首页强化了搜索功能 和几个整合内容的图标入口;uc浏览器首页内容过多,当用户想要使用搜索功能时很容易被其他内容干扰。

 

05、给予更少的选项

前面说到的希克定律说到,当选择的数量越多,用户做决定的时间就更长。做过多的决定也是一种压力,在展示内容的时候要努力减少用户的思维负担。如携程和马蜂窝金刚区的内容展示,马蜂窝根据产品属性放置了6个重要的功能入口,便于用户更快的去选择所想要的功能。

 

十二、设计和艺术的区别是什么?

最后我们来探讨一下设计和艺术的区别是什么。我看到一句话觉得挺好的。设计和艺术的重要区别是:艺术抛出问题,而设计解决问题。

我们设想一个场景,当你在艺术展厅站在一副名画面前,你所思考的是什么?是惊叹画家的画技还是整个画面给你的感觉是一种故事,你会不会思考艺术家在作画时的心情,处境,为什么要这么去画?想表达怎么样的情感?

 

然后我们再设想一个场景,同样在艺术展厅,你身上带有手机和相机。你会选择用相机拍照还是用手机。答案是 相机 对吧?因为相机的拍照效果在任何环境下都会比手机好。这就是设计。是能够真真切切的解决用户问题的。能够去感知到的。

设计和艺术的区别,如果有更好的答案,欢迎评论区留下你的看法。码字不易,请给个小小的赞鼓励一下

 

原文地址: 站酷

作者:左眼右舍

 转载请注明:学UI网》用户体验设计定义&详细案例

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



用户体验设计法则应该怎么用?来看看这些应用原理!

seo达人


1、菲茨定

图片

选中目标所需时间与移动距离长短和目标面积大小有关。(与距离负相关,与面积正相关)

 

现实中的应

图片

在商场中寻找洗手间取决于标志的大小及步行的距离。为了满足这两个标准,标志设计得更大、更容易接近。

 

设计应用

图片

▲ 左侧页面的CTA按钮很小,没有突出显示,与表单的其他元素基本上没有区分;右侧页面CTA按钮尺寸很大,能让用户清晰识别。

 

2、希克定律

图片

决策所需要花费的时间随着选择的数量和复杂性增加而增加。

 

现实中的应

图片

与餐厅相比,快餐店的菜单选项有限。因此顾客点餐速度更快,门店提供的服务也更快。

 

设计应用

图片

▲ 在Whatsapp上转发消息时,会在“最近聊天”列表上方看到“经常联系”的3个好友。这对用户来说是一种简单的交互,帮助用户节省操作时间。

 

3、共域定律

图片

被一个显而易见的边框包围起来的多个元素,被视为一个群组。(从属于格式塔理论)

 

现实中的应用

图片

在服装店中,衣服按照类型被分到不同的架子上来展示,即使对这家服装店一无所知,顾客也会将一个货架内的商品关联成相似的东西。

 

设计应用

图片

▲ 过滤器被封闭在产品页面之外的单独区域中,因此可以清楚地识别左右两部分的差异。

 

4、雅各布定律

图片

用户将大部分时间花在别人家的网站(产品)上,而不是你的。这意味着他们希望你的网站(产品)跟别人的有相同的使用方式。

 

现实中的应用

图片

假设家中的阳台是一扇推拉门,我们可能希望酒店的阳台门也以同样的方式操作。因此如果酒店有一个滑动门,我们可能会下意识地先去推门。

 

设计应用

图片

▲ 以上是国外知名的电商网站导航栏设计,这几个网站导航栏中显示的信息及其结构都非常相似:左侧是品牌标志,中间为搜索栏,右侧为其他选项(购物车/个人账户)。

 

5、系列位置效应

图片

用户更容易记住系列中出现的第一项(首因效应)和最后一项(近因效应)。

 

现实中的应用

图片

我们通常更容易记住某个电话号码的前4位或后3位,这条法则也是银行卡号被分成4组数字的原因。

 

设计应用

图片

▲ 在亚马逊主页上,网站的第一部分总是显示最重要的内容:导航包含logo、搜索和其他重要功能;轮播图通过图形设计吸引用户的目光,引导新的交易或优惠。

 

6、冯·雷斯托夫效应

图片

又称隔离效应。当存在多个相似物体时,与众不同的物体最容易被记住。

 

现实中的应用

图片

在商场购物时,相较于普通装饰的门店,我们更有可能记住或将注意力转移到具有霓虹灯效果的门店上。

 

设计应用

图片

▲ App上有新消息时,会在图标上用红点显示,这样的提示更清晰和突出,从而吸引用户的注意力,引导用户点击并查看消息。

 

7、审美可用性效应

图片

用户通常认为漂亮的设计更易用。

 

现实中的应用

图片

当参观汽车展厅时,我们通常会对汽车精美的展示感到惊叹,并立即对这个品牌产生积极的印象。

 

设计应用

图片

▲ 在爱彼迎上,我们住在陌生人的房子里,因此建立双方的信任是必要的。当访问像爱彼迎这样干净简洁的网站时,我们会下意识地信任这个产品,也确保了用户对品牌的信任。

 

8、峰终定律

图片

人们评论体验优劣,大多基于峰值和结束时的感受,而不是所有环节的平均值。

 

现实中的应用

图片

在足球比赛中,整场的观看体验将根据比赛结束(谁获胜)和比赛高潮(谁进球最多/比赛中最激动人心的时刻)来判断。

 

设计应用

图片

▲ 在夜晚非常饥饿的时候,我们使用订餐App选择食物时,却被告知付款失败。这时候App界面设计的再好看也无关紧要,订餐失败就是从这次体验中收获的结果。

 


 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》用户体验设计法则应该怎么用?来看看这些应用原理!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


Figma自动布局赋能B端设计

高劲

排版布局可以响应式的随设计师对内容的增删改而自动调整,无需手动修改徒增成本,进而大大提升工作效率。

交互规范制定指南

高劲

浏览了许多关于“设计规范”的文章,发现很多都是在针对通用流程和视觉方面在整理,关于交互层面的内容比较少。基于此,结合最近项目中沉淀的实际案例,以及参考了不少行业通用的设计规范,总结了一篇关于搭建交互规范的流程、框架、要点。希望能够帮助大家更好的沉淀交互规范。

B端产品设计规范

高劲

整理了一套B端设计规范,包括色彩规范、字体规范、图标规范、布局栅格、组件规范。

用户体验度量模型

高劲

本文介绍了几个关于用户体验度量的模型,UES模型、适合网站的 PLUSE、谷歌的 HEART、蚂蚁的 PTECH和GSM模型,它们各有切入点,也各有其适应场景。对各个模型的概念和它们相应的维度做了详细的介绍。

产品体验增长中的3个核心招式

高劲

本文将以「产品与用户之间的信任」为出发点,从产品体验的角度,对比产品体验层面的差异化,为大家提供设计思路,助力产品数据的增长,设计出既好看又好用的产品界面。

开启新时代的响应式网页设计

鹤鹤

///

它是如何开始的-固定屏幕

在千禧年来临之前,我们首先开始在单一视图屏幕中进行UI设计,这类屏幕在当时最流行的尺寸是640x480。大多数时候,我们甚至没有考虑让屏幕滚动,而是在特定区域或文本局部区块中设置了内部滚动条。毋庸置疑,当时的大部分网页也是用Flash或HTML创建的,并带有用于布局的表格。那是在智能手机出现之前,随着事物的发展,我们经历了第一个向“响应式”设计的根本转变。我们已经走了很长一段路,CSS已得到长足的发展,“响应式”网页设计从2010年开始才真正获得了专有工具。

图表来源: https://www.webdesignmuseum.org/web-design-history


///

它现在怎么样-响应式设计

随着CSS3的发布,我们获得了对“媒体查询”(Media Queries)的访问权限(译者注:随着移动互联网的兴起,我们需要适配多种移动端设备,这就需要用到Media Queries,即“媒体查询”),此后不久,Ethan Marcotte在2009年底创造了“响应式设计”一词。十多年来,我们一直使用“响应式网页设计” (RWD) 创建网页布局,作为一种网页设计方法,仅需基于一种屏幕尺寸进行设计,“响应式”使我们的设计能够适配各种设备和屏幕尺寸。

在早期,当移动电话还不兼容媒体查询或JavaScript时,“移动优先”和”渐进式增强”的概念就成为了非常流行的方法,当时有很多CSS完全不受支持。

用我们今天的话来说响应式设计,我们认为页面的布局要适配整个浏览器、屏幕大小和那些需要投射到整个布局上的限制。当需要设计从桌面端调整为移动设备屏幕所需的尺寸时,我们使用“媒体查询”来更改整个页面布局。

 

///

它的未来是什么-组件驱动

很快,使用这种“响应式”设计方法可能会被认为与使用表格进行页面布局一样过时—就像我们在90年代所做的那样。

我们通过基于viewport(视口)的“媒体查询”获得了许多强大的工具,但我们也缺乏很多适配的可能性,因为“媒体查询”是一个适用于整个页面的通用解决方案,并且对每个用户来说都一样。我们缺乏响应“用户需求”的能力,也缺乏将“响应式”样式注入“组件”本身的能力。


当我们谈到组件时,这里指的是页面上的“元素”,这些元素可以由其它“元素”的集合组成。例如卡片、横划卡或推荐模块之类的UI内容,每个“块”都由各种更小的“构建块”组成。这些组件拼凑在一起构成我们的网页。我们可以使用 global viewport information(全局视口信息)来设置这些组件,但它们仍然无法拥有自己的风格。当我们的设计系统是基于“组件”的而不是基于“页面”的时,这使得它变得更加困难。

好消息是这个生态系统正在发生变化,而且它正在迅速变化,这需要我们进行一些思维转变:考虑如何设计和定义组件样式以及它们如何适应周围环境。

CSS正在不断发展,“响应式”网页设计的新时代即将到来。从目前的情况来看,自从我们第一次引入 “响应式网页设计” (RWD) 以来,仅仅10多年的时间,这个生态系统已经准备好迎接CSS发生一些相当大的改变。


让我们深入研究一下可以期待哪些类型的变化,这会如何改变我们的设计方法,以及我们如何考虑界面设计。

 

///

用户能够设置基于个人偏好的“媒体查询”

简单来说,我们可以期待新的基于偏好的“媒体查询”来帮助我们更好地“响应”用户。它们将使我们能够根据用户自己的特定偏好或需求来设定网页样式。这将使我们能够根据用户的体验偏好来调整用户体验。

这绝不是一个完整的列表,但能给你一些想法,这些基于偏好的“媒体查询”可能包括:

这些将帮助我们构建更具活力和个性化的网页体验,专门满足我们用户的专属需求,尤其是那些希望网站易于访问的用户。更进一步说,这些基于偏好的“媒体查询“尊重任何用户已经在操作系统设置的偏好。举个例子,当用户的操作系统偏好设定为“减少动效”时,他们很可能不喜欢你页面上的超级华丽的介绍、加载或飞入的动画动效。我们应先尊重他们的偏好,并为其他人提供“动效增强”的体验。

另一个流行的媒体查询是@prefers-color-scheme(配色偏好设定),它允许我们根据用户的偏好和操作系统中的设置将我们的设计更改为“亮色模式”或“暗色模式”。这不依赖于用户需要手动来更改“暗色模式”,它会自动发生。

///

“容器查询”为你的设计系统注入新的生命力

CSS 中最令人兴奋的新兴领域之一是“容器查询”(container queries),通常也称为“元素查询”。从基于“页面”的“响应式”设计到基于“容器”的“响应式”设计的转变对发展“设计系统”的作用价值不容低估,尽管今天使用它并不安全,但重要的是要了解其发展方向。

简而言之,“容器查询”将允许我们基于“父级容器”而不是整个页面来设置规则。这意味着任何组件都更加独立,与现代设计系统保持一致,真正成为“即插即用”模块,可以转移到任何页面或布局,而且无需根据新环境重新考虑所有内容。

“容器查询”为我们如何规划、设计和构建特定组件提供了一种更加动态的方法,因为组件本身拥有它的响应信息。

甚至Ethan Marcotte自己也表达了为什么“容器查询”如此重要,我们应该研究一下。

 

///

考虑各种形态因素

由于各种“形态因素”(form factors)的变化和扩展,例如新的屏幕类型,可折叠屏,我们需要“媒体查询”来考虑这些场景。在这里提到的所有内容中,请记住,这是最具实验性的,并且只是一项正在进行的工作,仍在尝试解决我们可能遇到的任何复杂问题,同时考虑未来“形体因素”可能会如何发展。

在可折叠屏场景中,原型中有一些“媒体查询”可以让你定位屏幕跨度以及我们如何让内容根据新环境进行适配。例如,你可以在一个屏幕上放置一个收起的侧边栏(或菜单),并允许内容在另一个屏幕上展开并随页面滚动。

 

///

为什么我们需要它?

我知道你在想什么,我们已经从事网页设计并使用“响应式”来进行网页设计10余年了。我们对其相当满意,那么为什么要改变呢?如果我们真的以终局视角来看响应式设计,那么它就是关于个人用户的用户体验设计。我们正朝着一个与每一位个体用户高度相关的时代迈进。我们的网页体验应该去适应用户的需求偏好。随着设计系统的发展以及我们如何创建更便携的网页,诸如“容器查询”之类的工具将变得非常有意义。

配图:CSS 将基于各个层级来确定用户的最佳体验

 

考虑到这一点,这意味着我们现在可以使用基于页面的媒体查(包括跨越屏幕的细微差别)来设计宏观布局;使用容器查询的组件设计微观布局;使用基于用户偏好的媒体查询,根据用户独特的偏好和需求定制用户体验。

 

对于新的响应式设计,有许多新概念正在被原型化和概念化-请看下面的延伸阅读。所有这些协同工作的方式需要我们从根本上转变我们对设计和用户独特体验的看法。我们需要更加适应这样一个事实:即我们的设计不是静态的,不仅在布局上,还有在用户可获得的体验中,我们需要学会在这种模糊性中做出计划。网页和设计的未来变得越来越复杂,我们需要适应和挑战自己,理解“新响应式”体验的意义。

 

文章来源:站酷   作者:MEUX
分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

延迟增强——视频信息流广告的提转秘诀

鹤鹤

伴随短视频平台的崛起,移动互联网的主流内容消费形态向短视频视听语言转变,视频信息流广告的时代已经来临。如何通过设计提升转化,是视频信息流广告所面临的挑战。


为了提升广告转化效果,我们结合实际项目,通过大量的实验与思考,梳理并总结了一套适用于视频信息流广告的转化组件呈现原则,我们将其命名为“延迟增强”。涵盖了沉浸式竖视频流、图文混合信息流、横视频列表流等各类常见信息流场景。


///

延迟增强是什么?


视频信息流广告有三要素:内容、框架、转化组件。其中广告内容来源于广告主投放的物料,基础框架需对齐宿主保持一致性,所以仅有承载转化信息和行为的转化组件,是可设计部分。 


“延迟增强”就是针对“转化组件”的一种伴随视频内容分阶段/渐进式的呈现方式。它由消费者决策时的理想心理动线,结合广告行为推导得出,并经过实验验证了其对于转化提升的有效性。


“延迟增强”包括两个阶段:1.广告展现初始阶段,延迟展现广告意图,通过内容吸引潜在用户;2.广告内容逐步呈现阶段,转化组件渐进式增强,辅以增益信息,不断强化,引导转化行为。


它指导了转化组件从“呈现”到“增强”的全流程,从时机(出现&增强时机)/引导(动效&互动引导)/前置(信息&转化前置)三个部分,帮助提升广告转化效果



///

时机-延迟增强如何呈现?


转化组件的呈现时机包含“何时展现”与“何时增强”两个部分,前者帮助增加广告接收率,后者提升广告转化率。


01/ 出现时机:

延迟展现广告意图,可以提升广告卖点的展现机率


互联网的快速发展使得受众被动卷入爆炸式增长的资讯信息体中,广告借助这一媒介迅速发展,但也因为部分商业广告的过度宣传与其降低用户信息获取便捷性的本质,不可避免的使受众产生了心理上的逆反与抵触情绪,从源头拒绝了广告信息。

 

所以对广告来说,在广告展现初始,延迟展现广告意图,融入内容,可以缓解受众的抵触情绪,提升广告卖点的展现机率



02/ 增强时机:

通过用户行为和视频特征动态决定增强时机,可以有效提升转化


对广告来说,搭配广告内容进行增强,通过内容积累购买欲/信任感,然后通过阶段性的增强来提示操作,对比一成不变能起到更好的转化效果。


我们首先尝试了程序化的增强时机,在不增加技术成本的前提下,根据历史经验,面向不同的广告均采用固定时段的阶段性增强


但不同的广告物料内容不同,不同的用户偏好也不同,固定的增强时机并不能很好的满足所有广告需求。所以在技术能力可以承载的时候,我们采用了动态时机策略,通过用户行为和视频特征动态决定增强时机,在程序化增强时机之后,再次实现了转化提升


undefined


///

引导-延迟增强如何引导转化行为?


转化组件如何引导转化,则可分为基础的视觉引导与进阶的互动引导,前者帮助抢夺视觉注意力,后者则能够在互动体验中植入部分帮助决策的“小心思”。

 

01/ 视觉引导:

适当增加视觉吸引点,可以有效引导点击

 

延迟增强需要通过阶段性的增强来提示操作,而如何增强能有效吸引注意则需要琢磨,已有实验表明转化按钮增加扫光动效与智能取色,能有效吸引注意,引导点击,对转化提升有良好效果



02/ 互动引导:

让用户主动选择,可以增加广告曝光,辅助转化决策

 

互联网产品设计对于用户交互体验的追求越发极致,如影视行业走向可交互网剧,本质上是从用户接收转变为用户主动参与,用户本身对于获得优质体验的意识逐渐觉醒。商业化产品也需要紧跟“体验”与“互动”,将广告变为互动体验或具备使用价值的信息,让用户从被动浏览到主动参与,掌握对广告的选择权

 

以互动投票为例,我们通过用户与用户之间的观点表达,以投票选择的形式诱发群体性选择,引起好奇心与同侪压力

 

若用户选择符合群体选择,则带来群体性背书,增强信任感;若用户选择不符合群体选择,基于从众心理,用户极有可能对群体选择产生好奇,从而浏览两种选项的内容,有效的增加了品牌曝光。


undefined


///

前置-延迟增强如何帮助转化达成?

 

转化组件的前置主要包含信息前置与转化前置,前者辅助转化决策,后者帮助便捷操作,更好更快的完成转化。


01/ 信息前置:

增加增益信息或前置落地页信息,可以辅助转化决策


购买/转化一定是需要足够的信息积累信任感才能达成的,在前卡适当的增加卖点信息能够更好的帮助用户决策。针对下载类广告可增加评分与星级,二电类广告可以增加价格信息,甚至可以前置优惠劵、图片banner等信息,均能实现转化的正向提升


undefined


02/ 转化前置:

缩短转化路径,可以帮助转化行为更便捷的达成


在信任感积累与阶段性的增强都达成的时候,在当前转化对比跳转落地页再进行转化,链路更短,用户流失概率更小。比起实验尝试,更像是延迟增强的基础能力配置。


首先,我们针对表单/咨询/电话/安卓下载都进行了转化前置,具有用户明确意向的按钮点击会直接在当前进行反馈



除了直接将操作前置外,针对不同细分场景的需求,还可以通过交互形态的优化在感官上缩短路径

 

这里以百度的视频MAX广告为例,我们针对重落地页的商家,将MAX首屏(视频页)与H5落地页的关系变拼接结构为双层结构,通过浮层面板承载落地页,延时自动弹出,强引导下方内容,激发用户上滑浏览兴趣,解决了落地页隐藏较深,转化链路过长的问题,同时增加了落地页曝光从而提升转化。



///
结语


在视频信息流领域中,延迟增强仍然可以继续深挖,作为“基础建设”承载未来更多细分场景下的互动化、个性化的“精神需求”。

 

同时延迟增强设计方法也可以横向复用于广告前卡、落地页、IM工具等各种需要在合适时机抓取用户注意的场景中,去追求点击或者转化的提升。甚至在未来可以尝试其在长视频或图文场景中的应用。

文章来源:站酷   作者:MEUX
分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

互联网金融产品——适老化设计分析

鹤鹤

虽然,三类互联网老年人用户模型之间各有差异,但我们发现他们最大的共性的特点在于具有开放的心态积极地接受更多理财新可能,因此我们也应该尽可能从交互视觉的角度或从产品功能的角度为老年群体提供更多样化的互联网理财参与方式,并且降低参与的门槛。因此我们得到以下适老化改造的策略方向:

(1)产品内容功能上充分考虑老年人对理财产品的认知以及期待

(2)交互视觉上充分考虑老年人感官、心理、认知上的特性

(3)技术规范上充分考虑如何利用技术便利用户操作以及产品体验设计的最大化落地



改进分析


根据过往产品设计经验,我们提出线上金融服务设计的三大原则:

操控感:所见的是什么,刚刚干了什么,现在在干什么,接下来怎么做,可达成什么目标。

无障碍:适用于任何人群

安全感:资产保障安全感、使用体验安全感

基于以上设计原则,结合本次适老化改造的策略方向,我们得到以下具体改进方向。



1. 设计原则拆解


操控感


能懂会用,可以有效减少老年人在使用线上产品时焦虑感和挫败感。让老年人知道看到的是什么,正在做什么,接下来要这么做,可以达成什么目标,这是在使用线上产品进行一切操作的基础条件。


(1)简洁的界面

大字体、大图标、界面简洁;老年人因其生理结构特征,很难轻易识别一些较小的文字、图形;因此在界面设计的适老化改进上,需要简化信息布局、放大图形文字;


(2)清晰的导航

产品中的导航可以帮助用户快速定位当前所在位置,刚刚在哪里,未来会到哪里去。清晰的导航有以下三大特点:

连贯性:页面跳转前后需有继承关系,不光是文字,字体、颜色等视觉元素也可以加强关系

扁平化:尽量减少跳转避免出现多层级,除了操作复杂之外,客户使用时的记忆成本也较高

易记忆:无论导航的位置、描述、视觉元素,都应在用户心智中稳定固化,凭借记忆可以快速定位;

图11:支付宝(关怀版)


(3)明确的语义

所有描述、状态、操作尽量唯一且易于理解,符合老年人的基础认知;


(4)及时地反馈

任何用户操作行为都应有相应结果,对于极其敏感易焦虑的老年人群体来说更为重要,如加载、成功、失败、异常情况等,且反馈内容应明确可被理解,即在各项流程结束后应给出含有明确反馈的流程结果页面;对于学习和理解能力较弱的老年人而言,及时地反馈显得更为重要;


(5)顺畅的流程

复杂业务流程的任务对于老年人来说挑战最大,失败率也最高。除了与本身流程复杂,以及上述的语义不清、反馈不及时等可用性问题有关之外,流程体验的闭环对于老年人群体而言也是极其重要。


无障碍


(1)辅助性功能

由于老年人的视力与协调能力开始下降,很难进行很复杂的交互动作。在线下场景中,老年人办理业务时会有银行工作人员在身边进行辅助。同样,在老年人使用APP时,产品也应起到辅助作用。常见做法有,线上客服、语音输入辅助、使用说明和操作示范等;文本输入提示,语音输入等无障碍功能,用于提升方言识别能力,方便不会普通话的老年人使用智能设备;对智能客服入口的设置也不仅仅放在首页,应辐射到尽可能多的页面。

图12:工商银行(幸福生活版)、平安银行(大字版)、中信银行(幸福+版)人工客服页


(2)低密度信息

对于老年人而言,即便是页面内信息的层级非常清晰,高密度的信息仍会增加记忆负荷。因此在针对老年人的产品设计中,不应过度追求页面效率,适当去掉形容性、专业性、技术性、营销性、装饰性的信息,将有助于信息降噪。


(3)简化操作

降低老年人的输入成本,例如合理规划验证码出现机制,身份证信息、银行卡号的图像识别、自动保存常用联系人等。


(4)产品适用性

市场上某些头部的金融相关APP已经推出老年版本,如支付宝的关怀版,该版本不仅是字体、按钮更大,更重要的是通过不同的信息功能架构,将不同年龄层的用户客群做了产品注意力的重点区分,强调不同类型用户的使用的场景不同,有助于将用户的注意力锁定在与其相关的业务上,提升用户完成任务的效率。


安全感


(1)资产保障安全感

近些年有关老年人的金融诈骗层出不穷、人人自危,除了实际保障资产安全的措施之外,在服务设计层面上也需要保障和增强用户安全感受。如在某些特定场景中,转账、汇款时,及时告知用户可能存在的风险,大额时需要子女辅助验证等;


(2)使用体验安全感

在产品设计中需要考虑防错和容错机制,这有助于减少问题的发生,消除老年人使用产品时的恐惧感,让用户放心安全的使用产品。例如输入金额时明确显示单位,金融产品页面强化显示风险与收益,大额需要二次确认。

根据以上改进方向和原则,下面对目前产品的部分功能模块和非功能模块分别进行梳理和优化,产出初步优化方案和建议,并对其中部分具体功能的实现做技术分析和方案要求。




2. 具体功能优化分析


2.1 基金账户类

涉及开户流程、风险测评问卷、资料变更等板块。需要适配改进的地方包括以下几个方面:

(1)证件上传

开户证件OCR识别和上传,对二代身份证的支持较为完备,对一代身份证和其他证件类型的支持不到位。老年人群体存在持一代身份证的可能性;

(2)开户绑卡

开户绑定银行卡,基金公司支付渠道仅支持银联标志的银行借记卡,对存折等非借记卡不支持;

(3)预留信息

央行反洗钱、CRS等合规要求对开户资料预留信息字段作出了明确规定,其中部分字段不容易让人理解和获取,如账户实控人、电子邮箱等;

(4)风评问卷

关于风评问卷,目前题目数量较多,建议减少至5道题左右;

(5)密码找回

增加多种找回密码的途径,如手机号、电子邮箱、手机短信。


2.2 基金交易类


涉及申购、赎回、专户、分红方式、定投等功能,需要适配改进的地方包括以下几个方面:

(1)数字输入

交易密码金额等数字输入场景,建议尽量调起九宫格数字键盘,字号较大且清晰;


(2)风险提示

购买环节,按销售适当性要求,醒目提示基金风险;

(3)限额

基金申购支付方式,适当提高支付限额,或引导汇款转账的方式,满足大额申购场景。


2.3 查询类


(1)在线客服

建议增加语音输入和播报功能,同时醒目提示人工客服点击按钮;

(2)图表查看

基金列表和详情页等页面中包含图表的,建议增加竖屏和横屏切换按钮,增加图表易读性;

(3)版本更新

新版本发布时,建议增加新功能示意遮罩,指引客户如何使用新功能。



3. 非功能优化分析


(1)色彩

用色简洁干净、对比柔和。减少复杂颜色、渐变颜色、极端饱和度颜色的使用,尽量使用纯色、基础渐变、稍微明亮的颜色作为图标用色,关键互动界面避免使用蓝色。

图12:工商银行(幸福生活版)、平安银行(大字版)、中信银行(幸福+版)功能列表页


(2)文字

字体应使用黑体类型字体,且允许用户自行调节或匹配手机系统字号,但最小字号不宜低于16px,多行文字显示时行间距应为1.5倍字号大小,减少大量文字内容带来的压抑感;文字颜色使用不同透明度的黑色进行信息层级的区分,重要内容使用1~2种辅助性彩色作突出;


(3)图标

图标设计简洁清晰,且需要有文字说明,避免使用过于抽象表意不明确的复杂图标;


(4)布局

结合对老年人的认知及操作习惯,通过信息类型、展示频率、重要性等方式进行归类,形成合理的布局结构,通过这种行为塑造方式,让用户快速摸清产品形态;

如下图两家银行首页布局由资产查看、常用功能金刚区、轮播图、服务渠道、理财产品构成;在底部导航栏上只选择展示两个一级页面以及突出显示的语音助手入口。

图13:工商银行(幸福生活版)、中信银行(幸福+版)首页


(5)动效

有效的动画可以给页面带来生命感,但如果滥用动效不仅会分散用户注意力,严重的话对某些用户来说可能是致命的(光敏性癫痫的临床诱因之一就是闪光图像的刺激);

为了避免给特殊人群造成困扰,设计师考虑加入动效时应注意禁止使用高频闪动、运动夸张、视差较大的动效,并且在同一界面也应控制运动元素数量,避免对用户的阅览和判断产生困扰。


(6)无广告

由于老年人对事物的认知和理解能力较慢,过多的广告会严重分散用户注意力,甚至导致误操作造成经济损失,尤其一些具有强误导性的开屏广告、营销活动广告等;建议减少广告数量、杜绝恶意引导广告,并针对广告投放需设立专门的审查人员进行合规审查。



4. 技术规范要求


(1)按钮热区

对于文字按钮需要保留较大的间距作为按钮热区,避免老年人用户操作时误触;


(2)版本切换

新增版本切换功能,建议将按钮直接展示于首页右上角,且要有文字进行图形说明,便于老年人用户理解且能直接进行操作;

现有APP采用架构为hybird app,基本的开发模式为:原生壳子+H5(vue),因此针对版本切换功能需要对APP架构进行调整,解决方案为对各项版本进行独立开发或对原版本进行内置模块开发。

其中,独立版本开发优点为各版本独立、UI独立、历史包袱少;相应地,也提高了开发和维护成本;一些情况下多版本入口也会使用户在使用上产生困惑;

内置模块开发,以模块形式嵌入原生系统中。其优点为成本相对较低,使用入口统一,缺点为历史包袱过多、开发自由度较低、改造过程也受老系统所制约。


(3)语音识别

考虑到用户群体对于文字输入和阅读的能力欠佳,针对查询功能、键盘(数字)输入、智能助手等功能,嵌入语音识别、语音输入、语音播报等技术,优化老年人用户操作体验。




结论


在互联网日渐发达、金融逐步数字化的今天,越来越多的老年人群体尝试着加入我们的步伐,他们构成了快速增长且日益富裕的目标受众,但现实是,一些不恰当的设计让他们望而却步,无法享受科技能够带给人类的利益;为此,我们需要关注和反省,我们所创造的、服务于人类的产品,也应该有能力来适应人类衰老的过程,而创造这项能力,也已经成为了肩负在我们身上的责任。

文章来源:站酷   作者:陈皮红豆沙

分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档