Again (在 花时间coffee)

Again (在 花时间coffee)

有一天想去看看你们,一定会

37,22,35 R.I.P

Here was buried Thomas Jefferson, author of the Declaration of Independence, of the statute of Virginia for religious freedom, and father of the University of Virginia.

Pardon me for not getting up.

我将在天堂里听到一切.

这儿安葬着普希金和他年轻的缪斯, 还有爱情和懒惰, 共同度过愉快的一生; 他没做过什么好事, 可就心情来说, 却实实在在是个好人.

这次不管你数到几, 我也不起来了!

活过,写过, 爱过.

从苍天处取得闪电,从暴君处取得民权.

这儿长眠着一个人,他的名字是用水写的.

——————————————————————————————————————————————

要想改变世界,你必须从改变你自己开始;要想撬起世界,你必须把支点选在自己的心灵上。

你的眼睛是多么迷人,就像夜空里的星星。

你的眼睛是多么迷人,就像夜空里的星星。

happy birthday

我也開心飲過酒

我也開心飲過酒

Lean UX: Principle-Driven Design

image

“Nothing is more effective than walking over to a colleague, showing some work, discussing, sketching, exchanging ideas, understanding facial expressions and body language, and reaching a resolution on a thorny topic.”

image 

       ”不得不说,真的是一本好书。但阅读容易,想要实施却真的如履高山。 

  首先,书中的方法不适于传统的设计公司,而是面向所有的互联网公司,将设计的理念从交付转而为目标,这与仅是提供交付的设计公司完全背道而驰。 

  而对于大部分企业来说,拥有设计的思维,能够跨越部门协同向前这种需求所带来的体制改变、管理难度的提升是何其艰难,没有阵痛,没有高层的真正认识与强力支持,没有人员上的大批量换血,基本上不可能得以实现。或许只有初创型的公司才更合适从一开始就走这一条路。 

  从组织架构上来说,人数不多,协同作战,快速响应,务实的小团队确实是比一般的分工明确,部门森严的大团队有太多的优势,如果现有公司仍然不能认识到这一点,那真的就可能迟了。”

"设计思维鼓励团队中不同角色的人协同合作,把产品设计视为整体,这是非常重要的基础思想。
敏捷原则:个人和互动重于流程和工具;能用的软件重于详尽的文
(尽快验证而不是纠缠于做决策);与客户协作重于合同谈判;应对变化重于遵循计划。

Played 2 times

