首页

月活超10亿的微信,是如何做好用户体验的

涛涛

微信是一种生活方式。作为月活超 10 亿的国民级产品,它有着独特的设计之道。

同时,微信也是互联网界的一个异类,张小龙曾在微信公开课上回应道:「我们只是守住了做一个好产品的底线,居然就与众不同了」。

好产品自然是体验和价值至上。下面,我就为大家解读微信的用户体验设计。

二次确认的微创新

先从最简单的二次确认讲起。

微信针对首页消息和收藏列表的删除操作,做了二次确认的微创新。像同类 IM 聊天工具,如 iOS 短信、Facebook Messenger、飞聊等等,二次确认都是采用底部系统弹窗。这样做,从程序架构的角度来看兼容性和通用性更强。

而从体验设计的角度来看,则刚好相反,因为从第一次删除操作,到第二次确认系统弹窗。之间的目标距离太长,耗时也就变长了。根据菲茨定律(Fitts’ Law),获取目标的时间取决于目标的距离和大小。这意味着提升交互的效率,不仅需要减少距离,同时还要增加目标大小。

△ 收藏列表

回过头看来微信,就是这样设计的。二次确认是在第一次的基础上延展,距离几乎为 0,同时,目标按钮的宽度也增加了几倍,大大地提升了交互效率。

互动体验广告

其实,商业和用户体验往往是有冲突的。而微信广告很好的平衡了这一点。

通过丰富有趣的互动体验式创意,或画圆、或画方、或画爱心,吸引大家主动参与互动。

1. 开放首条评论

另外,首条评论功能让品牌像朋友一样与大家对话,利用明星效应,从而带动更多人参与评论,有效提升评论区活跃度和广告点击率。

△ 朋友圈刘雯广告

以刘雯发布的朋友圈广告为例,大表姐把款的 vivo X30 系列手机交到你手中,并在首条评论中邀请你帮她拍照。数十万用户积极回复刘雯,评论率高于历史均值 40 倍+,「你这么漂亮怎么拍都好看」、「天天给你拍」,大表姐的魅力折服了众多用户,有效提升了品牌的亲和力与好感度。

2. 打开仪式 · 最强震动级别

在交互方面,如果你是 iPhone 用户,可以体验到 Taptic Engine 线性震动马达,通常力度由轻到重分别是 Light、Medium、Heavy。在打开广告的那一刻,它给你的是最强震动级别,满满的仪式感!整个微信应该找不到第二个这样级别的震动了。

提供反馈信息

再举一个震动的例子,当你的好友拍摄了时刻视频后,可以看到 TA 的头像右上角多了一个蓝色的小圈圈,双击它就能看到好友的时刻视频了。

当然,你双击没有拍摄时刻视频的好友,TA 的头像会左右晃动,并且会有 Failure 的震动反馈,动画和震动节奏完美匹配,这个体验就像你解锁 iPhone 输错密码时的震动是一样的。

△ 没有时刻视频时的反馈

我们做产品设计时也一样,对于用户的操作,应当给予清晰明了的反馈,帮助用户更好地理解信息。

跨平台能力

微信的起步阶段是基于手机来做 App,不基于 PC 来做,PC 端只是辅助,而现在,它的跨平台能力也逐渐增强。

一周前,微信 PC 版「微信测试版 for Windows」发布了 2.9.0 的内测,同步了移动端的新功能,主要有两点:

支持打开小程序,也可以玩「贪吃蛇」「跳一跳」等小游戏了。

△ Windows 微信客户端

另外,此前的微信 PC 端只支持引用文字消息,也没有达到手机上引用消息的视觉效果。此次更新中,还新增了很多支持的应用类型,包括但不限于图片/视频、表情包、公众号链接、小程序、文件等。

如此看来,Mac 端的更新也不远了,可以期待一下。

语音实时翻译

最近的微信更新了,除了引入深色模式之外。值得一提的是,语音消息的交互体验得到了优化,上滑转文字更方便了。

此前的方式是按住说话,滑到转文字按钮,说完松开手指后,才把语音解析成文字。

现在交互则少了一步操作,达到了实时边说边转文字的功能。别小看这一步界面上的优化,它背后代表的是微信语音识别能力上的技术突破。

△ 语音实时转文字

锚点定位

微信有很多隐性和显性的锚点,隐性锚点就比如你打开的这篇文章,关闭后,再重新点进来,还是显示上次阅读的位置。

△ 订阅号列表

显性的锚点就比如上面这个:当你刷公众号列表时候,如果有新文章更新,标题栏会出现一个锚点按钮,点击它让你快速回到顶部,方便查看文章。

△ 朋友圈「跳到还没看的位置」

基于此,在新版微信朋友圈中,增加了一个「跳到还没看的位置」。很多信息流产品是往下刷内容,直到给你一个分界线提示:下面内容已经看过了。而微信这是一个逆向操作,我认为这个功能还是很有必要的,因为经常会有刷朋友圈刷到一半聊天退出去,当回来查看朋友圈时,需要重新拉到底部,费时费力。

自然的语音听筒播放

《在你身边,为你设计》一书中有提到语音听筒播放的优化。大家都知道,手机带有距离感应器,在感应到耳边贴近时,屏幕会关闭以节省电力,并且避免由于耳朵与屏幕的触碰导致的误操作。

微信在聊天界面中,也启用了距离感应,以实现手机贴近耳边时,自动将语音从扬声器切换到听筒进行播放,这样你可以用最自然的姿势来听语音,这是一个很好的体验。

但要完美地实现这个体验,就需要解决距离感应器的时延问题。播放语音时,如果你非常迅速地将手机移至耳边,这时候距离感应器并不会同样迅速地对这个动作产生反馈。大约在延迟了 300 毫秒后,感应器发出信号,微信将 iPhone 的屏幕关闭。而在这个时间内,你的耳廓极有可能已经触碰到了 iPhone 的屏幕上。触碰的位置大部分时候是左上角的返回按钮区域。于是很容易出现手机移至耳边,语音戛然而止。

△ 延时响应判断流程图

为了解决这个问题,微信设计了一个解决办法:在响应返回操作时,先等待 500 毫秒,这时候如果侦听到距离感应器有发出信号,则认为是贴耳的动作,此情况下不执行返回操作,如上图所示。而 500 毫秒的延时大部分时候你是不会感知到的。这一解决办法极大降低了贴耳时候的误操作。

总结

在微信的产品设计中,我们看到了交互的细微迭代和背后的技术突破,我们看到了商业创意与用户体验的平衡。给用户带来希望,让创造者体现价值,这就是微信的设计之道。

文章来源:优设    作者:洋爷

减少认知过载获得更好的用户体验

鹤鹤

好的用户体验是不会让用户注意到并毫无察觉的一种体验。表面上看似非常简单,但实际上设计师已经做出了非常多的设计思考。用户越少的去思考界面,用户就越能专注他们要完成的目标。在浏览页面时,用户的注意力不应该停留在界面和设计上,他们更应该关注的是如何达成他们的目的。所以作为设计师的首要工作就是通过事先清除障碍,为用户提供直达目标的途径。


“通常,飞速行驶的货车不可能轻松地停下来。因为运用更多的动能去改变运动状态是非常困难的。与其强迫人们从他们的主任务上转移注意力,不如直接带他们去他们想去的地方。”

——Luke Wroblewski,谷歌产品总监


换个思路来看。复杂和混乱的界面会迫使用户去寻找解决问题的方法,而通常情况下,这些方法并不是一目了然的。用户会因为过多的选项、界面、导航等感到困惑,用户可能会在思考过程中感到不知所措。即便是很短暂的停顿,也足以让用户离开。

这种过度的思考就被称为认知过载,在这篇文章里,我们将为你解释如何避免认知过载。首先,我们需要明白我们大脑中存在过载风险的原因。

Image title

认知超负荷的科学根源
认知过载是指工作记忆中脑力处理的信息总量过多。当你的工作记忆接收到的信息超出其可以轻松处理的信息时,就会发生认知过载,从而产生挫败感。
但这究竟意味着什么?工作记忆到底是什么?针对这些我们又应该怎样进行设计呢?那就让我们先来了解一下认知负荷理论的起源吧。


