怎样做出引人入胜的用户体验

发布者: mobileui

设计师 Irene Pereyra 总结了10大技巧帮助你实现令人惊叹的交互式用户体验。

怎样做出引人入胜的用户体验

近来,设计一款能够吸引并留住用户的web和App越来越成为一门学问。

由于很多人对于计算机数字领域不是很很了解,我会经常拿我们UX设计师和建筑师作比较。通常建筑师是负责设计你的房子的,而我们的UX设计团队需要建立一个网站全面详尽的蓝图,里面包含网站的特性和功能,以及其他方方面面的内容。

但这些设计通常不是一稿就能搞定的。要想实现直观又吸引人的用户交互需要很多步骤。下面我自己总结了10个小建议希望可以帮助你设计出令人惊艳的交互式用户体验。

1.实实在在的为用户而设计

怎样做出引人入胜的用户体验

在线上交互还处在初级阶段的时候,我们其实没有太多考虑用户体验,用户也很愿意花时间学习如何使用网站。如果真的遇到实在不会的,人们也只会抱怨计算机水平不行或对互联网还不够了解。而随着越来越多的网站,移动设备和平板电脑的出现,用户显然不愿再像以前一样耗费学习成本在网站操作上面。现在的用户可不像以前那么容易讨好了,那些不合格的产品最终只会被用户抛弃的。

设计师当然是希望能够按自己的喜好和审美来设计产品。但很多时候这样做对提升用户体验没有太多的帮助,设计师和用户的偏好和需求有时候是天差地别的。应该多想想用户真正需要的是什么,然后用最直观有效的方法帮助他们实现需求。用户在网上的活动是多种多样的:浏览、搜索、玩游戏、看视频、办公或者想找一些专业的信息,这些用户行为是设计师需要考虑的。UX设计团队的工作就是要着眼用户体验的整体,然后确保用户的需求得到满足。

“为用户设计”是我们设计Civil War 150专题网站的基础,我们做的每一步设计都要从用户本身出发。在项目设计中,我们遇到最大的挑战是要处理数量庞大的历史事件和统计数据。为了能让网站与用户产生共鸣,我们使用了颜色丰富的信息图引导用户了解南北战争的史实,这里面包括“Who They Were”,“Weapons of War”,“How They Died”,“ 5 Deadliest Battles”, “Paying for the War” and “West Point Warriors”几大主题。通过给用户提供需要的信息,无论是南北战争的狂热达人还是7年级的历史学生,都能在学习南北战争的过程中得到丰富的知识和十足的乐趣。

2.做足功课

学习和吸收。你和客户沟通的越多,你了解的就越多。设计之前要深入阅读需求文档,对客户的领域也要做好研究调查,同时详尽地检查好所有内容,全面彻底地理解客户希望达到的目标(无论这个目标有多小),如果可以的话和各个部门的人员沟通了解,当然是越多越好了。在这些前期工作做好之后,我们也对项目有了最全面准确的了解,就可以进行下一阶段的工作了。

另外一个比较重要的,同行可能会有类似的产品案例分析,我们要善于从中学习。看看别人的作品是否有闪光点可以学习?里面有没有什么错误是自己可以避免的?你们的产品之间是否有共通的地方?他们的设计有没有什么缺陷?这些问题的答案会成为你项目的灵感来源之一。

你可以分析的案例类型中有些也许会让你觉得富有戏剧性。可能你正在设计一款音响设备的App,却要参考一个卖猫粮的产品。但是这对你的设计也会有帮助,因为在猫粮网站和音响设备网站上的用户行为很可能是十分相似的。除此之外,你也可以从不同的行业当中学到非常宝贵的用户体验方面的实践经验。

3.做用户的拥护者

我们时常把用户当做客户,虽然实际上不完全是这样的。任何项目都会要求达到一些商业目标,UX设计师的职责就是实现这些目标,同时又要让客户了解用户的需求。一个好的数字产品总是能在满足商业目标和用户需求之间找到平衡。

