前期调研在线视频

Hello各位同学大家好

交互设计系列课程在前面八个章节

为大家带来了交互设计基础讲述

那么如何将交互设计中的理念和方法

运用到实际的设计课题中

也是本门课程的一个重要环节

从这里开始

我们将设计的案例

为大家回顾前面八个章节所学的知识

首先是我们的第一个案例

“救在身边”手机app的设计

那么从这个app的名称来看呢

它应该是一个与“救”相关的app设计

这个app的设计过程一共可以分为三个阶段

发现问题

定义问题和解决问题

与一些既有app的再设计或者迭代不同

这个app没有前序版本

是为了解决新发现的问题而诞生的

因此我们用选题背景来说明问题的发现

问题的定义呢则是对问题的深入

就包括对比目前市场上已有的产品

也就是市场调研

那么做这样一个app不仅要关注市场

也要关注用户

所以这个阶段也还包括了用户研究

在第三阶段则是具体的设计

app去解决前面发现的问题

我们从信息框架的设计开始

对app进行一步步的设计

再通过用户测试发现问题

进行迭代

这个app的诞生其实与一些社会问题息息相关

所谓设计来源于生活

服务于生活也就是这个道理

这里的问题是什么呢

生活中频频发生一些安全事故

比如火灾

地震

车祸啊等等

造成人员的伤亡

这样一些安全事故中

有些是可以避免或者减轻伤害的

但是为什么结果还会如此恶劣呢

通过调研我们发现一些事故的当事人缺乏安全意识

不具备安全事故处理的知识

生活中也没有安全事故的演练

因此遇到紧急情况的时候就束手无策

这样一系列的问题总结起来就是安全教育的缺乏

那么小组同学想利用一种设计不断地

随时随地为用户普及安全知识

增强安全意识

提高大家在遇到安全事故中自救的能力

这样一个产品就有了模糊的定义

为了让整个项目更加地清晰

我们用交互系统设计的一些理论对整个项目做了概括

在交互设计原理这一章我们见过

交互系统的四大组成要素

人

行为

技术

场景

那么这里我们也用这种方法去界定这个项目中要考虑的因素

首先是人

也就是我们的用户

很明显我们的用户是拥有智能手机的某个群体

但是没有明显地规定年龄段

性别等特征

当然这种粗略的特征还要在后续的用户研究中完善

接下来是行为

简单地描述使用产品的行为就是

使用我们的产品进行安全教育

场景当然是随时随地

由于目前网络技术的发展

智能手机的普及

因此利用手机app是较为理想的方法

但是交互系统的四大组成要素

不是具体确定问题解决办法的黄金法则

只是帮助我们快速确立或者分析交互系统的办法

这里项目小组的成员提出另外的思路

对我们的产品场景和实现方法

技术进行了补充

也就是我们提到的5W1H分析

在5W1H的分析里面

who对应的是上面的人

when和where则是对应的场景

what与行为对应

how呢则是实现办法

这里的how又不是单纯的技术环节

还对整个项目的完成提出了计划

这种分析方法多出了一种why的分析

也就是我们为什么要这样做

也就是我们的产品最终要解决的问题

包含了产品或者设计的目标

接下来是根据前面建立起来的思路

进行调查和前期分析

对用户有用户研究

对场景有场景研究

故事板描述等方法

行为有观察和记录

技术则有技术分析

但是我们也说过这四项内容基本还很模糊

现在贸然地深入下去有很大风险

也有可能找错方向

那么最快速

稳定的研究方法就是找到

同时具有这些要素的载体去分析

也就是市场存在的竞品

竞品的分析是一个不断缩小范围

呈现漏斗形状的探索过程

现在的安全教育的手段包括了电视媒体宣传

讲座

防灾减灾演练

书籍传单等纸质媒体以及网络媒介

由于前面我们的交互系统明确了产品实现的技术路径

所以竞品应该在移动app中寻找

设计团队通过关键词的搜索

然后试用

体验相关的app

建立一定的竞品库

然后根据用户评价

下载量等相关因素进一步缩小范围

在这里我们的做法是将竞品库中的样本进行分类

然后在每个类别中找到用户数量

最多的一两个产品作为竞品

一般我们会使用问卷调查

访谈等方法知道周围的人大都在使用什么产品

也可以借助一些指数排行工具来进行竞品的筛选

比如我们在这里输入关键词安全

就会得到与之相关的产品

在用户排名中找到了排名第一

且属于“教育”分类的app

学校安全教育平台

该app在“教育类”app中用户下载量排第六

安全教育类排名第一

ios系统app store“教育”类用户下载量排第二

因此作为主要的竞品进行分析

除此之外在医疗和急救分类下面

我们又找到了一些app进行体验