JOHN SWELLER和认知负荷理论
虽然对认知的研究可以追溯到几个世纪,但直到20世纪80年代,澳大利亚教育心理学家约翰·瑞勒才将这项研究应用于教学设计当中。Sweller试图为每一种类型的学习者找出最适合他们的学习方法,让他们可以记住他们学到的所有知识。换句话说,怎样的课程设计才是最佳的呢?
Sweller在1988年出版了“ 认知负荷理论,学习难度和教学设计 ”,这使他的研究工作达到新的高峰,于1994年重新修改并重新发表。他的研究中运用了数据组织结构中的图表数据库,讲述了有效和无效的教学方法,而他对于工作记忆负荷极限的研究结果才是设计师们找到的最有用内容。
Sweller的研究在许多方面扩展了George Miller的信息加工理论。George Miller是一位认知心理学家和语言学家,他在20世纪50年代测试出短期记忆的极限。Miller的研究在于数字化设计,尤其是分块技术方面,这将在后面讨论。另外,Miller还创作了论文“ The Magical Number Seven, Plus orMinus Two“,这个理论促使许多设计师将菜单项的数量限制在5和9之间。
虽然这些理论最初是针对教育领域的,但它们同样适用于用户体验(UX)设计。


工作记忆
如果你每次打开冰箱,都必须回答一个像谜语一样的问题,“什么东西小的时候四只脚走路,长大了以后两只脚,而老了以后有三只脚?”这是一个老段子。但是,根据认知负荷理论,使用这种让人无奈的用户体验设计会让用户产生挫败感。

Image title

要理解认知负荷理论,你必须要了解什么是工作记忆,大脑在短时间内用于完成任务的过程便是工作记忆。工作记忆必须借助外部刺激和短期记忆,并在需要时从长期记忆中抽取。通俗一点说,工作记忆相当于计算机内存,而长期记忆则相当于硬盘驱动器。
工作记忆和短期记忆通常可以互换使用,但它们略有不同。工作记忆是处理信息的过程,而短期记忆更像是一个信息的便签本,它虽然重要,但却没有长期记忆重要。
让我们看看这篇文章是如何解释这些差异的。在你阅读的时候,你可能会遇到一个用蓝色字体书写的陌生概念。你的工作记忆需要知道蓝色文本是什么意思,才能够理解文章更深层的含义。你的长期记忆知道蓝色文本表示链接,因此你的工作记忆知道点击该链可以获得更多信息。与此同时,你的短期记忆会记住你在文章中的位置,这样当你从外部页面返回时你不会迷失,但到了第二天早上,该位置就会被遗忘掉。

Image title

设计中的应用
Steve Krug(史蒂夫·克鲁格)是一位很有影响力的作家,他在网页设计中极力推崇认知负荷理论。他的书《Don’t make me think》被许多设计师认为是有巨大影响力的著作。
书中记录了许多宝贵的经验,下面就列举一些的:
1、每一个页面都要清晰明了。
2、用户倾向于“满意” - 也就是说,采取一个最简单的解决方案来解决他们的问题,而不是最好的解决方案。此外,作为习惯的生物,用户将一遍又一遍地使用相同的方法解决问题,而不会刻意寻找一个更好的选择。
3、当新用户可以熟练使用该系统来实现他们的目标时,系统的可用性就足够了。
4、用户使用网络的绝大部分是想要节省时间。因此,用户的行为通常会像鲨鱼一样“保持移动,否则就会死亡”。
5、后退按钮是Web浏览器最常用的功能。
6、屏幕上显示的主页按钮即使从来不被用户使用,但也能让用户感到放心。
总之,用户在浏览网站过程中哪怕是一瞬间的思考,也会对他们的工作记忆造成负担。例如 “这个可以点击吗?“首页按钮在哪儿?”和“我怎么保存?”等等问题,都会不同程度破坏用户体验。


认知超负荷最常见的原因
许多设计元素都有可能对用户的大脑造成超负荷,外界环境中会有更多的因素它们超出了设计师的控制范围。例如:一个用户浏览网站的同时会担心第二天的工作报告,或者被窗户外装修的噪音所打扰,此时,无论你的网站设计多么简单,这些都会耗尽他们的工作记忆。
我们要知道每个用户的工作记忆能力都不同。随性的用户比那些对每一件小事都无比关注的用户更能专注于你的网站。不经常上网的用户往往比经验丰富的网络用户思考的更多。
虽然我们无法量化所有的认知过载,但我们可以尽量的去避免他的产生,下面,我们对网页设计中最常见的类型以及避免它们的最佳方法进行了分类说明。
1.不必要的操作
用户的每一步操作都会增加他们的认知负担。过多不必要的操作会打断用户的思路或者会让用户抓狂。因为用户的工作记忆都集中在完成特定的目标上,所以多余的操作将迫使用户投入更多的精力,这样就需要更多的工作记忆才能完成任务,所以,那些不必要的操作步骤很考验用户的耐心。
速度和节奏是让认知负荷最小化的基本因素。用户希望以轻快,目的性很强的步骤来完成任务,所以应该提前消除一切延迟。
Image title

用户希望在他们提交邮箱地址之前就知道他们将要进入什么网站,但Touch of Modern却要求用户在使用之前必须进行注册!这个强制而又多余的行为将会吓跑很多的潜在用户。
解决方案
下面这个方法,可以帮助我们找到不必要的操作有哪些:列出用户要完成任务必须要去做的步骤。例如发送电子邮件:
1、点击电子邮件图标。
2、点击“发送到”输入框。
3、输入电子邮件地址。
4、点击“主题”输入框。
5、等等....
现在,重新审视列表并且找出可删减的操作步骤,想到什么了吗?你可以通过将光标一开始就自动定位在“发送到”字段就可以删除步骤2.这将减少用户的操作,虽然很微小,但你消除的每一步对于用户来说都是友好的。

Image title

我们来看看谷歌的主页。光标一开始就在搜索输入框当中,因此用户所要做的就是开始输入文字。这些微小的交互提升了整体的用户体验,所以不要忽视它们。
2.过度刺激
杂乱无章的页面会分散用户的注意力,使用户无法专注他们想要完成的目标。就像有好几个人同时与你交谈时你会很难集中注意力,当页面上太多的图片、动画、图标、广告、文本类型和鲜艳的颜色夺取你的注意时,就会很难集中注意力。
记住,每个人的工作记忆在完成目标的过程中,会因为外界的刺激对每一步工作重新排序。每一次分心,尤其是视觉上的强烈刺激,都需要消耗用户的一部分注意力。

Image title

LINGsCARS就是个极端的例子,你可以看到有强烈对比的颜色和绚丽的动效冲击着人们的感官。在屏幕上,即便在两个不同位置同时进行的动效依然会对用户造成过度刺激。
解决方法
首先,减少一切不必要的元素。仅保留必要的内容通常是最佳的选择,减少加载时间并简化体验。用户更喜欢视觉简单的网站,而不是视觉上复杂的网站。
你还可以进行内容区分以达到平衡的效果。太多相同的内容(比如文字或图像)会让用户感到厌烦。所以,视觉内容要进行合理的组合,图像、视频、信息图表等,能够使页面和谐,并便于用户理解。
影视网站IMDb本可以在很大程度上轻松地只依靠图片进行排版,但它反而运用同量的文字内容来平衡网站页面。

Image title


在抽取出一个页面上必须要展示的元素之后,你应该采用一种让用户立即能够理解的方式组织这些元素。对称或者不对称的信息布局显示都可以很快的被用户所理解,也就是说,用一种方式,尽可能的减少大脑的工作。这样不仅对称和不对称都能让眼睛感觉很舒适,而这样的结构也能让界面交互更容易。
下面来看一下Groupon是如何布置页面的吧。左中是文本类的垂直菜单,右中是一个有特色的冻酸奶交易文本描述,插在文本中间的照片和色块的使用,分分钟创造出一个让人喜爱的沙漏结构。
下面来看看Groupon是如何将它的垂直菜单(中间偏左)和描述冻酸奶的文字(中间偏右)进行布局的吧。大图居中被文字包围着,这样就打造了一个舒适自然的沙漏形状。

Image title

对称不仅仅是在屏幕的两侧应用相同的布局,它是视觉重心和视觉方向的平衡。通过这种方式,非对称页面也能看起来很有组织性,如下图的OTHR所示。

Image title

将你的页面内容精减到只包含简单的和非竞争性的元素,这只是完成了预防过度刺激工作的一半。。不要忘记要以简单的布局呈现这些元素。
3、太多选项(希克定律)
这有点自相矛盾:用户需要更多的选择,但是往往太多的选择会使他们的大脑超负荷。


席克定律(选择困难症)为我们揭示出了一种现象:用户拥有的选择越多,他们做出决定的时间就越长。


