33
如如如如如如如如 INTERACTION DESIG [email protected]

如何进行交互设计

Embed Size (px)

DESCRIPTION

to show the process of interaction design

Citation preview

Page 1: 如何进行交互设计

如何进行交互设计

INTER

AC

TI

ON

DESI

GN

[email protected]

Page 2: 如何进行交互设计

交互设计概述

INTER

AC

TI

ON

DESI

GN

Page 3: 如何进行交互设计

User-Centered Design,以用户为中心的设计

交互设计的中心思想

Page 4: 如何进行交互设计

User-Centered Design,以用户为中心的设计

在进行产品设计、开发、维护时从用户的需求和用户的感受出发,围绕用户为中心进行产品设计、开发及维护,而不是让用户去适应产品。无论产品的使用流程、产品的信息架构、人机交互方式等,以 UCD 为核心的设计都时刻高度关注并考虑用户的使用习惯、预期的交互方式、视觉感受等方面。

Page 5: 如何进行交互设计

交互设计的常用方法

卡片分类 (Card Sorting)观察用户是如何理解内容和组织信息,用来帮助你的网站( 产品 ) 更合理的组织信息。-------------------------------------------------情境访谈 (Contextual Interviews)走进用户的现实环境,让你了解你的用户的工作方式,生活环境等等情况。-------------------------------------------------焦点小组 (Focus Groups)组织一组的用户进行讨论,让你更了解用户的理解、想法、态度和想要什么。-------------------------------------------------启发式评估 (Heuristic Evaluation)可用性的检查方法,让一些行内专家对网站产品进行指导。

Page 6: 如何进行交互设计

交互设计的常用方法

单独访谈 (Individual Interviews)一对一的用户讨论 , 让你了解某个用户是如何工作 , 使你知道用户的感受 , 想要什么和他的经历 . --------------------------------------------------平行设计 (Parallel Design)对同一个网站 ( 产品 ) 进行分开的设计,从而比较选择一个最佳方案。--------------------------------------------------角色模型 (Personas)构建一个虚构的人来代表大部分用户,设计团队围绕这个虚拟人物设计开发产品。--------------------------------------------------原型 (Prototyping)利用简单网站 ( 产品 ) 原型进行相关的测试,从而节约后期大量的成本。

Page 7: 如何进行交互设计

交互设计的常用方法问卷调查 (Surveys)利用网上或纸张的问题 list 对用户进行发放填写,从而收集用户对网站 ( 产品 ) 的反馈意见。--------------------------------------------------任务分析 (Task Analysis)通过任务分析了解用户使用你网站 ( 产品 ) 时的目标和操作方式,习惯。--------------------------------------------------可用性测试 (Usability Testing)请用户来试用你的网站 ( 产品 ) ,有任务性的完成测试。从而得到你所想要的东西。--------------------------------------------------用例 (Use Cases)描述某个用户使用你网站 ( 产品 ) 时的情况,包括目标和行动。--------------------------------------------------内容优化 (Writing for the Web)对你的网站 ( 产品 ) 进行内容上的整理、优化。让用户更清晰容易的了解你所表达的内容。

Page 8: 如何进行交互设计

交互设计十大交付件

1. 用户需求文档人物角色 可用性测试计划可用性测试结果

2. 策略文档概念模型内容详单竞品分析

3. 设计文档线框图流程图站点地图屏幕设计图

Page 9: 如何进行交互设计

原则:指导设计的思想

模式:

1. 研究产品所处的领域2. 了解用户及其需求3. 定义设计方案和框架4. 填充设计细节5. 可用性验证

过程:

交互设计的习惯用法,常用解决具体用户需求和设计问题的方法

交互设计的工具

Page 10: 如何进行交互设计

看到这里,很多同学就会对比起产品设计的流程来

改良产品设计流程( 2)

1.提出设计问题2. 问题分析3. 定下设计主题4. 设计调查和资料收集5. 设计分析与综合化6. 设计展开(草图 >效果图 > 模型)

概念产品设计流程( 1)

1. 进行市场调查,同类产品比较,寻找市场空白点2. 定位目标群体3. 为目标群体设计相应的功能4. 方案设计(概念生成,草图)

从流程来看,交互设计和产品设计都有调查,都有目标用户群体,都会有预先方案。这到底有什么不同呢?

Page 11: 如何进行交互设计

侧重点不同产品设计注重于:产品的功能和外形交互设计注重于:人与机器交互的过程

面向对象不同

产品设计面向于:工业实体产品,对于技术,材料造价局限性比较大交互设计主要面向于:计算机数字产品,局限性较小

Page 12: 如何进行交互设计

其实,交互设计也是一种针对于产品的设计,特别是计算机产品的设计。

但是因为计算机产品高度发达而是使其从产品设计中细分出来,形成自己一套独立的设计体系和思想。

Page 13: 如何进行交互设计

交互设计流程

INTER

AC

TI

ON

DESI

GN

Page 14: 如何进行交互设计

在《用户体验要素》中,有这样一个著名的模型它阐述了用户体验的五个层面的同时,也表明了一个数字产品的设计流程。

Page 15: 如何进行交互设计

其中,在产品设计中所重视的外形设计占的分量明显减少。

概念 > 需求 > 流程 > 框架 > 视觉

Page 16: 如何进行交互设计

例子:豆瓣网,它的网页设计说不上任何漂亮或者绚丽,因为它靠着独特的定位和交互形式吸引了很多用户。

