交互设计指南:突出重点让用户一目了然


看到这张照片,我们一眼能够看到天宏(图中这位UED俊男)的眼睛。我们能从他的表情里读出一些他的性格。一张好的摄影作品,最重要的一点,就是这个照片是否有焦点,照片的主题是否一目了然。而摄影作品的用光、构图、景深等等手法,其实就是在让一个照片能够有其焦点,并且利用这些艺术手法来烘托气氛,提升主题。 一个优秀的页面亦如此:应当突出重点,一目了然。相信大家也知道,一个用户在浏览网页的过程中,只是扫描页面,而不会像是在看书似的阅读每一处地方,每一行文字。一个网页呈现在用户面前的时候,应该在5秒之内,就能理解:这个页面是干什么的?我大致能通过这个页面做些什么?接下来我该去哪里? 我们网站上的每个页面都可以是任务流上的一个点。这个点上包含着用户需要的信息,也许是继续找到任务流的下一个点的信息(例如导航),也许是用户想找到的最终内容。而一个页面上存在着上百甚至上千个链接(淘宝的宝贝详情页面通常有700多个链接),要在这样茫茫大海中找到用户需要的链接,可见,“突出重点,一目了然”是多么重要。

测试您的页面

测试您的页面是否达到“突出重点,一目了然”,能够让用户在短时间内找到他们所需要的信息,其实可以是个低成本的小型测试。fivesecondtest.com 这个有趣网站是一个专门做5秒测试的站点。测试者上传一张站点的截图,然后被试观看截图5秒,然后说出刚才看到了哪些东西。另外一种方式是被试看到截图,在5秒的时间中,点击他所关注到的所有焦点,最后给出每个焦点他认为的描述。


下图是本文开篇的时候,8个用户的测试结果:


这种测试比起眼动议来说,测试的成本要低得多,而且能够明确得测试出你的页面的浏览者是否能在第一时间发现他们所需要的内容,并且可以比较出,这是否符合你的设计的初衷。

达到“突出重点,一目了然”

那么,如何达到这样的“突出重点,一目了然”呢?据鄙人不完全归纳,可以有以下方法:

为扫描而设计,不是阅读

你几乎需要把每个用户都想象成大忙人——他们没有时间停留在你精心设计的页面上,去阅读每一行你辛苦撰写的问题,去欣赏你精心设计的高光与圆角——他们想要的只是尽快地找到有用的信息。如果找不到,互联网上也许有很多替代品,可能是你的竞争对手,用户可以轻而易举地到其他网站上去寻找他们需要的信息。《点石成金》这本书也比较详尽地描述了这个要点。相信大家都应该阅读过了。《点石成金》里谈到关于“为扫描而设计,不是阅读”时,

给出了几种方法:

尽量符合用户习惯的设计,让人接受陌生的东西需要代价,除非我们觉得这个代价是必须的。在页面把越重要的东西越突出,建立清楚的视觉层次。可以点击的地方必须突出,让人明显知道可以点击。把页面划分成明确定义的区域省略多余的文字

Yahoo Small Bussiness的页面改版很具有代表性。 改版前:


两次改版后:


我们可以发现,改版后的页面视觉层次得到了很大的提升。白色内容区域、浅蓝色右边栏和深蓝色的注册区域渐渐递进,深蓝色背景上的强烈反差的黄色按钮“Sign Up”,引导着这个页面的主要目的,亦是重点。另外,大家可以发现,内容文字部分比先前的老版本少了一半一半再一半再一半。。。相应的,使用列点和大图的方式传递了相同的信息。“Sign Up”显而易见,而且视觉上有突起的渐变效果也马上让人知道,那是个按钮。

将功能“藏起来”

部分产品经理有一个这样的通病,他们每每作出一个新功能,就爱向用户炫耀新的工作成果。看起来,这样挺好,一来让用户知道本网站还没死,而且还在为他们不断得制作新的功能,二来辛苦开发了数天甚至数月的功能要是没人用,那该多“杯具”啊!于是乎,你就会发现,长期“坚持”下来,界面上的元素越来越多。 假设某一天,这样的产品经理全部被谷歌挖走,那么谷歌的首页将会是一个放满“杯具”的餐桌:


还有一个例子来自于某BSP,它的博客顶端存在着一个工具栏,有30个左右的链接。而这个工具栏在4年前他的用户高速增长期其实并不存在。