3M ●创新:“你不能扼杀一个新产品的创意” 
   ●绝对正直 
   ●尊重个人的首创精神及个人成长 
   ●宽容诚实的错误 
   ●产品质量及可靠性 
   ●“我们的真正业务是解决问题” 
  美国运通 ●英雄式的顾客服务 
   ●世界性的服务可靠性 
   ●鼓励个人的首创精神 
  波音 ●领导航空工业;永为先驱 
   ●应付重大挑战和风险 
   ●产品安全与品质 
   ●正直与合乎伦理的业务 
   ●“吃饭、呼吸、睡觉念念不忘航空事业” 
  花旗银行 ●扩张主义:在规模、服务种类、地区设点方面采取扩张 
   主义 
   ●遥遥领先:例如最大、最好、最能创新、获利最高 
   ●自主与企业精神(通过分权) 
   ●实力主义 
   ●积极进取与自信 
  福特汽车 ●人员是我们的力量源泉 
   ●产品是“我们努力的终端成果”(我们以汽车为主) 
   ●利润是必要的手段与衡量我们成就的指标 
   ●以诚实及正直为基础 
   ●(注:这是80年代福特公司《使命、价值观和指导方针》 
   ●文件中的秩序,在福特公司历史不同阶段,秩序有所不 
   同。) 
  通用电气 ●以科技及创新改善生活品质 
   ●在对顾客、员工、社会与股东的责任之间求取互相依赖的 
   平衡(没有清楚的等级之分) 
   ●个人责任及机会 
   ●诚实与正直 
  惠普 ●给我们从事的领域贡献技术(我们公司存在的目的是要 
   做出贡献) 
   ●尊重惠普人并给予他们机会,包括共享企业成功的机会 
   ●对我们所在的社区奉献与负责 
   ●提供顾客负担的起高品质产品 
   ●利润与成长是使所有其他价值观与目标可能实现的手段 
  IBM ●给予每个员工充分的考虑 
   ●花很多时间使顾客满意 
   ●坚持到底把事情做好,所作所为追求完善 
  强生 ●公司存在的目的是要“减轻病痛” 
   ●“我们的责任层次分明:顾客第一,员工第二,整个社 
   会第三,股东第四” 
   ●根据能力给予个人机会与报酬 
   ●分权=创造力=生产力 
  马里奥特 ●友善的服务与绝高的品质(顾客是贵客):“让离家在外 
   的人觉得置身朋友当中,而且真正受人欢迎” 
   ●人员第一,善待他们,寄予高度期望,其余一切会随之而 
   来 
   ●努力工作,但保持工作乐趣 
   ●不断自我提高 
   ●克服逆境,建立格调 
  默克 ●“我们做的是保存和改善生命的事业。我们所有的行动都 
   必须以达成这个目标的成就就来衡量。” 
   ●诚实与正直 
   ●企业社会责任 
   ●以科学为基础,力求创新,不是模仿 
   ●在公司的所有层面明确追求完美 
   ●追求利润,但利润须来自有意人群的工作 
  摩托罗拉 ●公司存在的目的是“以公平的价格向顾客提供品质优异的 
   产品和服务,光荣地服务与社会” 
   ●不断的自我创新 
   ●发掘“我们内部潜藏的创造力” 
   ●不断改进公司的一切作为:创意、品质与顾客满意度 
   ●以尊严对待每一位员工,视之为个体 
   ●在业务的所有层面追求诚实、正直、合乎伦理 
  诺世全 ●服务顾客最优先 
   ●努力工作,追求生产效率 
   ●不断改进,用不满意 
   ●追求完美名声,成为特殊事务的一部分 
   ●菲利普 莫里斯捍卫个人自由选择(吸烟、购买想买的东 
   西)的权利 
   ●争取胜利:追求至善与击败别人 
   ●鼓励个人首创精神 
   ●根据能力给予员工达成成就的机会,不以性别、种族或阶 
   级为根据 
   ●努力工作,不断自我提高 
  宝洁 ● 产品完美 
   ●不断的自我提高 
   ●诚实与公平 
   ●尊重和关心别人 
  索尼 ●体验以科技进步、应用和创新造福大众带来的真正快乐 
   ●提升日本文化与国家地位 
   ●做先驱:不追随别人,但是要做不可能的事情 
   ●尊重、鼓励每个人的能力和创造力 
  沃尔玛 ●“我们存在的目的是提供顾客物有所值的东西”:用比较 
   低的价格和比较多的选择,改善他们的生活,其他一切都 
   属次要 
   ●力争上游,对抗凡俗之见 
   ●和员工成为伙伴 
   ●热情、热心、认真工作 
   ●精简经营 
   ●永远追求更高的目标 
  迪斯尼 ●不容有犬儒主义式的嘲笑态度 
   ●狂热地注意一贯性与细节 
   ●以创造力、梦想与想象力不断追求进步 
   ●狂热地控制与保存迪斯尼的“魔力”形象 
   ●“带给千百万人快乐”,并且歌颂、培育、传播“健全的 
   美国价值观

要扁平化,也要可用性

定义信息架构

扁平化风格最让我欣赏的一点就是对内容的突出。曾几何时,我们过分聚焦在界面元素的拟真风格上,内容反而成为次要。在扁平化风格的界面中,那些零七八碎的会牵扯用户注意力的元素被去除,这很好,但你必须当心,不要使其成为破坏信息结构的双刃剑。

要确保扁平界面的可用性,你首先要梳理清楚内容的层级结构,尤其是在网站的前期规划及线框稿阶段。抛开界面元素风格不谈,你的内容本身是否有着易于视线扫描的结构?用户可以找到最重要的交互对象吗?无论视觉风格是扁平还是拟物,坚实的信息架构都是最重要的基础。

