首页

让设计更具有趣味性的5大TIPS

用心设计

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

 

这是一个创新的年代,如果你的设计千篇一律,哪对用户来说,这是很乏味的作品。所以在满足设计需求的同时,我们可以加入一些趣味性的东西,比如方案、声音、交互细节、图像等等,让页面更加有趣。

这里有5个提高设计更有趣味性Tips,欢迎大家在设计项目中尝试。

一. 就是不能好好讲话

通过夸奖、傲娇的语气满足用户虚荣心及好奇心

文案的趣味化,简单有力,看似不经意,但却是最直白的幽默。像下图小红书的随机点赞设计,每次点赞的提示不同,有的是夸奖、有的是暖心告白、有的是引导用户继续点赞…这样的设计,因为有惊喜感,所以激发了用户的好奇心,并不断点赞尝试。

而网易云音乐的Mac安装包提示文案:「你的Mac终于拥有最佳音乐App了!」不讨论产品好坏,这句文案就一语双关,既夸奖了自己产品好,也夸奖了用户有品。

用「机智」的话有情感的引导用户

下面的两个场景是我们最熟悉不过的聊天页及注册页。左边是主打微社交的Nice,在没有消息的时候它不是生硬的提示0条消息,而是很好的结合了自己产品的微社交调性,委婉的告诉用户你是不是应该主动些?而不是被动的等待。从情感上用户会觉得更放松也更容易接受这样的建议。

右边是same的注册页,通常注册页都枯燥而冗长,为了避免用户产生负面情绪,Same这里的性别选择文案是:女生果然总是对的!男生有时候也是对的!在填表产生抗拒心理的时候出现这样讨好的文案,谁还会有什么负能量呢?

文案说他想领便当了

对于开玩笑要有一个度,像作到飞起的手机端网易云音乐的推送文案:「你这么爱听歌,一定活的很难过吧」。虽然可能说的是实话,但是没人愿意听这样的大实话,所以对于一些相对玻璃心的用户来说会觉得受到了嘲讽,这样的文案就容易起到反向作用。

△ 微博评论截图

二. 扁平里的写实派

模拟真实场景,让用户感受细节的用心

这里更像是拟物化行为的设计,模拟真实的使用场景。将我们在日常生活中习以为常的小细节,融入到页面细节的设计中去,被用户发觉时应该会会心一笑吧。这也最能体现设计师的观察力及对细节的把控力。像iOS的手电筒开关设计和飞行模式的设置就是这样的,手电筒开关的时候,上面的小按钮也会跟着开和关,飞行模式的开关则有一个向右的飞行路径,并不是生硬的出现然后消失。

对模式化的元素注入性格,增加新鲜感

这里还是拿Same举例,通常我们用的p图软件的滤镜,一般是以色彩给人的直观感受来命名的。而Same的每个滤镜有自己的名字、性别、出生年月甚至的表情、性格(据说每个原型是来自他们团队的设计师),这样的设计确实会让人觉得:「诶!有点意思,跟外头那些妖艳滤镜果然不一样呢!」

三. 玩不腻的小彩蛋

打破常规,吸引用户注意

对于熟悉的行为我们会产生枯燥的情绪,然后随之会忽略。当在熟悉的情境下,出现了意想不到的小彩蛋,必然会增加用户印象,提高用户注意力,并产生积极愉快的情感。像Facebook的聊天表情,在输入时长按,就会变成超大的表情,好比在说给你一个大大的赞、给你一个大大的爱心……这样的设计,真的是会玩到停不下来 。

情理之中意料之外,增加用户印象

我们都知道的格瓦拉,在线选座时遇到一些院线热映,选座状态会变成电影的主角头像 ,这对用户来说是一种加深印象的预热,要比默认选座状态更有代入感。

最美有物,是一款销售设计师产品的平台,印象最深刻的是喜欢与不喜欢的表态设计,他的主张是找到同样品味的人,所以这里的小动画就做的细腻又有趣,将不屑和喜欢表达的淋漓尽致,比起正常的点击即高亮,更能表现用户的情绪、产生共鸣。

贴心设计,让用户产生好感

使用金融类软件时,最怕的是没钱,更怕的是有点钱刚点开App旁边有人过来了, 这时候匆忙关闭显得很不自然。微众银行的滑动隐藏资产的设计很好的解决了这个问题,保护了私密性的同时操作起来也不会显得那么尴尬,这样真正的替用户考虑的设计怎么会不让人产生好感?

四. 不如一起玩游戏

用激励的方式满足用户虚荣心与攀比心

通过设计一些有挑战性的小游戏,让用户参与进来,可以激发用户的好奇心以及攀比心,在完成任务的过程中满足用户的存在感、归属感及参与感,游戏的设计也是这里面互动性最强的一种设计,也是最有趣味的。Nice就使用了收集徽章的方式来鼓励用户发图片、使用功能等,对用户是激励的同时,并可满足用户在其好友跟前的攀比心。

奖励化,让用户有存在感与归属感

Same平台的早安、晚安打卡功能,会随机赠送给用户一首歌,打卡这件事一方面对于平台来说提高了用户留存,另一方面对喜欢音乐的用户来说则找到了归属感与存在感,会觉得有这么一个平台是懂他们的。

下面两个利用奖励化机制提升参与感的例子来自腾讯先游。

第一个是贴热。用趣味选择题的方式让枯燥的签到变得有趣起来了。

第二个是游戏体验建议收集。其实通俗点就是产品体验反馈、帮助产品优化流程等,但是这里变成了领取任务,并且有相应的奖励,提升了用户参与感的同时满足了用户的归属感,因为奖励机制会让用户觉得自己的建议会有可能被采用,而不是反馈了就没有然后了。

五. 制造点声响

不同感官的刺激来增加产品印象及代入感

声音的提示可以起到未见其人先闻其声的效果。声音作为操作行为的一种反馈,提示用户的同时,增强代入感。比如微博国际版客户端,在发送状态时,小飞机飞出去的时候会伴随着:「嗖」的一声,让用户有一种发送成功的确定感。而Mac系统截图行为,则伴随着像裁切纸张一样的「咔嚓」声来提示截图成功,就非常的具有代入感。

最后,我会以我比较熟悉的游戏平台项目,简单总结一下各种置入趣味设计的方法:

可以尝试从文案的方向进行优化,比如将搜索游戏提示语:「未搜索到某某游戏」变成:「诶,你刚才可能输入了假游戏,不如再来一遍?」。

融入一些激励化的小游戏来增强玩家互动,提升用户品牌感知等。

设计与品牌风格统一的有趣反馈动画,或在适时置入声音作为彩蛋,增加整体的趣味氛围。

而不论是以上哪种手段,在使用之前都要认清,趣味设计都是设计上的一种锦上添花,增加趣味需要在满足产品功能的前提下进行,不必为了有趣而强行有趣。在设计的过程中也要多思考下是否可以做更多深入的细节优化,反复推敲,最适当的场景中融入细腻的情感化设计,让趣味成为我们设计的点睛之笔。

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

掌握这5个关键点,零基础也能建立信息架构

资深UI设计者

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

什么是信息架构?怎么理解用户体验五要素?本文用大量的案例和插图帮你轻松掌握这个基础知识。

今天想要跟大家聊一聊关于 UX 和 IA 的话题。其实在写今天这次分享的题目的时候我修改了很多次,为什么会修改很多次?这要从我在 medium 看的一篇文章说起,这篇文章的标题是《6 Tips How to Apply Information Architecture in UX Design》,翻译过来的意思是在用户体验设计中如何建立信息架构的6点建议。

当时读完文章,虽然觉得文章里讲的一些散碎的概念迷迷糊糊可以理解,但这些概念就像盖房子的砖块一样,我完全不知道这些砖块该怎样才能盖成一栋大楼,或者我就站在楼下而因为自己视野有限完全不知道这栋大楼到底长什么样子,所以因为这个原因我一直苦恼于该如何去清晰的表达想要分享的内容,思来想去决定这次分享不能仅仅是我对某篇文章的翻译,想要弄清楚这篇文章到底在讲什么,先要弄明白文章里的知识,当我们了解清楚了这些信息之后再来理解这篇文章就会轻松容易得多,下面就将我总结出来的内容分享给大家。

一、UX & IA

UX 即 user experience,译为用户体验。

IA 即 information architecture,译为信息架构。

他们的关系可以简单理解为良好的信息架构是用户体验的基础。

我们平时听到了太多关于用户体验的东西,大家都以为用户体验就跟交互设计差不多。我之前确实也是这么理解的,但是最近发现我的这个想法是有些过于片面了。

