如何做好一款产品的信息架构?
本文是 UI 设计进阶系列的第 6-1 篇,系列目录:www.zcool.com.cn/article/ZNjI0MDI4.html。
调研部分讲完后,我们就该将这些洞见真正应用到产品设计中去了。我们先从最基础的,但是最容易被设计师们忽略的信息架构开始讲。
信息架构属于「用户体验要素」中的结构层。它研究的是人们如何认知信息的过程,对于产品而言,信息架构关注的就是呈现给用户的信息是否合理并且具有意义。
一个好的信息架构可以帮助人们更好地了解他们周围的环境并找到他们想要的东西(不管现实世界或网上)。而无论我们正在完成怎样的工作,创建信息架构时我们经常会问:
用户浏览我们服务的过程是怎样的?
怎样帮助用户分类他们的信息?
这些信息怎样呈现给用户?
这些信息有没有帮到用户,并驱使他们做出决定?
在以内容为主的网站上,信息架构主要的工作是组织分类和导航的结构,让用户可以更高效、有效地浏览网站内容。信息架构要求创建分类体系,我们可以使用两种方式来建立:「从上到下」和「从下到上」。
上图「从上到下」的信息架构方法是由战略层驱动。从产品主要愿景,一步一步细分到每个功能特性。
「从下到上」的信息架构方法则是根据对内容和功能需求的分析而来的。先从已有(或确定将有的)资料开始,把这些资料统统放到最低级别的分类中,然后再将它们分别归属到较高一级的类别,从而逐渐构建出能反应我们的产品目标和用户需求的结构。
但这两种方法都有一定局限,「从上到下」可能导致内容的细节被忽略,「从下到上」可能由于过于精确地反映现有内容而导致不能灵活地容纳未来内容的变动或增加。因此在这两种方法间找到平衡至关重要。
做交互设计需要精进的一个点,就是解决复杂信息架构。其过程和结果,会直接影响交互设计师的设计执行力和设计影响力。
另外,有些设计师喜欢计算「完成任务所需要的步骤」,或是计算「用户到达某一地点的点击数」,将这个作为评估网站结构质量的方法。然而最重要的其实并非「步骤数量」,而是「用户是否感觉每一步都是合理的」。因为毫无疑问地,人们会更喜欢清晰的七步,而不是令人困惑的、被刻意压缩的三步。
做信息架构工作前需要非常清楚地了解产品定位。并且为了了解用户,还需要大量参考前期调研的结果,并了解用户认知中是如何给各种内容进行分类的。这里可能会用到卡片分类(Card Sorting)等方法。
在进行这些研究之后,我们才开始分析数据,然后输出具体的交付物。
产品结构图
在一个项目中,信息架构确定了信息如何被展现及获取,然后最直观地呈现在产品结构图中。
举个例子,我们希望把「常见问题」与「帮助」页面联系起来,那么这两个页面也许可以一起放到「帮助」模块下。但是,我们可能发现用户希望「常见问题」属于「产品」这个模块。在这种情况下,我们就需要作出抉择,平衡各方利益,还需要考虑其他可行方案,以尽量同时实现不同目标。比如把「常见问题」和「帮助」都放在「产品」部分。最终,正是这些选择与决定,创造了整个产品的结构。
而由于我们很难绝对地划分出产品的功能与信息,因此一张结构图上很可能会同时包含功能与信息。
线框图
设计师可以利用线框图思考信息的结构、表现不同界面之间的联系、确定网站的实际运作逻辑。我们可以在早期就画出关键页面的草图,用来演示用户如何与信息进行交互。
分类和元数据
一个分类是指一系列组合在一起的事物。大多数信息架构会给产品选择一个或多个合适的分类方案。然后他们可能使用元数据给内容打上各类「标签」,这样用户可以搜索基于假设分类的内容。
元数据(metadata)又称中继数据,是描述数据的数据。它主要是描述数据属性的信息,用来支持如历史数据、资源查找、文件记录等功能。
比如一个买衣服的网站可以考虑多种分类方式,根据织物类型、根据商品类型、根据颜色类型等。于是我们就可以这样标记一件衣服,棉或尼龙,也可以标记为衬衫或上衣,还有红色或黑色。而这「织物类型」、「商品类型」、「颜色类型」就是这件衣服的元数据了。
好的元数据比全文搜索引擎更能提供可靠的搜索结果,帮助用户更快速地找到信息。但元数据不是说越多越好,而是具有一定前瞻性地尽可能详细。比如目前市面上的网站没人关注「织物类型」这个分类,但假如它变得有潜力,我们则可以快速运用已有的内容创作出符合用户需求的新功能或新专题。
Omnigraffle:www.omnigroup.com/omnigraffle/
Omnigraffle 是 Omnigroup 的图表和线框套件。如果你是专业的交互设计师,这款产品是绝对首推的。
Axure:www.axure.com
与 Omnigraffle 类似,Axure 既是线框图绘制工具,也是图表绘制工具。可以说 Axure 是在同类产品中,最为经典的一款罢。
Mindnode:mindnode.com
Mindnode 是另一种绘图软件,最重要的是组织你的想法、信息,并且设计简洁、多端可用。
ProcessOn:www.processon.com
ProcessOn 是国内的一款免费在线作图工具,支持实时协作。我最喜欢的是用它来绘制一些简单的流程图。
UI 设计进阶系列目录:www.zcool.com.cn/article/ZNjI0MDI4.html。
Complete Beginner’s Guide to Information Architecture:www.uxbooth.com/articles/complete-beginners-guide-to-information-architecture/
Information Architecture Institute:www.iainstitute.org
Card Sorting:https://www.usability.gov/how-to-and-tools/methods/card-sorting.html
《用户体验要素》:book.douban.com/subject/6523997/
作者:Hindy
个人主页:hindydesign.com
转载请私信授权,未经允许请勿转载,感谢您对作者版权的尊重。