每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
怎样提高网站用户体验的门图
- 经验类型规范/资料原作者：Kirill Shikhanov
- 经验属性自译外文
- 经验版权署名-非商业性使用
30389
14
8
2014-07-09
信息可视化有助于网站对信息的保留，转换和其他指标可能遭受的设计缺陷。使用交互图来可视化的方式，可以帮助我们纠正用户从起点到终点，在操作过程中的用户体验问题。这个图是很像在服务设计中的一个工具，好比顾客在旅途中的地图等其他。在这里，我们就来看看它是如何工作的。
门图
可视化的知识包括了各种格式—草图，图表，图片，实物等。在谈到概念图时，有不同的方式使用甘特图，因果图，价值链，脑图，树，流程图，关键路径法，条形图，饼图，和其他人作为知识管理工具来分析和做出战略决策。
另请参阅：手机设计模式：一种实用的外观
执行图在服务设计中（活动的计划和组织，目的是为了提高其服务提供者和用户之间的沟通和服务质量）有助于告知更改现有的服务。门框图是一个工序图的一个实例，并且特别集中于网站的服务。
上面的门图的逻辑是非常简单的。用户在网站的某处，帮用户创建了每一个位置的步骤，然后是在（类似于通过一个门进入），然后再决定下一步去哪里。这个地方被称为起始点（开始），并表现出一个敞开的门。此时用户会看到更多的门。
在网站上的出发点可能是一个登陆页面，或配置文件页面，或者其它类似设计的页面。
用户定义如何去——这是一个目标。这个目标是王冠绘制在门上方的门图。在起点后，它可能成为下一个门，或者有可能是一系列不同的门，从而最终到达绘制王冠的门为目标。
在网站上一些门图的实例，有以下几种情况：
-要了解该网站是关于什么
-去注册
-买东西
-要联系某人
-要下载的什么内容
此箭头由起点到目标被称为一个通道。走廊的长度取决于多少个门的呈现在这个路线上。
每一扇门代表一个信息元素 - 文字，按钮，链接，线，数字，空格或不存在的任何物体。
从一扇门到另一扇门的经过，包括从起点到目标的通道，被称为过道。每个过道是由一个元素过渡到另一个如 - 点击，滚动，等待。
对路线也有障碍 - 用户体验的错误，失误，错误链接，隐藏按钮 - 防止用户达到目标。
所有的障碍总结为四个：
[^]一门是锁着的（描绘一个红色锁）
[*]一扇门误导信息（描绘在玻璃上，明星黄色贴纸就像是一个共同的条款及条件）
[ - ]门是不可见的（描绘虚线）
[＃]一进门是一条死胡同（描绘砖）
实现这一目标，可能需要多次尝试，这意味着用户开始是在起点，但有一个死胡同的结束。而用户需要从头再来。这就是为什么有可能是几个进程从起点到最终的目标还是死胡同。
这里的一些提示要记住：
许多的过道（尤其像死胡同）时，更多的是使用户感到沮丧，
随着门的数量增加（长走廊），用户的快乐就会减少。
例如：Dribbble
下图中首先的例子是Dribbble。
一个出发点是Dribbble的主页，也就是用户的开始（s）门图，用户搜索目标主题后，没找到。
首先要定义目标，想象用户想阅读“如何预测网页设计趋势”这篇文章，并决定在Dribbble中查找。现在，用户已经发现了Dribbble是什么（页面说是“展示和讲述设计师”），所以我们看到了图（Dribbble“告诉”的），去要求或者留下一些评论（这也解释了用户的注册，因为只有注册用户可以发表评论）。
下面是最后得到的门图，显示用户评论设计师的作品（这个人是过于简单化的相关介绍）。这是我们用户的操作充分分析后得到的。
/*上图门图的个人解释：
1.定目标，也就是门上有皇冠的门，用户的目标是：阅读“如何预测网页设计趋势”这篇文章；
2.起点为（S---start）这个门，也就是找到Dribbble这个网站。
3.标记为[*]的门，[*]意思是误导信息，因为用户发现Dribbble是什么（页面说是“展示和讲述设计师”）的。
4.继续看到了标记为[*]的门，意思是用户看到了网站中的一个一个图，并点击一个图进去，想要留下评论，可网站告诉用户不能评论，先得注册。
5.标记为[ - ]的门是不可见的，意思是用户经过多次尝试，才达到最终的目标门——〉（G）goal门，找到自己想要的。*/
[*] 例2：探索链接
用户会看到“你还没有关注任何人。浏览上面的链接来发现拍摄和播放器。最新的拍摄将会出现在这里。”在此页面上文本是主要的信息，因此，下个动作是通过它。
用户注意到动词“探索”，并认为它是一个链接。
其实是个误导。
怎么改善：添加活动链接到这个单词意味着“链接的探索。”
[*]3：建议
下一步是做出举动。用户认为“探索上面的链接”是指文本上面的哪个“Following”还是“Suggestions”呢？，所以在用户进行移动和点击选择“suggestions”，因为他们遵循的逻辑 - 发现任何设计师的作品，你需要查看并给些什么建议。
但这个建议页面显示：“更多的设计师建议。”这意味着页面不完全履行其功能，并且不总是显示它应该显示的。
它是个误导。
（D）4：直接点击
所以用户进行另一次尝试，点击链接，高于上排“Following”和“Suggestions”（这是上面的文字“探索上面的链接”）。它可以是“Shots”或“Designers” - 两者都可点击。因此，用户现在是点击页面的状态。
[ - ]5：不可能离开评论
当向下滚动到最后的评论，用户希望找到一个形式来离开这个新评论。但这种形式不存在。
这不是很明显，为什么一个新的用户无法发表评论，并不知在哪里被写入。上图中不可见的门就可表示此网站隐藏不可见的路径“帮助”，然后去“发表意见”，最终想找到答案“我怎样才能留下意见？”。
这可能是最终目标前的最后一个步骤，因为去评论一个shots，是很不容易的。
怎么改善：放个标题，“只有玩家可以留下评论”（也应有链接）。
（G）：结果
总而言之，这个过程花了五个通道供用户达到目标。理想的走廊长度可估计为两个或三个通道。
结论
该门图的目的是帮助用户得到尽可能快地从他们现在的地方到达他们想要的（或预期）去的地方，并没有任何障碍和多余的动作。
如何使用门图：
1.定义某个用户是从哪并设置一个起点。
2.设定一个目标。
3.开始就像下棋的用户。
4.识别每一个用户输入的门，用户通过每一个过道。
5.写下什么可以为每个障碍得到改善。
6.绘制整个图。
7.看看哪些元素可以被消除，使走廊变短。
8.结果与其他门图进行比较。
该门图具有的优势（易于使用，可获取信息，采取灵活的行动）和缺点（失去视觉的新鲜感，它需要一个局外人来设计或使用这种神秘的方法），并作为可视化工具，很好的与其他服务设计工具结合。
全部评论：14条
-
-
-
-
-
-
面面君
2014-07-10 13:01以门图来视觉化表达，因某个目的而来到某网站的用户，从开始到最终实现目标经过的路径：这个路径称作走廊（corridor），路径节点称作门（door），上一扇门和下一扇门之间的被称作是通道（aisle）。理想的走廊长度为两个或三个通道。以用户要在dribble上达到阅读文章“如何预测网页设计趋势”这个目标为实例，讲述门图的实例应用。最后总结了一下画门图的思路以及其优缺点。
UI设计师可以用门图的方式来比较，为达到同一目的多种实现方式（路径）之间的差异，尽量保证选择的路径能够让用户直接、快速地到达目的地。
以上，仅为个人的阅读理解，如果有误，欢迎指正。
感觉楼主的翻译没有很好的表达出原文作者的意思，很多词汇翻得不是很专业（最明显的就是dribble实例讲解中“一个出发点是用户刚刚签约，位于Dribbble的主页”，“签约”翻译成注册或登录比较对），导致读起来很拗口，理解不能。我是看到实例讲解的时候忍不下去，直接拖到最后总结了。求英文链接~ -
-
-
-
-
-
更多作品
发表评论