标签 ‘交互设计’

  • 交互设计-避免迷路

    任何位置都能明确“我在哪里?这里有什么?从这里能去哪里?”

    小时候,童话故事都告诉我们,迷路可不是一件好事。那会伴随着困惑、沮丧、愤怒和恐惧。为了避免迷失方向,我们发明了各种导航工具,大到卫星定位系统,小到指南针,人类在这一事情上,极具创意。

    在网站上迷失方向,虽然不是什么生死攸关的事,但会带来许多负面影响,如:用户体验下降、任务不能完成,用户流失等。我们可以通过良好的导航系统来避免这个情况发生。好的导航系统可以帮助人们找到在网站中的位置,并帮助他们制定更好的查询策略,增进对内容的理解。

    在制定解决方案前,先了解他们为什么会迷路:

    1、 当人们不能理解信息时,会产生迷惑

    2、 人们在查询过程中迷失,不知道下一步该做什么

    3、 人们可能会在网站中失去方向感,无法回到以前的页面,甚至是首页


    图1

    比如在图1的这个网站中游走,你容易陷入进退两难的境地。上图中,两个点击打开的页面,都没有导航信息,甚至没有任何离开当前页面的出口。

    4、 人们在在信息系统中偏离了方向,分散了注意力。人们因众多的、喧宾夺主的信息而偏离了主要任务。关于这一点,可以参考交互指南之《突出重点,一目了然》

    2010.01.23 / no responses / 分类: 交互设计, 用户体验设计(UED)

  • 交互设计–标签明晰、有效

    导航标签其实就是一种文字表达形式,我们用标签来代表网站上的各种分类信息。比如“联系我们”这个标签,代表的内容通常会包括公司名称、电话、地址、邮箱等信息。它可以是文字,也可以是图片。在英文里被称作“Label”,并不同于我们常说的“tag”标签云图。

    说简单一点,我们就是要为网站的信息做分类,并为它们起一个通俗易懂的名字。这其实是任何人都可以做的一件事情,所以在导航设计流程中,它的重要性也常常被忽略。在设计产品时,常会听到这样的话:“这个栏目该叫什么名字?恩。。。先别管吧,把更重要的工作做了再说。”

    然而,站在用户的角度,导航标签代表的是整个网站的内容、产品的结构,他们必须依靠标签的内容和组织方式来寻找网站中的信息。

    标签是访客行为的触发词,好的标签能吸引访客注意力,引导他们准确地找到信息。导航标签是访客预测目标页内容的重要依据,紧跟着它的就是导航中的关键点,网页的过渡,所以尤为重要,有歧义的标签逼人猜测它的意图,甚至让用户走错路或迷失方向。

    比如这个网站的标签:

    这个网站的导航标签比较极端,首先标签之间的互斥性差,“淘宝潮流榜”、“爱物秀场”、“败家俱乐部”等,含义和实际内容都非常接近;其次是一致性差,标签的粒度不同、长度不同、语气不同,甚至还有英文出现,可谓五花八门;最糟糕的是,在标签的选择上,用了很多自作聪明的词语,如“爱骚谈资”,用户很难预测到链接背后是什么内容。

    设计标签的过程,实际上就是对信息分类的过程,我们应当坚持MECE原则,也就是彼此独立、完全穷尽(Mutally Exclusive,Collectively Exhaustive)。这是一种客观的角度。你也可以站在主观的角度进行分类,但必须做到标准清晰、在目标群体中能获得充分共识。

    2010.01.20 / no responses / 分类: 交互设计, 用户体验设计(UED)

  • 交互设计-有效性”之“简洁清晰,自然易懂”

    我们生活在信息繁杂的社会,尤其是在互联网时代,人们开始通过网络开始接触越来越多的信息,那么,如何获取/传递有效而准确的信息将非常重要。在网页交互设计中,我们提出:信息获取和传达的过程必须是简洁清晰,自然易懂。这样用户才能够有效的获取这些信息,并迅速作出决定。

    1.什么是“简洁自然,清晰易懂”?

    简洁清晰:使信息最简化
    “少即是多”。提倡使用最少的元素来表达最多的信息。如果信息繁杂,将使用户承担大量的信息负担,造成信息过载,影响效率,不能帮助用户解决问题。

    2010.01.15 / no responses / 分类: 交互设计, 用户体验设计(UED)

  • 交互设计-突出重点,一目了然!


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

    测试您的页面

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

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

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

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

    为扫描而设计,不是阅读

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

    2010.01.11 / 31 responses / 分类: 交互设计, 用户体验设计(UED)

  • 我们眼中的交互设计

    交互设计(Interaction Design, 缩写 IxD 或者 IaD),是定义、设计人造系统的行为的设计领域。人造物,即人工制成物品,例如,软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式(the “interaction”,即人工制品在特定场景下的反应方式)相关的界面(Wikipedia)。通过对界面和行为进行交互设计,从而可以让使用者使用人造物来完成目标,这就是交互设计的目的。
    从用户角度来说,交互设计是一种如何让产品易用,有效而让人愉悦的技术,它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解“人”本身的心理和行为特点,同时,还包括了解各种有效的交互方式,并对它们进行增强和扩充。交互设计还涉及到多个学科,以及和多领域多背景人员的沟通。

    在《交互设计实用指南》里,我们认为,交互设计,应当是创造承接人类与计算机之间的界面即人机界面(Human-Computer Interface)(见下图)。交互设计的出发点在于研究用户和计算机交流(dialog)的时候,人的心智模型和行为模型,并在此研究基础上,设计界面信息及其交互方式,用人机界面将用户的行为翻译给计算机,将计算机的行为翻译给用户,来满足人对软件使用的需求。所以,交互设计一方面,是面向用户的,这时交互设计所追求的既是可用性(Usability),这也是交互设计的目的所在;交互设计的另一个方面是面向计算机实现的,这时我们关注于“软件工程化”。

    null

    交互设计模型

    面向用户

    根据上文中,我们提到的满足人对软件的需求,其目标既是我们所说的“可用性”。可用性指的是一个产品可以被特定的用户在特定的使用情况中,有效、高效并且满意得达成特定目标的程度(ISO9241)。我们认为,其中所诉的有效、高效和满意即为可用性的三个递进的层次:

    2009.12.04 / no responses / 分类: 交互设计

最近文章

最近评论

分类目录

紫枫印迹

2010年三月
« 二    
1234567
891011121314
15161718192021
22232425262728
293031  

标签云

CSS+HTML css2.0 HTML5 SEO seo优化 SNS User Friendly2009 VIP web 中文手册 互联网 交互 交互设计 产品 产品设计 产品设计师 体验 信息架构 关键词 制作网页 前端开发 原型 命名规则 垂直居中 小技巧 手机网站开发 按钮 支付宝 李开复 流程 用户习惯 用户体验 用户界面 用户研究 用户访谈 瞬间的设计 网站运营 网页设计 背景 行动 视觉设计 设计 设计师 身体语言 页面重构

用户体验设计(UED)

紫枫友情收藏

86ue_rss

设置