网站首页 > 网站设计> 文章内容

如何系统地规划出具备上乘用户体验的网站?

※发布时间:2018-10-26 19:24:54   ※发布作者:habao   ※出自何处: 

  谭凯的妻子

  现今,网站和web技术已经不算是新兴技术了,但是不得不承认,在当下的移动互联网时代,web技术仍然算得上是新潮的技术之一,并且网站也是各企业商业价值中的重要一环。因此,规划、设计具有优秀用户体验的网站,仍然是我们的重要技能之一。

  在开始正式地规划网站之前,我们有必要了解网站的主要业务模型。尽管人们都更加愿意获得免费的信息,但信息提供方(企业)还是希望能够由此得到回报的。

  要明白,大多数企业要想存活,就必须要挣钱。在为企业建设网站之前,我们要知道公司的业务模型是什么,如果不了解业务模型,就无法知道用户哪些行为是有意义的,哪些行为是毫无价值的。

  在开始网站设计之前,我们首先要问自己一个问题:“网站是为谁搭建的?”不是每个网站的设计者都能准确有效地回答这个问题,有的人会说“网上的每一个人”,还有的会说“所有喜爱某类产品的人”、“所有爱看书的人”或者“所有喜欢美食的人”。

  在和各相关部门同事的谈话中,并不只是收集用户的统计信息,真正要做的是得到一些合适的行为信息来帮助我们更好的设计网站。

  比如,我们了解到用户的年龄较大,就要做出一些初步的设计决策。如:字体要放大、交互操作要尽量简单、以及页面上哪些元素更应该突出等。

  招募目标用户通常需要公司内部其他部门的配合,比如客服部门,可以通过诸如电话邀约、邮件邀约等方式,如果目标用户是企业,则可以通过公司高层或市场部门,向企业致电或发送邀请函等方式,总之,尽量通过其他部门的协助完成用户的邀约。

  在的过程中,我们要注意理解得到的反馈。比如,用户可能会说“我希望按钮大一些。”而他们的实际想法可能是“付款的过程太复杂了。”或者用户可能会说“我希望这个的演颜色是红色。”他们真正的意思可能是“要招到我想要的东西太耗费时间。”

  所以,在中,我们可以问一些诸如“你想做什么?”、“你希望得到什么”这样的问题,而避免去问“你认为这个按钮应该放在哪里?”这种问题。我们要把重点放在用户完成任务时遇到的难题上。

  角色模型可以帮助我们更深入地理解设计所针对的对象,以及怎样才能真正满足这个用户的需求。当然,也可以不去创建复杂的角色模型,只不过,如果能针对一个特定的“人”来进行设计,会让我们的设计更加有效。

  在第二步中,我们会收集到一些信息。可能已经得到用户的相关信息,比如:性别、地理、上网习惯、技术水平或是他们使用竞品的方式。

  每一个部门都会对用户有自己的理解,是男人还是女人?年龄段如何?住在哪里?如果大家不确定,可以参照上一步的报告文档。

  当大家提出了大量用户特征后,可以开始合并这些特征,并将其改进为角色,比如:女性+25~35+华北地区=来自的27岁女性,甚至还可以为她取一个名字。

  为用户角色增加一些具体的个性化内容,比如:照片、姓名、职业、个人背景、职业、教育背景、目标、爱好、最喜欢的网站、他的愿望等信息。确保用户角色的真实是这一步的关键。

  通过创建场景,会使得人物更加丰满,同时有助于我们完成网站交互系统的设计。场景,就是人物角色使用产品时的背景故事简介。

  比如:王强(人物角色名字)打开浏览器,从网站上看到了感兴趣的电影介绍,首先他回选择自己关心的电影类型,然后网站会推荐给他可能相看的电影;接下来,他会选择真正感兴趣的电影,并进行观看。

  用户径草图可以帮助我们确定不同类型用户会完成哪些类型的动作,由此我们可以决定需要为网站设计什么。通过画出不同用户的径,可以帮助我们查看是否有遗漏。举一个例子:

  比如,要建立一个小型电子商务网站的用户径草图,可以有这样一个场景故事:买礼物的人浏览主页,找到适合的礼物,买下礼物,写下一张贺卡,写上朋友的信息,付款。

  接下来可以考虑,网站的用户不只是送礼物的人,也会有给自己买礼物的用户、不满意的用户、失业想要在线卖东西的用户、其他渠道接收到广告的用户,我们可以继续为这些用户添加用户径:

  其实这一步,就是根据用户的任务,完成各个任务/功能的流程图设计,以及和网站后台系统交互的业务流程图设计。

  网站中会含有丰富的信息,用户来到我们的网站时为了查找信息或者完成任务或者二者兼有,作为网站的设计者,我们的任务就是用好的设计帮助用户达到他们的目的。

  用户知道他们访问了正确的网站,接下来他们需要标识导引来找到他们想要的东西,标识导引有四方面的内容:

  使用熟悉的组织系统。组织系统包括,字母(例如通讯录);地理;时间;连续区间(比如排名1~10,或一些数值范围);数字;种类(例如博客种类)。

  使用用户已经习惯的组织系统,用户就更容易上手我们的网站,不必从头学起,我们的网站也就更易用。

  标签信息可以帮助用户更好的找到他们想要的东西,比如一个标记着“流行”标签的歌曲,会吸引来众多不喜欢古典音乐的用户。

  也就是,链接看起来要像链接,按钮看上去要像按钮,仅供阅读的文本和可以单机的文本看上去应该是有区别的。

  要让用户知道他正在网站的哪个,是从哪里来的,如何才能回到之前的页面。面包屑导引或通过改变条的外观都可以提供网站的反馈。

  无论用户是否在网站上找到了他们需要的东西,他们都会想找到更多的类似的更好的内容。在这里,可以有效利用或面包屑导引,突出显示用户在网站中的当前,并显示相关的内容,让用户可以链接到其他的地方。

  另外,也可以使用提供“更多内容”的选项,可以向用户提供相关商品的快捷途径。“更多内容”工具对于一组相关商品以及相关种类的快捷途径最为有效,例如电商网站的“猜你喜欢”,文章网站的“相关文章”。

  用户已经找到了他们想要的东西,我们要为用户的下一步操作提供相应的选择,我们应该在设计网站时询问自己“用户希望在找到他们需要的东西后,做些什么?”

  对于一个电商网站,用户肯定是要购买到找到的商品,电商网站提供的“加入购物车”和“购买”按钮有效帮助用户解决了问题。对于一个文章网站,用户阅读一篇文章后需要做些什么呢?应该是评论、分享、收藏、复制、粘贴这篇文章。

  在讨论的细节之前,我们先要明确用户查找信息的方式,用户访问我们的网站就是为了获取查找相关信息,而可以帮助用户去完成这一操作,所以有必要了解用户查找信息的方式。

  用户明确知道自己想要查询什么,此时他们会直接通过搜索工具去查找。此时应该适当地处理搜索,使用户能够到达他们想去的地方。

  用户此时可能有一个需求,但是不能确定具体怎样才能满足这个需求。此时就会记性探测内容查找,用户想买一个数码相机,但是不知道哪种数码相机好,所以需要查找很多相机对比。

  有时用户连需要什么都不清楚,比如用户想买新房子,却发现需要了解所在城市的相关政策,在寻找某个东西时,却发现实际上需要了解另外一些东西。

  对网站内容分类并选择组织系统时,全局作为顶层类别,对用户和企业来说是意义重大的,因为它展现了网站的顶层架构。

  同时,全局还有一个作用,就是会告诉告诉用户网站是关于什么的,以及用户可以利用网站来做些什么。

  局部也称为栏目,因为它提供了一组链接。当点击了一个全部时,会进入到相应页面,此时会在全局下方出现新的一组条,这就是局部。

  利用局部,只需要提供一个栏目下其他页面的链接即可。在一个复杂的分类系统中,用户希望从一个类别移到子类别,然后再移回来,设计局部就是为了让用户能够轻松地在不同类别间。

  局部可以有效的帮助“探测内容查找”型用户,这些用户知道他们需要某些东西,但是又不确定到底是什么。

  选择一个全局后,局部可以帮助他们浏览更加具体的内容。而对于“不知道自己要查找什么”的用户,局部可以为他们提供一组相关的选项,帮助他们做出决策。

  局部通常出现在全局的下方(或页面的左侧)。这种布局方式也强调了内容的组织方式:子类在类别下方,把相关性最强的链接放在最接近用户需要的。

  用户在访问网站的一个页面时,会关注页面的内容,如果他看到的页面上没有需要的内容,那么局部通常要放在离页面内容更近的,用户想要访问其他类别时,首先要找的便会是局部。

  在全局和局部这里,介绍一下用户访问的模型,用户查找网站内容的方式取决于网站的,通过访问内容有两种基本模式(我喜欢这么叫这两种方式):弹跳模型和爬行模型。

  此模型适用于用户浏览庞大的异构内容集的时候,众多分类庞杂的网站如电商网站、素材类网站,这些类型网站中面包屑导引工具就显得异常重要,用户会沿着面包屑的轨迹返回。

  爬行模型:在该模型中,用户可以采用横向的方式在各类别间转移,用户选择一个类别后,可以继续选择页面上的“兄弟”类别的,用户只需要单击一次就可以进行切换。

  做一个简单的总结:全局和局部统称为结构,优秀的结构能支持用户的所有信息搜寻行为,包括前文中三类查找信息的用户。

  关联就是网站页面上能为该页面上的内容关联到额外内容的链接,比如:文章详情的“更多文章”、电商网站的“猜你喜欢”、新闻详情的“相关新闻”等。

  如果是访问了一篇文章,就应该为用户提供更多相关文章的链接;如果是观看了一个视频,就可以提供更多相关的视频链接给用户。

  例如:在36kr网站,当用户阅读了一篇文章后,网站提供了收藏、评论、分享等功能。或者,用户心情不错想要继续查看相关内容,为此,网站提供了相关文章和感兴趣文章的链接。又或者,用户不想看类似文章了,此时网站提供了下一篇文章的链接。

  b. 如果当前页面展示的不是用户想要的,那么该怎么办呢?我们当然不能每一个页面都是用户想要的。

  我们要做的,就是要提供一些其他的内容给用户看到,可以提供一些相关内容的链接,或者是提供同一内容不同格式的链接,比如在一个新闻详情内,可以给用户提供文字、音频以及视频多种查看方式。

  例如:在用百度搜索内容时,并不是一下子就能搜索到用户想找的内容,此时在搜索页面上提供了多种格式的搜索类型,同时还提供了搜索工具帮助用户筛选搜索的结果,在界面的右侧也提供了一些与搜索关键字相关的链接。

  信息架构领域的美国知名作家James Kalbach给出了可用性的定义“可用性将工具和特性相连接,这些特性可以帮助访问者使用网站。”

  其实我们对可用性并不陌生,网站的登录/注册、搜索、个人信息、个人账户、客服、我的订单等都是可用性。

  可用性通常放在全局附近,比如页面的右上方,因为可用性也需要在网站的所有地方都能访问到。

  不同类型网站可用性包含的信息不同,根据网站各自的业务进行具体设计,比如:京东的“登录/注册、我的订单、我的京东、京东会员、企业采购、客户服务、手机京东”、站酷网的“搜索、上传、消息、个人信息”等。

  全局和局部可以帮助用户缩小网站的内容范围。关联可以将用户连接到相关的内容,提供不同情况的“下一步”。可用性可以放置另外三类未能妥善处理的其他重要链接。

  如果在设计网站的时,还是无从下手,试着回答自己三个问题“内容如何组织?”“用户希望通过网站做什么?”“你希望用户通过网站做什么?”

  元数据可以确保以上各种形式的内容都能够被用户查找浏览到,元数据就是每一项内容的所有信息。比如,一首歌曲,元数据可能包括:出处,版本,作词人,作曲人,演唱者,专辑名,时长,音乐类型等等。

  标识引导设计:帮助用户明确他们身在何处;他们要寻找的内容在哪里;如何得到用户搜寻的内容;用户已经搜寻过哪些地方。比如,经典的面包屑。

  设定期望并提供反馈:在动作发生之前要让用户知道动作还未发生;提示用户正处在过程中的哪个阶段。比如,向导式设计,一直显示用户的操作进度。

  保持一致性:同种类型页面的架构一致、交互操作一致、视觉效果一致等。比如,所有商品的详情页都使用同样的布局。

  提供防错性:预防用户出错;用户正在编辑的操作内容;及时通知错误。比如,在表单交互中,保留用户已编辑信息,及时反馈错误信息等。

  依靠辨识,不凭记忆:提供明显且精确的可辨识要素,避免用户凭记忆与网站交互。比如,保留用户的搜索历史,保留用户的浏览历史等。

  考虑到不同水平的用户:《交互设计精髓》书中提到,用户分为新手用户、中级用户以及专家用户,新手用户往往会很快过度到中级用户,而专家用户凤毛麟角,所以我们的一般策略是为新手及中级用户创建简单的产品,为专家用户构建一些特殊属性。

  提供帮助(说明)链接或文档:及时的帮助说档,可以有效帮助用户解决使用网站过程中的燃眉之急。比如,网站关于会员体系的说明。

  可以给用户测试我们的网站原型,也可以快速搭建第一个版本后让用户使用得到反馈。无论采用哪一种方式,目标都是要尽快得到用户的反馈,以及时调整解决出现的问题。

  接下来,就是不断的去迭代、优化网站了,根据公司业务的调整、或是配合其他产品线、或是增加产品功能,不断的去完善网站。

  本文讨论了系统规划网站的大致流程,重点讨论了提升网站用户体验的设计要点,从中又引出了、元数据以及基本的设计原则,希望本文的内容能给大家带来一些帮助。

  流年,人人都是产品经理专栏作家。互联网产品设计师,4年互联网产品设计经验。擅长用户体验设计,喜欢钻研需求功能背后的技术实现方式;在成为综合型产品设计师的道上不断努力前进!