如果你了解20-80原则,你应该知道:80%的用户只会使用20%的功能。所以,为什么要让那些少人使用的80%的功能总是放在显眼的位置,扰乱那些只需要20%的功能的大部分用户呢?(此句有些拗口,我承认,麻烦看官们可能要反复阅读几次。。)其实那些80%的功能大部分是专家用户所喜欢的,我们应当将这些功能“藏起来”,目的就是不影响新手和中间用户,并等着他们去发现,然后大叫:“哦,居然这个网站有这个功能,太棒了!”我们来看看Google Reader iPhone/Android 版本最近的小改版:

改版前:


改版后:

大家可以发现,原来占据垂直空间的New items/all items的切换、mark all as read等功能,全部藏匿在右上角的下拉按钮中。Refresh被替换成了一个可以容易理解的Refresh图标,顶端其他产品的链接也祛除了下划线。 关于将功能“藏起来”、功能肥胖症是个说不完的话题,《哈佛商业评论》早在06年的时候也详细探讨过这样的问题,这部分内容,我过段时间也整理整理,为大家奉上吧,本文中,就不作深入探讨。

关注于用户的主要任务流

关注于用户想要的,而不要强迫用户查看、理解与操作无关的事情,是关于“突出重点、一目了然”的UCD方法论的延伸。这个想法,解决了什么元素该被“突出重点”从而达到界面“一目了然”的问题。从用户角色到场景,到任务流,可以决定每个界面——也就是任务流上的节点最重要的元素是什么。加之融合商业目标,即成页面的重点。其他非重点的元素应该尽量“藏起”或是“显得暗淡”些。我们来看一个来自于Magic Ink(by Bret Victor)的例子: 这是个书籍的搜索结果页面。


我们能够发现,这个页面觉得凌乱不堪。各种大小,各种颜色,各种粗细的字体混杂在一起,眼花缭乱。就像《气球》这首歌唱的:

黑的白的红的黄的
紫的绿的蓝的灰的
你的我的他的她的
大的小的圆的扁的
好的坏的美的丑的
新的旧的各种款式各种花色任你选择

说实话这么多种气球还真不知道该选哪个。如果我们可以通过UCD(或者是其他方式)分析出,这个书籍的结果页,用户需要这些信息:

书籍内容。这本书标题是什么,是关于什么的?书籍评价。这本书好吗?别人对它的评价如何,这些评论可信么?

根据这个目标,重新设计后的结果如下:


我们可以看到,这本书内容和评价都一目了然,信息结构利于扫描和比较。重要的信息大而具有色彩,次要信息成灰色的小字。关于这些更详细的叙述可以参见原文。

总结

本文描述了什么是“突出重点,一目了然”。如何测试页面是否“突出重点,一目了然”,以及如何达到“突出重点,一目了然”。 有句话我挺喜欢,作为结局吧。在《What’s Next in Web Design?》中说道的:

“Simplicity is when someone takes care of the details.”

“简单而不简陋!”(谢谢青云给出的翻译!)

我们所追求的界面或者功能做得简单,不是粗制滥造,而是需要把下在创造更多无用的功能的功夫转变到现有功能的细节上。做出来东西容易,但是把东西做好做精难啊!

时间: 2024-12-05 04:51:31

交互设计指南:突出重点让用户一目了然的相关文章

交互设计案例:突出重点一目了然,简单而不简陋

文章描述:交互设计案例:突出重点一目了然,简单而不简陋. 看到这张照片,我们一眼能够看到天宏(图中这位UED俊男)的眼睛.我们能从他的表情里读出一些他的性格.一张好的摄影作品,最重要的一点,就是这个照片是否有焦点,照片的主题是否一目了然.而摄影作品的用光.构图.景深等等手法,其实就是在让一个照片能够有其焦点,并且利用这些艺术手法来烘托气氛,提升主题. 一个优秀的页面亦如此:应当突出重点,一目了然.相信大家也知道,一个用户在浏览网页的过程中,只是扫描页面,而不会像是在看书似的阅读每一处地方,每一行

交互设计指南:信息可及

 可及,通俗的说是"可以达到",加上主语和宾语,在"交互设计"这个大的语境下,含义应该是"用户可以达到自己的操作目标",这不是和"有效性-用户的操作是有效的"重复了吗?其实,在交互设计实用指南中,"可及"是一个狭义的概念,是放在有效性下面的,具体解释为"色盲.肢体残疾等特殊人士可以完成基本操作".更扩展一下,这个特殊人群应该还包括老人儿童,文盲等对信息使用不擅长的人.       也就是

《怦然心动——情感化交互设计指南(修订版)》一导读