我们可以把用户体验的工作分解成五个组成要素,分别为战略层、范围层、结构层、框架层、表现层。

它们都是自下而上起作用的,每一个层面都是根据它下面的那个层面来决定的,所以表现层由框架层来决定,框架层则建立在结构层的基础上,结构层的设计基于范围层,范围层是根据战略层来制定的。每一个层面的决定都会影响到它之上层面的可用选项,信息架构只是用户体验结构层的一部分而已。

二、什么是IA

IA 即 information architecture,解释出来就是合理的组织信息的展现形式。

主要任务是为信息与用户认知之间搭建一座畅通的桥梁,是信息直观表达的载体,通俗点说就是信息架构不仅仅是设计信息的组织结构,还需要研究信息的表达和传递。

这么说也许还有些抽象,举个简单易懂的例子:

我们来看这个商场的平面解析图,通过这个图我们可以很清楚的了解商场的结构,从而快速定位自己的位置还能顺利找到自己想要购买的产品。信息架构对于一款产品来说就相当于商场的平面解析图,就像现在我们看到的这幅图一样,商场的每一层都有相对应的分类区块来指导消费者。试想如果一个商场没有对商品进行有序的分类,那么我们在逛商场的时候就很难顺利挑选出自己所需要的商品,面对各种无序且数量繁多的商品我们一定会崩溃,这样的情况对于男士来说绝对是场灾难,但对于女性来说也许会是一个充满未知探索的挑选过程吧。

但不管怎么说在这里设计师需要做的就是规划好这些楼层信息层级,主要做的工作就是:分类、层级梳理等。简单的说就是规划好每一层有什么商品,同一层商品怎么分布等等信息。

所以在互联网产品设计中:设计师梳理信息架构,其实和刚才说的梳理商场楼层架构的概念是差不多的。

三、IA的作用

一个好的信息架构一定是会满足两个维度的需求,即用户需求和产品目标。

从用户的角度出发它可以让用户在一定的信息规划下更容易找到自己想要的「东西」。

从产品目标角度来看它能通过「信息架构设计」去教育、说服、通知用户。

所以用最简单的两个字来说其实信息架构就是在做分类。

再回到刚才那个例子想一想,把商场里的商品分类其实对于我们产品而言就是在给我们产品中的信息分类,以方便用户能更好的使用我们的产品,而不会想要把产品卸载,从而使产品达到易用好用想用的目的。就跟我们逛商场一样,当我们能够根据指示顺利买到自己所需的商品的时候我们就不会因为找不到我们想买的商品而失望的离开商场。

那么问题来了,我们该如何进行信息架构分类呢?也就是信息架构的分类方法是什么呢?

四、IA分类方法

这里给大家介绍2种方法,从「产品目标」出发我们可以采用「从上到下」的分类方法;从「内容和功能需求分析」出发就可以用「从下到上」的方法进行分类。下面来跟大家分享一下这两种方法的具体做法。

刚才说了从上到下是以产品目标即战略层出发的分类方法,所以最开始就是先从最广泛的、可能满足决策目标的内容与功能开始进行分类,然后再按逻辑细分出次级分类,这样的「主要分类」和「次级分类」就构成了「一个个空槽」,将想要的内容和功能按顺序一一填入即可。

我们以微信为例:首先根据产品目标将「主要分类」即一级架构分为「最近会话(微信)」、「通讯录」、「发现」和「我」;然后再进行「次级分类」分类,比如「发现」下再分「朋友圈」、「扫一扫」、「摇一摇」等等;最后将相应的功能(如朋友圈feeds、发朋友圈、朋友圈消息等)填入到相应的「朋友圈」分类中。

这样就像是先有了大概的框架我们再根据这些框架往上面加东西的感觉是一样的。

接下来我们再来说一说从下到上的方法:

刚才说了从下到上是由范围层驱动从产品的功能和内容层面出发的,所以我们就要先把已有的所有内容,放在层级分类中,然后再将他们分别归属到较高一级的类别。这种分类方法其实就是在做「归类」。

其实从下到上的信息架构方法也包括了主要分类和次级分类,但它是根据对内容和功能需求的分析而来的。先从已有的资料开始,我们把这些资料统统放到级别的分类中,然后再将它们分别归属到较高一级的类别,从而逐渐构建出能反应我们的产品目标和用户需求的结构。

具体工作中我们可以将所有的功能点用一张张卡片写下来,然后让目标用户参与到信息分类中,并反馈相关分类标准作为我们产品设计师去梳理信息架构的参考。实践过程中,更需要设计师或者产品经理本身有一定的信息筛选、梳理、分类的能力,进一步通过用户测试去检验分类的信息传达有效性。

其实就好像我们日常生活中收纳衣服,我们会根据不同标准去收纳,比如我们可以根据季节分类,也可以根据颜色分类,或者是根据款式分类,每个人都会有不同的分类习惯,所以这里归结到工作中才会让目标用户参与到信息分类中,毕竟我们的产品是服务于用户,所以还原用户使用习惯和使用心理也是我们同样要注意到的,这样可以给我们提供一些有效的分类信息帮助我们更好的做出清楚的信息架构。

当然这两种方法都有一定的局限,从上到下的架构方法有时可能导致内容的重要细节被忽略,而从下到上的方法则可能导致架构过于的反应了现有的内容,因此不能灵活地容纳未来内容的变动或增加,所以在实际运用中是需要我们将这两种方式结合起来灵活运用。

这两种方法虽然有不同的视角但其实最终目的都是让我们的产品易用好用最终达到想用的目的,所以让这两种方法对接、交汇、融合之后得出的结果才应该是我们理想中的产品信息架构。

五、影响IA的因素

刚才提到用户体验的5个层级是自下而上对其上面一层起作用的,信息架构位于用户体验要素第3层结构层,刚才说了结构层的设计基于范围层之上,所以这里遇到的影响因素我们还要返回到范围层面去寻找,范围层又包含两个维度,功能和内容,在从范围层到结构层这个过程中我们会遇到很多影响因素,所以把这些影响因素总结起来我们还是要从用户层面(内容)和产品层面(功能)两个维度来理解。

从用户的角度出发,理解能力、操作习惯、目标内容使用频率等等这些都会成为影响因素。

从产品角度来看,产品的核心价值、主线功能、特色功能等才是影响信息梳理的因素。

这两个层面当然也不是完全割裂的,在做信息架构的时候可以先从一个层面出发得出一个结论之后再用另外一个层面去验证得到的答案,然后再不断优化在验证过程中遇到的问题。

不同人会有不同的分类结果,因为根据不同情况我们所需要关注的侧重点会有不同,我们根据不同的影响因素会得出不同的答案。每个人都会得出不一样的分类结果,没有哪个结果是完全正确或者说是完全相同的,就像数学中的排列组合一样,内容越多我们得到的结果就会越丰富,但是这些结果当然不是全都合理的,所以就需要设计师根据自己的经验结合产品层和用户层的需求找到合理的解决方案。我们都知道在产品设计中想要设计出来一款完美不需要迭代优化的产品几乎是不可能的,所以我们能做的只能是结合各方面的影响因素和自己的经验理解一直优化产品让它接近于完美的状态。

现在我们来思考一个问题:为什么微信朋友圈这么高密度使用的功能要放到二级菜单呢?

微信的创始人张小龙是这样解释的:

  • 微信是个社交软件,核心功能是社交,是沟通,是好友,所以一级菜单只能跟这个相关。(产品功能层面)
  • 当朋友圈为二级tab 时,扫一扫,摇一摇,附近的人,漂流瓶,购物这些功能的曝光度就会下降,不利于微信功能的拓展。(产品功能层面)
  • 也许会造成各个模块分配不平衡,而且发现里的功能与其他模块的功能属性混在一起也许会不恰当,微信为了不让用户被过多的信息打扰把公共号打包放在一起,那么朋友圈随着联系人增多,分享动态也会增加,而且内容都是一些生活中的琐事,多少也会像公共号一样打扰到用户。(用户角度)
  • 设计并不是对用户有求必应,而是应该在产品发展战略的指导下平衡各功能。如果将朋友圈提升为一级入口,很明显微信的社交分享功能将得到强化,那么相应的其他功能将会被弱化,这与微信链接一切的发展战略是相违背的。(产品层面)

保持主干清晰,枝干适度。产品的主要功能架构是产品的骨骼,它应该尽量保持简单、明了,不可以轻易变更,让用户无所适从。次要功能丰富主干,不可以喧宾夺主,尽量隐藏起来,而不要放在一级页面。

