【原创译文】面向对象的用户体验设计

原文:Object-Oriented UX

2012年6月,我在CNN.com工作时,接到了为“选举之夜”进行用户体验设计的任务。接下来的5个月我为那1个晚上贡献了全部精力——但我的成功对选举的胜利方没啥影响。我所关注的是页面的可读性,数据的可视化,可变形的画布,以及在iPhone上怎么实现该死的鼠标悬停弹窗效果。在当时,CNN.com首次上线了响应式体验站点,同时,我也第一次面临响应式体验设计。

这是一场豪赌。选举之夜对于CNN.com来说就像周日超级碗那样重要。如果完成的出色,这将是我4年来收入最高的一个晚上。此外的压力就是苛刻的完成时间,截止日期毫无商量余地,要么11月6日上线,要么就玩完。

接下来我了解到第一个开发冲刺任务将在4天后拉开序幕。4天?!我的项目经理冷静地告诉我:“别担心,开发人员仅需要一个第一版的原型,在他们做第一版原型时,你可以接着做下一版。”

啥?我怎么可能在还没对机器进行粗略设计的前提下就开始设计机器的齿轮?

当我们在固定屏幕大小的情况下进行页面设计时可以考虑不周全;最终可以通过把独立设计的页面缝合在一起来达到目标。我对于响应式设计毫无头绪,但我知道我们需要清晰且简单的体系,而不是把页面(简单地)串在一起。正如所有的工程师和设计师所知,在一个系统中,可移动的元素越多,就越可能造成灾难。

所以,在最初的4天设计中,我并没有绘制互不关联的线框图,相对的,我画了一份具有可重用、可互相替换组件的完整体系图。如下图所示:

13131301

我在会议室里向那些本希望看到单一“已完成”原型的相关人员展示这张图。我表示,相比我们的2008个设计方案,我已减少了组件和原型模板的数量,并且新的体系图非常简单,仅需一张8.5 × 11的纸就可以展示了!值得庆幸的是,一名核心人员在房间中看到了我所展示的草图的价值:用更少的素材来构建产品。

我在2012年制作的草图远达不到完美,更多时候都是在尝试多做快做。我仓促地开工,禁止弹窗和条形图,始终考虑桌面优先,担心位置偏移而不是优先级够不够。我采用设计封面页的经验(这经验应该用在设计的最后阶段),包装出了一款不成熟的主页。我花了过多精力在固定顶层导航上,而不是首先关注内容模块。

尽管不完美,这张草图的设计理念,以及背后的思路方法,与我产生了共鸣。它不是站点地图,因为它没有层级;它也不是故事版,因为它没有任务流。相对的,这张图展示了一种系统级思维,它改变了我做用户体验设计的思路。

如果我掌握了现在的知识,这就是我将会创造出的,剥离开交互、持久导航、网页和布局的草图,它展示了3个对象的体系:州、竞选,以及州-竞选结果。

14141401

这种方法可行:我们的响应式“选举之夜”被认为是周日超级碗的CNN高管的希望。但我们真的是九死一生,为了确保设计效果在无数设备上都展示得当,我们没日没夜地工作。我不确定我们是否能采用更复杂的设计来完成这一任务。

今天,我已把这一艰难的考验转化成一种可被证明的、结构化的、基于对象的流程。在这篇文章中,我将介绍面向对象的用户体验设计,分享我进行对象关系映射的过程,并帮助你开始自己动手实现它。

移动优先,内容优先,对象优先

我花了约一年时间重新训练自己真正以“移动优先”的角度思考问题,但现如今,我就算在设计桌面软件时也会这么思考。对我来说,“移动优先”单纯意味着“强制优先级”,也就是说先开始进行单一的列设计(也就是我们所说的列表),并强迫自己对内容和功能进行优先级顺序排名,最后再考虑布局。

这种做法和”内容优先”的理念不谋而合。“为内容”而设计,而不是“为画布”而设计。在开始排列优先级时,你必须知道你要讲什么(内容)。

有时这意味着你要先有一份完整真实的拷贝——尤其是当你要为长满藤蔓的网站进行设计,或者拥有教学拷贝,让我们在设计工作开始前能重组、排序、分析并进行更新。

但如果你要设计的网站99%都是实例化的对象(新闻标题、产品、活动、捐款),没办法构建一个完整的拷贝。由于无法对真实拷贝进行排列优先级,我必须用面向对象的思路思考问题。

那就是面向对象的体验设计:在程序化行为设计前进行对象化设计,并通过用户心智模型中真实世界对象(产品、教程、位置)的视角来考虑一个系统,而不是考虑数字世界的行为(搜索、过滤、比较、登出)。我们在开始定义对象后才确定行为,而没有采用传统的“行为优先”流程,“行为优先”流程则直接开始进行业务流、交互和功能的设计。

