网站制作流程、网站导览流程和组织网站资讯

英国文学家Samuel Johnson（1709-1784）曾说过：「知识分为两种，一种是我们已经吸收为己有的，另外一种是我们知道该去那里寻找的。」（Knowledge is of two kinds: we know a subject ourselves, or we know where we can find information upon it.）

良好可用性的网站的目标就是协助使用者去寻找他们想要的资料，如前所述，使用者经验是可用性的基础，而「资讯建筑」（Information Architecture）则是在执行上的工具。在一般人的认知里，资讯是属于科技、文化的领域，建筑则是属于土木、工程、与设计的领域，当两者结合成在一起时，相信很多人会觉得纳闷，什么是「资讯建筑」呢？

资讯建筑其实就是建构、组织资讯的「工程」，在网路方面来说，资讯建筑指的是将资讯系统化地分门别类后，以适合的介面设计让使用者顺利得到这些资讯，以下仅就几个方面做粗略的探讨。

基本概念：以简单易懂的表现方式来达成一贯性

资讯建筑是可用性的执行工具，其最基本的就是在于维持一贯性及简单易懂两个要求。

一贯性（或整体性）是网站资讯建筑、亦是可用性的最高准则，指的是网站不论是在版面、内容、导览方式等方面上都具有一致、整体的设计。良好的一贯性就像一部设计良好的电梯，当我们按下一楼的按钮，我们知道门打开时会是一楼，而不会在我们按了一楼后，结果门打开时却发现我们被送到了非州某个荒野，当使用者可以预期网站的各种反应时，他们在我们的网站里浏览时就会愈觉得安全也愈有in control的感觉，成功的网站是将主控权交给使用者，而不是紧紧地握在手上企图控制使用者浏览的自由。

除了一贯性之外，资讯建筑的好坏亦取决于网站是否简单易懂，版面设计太过艰深、内容架构不清楚、导览方式是否符合使用者的思考逻辑，都会影响到使用者在浏览网站时的反应。

对有心从事电子商务的网站来说，简单易懂更是重要，网站里商品的位置架构、搜寻功能及展现的方式，都必须让网友能够一目了然，网路上的购物行为和现实生活不同，在现实生活中我们到百货公司买东西，即使一时间找不到想要的东西，多半我们还是会选择继续在店里寻找，因为要离开再去别家百货公司比较之下更为麻烦，但是在网路上却不一样，当使用者一觉得这个网站不好用、找不到他们想要的东西、结帐手续繁杂，弹指之间就可以到五、六家不同的网站去继续完成他们的购物行为。根据Boston Consulting Group的一份报告指出，有超过65%的网友在将商品放入购物车后，没有完成结帐手续就离开，约略估计网站损失了约一百五十亿美金的生意！

因此网站应该强化产品搜寻功能、归类与显示方式，并且简化结帐的步骤，只要能尽量减少使用者思考的机会（思考如何使用该网站的介面，或思考是否真的需要购买某产品） ，交易成功的机率就愈大，如Amazon.com的One-Click Checkout就是简化设计下的产物，它将结帐的步骤缩减到点一下滑鼠即完成，省去每次订购都要重新输入地址、电话、信用卡号等繁琐步骤。

组织网站资讯

网站最重要的构成单元就是内容，也就是资讯，当数量庞大的资讯聚集在一个网站时，要如何地去规划分析这些资讯，让使用者能够轻而易举地获得，是所有的网站经营者都必须面对的问题。

首先是资讯的分类问题，现在有太多的网站上的资讯是依照该公司企业的内部架构来分类，而不是依照使用者的行为与造访动机来分类，分类的方法有许多种方法可循，如一般的任务分析（使用者来访一定有特定目标存在，此种方法是设定了某种目标后，分析使用者会经由何种路径去达成它），或是网站经营者可以将网站中所有要放的资讯都写在一张一张的卡片上，交给可能的使用者请他们去归类，网站经营者可以订定类别名称，也可以交由使用者去自创，将卡片收回后，看看多数使用者会如何归类网站的资料，就可以以此为依据设计出更符合使用者认知的资讯组织系统。

