Tag Archives: Ux

IXDC2016-前瞻活动-有效的交互设计创新

ixdc_2016

4月的一个周六下午,参加了这个设计活动
接到命题的时候,我在湾区休假。讲说的内容也是在此期间断断续续写成的。
对待“创新”,心情非常复杂。开始我用了一个更为激进的阐述方式,后来决定改的柔和。

这个课程其实是准备作为今年团队内部的一个课程。
是关于HCI中用户认知结合交互设计项目管理的内容方向。

你会发现,“创新”这个词,特别是设计师、从事设计工作的人,很喜欢挂在嘴边的口头禅。
创新是什么?工作中,我们会有好多理解。
作为面向消费市场的设计师,我对创新的理解是十分务实的。
这个定义我认为是对的——创新是契合、发掘用户需求,创造性解决问题的方法。
那很关键的一点是,创新不是目的,是手段、是方法。

创新是设计师最喜欢提的概念。
这是不同于工程师。工程设计采用计算、类比法,工作的性质主要是改进、完善而非创新;设计通常意义上,非常讲究原创和独创性,需要丰富的想象、创新能力和前瞻性,而不是严谨、繁琐的逻辑。
我们需要通过创新来体现设计价值,但天然的,创新的结果很难测量。

但这里就有引申出一个误区,因为创新很重要,会有出现为了创新的设计的情况。
而面向市场的项目,为了创新而设计,容易产生过度设计(over-design),是做不到有效的、无益的。
过度设计这个概念,是我刚工作时候,便被反复提醒的事情。

有一些过往很有代表性的例子。
Clear有丰富的手势,完成一个todo,删除一个todo,创建一个todo都是使用各种手势完成。
某个浏览器的手势自定义,大量的手势,甚至还原一个tab需要画一个U型。
某个浏览器,你会发现菜单项,是大量没有文字说明的图形标识。
这几个产品是把设计技术进行了过度使用,手势触发行为的过度使用、图形符号的过度使用。

通常造成这样的直接原因,主要有三个。缺乏专业理论支持、缺乏体验商业价值、缺乏落地可实现性(典型的dribbble们)。
如何避免这些误区,做有效的交互设计创新。在我的理解中,最需要有意识的做过程管理。这又会细分为4个方向。

  • 聚焦改变用户行为的设计。
  • 匹配项目商业诉求。
  • 控制实现成本。
  • 测量创新结果。

因为我们的主题是做交互设计创新,所以接下来看下如何做来改变用户行为的设计。
第一点,其实有个小问题——为什么是关心改变用户行为的设计?
背后一个在工作中反复界定的问题,就是交互设计与视觉设计的区别。
有一个基本原则是,一同对设计体验负责,但交互设计解决行为,视觉设计解决感受。
如果是视觉设计,这里就可以换个词,比如情感化设计。

这里我主要会来引申一个TTM模型,这是美国心理学教授普罗察斯卡(prochaska)提出的,它整合了若干个行为干预模型的基本原则和方法,故又称为行为分阶段转变交叉理论模型。
这个模型的核心观点是,人的行为变化不是一次性的事件,而是一个渐进的和连续的过程。

  • 前意向阶段,人们有了改变行为的意向,处于这个阶段人对结果是不可知、死心。混沌状态。
  • 意向阶段,打算改变、意识到改变成本,但没有实际行动,非常矛盾。典型的拖延症喔- -。
  • 准备阶段,付诸了一些行动步骤。制定计划。
  • 行动阶段,做出了行为改变。但这与最后的行为改变终止不一样termination。
  • 复发阶段,因为各方面的问题,回到了之前的某个阶段。
  • 维持阶段,保持行为并形成习惯。完成行为转变。

我们可以通过刚刚手势自定义的案例来理解这个模型。
这个交互设计的创新初衷是,会带来便利,显然相对于做键盘输入,一个手势的步长很短。
那我们看下,最后这类设计没有普遍使用,究竟出了什么问题。以『Restore Tab』为例。
作为个体用户的你可以反思一下是哪些步骤什么阻止了你使用这些手势。

  • 前意向阶段,我看到这个界面之前,并不知道还可以这样Restore Tab。
  • 意向阶段,因为完成Restore Tab只有一步,也愿意尝试。
  • 准备阶段,准备使用,于是会进行准备记下来,U代表Restore Tab。
  • 行动阶段,我会从设置回去,尝试使用。
  • 复发阶段,误操作的成本回到意向阶段,忘了是U回到了准备阶段。
  • 维持阶段,难以进入维持阶段。