作为设计师要去理解库克定律,可以把每个选项看作是明亮的闪光灯,如下所示,太多的闪光灯会过度刺激用户。

Image title

甚至像Rakuten这样的知名网站也会犯类似的错误,因为他们没有真正的理解这个设计原则。给用户需要的而不是给他们认为他们需要的。
解决方案
假如你已经解决了不必要的和多余的选项,你可以将他们分别放入不同的组进行分类,你可以在百货商店的网站上看到很多例子,这些网站拥有广泛的产品选择。
它不一定是太多的选择, 只是一次有太多的选择。如果你可以用隐藏菜单,抽屉和拉出其中的一种方式隐藏一些选项,那么你将获得两全其美的效果,这些超级菜单虽然为用户提供了许多选项,但一定程度上不会给用户带来很大的负担。

Image title

但是,隐藏式的导航栏不利于发现,因此电子商务和新闻等行业的设计人员应该注意。你可以通过放置其他类似产品的链接使缺点最小化(比方说亚马逊的“相关购买”)从而最大限度地减少隐藏菜单的缺点。或者你可以归纳导航菜单的类别,将它们精简为单行导航(如Apple和CNN那样)。

Image title

你还需要注意应该如何组织整个网站的导航。许多与库克定律有关的问题可以通过管理信息架构(IA)来处理,我们将在下面的“难以查找的页面和功能”部分中讨论。
4.太多内容
就像过度刺激和选项过多的问题一样,提供过多的内容会将用户的工作记忆拉向不同的方向。
显然,你希望展现的只是重要的内容,但对于一些网站来说,一切都是重要的,如果你的网站也有非常多的内容,为了避免让用户产生困惑,应该对内容信息进行和里的组织规划。

Image title

Arngren的问题并不是它展示了很多的产品,而是它同时展示了太多的产品。在组织结构上的调整将会给网站带来更好的体验。
解决方案
如上所述,George Miller的解决策略是“分块”,将需要展示的大量内容以可管理的方式组合起来,以便于记忆,电话号码分为国家代码,区号,一组三位数和两组四位数字便于记忆,而一连串的11个数字会很难被记住。
你想在商店主页上放大量产品的图片吗?比起将它们全部罗列出来,不如通过他们的类型将他们分组罗列。Etsy通过根据不同的店铺将产品进行分组展示。

Image title

还有文本组块,文本组块包括简短的自然段,合理利用标题和副标题以及足够的留白。
对于需要大量数据的长表单字段,可以尝试采用多步骤表单。长表单可能会令人生畏,有时会导致用户流失。你可以将表单的信息分在不同的页面里,减少信息过量给用户带来的影响。记得一定要有一个进度标记来让用户知道还剩下多少页。(可以总结为复杂的页面简单化)

Image title

购买机票总是涉及填写大量的信息,其中没有一项是多余的。Virgin Atlantic通过将其分解在多个单页面上填写来改善其繁琐的体验:选择航班,填写乘客信息,输入付款详细信息等。将所有这些信息放在一个长页面上会对用户造成负担,也有可能会放弃购买。
5.模棱两可的界面
认知超负荷的罪魁祸首先就是用户界面混乱。永远不要让用户花费大量的时间来弄清楚他们如何才能完成想要的目标,以及花费时间来弄清楚图标的含义是什么。

Image title

并非所有用户都是经验丰富的,从而可以理解SpeedCrunch这种含义模糊的图标。即使他们能够识别代表Windows系统和Mac OS X系统的符号,那么位于右下角的那两个图标也会让用户迷茫。
解决方案
使用用户已经熟知的视觉提示。用户通常会用他所熟悉的符号来进行操作,即便是在以前从未使用过的网站上也是这样。如果你觉得没有新意,可以融合品牌特征巧妙的结合成为用户所熟悉的形式。Home Depot虽然运用了较为普遍的图标,但同时也赋予了他们品牌独有的橙色。

Image title

标准标签(如“联系人”和“提交”)的按钮比非传统标签(如“地址”或“开始”)更容易识别。通常已知的标签可以提高用户的浏览体验,而不常见的标签会让用户暂停以了解按钮的功能。不要为了个性化而丧失了识别性。
另外,你如果真的需要一个从未见过的图标该怎么办呢?如果这样,可以运用现实生活中的场景展示来让图标进行自我解释,这种做法是连接现实和虚拟的桥梁。例如:早期的互联网先驱选择了一个信封来代表电子邮件,因为信封是邮件系统的明显标志。
此外,要避免含义模糊的图标,特别是可能还会被误认为是其他含义的图标,就像下列Issuu的图标,有些是被人熟知的,但有一些却不是。如果用户必须通过点击这个图标来发现它的功能,这就会中断他们的操作进程。

Image title

任何一个表意不清的图标都应该附带说明,告诉用户怎样操作。新的并且不常见的用户界面,就需要更多的分步教程。例如,Slack就给出了一个完整的视频引导来说明界面的操作流程。

Image title

6.难以查找的页面和功能
即使用户已经拥有他们所需要的一切,但他们可能还是不知道如何去寻找它。这样就会让用户费尽脑力去寻找他们所需要的。作为用户体验中不可或缺的元素,导航应该放在明显的地方,给用户信心去任意浏览网站而不会迷失。

Image title

如果你觉得汉堡包图标不好,那可以在看看Mojo Yogurt,它会要求你将鼠标悬停在左上角的徽标上以显示导航菜单。

Image title

虽然围绕着Logo有个小的动效,但对于整个屏幕的颜色和动效来说,它并不够明显。
解决方案
根据用户的偏好理顺你的信息架构。你的目标用户群可能并不认可你的做法。因此,要想他们学习如何组织网站,卡片分类试验会告诉你你的用户将会如何对页面和话题进行分类。

Image title

如果你还希望通过组合页面和菜单项来消除多余的页面。设计工作室Waaark通过将其工作室的简介,团队成员简介和联系信息这三个页面合并到一个页面来简化他们的导航。

Image title

如果某些功能或特征比其他功能或特征更重要,可以运用视觉手段来吸引他们的注意,增加大小,添加动画以及使用对比色以此来吸引用户的眼球。

Image title

PayPal期望有更多的老用户而不是新用户,并通过设置登录按钮与吸引注意力的白色块背景来迎合前者。
7.内部不一致
假设网站的主页使用标准的蓝色和带下划线的文本来表示链接,但另一个页面仅使用蓝色而没有下划线。当用户浏览其他页面时就会停下来去想,“它没有下划线,这还是个链接么?”他们甚至可能不会再去关心链接,而会被其他页面的不统一分散注意力从而影响整体的用户体验。
要记住,最好的用户体验是不会被用户所察觉的,而像上面这样通常都会被注意到。
总结
1、认知过载是影响工作记忆的因素。当过多的信息阻碍决策和整体经验时,就会发生认知过载。
2、使用不同的内容类型和结构化页面组合,可以避免视觉混乱。
3、隐藏式菜单可以帮助用户一次管理可用选项的数量,但降低了可发现性。
4、“分块”和“步骤”等的方式可以防止认知过载。
5、UI元素和图标应该基于用户现有的认知上,这样他们就不需要过多的思考,新的独特的功能要加上解释说明。
6、围绕用户的实际思考方式构建你的信息架构。卡片分类等可用性测试可以为你的目标群体揭示最直观的导航方案。
7、视觉和功能的不一致,以及打字错误和语法错误,都会分散用户的注意力。
8、尽可能减少冗余。另外,请留意如何最大限度地减少用户操作步骤量和他们必须花费的精力。


文章来源:UI中国

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

别让我思考

鹤鹤

《点石成金:访客至上的网页设计秘笈》在用户体验领域,可以说是一部很经典的书籍,该书于2000年出版第一版,现在已经更新到第三版,自从问世以来可以说已经将近20年了,但一直是备受推崇。这本书主要为我们介绍了产品可用性原则,并用大量的案例来阐述及运用。几年前我读过一次,最近再次重温,准备做一个整理,当做自己的学习记录。


作者史蒂夫·克鲁克(简称Krug先生)是一名备受尊敬的可用性咨询师,他把多年的从业经验,以通俗易懂的方式凝结成此书,并且篇幅简短,虽然作者说两个小时就可以读完,但如果边读边思考的话,两个小时还是不够的,毕竟这是一本工具类书籍,不是小说。本篇文章只是我的一个学习记录,还是非常希望大家能够读一读原著的。



