用户体验与用户界面:设计阶段,参与者,角色和技能


0_7yO33_m7RLNBv5-Q.jpg

在你得到你需要的东西之前需要成千上万的动作的应用程序或者带有凌乱导航的网站都是从同一块布料上剪下来的 - 这是一种糟糕的用户体验。当然,我们不再需要使用命令行界面与软件进行交互。但这并不意味着每个现代数字产品都是用户体验创造的顶点。

用户必须理解网站或应用程序,无论其功能如何。如果您想要创建具有出色用户体验的数字产品,您不能跳过彻底研究,深入学习以了解您的用户以及图形界面设计的过程。你肯定需要设计师来管理这些流程。在本文中,我们将了解创建相关遭遇的人:用户体验(UX)和用户界面(UI)设计者。此外,我们将了解每个位置在用户体验设计过程中的位置。

界面设计:从什么开始?

那么,什么是好的用户体验?着名的用户体验设计师史蒂夫·克鲁格(Steve Krug)简洁地定义了“不要让我思考!”这句话成了他关于网络开发用户体验的书名。这意味着最好的用户体验是最直观的用户体验。

用户体验设计的趋势在不断变化 - 只需查看我们关于2018  年UX设计趋势的文章- 但主要原则仍然存在。信息架构师Peter Morville 将良好的用户体验定义为有用,可用,可取,可查找,可访问,可信和有价值。他在UX蜂窝中说明了这一点。


0_7yO33_m7RLNBv5-Q.jpg

用户体验Honeycomb 
 来源:Semantic Studios

当您开始构建新的数字产品或计划重新设计网站时,您必须首先了解您的用户以填充此蜂窝的所有内容。然后,你需要一个计划。

UX设计本身就是规划未来产品的过程,而UI则将这些想法放入用户界面。用户体验设计和用户界面设计经常被混淆,或者被认为是同一个东西。但他们不是。让我们说清楚并定义它们。

什么是UX设计 - 产品的原因

用户体验设计是创建为用户提供有意义和相关体验的产品的过程。它需要研究和分析所有与客户相关的信息,内容组织和排序,以便用户可以快速,轻松地找到他们正在寻找的内容。

用户体验设计的目标是创建用户感觉舒适的数字产品。这包含了产品功能和用户操作方式:内容层次结构,清晰导航和可视元素的功能。但最重要的是,这一切都有助于解决用户的问题。此外,必须根据技术和业务规范创建设计。

什么是UI设计 - 产品的方式

UI设计是制作软件或计算机化设备界面的过程,重点关注外观和风格。由于UX设计师的创造力,UI设计使得用户目标在美学上令人愉悦。因此,我们可以将UI视为UX的一个组成部分。但是,用户界面设计主要是面向对如何用户体验设计。

彼得·莫维尔说,“...... 为什么以及如何是不可分割的”,所以我们有两个有限的过程,朝向同一个目标:以最舒适和愉快的方式将内容带给用户。

在就业市场上,我们经常看到标题为“UX / UI设计师”的广告。公司更喜欢雇用能够完成产品整体设计的专业人士,使其具有响应性和视觉吸引力。这种情况发生的部分原因是业主希望所有人都以同样的价格购买,部分原因是有些人根本不了解UX设计所包含的哪些阶段和任务。事实上,UX设计将UI设计作为其中一个阶段。我们将研究这个过程以及两种类型设计者的功能和可交付成果。

1_bSWbImhtp6C55QNQCVOg8A.png

UX与UI设计师

用户体验设计细节和可交付成果

UX设计的整个过程旨在通过消除信息负载来创建最佳用户体验。它由两部分组成:

1)定义用户的问题,和

2)找到解决问题的方法和途径。

第一部分是用户体验设计师的责任,了解用户和他/她的需求,考虑如何引导某人实现特定目标。用户体验设计师可以作为用户的指南。另一方面,UI设计师是用视觉元素铺设这条道路并且主要负责第二部分的人。您可以在其中参与者和下面的可交付成果中查看UX / UI设计流程中的基本阶段序列。然而,根据项目的不同,它可能会有所不同。

1_bSWbImhtp6C55QNQCVOg8A.png

UX / UI设计流程

在设计Web,桌面或移动产品时,面向UX的团队必须始终牢记用户需要这个或那个确切元素的原因。用户是这个故事的主角,因此良好的用户体验设计必须面向用户和情感:用户体验设计第一阶段的很大一部分用于探索用户。

