基于人性化网站界面设计的用户建模

第２１１８Ｒ２（）（１卷８年第２青期年月

计算机技术与发展

“）ＭＰＵＴ下＝ＲＴＥＣＨＮ（）Ｉ麒ｊＹＡＮＤＤＥ＼乍１１）Ｉ＇ＭＥｍ

Ｖ０１．１８Ｆｅｂ．

Ｎ（）．２２０Ｉ）８

基于人性化网站界面设计的用户建模

方惠敏，杨国胜，丁文珂

（河南大学先进控制与智能信息研究所，河南开封４７５００１）

摘要：为了能够实现网站界面风格的人性化和和谐化，通过对部分用户的调查采研究用户因素和网页界面因素之问的相互关系，并从错综复杂的用户和网页界面因素中提取起决定性作用的因素。基于这些决定性因素，用神经网络的方法建立了一个用于个性化网站界面风格和布局设计的用户模型。利用所建立的模型设计了一个针对老年人的网页界砸，经过测试验证，此模型能收到良好的效果，提高了用户对网站界面风格和布局的整体满意度。关键词：人性化；网站界面；用户建模

中圈分类号：加Ｐ３９１．７

文献标识码：Ａ

文章编号：１６７３—６２９Ｘ（２００８）０２一０１８７一０４

Ｕｓｅｒ

Ｍｏｄｅｌｉｎｇ

Ｂａｓｅｄ

ｏｎ

ＨｕｍａｎｉｚｅｄＷｅｂｓｉｔｅＤｅｓｉｇｎ

Ｗｅｎ－ｋｅ

ＦＡＮＧＨｕｉ－ｍｉｎ，ＹＡＮＧＧｕｏ－ｓｈｅｎｇ，ＤＩＮＧ

（ＩｎｓｔｉｔｕｔｅｏｆＡｄｖａｎｃｅｄＣｏｎｔｒｏｌａｎｄＩｎｔｅｌｌｉｇｅｎｔＩｎｆｏｒｍａｔｉｏｎ，ＨｅｎａｎＵｎｉｖｅｒｓｉｔｙ。Ｋａｉｆｅｎｇ４７５００１，Ｃｈｉｎａ）

Ａｈ出＇ｄ：Ｔｏｒｅａｌｉｚｅｔｈｅｖｅｓｔｉｇａｔｉｏｎ，－ａｎｄ

ｕｓｅｒ

ｈｔｍａｍｉｚｅｄｗｅｈｓｉｔｅｉｎｔｅｒｆａｃｅｓｔｙｌｅ。ｓｔｕｄｙｔｈｅｒｅｌａｔｉｏｎｓｈｉｐ

ｆａｃｔｏｒｓｆｒｏｍｔｈｅ

ｓｅｌｅｃｔ啾ｋｅｙ

ｏｎ

ｂｅｔ’ｖｅｅｎ嘲ｆａｃｔｏｒｓａｎｄｔｈｅｗｅｂｉｎｔｅｒｆａｃｅｆａｃｔｏｒｓ蚵ｉｎ・

ａ

ｃｏｍｐｌｉｃａｔｅｄ嘲ａｎｄｗｅｂｆａｃｔｏｒｓ．Ｂ，ｒ心ｆｌｇｏｆＢＰｎｅｔａｆｌｎｅｔｗｏｒｋｓ。ｈａｖｅｅｓｔａｂｌｉｓｈｅｄ

ｔｈｅｄｅｓｉｇｎｏｆｔｈｅｈｕｍａｎｉｚｅｄｗｅｂｉｎｔｅｒｆａｃｅ．Ａ瑚ｏｒｄｉｎｇ

ｔｈａｔｔｈｉｓ

ｔＯ

ｍｏｄｅｌｂａｓｅｄｔｈｏｓｅｋｅｙｆａｃｔｏｒｓｗｈｉｃｈｅａｒｌｂｅｕｓｅｄｉｎ

ｄ，ｈａｖｅｄｅｉｇｎｅｄａｓｅｎｉｏｒｅｌｔｉｚｅｎ’ｓ

ｈ嘎ｎ郴ｉｎｔｅｒｈｅｅ．Ｔｈｅｔｅｓｔｉｎｇ划ｔ椭ｒａｔｅｓ

ａｒｒａｎｇｅｒ㈣．ｔｏｆｔｈｅ

ｗｅｂｓｉｔｅｉｎｔｅｒｆａｃｅ．

ｔｈｅｅｓｔａｂｌｉｓ｜－ｅｄｒｏｏｄ・

