产品邦

 找回密码
 立即注册

QQ登录

只需一步,快速开始

6、用户体验设计之信息架构和页面布局

[复制链接]
Vegeta 发表于 2014-7-24 09:55:55 | 显示全部楼层 |阅读模式

立即注册,下载精品资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
0.jpg

词条1 - 信息架构

信息架构是在信息环境中,影响系统组织、导览、及分类标签的组合结构。这是将架构和设计学运用在数位环境中的一门学问。

具体来说,就是合理的组织信息的展现形式。他的主要任务是为信息与用户认知之间搭建一座畅通的桥梁,是信息直观表达的载体。通俗点说,信息架构不仅仅是设计信息的组织结构,还需要研究信息的表达和传递。

好的信息架构,可以提升使用者存取资料的便利性、快速了解内容;不好的信息架构,将使人如同身陷于迷宫中,失去方向。

词条2 - 页面布局

页面布局就是对页面的文字、图形或表格进行排布、设计。

优秀的布局,需要对页面信息进行完整的考虑。即要考虑用户需求、用户行为,也要考虑信息发布者的目的、目标。

对用户行为的迎合和引导,有一些既有原则和方法,比如:

1.公司/组织的图标(Logo)在所有页面都处于同一位置。
2.用户所需的所有数据内容均按先后次序合理显示。
3.所有的重要选项都要在主页显示。
4.重要条目要始终显示。
5.重要条目要显示在页面的顶端中间位置。
6.必要的信息要一直显示。
7.消息、提示、通知等信息均出现在屏幕上目光容易找到的地方。
8.确保主页看起来像主页(使主页有别于其它二三级页面)。
9.主页的长度不宜过长。
10.页面长度要适当。
11.在长网页上使用可点击的“内容列表”。
12.专门的导航页面要短小(避免滚屏,以便用户一眼能浏览到所有的导航信息,有全局观)。
13.优先使用分页(而非滚屏)。
14.滚屏不宜太多(最长4个整屏)。
15.需要仔细阅读理解文字时,应使用滚屏(而非分页)。
16.为框架提供标题。
17.注意主页中面板块的宽度。
18.将一级导航放置在左侧面板。
19.避免水平滚屏。
20.文本区域的周围是否有足够的间隔。
21.各条目是否合理分类于各逻辑区,并运用标题将各区域进行清晰划分。

这些原则可以保证页面在布局方面最基本的可用性。

案例 - 页面布局和眼动轨迹研究

眼动研究是随着用户体验的兴起与技术设备的进步,而兴起的一种用户研究方法。它是眼动技术与研究方法的二合一,通过眼动研究观察被试者对移动应用页面的注视轨迹,辅助完成用户体验设计。
1-300x187.png
(Focus Map)

2-300x268.png
(Heat Map)

3-300x280.png
(Scan Path)

眼动研究是可用性测试、问卷调查、后台数据挖掘等研究手段难以企及的。通过眼动研究,不但可以完整地还原被试者在各个页面的注视轨迹,还可以通过划分兴趣区分析被试者在各区域内容的关注度。

眼动研究提供的信息不只是人们是怎样“看”东西的这么简单,眼动反映了人脑的信息处理过程,眼动模式的特点与脑的信息处理都有密切的关系。它的具体价值体现为以下几点:

1.获悉用户行为习惯
当用户打开一个页面,用户看了些什么,没有看什么?什么东西最先获得用户的关注?这些信息很重要,因为很多时候用户关的东西与设计希望用户看到的是不一样的,这种差别会通过眼动数据显示出来。
例如手机界面设计师将一个重要的按钮做得非常显眼以便用户看到,而用户会对这个大按钮视而不见,眼睛却在满屏幕转,因为他将过于突出的按钮当成了广告。

2.帮助分析与澄清问题
在可用性测试中,遇到用户既无动作也不说话时,研究人员是最迷惑的。此时用户很可能执行任务受阻,研究人员需要决定何时提醒用户继续出声思维(think aloud)。
而通过实时的眼动记录观测,研究人员可以间接地了解用户的处境——用户是在寻找什么东西,还是有什么东西令用户困惑(来回注视),还是用户忽视了相关的重要元素?研究人员还可以带着观点假设,开展眼动研究来验证或否决,发现导致问题的真正原因。

3.实现研究结果可视化
呈现眼动研究结果最常用到的是热点图(heat map),顾名思义,热点图呈现的是人们视线的“热点”,颜色越红的区域代表被聚焦得越多。通常这样的结果图非常吸引人,因为看起来一目了然,是“一图胜千言”的好代表。研究人员喜欢展示这样有说服力的图,观众也喜欢看简单直观的结果。所以眼动图作为可视化手段起到了良好的信息传达作用。

眼动轨迹的研究,对页面布局的优化,有重要的指导意义。

作者:董明华


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|产品经理之家 ( 粤ICP备12078725号 )

GMT+8, 2024-12-18 06:55

Powered by Discuz!

© 2012-2024 masterchat.cn.

快速回复 返回顶部 返回列表