用户研究和分析

主要角色:业务分析师,UX专家

在这个阶段,每个人的目标都是了解用户和他/她的痛点。这是一个用户体验设计师与业务分析师一起进行市场调查,创建竞争分析,进行用户和利益相关者访谈,记录用户观察以及定义用户旅程的时间。

主要可交付成果:用户体验研究,竞争对手研究,用户旅程和用户个人资料。

如果需要,UX设计师可以与业务分析师(BA)合作。当业务分析师收集利益相关者和潜在用户的需求并将其构建到软件文档中时,UX专家会将其转换为产品的信息架构。在许多情况下,BA的角色由UX专家承担,或者他们在相同的可交付成果上进行协作。用户体验设计师从竞争对手的研究开始,定义未来产品的一般特征。

竞争对手研究。此过程允许UX设计人员分析竞争产品的最佳和最差示例,以及类似产品中使用的常见模式。基于此,团队可以自行实施竞争对手的应用程序或网站的最佳功能,增强这些功能,并找出用户对类似产品的问题,并着眼于消除它们。下一阶段是用户体验研究,旨在更密切的用户分析。

用户体验研究的目的是收集用户应用各种定性和定量方法的信息,包括访谈,上下文查询,日记研究,角色,卡片分类和可用性测试。用户体验研究有助于团队了解用户以及改善他/她体验的方式。

最流行和最重要的用户体验技术之一是卡片分类。信息 - 项目或功能的名称 - 写在卡片上,并提供给一组用户,为其分配类别。卡片分类结果将在稍后的站点地图或应用程序映射中使用。这是一种快速有效的研究方法,因为它有助于理解目标受众的一般逻辑,然后相应地对信息和特征进行分类。

基于用户体验研究数据,设计人员可以创建信息架构 - 我们将在稍后介绍 - 用户角色和旅程。

该用户角色简档是说明一个人谁将会与产品交互的原型模型的文档。这个概念类似于买方角色的概念,我们在关于启动SaaS业务的文章中对此进行了描述,但代表了更大的用户群。通常,此人被赋予假名,但来自个人资料的信息是基于客户访谈的一般信息。它包括以下基本信息:

  • 人口统计学

  • 目标和需求

  • 痛点

  • 行为

  • 行情(通常由真实用户)

1_bSWbImhtp6C55QNQCVOg8A.png

用户角色配置文件示例
 来源:保持可用

该用户的旅程或用户流量是一个功能强大UX的工具,以图形方式说明了产品的整个一步一步的用户体验。它由UX设计者绘制,描述了新用户或有经验的用户在开始和使用产品之前执行的操作顺序。用户旅程可以用文字和箭头或故事板形式来说明。您可以在下面看到我们为澳大利亚乘车共享公司Niftie创建的用户流程。

1_bSWbImhtp6C55QNQCVOg8A.png

Niftie用户流程

这些可交付成果决定了用户体验,因为它们定义了用户的需求,需求和行为,因此团队可以构建具有令人满意的功能的产品。在此阶段收集的数据成为UX设计下一阶段的基础。

信息架构(IA)

关键角色: UX设计师

作为UX研究的结果,设计师可以创建数字产品的完整结构。信息架构是UX的一切。IA的主要目标是以用户可以理解的方式对内容进行分类,使用户能够轻松找到他/她需要的内容。作为卡片分类的结果,UX设计者可以构建网站或应用程序的内容。有一些信息分类模式:

  • 分层 - 从最重要的项目到最不重要的项目,

  • 顺序 - 逐步,所有项目是相互依赖的,

  • 矩阵 - 一种内容组织方式,使用户能够决定如何安排内容,

  • 按字母顺序排列 - 按字母顺序排列

  • 通过关系 - 基于项目之间的角色和关系。

主要可交付成果:站点地图,思维导图,导航,标签系统

产品结构的基本轮廓以站点地图或思维导图的形式表示。

网站地图。此工件按层次结构显示页面和内容之间的关系。

0_7yO33_m7RLNBv5-Q.jpg

高级站点地图
 来源:UX.Stackexchange

思维导图是基于数字产品的不同实体之间的关系以及功能的详细描述来构建IA的工具。下面您可以看到我们创建的思维导图示例,同时帮助构建Cornerstone Information Systems 的企业差旅管理解决方案。

1_bSWbImhtp6C55QNQCVOg8A.png