ｍｏｄａｌ锄ａｃｈｉｅｖｅ删ｅｆｆｅｅ协“∞・

ｈａｍｅｔｈｅｕｓｅｒ’３豫ｔｉｓｆａｃｔ；∞ｗｉｔｈｔｈｅｓｔｙｌｅａｎｄ

Ｋｅｙ

Ｗｌｌｉ池：ｈｕｍａｎｉｔｙ；ｗｅｂｓｉｔｅｉｎｔｅｒｆａｃｅ；ｕ时ｍｏｄｅｌｉｎｇ

Ｏ引

言

Ｚａｈｅｄ等Ｉｓ】对不同文化背景和兴趣爱好的个体对网页文本内容产生的不同感知和影响进行了研究，阐述了Ｗｅｂ文档内容与不同文化背景的个人因素之间的关系，测试了不同的个体对不同的Ｗｅｂ文档内容的满意程度，提出了一个概念性的模型结构。这个概念性的框架为网页文本内容的设计和确定提出了一个科学性的指导．从而提高了网站设计的整体满意程度，并从一定程度上实现了个性化网站的设计。但此文只是针对Ｗｅｂ文本内容的设计和确定来实现个性化，并没有涉及到网页界面设计与个性化之间的关系。仍然缺少ａｌａｎ—ｍａｃｈｉｎｅ之间的和谐化和人性化。

网站的第一印象和整体风格对用户的吸引是很重要的。因此为了把个性化的因素考虑到网站界面设计中去，实现网站界面的真正人性化和个性化，在研究中选取了人口统计学、职业、生理及心理等特征作为用户因素，同时把网页的整体窗口布局、视觉上的颜色搭配、文字大小及动匦视频使用等作为与用户因素相对应的界面展现因素。通过实验来确定用户因素与网页界面展现因素之问的相关度，最后利用ＢＰ神经网络建立了一个用户一网页界面模型（Ｈｕｍａｎ—Ｗｅｂ

Ｉｎｔｅｒ．

随着信息技术的不断发展，Ｉｎｔｅｍｅｔ已成为人们获取信息和相互交流的主要渠道，网站设计也因此备受关注。网站界面设计的目的是为用户信息获取和相互交流提供服务，但由于使用网页的个体之间存在着巨大的差异，从而导致了用户对不同风格网页界面满意度的差异。让不同类的用户拥有不同的网页界面展现风格也就成了网站设计的重点和难点。目前大多数研究人员把研究的重点放在网站的图像和文本设计［１．２】。或网站整体框架布局设计［３－６］，或网站设计时的色彩运用【７Ｊ，恰恰忽视了ｍａｎ—ｍａｃｈｉｎｅ之间的和谐化和人性化。虽然也有少数的研究人员对个性化特征与网站建设的关系进行了研究，但没有能把人类情感同网页界面有机结合起来０８，９１。

收稿日期：２０１）７一０７—０７

基金项目：河南省自然科学基金项目（０５２３０２０６００）：河南省高校创新人才工程项目（２∞５ＫＹＣＸ０１２）

作者简介：方惠敏（１９７７一），女，河南郑州人，硕土＝研究生，研究方向为智能信息处理；饧国胜，博士后．教授。研究方向为多传感器多目标数据融台技术、胤像处理、情感谚甥１等。

‘

・１８８・

计算机技术与发展

第１８。卷

ｆａｃｅＭｏｄｅｌ，Ｈ—ＷＩＭ）。

急状态下或在短期内都不会发生较大的变化。

。

氡：≯，一．：ｊｊ：．ｊ：ｉ：．．・；‘ｉ≮～¨ｊ，；’一

．ｊ，ｉ。’，

．；ｔ

ｊ

；

．－：（Ｉ）人口统计学：人的年龄，性别，语言，出生地，社

、

。

１对用户和界面因素是否存在关系的调查

为验证用户因素和网站界面是否存在一定的联系，设计了一个以１０个网站的首页为调查样本，４５个人为调查对象的测试。把调查对象分为３组，分布如表１所示。

表１调查对象分布表

人数

１５１５１５

会文化特性。水平。

（２）职业因素：职业，受教育水平，电脑应用熟练’（３）心理因素：网页组成元素的理解力，对色彩的心理效应，个人的感知风格（比如积极向上、消极等）。

（４）生理因素：生理因素同样也能影响个体对于网页展现风格的满意度，它主要包括：记忆能力，注意力，全局或局部的空间感知力，对于动态网页组成元素的反应时间。浏览速度，感知功能器官健康程度等。２．２网页界面因素