4.忘掉Nancy,多想想用户类型

当我们开始构建内容时,人物角色(persona)就变得很重要了。纵观网站全部内容,思考用户想要的是什么。这样可以帮助确定内容的优先级并确保我们构建的内容是以用户为中心的。但是传统的人物角色是这样构建的—“南希,一个28-35岁的妇女,开着一辆经济适用车,有一台用了4年的电脑,主要用来发邮件,年薪30K-50k,她想到比价商店买便宜的机票去看望弗罗里达的妈妈。”— 这样的人物角色构建方式对实际的用户行为没有深入了解和表现。

译者注:Persona即人物角色,是指针对网站目标群体真实特征的勾勒,是真实用户的综合原型。我们对产品使用者的目标、行为、观点等进行研究,将这些要素抽象综合成为一组对典型产品使用者的描述,以辅助产品的决策和设计。简单说来,Persona是在大量调研的基础上经过处理的真实有效的数,抽象出角色、场景、剧情的特征,形成一个或多个虚拟角色。(来源:百度百科)

相反的,我们根据用户在网上的行为来给不同的用户类型分组,例如“浏览信息”、“比价购物”、“消磨时间”、“查找专业信息”等行为。这样分组会让你更容易理解我们的用户出于什么原因而使用网站和App,以及文本的使用情况,用户搜寻的内容以及时间的使用。掌握了这些信息后,你可以基于用户的行为模式设计出更好的网站或App,这时用户的网名,年龄,职业和收入水平这些信息也就变得无关紧要了。

4.少即多

相信这个道理大家都了解了,很多人会觉得没有解释的必要。但是很多网站和App仍然不能正确的应用这一原则。其实关键点在于将用户所需的内容删减到最低限度。那些没有价值、混淆用户的内容应该果断删除。你要十分清楚你希望用户怎样来使用你的网站或应用,引导他们在你的网站中穿游。还有,用户总是希望操作越简单越好,速度越快越好。如果不用点按钮就可以自动跳出下面的内容,用户一定是非常欢迎的。

举个例子吧! 我们和Google团队一起做过一个项目—“20 Things ILearned About the Web and Browsers”。这个项目的难点在于要让在线用户感受实际阅读中的触觉体验。我们在项目中加入了很多互动功能:即时搜索,翻页动画,增强页面的插画,离线模式,书签和熄灯模式。我们尽量做得简单,有趣,内容又充实,让用户获得舒适的阅读体验。正是我们的设计从能从用户的角度出发,用户才能在浏览网页的过程中愉快地获取知识。

 6. 把自己当做是在为FisherPrice工作

怎样做出引人入胜的用户体验

译者注:原文的标题是“Pretend you’re working for FisherPrice”,这里的FisherPrice应该是指美国的第一玩具品牌—费雪。如果翻译有误欢迎批评指出。

我们的CEO David Martin说过这样一句话我很赞同—“All interaction should feel like FisherPrice。”换句话讲,当你设计一些大号的物品(比如儿童玩具)或为“粗手指”的用户量身定做的数字体验时,你会发现它同样会被其他用户所接受。

设计中,试着使用尺寸较大的按钮,滑块,字段来代替传统的输入字段。这样可以有效的提高用户参与度并降低跳出率。这不也就是一个UX设计师所追求的吗!

标签的设计也相当重要。当你需要提示用户提供注册信息时,措辞要简单、直接、准确,这样可以减少很多不必要的麻烦。而且会让用户在情感上强迫自己完成一整套注册流程。当然了,这也就意味着用户量、流量、订单、收益率的增长。

日本发生9.0级地震时,全世界都伸出了援手。我们和Google团队开发了一个平台,让全世界的用户一起分享日本的消息(Message for Japan)。在Fisher Price的启发下,我们的网站用很大的按钮将这些消息分为两大类别——“Love”和“Hope”,同时也用了大尺寸的输入字段号召人们“Write Your Message”和“Make a Donation”。

7. 从平板电脑得到启发