开场白 怦然心动--情感化交互设计指南(修订版)本书的内容首先是关于人类行为的原则:人们做事的动机,对事物的感受以及如何作出特定的选择. 但这并非是本书的全部内容. 如果尝试去理解人类行为是本书唯一的目标,那我早就搁笔不写了,我会向你推荐其他与此课题相关的更多更好的书籍. 过去十年来,我一直致力于网上的用户体验设计.我怀疑每位进入用户体验行业的人都是从某个已有的成形的学科转过来的,比如图书馆学.视觉传达设计.计算机科学或教育学. 在互联网的泡沫时代终结之前,我以一家技术型创业公司的网页设计师和平

一份简单实用的微交互设计指南

  功能差不多的情况下,如何让用户一见倾心?微交互是决定用户印象的关键之一,今天这篇好文列举了使用微交互的注意点,以及五个最常见的使用场景,全是干货,来收! 好的产品往往做好了两点:功能和细节设计. 功能吸引用户使用你的产品,细节设计将你的用户留下.优秀的细节设计能够使你的产品在众多竞品中脱颖而出,优秀的微交互设计往往能够让用户在初次使用产品时就能够留下深刻的印象.作为一个交互设计师,在设计微交互方案的时候不仅要考虑视觉上的冲击力,还要想办法赋予其信息传递的功能. 什么是微交互? 微交互是产品中

交互设计指南系列一:我们眼中的交互设计

交互设计(Interaction Design, 缩写 IxD 或者 IaD),是定义.设计人造系统的行为的设计领域.人造物,即人工制成物品,例如,软件.移动设备.人造环境.服务.可佩带装置以及系统的组织结构.交互设计在于定义人造物的行为方式(the "interaction",即人工制品在特定场景下的反应方式)相关的界面(Wikipedia).通过对界面和行为进行交互设计,从而可以让使用者使用人造物来完成目标,这就是交互设计的目的. 从用户角度来说,交互设计是一种如何让产品易用,有效

交互设计理论:如何减轻用户的记忆负担

写在前面的话关于<交互设计实用指南>,我们最近收到很多朋友的反馈,有支持的也有批评的,在此一并感谢了,有你们的关注,我们才能走得更远.<交互设计实用指南>其实是收集和总结了交互设计上的一些问题,肯定有很多老生常谈的东西,是不是老生常谈其实不是问题,"问题在于,这些老生常谈的东西有没有被积累,有没有被传承,有没有被体系化."(青云语)<交互设计实用指南>的读者群涵盖了许多行业,而且就算是交互设计专业的读者也存在经验和水平的差异,所以读者们对<交互

交互设计研究:用户注册和用户登录的交互细节设计

文章描述:交互细节分析--注册&登录. 注册&登录是一个网站的门户,它的设计姿态就是对待客人的态度.虽然用户可能每次都只花极少的时间在注册&登录互动,但是这个"瞬间"却举足轻重,用户与注册&登录之间的交互关系承上启下的一个节点.注册&登录所有的细节影响了能否完成产品战略定位所设定的最基本任务去吸纳其所希望的用户的使命.基于很多交互设计前辈的研究,作了一些细节中的细节分析.感谢身边帮助我的朋友们. 1.注册流程剖析对比: 1.1.注册和登陆用户体验

交互设计案例分析:影响用户体验的关键因素

下面分享一个交互设计的小案例,这个案例很好地说明了我们在具体工作中怎么样去追求"易用"并且"轻量级"的设计,而这是影响用户体验的两个关键因素. 交互设计不是在控件库里挑选合适的控件,这是我最近工作中的一个感受.线上应用的环境复杂多变,不一而足,很多在书本或别人的实践中看起来合理的方法,放在自己具体的环境中就会出问题.下面分享一个交互设计的小案例,这个案例很好地说明了我们在具体工作中怎么样去追求"易用"并且"轻量级"的设计,而这

交互设计指南:一次点击

有一次去超市换货,本能的找到服务中心,服务中心说这个业务在超市旁边一个房间里,由于忘记带小票,那个小房间的人让我去另外一个小房间调电脑里的记录,调出来我拿着记录单去了卖货的地方才换货.其实超市退换的需求也不少,整个过程服务态度很好,但是很麻烦. 其实我们日常生活中很多事情,办起来过程很罗嗦,办事的工作人员说这是应该的,都这样做,可应该不应该,谁是评判标准呢? 交互设计一个很重要的目地就是让用户方便快捷的执行任务和完成工作.在互联网产品的交互设计中,尽可能的消除每一个附加工作,做到尽可能一次操作而