Page 17: 如何进行交互设计

吸引用户的不是豆瓣的简洁,而是一种类似于“迎合”的心理需求, 就像 Lastfm ,都是基于用户偏好的 WEB 2.0形式。

Page 18: 如何进行交互设计

目标导向设计

INTER

AC

TI

ON

DESI

GN

Page 19: 如何进行交互设计

目标导向设计

目标导向的交互设计方法关注用户的目标 ,

在研究产品的实际用户和潜在用户的基础上 ,

定义出具体的原型用户(人物角色 persona) ;

使用人物角色作为脚本提纲( scenarios)的主要人物 ,

把人物角色作为定义产品功能、行为和形式的主要工具 ,

在设计过程中遵循行为设计的原理。

1

2

3

4

Page 20: 如何进行交互设计

什么是目标?

目标是终结条件,而任务是达到目标所需要的中间过程。区别任务和目标非常重要,人们很容易将它们相互混淆。

目标和任务有时是截然相反的 美国总统希望海外和平时,他派出去的是飞机和枪支。   

Page 21: 如何进行交互设计

目标是稳定的,任务是易变的。显然,我们应该为目标设计,而不是为任务设计。   

这就像我们在设计的时候,我们只有一个设计理念,但是有很多设计的方案一样。

Page 22: 如何进行交互设计

当交互设计师通过分析目标去解决问题时,通常会找到非常不同,但是好得多的解决方案。   

Page 23: 如何进行交互设计

个人目标 不觉得自己愚蠢 不出现差错 完成适量的工作 有趣(或至少不觉得乏味

企业目标 增加利润 增加市场份额 击败竞争对手 聘用更多职员 提供更多的产品和服务 上市

实际目标 实际目标是连接企业目标和个人目标的桥梁。

用户需求 = 利益

Page 24: 如何进行交互设计

个人目标 > 实际目标

例 : 一台新电视,要设置后才能观看结目。 个人目标 :看电视 实际目标:设置 结果:不会设置,导致无法看电视,个人目标未实现,用户恼怒。 如果电脑允许先看(先满足个人目标),再来设置。虽然显示效果相对来说不好,但用户会很乐意花时间去琢磨怎么设置。

由于程序员的特点所致,他们创建的软件虽然漂亮的满足了实际目标,但是却不能满足使用者的个人目标。

Page 25: 如何进行交互设计

良好的交互设计的本质是,设计的交互能让使用者在不影响个人目标的情况下,达到他们的实际目标。

Page 26: 如何进行交互设计

cooper 的目标导向设计过程

Page 27: 如何进行交互设计

我以我的毕业设计来作为案例讲解一下基于人物角色的交互设计流程

案例背景:

湖南科技馆网站设计,虚拟课题由湖南科技馆展示设计而衍生出来的,因为是属于投标项目,所以我们也没有办法接触到真正的客户 --湖南科技馆相关工作人员。这个项目也简略了很多步骤。

Page 28: 如何进行交互设计

步骤 具体内容 方法 交付文档

第一步

了解项目相关信息,定义项目的意图,定出时间进度表

了解湖南科技馆相关信息,包括规模,外形,内部结构,科技展品范围以及项目的目标等。实地考察武汉科技馆,了解科技馆主办活动,游客人群构成,游客游玩情况,指导思想,进而推断出国内科技馆相关情况。

现有资料搜集(湖南科技馆资料,现有科技馆调查结果),相关人员访谈、实地调研

调研文档数据分析文档访谈记录

第二步 调研现有产品现在科技馆网站收集整理分析(包括风格,功能等),相关技术了解,国内外科技馆发展趋势。 竞品分析

第三步 用户群体调研

从科技馆工作人员中访谈得知科技馆大概的用户群体在科技馆中发放调查问卷分别给小、初高中生发放调查问卷访谈小学班主任访谈小学科学课老师访谈小学行政管理者访谈多名家长对儿童进行视频观察记录

情景访谈焦点小组单独访谈问卷调查

访谈记录观察记录调查分析

第四步 建立角色模型 创建首要人物角色、次要人物角色,合作伙伴等 角色模型 人物角色

第五步 定义需求创建场景需求分析需求细化

人物分析 场景用例

需求文档

第六步 框架设计由场景需求得出流程图将需求分析转化为线框图(导航)

卡片分类 平行设计

概念模型内容详单线框图流程图站点地图

第七步 设计细化风格分析视觉设计

屏幕设计图(页面设计)

Page 29: 如何进行交互设计

这里每一个步骤展开来都有很多细节性的注意点

比如:用户访谈的时候,不能对每个用户都问固定的问题,最好在交互发生的地方进行访谈,问题的方向有 :

有面向目标的问题,如:什么事情会使你一天过得很愉快?

面向系统的问题,如:你使用产品做得最多的是什么事?

面向工作流的问题,如:你今天是怎么度过的

面向态度的问题,如:哪些事你在拖延?

Page 30: 如何进行交互设计

场景构建的时候,需要

日常场景:使用者需要执行的主要任务,这些任务还经常执行。                

必要场景:所有不常用但必须具备的场景。        边缘场景:为处理边缘状况而产生的不常用任务。            

Page 31: 如何进行交互设计

目标导向设计的起点是定义用户角色,只有定义了人物角色才能定义角色目标。

Page 32: 如何进行交互设计

下一章—定义人物角色的案例分析

Page 33: 如何进行交互设计

THANKS,THE END….

Wendy2009.9.18