1. 采用列表,确保信息易于抓取。
2. 保持列表简短。
3. 格式化列表。
4. 列表符号符合网站风格。
5. 使用说明、操作指南等采用序列列表。
6. 将段落转化成步骤形式。
7. 复杂使用说明、操作指南等可采用步骤形式。
8. 保持列表中的句子结构平行。
9. 如果不是步骤,不要采用序列列表,防止人们混淆。

网站有很多“动作”,我们希望用户采取“动作”。动词就是表示动作的词。
如果把“动作”给了名字,句子中的动词就无法发挥作用。
例如:
The Commission’s recommendations for changes were few in number.
recommendations包含了动词,were属于弱动词。
可以改成:
The Commission recommended a few changes.
再例如:
Retention of these records for seven years is a requirement for licensees.
retention和requirement都包含了动词,is属于弱动词。
可以改为:
Licensees must keep these records for seven years.

以前曾提到京东商城的商品页面存在一些问题
很凑巧,昨天的访问日志里,有访问者baidu了“京东商城 降价通知怎么用”。前一阶段的日志中,还能看到有人搜“京东商城的降价通知是什么意思”。
不知道意思,也很难用。
”降价通知“,如果商品降价了,就通知访问者。
现有名称没有表达出这层意思,改成”降价了通知我“等更直接。
任意打开一个商品页面,点击降价通知,出现的登录/注册页。
登录或者注册后,才是真正的获取降价通知!
这完全是强迫用户注册,增加用户获取信息过程。
先让用户获取信息,再建议用户注册,甚至强行利用填写的信息,强行发封注册信也比这个强。
还有个小小疑问,是不是每件商品都会降价,降价频率有多快。别我什么都填了,一年之后才告诉我“降价了”。

实施可用性测试主要需要注意两点。首先要确定最合适的测试方式。一般而言,最佳方式是实施典型用户与典型脚本交互的测试。测试者收集参与者完成的成功率、表现速度和满意度等数据。提供测试报告给设计者,包括定量数据和定性观察信息。如果用“检测评估”代替可用性测试,要谨慎实施。检测评估方法,比如启发式评估或专家评估,会发现大量潜在、但实际并不真实的可用性问题。
第二是确保使用迭代法。设计师获得第一步的测试结果后,做出改进,然后再进行测试。一般来说,迭代越多,网站设计越好。
下载完整pdf文档
本手册根据美国卫生和福利部发布的2006版Research-Based Web Design & Usability Guidelines,翻译编辑而成。共18章。
转载请注明出处。仅供参考。

许多网站都允许用户进行站内搜索。用户通常在“搜索框”中输入一个或多个关键词,进行站内搜索。如果网站中的词语和输入的词语相匹配,用户就能看到这些词所处的网站位置。
网站每个页面都应当提供搜索功能。通常情况下,提供简单搜索即可,无需高级功能。搜索不应当区分字母大小写。网站搜索能力应当可以响应用户典型输入。用户应当知道存在多类型搜索。
如果许多用户都会进行相似搜索,最好能提供搜索示例。用户会认为搜索范围只在整个网站中而不包括子网站。搜索结果应当有用、可用。
下载完整pdf文档
本手册根据美国卫生和福利部发布的2006版Research-Based Web Design & Usability Guidelines,翻译编辑而成。共18章。
转载请注明出处。仅供参考。

确定内容有用、表达良好,网站显示格式合适,应当确保内容组织清晰。有些情况下,要用多种方式组织网站内容以满足不同用户需要。
内容组织包括:重要内容靠近页面顶部、相关内容放在一起、确保所有必要信息可见,不需要的信息不会影响用户阅读速度。内容格式应当便于用户浏览和快速理解。
下载完整pdf文档
本手册根据美国卫生和福利部发布的2006版Research-Based Web Design & Usability Guidelines,翻译编辑而成。共18章。
转载请注明出处。仅供参考。