那我们稍微延伸,为什么手势的行为改变容易复发阶段。
这里有一个比较广泛的手势可用性定性测试,显示:
基于首要任务的精准复杂任务,人们愿意使用简单、原始的手势。
比近距离基于手指的手势,人们更愿意使用肢体、基于手的手势。(83%)
Finger-based gesture手势设计还有一些特性,类比桌面与手机的手势行为,你会使用手指点击,替代鼠标点击。手指滑动,替代鼠标滚轮。手指拖拽,替代鼠标拖拽。这些行为模型对于你已经建立了很久,本质上也只是一种隐喻。
总而言之,在手机中尝试创建新的手势越来越难。

也可以看到一些成功的手势教育的case。Twitter的下拉刷新。
在我们的产品百度浏览器里,也有类似的创新设计。
需求:大屏幕的点击关闭按钮,精准点击成本高。
解决:选择手势,能够提供更好的便利性。
历程:开始将双指滑动手势,作用于全局的新建、关闭、切换行为。收敛为主功能视图中主要任务的补充关闭行为。始终提供教育(For新用户)。
通过用户行为数据跟踪,与用户访谈,很容易形成用户行为习惯。明确这个目前就是一种有效的创新设计。
创新真的不是一蹴而就,改变用户行为,是渐进与连续的过程。

行为改变在每个阶段,也都有一些特有的方法。
我结合例子来讲3个方法的使用。这个是百度浏览器的K12主题项目。
业务诉求:引导页·提升主题的使用量。
问题:因为内容产量不满足,用户会在没有可用主题的情况下自然跳过。
我们希望改变用户行为,减少内容不满足引起的流失。

这里有一个模型演变对应用户行为改变的过程。
这就是一个引导页,包含已有的主题,以及一个跳过按钮。我们不希望他跳过,用户的跳过的潜台词也是这儿没我需要的主题。
那我们如何改变这个行为,先来分析下这个行为过程。

  • 前意向阶段:可以不跳过,告知可以解决问题。
  • 意向阶段,用户的问题是获取麻烦?使用称为“痛苦减轻”的方法,只要点击那个按钮就可以了!因为完成一件事情只有一步,也愿意尝试。
  • 准备阶段:用户将准备进行点击。用户的问题是点击定位成本高?使用称为“自我决意”的方法,许诺参与互动就会获得想要的主题。
  • 行动阶段:大量的铺垫后,点击一下!
  • 复发阶段:再进来好像也没有变化?使用称为“权变处理”的方法,建立契约,这个也是关联了一个许愿单功能。许愿的主题将被实现!
  • 维持阶段:愿意进来并参与许愿单,改变用户的跳过行为,形成习惯!

最后给留个大家一个小故事,这是我前几天去湾区的飞机上,发生的事情。
Adams是那架飞机的执飞机长,这是他退休前最后一次执飞。在他三万多的飞行历史中,从未折弯过一块金属部件,也未曾使一位乘客受伤,更没有收到过一张飞行罚单。在他四十六年上千万英里的飞行里程中,规避过上千次雷暴,挫败了发动机故障、爆胎、电子设备失效等事故,也因此没有出现在6点的突发报道中。共计运送50万人次的乘客安全达到目的地。他以坚韧和细心保持安全可靠的飞行记录。
其实,蛮荣幸能够经历这样一件事情。也希望自己能够以专业精神,做对人们有益的设计。与大家共勉。

讲说文件如下↓
IXDC2016_北京前瞻_有效的交互设计创新_之改变用户行为的设计_董腾飞_0409_2.pdf

Download the PDF file .

IXDC官方新闻稿《腾讯、百度、滴滴资深设计师为你解读移动产品的交互设计创新》
IXDC官方新闻稿《有效的交互设计创新之改变用户行为的设计—大会前瞻论坛北京站精彩回顾》

[译文]为儿童设计网页(Design Web Interfaces For Kids)

译者:MUX翻译小组(雷昊 小气的神)