发现某些app也有安全自救的教育功能

这里我们以“急救”app为例进行竞品分析

在其他排名中“宝宝巴士”

“宝宝出行安全”等儿童安全教育类app

也有很高的下载量和用户评价

因此我们在体验之后

发现“安全守护”与安全知识教育关联性小

选取了 “宝宝巴士”作为次要的竞品进行分析

接下来对竞品的具体分析

你会发现这些产品的策略和目标各有不同

而且功能点和内容也有很大的差异

在交互框架

交互方式上也是各有特色

当然设计的风格就有更加明显的差异了

那么我们的分析就会从这些要素入手

如果将这些要素放在某个框架中来看的话

你就会发现

这和我们之前讲的用户体验5要素

是一一对应的关系

因此我们的竞品分析就是从产品的用户体验5要素

也就是5个层次去做分析

分析的具体内容包括以下几个方面

满足的用户需求

也就是产品目标

功能和内容

信息架构和交互设计

导航和界面设计

产品的视觉表现

首先是官方机构出品的安全教育平台型app

这个app是中国教育学会主办的移动安全教育平台

该平台主要为教育部门及学校提供数据查询

发通报及发送紧急预警信息

为教师提供授课提醒

数据查询

给学生和家长发送安全提醒

方便学生和家长学习安全知识

参与安全活动

接受安全提醒和预警信息

我们通过首页slogan可以看出

app想要实现的一个价值

或者说是产品目标就是科学化

常态化

信息化的学校安全教育体系

这是整个平台的战略

就这款app具体而言

它主要的用户群是在校的学生

通过app的功能介绍我们可以看到

虽然用户群很广泛

包含了教育部门

学校

家长

老师

学生

但是针对每类用户都出现了数据查询

安全提醒

安全预警

也就是产品的主要目标

结合前面的slogan

app利用了实时的数据查询

安全提醒

安全预警来实现常态化

信息化就体现在网络技术的使用

当然产品实现的功能和设置的内容

还是要深入到app中去分析

在主页面app推送的是活动消息

以及学生的安全作业管理

消息则是关于安全和消息的通知

作业通知和教育资讯

发现提供的是专题的活动和热点资讯

安全知识手册以及作业通知

剩下的功能则是个人账户的管理和消息通知的设置

从功能设置来看

标签栏每个入口之后都有作业通知的功能

这是为什么呢

通过用户评论记录我们发现这款app主要人群是学生

与学校教育有着很密切的联系

而安全教育是一个很枯燥乏味的事情

如果让学生主动去学习必然有很大难度

但是如果当安全教育与自身作业任务“绑定”之后

就会引起学生和家长的重视

提高使用率

而在这个过程中实现了安全知识的普及

也让安全预警和通知起到常态化的作用

所以这款app的核心功能是建立几个群体间的安全信息共享

而“作业”相关的内容就成了辅助性功能

总结一下这个产品范围层的设计就是

以安全教育的功能为核心功能

使用了“作业”的功能辅助

再加以一些运营的方法

虽然目的达成

但是难免牺牲用户体验给用户造成抵触情绪

在这个app功能中

利用辅助功能实现安全教育的闭环

分散安全教育枯燥无味带来给用户带来的抵触情绪

也是一种可取的思路

接下来是对这个app的结构层进行分析

这一层就是产品的信息架构

业务流程设计和交互设计

这里我们画出了这个端的信息架构图

从信息架构图里我们可以看出

这是一个浅而宽的信息架构形式

这种模式有利于用户在每个入口间切换

用户能够轻松地找到想要的内容

但是 “发现”和“首页”

“消息”

“我的”相比规模就更宽

主要是内容将不同的安全知识进行了分类

每个归类下面只有两到三项的内容

这样做确实更方便用户寻找内容

但是这样的安全信息分类

如果不能和用户的逻辑形成一致

用户在使用的时候就会出现挫败感

体验大打折扣

设想一下

如果在技术成本适当的情况下

这里增加一个搜索的功能

是否对体验要好一些

从这个app信息架构的设置来看

也是延续了以安全知识教育为主的逻辑

这里的架构才如此庞大

所以一个app的设计从最初的用户需求

到最后的设计都是按照逻辑一步步的铺设来的

在结构层还有一项内容就是交互设计

一个app的交互设计我们该如何去评估呢

前面我们说过用尼尔森的10大可用性原则去评估

但是在竞品分析阶段如果用这种方法

去评估就会耗费大量的时间

事倍功半

我们这里使用了简单的分析方法

主要是从操作流程和交互细节上做分析

某些产品还需要从业务流程来分析其交互设计的好坏

那我们这里就采取任务测试的方法

去发现交互流程的优缺点

这里的任务是利用app学习火灾的安全教育知识