别让我思考,作为Krug可用性第一定律,意味着,设计者应该尽量做到,当看到一个页面时,应该是不言而喻,一目了然。我能明白它是什么,怎样使用它,而不需要花费很多精力进行思考。


举个例子,假如一个你不认识的人,就比如是你隔壁的邻居,对你的网站毫无兴趣,也几乎不知道如何使用,但是他仍然看一眼你的主页,就知道这是干什么的,该怎么用。


比如以下这个网站,这是我从网上随便找的一个网站,之前从来没有听说过,点击链接进入后的第一眼,就是很多关于车的元素,猜测一定是关于车的网站;右下角两个大大的按钮“找新车”“品牌找车”,那这个应该是卖车网站,八九不离十了。先不说下面是多么杂乱不堪,起码第一眼我就可以看出,这个网站是干什么的,该怎么用,这是最基本的。



有可能我们之前访问过一些网站,打开后茫然不知所措,几乎把首页的每个地方都浏览过了,才知道是该怎么操作,或者某些元素看起来像按钮,但是却不能点击,也没有点击失败的提示...总之体验很差。所以当我们创建网站时,就需要去掉这些问号。作为一个用户,永远不能让我花几秒思考,能不能点击的问题。


当我们访问WEB的时候,每个问号都会加重我们的认知负担,把我们的注意力从要完成的任务上拉开。这种干扰也许很轻微,但他们会累积起来,有时候这样的干扰不用太多,就足以让我们抓狂。这样会让我们对网站失去信心。


那么哪些事情是访问者在访问网站时不应该花时间思考的事呢?


例如:

1、我在什么位置?

2、我该从哪里开始?

3、他们把某某放在什么地方了?

4、这个页面上最重要的是什么?

5、为什么他们给他取这个名字?

...

我们在设计网站的前和后,可以把这些作为走查对象审视一下,慢慢的这些习惯就会变成你的潜意识,再次设计网站的时候就会自然而然的把这些因素考虑在内。


不过,有时候,特别是在进行一项崭新的,开拓性的或者非常复杂的页面设计时,也许只能做到自我解释。在一个自我解释的页面中,用户只需要花一点点时间去理解页面的外观,精心选择的名称,页面布局以及少量仔细斟酌过的文字。所以,如果不能做到让一个页面不言而喻,那么至少应该让它自我解释,这个非常重要。



我们常常认为用户会盯着每个网页,仔细阅读我们精心制作的文字,领会我们组织页面的方式,然后,在点击某个链接之前权衡他们的可选目标。


但是大部分情况却是,用户只会在每个页面上瞥一眼,扫过一些文字,点击第一个令他们感兴趣或者大概符合他们目标的链接。通常,页面上的很多部分他们都不看(想一想,你是不是这样浏览网页的呢)。


本想举快手WEB端的例子,没想到再次打开后发现已经改版了,而且应该是近两个月左右的事情,可惜已经不能截图,不过这次的改版比之前好多了。

上一版本中,几乎有几段整段整段的文字,虽然文采不错,比较优美吧,但谁有耐心看呢,总之我打开几次,一次也没一字一字的阅读过。这个直接增加了用户的负担,降低了主要元素的层级,画蛇添足。


所以,如果我们想设计有效的网页,必须开始接受关于网络使用的三个事实:


一、我们不是阅读,而是扫描


原因有3:

1、我们总是处于忙碌之中;

2、我们知道自己不必阅读所有内容,只对网页中的一小部分内容感兴趣,剩下的内容我们并不关心,扫描就是我们找到相关内容的方式。

3、我们善于扫描,在日常生活中,我们不管是看报纸,还是杂志,书籍,基本都是用扫描的方式,找到我们感兴趣的部分。


大家想一想,我们在看报纸的时候,是不是先浏览一遍,然后看到哪个标题比较吸引才专心去看那篇文章,而且也不会是一字一句的去读,而是知晓大概内容即可。


再举个贴近的例子,打开站酷的首页,你们会从左到右,从上到右的一字不漏的去看吗,我们是不是用眼睛扫一遍,看到吸引你的内容,然后再点进去看详情,对的,这就是互联网用户的扫描阅读。



二、我们不做最佳选择,而是满意即可


在设计页面时,我们通常假设用户只是扫过整个页面,考虑所有可能的选项,然后选择一个最好的。


事实上,大多数时间里,用户不会选择最佳选项,而是选择一个合理的选项,一旦发现一个链接,看起来似乎能跳转到我们想去的地方,那很大的机会就会去点击它。


原因有以下几个:

1、我们总是处于忙碌之中,寻找最佳策略需要的时间很长。

2、如果猜错了,也不会产生什么严重的后果。就算做了错误选择,我们只要点击几次返回按钮就好,所以,返回按钮,是WEB端用的最多的地方。

3、对选择进行仔细思考还不如很快多尝试几次。

4、猜测更有意思,猜测不会像仔细权衡那么累,而且如果猜对了,速度会更快。


当然,这并不是说用户在点击之前从不进行权衡,这要取决于时间上的紧迫以及其他因素。


大家想一想,现实中是不是这样的呢。也许通往一个入口有好几条路径,但是第一次进入该网站的时候,不会寻找最佳路径,而是试探的摸索,只要找到就可以了,不会刻意的找那条最捷径的。

 

三、我们不是追根究底,而是勉强应付。


生活中,人们在使用任何东西,往往不理解它们的运作原理,甚至对它们的工作原理有完全错误的理解。


无论面对哪种产品,除了刻意钻研的,很少有人会花时间阅读说明书。相反,我们往往是贸然前进,勉强应付。


比如我们买了一台新款电视机,几乎从来不会把电视机的零件一个个都拆下来,完全理解了它们的工作原理后才使用,我们甚至连说明书都不看,而是拿着遥控器自己琢磨,完全没有必要去深究。



为什么会这样?

1、这对我们来说并不重要。对于大多数人来说,是否明白背后的工作机制并不重要,只要正常使用即可,这并不是智力低下的表现,而是我们并不关心。

2、如果发现某个事物能用,我们会一直使用它。我们一旦发现某个事物能用,很少去找更好的替代品。如果偶然发现一种更好的方法,我们会换用这种更好的方法,但很少去主动寻找更好的。


举个我小时候的例子,上学时我用的第一只中性笔是同学给我的,虽然可以用,但我发现比较粗,不太喜欢,但是认为可以用,从来没想过是否有稍微细一点的。当第一只笔芯用完,去文具店购买时,发现竟然还有0.35的笔芯,很意外,当然我就放弃了之前的笔芯,换作成0.35的,这样的例子应该都会发生在每个人的生活中。


那如果人们勉强应付的时候这么多,有没有弄明白真的那么重要吗?答案是很重要,因为有时候可以勉强应付,但通常效率不高,而且容易出错。


如果用户很清楚,不是勉强应付呢?

1、他们会更容易找到自己需要的东西。

2、会更容易理解你的网站提供哪些服务。

3、你更可能引导他们到你的网站上希望他们看到的地方。

4、在你的网站上,会觉得自己更聪明,感觉更好,这样他们就会离开让人勉强应付的网站了。


这也是现在竞品之间抢夺用户的一个重要因素,两个服务内容一样的产品,一个直观明了,一个结构比较混乱,不能很快找到目标,对于这两个产品,那用户该选择哪一个呢,可想而知。



前面已经说到,现在互联网的用户阅读都是扫描式阅读,那么在这种情况下,怎样才能让用户清晰理解你的网站,提高体验。


需要注意5个方面,保证他们会很容易理解你的网站:

1、在每个页面上建立清晰的视觉层次;

2、尽量利用习惯用法;

3、把页面划分成明确定义的区域;

4、明显标识可以点击的地方;

5、最大限度降低干扰;


前面已经说到,现在互联网的用户阅读都是扫描式阅读,那么在这种情况下,怎样才能让用户清晰理解你的网站,提高体验。


一个视觉层次清晰的页面有3个特点:

1、越重要的部分越突出;

2、逻辑上相关的部分,视觉上也相关;

3、逻辑上包含的部分在视觉上游嵌套;

 

也可以这么说,要把版式设计的四个原则,亲密,重复,对齐,对比,把这几点做好。

 

对于习惯用法可以说是人的一种本性习惯了,这也是为什么很多竞品都很相似的原因了。


举个常见的例子,比如聊天的icon,都是一种对话框的设计,因为人们已经习惯了这种图标设计,如果换成其他,用户看到后会不理解这到底是什么东西。



对于设计师,很多人一直想创新,但是一定要秉持两个原则:

1、创新的方法同样也要不言而喻;

