河源网站制作：UX过程的6个常见问题和6个解决方案

2019.08.12 mf_web

191

您的用户体验设计过程有多强大？我们都有自己喜欢的方法和技术，但总体流程是相似的：进行研究，原型，然后呈现给利益相关者和用户。河源网站制作

我们成功交付了项目，纠正了问题并磨练了我们在不同场景下交付的能力。但是，我们都知道每个项目都是独一无二的，每隔一段时间就会让你感到惊讶。

每隔一段时间，一些东西会让你感到惊讶。

在过去三年中，我一直是法律领域大型网络应用项目的首席设计师。当我在2011年开始与客户合作时，需求文档为100页。从那时起，已经投入了数百万英镑来设计和构建这个雄心勃勃，改变游戏规则的软件。

在本文中，我将讨论我们面临的各种挑战以及我们最终如何克服挑战。其中许多学习可用于增强小型项目中的用户体验设计过程。

问题1：面对可行性

通过一个小项目（例如一个简单的网站），直接进入您选择的线框工具并制作一个快速的交互式原型，将您的想法传达给客户是完全可以接受的。在更复杂的场景中，我们中的许多人将绘制用户旅程，并可能在进入该阶段之前定义角色。这不是什么新鲜事。但是当用户旅行如此复杂且数量如此之高以至于项目的可行性不确定时会发生什么？

在Web或移动应用程序中，您可能有许多不同的工作流程，以满足在系统中具有许多不同角色的用户。然而，尽管某些部分可能存在复杂性，但我们知道大块可能是可行的 - 登录，注册表格和我们都熟悉的导航元素。

在线框图时，我始终采取遵循用户旅程的逻辑步骤，从登陆页面开始，然后到达最终目标。然而，如果主要课程无法实现的话，如果有足够的理由可以覆盖，那么烹饪配菜就没有意义。

商业可行性研究通常关注市场条件和技术限制，但确定是否可以提供良好的用户体验（UX）同样重要。如果发现该项目过于雄心勃勃，那么可能会浪费很多精力。

解决方案1：首先解决UI的挑战性部分

在发现阶段，确定用户界面（UI）中最具挑战性的方面，然后为这些特定部分创建线框。这完全符合熟悉的用户体验实践，例如通过系统映射不同类型的用户及其旅程。

首先解决这些挑战不仅可以更快地帮助设计进度，还可以帮助您估计需要多长的开发时间。

让我们考虑一个假设的情景。您被要求设计一个网站，其中包含一项功能，使用户可以实时邀请人们设计朋友的生日卡。

考虑以下旅程：

假设的用户旅程。（查看大图）

现在让我们确定挑战。我们都知道登录和邀请部分是可行的。即使我们过去没有自己建造它，我们也看到过类似的事情。

让一组用户实时协作？那可能很混乱！我们需要首先对该部分进行原型制作，否则整个过程将无效。您可能还想考虑项目的主题。也许最大的挑战是主题，或者它可能更简单。如果是这种情况，那么你也应该在早期的线框中加入它。

总而言之，虽然大型项目中的可行性问题可能很难，但我们可以通过预先为UI的困难部分创建线框来更快地回答它。

问题2：呈现不完整的旅程

这个问题是第一个解决方案的副作用！我们如何解释我们留下的差距？为了验证到目前为止所做的工作，我们需要与利益相关者和潜在用户分享。

即使在项目的这个阶段 - 可能持续数月甚至数年的十字军的开始 - “哇”因素至关重要。我们需要让所有人参与其中并确保他们的支持。

解决方案2：讲述一个故事以填补空白

继续生日贺卡的例子，我们可以将这个网站的概念介绍给我们的利益相关者和潜在客户：

用户将通过登录并选择“新卡”开始该过程。一旦他们从列表中选择了他们的朋友，他们就必须等待响应。当他们的朋友做出回应时，他们都会一起进入编辑器，这就是它的工作原理。

这可能听起来很奇怪，但确实很有效。它还有其他好处：

我们开始讨论用户界面中所有不起眼的部分，而不是冗长的构建，我们开始讨论提议的解决方案。通过切入追逐，我们确保在我们到达重要的东西时注意力不会漂移。
在线框演示文稿中偏离轨道很常见。回顾一下我们的旅程图，想象一下我们是否已经为第1步到第4步提出了线框，然后陷入了关于步骤3中需要哪些表单字段的冗长讨论。我们真正想要的是第5步的反馈，所以让我们到达那里早，虽然每个人的心灵仍然是新鲜的。
通过这样做，我们还减少了会议时间，您将发现自己能够在可用的时间内举办更多的研讨会。

通过在我们选择的线框旁边讲述故事，我们获得了所有这些好处并解决了呈现不完整用户旅程的问题。

问题3：线框图软件有局限性

线框真的应该有多详细？许多Web应用程序具有丰富的动画和微妙的交互，大多数线框工具和草图无法模拟。

另外，线框无法维持状态。例如，管理员登录时布局如何变化？如果它是一个电子商务网站，完整和空篮子是什么样的？我们可能想在我们的原型中模拟这两种状态。

没有状态，我们的应用程序是无用的。然而，我所知道的没有WYSIWYG线框工具可以有效地模拟它。