举这个简单的小例子供大家了解信息架构这个概念,体会一下如何用一个更全面更发展的眼光去看待产品结构这个抽象的问题。

总结

要在 UX 中建立良好的 IA 我们需要特别注意的5个关键点:

  • 在建立信息架构之前确定产品目标(战略层)
  • 进行用户研究预测用户对产品可能产生的反应(范围层)
  • 合理运用认知心理学原理预测用户对产品可能产生的反应(结构层)
  • 根据产品信息结构去规划导航(框架层)
  • 注意视觉层次在内容的视觉表现中的重要作用(表现层)

所以我们绕了一大圈来看,在 UX 中建立良好的 IA 的5个关键点其实最后还是回归到了用户体验的5个要素。再回到刚开始分享提到的那句话,从上到下表现层是由框架层来决定,框架层建立在结构层基础之上,结构层基于范围层,范围层根据战略层制定。这里每一个层面都是根据它下面的那个层面来决定的,相当于把用户体验要素每一层需要做的事情从另一个维度又解释了一遍。

当然这里要注意一点,这些层级都不是完全割裂的,如果你要求每个层面的工作在下一个层面可以开始之前完成,那样一定会导致你和你的用户都不满意的结果,而相反的,应该规划好你的项目,让任何一个层面中的工作都不能在其下层面的工作完成之前结束。这里最重要的一条是,在我们知道基本形状之前,不能为房屋加上房顶。 不管我们是在这5个层级的哪一层,我们不能忘记的就是要把这些连成一个整体去理解,他们一定是相辅相成互相影响的。

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

关于页面打开的交互方式,这篇堪称最全面的总结!

资深UI设计者

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

本篇文章分别从页面打开方式的类型、当前页打开&新开页面、弹出框三方面对页面链接打开方式进行了探讨,给大家提出一些意见以供参考。

页面打开方式作为链接产品路径的基础,在设计的过程中,或多或少都会遇到选择的困扰,尤其是产品功能复杂,层级较多时,如何让用户按照自己的意愿清晰的浏览信息,保持操作连贯性,是值得体验设计仔细思考与分析的。

近期在所负责的设计项目中,团队对链接操作的打开方式产生了分歧,借此机会整理了一些案例与资料,就这个问题进行分析探讨,也给遇到同样问题的同行一些参考意见。

一、页面打开方式的类型

网页中可操作的链接,主要有按钮、icon 以及文字链接,设计中常用的打开方式则主要有以下三种:

1. 当前页打开

点击操作链接后,在当前的浏览器页面中进行内容显示与操作。

2. 新开页面

点击操作链接后,在浏览器中新开一个独立的标签页面,进行内容显示与操作。

3. 弹出框

点击操作链接后,在当前的浏览器页面中,弹出一个小尺寸的对话框,进行内容显示与操作。

二、当前页打开 & 新开页面

首先来说说最具争议的新开页面&当前页打开。在 HTML语言中,target目标有「target=_blank」和「target=_self」两种属性,分别代表「新窗口打开」和「当前窗口打开」,下图是这两个参数的属性描述。

从这两个参数的属性上来看,「当前窗口打开」是系统默认的处理方式。这个打开方式在国外的网站中实现方式比较统一,用户也形成了一致的习惯,但国内的形式则不尽相同,以至于一直颇具争议,不同类型网站之间、同一网站不同场景之间也没有一个明确的规则标准可供大家学习和参照。

针对这个问题的讨论,可以听到两种不同的用户声音,并且都站在各自的角度阐述其道理。

举个例子,我们以同类型网站(淘宝和亚马逊)的打开处理方式进行对比,来看一下用户习惯、功能场景对链接打开方式选择的影响。

首先,我们确定一致的功能场景:用户从首页中根据各种筛选条件,查找到心仪的商品。来看一下两个网站的处理方式:

可以看出基本是两个极端,差异非常明显,再来看个有意思的现象,亚马逊中国的商品搜索方式竟然又和淘宝一致了,难道链接打开方式的差异竟是中外用户习惯的差异?

这确实占了很大一部分原因,那么造成这种差异的原因主要有:

  • 早期的 W3C标准不支持 target=”_blank”(HTML语言中,在新窗口中打开链接)的属性,国外互联网普及也比国内早,于是用户慢慢养成了习惯。
  • 默认当前页面打开让国外用户觉得更有「礼貌」。如果用户想新开页面,可以鼠标中键、按住ctrl点击链接或者右键新窗口打开,此时用户更有选择权,可以自己决定打开方式;如果默认新开页面,则让用户失去了选择权。
  • 早期国内互联网发展较为浮躁,网站想通过新标签页打开方式,提高PV。
  • 国内网络普及晚,部分用户尤其很多老年人不习惯甚至或许不知道,页中有个后退前进按钮、面包屑可用,新开页面便于他们的操作。

那么,淘宝中所有的页面打开方式都是新开吗?不是。像「我的收藏」、「已买到的商品」、「购物车」等功能页面就是当前页打开。

同一个产品内部,如此区别设计的原因我认为有:

  • 用户的目的较为明确,查找对象确定。(用户想要查看的对象是确定的,如购物车中的产品,用户有明确的目标,找到链接打开页面即可,不像搜索查找商品,需要一步步缩小范围甚至比对查看)
  • 链接入口常驻在网站的信息栏,用户可以随时切换,操作方便,且不存在重新输入的成本。

关于这两种打开方式,到底哪种操作更顺畅,确实难分高下,就跟「确定和取消哪个在左,哪个在右」是一种性质的问题,没有好坏之分,关键是要看在哪种场景下使用更合适。

新页面打开适用的场景:

  • 页面内容没有关联性,且从逻辑上没有从属关系,相对独立。如:产品中的外链。
  • 存在多页面「比较」的操作,需要经常切换。如:淘宝商品详情。
  • 需要保留住前一页的操作不丢失。如:知乎上过滤出来的结果列表。
  • 功能分支存在穿插,当路径发生交叉时,最好新开页面。如:产品内部的跳转链接,导致信息关联的层级发生改变。
  • 具有辅助功能的操作。如:使用文档(PDF、图片等)需要来回参照。

当前页打开适用的场景:

  • 流程性的功能页面,前后操作存在关联和影响。如:下单支付、按步骤新增。
  • 同一层级内容间的操作。如:tab栏的切换。
  • 同一路径中的操作,用户当前的操作会对主页的内容产生影响。如:编辑一个配置,用户操作完,会回到当前页查看结果。
  • 用户具有明确目的性的操作,当前页有利于锁定用户注意力。如:淘宝中「我的收藏」。

以上是结合功能场景进行的选择侧重,如果就「用户体验」一定要分出个高下,我个人还是比较支持默认「当前页打开」,从体验角度分析,「当前页打开」略胜一筹的主要原因有以下两个:

  • 尊重用户的决定。当前页打开,将更多选择机会留给用户(鼠标中键、按住ctrl点击链接或者可以右键新窗口打开),一个具有良好用户体验的产品,在用户做操作的时候,总是能让他们按自己的意志做出决定。网站对每个链接强制打开新页面则剥夺了用户的选择权,因为不同的人有不同的浏览习惯和使用需求。
  • 体验一致。保持一致体验的设计才能让用户产生信任感与安全感。当用户在操作界面元素的时候,可以顺畅的知道、理解,并且能预料到将会发生什么,不会被分神,也不会被打断。任何违反这个原则的设计都将会演变成一种「以设计方意志为导向」的设计,而不是「以用户为中心」的设计。

小结

当我们不知道两种方式如何选择时,或许「不强制用户」才是最好的体验。因为我们面临的用户多样,电脑操作熟悉程度多样,因此不同用户对于打开方式的习惯也具有多样性,这个是设计者无法揣测和调查清楚的。

在「两害取其轻」的情况下,在当前窗口打开链接,不失为一个选择,尊重用户自己的决定,让用户对交互界面自主可控。

三、弹出框

弹出框(弹层)又叫模态对话框,是指在用户想要对当前对话框以外的应用程序或内容进行操作时的提示方式。它一般覆盖在整体页面之上,避免了页面跳转。

弹出框通常是为了显示一个单独的内容,在不离开整体页面的情况下有一些互动,提供信息和交互。

如下图知乎中的「写想法」,用户可以快速的在弹出框中记录个人想法,记录发布后,很顺畅的回到之前的路径上继续操作,便捷,操作思路清晰。

△ https://www.zhihu.com/

现在很多产品中的新增、创建,也都会采用弹出框的交互方式,当然前提是在弹出框中编辑的内容不是很多,此时弹出框不仅承载了信息编辑的功能,还可以作为上下文的跳转,帮助用户衔接路径。