与用户因素相对应的是网页界面因素。尽管网页界面因素没有用户因素复杂。但也包含很多方面，这些方面组合在一起决定了网页界面的展现风格，概括如

下：

年龄

２０～３０２０～３０６～１２

性别男女不限

学历在读硕：七在读硕士不限

组序数

ｌ２３

让调查对象分别对１０个网站的首页界面风格做出（１）喜欢，（２）不喜欢的简单评价。假设每一组对每一个样本网页评价为（１）的人数为Ｎ，‘则这一组对每一样本网页的满意度Ｄ用下式计算：

Ｄ＝Ｎ／１５

（１）

计算结果如表２所示。虽然本测试的对象范围较小，但从表２仍然可以看出：不同的人对不同的网站的满意度仍有很大的差别，即用户因素和网页界面有着很直接的关系。．

表２，不同组对每一网页满意度

网址

，

（１）页面组成元素：文本、图像制品、动画、视频、声音等等。

．（２）页面的整体布局：控制按钮（包括个数、外观、放置位置、大小等），自协调的调色板（一套在视觉上能协调在一起的颜色应用），字体大小，图形、动画和视频的大小以及位置等。

（３）导航布局：导航的体现形式，大小，总体导航的位置等。

２．３从用户因素和界面因素中提取决定性因素

综上所述，可知用户因素是错综复杂的，而所面临的界面因素也很多。为了达到建立Ｈ—ＷＩＭ模型的目的，必须找到双方起决定作用的因素，以及它们之间的相互关联。即用户的某一个决定性因素与网页界面风格的哪个因素相关性最大，确定这些决定性因素的参数值，并对其进行量化，然后建立用户模型。其过程如图１所示。

第一组Ｄ第二组Ｄ第三组Ｄ

０００‘‘０Ｏ．１３０．２７

。。

ｈｎｏ：／／ｗｗｗ．ｚｈ㈣．ｏ。ｍ

ｈｔｔｐ：／／ｗｗｗ．ｃｙｃｎｅｔ．ｏｏｎｖ＇ｋｉｄｓ．ｈｍａ

０．１３０．１３００Ｏ．３３．１．００＋１．００

Ｏ００．４０

０．２０

０．３３

０．８０Ｏ．９３１．０００．０７Ｏ．１３，０ＯＯ，２０

ｈｔｔｐ：／／ｗｗｗ．０６０ｓ．ｏ∞

ｈｔｔｐ：／／ｗｗｗ．ｃｈｉｎａｋｉｄｓ．ｎｅｔ．ｍ・ｈｔｒｐ：／／ｗｗｗ，ｄｉｓｎｅｙ．ｏ。ｍ．ｍ／．．．

ｈｔｔｐ：／／ｗ，，ｖｗ．ｒａｙｌｉ．ｍ．∞。

ｈｔｔｐ：／／ｗ，．ｖｗ．ｗｏｍａｎｆｒｌｅｎｄ．幽

ｈｔｔｐｔｉ《啦时Ｎ。ｘｙｗｑ．ｃｏｒｎ／ｉｎｄｅｘ．ｈｔｃｎ

Ｏ．０７０．２００．４０１．００

ｈｔｒｐ：／／ｗ１．ｒｉｐ．ｏｌｄｋｉｄｓ．ｃｎ／ｍｄｅｘ．ｈｎ堪

ｈｔｔｐ：／／ｗｗｗ．ｃｈｉｎｅｓｅｎｌａ】ｎ．ｎｅｔ

２用户因素与界面因素关系．．

由上面测试可知用户因素与网站界面因素存在着很大的关系，要真正实现网站界面的人性化和和谐化，在进行网站界面设计时就应把人的因素考虑到网站界面设计中去。确定和了解你的目标用户可以使网站设计变的更容易［１０ｆ。因此什么样的人喜欢什么样的界面风格是研究的主要目标。下面将从人的因素和界面因素两方面进行考虑，从中提取・些决定性因素，为建立科学的用户一界面模型作准备。．，２．１用户因素

人的因素比较复杂，组成人的因素的每一个细小的方面都多多少少地影响人们的兴趣与爱好。文中将从以下几个方面来考虑用户因素，因为这些因素在紧

图１从两方面因素到用户模型转化示意图为了从用户因素和界面因素中提取起决定性作用的因素，并找到这两个方面和谐的对应关系。笔者在河南大学、开封大学、开封市南关区小学和郑州大学离退休职工工作处等不同的人群中随机选取６０个人作为调查对象，以上述的１０个网站的首页为调查样本制作了调查表，进行实验推理研究。在确定人的心理因素对色彩的感受时，依据文献［１１］的结论进行设计，把７类颜色分为三大色调：浅色调、中色调和深色调。由于

