您现在的位置:好点子网络 > 好点子学院 > 关键词排名优化 > 好点子网络:网站的用户体验设计怎么做?

好点子网络:网站的用户体验设计怎么做?

发布时间:2018-11-26 18:04:50

  好点子网络:网站的用户体验设计怎么做?


  本步骤不再叙述如何绘制网站的原型图,这里要谈的是在网站的设计中,值得注意的要点。


  1.网站上的一切要井井有条


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


  (1)帮助确认是否到达了正确的位置


  来到网站,用户希望知道这是不是他所需要的,也就是他是否达到了正确的位置。


  用户来到我们的网站时,首先看到的就是网站的组织方案。


  组织方案有两个作用:


  导向作用,会告诉用户这是一个什么类型的网站;


  告诉用户要做什么,它会向用户展示“在这里你可以浏览/购买/阅读/分享/查看/收听的东西”。


  因此,组织方案需要为用户展示所有的产品范围。比如,淘宝网站的分类导航:


  (2)帮助用户找到他们需要的东西


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


  使用熟悉的组织系统。组织系统包括,字母(例如通讯录);地理位置;时间;连续区间(比如排名1~10,或一些数值范围);数字;种类(例如博客种类)。使用用户已经习惯的组织系统,用户就更容易上手我们的网站,不必从头学起,我们的网站也就更易用。


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


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


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


  (3)让用户知道网站上有更好的东西


  无论用户是否在网站上找到了他们需要的东西,他们都会想找到更多的类似的更好的内容。


  在这里,可以有效利用导航或面包屑导引,突出显示用户在网站中的当前位置,并显示相关的内容,让用户可以链接到其他的地方。


  另外,也可以使用提供“更多内容”的选项,可以向用户提供相关商品的快捷途径。


  “更多内容”导航工具对于一组相关商品以及相关种类的快捷途径最为有效,例如电商网站的“猜你喜欢”,文章网站的“相关文章”。


  (4)为用户提供下一步操作


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


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


  用户会利用网站提供的“下一步”操作拉近与其目标的距离。


  2.网站导航的细节阐述


  这里之所以把网站的导航设计拿出来,是因为看似简单的导航设计,里面含有很多的设计细节。


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


  (1)用户查找信息的方法


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


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


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


  历史查找:用户可能想查看以前找到的某些东西,这一点通常在设计中被忽略。


  (2)导航的分类


  结构导航:展示网站内容的层次结构,包括全局导航和局部导。全局导航一般是网站的顶层级别,用户可以通过全局导航很容易地访问重要内容。局部导航可以把用户带到网站层次结构中邻近当前所在位置的层次。结构导航对于“已知内容查找”和“探测内容查航找”很有用,对于“不知道自己要查找什么”的用户也会有一些帮助。


  关联导航:将一个页面与包含类似内容的其他页面相关联。关联导航适合于“探测内容查找”,并且能帮助“不知道自己要查找什么”的用户找到相关信息。


  可用性导航:包括登录,访问用户信息等内容,主要内容组织以外的所有内容都可以纳入可用性导航。


  三类导航分别对应不同的用户查找信息方法:


  (3)全局导航


  在很多网站上,全局导航就是导航条,比如:


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


  全局导航需要再每个页面都出现,不论用户现在在哪里,都能通过全局导航继续访问网站的任何位置。


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


  全局导航通常会显示在页面的最上方,因为这样就能将页面的其余部分聚焦于内容数据。


  当然,垂直的全局导航也是一种选择,但是这样会限制局部导航以及页面内容的可用空间。


  (4)局部导航


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


  利用局部导航,只需要提供一个栏目下其他页面的链接即可。


  在一个复杂的分类系统中,用户希望从一个类别移到子类别,然后再移回来,设计局部导航就是为了让用户能够轻松地在不同类别间导航。


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


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


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


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


  (5)导航访问模式


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


  弹跳模型:这种模型会使用户前往一个子类,然后必须回到其父类(首页)来选择另一个不同的子类。


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


  采用该模型,为了让用户在网站中转移时将其余的顶层类别隐藏,使用户更沉浸当前类别中。


  同时,对于包含大量内容的网站,不可能把所有顶层类别连同所有局部导航都显示在一起。


  例如,京东的面包屑还自带了筛选功能:


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


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


  (6)关联导航


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


  关联导航有时很容易被我们忘记,因为它们相当于跨越了网站信息架构体系结构的快捷方式。


  但是,不得不承认,关联导航是保证网站可用性强大的驱动力,可以促使用户沉浸于我们的内容。


  关联导航关注两方面内容:


  a.用户找到了需要的东西后,下一步做什么?


  b.如果页面并不是用户想要的,那么如何能把用户继续留在网站?下一步做什么?


  a.上文中已经提到过“下一步”操作。当用户找到了他们希望的东西时,下一步要做什么?


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


  例如:在36kr网站,当用户阅读了一篇文章后,网站提供了收藏、评论、分享等功能。


  或者,用户心情不错想要继续查看相关内容,为此,网站提供了相关文章和感兴趣文章的链接。


  又或者,用户不想看类似文章了,此时网站提供了下一篇文章的链接。


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


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


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


  (7)可用性导航


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


  好吧,专家的定义总是这么晦涩。


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


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


  在设计可用性导航时,要利用视觉线索和页面上的屋里位置将它和全局导航分开。


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


  (8)小结:


  全局导航和局部导航可以帮助用户缩小网站的内容范围。关联导航可以将用户连接到相关的内容,提供不同情况的“下一步”。


  可用性导航可以放置另外三类导航未能妥善处理的其他重要链接。


  三部分导航综合到一起,就可以得到一个可用性很高的网站了。


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


  3.网站内容的基石—元数据


  元数据是网站组织系统的基础,搜索以及电商网站上的导航系统都依赖于元数据。


  网站上的信息可以有不同的形式,比如:一篇文章、一张图片或者是一个视音频。


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


  元数据通常包括以下三种:


  1.固有性元数据。与内容构成有关的元数据,比如这是一个word文档、jpeg图片、ZIP文件。


  2.管理性元数据。与内容构成有关的元数据,比如图片的用途、编辑人、是否已发表。


  3.描述性元数据。与内容本质有关的元数据,比如一个图片的描述性元数据:狗、犬科、可爱等。


  下图展示一些元数据的类型:


  我们要根据网站的具体定位,组织具体的内容及其元数据,明确每一个元数据对用户来说是否有用。


  4.网站设计要遵循的基本原则


  用户体验设计部分的最后,总结一些常用的设计原则吧:


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


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


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


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


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


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


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


  好点子网络www.ithdz.com专业技术人员专人专职专注网站优化|网站SEO优化|网站优化推广|佛山网站优化|佛山网站推广|微信朋友圈广告投放|CCTV广告投放服务商等互联网业务欢迎来电洽谈。


  • 上一篇: 好点子网络:“互联网产业迎来toB服务“金矿”

  • 下一篇: 好点子网络:张峰出席2018中国工业互联网大会

  • 版权与免责声明 佛山市好点子网络有限公司声明:如发现内容存在版权问题,烦请提供相关信息发邮件至379714626@qq.com,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。