2、能够为用户带来很大价值,值得用户付出一点努力来学习新的方法。



Krug可用性第二定律——点击多少次都没关系,只要每次点击都是无须思考的选择。

 

文中说:WEB设计师和可用性专家一直有一个争论,用户在到达目标之前点击多少次不会觉得有挫败感,作者认为,真正的问题不是到达目标之前要点击的次数,而是每次点击有多艰难,需要多少思考,有多大的不确定性来判断自己是否在进行正确的选择。

 

所以当我们在使用目前一些成功的产品时,会感到自然而然的流畅体验,虽然有时候因为产品体量大,没有很快找到目标,但我们也没有过多挫败和烦躁。


Krug可用性第三定律——去掉每个页面上一半的文字,然后把剩下的文字再去掉一半。


好处:

1、可以降低页面的噪声。

2、让有用的内容更加突出。

3、让页面更简短,让用户在每个页面上一眼就能看见更多的内容,而不必滚动屏幕。

 

如果有欢迎词,尽量减少,能不用就不用。

指示性说明尽量不用。

如果指示性说明非常冗长,用户发现所需信息的机会很小。

我们应该通过让每项内容不言而喻来完全消除指示性说明,当指示文字变得完全没有必要,就应把他们全部去掉。


现在比较成功的App的引导页都非常简洁,因为没有人会在进入的时候看你写的一长段文字,等待很长时间,除非视觉性很强,比如今年美团变黄的那段视频,视觉冲击力很强,我看完一次后,在网上又自己找,看了几次。所以要做到尽量减少指示性说明。



作者认为,很多网站,一旦到了第二个层次,导航会变得支离破碎,随意发挥,以至于很难找到良好的三级导航的例子。


原因有3:

1、好的多级导航本来就很难设计,同时有很多元素需要安排到页面中。

2、设计师即使在设计前两个层次也常感到时间不够。

3、第三个原因是它看起来并不重要,不是主导航,也不是二级导航,而且有一种倾向认为,当人们深入到网站的这一个层次后,会自然明白如何进行操作。

 

而且就算设计师提出需求,他们也可能拿不到,因为负责内容的通常不会想的那么深远。


事实上,用户在底层页面上花的时间通常和花在顶层页面的时间相同,除非从一开始就自顶往下进行导航设计,否则以后很难再进行添加,也很难保持一致性。


网站主页是我们打开后第一眼看到的,也是最容易向用户突出网站的价值等内容的,那在主页该放什么哪些内容比较合适呢:

1、站点的标识和使命:告诉我们这是什么网站,做什么的;

2、站点层次:提供服务概貌,包括内容,功能,组织形式;

3、搜索;

4、导读:主页最好有“里面有精彩内容”的暗示提醒;

5、内容经常更新;

6、友情链接;

7、快捷方式:最常访问的内容片断;

8、登录、注册;

...


除了这些主要的,最好还要满足这些:

1、让我看到自己正在寻找的东西;

2、我也许感兴趣的精彩内容;

3、告诉我从哪里开始;

4、建立可信度和信任感。

 

比如打开淘宝首页,你不仅可以看到以上罗列的内容,淘宝通过算法,会自动推荐你曾经搜索过得商品,最上角的非常醒目的位置,logo动效还会告诉你最近的活动。



对于一个控件的选择或者其他设计,很多团队经常在无休止的讨论,始终没有决定,这样的讨论除了浪费时间,也很容易造成紧张气氛,破坏团队成员之间的关系,常常让团队无法做出关键的决定.


我们每个人都是用户,和所有的用户一样,对网站上喜欢什么,不喜欢什么有着强烈的感觉。

 

我们往往认为我们自己喜欢的,绝大多数用户也都喜欢。这应该是人的一种天性。

 

同时,在团队中,由于职位不同,不同岗位的人对网站设计也有不同的看法。


比如设计师喜欢视觉上比较好看的网站,而开发却喜欢构建新颖,有趣,功能出色的网站。所以不同的角色,不同的视角,常常造成不同的看法,继而不停的讨论,让会议陷入僵局,当然每个人的想法并不是一层不变的,只要有足够的证据能打动他,他的想法完全可以反过来。


一旦因个人和职位不同而造成的冲突不分胜负时,讨论常常会转化为寻找某种方式(专家的意见、焦点小组或者用户测试)来决定绝大部分用户喜欢或不喜欢什么,但是,找出所谓的普通用户,就是错误的想法,因为,本来就没有什么普通用户,所有的web用户都是的。

 

越是仔细观察用户,认真倾听他们表达自己的想法,越能意识到他们对网页的个人反应和很多不同的变量有关系。所以,试图用一些简单的喜好来形容用户,既琐碎又没有什么作用,另一方面,好的设计会把这种复杂性考虑进去。


关于普通用户的这个说法,最糟糕的是加强了这种看法,认为好的web设计主要是找出人们的喜好,这种想法看上去不错。比如面包屑导航好,要么不好,弹出框好,要么不好,非黑即白。


问题是,对于大部分web设计问题来说,没有简单的“正确”答案,好的设计能满足需要,也就是说,经过仔细考虑,实现和测试的设计就是好的。


例如,对于Flash的使用,如果询问用户,有些用户会说他们很喜欢Flash,而另外差不多同样数量的用户会说他们讨厌Flash。实际上,他们不喜欢的是使用不当的Flash,大而复杂的动画,需要很长时间下载,没有带来任何价值。如果仔细观察他们,很可能发现同样是这些人,喜欢那些使用精心设计,适当并小规模使用Flash的网站,增加一些简约的修饰,或者有用的功能,同时又不带来麻烦。


并不是说不存在完全错误的方法,有些设计网页的方法确实是完全错误的,只是他们往往并不是设计团队通常争论的那些方法。


解决这种问题的关键方法就是,不要再问这样的问题“大部分人喜欢这样的导航吗”,正确的问题应该是“在这个页面,这种导航会让可能使用这个网站的大部分人产生一种良好的体验吗?”,然后观察人们对它的看法和使用的方法,再不断调整。


争辩人们喜欢什么既浪费时间又消耗团队的经历,而通过测试将讨论对错转移到什么有效,什么无效上,更容易缓和争论,打破僵局,而且测试会让我们看到用户的动机,理解,反应的不同,从而让我们不再坚持认为用户的想法和我们的想法一样。



在做测试时,往往很多人不清楚什么是焦点小组访谈和可用性测试的的区别,那就先科普一下。


焦点小组访谈,百度百科的解释是这样的:就是采用小型座谈会的形式,由一个经过训练的主持人以一种无结构、自然的形式与一个小组的具有代表性的消费者或客户交谈。从而获得对有关问题的深入了解。


简单来说就是一个小组围坐在桌子周围,主持人抛出问题,针对这一问题,被访谈人说出自己的想法,从而快速得到用户的意见和反应。


焦点小组可以抽象的确定你的目标用户想要什么,需要什么,喜欢什么。也可以测试出网站的理念是否有意义,价值主张是否吸引人等等。


但焦点小组只是适合用于网站设计前就应该进行的,是一个早期阶段方法。


比如电视剧《我的前半生》中,段晓天因得不到主角罗子君而为难她的那个片段,就是一次焦点小组访谈。



可用性测试的百度百科解释是这样的:让一群具有代表性的用户对产品进行典型操作,同时观察员和开发人员在一旁观察,聆听,做记录。


该产品可能是一个网站,软件,或者其他任何产品,它可能尚未成型。测试可以是早期的纸上原型测试,也可以是后期成品的测试。


简单说就是向用户展示一些内容,不管是网站还是原型,或是草图,并且要求用户说出这是什么,并用他们来完成一项特定的任务。


如果想建立一个优秀的网站,一定要测试。为一个网站工作几个星期会让你失去新鲜感,因为你对网站了解的太多,很多细节都知道,所以清楚网站是否正常运作的唯一方法就是测试。


测试会提醒你,不是每个人的想法都和你一样,会和你用同样的方法使用网站。


要记住,测试一个用户比不做测试好一百倍。测试总是会有效果,哪怕对错误的用户做一次糟糕的测试,也会让你看到改善网站的一些方面。


在项目中,早做测试,哪怕一位用户也好过最后测试50位用户。


一旦一个网站投入使用,要改变就不是很容易了,有些用户拒绝做出任何变化,所以在开始的时候,有助于防止你犯错误的方法都很划算。