如 iconfont 中的新建项目,用户新增后,页面会直接跳转到新的项目空间。

△ http://www.iconfont.cn

弹出框适用的场景:

  • 内容简单,没有复杂的操作,且具有临时性。如:新增一个收货地址,进行简要的输入编辑。
  • 更为详细的辅助说明,是对当前内容的快速扩展。如:缩略图,点击放大查看。

因此,弹出框可以较好的实现上下内容层叠的感知,不打扰用户的主路径,同时作为页面承载元素和用户操作的补充,起到承前启后的作用。

总结

本文结合这三种链接打开方式的页面交互关系,进行适用场景举例,并总结每种方式的优缺点,方便在设计中更好的根据不同的场景选择合适的页面打开方式。

当然,以上总结也是基于我个人的理解与经验,没有统一的用法和标准,在具体设计实践中,仍要靠设计者的直觉和经验来进行综合考量与判断。

作为体验设计师,如何规划用户浏览路径,是个需要严肃对待的命题。没有绝对的好与坏,但一定要结合产品类型、场景、目标用户等进行具体问题具体分析。

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

总结页面打开的交互方式,很全面!

用心设计

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

本篇文章分别从页面打开方式的类型、当前页打开&新开页面、弹出框三方面对页面链接打开方式进行了探讨,给大家提出一些意见以供参考。

页面打开方式作为链接产品路径的基础,在设计的过程中,或多或少都会遇到选择的困扰,尤其是产品功能复杂,层级较多时,如何让用户按照自己的意愿清晰的浏览信息,保持操作连贯性,是值得体验设计仔细思考与分析的。

近期在所负责的设计项目中,团队对链接操作的打开方式产生了分歧,借此机会整理了一些案例与资料,就这个问题进行分析探讨,也给遇到同样问题的同行一些参考意见。

一、页面打开方式的类型

网页中可操作的链接,主要有按钮、icon 以及文字链接,设计中常用的打开方式则主要有以下三种:

1. 当前页打开

点击操作链接后,在当前的浏览器页面中进行内容显示与操作。

2. 新开页面

点击操作链接后,在浏览器中新开一个独立的标签页面,进行内容显示与操作。

3. 弹出框

点击操作链接后,在当前的浏览器页面中,弹出一个小尺寸的对话框,进行内容显示与操作。

二、当前页打开 & 新开页面

首先来说说最具争议的新开页面&当前页打开。在 HTML语言中,target目标有「target=_blank」和「target=_self」两种属性,分别代表「新窗口打开」和「当前窗口打开」,下图是这两个参数的属性描述。

从这两个参数的属性上来看,「当前窗口打开」是系统默认的处理方式。这个打开方式在国外的网站中实现方式比较统一,用户也形成了一致的习惯,但国内的形式则不尽相同,以至于一直颇具争议,不同类型网站之间、同一网站不同场景之间也没有一个明确的规则标准可供大家学习和参照。

针对这个问题的讨论,可以听到两种不同的用户声音,并且都站在各自的角度阐述其道理。

举个例子,我们以同类型网站(淘宝和亚马逊)的打开处理方式进行对比,来看一下用户习惯、功能场景对链接打开方式选择的影响。

首先,我们确定一致的功能场景:用户从首页中根据各种筛选条件,查找到心仪的商品。来看一下两个网站的处理方式:

可以看出基本是两个极端,差异非常明显,再来看个有意思的现象,亚马逊中国的商品搜索方式竟然又和淘宝一致了,难道链接打开方式的差异竟是中外用户习惯的差异?

这确实占了很大一部分原因,那么造成这种差异的原因主要有:

  • 早期的 W3C标准不支持 target=”_blank”(HTML语言中,在新窗口中打开链接)的属性,国外互联网普及也比国内早,于是用户慢慢养成了习惯。
  • 默认当前页面打开让国外用户觉得更有「礼貌」。如果用户想新开页面,可以鼠标中键、按住ctrl点击链接或者右键新窗口打开,此时用户更有选择权,可以自己决定打开方式;如果默认新开页面,则让用户失去了选择权。
  • 早期国内互联网发展较为浮躁,网站想通过新标签页打开方式,提高PV。
  • 国内网络普及晚,部分用户尤其很多老年人不习惯甚至或许不知道,页中有个后退前进按钮、面包屑可用,新开页面便于他们的操作。

那么,淘宝中所有的页面打开方式都是新开吗?不是。像「我的收藏」、「已买到的商品」、「购物车」等功能页面就是当前页打开。

同一个产品内部,如此区别设计的原因我认为有:

  • 用户的目的较为明确,查找对象确定。(用户想要查看的对象是确定的,如购物车中的产品,用户有明确的目标,找到链接打开页面即可,不像搜索查找商品,需要一步步缩小范围甚至比对查看)
  • 链接入口常驻在网站的信息栏,用户可以随时切换,操作方便,且不存在重新输入的成本。

关于这两种打开方式,到底哪种操作更顺畅,确实难分高下,就跟「确定和取消哪个在左,哪个在右」是一种性质的问题,没有好坏之分,关键是要看在哪种场景下使用更合适。

新页面打开适用的场景:

  • 页面内容没有关联性,且从逻辑上没有从属关系,相对独立。如:产品中的外链。
  • 存在多页面「比较」的操作,需要经常切换。如:淘宝商品详情。
  • 需要保留住前一页的操作不丢失。如:知乎上过滤出来的结果列表。
  • 功能分支存在穿插,当路径发生交叉时,最好新开页面。如:产品内部的跳转链接,导致信息关联的层级发生改变。
  • 具有辅助功能的操作。如:使用文档(PDF、图片等)需要来回参照。

当前页打开适用的场景:

  • 流程性的功能页面,前后操作存在关联和影响。如:下单支付、按步骤新增。
  • 同一层级内容间的操作。如:tab栏的切换。
  • 同一路径中的操作,用户当前的操作会对主页的内容产生影响。如:编辑一个配置,用户操作完,会回到当前页查看结果。
  • 用户具有明确目的性的操作,当前页有利于锁定用户注意力。如:淘宝中「我的收藏」。

以上是结合功能场景进行的选择侧重,如果就「用户体验」一定要分出个高下,我个人还是比较支持默认「当前页打开」,从体验角度分析,「当前页打开」略胜一筹的主要原因有以下两个:

  • 尊重用户的决定。当前页打开,将更多选择机会留给用户(鼠标中键、按住ctrl点击链接或者可以右键新窗口打开),一个具有良好用户体验的产品,在用户做操作的时候,总是能让他们按自己的意志做出决定。网站对每个链接强制打开新页面则剥夺了用户的选择权,因为不同的人有不同的浏览习惯和使用需求。
  • 体验一致。保持一致体验的设计才能让用户产生信任感与安全感。当用户在操作界面元素的时候,可以顺畅的知道、理解,并且能预料到将会发生什么,不会被分神,也不会被打断。任何违反这个原则的设计都将会演变成一种「以设计方意志为导向」的设计,而不是「以用户为中心」的设计。

小结

当我们不知道两种方式如何选择时,或许「不强制用户」才是最好的体验。因为我们面临的用户多样,电脑操作熟悉程度多样,因此不同用户对于打开方式的习惯也具有多样性,这个是设计者无法揣测和调查清楚的。

在「两害取其轻」的情况下,在当前窗口打开链接,不失为一个选择,尊重用户自己的决定,让用户对交互界面自主可控。

三、弹出框

弹出框(弹层)又叫模态对话框,是指在用户想要对当前对话框以外的应用程序或内容进行操作时的提示方式。它一般覆盖在整体页面之上,避免了页面跳转。

弹出框通常是为了显示一个单独的内容,在不离开整体页面的情况下有一些互动,提供信息和交互。

如下图知乎中的「写想法」,用户可以快速的在弹出框中记录个人想法,记录发布后,很顺畅的回到之前的路径上继续操作,便捷,操作思路清晰。

△ https://www.zhihu.com/

现在很多产品中的新增、创建,也都会采用弹出框的交互方式,当然前提是在弹出框中编辑的内容不是很多,此时弹出框不仅承载了信息编辑的功能,还可以作为上下文的跳转,帮助用户衔接路径。

如 iconfont 中的新建项目,用户新增后,页面会直接跳转到新的项目空间。

△ http://www.iconfont.cn

弹出框适用的场景:

  • 内容简单,没有复杂的操作,且具有临时性。如:新增一个收货地址,进行简要的输入编辑。
  • 更为详细的辅助说明,是对当前内容的快速扩展。如:缩略图,点击放大查看。

