The giant ocean sunfish

The ocean sunfish (mola mola) is the largest bony fish in the world. It is a unique pelagic fish, and specimens of ocean sunfish have been observed up to 3.3 m (11 ft) in length and weighing up to 2,300 kg (5,100 lb).

Curiously, the Ocean Sunfish has a very small brain compared to its size: A 200 kg specimen may have a brain the size of a nut weighing only 4 g. It would explain their quiet behaviour and how often they get trapped into fisher nets.

According to the National Geographic if it lives to adulthood, a sunfish can gain over 60 million times its starting weight: "the equivalent of a healthy, bouncing human baby growing to a weight equal to six Titanics".

The images of scuba divers next to a giant sunfish gives us a better idea of their incredible size. Fortunately, ocean sunfishes float serenely in midwater.

Ocean sunfish is generally thought to be solitary fish, swimming freely in the ocean alone. However, certain sightings of molas in groups of more than ten have been reported. Frequently, giant sunfishes lie inert on the ocean surface, apparently sunning themselves.

Sometimes, ocean sunfishes are caught accidentally by fishers nets and a crane is needed to lift them on board.

Another threat to ocean sunfish are floating plastic bags which look like their natural prey, jellyfish. Sunfish can choke as they try to swallow the bags, or slowly starve as the plastic clogs their stomach.

Recently, a Gaza fisherman trapped a giant sunfish. He threw his nets into the water and was surprised when the fish got stuck in five of his nets. His catch measured 3.5 metres or 11 feet in length, 1 metre in width and weighed one tonne. Many fishers have lived the same experience, and it seems pretty impressive.

Some years ago, Australian Museum acquired such a large specimen that they had to use ropes to haul it up and get it inside the building through a window. As you can see, the size of other specimens is as big as a parking place.

On the other hand, giant sunfishes are an important menace for little ships. A collision at high speed can cause both injury to sailors and damage to yachts.

Finally, the flesh of the ocean sunfish contains neurotoxins similar to those of other poisonous tetraodontiformes, but it is considered a delicacy by some people.

More info: 1, 2, 3, 4, 5

原文地址:http://fogonazos.blogspot.com/2007/02/giant-ocean-sunfish.html

Web Application Form Design Expanded

There was a large amount of interest in last month’s Web Application Form Design article, so I decided to provide some additional details and a few examples for the following concepts:

Uniting Input Fields and Labels

A number of readers were interested in how the limitations of a “left-justified horizontal label” layout (primarily the separation of input fields and their respective labels) could be solved. Though excessive visual elements (even when they are quite subtle) in a form will increase visual noise substantially, a few carefully selected elements can help users connect input fields and their respective labels.

Visually separating related groups of content with a horizontal rule or background color makes it easier to associate left-aligned labels to fields. However, these groupings cannot be arbitrary (there must be a reason the fields are considered a group i.e. related content) and should not exceed 5-6 items (otherwise the adjacency problem will reemerge).

Primary & Secondary Actions

When a form has both primary and secondary actions such as “Continue” (primary) and “Go Back” (secondary) it may be wise to reduce the visual weight of the secondary action. This minimizes the risk for potential errors and directs users to completion. The following examples illustrate this concept in action on Orbitz, Yahoo, and Expedia. Though the visual treatments vary, primary actions are consistently heavier (bold fonts, button-shapes, bright background colors, etc.) than secondary actions.

Label & Input Field Lengths

The length of input fields can be used to communicate important information to users. For instance, an input field for a five-digit zip code should not be 40 characters in length as this sets an incorrect expectation for users (what kind of zip code is this long?). When there isn’t a specific length associated with an input, maintaining a consistent input field length can ease the visual complexity of a form by reducing the rag caused by input fields of varying length. Because input field labels can vary in length (especially when a layout will be localized), it’s a good idea to build a flexible layout that adjusts not only to various screen resolutions and browser window sizes but to different line lengths as well.

TrackBack URL for this entryhttp://www.lukew.com/ff/ff_tb.asp?155