测试的关键不是证明什么或者反驳什么,而是了解你的判断力。对于用户的招募也不要太严格,如果能够让用户是更接近使用网站的用户就更好了,但更重要的是,要尽早和经常进行测试,这是一个开发,测试,修复,再度测试的过程,没有什么比现场用户的反应更重要了。

 

其实做可用性测试没有想象的那么复杂,一个简单的可用性测试完全可以把问题解决。

 

那么应该测试多少用户呢:

很多情况下,每轮测试用户数量应该是三个,最多四个。前三个用户很可能会遇到几乎所有最明显的问题,更重要的是多做几轮测试,只测试三名用户有助于很快进行下一轮测试。由于你会修正在第一轮测试提出的问题,因此在第二轮测试中,就会发现新的问题。这样的话,能够很快的对测试进行总结,并能很快利用测试结果进行修正。

 

很多人不知道该招募怎样的测试人员,总是很纠结,其实没那么难。


实际上,我们都是初学者。就算找一位专家,你也有可能发现他也在勉强应付。


设计出的网站如果只有你的目标用户能使用,这通常不是一个好的方法,应该既要满足专家的要求也要满足新手的要求。


例外:

如果你的网站几乎由某一类用户使用,那就只招募这一类用户。


如果你的目标用户群体可以分成几个明显的阵营,而且这些阵营有着完全不同的兴趣和需要,那么至少要从每个阵营里选择用户进行一次测试。


同时避免对网站或网站背后的组织架构进行预先讨论。


可以找任何人来引导测试,真正需要的工作只是鼓励测试用户去尝试。同时还需要一个观察人,对于观察人选,建议如果能让管理层参与就好了,他们的参加能极大鼓舞团队的士气,这是他们第一次看到自己的网站被人使用,而且很多地方和他们想象的画面并不一样,这样的话,团队也更容易向管理层拿到对测试的投资,可谓是一举两得。



测试什么,什么时候测试?


测试:顾名思义,就是让测试用户看到网站,然后看他们能否理解这个网站,包括目标,价值主张,组织方法和运行方式等。

可以对用户进行关键任务测试,让用户完成一些任务,然后观察他们是怎么做的。

 

立刻回顾测试结果


在测试后的讨论会议上,主要做以下两件事:


给问题分类:

回顾大家看到的问题,决定哪些问题需要修正。


解决问题:

找出修正这些问题的方法。


这样,从其他人的角度看你的作品,常常能为问题提供全新的解决方案,或者让你用一种新的眼光看待原有的问题。


要记住,这是一个循环的过程,不能只做一两次就停止了。

  

测试常见问题:


1、用户不清楚概念:用户看着网站,要么不清楚他们说的是什么,要么他们以为自己知道,但是理解有误。

2、他们找不到自己要找的字眼:这通常意味着你组织的内容分类不符合用户的习惯或者分类符合他们的习惯,但没有使用他们期望的名字。

3、内容太多了:有时候,他们要找的内容就在页面上,但就是看不到,在这种情况下,你需要减少页面上的整体干扰或者把他们需要看到的内容设置的更加醒目,让它们从可视层次结构中更加突出。

 

在任何测试中,你都可能会遇到这样的情况,用户暂时出现错误,然后在不需要任何帮助的情况下回到原来的轨道。


只要出现问题的人马上发现自己偏离了原来的主体,尽量不需要帮助就能回到原来的方向,这种情况看起来没有扰乱他们的活动,就可以忽略这些。总的来说,如果用户关于在哪里找到他们需要的内容的第二次猜测总是对的,就可以了。


这样的问题总会存在的,因为有些含混之处,总是没有简单的解决方法,不管怎么做,都会有一半用户在第一次猜测的时候出错,但每个人都会在第二次猜测之内找到,这样就好。

 

当在测试时清楚看到人们没有理解某些内容时,大部分人的第一反应是增加一些内容,例如一些注释或者指导说明。


这样的方法不对,正确的解决方案往往是去除某个或一些让人混淆的内容,而不是增加另一些干扰。


而且不要太看重人们对新功能的需求,人们常常说“如果它能像某某”就好了,这样的说法常常被看做是在要求新的功能,如果仔细询问,常常会发现,他们已经找到一个很好的网站,能做某某功能,就算你做了这个功能,他们也不会切换到你的网站,他们只是在告诉你他们的喜好而已。

 

当大家看到第一个用户试着勉强应付的时候,问题和解决方法都很明显的那种惊喜,就像是现成的收获,你应该马上修正它们。

 

和任何好的设计一样,成功的网页需要巧妙的平衡,要记住,哪怕一个微小的变化都会带来不小的影响,有时候,真正的挑战不是修正你发现的问题,而是修正这些问题的同时不破坏已经正常运行的部分。


只要进行改变,就要仔细思考它将会影响哪些其他内容。特别是,当你把某些部分调整的更为突出时,想想看是不是把其他内容的重要性降低了。


降低网站好感度有几种方式:

1、隐藏我想要的信息;

2、因为没有按照你们的方式行事而惩罚我;

3、向我询问不必要的信息:大多数用户都很介意个人信息,如果网站要求的信息超出当前任务时,会让用户觉得很麻烦。

4、敷衍我,欺骗我:我们都会讨厌虚伪的真诚,也讨厌假意的关心,想想每次你听到“您的电话对我们来说很重要”的时候是什么感觉吧!

5、给我设置障碍:不得不等待一个长长的flash介绍。

6、你的网站看上去不专业:网站看起来很凌乱,组织很混乱。


就算你有些地方做的不好,也还有可能再度提高我的好感,只要让我相信你的所作所为是在为我着想。


提高好感的几种方式:

1、知道人们在你的网站上想做什么,并让他们容易明白:把用户最想做的几件事放在最明显的地方;

2、告诉我我想知道的。

3、尽量减少步骤,让用户以最快的途径到达他们想去的地方。

4、知道我可能有哪些疑问,并且给予解答:可以做一个经常更新的常见列表。

5、为我提供协助。

6、容易从错误中恢复:当潜在的错误不可避免时,要提供一个快速且清晰的方法快速从错误中恢复。

7、如果不确定,记得道歉:有时候会因为暂时没有能力或资源做到用户想要的,如果你做不到,至少让他们明白你知道你在给他们造成不便。

怎样回应不好的设计建议?

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

一位高管在餐巾纸上画了一个新的主页原型来演示她使用和喜欢的网站。一个开发人员晚上在公司呆到很晚,并添加了一个他认为很酷的新功能。或者产品经理坚持采用与竞争对手相同的设计模式。

如果这些故事听起来很熟悉,那么你并不孤单。大多数设计师都会收到这种“帮助”。

你的第一直觉可能是以平淡无奇的方式回应“不”。但是,一个用户体验建议是否来自一个关键的利益相关者或项目周边的人,应该仔细处理。在您做出反应之前,请考虑以下步骤:

你的第一反应可能是利索地对对方说“不”。但是,无论UX建议是来自关键的利益相关者还是项目的外围人员,都应该仔细地处理它。在你做出回应之前,考虑以下步骤:

一、消除主观意识

第一步是将消除自己的主观意识;你可能拥有丰富的设计经验,但不排除会有更好的想法。不要仅仅因为它是在PowerPoint文件而不是Photoshop原型中呈现,所以不要认为一个想法是坏的。

观点的多样性可以更有效的构思:即使提出建议的人缺乏设计知识,他们可能会有不同的专业知识或经验,并且可能会为您正在尝试解决的问题带来宝贵的不同视角。

你如果像设计的上帝一样扼杀了他人的创造力,最终会导致更糟糕的结果。

二、听他们的想法

不加考虑就无情地否定别人的想法会阻碍人们在未来提出其他(有价值的)想法。即使一个想法对你来说显然是错误的,但请记住,这个人也试图让设计变得更好,尽管他可能对“更好”的含义有不同的看法。通过允许他们:

  • 解释这个想法
  • 解释一下推理
  • 向您展示草图或案列

三、将建议与问题分开

您可能会发现,虽然提出的解决方案并不合适,但需要解决的问题很重要。

问问这个人他的设计理念想要达到什么目标。他在考虑不同的用户群或业务需求吗?继续问“什么?”和“为什么?”(可能以不同的方式),直到你明白他考虑的问题及思考方式是什么。

四、评估潜力

确定建议和问题和好处。即使是一个坏主意也有一些好处。

例如,在大屏幕版本的网站上使用汉堡包菜单不利于用户轻松找到导航。这是不使用它的一个非常重要的原因。然而,桌面上的汉堡也有一个视觉上吸引人、整洁的标题。确认想法的成本和收益,以便更准确地评估权衡,可以通过不同的方法牺牲或实现哪些目标。

