创新工具 | 教你6步用故事板设计用户体验事半功倍

  • 问题

构思方案时团队在细节上难以共识

  • 故事板是什么?故事板就像连环画一样,将用户使用解决方案的关键步骤顺序串联了起来,呈现了方案和用户之间的交互。
  • 故事板以先后顺序展现团队票选出来的最佳解决方案,在过程中对于方案中未讨论的细节和开放性问题达成共识,同时也是为下一阶段的制作原型进行铺垫。
  • 因此,虽然在决策方案阶段,团队已经对要验证的方案达成共识,在绘制故事板过程中,团队成员还是会因为细节的讨论上产生不少冲突和分歧,甚至有些团队陷入了漫无止境的讨论。下面通过六个步骤,避免大家因为进入非结构化的讨论而延长故事板绘制时间,让团队专注于高效产出故事板。

  • 解决方案

6个步骤让团队在冲刺中高效地故事板设计

步骤一:写出用户验证流程

  • 除了决策者的所有人拿便签纸
  • 回顾上一步确定的解决方案
  • 每个人写下一个你认为用户从进入到退出该解决方案的6个关键步骤 (比如点击/长按等)
  • 此时可以参考用户体验历程和冲刺问题
  • 可以先列出起点和终点。起点是一个真实的进入点,即用户是如何进入找到解决方案的;终点即理想的结束点,即用户是如何离开解决方案的,通常是他们使用解决方案完成了某个任务或目标。然后将故事的中间环节分割成用户完成任务的几个关键步骤。
  • 比如,以摩托车出租服务这个解决方案为例。起点是用户搜索摩托车出租找到这一解决方案,终点是用户使用完摩托车后归还。用户的任务是使用摩托车,因此关键步骤会包含:阅读营销页面-在手机应用商城下载App-在App中预定摩托车-使用摩托车。

步骤二:在墙上创建一个矩阵

  • 这一步是为了让团队每个成员都能将自己思考的用户验证流程都展示出来。
  • 在正方形的便签纸上分别写下A B C…并将他们垂直地贴到墙上
  • 在正方形的便签纸上分别写下1, 2, 3… 6并将他们水平地贴到墙上
  • 见下方的例子

步骤三:每人读出内容,并把内容贴到墙上

  • 一个人站起,向团队大声读出他/她便签纸的内容
  • 按1-6的顺序把6个步骤的用户故事便签纸贴到墙上
  • 所有人轮流重复一样的行动

步骤四:团队对验证流程进行投票

  • 所有人除决策者外拿一个小圆点
  • 为你认为故事线最清晰的行(参与者)投票
  • 最后,决策者拿一个大圆点进行最后的投票
  • 圈出获胜的验证流程
  • 将获胜的验证流程贴在故事板模版

步骤五:团队对验证流程进行投票

  • 回顾冲刺问题/用户体验历程/投票选出的构思草图页面
  • 将优选的构想草图从其他页面中摘出来,贴在对应验证流程中
  • 列出每个页面想从用户验证中学到的、验证的假设
  • 如果发现一个步骤存在多个假设,选择一个最值得验证的
  • 如无法决策则将这些假设想法都纳入故事板
  • 将待验证假设归类到对应的用户验证流程中
  • 团队讨论如何验证每一个假设,以及在故事板上的呈现方式
  • 列出团队要验证的的基本假设是一个重新审视解决方案全局的好方法,尤其是当它发生在设计冲刺的中间阶段。
  • 这些假设的对象可能是用户(例如:“用户愿意在使用摩托车出租App时授权访问地理位置”),可能是关于业务(“摩托车出粗市场足够大,能够支持公司的可持续发展”),还可能是关于技术(“技术团队能够开发自动匹配最接近用户的摩托车出租点给用户”)等等。
  • 例如,如果您有一个比较重要的假设,即用户将乐于在您的产品中共享私有数据,那么在故事板中,你应该设计一个所能想到用户分享其私有数据的最大限度场景。当你在原型阶段向用户展示它时,将能很快发现您的假设是否正确。
  • 试着想出一种方法来测试所有的假设,无论是在用户研究中还是在其他可以马上开始的并行任务中(例如,让工程师花几个小时破解上面提及的自动匹配算法)。如果你现在还不能验证所有的假设,请放入设计冲刺的待办事项中。
  • 在列举假设的过程中,团队对于同一个假设有多个想法是很常见的情况,在这种情况下,团队可以选择保留所有的想法或者对其中的一个达成共识。这将直接影响到在原型阶段,团队要制作一个原型亦或者多个。我们的建议是,如果团队每个人都对其中某个想法感到满意,那么就只保留一个假设;如果团队对选择哪个想法绞尽脑汁,认为每个都有其优缺点,那么这时候保留多个是更好的做法。