翻出来一篇老文章,介绍TiVo,现在看看,非常受用,跟工作中碰到的很多问题很类似。
以下译文略有删节。原文标题The PVRBlog Interview: Ten Questions with TiVo’s Director of User Experience, Margret Schmidt
http://www.pvrblog.com/pvr/2004/12/the_pvrblog_int.html
PVRBlog访谈录:与TiVo用户体验主管Margret Schmidt的十个问题
今年夏天,我在做一些新网站界面,想到TiVo如何在界面兼具功能强大和简单易用,我想找TiVo的人问问,但我不敢。后来我想到能找到TiVo总部的一个人,通过他进行访谈。多亏湾区几位设计师朋友帮忙,最终我能和领导直接对话,她就是TiVo用户体验主管Margret Schmidt。
Margret很客气,解答了10个问题,包括最初如何开发TiVo UI,如何增加新特性,语音UI怎么产生的等等。很感谢TiVo和Margret花时间接受访谈。访谈内容如下:(编号是译者所加)
________________________________________
1 Matt Haughey:TiVo是革命性产品,不仅有基本录制功能,典型用户和设计高手更是经常将其界面称为关键杀手特性。我一直听到人们称其是强大功能的有用设计的品质证明。是不是从开发TiVo开始,界面简单易用就是主要设计目标?(TiVo开发于1997至1998年,那时这种开发思想非常超前。)
Margret Schmidt:1998年,TiVo的设计理念是:

  • TiVo是娱乐,笨蛋;
  • TiVo是电视,笨蛋;
  • TiVo是视频,蠢货;
  • 每件事都应很顺利;
  • 不要程序,也不要深层等级;
  • 尊重观众隐私;
  • TiVo有活力,跟电视一样。

    从一开始,简单易用就是团队目标。物品或者界面只要起作用,不需要阅读手册或者学习控制,人们就可以使用物品或者界面,我们团队正是受到这种想法的驱动。唐诺曼的《情感化设计》是必读书籍。他们花了很多时间,和“电视人”交谈关于优秀电视设计需要什么。
    TiVo在发展的同时,我们修正了设计理念,但多数主题仍然一致:

  • TiVo盒让电视更好……
  • TiVo可靠。
  • TiVo由我控制。
  • TiVo容易用。
  • TiVo智能,能帮助我。
  • TiVo反应快。
  • TiVo全是娱乐。

    我想不出来没了TiVo,生活会是什么样子。
    2 MH:我想,UI特性开发过程较长,会有很多内部争论和测试。能不能介绍一下这个过程?特性从想法到用户实施,UI团队要花多长时间,哪些步骤?
    MS:产品特性及功能来自产品管理(Product Management)部门。UI设计师同产品经理和技术领导密切合作,提炼需求。
    根据特性性质,我们会进行早期用户需求研究,理解用户如何思考,他们在特性中寻找什么。根据需求和研究结果,设计师会创建出初始设计概念,用户体验团队进行评审,然后项目利益人进行评审。
    设计概念走查我们预计用户会进行的最频繁任务。如果项目利益人认为设计概念符合需求,我们就会开始设计可用性测试。TiVo有现场实验室,很强的研究团队。通常我们会创建功能完全的原型,可以显示在电视上,用TiVo遥控器遥控,就跟真东西一样!根据研究结果,我们会进行迭加设计(有时要迭加很多次!)。
    设计师创建书面工程规格,详细规定每个屏幕,错误条件,边缘案例和最终文字。工程师开始创建,我们可以在公司中使用这些特性,然后发布到Alpha和Beta版,进行测试。
    研究人员设计任务和调查问卷,请测试者完成,以便获得进一步用户反馈。有些任务在实验室中不太容易建立模型,需要在测试者的生活环境中进行评估。比如,双频道浏览行为就不容易在实验室测试中进行。如果在用户生活环境中进行,用户准确报告实际使用情况,而不是他们如何思考使用的情况,我们能获得更好反馈。
    开发循环过程中,我们持续修正用户体验,保证需求能跟上进度。项目一开始,设计和研究就会一直进行,一直到产品完成、发货。这个过程的长度根据产品复杂性变化。
    3 MH: 有突破性产品,比如TiVo,那么如果产品竞争不够激烈,你会保持创新,我想用户研究一定很艰难。开发以前不存在的东西,如何保证这个东西有用,而且人们想用呢?是不是必须创建大量概念证据原型,进行用户测试,看看人们是否需要?
    MS:创新是天才团队的副产品。我们定期进行头脑风暴,收集和分类新产品点子。我们采用交叉方法将这些点子提炼成产品特性。我们有一个人专门创建原型,所以我们能快速迭加。
    测试创新产品有困难,因为人们常常不擅长预测将来的行为。我们采用一系列研究方法客服了这点,比如家庭研究,可用性研究,深度访谈,卡片分类,实地实验,已有行为数据分析等等。采用不同方法,我们能进行三角测量,对将来的开发有所感觉。
    4 MH:市场研究对用户体验重要吗?你们会看出版物,论坛和网站说他们希望TiVo有哪些功能,然后用于开发新特性,或者让已有特性想法更成熟吗?
    MS:我们有专门收集好点子的目录,叫RFEs(改进请求)。这些改进请求来源不限,员工,beta版测试者,客户支持,TiVo社区等等。我们根据特性将这些请求分类,比如Season Pass录制和Wishlist搜索。
    UI设计师接到任务,对某项特性进行改动,他会评审所有相关改进请求,看看哪些合适集成到设计中。而且用户体验团队有一张列表(hit list),列表包含了我们希望在产品中解决的特性或改进。我们会和产品管理部门定期评审列表,从商业角度评判特性或者改进花费的成本。
    5 MH:我观察TiVo多年,见证了TiVo从成立公司,到挑战好莱坞模式,到最终被好莱坞接受。有没有权衡过用户需要什么,电视工作室需要什么?我能想象即将推出的TiVoToGo特性是个好例子。
    MS:实际上很容易平衡两者之间的需求,因为一般情况下,两者目标相同。用户想何时、何地、如何看到高质量节目。工作室希望大众喜欢他们的节目。TiVo只是让用户在公平使用指南范围内控制电视收看。我们有很强的安全系统,叫TiVo Guard,保护工作室利益。我们反对不当传播受版权保护的内容,用户也不能这样要求。
    6 MH:TiVo用户群庞大,用户觉得界面很舒服,而ebay爱好者群众多,一直有主要UI变化历史问题,两者相似。开发新特性时,UI可用性会成问题吗?
    MS:我们非常谨慎,不会为了改变UI而改变UI。比如三年前,我们要发布2.5版本,我们想改变遥控器上的ADVANCE按钮行为。我们希望状态条每15分钟停一下,而不是直接跳到节目末尾,再跳到节目开头。我们觉得这种方法能更快达到节目不同部分。
    我们发布beta版进行测试,测试者抱怨了。他们已经习惯直接跳到节目末尾,再按LEFT快速删除。有些用户甚至在遥控器上设定了这个功能。我们马上改变设计,现在15分钟停顿模式只会出现在快进或快退中。
    如果要改变基本UI行为,我们就在挑战每个人要记住skip-to-tick 事件。为了缓和这些问题,我们努力为未来设计(我们最终是想领导未来),然后进行消减以满足版本发布需要。这让我们看到,体验如何自然进化,而不是必须剧烈改变才能适应将来的功能。我们努力增加体验,而不是改变或者拿走用户依靠的东西。
    7 MH:你们的团队如何决定特性或者功能太复杂不适合TiVo范例?
    MS:一般情况下,我们不会认为某个特性“太复杂”,因为我们的设计团队很强,他们能把任何东西都做得简单易用。如果特性不适用或者对用户没有吸引力,我们会排除这项特性。TiVo是为任何看电视的人提供服务。我奶奶能用它,我孩子也能用它。如果开发力量能更好用于为所有人提供娱乐,我们就不会增加特别或者高级用户特性。
    8 MH:人们觉得最困惑的特性或者概念是什么?你们如何发现的?
    MS:我们通过追踪电子邮件和客户支持收到的电话,调查结果,可用性测试发现的问题,观察人们在家中如何使用产品,beta版报告等了解用户困惑。没有哪个领域最困惑,但是我们希望UI领域能尽可能简单。打开TiVo DVR包装,接入电视机,设置有线电视或者卫星电视商,我们希望这种体验简单有趣。我们在积极创新UI,以达到此目的。
    9 MH:TiVo不仅可视界面功能强大简单易用,而且很可能是我享受听觉的唯一设备。语音界面对UI是有意补充,而且极少产生阻碍。除了TiVo,我想不出来还有其他产品有效利用了语音,很想知道你们如何开发出来的。决定如何设计语音有没有经过很长讨论或者测试?
    MS:电视并不是不发声,所以我们不希望TiVo界面也不发声。最初的语音概念分成几种类型。有些是机械式,有些是人工合成,还有一些属于器官式。我们马上决定用器官式,语音愉快,能和我们的品牌价值“玩乐”保持一致。实际上也没有经过太多迭加就设计出来了。
    10 MH: 过去经常提到TiVo所带的遥控器,但我想知道它是如何产生的。TiVo UI无以伦比,但就遥控器而言,TiVo能参考30多年遥控器历史,做成比以前的遥控器都更有用的遥控器。开发这种新遥控器花了多长时间?用户测试有没有让团队决定把Pause按钮做成最大?还是做成原来的样子?
    MS:纽约时报有篇文章(需要注册阅读)专门介绍TiVo遥控器是如何形成的。
    我们不断改进遥控器。消费者设计和用户体验团队紧密合作,评估每个按钮,看看是不是真的需要。我们采用了评估屏幕界面的相同研究方法,只不过用泡沫做原型。我们的遥控器和UI一样简单优雅。

    “文字简洁有力。句子没有无关单词,段落没有无关句子,就象绘图没有无关线条,机器没有无关部件。”——William Strunk Jr.,《Elements of Style》
    内容是网站的最重要部分。如果网站内容无法提供用户所需信息,网站再好用都没有多大价值。
    网站内容应当使用用户熟悉的文字,避免使用术语。如果必须使用简写或者缩写词汇,确保对典型用户明确易懂,而且页面上有所解释。
    尽量减少词汇、句子数量。每段第一句(主题句)概述段落含义。明确阐述帮助文字的时间顺序。同时,合理使用大小写,用肯定、积极语调,限制导航页文字数量。
    下载完整pdf文档
    本手册根据美国卫生和福利部发布的2006版Research-Based Web Design & Usability Guidelines,翻译编辑而成。共18章。
    转载请注明出处。仅供参考。

    很多网页都使用图形。使用得当,图形能减轻学习难度。网站多数页面都有一张重要图片,即标识(Logo)。使用得当,图片、动画、视频以及音频能为网站增加巨大价值。如果要使用动画,应当在动画开始前给出介绍。
    图片大,载入耗时,特别是网速较慢时。如果必须使用图片,必须确保图形不会显著降低网页载入速度。应当提供大图片的小图,用户无须下载即可预览图片。
    有时要用标签说明图片,帮助用户理解。进行可用性测试,确保网站图片传达含义。许多情况下,应当使用真实数据的图表图形,方便用户快速准确理解。
    不要将图片作为整个页面背景。复杂背景图片会降低页面载入速度,干扰阅读。
    有经验的用户会忽视他们认为是广告的图形。确保图片不会看起来像横幅广告。同时应当谨慎放置图片,不要放在广告位置。
    下载完整pdf文档
    本手册根据美国卫生和福利部发布的2006版Research-Based Web Design & Usability Guidelines,翻译编辑而成。共18章。
    转载请注明出处。仅供参考。

    37signal博客文章,Distinguishing decorative from meaningful elements in UI design

    作为界面设计师,总是希望作品好看而且有道理。屏幕上每个元]]>GitHub网站就碰到了装饰与意义的问题。

    GitHub网站全局导航

    登录到GitHub,全局导航出现在头部分右侧。圆角矩形包裹了全局导航块。

    197-github-small.png

    观察一下包裹全局导航块的圆角矩形。其外侧是灰色边框,整个全局导航块呈淡蓝色背景。边框和背景属于装饰性。它们为导航块增添了风格和视觉趣味。为了帮助你看清楚边框和背景的装饰性质,下面有两张图,上一张是原图,下一张没有边框和背景。

    200-github-comparison.png

    两张图看起来都很舒服,功能也没有变化。你会说两者之间的区别只是审美角度、或者个人观点问题,没必要再讨论。但是,事情没这么简单。容器元素包裹链接远远不是风格问题。装饰容器实际上改变了链接的意义,正如我们下面会讨论的,装饰容器给GitHub造成了问题。想明白为什么,先来了解容器元素如何影响客户理解设计。

    容器影响所包含元素

    容器中放置链接,暗示了容器和链接之间的关系。从技术而言,容器给链接加上了范围(scope)。网络应用工具中经常出现的编辑(edit)链接,是大家都熟悉的例子。

    203-edit_example.png

    上面两个编辑链接都被容器限制了范围。浏览者期望上一个编辑链接用来编辑Michael Bluth,因为这个链接和Michael Bluth出现在同一个框中。两个链接一样,容器在发挥作用。

    这个道理如何应用到GitHub全局导航?repositories(项目的意思,译者注)中的all链接有问题。GitHub有两种信息,一种是任何人都可以浏览的repositories,另一种是用户自己的repositories。这就是我们在其导航设计中发现的问题。

    206-repos-all-link.png

    GitHub的装饰设计暗示了repositories链接有范围限制

    全局导航块包裹在边框中,”all”链接受到当前用户的限制。点击链接,应当期望看到属于当前用户的repositories。

    210-repo-link-user.png

    与没有边框的版本相比。”all”链接是指Michael的repositories,还是只所有用户的repositories列表,不清楚。

    211-repo-link-global.png

    不只是装饰:GitHub上的行为令人困惑

    GitHub全局导航起初看起来只是装饰或者风格问题。现在我们明白了美学决定还会影响浏览者如何理解设计。就GitHub而言,repositories链接受到限制,并没有与行为相符。点击”all”链接,实际出现的并不是当前用户的repositories,而是所有用户的公共repositories列表。如果想看当前用户的repositories,需要点击avatar图标旁边的用户名字。真够折腾!

    重新设计应考虑范围

    如何重新设计,才能消除困惑?一种方法,去掉容器,重新排列元素,消除repository链接受到当前用户限制的暗示。

    212-redesign-1.png

    这种重新设计利用视觉原则,影响如何理解导航块的方式。将avatar图标移动到右侧,去掉边框,repository链接与当前用户之间相关的假设不再存在。

    另一种方法,保留原设计中的装饰容器,利用文案说明限制范围。

    213-redesign-2.png

    第二种重新设计采用两个链接,”all”和”mine”,来区分所有repositories列表和只属于当前用户的repositories列表。无论是采用视觉原则还是文字,两种重新设计的方案都消除了”all”链接的模糊性,设置了清晰期望。

    GitHub提供的服务很好,我知道我有点吹毛求疵。UI是微妙游戏。大脑和眼睛的功能敏感精妙。作为设计师,应当非常谨慎,有些时候我们为眼睛设计,而忘记了大脑。希望这些例子能帮助你对两种元素更敏感—装饰元素和改变界面意义的元素。

    Technorati :
    Del.icio.us :
    Zooomr :
    Flickr :