考虑举行设计原型会议(一个设计原型会议是短,会议期间,团队成员迅速协作和草图设计,以探索和分享的设计思路广阔的多样性),一起观看用户研究视频,或举办其他类型的用户体验工作坊,以便这个想法的支持者可以继续为这项想法解释。

五、花点时间进行研究和探索

解释一下,现在做一个设计决定意味着跳过构思、研究和用户反馈。在理想的情况下,转向设计思维过程,为所解决的问题找到正确的解决方案。

根据您对目标用户及其任务的了解程度,确定一个想法的优缺点可能需要:

  • 回顾以前的研究,看看这个想法是否已经过测试,结果是什么。
  • 搜索可用性指南和最佳实践,以获得类似想法的案列。
  • 在可用性测试或A / B测试中构建和测试该想法的原型。

论证该想法的成本可能会由于潜在的用户混淆,而导致的用户体验问题,以及诸如可能延迟发布其他更重要功能的开发计划中断等后勤问题。要评估大量想法,请使用对其进行优先级排序。

六、如何说“不”

如果您评估确定不应该实施该想法,您可以以积极的方式拒绝。

承认其贡献

你不必着急全盘否定,但不要愚蠢的全去试一遍。找到您相信的有关他们建议的真实或有效的内容,并将其标注出来。这可能是这样的:

  • “这种设计对于[角色类型]用户可能有意义,因为他们需要[此功能]。”
  • “听起来你想要解决与重要用户任务相关的[特定客户投诉]。”

由于这些短语之后都会出现“but”,因此请确保您在所提出的观点中是真实的。否则,说它们根本不值得。

分享您的评估理由

当人们投入足够的时间来提出建议时,就是帮助他们学习更多关于用户体验的知识,并在整个团队中传播更多用户体验知识的理想时机。利用这些时间,交流你评估的理由,而不是仅仅告诉他们一个“不”。

1. “这种设计对于[persona type]用户可能有意义,因为他们需要[此功能]。但是我们的主要角色可能会有这个问题,因为[原因]。“

2. “听起来你想要解决与重要用户任务相关的[特定客户投诉]。确定信息的优先顺序可能会有所帮助,但要使其更大,颜色不同可能会导致横幅失明。我想在第二天做一些调查,并提出一些替代解决方案的原型。“

考虑提供原型,案列,设计原则,模式或研究发现,以帮助他们理解为什么一个设计可能会导致问题,以及为什么不同的设计会更好地工作。把每一次互动都看作是灌输贡献者设计理念的机会——这是对未来的一种投资。

七、对强权讲真话

当客户或强大的同事发出特定请求(或要求)时,即使您给出了解释,也很难说“不”。但这并不意味着你应该放弃自己的观点并同意有害的建议。相反,与他们讨论如何将想法背后的目标和资源结合在一起,而不必直接实施。

合气道是一种试图和平解决冲突的武术,它依靠转弯和枢轴等动作来融合对立的能量。同样的原则可以应用于处理围绕设计的冲突:与其直接拒绝一个想法,不如同意继续探索这个建议,而不是明确地承诺实现它。

建议召开一次工作会议,在会上你可以提出既能获得同样好处又能避免成本的选择。例如,你可以说:

  • “我明白你想达到的目标。让我把它与一些用户体验研究和模式进行比较,看看我们如何能够在我们的约束条件下提供最好的解决方案来实现你的目标。“
  • “我想看看我们的一些竞争对手是如何做到这一点的,并确保我们做得更好,或者至少做得一样好。”
  • “让我们按照这些思路勾勒出一些东西,以及一些相关的替代方案,并获得一些用户反馈,这样我们就能实现你的目标。”

八、通过寻求早期设计输入来预防这些问题

比优雅地转移坏主意更好的方法是主动引导合作进入更有效的轨道。您可以通过在结构化的、战略性的时间(例如预定的研讨会)寻求输入,最大限度地利用每个人的贡献。这种主动的方法减少了在无法有效评估或合并意外更改请求时感到意外的可能性。

九、结论

每个人都对设计都自己的看法,这使得UX设计师的工作充满挑战。有些人总喜欢在界面中添加一些令人困惑的元素,比如原型、这会影响产品开发进度(可能包含UX迭代),以及那些喜欢设计(甚至认为自己是设计师)但缺乏任何真正的UX设计专业知识的人。

但是,如果您与您的合作者进行深入交流,向他们灌输设计理念并引导他们发挥自己的长处,这种“设计帮助”的多样性将是一种宝贵的资产。

最有成效的用户体验设计师在设计过程中会和许多人合作。他们与各种团队成员和主要利益相关者讨论业务目标,发展机会和约束,优先级,要求和设计理念。这些人来自许多职能团体;具有不同的UX专业知识,想法和思考。

要想成为一名优秀的用户体验设计师并创作出优秀的设计作品,培养必要的沟通技巧来利用这些信息来源和输入是必不可少的。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

怎样设计体验友好的APP登录表单

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

不要小看一个登录界面,它内里包含很多细微的东西,除去外观视觉,更多要注意的是交互的操作体验,比如一些动画、一些文案提示等细节都要注意,如果你是UI设计师,建议看看这次经验文章,附上了大量案例,也许能助你未来更好的去设计一个用户体验友好的APP登录界面。

下面通过几个关于登录界面的UX策略指南,让你更好的应用和实践。

给文本输入框增加提示

如果用户使用你的服务必须登录,那么信息字段是你必须要做的主要功能(即输入框中的提示语,如:输入手机号码,输入验证码。)

使这些字段清楚可视,并且不要强迫用户到处寻找,或花更多的步骤进到App. 一旦他们进到App, 登录界面是他们所应当见到的第一个事情。

奖励提示:相比于使用常见的“登录”“登陆”的按钮,可以更富有创造性,并要包含可直接输入区域。确保记住用户的数据,这样他们就不需要每次输入信息。

“注册”和“登陆”不应该放在一起。

更多地时候,我们看到注册和登陆按钮被放置的靠近彼此,但是这会对用户产生反作用。

这两个动作都包含了相同的动词,并且看起来也很相似,所以他们会混淆用户的选择。在有限的时间内进入问题,他们可能会感到沮丧并且离开。

基本上,任何界面上不应该有使用户“暂停”和“思考”的元素。

如果你想让他们的体验完美无瑕,分开这注册和登陆两个区域,并且使差别清晰可见。另外,你可以使用不同的动词或者简单解释不同的字段是什么。

在登录和注册部分,增加不同的输入字段。

除了动词“Sign”是事实之外,另一个另用户感到困惑的是,登录和注册部分通常有相同数量的输入框(用户名,密码,和邮箱)。

为了完全地区分,最小化新用户尝试直接登录的机会。用不同的输入字段。

让密码可被看到

当大多数用户的密码由于安保原因被打了马赛克,用户频繁遇见的另一个问题是打错他们的密码。

这甚至会发生在很有经验的打字员身上,特别是当他们在移动设备上登录的时候。

防止这种情况发生的做法是:在密码字符旁边包含一个“显示密码”的单选框或图标。

让他们知道什么是错误的

如果应用监测到一个错误的密码组合,和用户名,但是没有明确的报告给用户问题是什么,用户可能会多次尝试后,很生气的退出应用。

这是为什么你应该考虑通用的回复(例如“你的密码或邮箱不符合”),并且给他们立马回复怎么解决这个问题。

问下邮箱地址或电话号码,而不是唯一的用户名

为什么人们登录时人们很少记住“用户名”?如果使用用户名登录,你会面对很多可避免的困难:用户名必须是一个唯一的,这意味着人们会重复尝试输入一个系统里目前还没有的用户名,或者最终使用其真实姓名。

过了一会儿,用户想出了一个唯一的登录名,但是只过了一小会儿就忘记了,因为这个用户名对他没有任何的意义。

另一个事情可以促进登录,是提供给用户几个登录选项,并且给他们机会来选择和尝试用户名而不会沮丧。在这过程中强迫的一部分是允许他们使用邮箱地址和密码来注册。

需要一个“忘记你的密码”的流程

忘记密码发生在所有人身上,这也是为什么,你急迫的给到用户一个机会来恢复密码,那么就直接在登录界面这么做吧。

所要做的就是,在输入框下增加一个“忘记你的密码”的链接,并让系统能给用户的邮箱或电话号码发送验证码。

不要锁了用户的账号而不告知他们