原文：Refining Data Tables :: UXmatters
作者：Luke Wroblewski
译者：JunChen Wu


表单可能是当今 Web 应用里面最常见的界面元素了，有很多这方面的文章。表单受到如此的重视，是因为它们对从用户那里取得信息起着关键的作用。如：用户注册（表单）是加入社区的第一步；确认订单（表单）是买卖成交的关键。但是，用户输入伴随而来的是系统的输出，且用户提交的信息常会以列表数据（tabular data，列表状的数据）的形式反馈给用户。


数据表格可能是继表单后第二常见的界面元素了，数据表格也常被用来构建 Web 应用。用户通常需要增加、修改、删除、搜索和浏览比如人名列表、地名列表或者其他类似的列表。所以在这里，表格的设计对应用的有效性、可用性起着关键作用。和表单的设计一样，也有很多方式设计列表数据。


在之前的专栏中，我写过一篇文章 So the Necessary May Speak，讨论了怎样减少表格的内容元素和视觉设计，实现用最少的“设计”进行高效的沟通。我不会再复述之前的观点，本文主要集中在如何通过界面设计来帮助用户面对大量数据单元时找到所需要的信息。


过滤器
当表格呈现的数据量很大时，用户很需要一些筛选条件来过滤信息。在这种情况下，准备一个完整的数据筛选条件列表是十分有效的，可以很快地告诉用户有哪些细化的选项。

图一是 Shopping.com 使用的数据筛选条件设计。在这个例子里，一份完整且可用的筛选条件列表通常显示在每组产品搜索结果的上方。并且也有分组——如价格、品牌、尺寸、类别、附注，这样也可以让用户迅速知道选择其中一项过滤结果后，还有哪些条件剩余。这种位于表格上方的设计，垂直空间就显得非常珍贵，因为你也不会想弱化表格的数据。所以，一般针对这种方案，不会显示每组所有的条件，而是固定显示多少个，然后在后面增加“查看所有”的链接。（可以看淘宝网的例子，译者注）



图一 表格上部的数据筛选条件


当然，你也可以把筛选条件列表放置在表格的右侧或左侧，如图二所示。虽然这给每组条件提供了更多的空间，但也因此部分筛选条件可能需要滚动页面才能看到。



图二 表格左侧的数据筛选条件


在一些情况下，很可能是有限个数或常用的筛选条件，那么只显示那么几个条件就可以了。如图三所示，一组 Tab、链接或者下拉菜单，提供了少量的但高权重的筛选条件。



图三 选项式的筛选条件

触发器
当有筛选条件太多不能一次显示或者数据的筛选在产品设计中只是次要的——比如，仅仅为了获得所有数据的一览而不是要挑选出某条记录，那么不错的方法就是既让选项可以操作，又不是一直出现在界面上。（即需要用户触发）


举个例子，一个用户可能可以通过点击类似于搜索选项之类的链接，来展开一组筛选条件，就是说仅当用户需要精确搜索的时候才显示那些筛选条件。如图四种的例子，当用户点击搜索选项的时候，一组筛选条件即会动态的出现在表格的上方。默认情况下，三个最常用的搜索决定了三个筛选条件。当然用户也可以选择另外一组或者增加一个筛选条件。



图四 需要用户触发的筛选条件



图五 给每一列增加搜索（筛选）


当筛选条件之间存在明显的关系时，最好能够在操作上也体现出来。比如图六所示，从界面上明显的表现出了筛选条件及交互操作的层级关系。



图六 筛选条件间的层级关系


图四至图六的例子中，都是关于触发式的筛选条件，小结如下：


显示和隐藏筛选条件，如图四；
提供用户搜索每一列特定值的输入框，如图五；
根据用户操作，设计具有层级关系的筛选条件，如图六；
当然，这些方法也不是任何情况都通用的，还是得视情况而定。


排序
提供对数据的排序也是非常有效的。排序可以通过用户单击表头或者单击预设的排序链接，如图七所示：



图七 两种常见的排序设计


虽然上文讨论了那么多例子，但肯定不是全部。如果你有好的方案，请不吝告知 :)