使用者介面

在资讯具备良好的组织架构后，网站可以开始进行使用者介面的设计来辅助使用者获取资讯，一般人常会将使用者介面的设计（User Interface Design）和绘图设计（Graphic Design）混为一谈，事实上两者是截然不同的，绘图设计是著重于美观、艺术方面，设计者通常需要俱备美术背景、设计概念，懂得操作如Adobe Photoshop、Photo Impact、Corel Draw等绘图软体，而使用者介面设计则是著重功能性与易用性（Ease of Use），设计者需要俱备良好的HCI基础。良好的使用者介面须要以上两者的合作，但是其顺序必定是在完成了功能方面需求后才来进行美化的工作。

良好的使用者介面必须俱备以下几点：

决定资讯内容的范围。 分辨资讯的重点、主旨。 选择合适的媒介来呈现。 注意不同媒介使用方式的协调性。 提供互动的机会。

总而言之，使用者介面是以使用的方便性为主，美化为辅，并且透过适当的媒介来传达符合使用者需求的资讯。

网站导览流程

使用者在网站上浏览时，最常问三个问题：

我在那儿？ 我该往那儿去？ 我去过那儿了？

网站的导览方式决定了以上三个问题的答案。导览方式的设计牵涉到针对使用者所进行的任务分析（Task Analysis），举一个简单的例子，网站在设计之前，可以组织一群可能的使用者，交给他们一个任务目标（例如买一本书）和一些路径项目（如登入、搜寻书籍、填写订单、送出等），观察使用者如何将项目排序以达到目标。

良好的网站导览应该是「透明」的，它的意思是使用者能够自由地在网站中来去，但是不需要经过一层一层的固定的顺序，也就是说浏览方式不应只是依据线性流程来安排，可以使用平行或是互动的方式辅助，例如类似Windows功能表式的导览方式，「联合新闻网」的新闻选项就是采用此种延展的方式，让使用者在每一页都可以很方便地看到整个网站的所有新闻，而不需要依循「首页」＞「地方新闻」＞「北市」＞「某新闻」的顺序。

一个良好的网站浏览设计应该包含以下几点：

符合使用者经验：以使用者为中心，采用现行标准做为范本，使用者绝大部份的时间都花在浏览别人的网站，大家怎么做，我们就怎么做。 易学易懂：相互连结不复杂、文字说明直接了当、图示涵义清楚，让使用者能够快速上手，不需要参考任何辅助工具就会使用。 省时省事：采用最符合网站类型、架构，及使用者目标与网站架构的连结方式，让使用者能以最快速、最简单的方法找到他们想要的资料。 一贯性：网站的整体导览方式标准化、固定化，例如不要用开启新视窗等非标准化的功能，因为会造成使用者的困扰与不信任感。 架构清楚：在英文里称之为「面包屑型」（breadcrumbs）的连结方式，笔者个人喜欢称之为「足迹型」，因为它指的是以足迹地方式呈现使用者走过的路径，或是以层层渐进的方式呈现该网页位于整个网站架构中的那一部份，它的主要用途有三种： 提供使用者关于整个网站架构的简单资讯。 当使用者循序渐进地到达某一页时，可以快速地经由此种连结方式回到原处。 让使用者可以快速回到上一层，像在购物网页中，使用者到了某一页发现东西不完全是他们想要的，他就可以回到上一层去寻找类似产品，此点有点类似浏览器里的Back功能，只不过Back是更上一层的跨站式连结。

没有架构型的导览方式会让网页成为孤儿，因为有时使用者会经由搜寻引擎或书签直接进入网站的某个部份，他们将无法得知该网页是在整个架构中的那一部份，而造成他们卡在那一页动弹不得。