因此,弹出框可以较好的实现上下内容层叠的感知,不打扰用户的主路径,同时作为页面承载元素和用户操作的补充,起到承前启后的作用。

总结

本文结合这三种链接打开方式的页面交互关系,进行适用场景举例,并总结每种方式的优缺点,方便在设计中更好的根据不同的场景选择合适的页面打开方式。

当然,以上总结也是基于我个人的理解与经验,没有统一的用法和标准,在具体设计实践中,仍要靠设计者的直觉和经验来进行综合考量与判断。

作为体验设计师,如何规划用户浏览路径,是个需要严肃对待的命题。没有绝对的好与坏,但一定要结合产品类型、场景、目标用户等进行具体问题具体分析。

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

论打造用户体验和数值系统,你得看看游戏类产品

用心设计

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


互联网产品有很多种,比如电商类、工具类、资讯类、财经类。但在看过很多产品之后,作者发现论产品体验,最强的是游戏类。当然游戏做为一种特殊的产品,有时候不会被列入以上类型,且游戏的产品经理一般被叫做游戏策划以及数值策划,分别负责不同的内容。

一、为什么说游戏的产品体验很好?

之所以这样说是因为游戏类产品有一个特点即它是没有用的,或者说它的唯一用途就是好玩。这样有一个问题便显而易见了,即对于大多数产品来说用户体验好是锦上添花的事情,而对于游戏类产品而言,这可能是唯一的卖点以及生死线。

举几个例子来说明:

  • 单位或者学校的官网,相信用过这些的人都会发现它们是多么的难用,而且很多年从不更新,但是你没有得选,只好使用它;
  • 微信以及 QQ 也是同理,虽然不是必选,但是以其覆盖率来讲,大多数人依然无法选择不使用它们。因此微信有足够的理由不全力以赴,腾讯完全可以将精力和人力投入到更加赚钱的网游领域。当然,最近新型社交软件(抖音、快手)的崛起似乎是给了腾讯一定的威胁,让它不得不再次严阵以待;
  • 而抖音和快手就得好好做了,必须足够好玩以及新奇,毕竟这并不是刚需,如果没有足够好的用户体验完全可能被删除。毕竟删除了他们对于用户而言几乎没有任何不便,还能节省不少时间;
  • 那么再进一步呢,再进一步就到了游戏类产品。游戏类产品的刚需性更加弱,而且还被全社会妖魔化,最近 steam 入华不利,以及孩子跳楼怪绝地求生又将它推向了风口浪尖。让不少人不得不呼吁「管管孩子,救救游戏」。

通过上面几个例子不难看出,随着刚需的减弱以及依赖性的降低,产品对于用户而言不可替代性就越低。比如单位或者学校的官网哪怕做成非图形界面,恐怕员工和学生都得自学了接着用。而游戏则不然,不仅面临着用户随时可以放弃的情形还得时刻注意政策动向。

因此即使不去使用产品,我们也不难猜出游戏类产品的用户体验必须非常好才行。毕竟只有有依靠的产品才能够做到有恃无恐,而游戏类产品则是时刻在刀尖上舞蹈,用户和政策都不敢得罪,必然得绞尽脑汁才能生存下去。

人都是有惰性的,一旦有恃无恐将没有多少人和公司愿意继续创新,毕竟你没得选。

二、以崩坏3为例谈谈用户体验

1. 从侧面展示其用户满意度

为何选崩坏3呢?原因很简单,因为它的推广模式以及用户体验都是一流的,不仅做游戏,而且 CG,漫画,周边同步推进。选择了3D萌风格后又通过哔哩哔哩这一平台进行了推广,对用户的了解之深入让人佩服。

b站的推广对于崩坏3而言,绝对是最好的选择可能都没有之一。原因很简单,两者用户重叠度太高了,且 b站专门有崩坏3类似的模块MMD 3D。当崩坏3到达b站后,up主们则自发的开始了宣传,例如热门中的第四位就是崩坏3的内容。

如果搜索崩坏3的经典角色 CG女王降临,可以得到如下结果:

仅前面几个视频的播放量可能就有近300w,而且是精准用户的300w次播放,其宣传的成功不难理解。当然这里你可能要问了,不是谈用户体验嘛,说这些和用户体验有什么关系。

其实是有关的,通过下面这张图很容易从侧面反映出用户对其热爱的程度。

这些视频全都是用户自制的,这种热爱是很切实的。试想当初最火的魔兽世界上映,很多人穿着联盟或者部落的衣服去电影院不就是对游戏最大的认同吗。

这里也是一样,你会为一个你不喜欢,用户体验差到崩溃的产品花费几天甚至一个月的时间去做它的周边视频吗,所以其优秀其实是毋庸置疑的。

2. 分析其用户体验

这张图片即该游戏的欢迎界面,接下来让我们细细来分析其用户体验点好在哪里。

上图即为游戏界面展示,仅一个界面就有很多点设计来增强用户体验。

  • 感叹号:代表了可以领取的奖励,大家领取奖励的时候是开心的,所以就给了最醒目的标志;
  • 波纹效果:次一级的提示,表示该功能下有可以做的事情,算是任务发布;
  • 收起功能:点击可以收起,然后截一张图,截图如上上图所示,很完美的效果,用户有炫耀的心理,所以可能会将其发朋友圈或者作为桌面,增强传播。当然这里不玩游戏的人可能不好理解,其实有的角色是非常难获得的,加上皮肤价格会很高,用户有足够的动力去炫耀;
  • 拍照功能:如上上图所示,可以对图像进行拍照,虽然也可以截屏,但确实是很贴心的功能;
  • 和看板娘对话:这样的做法并不少见,即给产品一个人设,增加用户的认同感,比如小冰等,这里的看板娘对话根据角色的不同而不同,甚至有的用户会为了看不同人物的对话而去收集人物,在增强用户体验的同时也增加了用户购买欲,一举两得;
  • 全屏VR:画面并不是静止的,如果手机旋转,图像会移动,给人手机屏幕后的场景是真实场景的感觉,虽然幅度不是很大,但还是有一定的 VR感的。

当然其优秀的用户体验点完全不止这些,作为一个体积3G多的程序有许许多多的界面,但介于游戏和产品的逻辑还是有区别的,就不展开继续讲了。但有一点是值得注意的,即整个游戏的任何界面几乎都是在用心去做,将用户体验做到了。

三、以崩坏3为例谈谈数值系统

数值系统顾名思义就是一个产品的数值设计,比如:得多少积分用户可以升级,在搞活动的时候是否应该赠送 VIP,如果赠送了 VIP 多久比较好,VIP 应该有哪些权限,如果各种等级的 VIP 功能是不同的,那么一个级别应该差多少。

以上仅仅是产品的数值体系,而游戏的数值体系就更复杂了,比如:游戏货币的产出量以及回收机制,维持整个游戏世界的装备价值以及金币价值,防止产生通货膨胀。

产品和游戏有这样的区别很正常,毕竟产品只是提供一种服务,而游戏更像是打造一个世界,要考虑的东西在一定程度上和现实世界有相似之处,比如:交易方式、税收、货币体系、资源体系、玩家社群、不同势力的实力均衡。

现在让我们来简单分析,当然我们只分析在产品中也存在的数值体系,毕竟相信本文的读者都是产品人而不是游戏迷。

1. 崩坏的VIP体系

VIP体系对于企业而言是非常重要的,因为这是企业收入最主要的来源之一。

所以诱导充值是所有企业都必须面临的问题,那么大多数产品有哪些套路呢,一般有以下三个常见方式:

  • 首冲优惠:第一次充值会比较便宜,降低用户付费门槛,而当用户真的使用过 VIP 之后,再回到非VIP 就比较难了,可能将一个本来不想充值的用户转化为 VIP用户,即由奢入俭难;
  • 连续包月:不少用户懒于去取消掉这个功能,对于那些对价格不敏感且摇摆不定的用户而言,让他们通过连续包月进行消费是不错的策略;
  • 活动赠送:完成一定的任务,赠送VIP,理由和首冲优惠很相似,都是降低用户进入门槛。

现在让我们再来看看崩坏3是如何设计其 VIP体系的。

初始奖励非常丰厚:让用户忍不住想要充值,如上图所示,只需要充值非常少的钱,就可以获取以上奖励,而这些奖励非常不错。这点最大的意义在于让用户愿意去尝试充值,只要充值一次,以后就有可能继续消费。

限时购买:促销虽然老套,但却十分有用,这种倒计时总能够刺激用户的消费欲望。