“内容应当先于设计。缺乏内容的设计算不上设计,最多算装饰。” - Jeffrey Zeldman

相关阅读:易用性与转化率的提升 - 打造良好UI的32条建议

强化交互元素

说到扁平化界面的可用性,一个比较关键的设计挑战就是怎样让可交互元素看上去是“可交互”的。扁平风格意味着视觉表现形式上通常只有两个维度可以使用,以往用来构建“可点击”效果的渐变与阴影成为了历史。

扁平风格并不意味着简单粗暴的将原先的拟真元素拍平然后丢到界面当中。扁平化与拟物化各自擅长解决的问题是不同的,如果你决定使用扁平风格打造产品界面,那么必须以新的思路来解决设计上的问题。

试着通过提升对比度来增强交互元素的表现力。这里所说的对比度包括配色、字号、位置布局等方面的要素。另外,要为交互元素提供必要的视觉线索及反馈效果,帮助用户建立认知,例如当鼠标悬停在元素上,或是用户点击、触摸这些元素的时候,其视觉形式需要有所变化,以体现出元素的交互特性以及用户行为所产生的结果。

Exposure只用了很细的线框来界定首页上两个最重要的Call to Action,但在鼠标悬停时提供了足够强大的对比反馈来提示元素的可交互性。

Focus Labs通过配色和元素布局关系来提升交互元素的对比度;鼠标悬停时还会有CSS动效来增强视觉反馈。

Treehouse使用明亮、饱满的颜色来定义界面元素的交互特性,使它们与普通的内容构成了鲜明的对比。

人性化

由于那些非内容性的、模仿现实物体的元素被剥离,所以扁平化界面时常会让人感觉冰冷而无趣,缺乏亲切感及品牌个性。虽然这不会直接降低界面的可用性,但对于产品的整体体验来说依然有着重要影响作用。

要让扁平化界面带来更加积极的体验,你需要在设计中与用户建立起情感和人性上的关联(相关阅读:为产品赋予人格 - 情感化设计的组成要素及实践案例)。试着使用更多的图片作为“有机”内容,来抵消掉扁平化元素的“数字感”。图片——无论是图标、插画还是照片,都可以在扁平化环境中创造出更具“人性”和“深度”的氛围。

Mailchimp在扁平化的整体风格当中通过图标、插画和真实照片来创造深度,塑造产品个性。

Squarespace通过代入感极强的大幅照片作为扁平风格界面元素的环境背景,与目标用户建立起明确的关联。

ohbaby将模糊化的照片作为背景,在扁平环境中有效的创建出了纵深。

Treehouse通过大幅真实照片为界面构造深度,并定义品牌的气质与性格。

小结

如果你决定使用扁平风格打造下一个产品,那么一定要特别留意设计当中那些会对体验产生影响的方方面面。扁平化风格绝不仅是从现有界面中抽掉一个维度那么简单,面对它所带来的一些可用性方面的问题,你可以试着从本文当中介绍的几个方面入手加以解决,包括构造良好的信息架构、强化交互元素的视觉特性、为界面增加人性化元素等。

Up On The Wall: How Working Walls Unlock Creative Insight

Research wall, design wall, research board, ideation wall, inspiration board, moodboard, pinboard — Working walls are known by countless names. Underlying them all is a single idea: that physically pinning our sources of inspiration and work in progress, and surrounding ourselves with them, can help us to rearrange concepts and unlock breakthrough insights.

In their 2009 paper on creativity in design, human media interaction researcher Dhaval Vyas and his colleagues coined the term “artful surfaces” to refer to “surfaces that designers create by externalizing their work-related activities, to be able to effectively support their everyday way of working.” According to Vyas and his colleagues at the University of Twente (in the Netherlands), designers integrate these surfaces “artfully” and organize information in such a way that it empowers them to visualize and extend their work in progress.

Working Walls And Design Thinking