多重而适度的连结：永远不要只提供一种导览方式，虽然说在单行道上比较不会撞车，但是要记得，一但我们在单行道上走错路就很难回头，例如当使用者是经过搜寻功能来到网站中某个位置时，通常不是直接落在他们真正在找寻的资料上，不过也相去不远，因此设计者应该提供相关资料的互相连结，让使用者在发现资料并不完全是他们想要的时候，可以迅速找到其他符合的资料。

例如使用者选择了某产品后，觉得该产品价格过高，这时如果在该产品旁列出其他类似但价格较低的产品，使用者就可以很方便地连结过去。

但是也不能过度，很多网站经营者都觉得自己的网站里每一项资料都很有价值，因此深怕使用者没有看到，于是就造成在网站的每一页都密密麻麻地列出所有的项目，但是说实在的，一个小小的萤光幕上能够放置多少资讯？除了连结之外，还有一堆装饰用的图片、动画等等，扣除这些，使用者真正关心的内容还剩多少？ （试想如果Amazon.com或Yahoo把它们所有的分类项都列在同一页，会是多么的「壮观」？）

没有理由把一个网站所有的连结放在每一页上，当使用者在某个网站买音乐CD时，他不须要知道这个网站的电脑产品有多少特价或是它的书有多少种分类。针对使用者所进行的任务分析，加上系统化地分类资讯有助设计者决定那些连结是有必要出现在每一页，有那些是只要出现在某些网页就行了。

提供Feedback与帮助的机会：最容易让使用者感到沮丧的是遇到困难时求援无门，必须适时提供辅助工具，例如线上解答、FAQ、或二十四小时的客服专线。

网站制作流程

阶段 问题 说明 确定网站目标 网站的主要目标是什么？短程和长程目标是？网站的吸引力在那里？ 首先要确定网站的属性与目标，并且定出各项目标的优先顺序。 市场分析 诉求对象是些什么人？竞争者是谁？使用者的可能行为模式是什么？ 分析诉求对象及竞争对手，以使用者的身份到竞争对手网站上进行模拟，以分析其优劣之处。 确定内容及功能 需要提供那些服务？内容的深度广度是否充足？功能的方便性？使用者会如何分类？各项功能服务的优先顺序为何？ 依据使用者的需求，决定网站提供服务与内容的范围，并且研究资料的分类，及确立网站的架构。同时，有时候会在上市时间（Time to Market）的压力下，需要定出各项服务的优先顺序，以随着网站的扩张分批推出。 导览方式与使用者介面设计 网路上的标准在那里？网站的属性是否适合？是否不复杂？是否能够轻松上手？介面是否友善？ 依据使用者经验找出适合网站的导览方式与使用者介面。 撰写程式 不同版本浏览器能否相容？ 撰写程式必须注意到版本的相容性与执行效能。 可用性测试 各项功能是否运作正常？是否有严重问题产生？是否能够跨平台（Cross-platform）？ 可用性测试是整个设计环结最重要的一部份，因为网站能否生存就在于是否俱备良好的可用性，进行严谨的测试有助于及早发现问题并改善，资料显示网站经过可用性的测试后可提升至少百分之五十的可用性。 版面设计 画面是否吸引人？是否采行非标准化的科技？页面是否能快速读取？采用设计是否浅显易懂？ 这时才是开始用到网页设计师的时候，有些人会觉得太迟了点，但是事实上如果太早就开始进行画面的美化，一但出了差错，修改的成本与时间一定会非常庞大。 可用性测试 使用者介面是否受到影响？是加分还是减分？ 版面设计完成后还必须进行一次可用性测试，以确定是否有新的问题因为画面元素增加而产生。 正式上线 是否有缓冲期？有无危机处理机制？ 网站上线并不是结束，而是真正的考验的开始。 观察期 有无意料外的状况发生？ 在网站正式上线后，必须密切观察网站使用情形一个月至两个月，因为很多问题都会在这一段时间内出现。 维护期 网站记录有无异常？伺服器是否稳定？安全管理是否周全？ 分析网站记录（Log）有无任何异常状况（如404、511等错误讯息），或是安全管理上有无漏洞，以期能在状况发生时能够及时解决。

标签网站制作网站导览