孩子们会花大量时间上网,但是认知和生理局限会在他们上网的时候给他们带来很多挑战。再加上粗糙设计的内容和暗模式,真是糟糕。作为网页设计师,我们有责任创造出帮助儿童提高能力的事物,让他们变得更聪明,而不是相反方面。

这篇文章将会给你一些观点,关于从心理学角度分析孩子们喜欢什么,以及这些是如何影响他们使用网页的。我们还会讲到一些实用的设计指南,来为儿童设计更好的网页。

范式转移

1989年3月12日,第一个互联网浏览器Mosaic诞生了,实质上这标志着我们所知道的互联网的诞生。这一天之所以如此重要,是因为这种“普通人”互联网的诞生代表着一种范式的终结和另一种范式的开始。没有互联网作为信息和娱乐的主要来源,在这种环境中成长,我们与如今的孩子相比是处在完全不同的另一种范式。

  • 前互联网范式

我们生活在一个没有互联网的模拟计算机范式时代。回到高中时期(1995年至1998年)我清晰的记得我在学校和公共图书馆寻找我能用在学习中的好书。

5641c3309b97c.jpg

回到模拟范式,我们非常依赖书籍作为信息来源。(图片来源:Les Chatfield)

我们在某个动作发生时对时间的控制,构建了我们的心智模型,就像从书桌走到书柜一样。我们可以选择走得快些或走得慢些。归根结底,我们可以控制时间。这也可以解释为什么我们中的很多人会在网站内容加载很慢时如此的不耐烦。我们的大脑记得事情在掌控中的样子,因而不喜欢在网站中那种无法控制的感觉。

  • 互联网范式

对于生来就使用互联网作为主要信息来源的这一代人,他们在认知时间控制概念的时候拥有不同的心智模型。他们知道一个网站会尽可能快的加载,但无法再进一步人为干预它。他们知道一个动作发生时长的不可控。

对此我做了一些课题,观察孩子们使用电脑。如果加载的慢了,大部分孩子会同时做一些别的事情—如果周围有电视他们会看电视,或者在社交场合下和他们旁边的孩子交谈。

前不久,我帮助我七岁的孩子在他的电脑上安装谷歌地球。它下载了很久,我记得由于不能忍受它如此之慢而离开了房间。而他只是打开了电视开始看卡通片,然后当下载完成时叫我回来。

“数字土著(Digital Native)”不存在

我不相信有“数字土著”。当然,孩子的成长伴随着iPad、智能手机和电脑,但那不意味着他们自然而然变成了使用数码产品的专家。事实上恰恰相反。

一个iPad(或者其他平板电脑)是一个封闭局限的环境,孩子们不会制造太多危害(除了买很多蓝精灵果和删除照片),同样这也没有教会他们任何关于技术如何运作、计算机如何运行和如何运用技术创造新事物的本领。

5641c34a091e7.jpg

(图片来源:Brad Flickinger)

用着iPad长大并没有使孩子能够使用和理解计算机,或者互联网。

尽管怀疑“数字土著”,但我认为事实上孩子们生活在一个不同的范式下,对他们与网页的交互方式和对网页的认知方式上有很大的影响。从小在一个触屏的环境中玩耍,会很大程度上影响到他们的心智模型。(我们回到这一点上。)

另外,他们是小孩。他们没有像大人一样充分开发大脑和身体技能。所以,当我们为他们设计的时候我们需要换个角度思考。

Read More …

大屏手机时代,如何重塑界面交互

157-980

12.30.2014 约稿于百度MUX新官网上线

这是一个大屏手机的时代。
强调这件事情的意义在于,这已经成为事实。

Medium上存在一份个人统计。
在过去7年,新上市的手机屏幕尺寸越来越大。

157-001

以4.5英寸为分界点,我们更清晰的看到这一变化。过去的两年,4.5英寸的比例从10%升至80%。

157-2

在国内的过去3个季度,使用FHD HD分辨率的手机从38%的份额增至50%。

157-3

【图】《百度移动分发报告2014H1》

更大尺寸的屏幕可以承载更多的内容展现,更适合游戏、阅读与播放视频,体验得以提升。

157-004

【图】《百度移动趋势报告2014Q2》

然而屏幕尺寸的上升并没有引起用户操作上的过多不适,有51%的用户已经适应双手操作。

157-5

【图】《How Do Users Really Hold Mobile Devices》by Steven Hoober