In this article, you will learn how displaying data and ideas on a large vertical surface can enhance your design thinking process. One of the first things to know is that the practice of using “working walls,” as we will call these surfaces from now on, is scarcely documented in scientific literature — hence, the need for a working definition of a working wall (redundancy intended). For the purpose of this article, we’ll define it as a large vertical surface on which ideas, data and work in progress can be displayed, rearranged and extended.

This design thinking tool being as powerful as it is, it comes as no surprise that a myriad of other fields have adapted and used it for years. But just how do working walls come into play in design thinking? Tim Brown, president and CEO of IDEO, defines design thinking like so:

“A human-centered approach to innovation that draws from the designer’s toolkit to integrate the needs of people, the possibilities of technology, and the requirements for business success.”

To further define this approach, The Institute of Design at Stanford (or d.school) has outlinedfive steps in the design thinking process:

5 steps of design thinking

It all starts with empathizing with the people you are designing for. Then, you define a clear perspective of the process by making sense of a large amount of information. You proceed with ideation, exploring a wide array of concepts and generating possible solutions. Prototyping involves building an object (or artifact) that a user can experience and give you feedback on. Testing is about triggering an actual response from your intended user.

Working walls can facilitate every step of the design thinking process, and they offer unique advantages to bolster creative thought. The tool can help us empathize with and gather input from users, define a focused approach based on a large amount of data, capture the ideation process, display a low-fidelity prototype that users can interact with, and keep track of the way we’ve tested our creative assumptions.

Hopefully, the following benefits and working wall templates will inspire you to create your own today.

1. Empathize: Enable Peripheral Participation By Users

Large vertical surfaces can be used to spark interaction with your intended users. Wall-sized displays allow for easy visualization and intervention, which makes them particularly useful for consumer research.

Vyas and his group spent over 250 hours studying design departments at universities and companies in the Netherlands and concluded that artful surfaces are “an important vehicle for peripheral participation in a project, allowing visitors to enter its context.”

They labeled this participatory environment a “creative ecology,” where users are free to interact via their inputs on working walls.

5 Guys Burgers and Fries, for instance, has been using working walls to invite customers to describe their dining experience.

5 Guys Burgers and Fries use working walls
(Image: Carly Baldwin, NJ.com)

Here’s a working wall template that you can use to gather input from your audience and to empathize with their wants and needs:

Working wall template

Try out some of these prompts:

  • Name one thing you love or enjoy about X?
  • Name one thing you hate or dislike about X?
  • What would you change about X?
  • How does X make you feel?

2. Define: Synthesize Key Findings By Detecting Affinities

Once you’ve collected information about your audience, pinning the raw data onto a working wall will help you to rearrange and make sense of it. This type of working wall displays what we call an affinity diagram. Although people have been grouping similar ideas under labels for thousands of years, it was Japanese anthropologist Kawakita Jiro who originally developed the affinity diagram in the 1960s.

The premise of an affinity diagram is that, at first glance, several points of our data might seem unrelated, convoluted or unclear. However, by grouping related concepts, we are able to detect patterns that will help define our design approach.

Consider private detectives. You’ve seen them in the movies and on television. The sleuth will often map out a suspect’s life on a sketching wall and proceed to make breathtaking connections. In this case, a working wall is used to find affinities along the subject’s journey (“What are some patterns we can expect this person to follow?”), to find affinities in the lifestyles of the subject and their peers (“What do we know about A’s relationship with B?”) and to solve fuzzy criminal cases in general.

Take the “gladiator wall” from Shonda Rhimes’ award-winning television show Scandal:

Gladiator Wall from Scandal
(Image: Scandal Moments)

Claire Danes research wall from Homeland
(Image: Esther James)

Here’s a working wall template that you can use to identify affinities in a fuzzy dataset:

Working wall template to detect affinities within a fuzzy dataset

These questions will help you get started with the template:

  • “How is data point A similar to data point B?”
  • “How are both A and B different from C?”
  • “Is there a category (i.e. label) that describes these data points well?”
  • “Why does a certain data point look isolated? Does this ‘outlier’ yield an interesting insight?”

3. Ideate: Stimulate Divergent And Holistic Thinking