第２期方惠敏等：基于人性化网站界面设计的用户建模

・１８９・

实验样本取自国内的某一地区，因此去掉了用户因索中的语言、出生地等特性。另外发现一些因素（如空间感知能力等）的个体差异不是很大，对个性化网站的没计起不到决定性作用，在实验中就忽略了这些因素。为了得到相对准确、有代表性且合理的数据，调查表尽量多地概括用户因素，并让用户对样本网页进行（１）非常喜欢、（２）喜欢和（３）不喜欢定性区分。最后确定了四种因素为决定性用户因素：年龄、性别、学历、计算机熟练程度。与决定性用户因素相对应的网站界面风格和布局的决定性因素有：文字大小、图像制品（包括动画、视频、声音等非文字因素）占整个页面的比重多少、界面导航按钮的大小和多少、颜色的变化多少和网页界面颜色的基本色调。

３

Ｈ—ＷＩＭ的建立

用户和界面的决定性因素确定以后。下一步工作

就是要分析两类因素的相关关系。比如老年人大多是利用时间来获取更多的信息以帮助他们做出决定；而与年老一代相比。年轻人则更倾向于对视觉信息的捕捉，他们对文本信息的依赖程度明显低于老年人；越是知识渊博的人对网络信息量的期望越大，他们更具有整合信息的能力等。笔者采用三层的ＢＰ神经网络建立Ｈ—ＷＩＭ，分别把用户因素作为网络的输入、界面因素作为网络的输出，输入层和输出层神经元的个数分别是Ｊ１＝７和Ｊ２＝１２，网络结构如图２所示。ＢＰ神经网络采用有监督的学习方法，用户和网页界面的决定因素的一部分训练数据如表３所示。

图２

文中所设计的ＢＰ神经网络结构表３部分训练样本数据

用户因素

网页界面因素

序号

年龄性别

学历电脑颜色按钮程度字体多少大小色调图像比壅ｌ老年男低低大多大浅适中２老年男低中大少适巾中软少３中年男高中小步小浅少４中年女中

高由适中小饯少５中年女由中中多适巾浅适。ｆ・６中年女由

高中少小浅少７

儿盘

男

低

中

大

多

大

茂

多

表３中把年龄分为四个阶段：儿童（６～１２岁）、少年（１２～１８岁）、中青年（１８～５０岁）和老年（５０岁以上）。学历分为兰个层次：低（高中以下）、中和高（本科

以上）。电脑程度根据使用电脑的年限分为三个层次：低（１年以下）、中（１～３年）和高（３年以上）。另一方面对于网页界面因素也按二定规则来分，字体按字号分为三个等级：小（小于５）、中（大于５小于小４）、大（大于小４）。图像按占页面总面积百分比分为５个等级：少、较少、适中、较多、多。按网页颜色的变化分为三个等级：少、适中、多。按网页所使用的基本色调分为三种：浅、中、重。按网页上互动和导航按钮的尺寸分为三个等级：小、适中、大。这些模糊定量的划分为下一步进行样本数据训练时提供方便。

在训练网络之前，依据表３的样本数据可以进行如下处理：用７个输人神经元对４个用户因素进行编码，用两个神经元来表示四个年龄段（Ｏ０表示儿童、０１表示少年、１０表示中年、１１表示老年）。用１个神经元表示性别（１表示性别为男、０表示性别为女）。用两个神经元表示学历（０１表示学历低、１０表示中等学历、１ｌ表示高学历），用两个神经元表示应用电脑的熟练程度（０１表示低、１０表示中等、１１表示高）：同样用１２个输出神经元对５个界面决定性因素进行分类，分类方法类似于网络的输入，在此不再赘述。依据表３部分输入和输出编码如表４所示。

表４部分训练样本编码．・

。

序号

用户因素（网络输入）

界面因素（网络输出）

ｌｌｌ

ｌ

ＯｌＯｌ

ｌ１ｌ

ｌ

ｌｌｌ０００ｌＯ

２ｌ

ｌ１Ｏｌ

１

０ｌ１０ｌｌ０Ｏｌ０００１３

ｌ０

ｌ

ｌ

ｌｌＯ

０ｌＯｌＯｌ１０００００４

１

０ＯｌＯｌｌｌＯ

ｌ

ＯＯｌＩＯＯＯＯＯ

５ｌＯＯ

ｌＯ

ｌ

ＯｌＯｌｌ１