即使用户单手操作,在操作大屏幕时的相对盲区(深色区域),需要更多的响应时间,也可以被接受。

157-6

【图】《Mobile UI ergonomics: How hard is it really to tap different areas of your phone interface?》By Mikkel Bo

即便如此。3.5英寸~4英寸,依然是平衡单手操作与体验的合理尺寸范围。

157-007

这样就产生一个矛盾:用户拥有更大屏幕的尺寸,但从人机交互的角度,并不完美。

面对这一现状,从APP产品界面设计的角度,需要做出改变。

大屏幕拥有典型的可用性问题:纵向单手操作机身,边角、顶部、左右侧边难以触达,放置在以上盲区的点击入口,将导致体验路径中断。

交互设计角度的最佳实践:

1.设计安全区域,避开操作盲区。

示例,百度搜索结果页,根据视线规律,典型的左上角操作盲区可以用于logo展现。

157-8

2.注意使用场景路径触发的连贯性。

示例,在百度手机助手Android中下载百度浏览器,操作区域集中在安全区域。

157-009

3.更多的使用可拖动的浮动按钮,给用户更自由的操作可能性。

示例,百度浏览器Android中翻页/返回顶部的组合按钮。

157-010

4.更多的使用手势,并提供暗示。

示例,百度浏览器Android的删除窗口操作。

157-011

5.更多的使用语音作为输入方式。

示例:生活手记中使用语音替代键盘输入。

157-012

6. 横屏Pad化的操作设计,以及更多的内容展现。

示例,百度浏览器iPhone的横屏设计,如同网页的Responsive Layout概念。

157-013

在界面交互的层面之外,在不远的时间,硬件存在更多的优化可能性。

1.更窄的边框,更大的显示比例。

157-014

2.柔性材质。

157-015

3.“手机”成为服务的触发者,屏幕投射与隔空操作。

157-016

《The World as a Display》

之所以将讨论的范围扩展到硬件,是希望设计师在针对具体屏幕设计的同时,能够从另外的视角,思考人机交互的变化与可能性,激发创造力。

当前是大屏手机的时代,推动你的手机APP产品跟进吧!

一些有价值的相关基础研究链接

  1. 百度移动分发报告2014H1
  2. 百度移动互联网发展趋势报告2014Q2
  3. The Rise of the Phablet: Designing for Larger Phones
  4. Common Misconceptions About Touch
  5. How to design for thumbs in the era of huge screens
  6. Designing for Large Screen Smartphones
  7. Mobile UI ergonomics: How hard is it really to tap different areas of your phone interface?
  8. Insights on Switching, Centering, and Gestures for Touchscreens
  9. A comprehensive look at smartphone screen size statistics and trends

「milk香港版」交互设计漫谈(1)——Splash screen

当产品相对稳定与可控,小神有愿望快速记录这个项目。

内容涉及小神参与产品设计与执行的过程,由交互/视觉设计层面的需求分析、功能设计与设计执行组成。

与其带入一些工作中的设计技巧,小神更愿意分享其中的设计思想与理念憧憬。

设计之所以不同于美化,是因为前者被赋予了驱动的灵魂。

背景

milk香港版,内部命名”milk mobile”。是香港潮流杂志《milk》在移动新领域的合作尝试。目标设备为主流的中高端便携移动设备,iPhone/iPod touch/Android Phone/WP7…目前iOS版本如期发布,您可以从这里获得最新的版本。其它平台蓄势待发…

在发布后两周中,milk香港版荣得Apple app store的”新品推荐”与”热门推荐”,Lifestyle排位第二。

小神在过去的三个月,从零开始着手milk香港版的设计执行。

设计的生命周期

在展开一项工作时,我们都希望对它在整体上有所控制。

一个相对清晰的timeline使得设计在时间与质量之间平衡,并在恰当的里程碑有所产出,跟随整个项目进展。

milk mobile的设计定义

milk mobile的品牌与内容定位,决定这即是一面向城市快速消费的精神食粮。

它具备几个特质——高时效性、眼球经济、缺乏耐心的。

继而在视觉与操作着力营造如此的氛围:

  • 信息传递的高度流畅。
  • 信息呈现的节奏感。
  • 轻松的操作浏览环境。

探索从Splash screen开始

Splash是用户进入App,直到程序完全可用前,显示的第一个视图。