Psychologist J.P. Guilford coined the term “divergent thinking,” which the Gale Encyclopedia of Psychology defines as “the ability to develop original and unique ideas and to envision multiple solutions to a problem.” This essential design skill is the key to ideation.

We could design several types of working walls to brainstorm, gather inspiration, and fully map out concepts and their relationships.

When brainstorming individually or in a group, stick notes at the top of the working wall to show all ideas. Then, using the affinity diagram method described above, identify which ideas are related, and categorize them accordingly.

Use sticky notes on top of a working wall
(Image: Oranaozchi)

To maximize inspiration for ideation, set up a “moodboard” layout on the working wall to collect ideas from different sources. Fashion designers, for instance, observe a phenomenon called “planned obsolescence,” which basically means that they design garments knowing that those garments will eventually become unfashionable.

This instability demands a disciplined creative process in which (almost) everything can become a source of inspiration. Fashion designers everywhere use inspiration boards to capture seasonal trends, textures, accessories, sketches and muses when ideating for their next collection.

Inspiration board
Fashion designer Christian Siriano poses with the inspiration board for his spring/summer 2014 collection. (Image: The Derek Daily)

Here’s a working wall template you can use to get inspired with ideating:

Working wall template for design ideation

Ask yourself these questions to get started with the template:

  • “Does this finding relate to the overall structure (such as the layout or grid) that I am trying to implement in this project?” (If so, include it as a source.)
  • “Is this particular aesthetic treatment (such as the use of color or typography) similar to the one I am trying to convey in this project?” (If so, include it as a source.)
  • “Is a particular functional feature associated with the utility I am embedding in this project?” (If so, include it as a source.)
  • “Does a certain mood (such as an atmosphere or emotion) in this source inspire what I am trying to convey with this project?” (If so, include it as a source.)

The working wall style we’ll explore next can help you map out a given concept and find important relationships between its subconcepts. Think about it: Doesn’t working on a large surface help you to visualize the big picture? What if you had enough space to add more concepts related to your subject? Working walls get it done.

This kind of big-picture reasoning has been called “holistic thinking.” According to psychologist Richard Nisbett at the University of Michigan, holistic cognition involves “an orientation to the context or field as a whole, including attention to relationships between a focal object and the field.”

This is the opposite of analytic thinking, whereby we pay attention primarily to the object and its categories, using rules (i.e. formal logic) to understand the object’s behavior.

East Asians tend to be more “holistic,” while Westerners are more “analytic,” according to Nisbett and his colleagues at the University of California (Berkeley), Seoul National University (Korea) and the Ecole Polytechnique (France) in a 2001 paper titled “Culture and Systems of Thought: Holistic Versus Analytic Cognition.” This groundbreaking research earned the team a grant from the National Science Foundation.

Evidence suggests that if you were raised in a society influenced by classical Greek thought, holistic thinking might not come all that naturally to you. However, product and service design is holistic by nature and, thus, requires stepping out of our comfort zone and transforming our mindset. Working walls are invaluable tools in this process.

Wartime generals, for example, have been using working walls to map out large-scale military intelligence strategies for decades. Winston Churchill kept some nifty underground chambers covered wall to wall with maps, thousands of color-coded pins and tiny annotations. These maps helped Churchill and his administration plan military advances, ideate different scenarios and think collectively about the best tactics to pursue.

Failing to see the big picture could mean the difference between victory and defeat in war and design.

Working wall in the military
“The Map Room” in the Churchill War Rooms. (Image: Kaihsu Tai)

Use the template below to map out a concept and its relationships. The width and marker of each arrow represent the strength and direction of a relationship, respectively.

Working wall template for mapping out a concept

Ask yourself these questions to get started with the template:

  • “Does concept A influence concept B, or is it the other way around?”
  • “How strong is the relationship between concepts A and B? Is there one?”
  • “If concept A influences B, is the effect reciprocal? Does A exert a stronger influence over B, or is the strength of their force upon each other equal?”

4. Prototype: Create And Change Prototypes Easily