月卡系统:很有意思的系统,充值一次之后可以每天都领取奖励,而效果是直接购买奖励的十倍。但只有每天不断的进行领取才能够达到获得奖励的目的。这种模式其实就是用日活换金币,虽然用户节省了钱但却必须每日登录才能够获取这些金币。

类似的策略拼团也有使用,不过不是用日活换金币而是用用户换金币。

2. 数值系统

数值系统对于游戏而言是生命所在,史玉柱曾说过:我不担心别人抄走我的系统,因为数值体系他们抄不走。

崩坏3的数值系统就不提了,因为太过复杂,而且与产品相关性也不是很大。

对于产品而言,数值系统没有那么意义重大,但也需要很好平衡各方的利益,否则可能让产品迅速衰落。

一个简单的例子即会员该有多少权利,不同等级的会员权利应该如何区分。比如以视频网站为例,假设有两种级别的会员,大会员和小会员。那么用户就有三种,免费用户,小会员以及大会员。假设会员的作用是看高清视频,而视频的级别有五个,等级越高质量越好。

那么该如何设置他们的权限呢,可能的方式有以下几种:

  • 方式一:普通用户等级一,小会员等级二,大会员等级三;
  • 方式二:普通用户等级一,小会员等级三,大会员等级四;
  • 方式三:普通用户等级一,小会员等级四,大会员等级五;
  • 方式四:普通用户等级二,小会员等级三,大会员等级四;
  • 方式五:普通用户等级二,小会员等级四,大会员等级五;
  • 方式六:普通用户等级三,小会员等级四,大会员等级五。

当然一般的 VIP 肯定不止有视频权限,还会附带一些其他权限,比如可以有打赏用的币,可以有更好看的头像框,文字的颜色是可以选的等等。

不难发现,这将是非常复杂的一个体系,哪种体系都对一些用户有利,对另外一些用户不利,如何合适的定制产品的数值系统就是一个很复杂的问题。如果体系偏向免费用户,可能让付费用户付费意愿降低,如果偏向付费用户,可能让免费用户觉得没有存在感,直接离开。

四、游戏给产品的启示

用心做产品是有用的:如今流量获取非常困难,产品的成功很大程度上取决于是否有流量扶持。这对于产品人而言是比较沮丧的现状,毕竟辛辛苦苦做一个产品结果比不上某些巨头产品的一个入口有效。这种情况确实是存在的,但我们也要相信产品的优秀绝对不是没有意义的;

可以用日活换收益:现在的产品VIP系统大多都是充值后获得权限,但完全可以做以下这样一个策略。比如:视频网站的 VIP 是一个月15元,那么我们可以推出一个套餐,一个月只要5元,但是这个套餐有个条件是每天登录后第二天可以享受 VIP服务,如果用户有一天未登录,那么第二天就没有 VIP服务可以享受,这种策略其实就是用10元钱换取了一个用户的每日登录;

精准营销事半功倍:崩坏3在 b站的广告效果非常好,而且直接引起了 up主的关注,他们会再次创作内容对崩坏3进行推广。但如果将这个广告投到58同城呢,可能就没有什么意义了;

数值系统平衡各方:免费用户和付费用户的关系非常复杂,两者既有利益冲突又可能相互转化,因此做好平衡非常重要,不要得罪任何一方。




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

超好用的用户体验提升模型

用心设计

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


用户体验一直是我们在产品设计中反复强调的问题,那么我们应该怎样提升用户体验呢?

经过项目中不断的探索与研究,结合几个方法论,我们整合出了一套用户体验提升的方法流程——用户体验提升模型。下面就来详细的介绍一下,希望能给大家帮助和启发。

先问几个问题?

  • 你知道你所负责的产品/设计方案的用户体验好还是不好?
  • 产品/设计方案体验不好时应该怎么做?
  • 这个产品/设计方案的体验具体有哪些问题?
  • 怎么优化出现的体验问题?
  • 哪些模块或页面的问题最迫切需要解决?先优化哪些?后优化哪些?

用户体验提升模型能很好的帮我们解决以上问题。

先介绍一下用户体验提升模型的流程:线上版本调研 – 协作启发式评估 – 问题分析整理 – 优化方案。

这篇文章也会以这个流程一一介绍。

一、线上版本调研

也可以是设计方案,我们采用了 SUS系统可用性量表进行调研,SUS 是评估产品可用性的一个花费少,但十分有效的工具。该量表包含了10条定向问题,每个问题均为5分,按强烈反对(1分)到非常同意(5分)评分。(各位小伙伴可自行网上查询系统可用性量表,有很详细的介绍,在这里不赘述了。)

最佳的方式是在线上直接上一个问卷调研来收集真实用户的反馈,然后对收集到的结果做如下算法:

  • 对于奇数序号的问题,将其得分减1;
  • 对于偶数序号的问题,将其得分被5减去;
  • 将所有问题的减法后得分加在一起,然后乘以2.5;
  • 计算出的结果即为我们产品可用性的得分。

1. 那么如何通过评分看出一个产品的好坏?

上图是一个评分参考,通过数据得出,系统可用性量表最终算出的评分达到70分左右,就可以比市面上一半产品可用性要好,也就是说这个产品的用户体验算是合格了。

但是系统可用性量表的评分结果是抽象的,这个分数只能让我们大概了解产品用户体验的好坏,在具体问题上却是缺失的,那我们知道产品评分较低时我们如何聚焦产品的优化方向呢?

二、协作启发式评估

1. 为什么是协作启发式评估而不是启发式评估?

因为启发式评估主要由几名交互专家以角色扮演的方式来完成设置的任务给出评估结果。优点是成本低、快捷,缺点也显而易见,一是交互专家团队中不一定有或者很少,二是可用性问题意见一致率很低,并不能很明确的指出为什么这是一个体验问题,有很多个人因素的主观见解。

因此我们决定用协作的形式来进行评估,而且不需要交互专家,可以是用户、测试、设计、产品、运营、商务等等,只要愿意参与测试,就可以。协作启发式评估以小组为单位,能够很好的整合出更多的问题,而且更准确。你说他们也不是交互专家,能起到好的结果吗?竟然都整理出方法了,那答案当然是能啊。

为什么能,因为整个评估过程中,我们是有的可用性原则来给予启发的,有了这套可用性原则,一秒变专家。

说到可用性原则,了解用户体验的都知道尼尔森的十大可用性原则,但是从1995年提出到现在,已经过去了二十多年,互联网世界已经发生了巨大的变化。在这样的情况下,尼尔森的十大可用性原则明显有些不那么符合或者说不能给出针对现今产品太全面的启发,所以,我们重新整理了一套可用性原则,这套可用性原则更针对现今互联网产品,基本可以覆盖到所有出现的用户体验问题。

我们称之为21条可用性原则。

有了这21条,可以让任何没有用户体验知识的人参与到协作启发式评估中来了,一秒变专家了。当然,这21条可用性原则我们也会迭代优化,目的是做到更符合现今产品、更全面的可用性原则。

2. 通过什么来确定的这21条可用性原则?

首先,我们都知道用户体验五要素,这已经是做产品设计的基本常识了。我们来看这五个层级对用户体验能产生影响的有哪些?战略层一定不会,如果一个产品立项了、已经上线了,一定是战略层成立了,如果战略层出现了问题那就要重新考虑产品要不要做或者是改变方向了。那么剩下的4个层级呢?范围层、结构层、框架层、表现层,其实都会出现用户体验的问题。那我们看看这几个层级所包含的内容,视觉呈现、界面设计、导航设计、信息设计、交互设计、信息架构、功能规格、内容需求,这样的话就有8个大类,然后我们通过多年的经验和对尼尔森可用性原则的理解,把可用性原则对应到这8个大类中,最后得到了这分类明确的21条可用性原则。

但是分了这8个类有什么用呢?读下去,你就会知道。

3. 具体方法

先说说调研的具体方法。我们以协作启发式评估的方法,组织好调研小组(8人以上,样本越多越好,反正最后还要去重),宣讲完流程方法和操作任务,就可以开始进行评估了。我们一般为了省时间,宣讲完就把表格发下去,让他们自己找时间完成表格,然后再收回来。

这个表格就是用户体验问题记录表。包括问题所在位置、对应的21条可用性原则、严重程度等级、问题描述。

三、问题分析整理

1. 收集了一堆问题之后应该怎么做呢?

通过小组会议讨论,把相同、相近的问题统一成一个,可优化的问题保留下来,不是体验问题的去掉,然后整理到一起,这就是整个产品存在的大大小小、各种各样的问题了。

接下来,我们引入另一个方法,就是用户体验八阵图。

