UX 设计中的Sitemat是什么?

_A UX sitemap是一个视觉工具,作为用户体验(UX)设计者,它为您提供了方便的帮助. 不仅组织网站的内容和结构, 如何显示网页的连接与关联, 因此用户可以轻松地浏览网站, 我们将会探索如何创建网站图、工具和最佳做法,

首先,想象一下,你正在穿越一个充满宝藏的复杂迷宫,如果你没有地图,你很可能错过其中的很多,这就像建立一个没有UX网站地图的网站,因为你可以把网站看成是数字迷宫。网站组织是一个大问题,因为在这个“奇迹”中,你将拥有网页、博客文章、产品描述和联系细节,你总是需要有一个清晰的结构。

在学习如何有效地整理网站内容和内容策略时, 使用蓝图赋予网站地图的权力, 并发现它如何视觉地代表您网页的结构和层次,

从博士Priscilla Esser学习,他讨论视觉框架和网络设计层次的重要性,并研究如何应用这些概念。

显示隐藏视频记录

转写装入...

在网站开发中, 它也是一种合作工具, 所以来自其他团队的人, 包括非设计背景的利害相关者, 可以参考它, 以确保网站的布局符合用户需要和商业目标。更何况,好的站点地图意味着团队可以发现他们可能错过的缺口,并优先安排更符合真正以用户为中心的设计的基本内容。

互动设计基金会,CC BY-SA 4.0

□ □ □ □ 如何创建有效的 UX 选项

互动设计基金会,CC BY-SA 4.0

1. 编译和组织您的内容

首先, 将您所有的网站内容集中起来, 确保列出每个页面、 URL或未来网页的标题,

接下来,你会想查看每一页,并决定它与网站地图有多相关,而你可能只找到一些对主导航结构真正至关重要的网页,所以选择用户经常访问的关键页面或对业务目标更为关键的关键页面。

您需要将相似的页面分组, 以精简结构, 切减繁杂的功能, 当然, 让用户导航简单易懂,

2. 定义网站目标和用户需求

接下来,它需要清楚了解你网站的目的是什么,目标受众的需求是什么 -- -- 一旦你知道你的用户对你的网站的期望,它就会指导你如何制作网站地图,所以问问你自己:

为了深入了解这些情况并了解用户的需求和偏好,这就是用户个人进入的地方,你可以根据对当前或过去用户的访谈或新网站目标受众的假设概况来使用这些个人。

关注人机交互学教授兼专家艾伦·迪克斯(Alan Dix),讨论了解用户特性的重要性和帮助性.

显示隐藏视频记录

转写装入...

页:1 您需要确保您调整您的网站图, 这样您就可以有效地解决问题, 并确保您的网站包含一个组织良好且以用户为中心的结构- 和内容- 这就是为什么您需要问用户这样的问题:

“你通常在什么情况下访问我们的网址? “
“你多久才发现自己使用我们的网址? “
“是什么促使你使用我们的网站? “
“哪些变化或改进将增进你在我们网站上的经验? “

3⁄4 ̄ ̧漯B 决定平面或深层项目设计

如何创建UX网站地图, 取决于网站的类型, 所以仔细考虑网站的大小、内容数量,

** Flat sitemap 设计**: 平面的站点地图设计具有有限的分级水平,通常可达四级, 这使得可以快速、方便地访问任何点击次数最少的网页。更确切地说,

适用于10页左右的较小网站。
最高分为四个等级。
任何页面在四点击或更短的时间内都易于访问。
简单易行的理想。

** 深度站点图设计**: 更适合大型网站, 这些网站内容广泛, 更确切地说,

对较大的网站——如电子商务平台——最好有100页或更多页。
等级更深。
适应内容广泛。
要求像面包屑这样的特性,以便更深入的内容易于航行。

四. 组织中小学网页

从主页(或登陆页)开始, 然后,从那里,分到其他主要类别网页——它们将作为你的主要网页工作,这些网页的例子往往包括主要章节,如:Products, Services, About Us,_或_Blog。

副页是这些主页内部的子类——如_Products_下的子类,您可能拥有不同的产品类,如_electrics_,Clothing,_Books,_等等——您可以在您的编号系统中分别以1.1,1.2,1.3等表示. 当你有条不紊地分类后, 它会帮助你保持清晰而直观的网站结构,

还有,看看页脚在您网站的架构中做什么,您用于附属-但必不可少的-链接的空间,比如_Contact_,Privacy Policy,和_Terms of Service_,页脚作为一个单独的导航区域,供用户访问重要信息,无论它们位于您的网站上在哪里.

确定您是否有“错误的404”页面,

五. 链接页面

一旦你整理好主页和副页,

从主页链接所有主页,确保链接全部可见和可访问,为您的用户提供优美和直观的导航路径.
下一步将次级页面连接到相应的主页, 并在您进行内部连接时, 请确保层次清晰且合乎逻辑,

并计划链接, 以便引导用户了解他们将追求的相关预期内容。

此外, 定期更新网站图, 并加入新网页, 并融入现有架构,

六. 以情景测试 UX 对象并收集反馈

一旦你整理了自己的网站地图, 将显示您的网站地图如何方便用户,