首先我们安装好这个app

作为第一次使用需要登录

但是我没有账号所以还需要注册

App没有注册入口

于是我要到官网web网页端进行注册

完成之后再回到app登录

并进入到主界面

接着点击进入发现

再点击进入安全手册

进入消防安全

进入火灾逃生

接下来是学习其他火灾安全知识

回到刚才的页面

又继续进入

分析下来我们发现这里交互流程主要

在开始和结束的时候出现了一些问题

开始的时候没有提供注册入口

我们想过用户可能是不需要注册

在校学生都是由老师统一发放登录名和密码

但是将注册渠道只留给了web端而没有给这个端口

就很影响用户的体验了

这里还有一个交互细节问题就是登陆的时候缺失一些提示

在业务流程末端

交互流程就显得有些繁琐

反复跳转才能学习到更多的火灾安全知识

但总体来说这个步骤不算长

还能接受

在框架层要分析的重点内容就是导航设计

也就是信息的导向问题

导航设计的分类和优缺点

我们在前面已经有过详细的讲解

这里我们就可以对照分析app的导航

这个app的导航使用的是典型的底部标签

导航模式作为一级导航

和前面信息架构的分析得到一样的结果

就是有利于用户快速发现内容

可以实现在入口之间的轻松跳转

操作起来也方便快捷

二级导航中以发现为例使用了列表导航

在安全手册中使用了宫格导航

而在热点资讯中又使用了标签导航

安全则采用了卡片式的导航

其中在安全手册中使用宫格式导航

是一种比较好的导航方式

入口清晰且方便快速

这种导航模式主要还是由结构层的内容决定的

安全教育的内容是以文字读物为主

需要用户沉浸式地阅读获得更好的效果

因此不需要快速切换和跳转

但是又要将内容进行很直观的分类和放置

所以宫格式就起到了很好的作用

那么最后的表现层

也就是app的界面视觉设计

直接影响用户的使用体验和观感

App的桌面logo设计采用了蓝

白绿的颜色

象征了生命力和安全

如果从一个用户的角度去分析

这个logo给人传达出

“为成长的生命力提供一片安全的蓝天”这样的寓意

和app本身的产品目标

用户群体还是很贴合的

在页面的色彩上使用的蓝色也是一种有宁静感

安全感的色彩

标签的灰色和选中时的蓝色

在阅读上有很明显的视觉反馈

同时又与app的主题

风格相照应

当然针对学生使用的app如果在趣味性

反馈上能更加丰富一些

能增强学生自己学习的意愿就能有更好的体验

我们从用户体验的5要素对这个竞品进行了分析

而这种分析属于垂直深入

因此还要和其余的几款竞品进行横向比较

同学们在进行竞品分析时可以沿着上面的思路进行

当然要保持良好的习惯

将分析的内容进行总结和归纳

方便思考

这里我们就用表格的形式写下分析结果

也可以使用kano模型

雷达图等直观的形式

但是建立模型花的时间要长一些

第二个app是“急救”

这是由国际红十字会出品的一款知识

技术传授型app

这款app主要目的是为了传授简单实用

科学权威的急救知识技术

不仅能帮助用户随时随地学习急救知识

还能起到预防灾害和突发事件的安全教育作用

官方使用人群为年满12岁用户

“急救”app在产品介绍中明确指出

这是一款知识与技术学习的软件

在功能设置中有人身伤害处置的学习

有日常灾害

安全事故

疾病等预防知识

还有紧急情况下的处置步骤

但是应急内容中的求救很难在实际情境中发挥作用

比如紧急情况下

用户拿出手机的第一反应是

拨打120而不是打开软件去拨打120

此外app还设置有安全知识的测试

并利用奖励机制鼓励用户自我测试

内容则主要是以文字和图片的模式进行说明和指导

内容表现比较单一

缺乏一定的趣味

关键内容也用文字表示的话会缺乏一定的准确性

因此可以配合图片

声音

视频等多种内容的形式

“急救”app的信息架构特别简洁

首页五项内容

每一项内容下只有一级或者两级信息

因此很容易到达用户想要的位置

而且作为一款由公益组织出品的产品

该app在进入时不需要注册或者登录

具有很流畅的体验

这为紧急情况下使用该app的使用提供方便

同样用户测试

我们发现这款app要使用的步骤要少很多

但是有一个情况

在模拟应急情况下的处置时会有阅读的障碍

app拨打120要调用系统拨号

反应就慢了很多

由于app提供了多项安全知识的内容

因此在主页面采用标签导航

这种简单准确的模式作为一级导航

在每个分类下又使用列表菜单进行二级导航

每一项信息呢都清晰准确

比较简洁

具有很高的使用效率