Splash Screen概念存在的价值

  • 品牌识别(权重30%)
  • 当用户通过桌面icon进入milk香港版,会再此传达具有品牌象征的手写milk英文字符。与milk其它产品形象统一,用户得以加深认同感与归属感。

  • 必要的数据加载与反馈过程(权重70%)
  • 对于milk香港版而言,splash screen的存在更多承载的是功能层面的需求。
    对网络与cache的不同状态产生的scenarios进行处理,并提供良好的反馈。

在iOS Human Interface Guidelines,对Splash的概念有较为详细的阐述,你可以点击这里查看。但并不赞同对Splash Screen的一个定义——Launch Images。

我们所感知到的信息是流动的,图像与其承载的信息也应该在表现上流动,贴近感知。

流动的图像表现上更贴近于animation,iOS从文字示意上误导设计人员并限制了它的可能性。

Launch/Splash是一个无限延展的屏幕空间,不仅是”图像”。

作为跨平台设计,Android对Splash screen的理解,更注重实用性。

If your application has a time-consuming initial setup phase, consider showing a splash screen or rendering the main view as quickly as possible and filling in the information asynchronously. In either case, you should indicate somehow that progress is being made, lest the user perceive that the application is frozen.

Windows Phone 7注重信息传递的效率。绝对效率是应该被真正推崇的,当你不能提供更好的理由使其存在。

Don’t use splash screens for branding. Avoid using splash screens because they may cause users to associate your program with poor performance. Use them only to give feedback and reduce the perception of time for programs that have unusually long load times.

Don’t use animated splash screens. Users often assume that the animated splash screen is the reason for a long load time. Too often, that assumption is correct.

通常,我们尊重平台的design guidelines,它使得你的app与OS融为一体。

milk香港版Splash screen wireframes

基于以上的定义,沉淀设计。文档的细则,受限于NDA将不被分享。但你可以在测试app的过程中,看到不同scenarios下的表现。

  • 当无网络无cache状态。
  • milk香港版不可用,没有数据的App是丑陋的。用户更需要的是一个友好的帮助界面,提供状态反馈与解决方案,在易识别的区域提供异常网络状态与”重试”入口。

  • 当有网络无cache状态。
  • 客户端从服务器端取得少量的必要数据,继而无缝过渡。

  • 当无/有网络有cache状态。
  • 客户端优先读取cache,弱化用户不需要参与的载入状态信息,并无缝过渡。

受益于尺寸变形动画,milk logo的使用场景由Splash自然转化到app页面。于此同时,渐隐Splash背景与隐藏提示信息。由此结束整个Splash screen。

milk香港版Splash screen的视觉设计与交付

Splash的视觉风格统一于app完整的视觉设计。

黑白为色调,赋予皮革材质,以幽暗的顶部光线渗透全部的元素。致力于简洁但不失细节的表现。(视觉设计将单独成文)

使得用户将视觉重心停留在表现丰富的资讯信息。

针对iPhone的屏幕与app的默认展示方式,需要320×480以及为retina屏幕的640×960两种尺寸的设计(单位px)。

Android有着更广的屏幕设计需求,但从实际的开发实践,我们只保持了480×800的设计资源。这被验证为是体积与质量的最佳妥协方案。

接下来的是其中的一则redlines图像,此类的设计资源为团队的开发人员提供参考,使得整体项目运转顺利。

当时间充裕,执行Flash实现的高仿真模型,更高效的推动沟通,并为开发人员提供参考。

Review设计是一个自我提高的过程,并希望对读到该文的同学有所帮助。

移动界面设计点滴(3)——工欲善其事,必先利其器

经常有朋友问起,用什么工具做移动端的交互设计?
这是通常在接触交互设计都会碰到的问题,分享几点应用的经验。

Fireworks

从N年前做web开始就一直用Fireworks,这是一个非常高效的屏幕图像处理软件。
提供了基本的图形、钢笔工具,并可以快速的完成颜色的定制设置,布局便捷。
Fireworks是最佳的整合平台。
忘记全能的PS吧,这里你不需要瑞士军刀。

PowerPoint

对的,就是幻灯片演示。永远不要忽略工具的潜力。
PowerPoint 提供了大量的预设工具与样式,以满足基本场景的绘制,并创建不受工具限制的演示修改环境(当然PowerPoint是必备的^^)。
同样这是最优体积的解决方案。
忘记臃肿的位图工具吧,这里只有KB级别的wireframe。