延伸阅读
Faceted browsing


英文原文的评论也值得一看。

本文引用地址：http://www.junchenwu.com/cgi-bin/mt-tb.cgi/502.1259514133

简单表格的再设计

从 So the Necessary May Speak 一文延伸阅读，找到了包括 Luke W、Andrey Smagin、Deva Prasad 多人的再设计，转贴图如下：

设计小结：

• 如果用户是想一览所有的数据，那么 Luke 的设计较好，视线垂直移动且范围集中；
• 如果用户是想查看某个确定的值，那么 Deva Prasad 的设计较好，突出重点；
• 如果所有数据没有权重，那么增大字号或者改变颜色会增加干扰；

原则：根据具体情况，通过降低干扰和视线移动的距离来减少用户的视觉疲劳。

本文引用地址：http://www.junchenwu.com/cgi-bin/mt-tb.cgi/505.1464312593

插入图片的第3种方法

通常网页中插入图片有两个方法，一种是从本地选择文件上传，在页面上的典型表现方式就是地址框+浏览按钮；另外一种方式输入外部图片地址。如下图显示：



各位大虾一定发现上图其实还有第三种选择，即是我们所要讲的，利用Flickr的API功能所实现的另外一种插入图片方式。

在输入Flickr帐号名后，查找该用户在Flickr上传过的照片，注意这里只能显示出属性为Public的照片。查找过程需要一段时间，大概几秒钟，在此期间最好能显示一些信息反馈给用户。



最终显示的图片列表如下图所示，可翻页查找，点击自己中意的缩略图即可将图片插入原来页面的相应位置。



再做的人性化一点，可以记录用户在输入Flickr用户名，以后该用户执行操作时可以免去反复输入的麻烦，当然也要给用户更换用户名留有操作入口。

使用纸面原型进行可用性研究

这里区分了可用性研究（Usability Study）和可用性测试（Usability Test）。可用性研究由一系列的可用性测试组成。

一般进行的流程如下：
• 确定测试的目标——你想从中得到什么？
• 谁是用户？先定义他们然后才能开始招募
• 创建任务 • 制作完成任务所需的纸面原型（纸片之类）
• 内部预演 • 进行可用性测试，在每项测试结束时修正原型
• 为发现的问题设立优先级
• 计划界面上需额外增加的部分并跟踪，以保证可以解决
• 向非直接参与人汇报结果

值得注意的是，并不是在一开始就制作原型，而是先进行分析。

详细流程（表格 PDF 下载）

一、前期会议
谁：所有相关人员
• 讨论目标、风险及重点
• 确定测试参与者的条件
• 确定研究项目的核心团队
• 设立日程表

二、招募参与者
• 根据前期会议确定下的条件招募参与者，1-2 人或者更多（一般不会超过 4 人）

三、任务设计
谁：核心团队及测试的相关人员
• 设计可用性测试中的任务

四、制作原型及预演
谁：核心团队及相关人员
• 列出任务所需的界面元素
• 工作拆分、分配
• 定期进行内部预演（单元测试？）
• 正式的、整体的完成一遍预演

五、可用性测试及反复改进
谁：所有相关人员
• 进行可用性测试 • 每项测试结束后列出问题
• 在下项测试进行前修正原型

六、优先级调整及行动计划安排
谁：之前参与一项或多项测试的人；行动计划由开发经理或团队安排
• 给没有解决的问题分配优先级
• 讨论优先级高的问题和可行的解决方案
• 安排行动计划
• 追踪问题的进展

七、成果交流
谁：1-2 为团队成员（通常是可用性专家）
以下项目根据需要进行：
• 排名前十的问题的概要描述
• 在内部网络上公开研究成果
• 书写报告 • 主持成果汇报演讲
• 剪辑研究过程的视频
• 创建界面规范

以上参考自《Paper Prototyping》一书第五章，整个流程的表格可以在这里下载，注意这是 PDF 文件，直接打开有可能使你的浏览器崩溃。

本文引用图片作者 Maanloper on Flickr.com