怎样做出引人入胜的用户体验

译者注:原文标题“Take cues from tablet”。

鉴于现在平板电脑的普及度越来越广,简化我们的交互设计也变得很有必要。问问自己的设计是否能在平板电脑上完美运行。如果答案是肯定的,那么恭喜你,你的设计已经具备一个强大的用户体验所需的2个基本构建块:清晰的层次结构直观的方式表达

我们曾和CBSNews.com联手为美国的观众创建一个“elegant and visually rich online news experience(优雅并且视觉丰富的在线新闻体验)”——60 minutes,在设计过程中我们考虑了结构上的层次和视觉上的直观表达等问题 。

8.设计你的UX

设计不是简单的排个版,加些占位文字然后再来个导航条就够了。这里面涉及到的视觉层级结构、内容编排、留白、定位和尺寸等等一系列的问题在线框图设计阶段就要解决好。在线框图设计阶段,如果能按照真实的设计标准来设计的话,那你的方向就是正确的。

9.和各个部门通力合作

孤立地做用户体验设计不能造就一个好的作品,而且设计上的很多问题也不能得到解决。学会倾听、协作并成为客户、用户和内部团队之间沟通的桥梁。只有这样才能为用户设计出最好的用户体验同时又满足客户的商业需求。

记住,你不是一个人在做设计。UX设计师,视觉设计师还有交互设计师共同造就了一个项目的成功——这是需要多方协作,多部门共同努力才可以完成的目标。当每个人都能在工作中一起分享激情,各尽其能,畅所欲言,往往就能创造奇迹。

10.不给自己的作业评分

设计是很少可以一击命中的,在项目的跟进过程中要做好迭代设计的准备。我始终坚持认为设计师对自己的作品应该只做定量分析。跟踪产品性能表现并理解哪里用户量正在下降是非常重要的,这些工作应该在内部完成。而且只有让第三方来进行用户数据的定性分析才能保证项目测试环境的客观性。如果这也由内部来完成,就会好像你做好作业然后自己修改一样,很难得到想要的真实数据。所以,设计师要想获得真实的客观的答案,就让别人来做用户测试,然后将测试得到的数据应用到下一次迭代设计中。

 

专注交互设计的分享资源学习平台官方公众微信号:我是UE

官方微博:我是UE网

Q群:156360020 验证:iamue

3.pic

原创文章,作者:Smiler李想,如若转载,请注明出处:https://www.iamue.com/5178/

(0)
Smiler李想Smiler李想
上一篇 2015-04-20
下一篇 2015-04-20