０

ｌ０００ＩＯ

６１

Ｏ０

１

０ｌ１

ｌＯＯ１Ｏｌ１０００００

７

Ｏ０ｌ

Ｏｌｌ

０ｌＩ

ｌｌ

０ｌ

ｌ

００ｌｌ０

在训练的过程中第一层使用ｌｏｇ—ｓｉｇｍｏａ函数为激励函数［１２】，第二层使用ｈａｒｄｌｉｍ激励函数。由于隐层神经元个数的确定没有一个可行的理论方法，大多

数研究人员是通过经验或是斌凑的方法来整定。’文中参考文献［１３］中的经验公式来确定网络隐层神经元的个数为：

Ｓ。＝ｉｎｔ［ｓｑｒｔ（０．４３ｒａｎ＋０．１２ｎ２＋０．５４ｍ＋

０．７７ｎ＋０．８６）］

（２）

其中１７＇１和，１分别为ＢＰ神经网络输入和输出的神经元

个数，在此优＝７，玎＝１２。

训练时用可变学习速度的ＶＬＢＰ算法。性能指数均方误差值为Ｅ＝０．００１，取误差的增长量参数ｒ＝０．０４，学习速度增长因子Ｔ／＝１．０５，学习速度减小因子Ｐ＝０．７，隐层神经元为８个，用表４中的样本数据对网络进行训练。训练结果如图３所示，达到了预先计

定误差。

～Ｉ

计算机技术与发展

第１８卷

Ｐｅｒｆｏｒｍａｎｃｅｉｓ

０．０００９９９５“．ＧｏａＩＩｓ

０．００１、＾ｒ、＾，、ＶＩｎｍｇｃｓＢａｓｅｄＯｉｌ

ｔｈｅＡｎａｌｙｓｉｓｏｆＰａｇｅＬａｙｏｕｔａｎｔｉ

Ｗｅｂ

“ｆｌｋ

Ｓｔｒｕｃｔｕｒｅ［Ｃ］／／Ｔｈｅ

２００４ＩＥＥＥＩｎｔｅｒｎａｔｉｏｎａｌＣｏｎｆｅｒｅａｅｅ

０１３

Ｍｕｌｔｉｍｅｄｉａａｎｄ

ＥＸＰＯ，Ｔａｉｐｅｉ，Ｔａｉｗａａ：［ｓ．ｎ．］・，２００４：

１１３一１１６．

基于人性化网站界面设计的用户建模

作者：作者单位：刊名：英文刊名：年，卷(期)：

方惠敏， 杨国胜， 丁文珂， FANG Hui-min， YANG Guo-sheng， DING Wen-ke河南大学先进控制与智能信息研究所,河南,开封,475001计算机技术与发展

COMPUTER TECHNOLOGY AND DEVELOPMENT2008,18(2)

参考文献(15条)

1. Fuchs M An Evolutionary Approach to Support Web-Page Design 2002

2. Cai Deng. He Xiaofei. Ma Wei-Ying Organizing WWW Images Based on the Analysis of Page Layout and WebLink Structure[外文会议] 2004

3. van Schaik P. Ling J Design Parameters in Web Pages:Frame Location and Differential BackgroundContrast in Visu-al Search Performance 2001(04)

4. Gibson D. Punera K. Tomkins A The Volume and Evolution of Web Page Templates 20055. Song Ruihua. Liu Haifeng. Wen Ji-Rong Leaming Block Importanee Models for Web Pages 20046. Kalbbach J. Bosenick T Web Page Layout:AComparison Be-tween Left-and Right-justified SiteNavigation Menus 2003(01)

7. Brown D C. Burbano E. Minski J Evaluating Web Page Color and Layout Adaptations 2002(01)8. Zahed F. Van Pelt W V. Song J A Conceptual Framework for International Web Design 2001(02)9. Chu W Using chopsticks and a fork together:Challenges and strategies of developing aChinese/English bilingual web site 1999(02)

10. Jones M L R Seven Golden Rules for World Wide Web Page Design 1996(03)11. 朱天明. 朱琳珺 设计色彩分类手册 2002

12. Hagan M T. Demuth H B. Beale M H. 戴葵 神经网络设计 2005

13. 董戎萍. 唐伯良 基于DCF-BP神经网络的人脸表情识别[期刊论文]-微计算机信息 2005(10)14. 欧湘柏 是什么阻碍了中老年人上网 200615. 梁景红 设计师谈网页设计思维 2005

本文链接：http://d.g.wanfangdata.com.cn/Periodical_wjfz200802053.aspx