最后是app的视觉设计

桌面的logo采用了红十字会白底红十字的标志

具有很高的视觉辨识度

App的标题栏底色为红十字会标志性的红色

底部标签栏为灰色

选中是红色

整个app界面比较简洁和清晰

易读性很高

但是由于太过简洁

也稍微显得有些枯燥乏味

如果不是为了学习安全知识所需的话

这样的软件很难抓住用户的眼球

最后我们也用表格的形式

对“急救”app进行分析总结

很多时候我们的竞品分析就是流于只言片语

所以我们这里要写下分析总结

然后进入深入的思考之后给予一定的评价

最后一个是我们的补充分析

属于儿童教育类的app

宝宝巴士是中国较为著名的儿童互联网早教品牌

专注于智能的早教产品开发

并取得了很好的用户反馈

宝宝巴士的系列产品都是以简单的操作和精美的图片

动画

多种内容手段迎合儿童的特性进行兴趣式教育

那么我们分析的这款“宝宝居家安全”

是针对3-4岁儿童设计的家庭居家安全知识学习软件

也是一款亲子教育软件

这款app所要解决的问题是宝宝成长过程中

会遇到各种各样的安全隐患和伤害

如何有效且有趣地教导宝宝学习安全知识

并在软件中植入家长与儿童的这样一种亲子互动

从范围层来看

那么这款app的主要内容是教育用户

如何在居家生活中避免安全隐患

内容情境主要限定在居家环境中

同时app还在传播安全知识

培养安全意识的同时教育了一些生活的常识

而为了吸引小孩的注意力

培养他们的兴趣

app中也准备了安全知识的主题动画片

作为一款亲子教育的app

因此也有家长教育的内容

包括儿童的使用时间管理

问题反馈等等

这些都需要家长来操作

从主要内容来看

这款app主要以游戏的形式进行安全教育

并伴随儿童音乐

动画呈现

这也是因为用户的特殊性

要满足用户群体需求而特别设计的

产品的信息框架也十分简单

主要的信息流集中在安全教育交互的游戏当中

其次是家长的操作部分

同时作为“宝宝巴士”产品群中的一员

这款app首页为其他的软件提供了跳转的入口

这属于品牌推广的一部分内容

在安全教育游戏的环节呢

在进入每个游戏环节时都采用了单一线性的架构模式

这有利于营造沉浸式的体验

app的交互设计呢也注意到了用户的思维习惯

所以线性的交模式进入到下一步

防止儿童用户的兴趣被打断

在整个互动过程中

实时的交互反馈也是十分关键的

所以这款app的交互形式也十分的丰富

包括视觉上啊

听觉上啊

触觉上的交互

而且这种丰富的交互和反馈不仅适用于儿童产品

这种设计思路也适用于其他的任何产品

因为这也正是尼尔森十大可用性原则中的内容

接下来我们来看界面的信息设计和导航设计

由于儿童缺乏一定的注意力

所以界面收拾得十分干净

将不重要的内容收纳起来

使用跳板式的导航来引导儿童进入到某一个交互过程中

而且还通过图标体积的设计区分出了各个功能的重要度

比如两个非常大的按钮

配合浮动的动画

在视觉上就能够吸引注意力

家长中心则放置在界面最右上角

也是通过跳板的形式进入家长界面

而在家长界面导航就是用了列表菜单式导航

这样就更高效地设置

而且能明显感觉到用户角色的变化

而左侧其他产品的跳转入口属于广告内容

在未付费的情况下放置在界面的左边

能够吸引儿童的注意力

这样提高了这些链接的转化率

最后是产品的视觉层

除了刚刚我们提到的用各种方法吸引儿童的注意力

丰富而且鲜明的色彩

也能够吸引他们的的注意和兴趣

此外app每个地方都使用了动画的

视觉表现引导儿童注意

除了视觉表现之外设计师还使用了轻松愉快的儿童背景音乐

让交互音乐更加丰富

所以整个视觉很明显地体现了

儿童产品的一个特色

“宝宝居家安全”作为我们的补充分析

其中最大的内容就是如何将教育形式做得有趣

鼓励用户进行参与和学习

这种思考不仅是儿童教育app所需要的

任何教育软件都需要思考这样的问题

这里可以借鉴的是丰富的

即时的交互反馈

有趣的

沉浸式的用户体验

或许是改变教育和学习的枯燥的一种方法

同样我们把这个app的分析总结制作成表格

保存起来

那么每个竞品的分析结束之后

我们最后需要进行总的分析和总结

写出分析报告

通过小组讨论的方式进行总结

然后得到其中的设计机会点

接下来就是结合市场的分析

进一步刻画我们的产品

明确我们的用户的属性和产品的一些功能

为设计提供需求档案