在进行UX网站地图测试时, 你有一个很大的盟友是树上测试, 它让你自己来评估你的网站地图, 你要做的就是建立一个目标清单, 然后要求用户浏览到他们认为需要的内容在哪里。树的测试服务,如树的杰克,只是要求您网站地图的细节,它们保持着用户成功率的统计数据,以及导航似乎失败的详情.

只要他们能对网站地图的布局、可用性和有效性提供诚实的反馈,

反馈和测试是帮助你塑造产品的关键力量, 当你在迭代改进中工作时,它最终能更好地满足用户需要,增强UX设计和可用性—— 并且不可能过分描述这些价值,特别是当你把它们放在UX设计所涉及的各种步骤和要素中时,正如这段视频所示:

显示隐藏视频记录

转写装入...
7⁄4 ̄ ̧漯B 最后敲定和记录项目

一旦你根据反馈测试并完善了网站地图, 记录目前网站结构的网址图和今后的任何修改,

视觉网站地图在您与网站开发合作时,

互动设计基金会,CC BY-SA 4.0

1. 路西德图

互动设计基金会,CC BY-SA 4.0

Lucidchart专门研究UX网站地图等复杂的图表,它有一个方便用户的界面,它包括各种模板和形状. 它的拖放功能使得图解速度快,而实时合作则让团队成员从不同地点一起工作.

2. 米罗

米罗, 公平使用

Miro**扮演一个数字白板, 这对简单的集思广益和团队设计, Miro包含帮助您创建UX站点地图,行程图,以及线框的功能.

3⁄4 ̄ ̧漯B 图片

法格玛, 公平使用

Figma提供了强大的设计和原型工具,因此可以创建交互式原型来测试你的网站流量,Figma让许多用户同时在网站地图上工作.

四. DYNO 绘图器

DYNO 映射器, 公平使用

DYNO Mapper对于您创建,定制,编辑,共享交互式网站地图是很好的,它与Google Analytics集成,用于内容盘点,审计,和关键词跟踪,工具让你享受轻松的合作和网站访问测试.

五. 动力马普

动力马普,公平使用

PowerMapper 地图、测试和分析网站, IBM和NASA等公司使用UX网站地图生成器, 扫描网站以获取缩略图和元数据,

六. 笔和纸

\ WordPress, 公平使用

最后,但当然并非最不重要的是,让我们进入低技术,甚至“无技术”的栏目,用好老式铅笔和纸张,这为您提供了一个简单而有效的规划站点图的方法,因为您可以轻松地在页面上对内容进行分类;此外,这是帮助您优化信息结构的好方法。尽管如此,你也可以使用白板,粉板,或拉链来进行规划,无论什么最有效。

□ UX 物件的实际方面

1. 视觉清晰度

UX网站图必须有直截了当的视觉元素, 这样就不会有混乱, 人人都可以一眼就能了解网站的结构,

2. 直观结构

UX网站地图的结构真的需要映射用户的思想过程,逻辑上分组相关内容,这样用户就能得到那些自然浏览的经验,帮助他们很好地浏览网站,相关页面都以感觉美好,自然,连贯的方式连接起来.

3⁄4 ̄ ̧漯B 用户-儿童设计

和其他地方一样,用户需要在UX网站地图中优先使用,分级系统必须使重要页面易于查找和访问.

以用户为中心的设计就是把注意力放在定制产品上,以创造更好的用户体验,这也是为什么知道什么要素构成用户体验是好的. 请检查access-date=中的日期值 (帮助) 杰西·詹姆斯·加勒特在"用户经验的元素"中概述的用户体验的五个要素.

显示隐藏视频记录

转写装入...
4⁄4 ̄ ̧漯B 可缩放性

成长的灵活性是设计完善的UX网站地图的特征, 而建造和附加的能力是另一个大加,

□ UX 项目最佳做法和实例

UX项目最佳做法

互动设计基金会,CC BY-SA 4.0

** 保持以用户为中心**: 设计网站地图时要牢牢牢记用户的旅程, 并严格关注用户如何搜索和浏览您网站上的信息。
** 保持简单**: 即使你有一个非常复杂的网站, 去寻找一个尽可能简单的站点地图, 因为一个也太参与(如太复杂)的结构,
** 使用明确的标签**: 对类别和页面使用清晰、描述性的名称和标签,以便“平均用户”能够理解,并且没有技术术语,除非在你的行业中很常见。
** 确保一致性**: 保持一致的分类和命名惯例在整个您的网站地图。
** 优先处理关键内容:** 将最重要,最经常访问的网页放在显著位置.
** 关于可伸缩性的请求**: 思考未来-为未来的扩展设计您的网站地图, 这样你(或参与其中的其他人)可以添加新的页面或分类,
** 定期更新网站图**: 随着网站的发展你的网站地图也一样
试验和结构:不断用真正的用户测试网址图——并利用其反馈来作出能够带来结果和证明良好的迭代的变化。

UX 项目示例

例1:家居装饰网站

中、公平使用

网站地图有条不紊地分解了一个网站的内容,涉及几个关键类别,如“Shop,”“About,”“Blog,”