您可能会争辩说，如果我们要将这样的逻辑构建到我们的线框中，那么为什么不首先构建这个东西呢？辩论很有意思。也许有一天，有人会发明一种可以实现这一目标的产品; 在那之前，我们必须解决其他方法。

解决方案3：选择更高保真度的线框

在项目的早期阶段，确定用户交互涉及多少复杂性。您的想法是否可以被任何人轻易理解为一系列静态线框？如果不是很明显，那么通过创建更高保真的原型，您将从长远来看节省时间。

在早期这样做可能听起来有点过分（当然，它可能更耗时），但它有好处：

在需要复杂交互的项目中，鼠标的每个移动和键的笔划都可能涉及小的细节，这会对整体体验产生重大影响。动画原型更容易交给大型开发团队，因此每个人都知道网站应该如何工作。
在向用户和利益相关者展示时，原型还将使您的愿景更加清晰。

3A：创建HTML原型

如果您拥有前端开发技能，那么使用HTML，CSS和JavaScript构建可能是值得的投资。

这种方法有一些关键优势。JavaScript使我们能够模拟状态，许多框架将帮助我们快速创建微妙的动画和效果（包括jQuery和Scripty2）。

当然，缺点是整个过程可能更耗时。还存在浏览器不一致的小问题，最好在以后的项目中解决问题！

3B：创建动画原型

动画原型也是展示您的想法的好方法。我选择的工具是Adobe Flash。虽然有些人会说Flash已经成为一个网络插件，它仍然是一个快速的动画工具。在其中绘制内容就像在任何其他图形应用程序中一样简单，动画就像拖放一样简单。输出可能需要查看插件，但它确实绕过了那些讨厌的浏览器不一致。

当然，还有很多其他工具可以做到这一点。Microsoft的Sketchflow可以生成非常流畅的原型，Adobe InDesign也能够生成动画交互。

这是我之前做的一个：

动画原型的一个例子。

让我们将动画应用到我们的生日卡片网站。我们知道我们的协作工具会有很多移动（多个光标可能会在屏幕上移动），而静态线框将无法正确捕获它。所以，让我们考虑每次互动的细微之处并捕捉它们。

一个很好的例子就是将鼠标悬停在箭头上转到下一页会使页面略微上升。在普通的翻页器中，我们可以让底角翘起来，但是我们正在制作纸板产品，所以让它更真实！

像这样的小细节确实有助于给观众带来整体印象，并且还可以让开发人员更详细地了解他们需要构建什么。

3C：使用注释

虽然动画可以帮助我们弥合交互性的差距，但注释可以为应用程序状态提供进一步的指导。这是一个简单的解决方案，但它适用于许多场景。只需确保您以一致的注释格式（例如，红色框+红色文本=注释）与开发团队达成一致，否则有人可能会在应用程序中构建一个！

注释是一种简单的解决方案，可为应用程序状态提供进一步的指导。

上述方法只是克服线框软件限制的三种方法。用户体验项目中的原型设计是一个广泛的主题，我随着工具和技术的发展不断监控。

本文结尾列出了一些提供良好起点的资源。与此同时，让我们继续讨论问题4！

问题4：线框难以完成

为项目中的每个工作流程创建了许多不同的线框集，绘制线条并进入颜色和样式领域可能很困难。

讨论是在项目期间进行的，这意味着景观总是在变化。在用户工作流相交的Web应用程序中，一个小的更改可能会对您的线框产生滚雪球效果。

在继续前进之前，您无法等待所有星星对齐。它可能永远不会发生。我们还必须考虑客户的预算，并在时机成熟时将项目推进到下一阶段。

解决方案4：开始设计并接受后果

当线框仍在不断发展时，决定何时开始创建设计模型（或comps）可能会很困难。我们知道我们不能等待 - 开发人员需要开发，更重要的是，产品需要出售。

一旦到达每个工作流程（或用户旅程）至少部分线框化的阶段，通过模拟整个项目中的三到四个对比屏幕开始创建视觉样式。

同时处理线框和样式可能看起来很可怕，特别是因为客户经常在过程的不方便阶段改变主意。但是，无论我们选择什么样的路径，在大项目中都不可避免地会发生变化。这么多工作需要完成。你几周前穿过的垫脚石会在你回到它们之前转移（甚至沉没！）。不要失去信心; 继续盘旋，最终它会解决。永远不要期望第一次就做对。拥抱变化，并继续前进。

在它们之间切换也是有益的。在许多情况下，为布局添加颜色和样式实际上帮助我在使用灰度线框时进行了不明显的改进。

因此，如果您正在处理由于不断变化的需求而不断变化的一组线框，请不要让它阻碍整个项目。继续使用视觉风格，让项目继续前进。

问题5：向开发人员和测试人员传达行为

我们现在有我们的设计组合。我们有可点击的原型，动画线框甚至注释来传达应用程序的状态。但是，如果您正在为一个大型团队工作，那么您并不总是希望每个人都处于相同的波长。实际上，团队越大，在整个项目中实现一致性就变得越来越棘手。作为设计师，我们的知识是将所有UI工件保存在一起的粘合剂，有时我们必须加倍努力将其传递给我们的同事。