开启左侧

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

[复制链接]
3502 9
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),顾名思义,热点图呈现的是人们视线的“热点”,颜色越红的区域代表被聚焦得越多。通常这样的结果图非常吸引人,因为看起来一目了然,是“一图胜千言”的好代表。研究人员喜欢展示这样有说服力的图,观众也喜欢看简单直观的结果。所以眼动图作为可视化手段起到了良好的信息传达作用。

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

作者:董明华


举报

回复

9 个评论

guilirui    发表于 2015-2-26 12:11:29  | 显示全部楼层
学习了
Ella    发表于 2015-3-25 15:04:55  | 显示全部楼层
有用处
寻找曼陀林    发表于 2015-5-26 10:28:59  | 显示全部楼层
确实是个研究方向,研究用户在网页中的注意点来进行分析。
Windlst    发表于 2015-6-20 22:53:59  | 显示全部楼层
信息架构真的非常重要,学习了
SamCao    发表于 2015-6-27 15:29:42  | 显示全部楼层
本帖最后由 SamCao 于 2015-6-27 15:52 编辑

信息多,页面小。
如何将大信息显示在小页面。
1:信息的架构:
信息量大于一屛承载,就要对页面分屏,或者对产品分页。前提是对信息进行立体化处理,即信息的架构,层级。对应着页面的架构,层级
2: 用户的认知模型:
信息的展示符合用户的认知规律和预期
了解用户,做用户研究
眼动研究在小屏幕设计的试用性受到了考验。
3:信息的重要程度:
商业化VS用户体验
4:简单化的设计原则:

konrad    发表于 2015-7-13 14:54:40  | 显示全部楼层
很不错  值得学些
abel1952    发表于 2015-10-22 15:00:19  | 显示全部楼层
好东西啊,留存了,回家抄小本本是上
xiaoren    发表于 2016-3-30 16:18:54  | 显示全部楼层
好东西,留存了!!!
lala2015    发表于 2016-7-29 16:42:35  | 显示全部楼层
不错,学习下
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

图文热点

更多

社区学堂

更多

客服中心

关于我们
关于我们
友情链接
联系我们
帮助中心
网友中心
购买须知
支付方式
服务支持
资源下载
售后服务
定制流程
关注我们
官方微博
官方空间
官方微信
快速回复 返回顶部 返回列表