为了避免强迫进入和暴力攻击,许多网页和应用在一系列的错误尝试之后关闭账户。

安全第一,但是你至少要尝试告诉用户,在多少次尝试后,在关闭账户前,他们必须离开。你也可以分享更多的细节,例如,在试错后的十分钟才可以再次尝试的事实。

登录样式灵感

如果在过去,都是在用相同的无风格和定制化的登录页。现如今,给你的应用,创造一个独特的登录页设计是非常重要的事情,尤其是你想要围绕你的应用和服务来创造品牌。

设计师和开发人员也有承认意识到登录表单的重要性。这是事实,特别对于移动环境下,用户界面相比于“桌面”网站,扮演了更重要的角色。

当为一个应用和移动站设计这个元素的时候,设计师花很多的精力,使它既好用又美观。

在这篇文章里,你会看到很多移动端用户界面设计的案例灵感,关于一个移动端登陆页面应被设计成什么样,给你一些线索。

Roostio Login Screen

Login Screen

Job Board – Company Profile / Login

Shopping app

Tailslife: Login

Moody Sign Up/In Screen

Bandio App Login & Sign Up

Parts – login dark side

Login Screens

ZSSK – login and route detail

DailyUI Day001

Skype Redesign

Sign Up Window – Daily UI #001

结尾思考

对用户来说,登陆已经很困难了,所以,使之变得更复杂,对你的产品来说并不是一个很聪明的决定。避免更大的和不熟悉的形式,并且让输入字符简单可视。这些只是一些为了节省用户时间可以考虑的技巧,并且帮助他们享受你所提供的服务。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 

网页设计 & 灵感 » 当扁平化UI转拟物化设计后

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


在设计领域,设计风格总是多变的,也有很多随着流行趋势而不断变化,但是存在着N多的争议。

当扁平化UI转拟物化设计后

对于扁平化和拟物化,说白了,只是风格的不同,最终的设计目的是一样的,但是,却还是会有很多的朋友会纠结于是扁平还是拟物化设计,争论是扁平好还是拟物好,怎么说呢,各有各的优点,各有各的不足,这是今天,我们要带大家看的!

当扁平化UI转拟物化设计后

Michael Fugoso,一位来自圣地亚哥,加利福尼亚的插画家和设计师,帅小伙!

他说,关于他自己,就各像其他人一样,他喜欢旅行,他喜欢吃比萨和海鲜,他非常的重视家庭,家庭总是以他的第一位!他也喜欢分享,因为分享会让别人的生活更容易,帮助别人成功,他觉得,这有助于他成为一个好的设计师。同时,他也喜欢自私地做自己想做的事情,因为他觉得,这有助于他成为一个好的艺术家。

今天,带大家看一组他的作品,在他的这些作品中,很好的反映了扁平与拟物的关系,扁平的背景,搭配上拟物的元素,其视觉效果非常棒,冲击力十足,震撼性十足!

扁平与拟物,数不清的恩怨情仇!道不尽的爱恨纠缠!

这是一张扁平化的插画!

当扁平化UI转拟物化设计后

当它变成拟物后

当扁平化UI转拟物化设计后

你觉得哪个的视觉冲击力更强一些?

我们接着看!

这是一张扁平化作品!

当扁平化UI转拟物化设计后

他开始在矢量程序上呈现

当扁平化UI转拟物化设计后

开始色彩的调整与细节的完善

当扁平化UI转拟物化设计后

最终的效果呈现

当扁平化UI转拟物化设计后

这是一台扁平化的车

当扁平化UI转拟物化设计后

添加装饰元素

当扁平化UI转拟物化设计后

调整颜色后,得到一个扁平化的结果

当扁平化UI转拟物化设计后

把车元素单独提取出来

当扁平化UI转拟物化设计后

在矢量程序上呈现

当扁平化UI转拟物化设计后

上色,添加细节

当扁平化UI转拟物化设计后

对细节的刻画简直不能再棒

当扁平化UI转拟物化设计后

调整色调

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

最终的对比

当扁平化UI转拟物化设计后

再往下看,你可能会被美哭

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

扁平与拟物的碰撞

不一样的花火

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

这些火箭,看得人热血澎湃阿

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

看了感觉效果如何


 


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 

像看电影般的酷站:Oat the Goat

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


这是一个以故事形式来展现网站:Oat the Goat,动画很有感觉,虽然小编目前的水平还做不出这类网站,但看看也可以增加点灵感、阅历,原来网站还能这样做的,一个网站,一个温暖的故事,来一起欣赏电影般的酷站,Enjoy!

网站名称:Oat the Goat
网站地址:http://oatthegoat.co.nz/

(请在PC端欣赏,浏览该网站时记得打开声音哦~)

故事是从一只羊咩咩的历险开始,他翻山越岭,途中遇到一些困难和遇到困难的小伙伴们,接着一起去克服,然后越来越多的小伙伴们一起去冒险,经过重重险阻,最终…… (还在让大家自己欣赏才有 Feel 的)

所有的画面非常的漂亮,就像在看电影一样,同时网站还带有一至交互体验,让用户去选择。

截图:羊咩咩遇到第一个有困难的小伙难了哦,我们继续看看……

截图:要选择你要怎么做了

故事结局如何?请自行观赏,同时您可以在下方评论处说出你的想法:)


 


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 

避开"灰"画面至少提高几个层次

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


大家平时在画素描的时候经常会遇到颜色深不下去、颜色对比不强烈等问题。画面的颜色总是显得很灰,体现不出立体的效果。不管多使劲颜色就是重不下去,有时把纸都涂破了,依然没有效果。这到底是为什么了?究竟如何才能把颜色重下去了?接下来我们就一探究竟吧~

 

什么样的画面是偏灰、偏脏的画面呢?

画面中这种暗部不暗,亮部不亮,颜色处于一个区别不大的状态,画面就会显得灰;而亮面上色的时候笔触太粗,灰面颜色磨得太多,整个亮部区域颜色就会显得很脏。


这些问题之所以出现,是因为大家没有将画面的“黑、白、灰”表达清楚。

要在白纸上画出立体的图形,需要我们加强明暗之间的颜色对比;通过强烈的光影营造立体的视觉效果。而快速表现出大的黑白灰关系是我们塑造的关键:


首先,我们找到所画物体自身颜色最深的地方。用软一点的铅笔(8B、12B)排上调子,依次过渡灰面,留出并轻轻刻画亮部,加上投影和背景。让画面先有一个基本的黑白灰,确定出最黑的地方,灰面的位置以及高光的分布。

然后,在这个基础上我们找到物体的明暗交接线。


先从明暗交界线开始加深颜色并往暗部边缘逐渐的过渡,运笔排线的力度越来越轻,让暗部形成一个有深浅颜色变化的面。靠近明暗交界线的地方颜色就重一点,靠近投影的地方颜色就浅一点,然后通过压深投影的颜色,衬托暗部的反光,让这个暗部颜色更加透气。


再回到明暗交界线,往亮部方向用4B、2B将颜色逐渐过渡,画出灰面来,但物体的灰面不宜画得过多,一多画面就腻了;灰面塑造的标准就是颜色一定要比暗部浅,灰面颜色如果加深那暗部的颜色也要同时加深,始终要保持这两个面的颜色区别。

接下来,就是对比一下整个暗部区域和背景颜色的深浅程度。如果暗部的颜色比背景深就将暗部边缘的颜色压重一点点,如果背景的颜色更深,那么就像画投影一样,沿着物体的暗部边缘叠色,加深背景的颜色;不管哪一种情况都要将暗部和背景的颜色区分开。


最后,我们有稍微硬一点的铅笔(如2H、HB)排线将亮部表现一下,主要是将高光收拢,除了不锈钢和玻璃其他物体都是越靠近高光用的铅笔越硬(HB、2H、4H),亮部刻画时排线一定要细腻,可以刻意排几组特别精准的线条加强物体的质感,这样高光和亮部会显得更白,从而就会衬得暗部的颜色更黑更深。

完成的物体黑白灰的塑造之后,最后看一看整个物体各边线与背景颜色的深浅对比,还是通过加强区部的颜色对比,完善画面整体的明暗对比。

总而言之,暗部的黑并不是独立存在,是因为周边的颜色都比它浅,于是乎,它就深了下去,如果与周围的颜色区分不开,那即使将纸张揉破颜色依旧难深下去。所以,暗部叠色就是一边画一边比较,不停的调整,才能始终确保暗部能重下去。








蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 

日历

链接

个人资料

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

存档