Axure RP

这是真正称为专业意义上的交互设计工具。复杂到抓狂,当然我们并不是需要搞懂所有的功能。
RP即是Rapid Prototyping,快速原型。
充分利用它的自带组件,整合到Fireworks与PowerPoint里去吧。

MindManager

记住它的名字,管理好的你思维,我们不能遗忘任何一个Scenario。
在工作中保持一个窗口。
它距产品的mockup最远,却离精髓最近。

Balsamiq Mockups

值得一试的IPhone原型工具,你会发现原型的表现也可以有趣。
但只用它去做一些不正式的show吧。
它的模型不够精确、过于随意,也不对中文提供支持(或许善用工具的你会导出到Fireworks中二次处理)。

铅笔与记事本

真正热爱你的所从事的工作。
快速的记录想法随时随地,电子产品总有盲区。
拿一只顺手的铅笔,利其器,善其事。


最后最重要的一点——它们只是工具,核心在于独立精神驱动下的你。

移动界面设计点滴(2)——Flow大局观

Mobile UI design tips—— the overall view of flow

在移动设计中,我们需要完善的功能flow,对它认知的价值使得flow在整个设计开发过程中始终走在前面。完善的flow不仅令功能产品更加易用,带来良好的用户体验,与此同时,也有助于提升开发效率,不到位的flow将带来设计与开发的反复,使团队蒙受损失。

良好的移动产品flow标准有三

  • end to end
  • 清晰
  • 整合

所谓end to end是指功能根据需求设计需要符合所在平台的特性,完整的考虑到用户如何在任何场景下使用操作及完成任务,提供因为有效或无效操作而带来的反馈帮助信息。

清晰是指整个设计中不会造成用户的疑惑,符合平台特性易于理解的设计。通常但凡清晰的功能,即使需要付出更多次的操作,value还是高于稍显混乱的设计,虽然后者简化了用户的操作。

整合
,在前一篇《移动界面设计点滴(1)——减少空间占用》的一文有所涉及,受限于移动产品的诸多条件,合理的归纳使得产品使用更为流畅。这与清晰并不矛盾,重在调和。

下面以前些时间已经release的一个功能模块作为示例,展示如何设计一个良好的flow。

案例简析

功能目标:通过列表快速定位城市。

该功能从属于Map视图,图标以形象的道路指向标示。
在mockup中的功能主UI,显示支持的国家;
点击任意国家进入以首字母排列的城市列表;
点击任意城市,自动切入到Map视图并转向相应的可视地区。

主UI左上角提供Back键,预留回退。

在此,有两种设计思路。另一则是使用IPhone自带的Pickers控件,将国家列表横向置于上方,城市列表纵向置于UI下方。
它的优势在于可以在一屏中解决所有的问题。
但为了更好的使用Pickers,你需要加入更多的诸如Supported City等提示信息以区分两个Pickers,以及顶部的Done Cancel按钮,以完善flow。
这使得用户需要更多的时间来熟悉操作,这不是我们想要看到的。

站在用户的高度,你将更理解设计。

移动界面设计点滴(1)——减少空间占用

Mobile UI design tips——how to reduce needless space

与面向桌面电脑的网页设计不同,移动平台的设计中,屏幕空间是一个不可忽视的限制因素.设计需要符合移动平台用户的使用习惯,以最佳的状态呈现屏幕信息.

接下来以当前正在工作的UI做为sample,实战空间优化.

改进原则

  • 去除不必要的提示信息
  • 合理减少界面中的文字信息,图形化界面直观的使用户可以完成操作任务.

  • 控制字号,使用高亮/对比方式突出类似条目信息
  • 有需要充分利用单屏的空间,在不影响文字显示底线,采用多途径的设计方式描述内容.

  • 合理布局功能控件
  • 减少显示中的控件使用, 学会聪明的隐藏低优先级的功能, 对于用户熟悉操作与产品开发都将是有益的.
    如在Iphone平台善用标准化的action sheet, 在Android中的collapsed menu.