面向对象的体验设计是强大的

快讯!这就是你的后台工程师正在做的事。在80年代,软件工程界开始从面向过程的语言向面向对象的语言转变,因为面向对象的语言拥有像重用、数据封装和易于维护的优点。许多开发者是采用像Java、Ruby、Python、C++或C#这种面向对象的语言来实现你的设计的。

开发者通过映射对象开始他们的工作,并以此决定要处理的问题域,这些问题就是用户体验设计师在第一天(的设计后)产生的。当他们看你的线框图或原型时,首先会对其进行逆向工程,并解析成一个个对象。他们在思考的是:“对象X和对象Y如何通信?对象A是否会由多个对象B构成?每个对象都有哪些属性?这些对象是否继承自那些对象?”

在网页端,我们以面向对象的方法开发,但仍旧以过程化方法设计,关注在下拉菜单层级或者线性任务流。然而我们还有另一种选择。在设计师和工程师Dave Collins 1995年出版的图书《设计面向对象的用户界面》中,他提到在前后端均采用面向对象的设计理念能够“和软件开发过程保持一致。面向对象(的方法)揭示了在分析、设计和实现之间深层次的结构关系。”

模仿用户的心智模型来定义对象能够提供给你一种可共享的语言,从而为团队沟通提供支撑。在团队凝聚力上,面向对象进行设计能帮助你:

* 匹配用户心智模型,提升用户体验

* 确保简单化,减少任何由于额外的设计元素导致的意外复杂性

* 更新和维护你的产品:对象能在不影响系统其余部分的前提下进行迭代,此外还能完美嵌入新对象(而不是在功能上打补丁)

* 利用可移植的、独立的对象构建更优质的API接口

* 从结构化内容和有价值的交叉链接处得到SEO加分

接下来,我要说下我最喜欢面向对象设计的理由:它能帮你比以往任何时候都更关注于上下文导航。换句话说,它能引导用户通过内容获得内容。

当用户浏览小屏幕时,需要隐藏持久导航,将其淡出视野。但就算在17寸屏幕上,最漂亮的首栏固定导航仍旧会被忽略。当用户首次访问网站时,他们通常会被闪光的大区域所吸引,而使用导航或搜索框仅是个备选方案。就像Val Jencks总结的那样:“我们浏览网页时首先关注的是内容,顶部导航则是消防逃生口。”

假设用户正在阅读一份食谱,他接下来想干什么呢?我们应该预测到基于正在看的这份食谱,他想如何进行探索,而不是给他们拿出一份层级菜单或者提供搜索词。此外,我们也不应该给他们一些“相关菜谱”然后就认为任务完成了。他们可能想要看到这个厨师发布的所有菜谱,或者他们想看到更多围绕成分——如使用瑞士甜菜的菜谱。如果我们用面向对象的方法思考,我们需要从另外的角度,尝试把每个对象关联到其他对象上。是不是厨师有他喜欢的食材?在下面面向对象的设计中,用户可以不断发现这三个对象的实例(菜谱、厨师、食材)而并不会进入死胡同。内容就是导航,而这一切都存在于上下文中。

15151501

如果你对这样的概念感到熟悉,你可能读过,或参与过内容建模。在过去的5年里,很多信息架构和内容策略都开始关注可重用内容类型的系统,并将其融入到CMS(内容管理系统)——内容的创造者的设计中,而不仅仅将终端用户作为主要用户群。

Sara Wachter-Boettcher在她的书Content Everywhere中,鼓励我们在设计线框图和交互稿前,先进行内容建模:

内容建模给你系统化思维,它能让你看到你拥有什么类型的内容,它们包括哪些元素,以及它们如何以一种标准化的方式进行运作的。

不幸的是,内容建模的艺术仍旧对很多用户体验设计师是陌生的,这些设计师一听到“内容”就认为与自己无关。尤其是对那些将软件设计为服务或产品的设计师而言,融入内容的策略有时他们是充耳不闻的。

 

译文链接:http://www.jianshu.com/p/af586ac5a6b2

作者:s2dongman申悦

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/11029/

(0)
iouedioued
上一篇 2015-11-20
下一篇 2015-11-21