相关推荐

  • UED专访 | 众建筑:未来城的边缘

    📌 编辑 | 裴盛📌 采访| 杨紫惺 李思远 李佳琪📌 视频 | 裴盛EXCLUSIVE INTERVIEWUED × 众建筑玻璃框景中,映出木构的筋骨红砖青瓦间,闪烁金属的光芒古老与现代在这座“新生”四合院中交织年轻的的思想碰撞出新时代的活力观察生活、测试构想、生产建造踏进“众建筑”,寻觅空间的更多可能点击观看专访视频UED × 众建筑专访视频 ©UED1“三人成“众”“众建筑”,既是对其由三位合伙人共同创立的直观描绘,更符号化地表达...

    2018-02-07
  • 清华社1月诚意书单 | 什么是交互设计?

    什么是交互设计?一、交互是个筐,啥都往里装交互(inter-action),从字面上理解,就是 A 和 B 之间的一系列动作和行为。比如,早上你出门时碰到邻居,冲 ta 喊一声“早”,ta 对你点头、微笑,说“早” —— 这就是一个完整的互动过程。当然,互动不仅限于人与人之间,还可以发生在系统和系统之间,比如人和机器,人和环境,机器和环境,等等。这可是个要命的问题:几乎在同一个次元的人和 “物”,都可能发生互动。当然,我们主要关注发生在...

    2018-01-31
  • Sketch 一定要会的那些快捷键

    Sketch的快捷键功能一般,不能自定义不说,关键的有点常用的快捷键都没有设置,所以我们就需要更好的利用好这些有快捷键的功能,今天我就来说下这些常用的快捷键   sketch的快捷键功能一般,不能自定义不说,…

    2015-04-20
  • #UX第四课 我学会了玩玩具

    在同一时间,我成为一个父亲,刚进入UX的世界我,试图弄清楚,如何让我的产品,图象,可以理解的,易于使用的,直观的。我是一个巨大的玩具风扇,还是玩弄他们之前,我的儿子回来了,不过他在家里意味着更多的玩具和更多机会和他生命中的第一个月他观察他的互动玩具。看着他让我想起了和界面设计的普遍经验在我们的生活从一开始,我们如何如果我们打算建立一个可以理解的产品从那些经验特别是学到很多。

    2014-12-28
  • Sketch 49 新增交互原型能力

    看到更新弹窗蛮讶异的,完全没有见到相关消息或Beta版本,官方博客与Medium也毫无动静,太过突然,总之就是这样:“Prototyping: You can now connect Artboards with Links and Hotspot layers to create prototypes of your designs that can be viewed in Sketch Preview,Sketch Cloud,a...

    2018-03-02
  • 为什么重视用户体验的公司最后死掉了?

    今日头条候选:易到完成股权变更,乐视仍未完全退出;“ofo小黄车”被诉商标侵权;今天,给大家推荐的头条是「黑马高管营」导师刘爽从管理决策角度分享如何做决策、决策的依据以及避免陷入的误区,值得每一位管理者仔细阅读。【黑马高调头条】第185期文 | 创业黑马学院什么是管理决策论?管理决策论就是在管理中做各种决策的相应依据。很多创业公司的折腾闹剧现象,就是管理层管理决策弱的结果,如果具备基本的make sense,有些“学费”不是一定要交的,...

    2018-01-30
  • 大产品小细节!5分钟带你了解经典的费茨定律

    金蝶云之家体验部交互设计 师-王梓铭:大家有没有想过为什么按钮越大,越易于点击 ?为什么相关按钮需要相互靠近摆放 ?为什么 Win 系统要将「开始」按钮放在角落 ?这些设定的背后其实都有一个在人机交互中,非常重要的定律 —— 费茨定律 。

    2017-09-25
  • 视觉设计,是优秀产品不可或缺的一部分

    视觉设计的重要性跟这个世界看脸一样,不言而明。译者注:Huggies是一个婴儿尿不湿的品牌。译者注:有时候设计师会先收集一些图片文字之类的东西弄出一个合集,作为设计的参考和灵感来源,这类东西叫做moodboard。具体介绍可参考:https://en.wikipedia.org/wiki/Mood_board

    2017-05-07
  • 关于Axure8.0中继器的使用1

    废话少说,请开始你的表演!!!1.拖入一个中继器,将中继器多余的行删除;2.在中继器中添加三列(可以直接双击编辑),分别命名:name、sex、age;3.双击拖入的中继器会跳转类似动态面板的“(中继器)(page2)”新页面;4.在(中继器)(page2)中再添加两个和已有矩形大小一直的矩形,分别命名:name、sex、age;关于中继器的准备工作完毕,因为中继器需要存放动态数据,所以需要在页面增加动态数据的输入入口。5.回到拖入中继...

    2018-03-10
  • Excel 实现微信动态图表的交互体验

    昨天说的干货贴,文末有下载方法。微信后台有一个不错的动态图表,可以借鉴到我们周报月报的制作中运用:它的交互特征:①鼠标单击上方的扁平化指标选项卡,切换下方的动态图表。②鼠标悬停下方的折线图,会出现小圆点、竖线和提示框突出显示当前数据点。如果用 Excel 仿制,通常是使用窗体控件来制作动态图表,交互效果如下:需要用到的知识点,窗体控件用单选按钮或下拉框,函数用 index 或 offset,这个我们在《让你的图表动起来》课程里已经有专题...

    2018-01-30