关于可用性测试及纸面原型，推荐以下阅读和资源（有一些文档的模版）：
• Don't make the Demo look Done
• Coding Horror: Low-Fi Usability Testing
• STC Usability Toolkit
• Information&Design Usability Resource

本文引用地址：http://www.junchenwu.com/cgi-bin/mt-tb.cgi/494.1413113616

一条广告需要消费者看几次？

你一定有这样的经验：看过广告但不记得广告内容；或记得情节但不记得卖什么产品；或记得内容和产品类别，但不记得品牌，也或许都记得但引不起你的好感和兴趣。

首先可能是广告的创意与品类属性（如食品没有表现口感的特写）、品牌个性（如传统变成叛逆）或与视听对象的生活经验相关性太弱，因而没有看懂或被误解，这样不论你刊播几次，看不懂的还是看不懂，就是无效。（当然如果太离谱也会被讨论，如台湾迪斯麦口香糖曾推出一个广告，主题是“猫在钢琴上昏倒了”，结果很轰动，因为大家彼此在讨论，那个广告你看懂了吗？）

媒体频次的有效性是指对目标对象到达广告目的所需要的广告暴露频率。就像上一片文章提到购买媒体的广告资源，事实上即是购买一个广告被看到的机会（OTS），但受众很难在第一次就看到广告甚至马上行动。一般而言，这需要经过一个心理接受的渐进过程。

受众接触不同频次的广告，将引起不同的反应：
第1次广告出现，他没看到。
第2次，他看到但没注意看。
第3次，他看到也注意到了：“我来看看它在说什么，原来是**广告”。
第4次，“**广告看来是我需要的”。
第5次，“**正在促销我明天去买”。
第6次，“使用**后感觉像广告说得那么好，下次再买”，或“实用**后感觉不像广告说得那么好，下次不买了”。

其实广告要被目标对象看到、注意到乃至了解内容并不是件简单的事：

第一次到第三次广告的心理反应可以说是认知与理解的过程，优秀的广告创意可以缩短为一次见效，但前提是广告有准确的媒体安排，能让目标对象有机会接触广告信息；

接着要如第四次广告引起购买欲，则与其购物需求，购物循环（正巧处在耐久消费品的购买考虑阶段，或FMCG快速消费品的添补阶段）相关；

到第五次的采取购买行动，则与购物能力（如房子、车子等高单价产品）有关，但购买的完成还需要购物条件（供货的时间、地点、样式、价位、服务等）的配合，交易才成完成，如顺利完成交易，购买者再看到同一广告，由于有使用经验，所以可能有“满意，下次再买或推荐他人买“及”感觉没广告说得那么好，下次不买也不建议朋友买“。此时口碑好坏的传播力度最具说服力，因为传播对象都是亲身体验周边的关系人！

当然上述的广告被看到的次数与消费心理的变化只是假设，不是定数，因为所谓广告刊播几次才有效，一部分取决于广告表现的优劣，有效地广告表现可大大提高传播的效率，缩短上述刊播的次数而达到一样的效果或一样的频次，但更深入人心；另一部分取决于影响要素的重要性与平均有效频次水平相乘的结果，其中主要分析消费者的接触媒体比重与产品的市场状况，在媒体公司是需要细致的分析过程（如图表）。



但以下是一些可以参考的原则，在这些市场情况下，频次可以降低：

消费者在该媒体接触时间长；产品生命周期越处于成熟；市场占有率高；品牌知名度高；品类参与度高：即改品类需消费者较多的投入，而较高的关注自然不需高的频次，即已吸引眼球；品牌忠诚度高，提醒即可；购买周期长，如房车，电器等耐久产品，需细水长流的广告；竞争小，干扰少；目标对象学习能力快，看几次就能理解；购买欲望强烈，关注度高；感性购买而非需要理性说服；品牌产品线，而非单一产品。

广告但求有效，而除了广告表现信息的准确、吸引人外，媒体刊播的有效性也是同样重要。无效的广告不仅没被人看到或注意到，甚至变成似懂非懂，对品牌的理解也是张冠李戴，指鹿为马。
电火球