步骤六:绘制故事板

  • 主笔人(选出1-2个主笔人)使用马克笔或者便利贴。用图画和文字填充细节
  • 从第一个单元格开始。基于上一步讨论的假设和呈现方式进行绘制。整个团队探讨每一步
  • 然后最后一个单元格
  • 然后是剩下的单元格。剩下的格子是每一步的操作(1个分镜可以约等于测试中的1分钟)
  • 故事板利用视觉讲故事,其保真度只需要给团队成员提供足够的信息。在故事板的每个空白格中,团队将绘制用户的单个动作—无论是单击按钮的指针、输入的文本,还是在现实生活中正在做某事的用户。你不必担心布局或设计的细节,但你必须考虑故事中发生的每一个动作。
  • 绘制故事板不是一项轻松的工作,团队需要谨慎地进行操作。让一个人画画,但不要让他们自己画出所有的东西。小组成员应该参与进来,讨论接下来会发生什么,并尽可能多地帮助那个拿着白板笔的勇敢的人。
  • 当您开始绘图时,设想您正在为用户研究参与者构建原型。他们如何得到你的产品?当他们到达那里时,他们会试图做什么?这将帮助你弄清楚故事板的每一帧画面要传达的信息。

  • 关键成效

故事板,帮助团队理清产品的使用情境

借由故事板中连续的插画和分镜把一个人和产品或服务之间的交互体验呈现出来的,故事板的核心价值有:

  • 可视化的效果:因为图片比文字会更加容易被理解,也更适合传达概念和想法,通过视觉化的方式,故事板把信息更为系统的呈现出来,也是一种更有叙述化的方式,让受众有一个更好的理解。
  • 同理心:因为每个人都可以从故事中找到一个近似的经历或者是关联的信息,让我们产生一些共鸣,我们可以通过理解这些与我们类似的人、信息、经历对一个产品或体验行为有更好的参与性。

故事板模板

  • 通过故事板展示产品的使用情境,包括用户交互的流程。将交互体验呈现出来的。

下载

更多热门创新案例,请点击:Runwise创新社区

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/152358.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LangChain 5易速鲜花内部问答系统

展示了一个完整的问答系统的实现,使用了Flask来构建Web界面、langchain进行文档处理和检索,以及OpenAI的语言模型。代码的复杂性在于集成了多种高级技术和处理大型数据集和语言模型。 LangChain 实现给动物取名字,LangChain 2模块化prompt t…

MATLAB Simulink和S7-1200PLC MOBUSTCP通信

MATLAB Simulink和SMART PLC OPC通信详细配置请查看下面文章链接: MATLAB和西门子SMART PLC OPC通信-CSDN博客文章浏览阅读749次,点赞26次,收藏2次。西门子S7-200SMART PLC OPC软件的下载和使用,请查看下面文章Smart 200PLC PC Access SMART OPC通信_基于pc access smart的…

Django实战:从零到一构建安全高效的Web应用

目录 一、概述 二、版本控制和部署 1、Git版本控制 2、Docker部署 三、数据库配置 1、配置数据库设置 2、创建数据库模型 四、URL路由和视图 1、定义URL路由 2、创建视图 五、模板渲染 1、创建模板 2、在视图中使用模板 总结 一、概述 Django是一个高级Python W…

CleanMyMac X4.16免费版mac电脑一键清理电脑垃圾工具

但是,我最近发现随着使用时间的增加,一些奇奇怪怪的文件开始占据有限的磁盘空间,存储空间变得越来越小,系统占用空间越来越大,越来越多的无效文件开始影响我电脑的运行速度。 Mac的文件管理方式和Windows不太一样&…

基于C#实现字符串相似度

一、概念 对于两个字符串 A 和 B,通过基本的增删改将字符串 A 改成 B,或者将 B 改成 A,在改变的过程中我们使用的最少步骤称之为“编辑距离”。比如如下的字符串:我们通过种种操作,痉挛之后编辑距离为 3,不…

【zabbix监控四】zabbix之监控tomcat服务报警

一、监控tomcat服务是否正常运行 1、客户端部署 首先要在zabbix-agent客户端上安装tomcat服务,并能正常启动和关闭 1.1 客户端编写脚本 vim /opt/tomcat.sh#!/bin/bash anetstat -natp |grep 8080|awk {print $6}|grep LISTEN if [[ $a LISTEN ]];thenecho &qu…

upload-labs(1-17关攻略详解)