这张用户体验八阵图的8个点是不是有些眼熟?没错,就是21条可用性原则里的8大分类,这就是上文为什么分为8个类的原因。中心向外为问题严重等级,依次为:小问题(1)、次要问题(2)、主要问题(3)、灾难性问题(4),一一应对到「用户体验问题记录表」中的「问题严重等级」。

2. 怎么使用呢?

首先,对记录表里的「问题位置」进行归类,以模块化区分,比如把登录注册流程做为一个模块,用一张八阵图来表示,最终把产品的每个模块都用一张八阵图来承载所对应的体验问题。

然后,把收集到的问题以「点」的形式点到对应模块的八阵图当中。

哪个模块问题最多?问题出现在哪个方向上?是视觉?还是交互?还是内容?哪些问题很严重需要迫切解决?一目了然。

四、优化方案

  • 通过 SUS系统可用性量表知道了产品的整体体验处于什么水平。
  • 通过协作启发式评估知道了产品的用户体验到底有哪些问题。
  • 通过21条可用性原则知道了如何避免出现体验问题。
  • 通过用户体验八阵图知道了哪些模块最迫切需要优化。

知道了这些,我们进行产品优化的时候还会不知道如何下手吗?接下来就要靠你自己了,你一定会做的更好。

当然,这套模型只能对线上产品的用户体验提升起到一定帮助,一个产品真的厉害还要从战略层一步步做起,我们需要去清楚的知道产品的目标是什么,我们能提供什么,我们想要去得到什么。对于产品的迭代,我们可以从使用人群(目标客户),主要功能(产品的服务方向),产品特色(与竞品的差异化),商业价值(盈利模式)上深入研究。



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

系列位置效应在UI界面中的应用

资深UI设计者

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

系列位置效应大家可能有点陌生,因为它不像格式塔那样被大家熟知,但是当我看了它的概念之后,我决定和大家分享一下。


Image title

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



产品设计中“+”功能的相关思考。

资深UI设计者

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

日常工作中,有很多看似平凡的小细节,常被大家忽视,却影响着用户的真实体验。比如,前几天跟同事们针对产品设计中“+”功能所运用的场景、展开形式进行讨论,发现这是一个挺有意思的话题。


所以跟大家分享下,我的一些相关思考。






 1. “+”的运用场景 


我们常见的产品中,采用“+”功能的场景,大致分为两种:a.(上传)内容选项;b.(聚合)快捷功能。



a.(上传)内容选项


根据“+”的直观表意,大致也能猜到它的运用跟“添加”、“上传”某个东西相关。

比如:微博,点击“+”入口后,是选择所要上传的内容类型。(可以晒自己精修X小时后妈都认不出来的自拍、也可以晒逗比的小视频、或者老子就想搞一场直播)。



比如:下厨房左上角的“+”,点击后,是选择上传作品,或者创建菜谱的选项。




再比如:工具类产品:Google drive,dropbox、百度网盘、微云,点击“+”后,同样是选择上传不同文件的入口。 


可以看出,这种情况下的“+”功能,多指“添加”、“上传”的含义,所承载的内容,是同一纬度下的不同选项。





b.(聚合)快捷功能。


众所周知,产品为了节省界面空间,同时避免过多功能给用户不必要的干扰,会选择把一些不常用的快捷功能收到二级展示。常见的产品中,他们选择把这些快捷功能塞进“+”里。


那么,你是不是觉得“+”功能跟“…”功能承载的内容是一样的?比如:乐趣首页右上角“...”,同样是对频率较低的功能的集合。





那为什么有的产品不直接用“...”,还是选择用“+”呢?


通过分析发现,“+”虽然也是聚合快捷功能的入口,但承载的功能有一个共性:都是围绕着用户主动打开、发起、新建...等操作进行的,因此用“+”更贴切。


比如:微信里的“+”,包含着:“发起群聊”,“添加朋友”,“扫一扫”,“收付款”,其实都跟“添加”有关。 




比如:淘宝也是类似的处理方式。


 



再比如:爱奇艺的“+”,里面包含的也是跟“添加”,“上传”相关,像上传视频、扫一扫、我要直播….





反过来看“...”,它聚合的功能,大多是相互关联较弱,且没有主动添加、上传等含义的。因此,用一个相对模糊,没有指向性的符号诠释,更为合适。





由上可以看出,在这种情况下,“+”作为聚合快捷功能的入口,包含的是频率较低,且跟主动“新建”、“发起”、“扫描”等相关的功能。





 2. “+”的展开方式 



当用户触发界面中的“+”时,常见的展开方式有3种,分别是:a.气泡弹出框;b.动态栏;c.沉浸模式。



a.气泡弹出框


气泡弹出框,这个控件又常被称为Popover,一般是由一个矩形和三角箭头组成的弹出窗口,通过点击Popover内的按钮或者非Popover的屏幕其他区域可关闭。 


比如,以微信为代表的“+”的展开方式,采用的就是Popover。一般用于聚合快捷功能。优点是触发“+”到Popover的距离很近,操作顺手,效率高(更像是导航的延伸)。





b.动作栏


动作栏,这个控件官方称之为Action Sheet,是用户触发“+”后,出现的一种模态弹出框,里面包含一组与当前情景相关的选项,一般用于上传内容选项。 


在iPhone屏幕上,为了便于单手持握时操作,Action Sheet通常占据屏幕底部区域。



比如:以Google drive、Dropbox为代表的产品,需要选择上传文件类型的选项。




在这个部分,同事们讨论有些争议点,在于:google drive 和 Dropbox或者微博,它们的加号本来就在底部,所以弹窗让用户感觉视线统一。




而有的产品“+”在上面,弹窗从底部出来,担心注意力切换和手指移动的路径比较长,显得割裂。


带着这个问题,我调研了下有类似情况的产品,会不会让人觉得不舒服。


后来发现,不会的。原因在于我们常用的、拥有10亿+用户的微信,发朋友圈时操作就是这样,而我们并没有感觉很割裂,反而已经习惯。




同样,iPhone自带的“提醒事项”App,也是这样处理。




后来看了规范发现,iOS确实意识到在iPad上,如果继续将Action Sheet显示在屏幕底部,如果频繁操作使用会比较累。因此,做了特殊处理。而手机屏幕上以底部为主,同时点击空白区域取消的操作,也是系统用户所熟知的。



总的来说,操作栏适合承载同一纬度下的内容选项,同时,就算“+”在顶部,采用底部动态栏,体验上也是没问题的。




c.沉浸模式


沉浸模式,指的是当触发“+”时,用户在全局蒙层上进行功能操作,同样适用于上传内容选项。


优点是拓展性更强,体现在:1.提升收益;2.品牌认知;3.内容运营。




1.提升收益


比如:微博,采用沉浸模式,下面是上传不同状态类型的入口,上面可以增加广告收入。




再比如:微云,在沉浸模式下,可以植入自己的“会员”广告,从而提升会员转化。





2.品牌认知


比如:有道云笔记,在顶部的空间内,宣传自己的品牌slogn:“记录,成为更好的自己”,是一种品牌情感化的传递。  



 


3.内容运营


像“好好住”,它们在这个页面加入“话题”运营推广。从而给UGC内容模块带节奏。





大多数产品都想营造社区氛围,建立用户关系,从而增加用户粘性,提升产品留存。

但要想拥有浓厚的社区氛围,首先要有内容、才有人愿意看、才有人在里面互动。

现实问题是,有很多用户有想发状态的心,但不知道发啥,从而放弃。因此,我们应该作出相应的引导。


比如,“好好住”在发布环节,增加话题运营“#每天一张生活日常#”入口,就是解决刚才说的“用户不知道发什么”的问题。运营同学想点子、造话题、带节奏,从而提升用户的发布量。

因此可以看出,“沉浸模式”,对于那些有拓展需求(收益、品牌、运营)的产品更适用。


不知道你有没有发现,相比国外,国内采用这种“沉浸模式”的产品偏多。或许在中国这个互联网竞争如此激烈的大环境下,大家不愿意放弃任何一个能够运营或留住用户的机会。 



总结 



总的来说,在常见的产品中“+”功能的运用场景有:(上传)内容选项、(聚合)快捷功能;它的展开方式可分为:气泡弹出框(适合承载快捷功能)、操作栏(适合容纳内容选项)、沉浸模式(容纳内容选项的同时,拓展性更强)。其实,交互形式没有好坏之分,只有哪个更适合自己的内容需求和产品目标,正如Louis Sullivan所说:“形式追随功能”。


小tips:日常工作中有太多类似“+”这种,看似一个不起眼的小功能,被大家忽略。我们习惯性看一下竞品,拍脑袋决定方案。