You could combine elements on a working wall to create a prototype of a design solution. This low-fidelity version of the solution could make use of mixed media such as the following:

  • magazines;
  • books;
  • sketches;
  • screenshot printouts;
  • 3-D material, such as textures;
  • photos;
  • wireframes, blueprints and diagrams;
  • evidence from primary research;
  • evidence from secondary research;
  • text quotes that capture a mood;
  • other artifacts.

Interior designers combine elements on a working wall to create a scheme for a room. In the absence of a finished space, these boards serve as a low-fidelity prototype that gives the client sufficient clarity.

Working wall used by interior designer
Working wall for a cabana design in Vero Beach, Florida. (Designer: Erin Paige Pitts)

Here’s a working wall template you can use to create a low-fidelity prototype that users can give you feedback on:

Working wall to create a low-fidelity prototype that users can give you feedback on

And here are the questions to get you started:

  • “Into what major components can this product or service be broken down?”
  • “How can I show the user what the materials for a particular component will look like?”
  • “How can I show the user the flow of their interaction with the product or service once it is finished?”
  • “How can I give the user a glimpse of the final outcome? Would mockups, wireframes, sketches or blueprints help them to visualize it?”

Prototypes evolve, and unless we have a quick way to access previous versions of our own work, that sense of progress will fade and we’ll lose sight of the design decisions that took us from A to B in the first place. Second thoughts, insecurities and analysis paralysis take over.Understanding and being able to visualize our process give us the confidence that we are building on a strong foundation and give us the strength to justify our design choices.

Interaction designers, for example, must somehow navigate a dense jungle of user experience design, visual style, branding, layout, grids, typography and function changes. Working walls are an essential asset for succeeding in that.

The BBC UK published an amazing article explaining how it redesigned its website. It printed out every single screen of the old website and pinned it up on what the team now calls the wall of shame. The team gathered around this large vertical surface to prototype and pin new versions of its website. The result is a triumphant wallpaper-sized timeline of where the BBC used to be and where it stands now.

BBC-UK working wall
A New Global Visual Language for the BBC’s Digital Services,” BBC Internet Blog

Here’s a template to visualize prototype changes over time:

Working wall template for visualizing prototype changes over time

And here are the questions to get started:

  • “Into what major features can this product or service concept be broken down?”
  • “How does each feature currently look?” (Include this in the column for the version you are currently working on.)
  • “What elements will we add to this feature going forward?” (Include them after the plus sign in each of the arrows pointing to the next version.)
  • “What elements will we remove from this feature going forward?” (Include them after the minus sign in each of the arrows pointing to the next version.)

5. Test: Visualize And Validate Design Assumptions

Researchers in every field experiment and iterate on their results. In the previous step, we saw how to use a working wall to create and refine a prototype before introducing it to our target users. Stage five of the design thinking process, testing, can also be facilitated using a different type of working wall.

Startup founders use a “validation board” to visualize their prototype tests. The free canvas created by Lean Startup Machine helps you to display the different iterations (or pivots) that your design solution hypotheses have undergone. You can also classify your assumptions depending on whether they’ve been validated. As on other working walls, elements may be moved around as the process unfolds.

validation-working-wall-opt
(Image: The Validation Board: A Free Tool for Testing New Startup Ideas From Lean Startup Machine,” Harrison Weber, The Next Web)

Use this working wall template to visualize and validate your design assumptions:

Working wall template to visualize and validate design assumptions

Here are the questions to get started with the template:

  • “Which assumptions haven’t we tested yet?” (Include them in the first column, labeled “Untested.”)
  • “How do we go about testing this assumption? How will we know whether it is true or false?” (Include this “experiment design” in the second column, labeled “Testing”.)
  • “Has this assumption proven to be true or false?” (Move the original sticky note in the “Untested” column to either the third or fourth column, depending on the result of the experiment.)

Takeaways

Working walls are invaluable tools for design thinking. They empower research, sense-making, ideation, prototyping and testing. Using wall-sized displays in our design process empowers convergent, divergent and holistic thinking — all essential creative skills.

I hope you’ve found inspiration in these different and innovative uses of working walls. The next time you start a design project, keep these templates and ideas close to heart.

Do you know of other effective uses and layouts for working walls? Comment away!

(al, ea)