upload-labs pass-1 上传一个php文件,发现不行 但是这回显是个前端显示,直接禁用js然后上传 f12禁用 再次上传,成功 右键打开该图像 即为位置,使用蚁剑连接 连接成功 pass-2 源码 $is_upload false; $msg null; if (isse…

QMenuBar和QToolBar使用同一个QAction

文章目录 前言一、编辑QMenuBar二、将QMenuBar中的Action添加到toolbar总结 前言 qmenubar中的action添加到toolbar,不是在toolbar中再添加action,效果图如下 一、编辑QMenuBar 正常编辑QMenuBar,以下图为例 二、将QMenuBar中的Action添…

matlab层次分析法模型及相关语言基础

发现更多计算机知识,欢迎访问Cr不是铬的个人网站 代码放在最后面! 这篇文章是学习层次分析法模型的笔记。 1.什么时候用层次分析法 层次分析法是建模比赛中最基础的模型之一,其主要用于解决评价类问题(例如:选择哪种方案最好、…

opencv(5): 滤波器

滤波的作用:一幅图像通过滤波器得到另一幅图像;其中滤波器又称为卷积核,滤波的过程称为卷积。 锐化:边缘变清晰 低通滤波(Low-pass Filtering): 目标:去除图像中的高频成分&#…

什么是RS485通信

RS-485是一种通讯接口标准,RS就是Recommended Standard的缩写(推荐标准的意思)485是标识号。 RS485采用总线的接线方式,广泛应用于数据采集和控制,它的主要优点之一是它允许将多个RS485设备放在同一条总线上。 多设备…

关于LED显示屏的扫描方式知识

LED显示屏的扫描方式是指LED显示屏如何以一定的顺序控制LED点阵的亮度,从而形成图像或文字。主要有静态扫描和动态扫描两种方式。 静态扫描(Static Scan): 描述: 在静态扫描中,LED显示屏的每个LED点都有一个…

DataBinding原理

1、MainActivity首先使用DataBindingUtil.setContentView设置布局文件activity_main.xml。 2、随后,经过一系列函数调用,ActivityMainBindingImpl对象最终会实例化,并与activity_main.xml进行绑定。 3、实例化后的ActivityMainBindingImpl对象…

基于深度学习的单帧图像超分辨率重建综述

论文标题:基于深度学习的单帧图像超分辨率重建综述作者: 吴 靖,叶晓晶,黄 峰,陈丽琼,王志锋,刘文犀发表日期:2022 年9 月阅读日期 :2023.11.18研究背景: 图像…

微信小程序配置企业微信的在线客服

配置企业微信后台 代码实现 <button tap"openCustomerServiceChat">打开企业微信客服</button>methods: {openCustomerServiceChat(){wx.openCustomerServiceChat({extInfo: {url: 你刚才的客服地址},corpId: 企业微信的id,showMessageCard: true,});} …

深度学习之基于YoloV5-Pose的人体姿态检测可视化系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 深度学习之基于 YOLOv5-Pose 的人体姿态检测可视化系统介绍YOLOv5-Pose 简介系统特点系统架构使用方法 二、功能三、系统四. 总结 一项目简介 深度学习之基…

vue3之echarts区域折线图

vue3之echarts区域折线图 效果&#xff1a; 核心代码&#xff1a; <template><div class"abnormal"><div class"per">单位&#xff1a;{{ obj.data?.unit }}</div><div class"chart" ref"chartsRef"&g…

CSDN每日一题学习训练——Python版(N皇后 II、买卖股票的最佳时机 II、编程通过键盘输入每一位运动员)

版本说明 当前版本号[20231120]。 版本修改说明20231120初版 目录 文章目录 版本说明目录N皇后 II题目解题思路代码思路参考代码 买卖股票的最佳时机 II题目解题思路代码思路参考代码 编程通过键盘输入每一位运动员题目解题思路代码思路参考代码 N皇后 II 题目 n 皇后问题…

达索系统3DEXPERIENCE云端设计新体验

云是现代生活中必不可少的工具&#xff0c;在云端进行数据传输避免了传统的文件传输方式&#xff0c;更加方便快捷&#xff0c;节约了工作时间。 01 云端平台升级 在日常工作中有什么独特优势 在我们的生活工作中&#xff0c;云越来越多被提起&#xff0c;比如云计算、云服务…

卷积神经网络(CNN)多种图片分类的实现

文章目录 前期工作1. 设置GPU&#xff08;如果使用的是CPU可以忽略这步&#xff09;我的环境&#xff1a; 2. 导入数据3.归一化4.可视化 二、构建CNN网络模型三、编译模型四、训练模型五、预测六、模型评估 前期工作 1. 设置GPU&#xff08;如果使用的是CPU可以忽略这步&#…