但是,慢慢你会发现,只有深挖和分析这些所谓的“小细节”,才能知道别人这么做背后的原因、才能举一反三的去运用、才能更好的兼顾统一性和拓展性,而不是停留在浮于表面的模仿。


希望这篇文章对你有所帮助。 

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

交互设计篇-如何处理需求 夜月薰衣茶 PMIP

博博

交互设计篇-如何处理需求

夜月薰衣茶 PMIP

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

如何处理需求,是产品经理的基本功,不管是来自老板还是客户的,亦或来自企业内部(运营、业务)及产品本身的发展,产品经理都需要把需求的收集、分析、管理做到有效进行。


一、需求收集

用户调研

运用场景:

产品规划初期或者遇到重大版本迭代,需要重新架构设计时,将会进行用户问卷、用户访谈的方式去挖掘用户的真实需求。

  基本方法:

用户问卷-定量研究的方法,问卷问题一般为15个左右,包含用户基础资料信息(包括年龄、收入、教育水平等人口统计学范畴信息)和主观性的信息(包括用户做这项活动的态度、行为、目的等方面的信息)两大部分,收集到这些数据后进行分析并得出一定结论。

用户访谈-定性研究方法,访谈问题分类包括开放性的问题专业性的问题。问题尽量从简单到复杂,由较宽泛趋于精细;访谈的过程中的问题尽量说的简单易懂,避免专业词汇,让回答问题的用户清楚明白你说什么;避免问一些引导性的问题;不要因为冷场而尴尬过多,多次重复进行讲解,留有一定的时间让用户思考如何回答;尽量问用户一些开放性的问题让用户进行思考回答;用户描述的过程中尽量描述真实使用场景与案例。

两种方法基本为相互补充进行的一个方法,对于不熟悉的业务,问卷编写初期不知该如何进行挖掘用户的问题,寻找五个左右的用户进行相关业务及主要业务用户使用场景访谈,将会总结出一些问题然后加入你要调研清楚的问题包括客观问题主观问题进行用户问卷编写、发放与收集。


用户反馈

  运用场景:

产品专家用户的反馈,包括运营、客服直接获取用户的反馈,通过从微博、论坛、贴吧、软件用户评论等方面寻找用户的反馈。

  基本方法:

市场反馈  做运营、客服、市场等人员和用户进行产品销售推广、运营活动的过程中和用户直接交流,一些专家用户直接反馈出来的需求。具体也要根据产品是直接面向c端客户还是企业级别的客户,两者有很大差异。

访谈  在和用户进行访谈的过程中,一些专家级别的用户直接反馈对现有产品在使用过程中的一些不满和改进的建议等。

查询相关网站 比如产品下载市场、百度贴吧、微博、论坛、微信群、QQ群等各种用户有自由发表言论及感受的地方,用户的直接反馈。

用户直接反馈的信息,需要进行分析其需求的真伪性。


产品定位发展

  运用场景:

产品最终要帮用户解决一个什么样的问题,市场发展环境和公司可支配资源等方面进行综合评估产品的前期、中期、后期的目标定位。

 基本方法:

相关行业专家询问  在发觉一个新产品及市场时,不明确当前市场状况可直接找行业内的一些专家进行聊天交谈,他们对于市场的现状很熟悉,可向该类专家询问产品的定位与发展方向问题。

投资行业的专家交流 最了解市场、发觉市场前景行业及创业想法的投资者,他们对于市场发展的方向及敏感度有一定的专业看法,可与其交流产品的发展方向性的问题。


相关行业专家、投资专家给予的建议和方向最终还需要结合本身公司的定位发展与界定产品的发展定位。


商业画布  一种能够帮助处于高层决定者激发创意、降低猜测、明确目标用户、合理解决其问题的工具,可直接判断出公司产品发展的的优势、资源等最直接有效的方法。

以下为商业画布九宫格主要内容:


数据分析

  运用场景:

产品或运营人员对用户操作规律,用户流失查询等方面进行查看分析,决定产品功能优化迭代最有效直接的证明。

  基本方法:

数据埋点  第三方数据服务平台或者用自己平台后台注入相关代码进行统计。程序员在程序编写时将主要操作、按钮进行数据埋点,通过网站即可查询相关数据。

第三方数据平台 专业做数据的网站会定期进行相关行业数据的发布,查看专业的报告即可获取一些相关数据。


结论

针对收集的需求,大致可分为以下几类:

产品运营类—某项调研结果直接反应出一种现象,将会指导产品运营人员的运营方向朝着这方面努力。比如一款产品预约功能,从团队做用户问卷的结果反馈中,用户更偏向于用微信公众号进行预约,运营团队需要相对在微信公众号预约增加相对的运营的投入。

功能优化类—用户使用某款产品的某个功能目的就是为了达到其某个目的,对于功能效率或用户体验上满足,将会直接影响用户的去留,优化该功能的用户体验满意度及效率将会提升用户的留存量。

新功能—产品功能的延伸或新增,通过用户研究,发现用户针对某个需求的实现很迫切,该需求就算新功能,可评估该功能紧急程度及效果进行功能设计满足。


二、需求分析

 

重要度、频率二维度

 运用场景:

当接到多个需求,因为时间原因,只能进行个别需求满足,评估优先级时,可用该方法进行简单需求评估分析。

 基本方法:

将功能需求按照重要度和频率进行四象限划分,重要高频象限中的需求要首先进行解决。重要度和频率如何进行衡量,频率衡量即使用的频次,重要度衡量判别是否会因为该需求的缺少而影响用户使用。


KANO模型分析

  运用场景:

产品重大版本迭代,因为时间等问题,只能选择个别两三个功能进行优化,但是优化的需求点比较多,可以直接向用户进行问题编辑,查看用户满意度选择进行优化。

  基本方法:

(1)从顾客角度认识产品或服务需要;

(2)设计问卷调查表;

(3)实施有效的问卷调查;

(4)将调查结果分类汇总,建立质量原型;

(5)分析质量原型,识别具体测量指标的敏感性

二维属性归属分类


场景化思维

  运用场景:

通过模拟或发现真实场景,预测用户行为从而进行设计。

  基本方法:

从交互五要素考虑,人、目的、行为、环境、媒介几个关键点去创造用户真实的使用场景。在什么地方,哪个人做了什么事,运用了哪些东西,达到了什么样的目的,遇到了什么样的问题,怎么进行处理解决。例:在淘票票购买电影票后,付款时推荐购买零食信息。

用户体验地图

 运用场景:

适用于任何场景,更适合在可能存在问题或者改进机会的事件上。

  基本方法:


  • 归纳用户该使用场景下的触点

  • 画出情感坐标

  • 寻找用户进行触点体验情感、意见描述

  • 归纳用户体验意见

  • 绘制情感曲线

  • 标注用户重要性意见


需求分析的方法很多种,以上仅列出部分,方法只是分析的一种工具,最主要还是通过方法分析需求得出的解决方案。


三、需求管理

  

需求提交

简单来说,就是将收集到的需求,在评估完优先级,确认做具体需求功能时将该需求开发计划告知相关开发、测试等人员,让其明确即将完成的功能需求。如功能需求相对应的方案设计、业务流程等内容提前与开发总监沟通好上传至公司统一管理文件处,具体根据不同公司的实际情况。


需求评估

需求功能的相关开发者、测试针对该需求达成统一认知和开发周期认定,使得相关开发人员在开发周期内有效配合开发,测试人员明确该如何进行有效测试,针对同一需求能够有效推进实现。


需求跟踪

 在开发过程能够及时跟进开发,一确保其开发功能达到预期效果,二有任何异常情况的发生能及时进行处理解决,三有效把控需求的开发周期,保证需求按期交付。


需求变更

当需求提出方提出需求变更或者在内部评审、开发过程导致需求变更,做好相关需求变更的把控,以防需求变更后导致项目无法执行。

      a.评估需求变更与原需求的差异

首先,明确需求变更的原因—是需求提出方进行需求变更还是内部原因导致需求变更。其次,需求变更后与原先需求定义是否有较大冲突,如有较大冲突,评估变更前后的利害关系,哪个更能有效达目的/效果,按评估结果执行;如无较大冲突,评估与原需求的紧急程度及时间安排,进行需求变更解决。最终,有效记录需求变更计划及原因,定期进行总结,评估相关解决方案。

       b.评估需求变更导致的结果

如需求变更后,利大于弊,允许变更,但需按照需求变更的规程执行,以防出现意外情况产生不必要的责任,失去相关控制。如需求变更后,利小于弊,拒绝变更.




日历

链接

个人资料

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

存档