相关推荐

  • Sketchfab可在引擎内直接搜索3D模型,太方便了!

    点击上方蓝字CG世界关注CG我们“ 感知CG · 感触创意 · 感受艺术 · 感悟心灵 ”中国最具影响力CG领域自媒体Sketchfab为其在线模型共享平台发布了新的下载API,使开发人员能够将Sketchfab内容直接导入其他应用程序或游戏引擎中。Sketchfab是一个集发布,分享,发现,购买和销售为一体的3D,VR和AR内容的平台。 提供基于WebGL和WebVR技术的查看器,允许在网络上显示3D模型,以便可以在任何移动浏览器,桌...

    2018-03-31
  • 总结几个产品交互设计原则

    什么是交互设计?这是一个很泛的概念,很多人讲交互都会试图去区分交互设计、UI设计和体验设计等。但是我个人觉得,这些东西根本没有界限。UI层面也涉及交互、交互也是一种体验设计,没必要把他们彻底分裂出来。每…

    2017-08-02
  • 聊聊Axure RP 8 的动态面板(文末赠书)

    点击上方“蓝字”关注本公众号《Axure RP 8入门手册》本书的写作初衷是面向初学者,由浅至深地引导读者学习Axure RP 8.0的使用方法,从而实现最终的学习目标。本书不但适合初学者学习,在知识结构与案例的安排上,也非常适合工作中的查阅与参考。初学者只需要按照从前至后的顺序进行学习,就能够迅速、全面地掌握原型开发技能。具备一定原型开发基础的读者,也能够在本书的大量案例之中,获得各种实战的参考。书中的案例均为网站或App中采用的一些...

    2018-04-09
  • 【招聘】在专注用户体验的公司上班是什么体验?

    随着艾体验业务范围的逐渐扩大以及合作伙伴不断增长,我司也开始扩充人力啦!我们是谁?艾体验是一家为需求企业提供更具商业价值和科技未来的产品“大设计”服务公司!(base in天府五街菁蓉国际广场)作为一家“大设计”公司,时常需要对外提供高端产品体验咨询服务,创新前沿人机交互解决方案研发,并且不断沉淀分享产品干货。而成为“我们”的将是这样一群人:这群人,热爱互联网和产品,同时也热衷于观察生活,不放过身边的任何一个小细节;这群人,贯彻着生命不...

    2018-02-26
  • 关注用户体验的酒店设计永不过时

    目前110000+人已加入品筑设计位于德国巴登-巴登(Baden-Baden)的Roomers酒店,建筑的外观采用简洁的黑白灰格调,错落有致的立面构成,干净利落。建筑的外观采用简洁的黑白灰格调,干净利落、错落有致的立面构成。酒店共设有130间客房及套房,另外还有餐厅与酒吧、屋顶酒吧、500m²的水疗中心、户外花园、无边泳池等等。在精品酒店的设计中,越来越关注客人的亲身体验感,其中有几个重要的关键点:家的温馨感、艺术馆般的艺术气息、现代极...

    2018-04-10
  • 通过全新的WIN 10设计语言,我看到了将来桌面客户端风向标的5个特点

    不单是视觉扁平,交互层级也更加扁平啦~

    2017-05-09
  • 在网页设计中,图片常用的五点技巧

    图片在网页中所扮演的角色越来越重要。作为最常见也是最早使用的网页多媒体,图片对于网页设计师而言至关重要。如何用好图片已经成为了一项成熟、完善而又讲究的技巧,而在高清屏幕无处不在的今天,稍有瑕疵的图片都在高密度的像素下无所遁形,而不合理的图片设计也不会逃过访客的双眼。很简单,色彩会让观看者分心。

    2017-05-07
  • 善用Axure写PRD:产品逻辑的五种呈现方法

    每天一篇好文章,2018年第2期不管是APP、web网站还是pc客户端的软件,流程&页面&交互&逻辑始终是最重要的几环,分享一下我呈现逻辑的几种方法,大部分PM应该也采用过类似的方法。一、直接不写逻辑最开始根本没有写逻辑的概念,只是用交互事件加上基本的页面跳转。当技术童鞋来问的时候,口述给他。经常会被鄙视。二、直接写到页面里开始学乖了,把一些逻辑直接写到页面里。不过很快就发现了弊病,某些逻辑不应该呈现给用户,只能给前后端童鞋看。同时也造...

    2018-03-27
  • 《用户体验要素》

    大多数人都体验过网购,这种经历几乎每一次都是一样的:你到达网站,寻找你想买的东西,然后下单(提供你的住址和电话号码),然后网站将物品快递到你的手中。这个清晰、有条不紊的体验,都是由一系列完整的决策(大大小小的决策)组成的:网站看起来是什么样、它如何运转、它能让你做什么。这些决策彼此依赖,告知并影响用户体验的各个方面。如果我们去掉这些体验的外壳,就可以理解这些决策是如何做出来了。作者给出了一套用户体验设计的科学方法,借用此方法,我们可以对...

    微信热点 2018-04-12
  • 阿里交互新手小记 | 交互工作流程的梳理

    头疼就是脑子里有什么正在激烈地进行改变,可能就是你从困难上学会的东西。—— 写这篇文章的人

    2017-05-23