限制因素

  • 平台操作习惯
  • 遵循不同平台的设计准则(你可以从官方的UI开发指南获取这些帮助教程), 避免将错误的理念带给特定的平台. 如你不会在Iphone的设计中使用Android/Symbian的Options. 熟悉这些原则不仅会使产品易用, 善用组合的设计也将提升操作体验.

  • 屏幕物理属性
  • 不同尺寸的屏幕不同的UI. 要考虑的产品在所有目标用户的不同屏幕的显示效果. 如果要做一个通版的UI设计, 需要重点考虑带来的负面影响.触摸屏是另外一个需要考虑的情况,滑动使得翻页变的容易,可点击的元素尺寸是否有必要增大以适应大的手指…要知道, mutli-touch 目前只是apple的专利.

我们需要为特定的这个页面做些什么

这个是一个Android平台的程序.
这是优惠券列表页面,优惠券是我们最重要的显示内容, 用户需要在单屏中预览更多的优惠券信息.商店信息次之.tab导航将被保持以保证用户不会迷路.

  • 移除标题.
  • 默认收起商店信息,点击可弹下显示.
  • 为保证用户对商店信息的初步了解与注意,加入商店名称.

接下来我们将得到下面的界面.

UI不只是皮肤, 请用心使界面更加好用.
Enjoy your design~

Silverlight安装体验优化(1)

Campaign Management基于Silverlight程序。我们要求merchant的电脑需装有Silverlight插件,提醒merchant为什么要安装Silverlight,并表明我们信赖Silverlight,且能移除安装及使用Silverlight的阻碍。

第一次浏览时会出现的两种情况

1. 安装体验(Installation Experience)——当merchant未安装Silverlight插件浏览时,将会看到的安装提示界面。
2. 预定体验(Default Experience)——当merchant已经安装Silverlight插件浏览时,将会看到的loading界面。

设计目标

1.传达该页面的价值,只要安装Silverlight就能够获得。
2.提供明确的要求,请merchant安装Silverlight。
3.消除阻碍merchant完成安装的疑虑。
4.个性化安装提示界面,符合商业需求。
5.优化程序loading速度,并充分利用loading的时间,提供随机tips帮助merchant使用Campaign Management。
6.防止误关闭以及加入其它帮助信息。

原型设计

参考文档 MSDN

404页面优化体验

名词解释:404页面是当客户端使用HTTP浏览网页时,服务器需要针对不同的“要求”提供不同的“回应”,譬如浏览器发出HTML文件(网页)的要求,并带有数字回应码和MIME的讯息。代码404的第一个“4”代表客户端的错误,如错误的网页位址;后两的数字码则代表着特定的错误讯息。HTTP的三字符代码跟早期通讯协定FTP和NNTP的代码相当类似。

从HTTP的层面来看,404讯息码之后通常会有一个可读的讯息“Not Found”,许多网络服务器的默认页面也都有“404”代码跟“Not Found”的词汇。