Cornerstone信息系统网站和iOS应用程序的思维导图

在结构准备好之后,设计人员还可以标记类别并开发界面导航。

贴标系统。标签是界面上显示的较大类别的简称。

导航是指导用户浏览内容的产品的界面元素。它由站点地图定义,包括主导航,服务导航以及页脚或Universe导航。

因此,UX设计师拥有基本的内容结构,可作为下一阶段的基础。通过这种结构,UX设计人员可以开发产品的骨架。

原型

UX设计的这一部分在开发中起着重要作用,因为可交付成果由用户进行测试并向利益相关者展示。设计师创建线框,模型和原型。这些工件代表页面布局,看起来相似但执行不同的功能:它们代表了UX / UI设计开发的不同阶段的产品。

主要可交付成果:线框,模型和可点击原型

  1. 线框图是设计布局创建的初始过程。它是一个代表主要内容组的大纲,并显示了界面的一般功能。它包含灰色框,线条,按钮和示例文本。线框的目的是概述界面如何工作而不涉及图形细节,允许团队尽早评估用户交互的基础知识。此外,线框的简单性允许设计师重新设计布局的某些功能。线框可以是静态的或交互式的。即使在纸上也可以绘制静态线框,而交互式线框允许人们点击它并测试功能。

0_b8RCINEp_enwSDQM.jpeg

Foursquare静态线框  
 资料来源:Namika Hamasaki

对于移动设备,设计人员可以使用UI骨架。它指的是移动应用UX设计。UI骨架是移动图形界面的可视化表示,其中加载的内容以裸空间的形式表示。基本上,它是移动设备的线框。UI框架的目标是了解UI功能和用户友好性。

0_vjtrIxMcpt7BY7HH.gif

用户界面骨架
 资料来源:曾倩旭的涂鸦

通常,一旦线框准备就绪,UI设计人员就开始处理图形界面设计,基本上表示进入UI设计过程。这是UI设计阶段与我们在下面描述的原型设计阶段并行进行的地方。UX设计的下一个元素是一个模型,它已经具有最终产品的外观。

关键角色: UX专家

  1. 样机  - 这更详细地表示了设计,说明了产品屏幕的外观。它是线框和原型之间的中点,具有颜色,徽标,图片以及通常用户体验写作而不是真实内容。模型的目的是显示产品的外观。样机可以是低保真度和高保真度,静态或可点击,单页或多页。低保真原型和高保真原型因界面细节程度而异。

0_b8RCINEp_enwSDQM.jpeg

Foursquare高保真样机
 资料来源:Namika Hamasaki

主要角色: UI专家

  1. 可点击原型  - 这是未来产品的最终模型。与模型不同,它具有所有视觉和功能元素,内容,并且可以像最终产品一样工作,例如,您可以单击按钮,将值输入字段等。因此,设计人员,利益相关者和用户可以测试它,模拟真实互动。

可以通过开源或付费原型制作工具创建线框,模型和原型。这里是其中的一些:

  • Sketch  - 适用于Mac用户的基于矢量的设计和原型设计工具。

  • InVision Studio  - 一款带动画的免费原型制作工具,兼容所有类型的设备。

  • Figma  - 用于在线UI设计,原型设计和测试的工具。

  • MockFlow  - 用户体验设计的平台,允许用户体验设计师创建线框,样式指南和站点地图。

  • Moqups  - 用于UI原型设计,线框,模型和图表的在线工具。

  • Lucidchart  - 图表和线框的工具。

  • Balsamiq  - 一个带有线框和模型桌面版的Web应用程序

  • 线框  - 用于线框图和模型的在线工具

对于那些喜欢纸质线框和模型的人来说,有纸质模板。

原型设计是UI和UX设计者共享的UX设计阶段。一些人声称线框和模型的创建是UX设计师的责任,而UI设计师则在原型上工作。仍然,UI设计人员在界面的可视部分工作,并在原型中实现它。让我们来看看这个阶段的组成部分。

关键角色: UX专家

UI设计系统

主要角色: UI设计师,前端开发团队

当最终布局准备就绪时,设计师可以处理图形。线框和模型是骨架,而图形是数字产品的肉体。在此阶段,UI设计师开始开发数字产品的图形界面。它需要绘制图标,选择排版和调色板,以及设置UI指南。

可交付成果: Moodboard,UI风格指南

在设计师开始真正设计界面之前,他/她需要一些灵感。Moodboard是一个很好的工具。它允许设计师找到视觉设计的想法。它由不同的图像组成,激发了界面的最终调色板和整体风格。