404错误讯息通常是在目标页面被更动或移除之后显现的页面。(引自wikipedia

为什么需要个性化的404页面

首先看一个关于404的公开投票调查。

问题:

当你遇到一个404页面你会怎样做?

A.点击后退按钮同时忘记404页面
B.尝试回到主页并重新定位丢失的页面
C.写信给网站管理员
D.非常沮丧

404 survey results

如果你不在意访客的抱怨,你会发现许多访客在遇到404页面时不会努力寻找丢失的页面而离开站点。然而你可以简单地通过个性化定制404错误页面将这些访客留在你的站点。

如何实现一个良好的404页面

改变服务器默认错误页面就可以达到效果。下面是一些可以使得访客轻松实现正常访问的建议。

遵循的理念:

提供简明的问题描述,消除访客的挫败感。

提供合理的解决方案,辅助访客完成访问目标。

提供个性化的友好界面,提升访问体验。

实现方式(按照从简单到复杂的顺序排列):

使得访客转到某个地方而不是后退。

页面包含该站点重要部分的链接,如主页或站点地图。不要仅仅告诉他们检查拼写。使用文本的链接替代图片,因为有许多访客不会想到点击这个图片。
例子:我们的站点有一个主页的返回链接。这是实现友好反馈的最低限度。

此外,我们还会考虑,在有效的帮助信息不足的情况下,如何通过访客的反馈弥补错误。
需要包括一个指向网站管理员的email链接,或者一个用于提交丢失链接的表格。
相对于发送email,访客更喜欢使用提交表格。

加入一个搜索框用于搜索站点。
例:MSN在所有页面的底部都有一个搜索框,同时也链向站点的重要部分。

在站点中列出接近于访客期望页面的链接,用于推测访客正在寻找的页面。

你不需要采纳上述所有的建议,但是这些建议一致服务于使得访客更愿意停留在你的站点的目的。
合理的404错误页面至此即可以完成了,这将给访客提供许多有价值的信息。

使用重定向

如果你经常检查访客统计,可能会看到某一个页面一直在显示404页面(如:因拼写错误而链接到站点不存在的页面),你可以创建一个重定向页面反馈给访客一个正确的页面。这个方法适用于访客多次访问并返回错误的页面。

重定向与404页面的可以整合使用,你可以使用类似下述内容的说明信息:

  1. 对不起,该页面未找到。几秒钟后,该页面会被重定向到主页。

给访客5秒钟时间阅读该信息,之后跳转。

不论你怎么做,小心使用重定向。最糟糕的情况是你重定向到一个不存在或不相关的页面。

使用的方式很简单,下面是一个例子。

  1. <html>
  2. <head>
  3. <meta http-equiv="refresh" content="5; url=not404.htm">
  4. </head>
  5. </html>

content后面的数字是秒数,你可以设定重定向执行前的等待时间。

个性化404页面示例

http://www.galiacho.es/404
http://www.palmflying.com/404
http://www.martinkorner.co.uk/404df
http://www.porcupine.gr/404
http://bluevertigo.com.ar/404
http://lumino.us/404
http://www.pen-and-paper.de/404.php

《What Is Web Design》——设计原则

最近重读《What Is Web Design》。分享一下精彩片段的节录。

“设计特色需求的客户”是设计过程的核心概念,也是设计不同于艺术的本质所在。

设计的目标就是带来“成功且令人满意的体验”,设计师劳拉里·埃尔本(Lauralee Alben)提出的程式:成功就是使用户能够高效地完成任务,令人满意是指这一过程是愉快的,而不仅仅是满足功能性要求,这种愉快可以表现为美好的、诗意的或趣味的。

设计师如要成为客户目标最高效的支持者,他们需要熟悉或逐渐了解客户所从事的领域。尤其是其中与该设计项目有关的领域。
一个对客户了解全面的设计师可以对客户的一些原有假设以及基于这些假设而作出的战略计划提出质疑。

了解项目本身的特点。首先明确是什么才能使项目成功以及它将被怎样平衡,要辨别项目投资者、推动者、最终决策者以及这些因素之间的相互关系。这三部分人所关注的问题都应在设计师的考虑范围之内,并且设计师需要在不同程度上使他们认同或承认最终设计方案的价值。清楚该项目的所有限制和约束。

了解最终用户使用产品所能满足需求的方式以及他们使用的环境。

对目前及将来社会发展趋势有全面的认识,并且对客户企业文化及相关民族文化的世界文化有相当的认识。

对相关技术及其发展方向牢固掌握,技术也是设计方案的限制因素。但设计不为技术所驱动。

今天看来使用的设计方案未必适合明天。

简明与清晰是两条重要的原则。“事情应当处理得越简单越好——但不能更简单。”——阿尔伯特·爱因斯坦

对某个问题中单个元素的解决方案不应被孤立地考虑。应该做出一个完整统一的解决方案。

明确的设计程序将带来一种集体意识,保证高效率的合作以及设计方法的顺利推进,并帮助客户及设计工作人员更好地理解这个项目,并因此提供更高效的支持。
高效的沟通与前者同样重要。高效沟通建立的基础,是对设计过程、对产品开发中涉及的所有角色、对过程中投资者的利益等清楚准确的理解。要达到高效沟通,必须避免使用行业暗语和模糊表达。

反复设计与测试。可以由某些设计专业人员或熟悉该产品应用领域的人员以及典型用户代表进行操作。
在反复进行评估过程中,设计师可以对该项目及最终成功的反思和斟酌中受益。这些思考不是为了责备和批评,而是为了让设计师和其他所有项目相关人员认识到怎样才能做得更好。

设计总是在客户和对象用户等带来的动力驱动下活动。设计的最终角色是客户与对象用户之间的媒介。所以应当避免专家主义与道德主义。