1_bSWbImhtp6C55QNQCVOg8A.png

巴黎地铁票箱接口的Moodboard

这是一个例子。如果你去过巴黎,你可能知道购买地铁票是不愉快的。用户体验设计师Greg Jeanneau创建了一个巴黎地铁票箱界面,以简化用户的生活。Greg使用巴黎的视图和巴黎公共交通运营商RATP的标志作为调色板的灵感,以及用户界面元素的巴黎地铁站的排版。

1_bSWbImhtp6C55QNQCVOg8A.png

巴黎地铁票箱的用户界面
 来源:Greg Jeanneau

关于视觉设计的所有决策都记录在UI样式指南中。

UI 风格指南。这是一份收集品牌视觉风格所有元素的文件。本文档的主要目的是保持一致的设计并促进设计人员和前端开发人员的工作。样式指南标准化网格系统,布局,调色板,排版,图标,徽标,图像,并考虑可访问性要求。


1_bSWbImhtp6C55QNQCVOg8A.png

Airbnb UI工具包
 资料来源:D erek Bradley

当所有这些可交付成果准备就绪时,前端开发团队可以在图形界面的原型中实现结果并最终对其进行测试。当开发人员实现设计功能时,UI设计人员会跟踪此过程。

可用性测试

主要角色: UX设计师,前端开发团队,UI设计师

第一个原型准备好后,团队就可以测试其可用性。可用性测试不同于QA测试或A / B测试。其主要目标是从产品的真实用户那里获得反馈,以了解界面的直观程度,以及用户是否可以通过产品实现目标。

在此阶段,UX设计者记录并分析测试结果。有几种不同类型的可用性测试:

比较可用性测试用于比较一个产品与另一个产品,例如竞争对手,或者当比较两个版本的设计并且选择最佳设计时,它可以类似于A / B测试。

探索性可用性测试通常在发布之前进行。它专注于找到产品设计中的盲点和缺口,这些缺点和缺口是以前没有见过的,但却被用户观察到。该测试有助于产品在进入市场之前进行改进。

产品启动后进行可用性评估并进行所有必要的改进。这是对产品进行再次测试以确保更改能够提供积极直观的用户体验的时候。

0_7yO33_m7RLNBv5-Q.jpg

可用性测试报告模板
 来源:  tensio

在用户测试之后,设计人员可以在UI或UX设计中添加必要的更改,然后将产品的设计分配给开发人员团队以进行实施。但是UI和UX专业人员的工作并没有在发布后停止。他们一直关注产品。

支持和进一步发展

因此,产品发布,用户认为它是合适的。这并不意味着不再需要UI和UX设计师。他们仍然致力于UX / UI设计,根据设定的设计系统和UI风格指南不断更新产品。

进一步测试和评估。新内容和功能通常需要更改界面以改进关键性能指标。这意味着团队可以重申可用性评估,建议某些屏幕的其他实现,并运行A / B测试以定义性能最佳的版本。

改进和新功能。用户体验设计师必须了解用户需要哪些新功能,并决定如何将其置于现有设计中。UI设计人员根据新要求更改设计,并监督A / B或多变量测试。

重新设计。如果产品需要重新设计,团队从一开始就重复整个过程:进行新的UX研究,创建新的站点地图和线框,同时UI设计师提供模型和发明原型等。

虽然我们描述的阶段和可交付成果是最常见的,但UX / UI创建的方法各不相同。例如,我们最近讨论了Google Ventures 的Design Sprint方法,这是一个时间框的过程,可以进行初步假设,创建原型,并对真实用户进行测试。有时,省略了各种可交付成果以缩短设计阶段。

最后一句话:一个人可以成为UX / UI设计师吗?

UI和UX是不可分割的。但这是否意味着你可以聘请一个UX / UI设计师,一个人可以完成从A到Z的整个UX设计过程?用户体验和用户界面设计是整体的一部分,将整个过程分配给一个人似乎是合理的。但问题是UX设计需要比平面设计更广泛的技能和更多的经验。虽然UX设计师可能能够创建原型并与UI团队合作,但UI设计师必须具备执行全面用户行为和营销研究的技能,并且让用户同心创建具有用户喜爱的直观界面的产品并使用。

摄影:Harpal Singh,来自Unsplash






注:本文转载自AltexSoft公司 logoman译,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除。