Designing for Complexity by Nadine Schaeffer


Published on

Simplicity is a frequent mantra for designers and a worthy goal. We all have been told, just make it simple; make it like Apple.

But life, well, life is infinitely complicated, and sometimes software becomes quite complex as well. So what does a well-intentioned designer do when faced with the challenges of designing for a complex system? That is the focus of this slideshare.

Published in: Technology, Sports

Designing for Complexity by Nadine Schaeffer

  1. 1. Designing for Complexity Nadine Schaeffer Principal, Cloudforest DesignSunday, March 25, 12 1Simplicity is a frequent mantra for designers and a worthy goal. Who here has said or been told, Just make it simple;make it like Apple. A show of hands please!But life, well, life is infinitely complicated, and sometimes software becomes quite complex as well. So what does a well-intentioned designer do when faced with the challenges of designing for a complex system? That is the focus of my talktoday.
  2. 2. Embrace the Complex! Plot of 1 second of human brain (EEG) activity, March 25, 12 2I am here to day to speak up in defense of the poorly maligned and sadly misunderstood character of complexity.Take a look at this image which visually abstracts the activity of the brain over 1 second. We humans, we are capable ofso much; so much thought, creativity and cognition.So, as designers, I want to encourage everyone to embrace and befriend complexity. Come on, give it a big hug.
  3. 3. A little bit about your humble speaker today: #DesignForComplexitySunday, March 25, 12 3Now, who am I to preach to you to embrace the great love of complexity? My name is Nadine Schaeffer, and I am oneof the owners of a small UX agency called Cloudforest Design (here is my 1 second pitch – we’re awesome. Hire us foryour next design project). Over the past 15 years, I have worked on many a complex piece of software for Oracle,Yahoo!,, Fiserv, Citrix, Apple and many more.
  4. 4. Designing for Complexity Contents 1. Overview: The Necessity of Complexity 2. Why We Fear the Complex 3. Dimensions of Complexity 4. Complex Applications 5. Complexity Toolkit: Heuristics & SolutionsSunday, March 25, 12 4This is a quick overview of what I am going to talk abouttoday.
  5. 5. The Necessity of ComplexitySunday, March 25, 12 5Let me tell you a quick story about how I came to be interested in this topic and give this talk:I have always cringed a bit when bosses and clients tell me, just make it simple.Some things just really arent simple, and it’s insulting to users, designers, humans! To try to dumb down a complexproblem.Do you really want to turn this ornate series of overpasses into one huge multi-lane nonstop traffic jam? Anyone ever tryto drive in Manhattan, or London during rush hour? Complexity is also at the fundamental root of evolution and life itself.There is a pattern, both in nature and in manmade constructs, to move from the simple to the complex over time, andthis movement creates new, innovative and often beautiful designs.
  6. 6. From Novice to Master, March 25, 12 6I would like to suggest this is an appropriate time to shift the overriding design principle in play from “simple” to“efficient”, or even, “adept”. Instead of trying to hide or downplay the complexity of a system, instead, navigate usersthrough the system with frictionless ease towards deep mastery.This is a picture of the space shuttle Endeavor. Humans – we are awesome. We have sent rockets to the moon, builtparticle accelerators, created an understanding of the deep and wide universe around us. To think that we needsimplicity is disingenuous and even insulting. But no engineer was born with the skills to build a rocket at birth. Instead,most of our great minds participate in some system of learning to help them grow in knowledge and skills from novice tomaster over time. Our software should strive to do the same – to guide people to mastery.
  7. 7. Designing for the Flow, March 25, 12 7Doing easy things is fun, for sure, but successfully mastering and accomplishing difficult tasks is even more rewarding.What we really want is to get people into the flow state. Look at these surfers. I have tried to surf. It’s really hard! Unlessyou are a pro, a master (not a novice), in which case, you are in the flow and make it look easy.What is flow?Flow is the mental state of operation in which a person in an activity is fully immersed in a feeling of energized focus, fullinvolvement, and success in the process of the activity.Proposed by Mihály Csíkszentmihályi, the positive psychology concept has been widely referenced across a variety offields.[1]According to Csíkszentmihályi, flow is completely focused motivation. It is a single-minded immersion and representsperhaps the ultimate in harnessing the emotions in the service of performing and learning. In flow, the emotions are notjust contained and channeled, but positive, energized, and aligned with the task at hand.
  8. 8. Simple or Complex?Sunday, March 25, 12 8What is simple? What is complex? Often it is merely a question of perspective or view. The iPhone is lauded as a paragonof simplicity. I think they are amazing, but for different reasons. Think of the millions of hours of human effort andknowledge behind them. Go back to discovering electricity, building out a telecommunications network, developingthe all those chips you see on the main logic board. And the software, the iOs and the gazillion apps that run on top of it.This little wafer of technology is just the tip of a huge mountain of human knowledge. Now how cool is that?
  9. 9. Complexity is everywhere …, March 25, 12 9Any time you look around nature, the pattern of ripples in a river, the colors of the sunset, the growth patterns of trees,you see complexity. This is a very nice Fibonacci spiral pattern that I saw in a little house plant potted in a neighbor’sgarden.
  10. 10. And it is beautiful!Sunday, March 25, 12 10A quick walk to my local park always inspires me to not be intimidated bycomplexity.
  11. 11. Designing for Complexity Contents 1. Overview: The Necessity of Complexity 2. Why We Fear the Complex 3. Dimensions of Complexity 4. Complex Applications 5. Complexity Toolkit: Heuristics & SolutionsSunday, March 25, 12 11
  12. 12. Cognitive LoadSunday, March 25, 12 12The term cognitive load is used in cognitive psychology to illustrate the load related to the executive control of workingmemory (WM). Complex learning activities the amount of information and interactions that must be processedsimultaneously can either under-load, or overload the finite amount of working memory one possesses. All elements mustbe processed before meaningful learning can continue.[1]Many would agree that people learn better when they can build on what they already understand (known as existingschemas), but the more a person has to learn in a shorter amount of time, the more difficult it is to process thatinformation in working memory. Consider the difference between having to study a subject in ones native languageversus trying to study a subject in a foreign language. The cognitive load is much higher in the second instance becausethe brain must work to translate the language[dubious – discuss] while simultaneously trying to understand the newinformation.
  13. 13. Complex or Chaotic? From National Geographic via, March 25, 12 13This is a personal theory, but I believe we also fear the complex because it is so very very close to the chaotic, especiallywhen we do not understand or have tools to understand the dimensions and facets of complexity. The picture above isfrom the aftermath of the tsunami in Japan last year. What was an orderly Japanese village has been transformedalmost instantly into a jumbled tangle of chaos. There is good reason to fear this! And I think instinctively, when weobserve the complex without the right tools or lenses, it can easily just look like chaos. Anyone who has gotten lost inamid badly designed application navigation with the back button disabled knows exactly what I mean.
  14. 14. Slow Thinking • Daniel Kahneman, a winner of the Nobel Prize for economics, Thinking, Fast and Slow • System 1: Fast, unconscious, easy • System 2, Conscious, deductive, hard work • Humans far prefer the speedy and effortless fast thinking, but slow thinking is more accurateSunday, March 25, 12 14“Kahneman presents our thinking process as consisting of two systems. System 1 (Thinking Fast) is unconscious, intuitiveand effort-free. System 2 (Thinking Slow) is conscious, uses deductive reasoning and is an awful lot of work. - paraphrase some examples from this book, add 4+2 in your head. Now add 42 + 64. So far so good. Now multiple 706x 589. A little harder. Now think of a 5 digit numbers, like 72,019. Now add +1 to each digit. 83,120. At some point, yourealize the math is getting harder. You no longer can spontaneously come up with the answer but actually have to think!Ouch! You have moved from fast thinking to slow thinking. What Kahneman’s research tells us is that fast thinking is fun.We like coming to quick answers, snap judgments. And we get stressed by slow thinking, but we are more accuratewhen thinking slowly.
  15. 15. Designing for Complexity Contents 1. Overview: The Necessity of Complexity 2. Why We Fear the Complex 3. Dimensions of Complexity 4. Complex Applications 5. Complexity Toolkit: Heuristics & SolutionsSunday, March 25, 12 15So, what do we mean by complex? Well many things. One useful exercise when solving for complex app design, is toidentify and acknowledge the dimensions of complexity for each particular product.
  16. 16. The Dimensions Humans Volume Time Product Change Quantity UsersSunday, March 25, 12 16There are many different kinds of complexity, some of which naturally group together, and I think of these complexitysets as the dimensions of complexity. There are three general groups of complexity that I usually encounter in softwaredesign, and they are represented in the three main rings in this diagram, orbiting around the nucleus of the product, orapplication. There is, in my mind first and foremost, the dimension of human or user complexity, shown in orange. Next, sooften there are complex amounts of volume, quantity, etc. involved (blue). Finally, there is the added dimension ofchange over time.If I were addressing product design, I would also add some physical parameters of complexity, such as materials(durability, weight, strength) and human ergonomics.
  17. 17. The Human Dimension Skills Language Education Culture Humans Volume Time Product Change Quantity Users Role Training Permissions ExperienceSunday, March 25, 12 17As user experience designers, we focus most often on the human layers of complexity … (discuss pointsabove)
  18. 18. The Human Dimension, March 25, 12 18Remember - Humans are illogical in predictable ways.  Emotions of compassion, belonging, helping others but alsocompetition and game play can motivate us through difficult situations.
  19. 19. Volume & Quantity Data Humans Volume Time Objects Product Tasks Change Quantity Users RulesSunday, March 25, 12 19This is the dimension of complexity most often relegated to the domain of engineers and developers. The sheer quantityof data, of processes, of different devices and screens, of users themselves. The challenge of designing for cross-channel experiences certainly comes into play here.
  20. 20. Volume & QuantitySunday, March 25, 12 20Photoshop is one of the most common and oldest software programs used by the masses. I personally have worked withit since 1995, 17 years. And I still don’t know even 25% of what it can do. It is a great example of both the quantity ofdifferent tasks dilemma, and also a great example of a piece of software that has grown without being restructured forusability. It’s kind of a bloated behemoth at this point.
  21. 21. Change Over Time Product Focus Humans Volume Time Product Features User Product Skills Change Quantity Users User BehaviorSunday, March 25, 12 21An element of complexity that is often over-looked is the dimension of time. People change of course over time, andthere skill levels using the same app can dramatically improve, as can their expectations.
  22. 22. Change Over TimeSunday, March 25, 12 22Software of course, also changes over time. Take a look at the Yahoo! Homepage in 1997, and again in 2012 – what willit look like in another decade? Will they still exist? Will a web page even be the right modality?
  23. 23. All Facets & Dimensions Skills Language Education Culture Data Product Focus Humans Volume Time Product Objects Features User Product Tasks Skills Change Quantity Users User Rules Behavior Role Training Permissions ExperienceSunday, March 25, 12 23A lot to think about, but only some of these dimensions and their facets are relevant for any givenproduct.
  24. 24. Designing for Complexity Contents 1. Overview: The Necessity of Complexity 2. Why We Fear the Complex 3. Dimensions of Complexity 4. Complex Applications 5. Complexity Toolkit: Heuristics & SoutionsSunday, March 25, 12 24Let’s quickly look at some common types of complexapps.
  25. 25. Logistics, March 25, 12 25Applications that manage as well as provide workflow control, oversight and reporting for logistics and operations arerarely simple. Think of all the details that rest behind a simple act like ordering a physical book on Amazon. Is it in stock?Which warehouse is most cost effective to ship from? How does it get picked, packed, labeled and shipped? How doesthis single book purchase weigh into the massive reporting structures behind Amazon accounting?Inventory management is just one example of a logistics application. Supply chain management and shipping are otherrelated examples. And if thinking through the purchase of a single book seems complex, imagine the supply chainmanagement applications that track every single part and supplier for a car, or a smart phone.
  26. 26. Remote MonitoringSunday, March 25, 12 26Software to oversee, monitor, maintain and control complex systems from afar are another seriously intricate andinvolved design challenge. Examples of this type of application would be the infamous systems used for air traffic controlas well as train and subway control. I have never seen the software that manages the New York subway system, but it iseasy to imagine its detailed demands as well as the possibly life imperiling consequences of thoughtless design choices
  27. 27. Database ManagementSunday, March 25, 12 27Distributed database and network management tools are another common sub-species of this software category. Notonly can a database or network schema involve thousands of objects and nodes, the virtual nature of these objects justadds another layer of abstraction to test and stretch the human brain. The database clusters that run the New York StockExchange are one example of the natural extreme of what software can create and manage for mankind, and theynever will be simple.
  28. 28. Accounting, Analytics & FinanceSunday, March 25, 12 28Here is a screenshot from Quickbooks, a common accounting app. It’s not the worst, it’s not the easiest either.Interestingly, Mint tried to solve for this problem of the complexities of managing personal finance. When we got toomany accounts (too complex), it stopped working for me at all 
  29. 29. Makerly Applications 3d modeling, engineering, complex graphics and video editingSunday, March 25, 12 29Applications used to plan and design real world and virtual objects are another form of extremely complex applications.On the screen is a view of Blender, an open source 3d modeling tool I personally like.3D tools and their interfaces have always been particularly interesting to me, since they require a constant mentalabstraction from 3d to 2d and back again.
  30. 30. Designing for Complexity Contents 1. Overview: The Necessity of Complexity 2. Why We Fear the Complex 3. Dimensions of Complexity 4. Complex Applications 5. Complexity Toolkit: Heuristics & SolutionsSunday, March 25, 12 30And finally, the moment you have been waiting for – some common and easy to use design techniques for complexproblems.
  31. 31. Prioritize Tasks 1.2.3 PRIORITIZE PATTERNS DATAVIS ROLES LEARN REVEAL ZOOM SOCIAL NO UI WEIGHTING * RANKING * SEGMENTATION * GROUPINGSunday, March 25, 12 31Most enterprise software packages can do hundreds or even thousands of tasks, but not all of theses tasks are equallyimportant or frequent. Therefore, going through an exercise to prioritize use cases can be extremely helpful. Once adesigner knows what tasks are most common versus least common, it is far easier to make UI prioritization decisions suchas choosing what actions are triggered by big buttons instead of small text links, or what items are in the main navigationversus secondary or tertiary navigation.This exercise is known as weighting. Weighting allows the human brain to easily identify the most important controls in anapplication easily. Un-weighted applications can be visually overwhelming, whereas weighting and prioritization guideusers to their most common destinations effortlessly.Segmentation is another corollary to weighting. By grouping tasks around a common theme or object, users will naturallyseek and find related controls. Logical groupings can be around objects, or around common workflows. For example,users, groups, roles and permissions are almost always grouped together.• Group controls around a common theme, workflow• Example: Users, groups, permissions• Example: heating, cooling, a/v in a car dashboardOf course, weighting and segmentation do nothing to help manage complexity if they aren’t approached from theperspective of the personas representing your heaviest users. If you weight your tasks according to the feature bulletpoints on your product’s sales presentations, or segment tasks according to your organization’s org chart, users will feel thefunctionality they rely on to do their jobs has been buried.
  32. 32. Use Patterns & Consistency 1.2.3 PRIORITIZE PATTERNS DATAVIS ROLES LEARN REVEAL ZOOM SOCIAL NO UISunday, March 25, 12 32Be consistent, appeal to muscle memory, don’t re-invent the wheel (unless you actually are an innovative automotivecompany)Humans just love patterns. We are hardwired to do the same things in the same way repeatedly. We look for objects inthe physical world to stay where they were last put, and we expect the same of our software. Therefore, keepingnavigation, language and page placement consistent across an application is key. If a command says Start Server onone page and is shown by a big green button, the same language and visual treatment should be used everywhereconsistently. Similarly, if a link to My Account is shown on the top right of some screens, it should consistently keep thesame placement across all screens. Other common examples: wizards, right-click options,Patterns are another similar technique to appeal to familiarity and recognizable controls. One of the more commonpatterns known to many users is the use of a wizard to guide users through a multi-step process. Most everyone willrecognize a wizard, know that the numbered steps represent parts to the process, and will have a clear sense of wherethey are and what needs to be done. When patterns emerge as part of your product, it makes sense to use thesepatterns consistently, to both reinforce and satisfy user expectations about their behavior. This consistency can providethe user with the confidence that the time and energy they invest in mastery will be rewarded.CONSISTENCY• In placement (search on the upper right)• In language (log in, log out – sign in, sign out)• In solution and approach (filters or a scope bar)• Consider internal (within the app) and external (within all software) consistencySky & Water I – M.C. Escher -
  33. 33. Use Patterns: Don’t Reinvent the Wheel (unless you are an auto company)Sunday, March 25, 12 33A little competitive analysis can go a long way and save a lot of money.I found it amusing and completely appropriate that Expedia, Kayak and Orbitz use an almost identical pattern to start atravel search. And why not!
  34. 34. Use Data Visualizations 1.2.3 PRIORITIZE PATTERNS DATAVIS ROLES LEARN REVEAL ZOOM SOCIAL NO UISunday, March 25, 12 34. Use Data Visualizations (wisely) …use the power of human pattern recognitionData visualizations are all the rage and for good reason – there is nothing like a basic line graph to make a trend immediatelyobvious from what would otherwise be an indistinguishable sea of numbers. A picture IS worth a thousand words. Charts andgraphs are absolutely invaluable for parsing large data sets and getting at underlying anomalies, trends, totals, comparisons andproportions. When used properly, data visualization can be used to tell a story, alert users to errors and oddities as well as call outrecurring events and issues.The key is to keep data visualization relevant and accurate, with an appropriate level of fidelity and user control. The choice ofwhich data to visualize and of the data visualization method should be appropriate to the user’s task as it relates to the data.Extraneous charts or chart types (whether to provide eye candy or other spurious motivations) only serve to clutter and detractfrom the clarity of the data message the expert user needs to be able to receive in a timely and efficient manner. being said, it is equally important to provide a sufficient level of granularity and user control to allow the user to completetheir task. If the user needs be able to see daily values, showing them a chart that only contains monthly values isn’t going to helpthe user much with their task. Some tasks require the ability to apply complex filters and rules to reveal patterns or associations thatwould otherwise be difficult to detect. In order to choose these mechanisms wisely, it is of the utmost important to have a crystalclear understanding of the nature of the user’s tasks, particularly those of the frequent/heavy/expert user.
  35. 35. Use Interesting Data Viz Tell a story, make it beautiful • stream graphs • sankey diagrams • sparklines • bubble charts • network graphs • conceptual maps • topography maps formed-eigenfactor-flash/Sunday, March 25, 12 35This visualization gives an overview of a citation for a set of research periodicals. A table of data would have been functional, butthis gorgeous illustration is a lot more fun to parse, and shows clear clusters immediately. Another way to think of it is that it appealsto Fast Thinking.The colors represent the four main groups of journals, which are further subdivided into fields in the outer ring. The segments of theinner ring represent the individual journals, scaled by frequency.Well-Formed Eigenfactor is an interactive visualizations based on the Eigenfactorâ„¢ Metrics and hierarchical clustering to exploreemerging patterns in citation networks. It’s a cooperation project between the Eigenfactor Project (data analysis) and MoritzStefaner known for his work  in the information aesthetics and interactive visualization fields.
  36. 36. Match UI to Roles 1.2.3 PRIORITIZE PATTERNS DATAVIS ROLES LEARN REVEAL ZOOM SOCIAL NO UISunday, March 25, 12 36Most complex software is designed for not just one type of user, but several. For example, the domain administrator whosets up a process for source control management to be used throughout an entire company is not the developer whowill be checking in code. Personas to the rescue! By carefully identifying the different types of users in a system (personasor roles), and the tasks they are required to perform, large chunks of the application can be “hidden” from those userswho will never need them. Adobe figured out that web designers and photographers need different apps, and thusFireworks and Lightroom grew out of Photoshop.Adapting the user interface to the role of the user and their specific needs requires a fair amount of careful planning upfront, but it can be a huge aid in removing superfluous commands and complexity from the user’s experience.•Those Personas sure come in handy• Identify your roles, then do a task ranking per role• Consider users with multiple roles• Roles can be directly tied to permissions
  37. 37. Behavioral Roles, March 25, 12 37Some roles to not match to tasks, job roles or titles. This diagram displays the different types of social users, each of whichwill have different needs and expectations from a product. These categories can be quite mutable. I tend to shift fromSpectator, to Joiner, to Critic, to Inactive, myself.
  38. 38. Learn and Adapt Based on 1.2.3 PRIORITIZE PATTERNS DATAVIS ROLES LEARN REVEAL ZOOM SOCIAL NO UISunday, March 25, 12 38Software systems are too often designed as static. What you get out of the box, is what you get, forever. However, it isnot hard to see after a week or month, what tools and controls are used by individuals most often. A set of user-specificfrequent tasks on the home or dashboard of an application is a quick way to provide short cuts for each user to whatthey need and do most often. More sophisticated UIs can change the weighting and priority in navigation and screenslayouts to match user behavior as well. Similarly, forms or entries that are re-used frequently, and with the same commonvalues, can be pre-filled based on previous repeated entries. Here the concept of software memory comes into play tohelp the user gracefully complete repeated tasks as effortlessly as possible.Adaptive UIs require an understanding of the way a user’s task may change or evolve over time. Day one tasks aredifferent from month one tasks, and those may different yet again from month two tasks.• Search or browse – what’s your flavor• Layout customizations• Filter presets• Common tasks come first• Suggestions and hints – what to do next• People who bought this, also bought that
  39. 39. Expose Some Complexity When 1.2.3 PRIORITIZE PATTERNS DATAVIS ROLES LEARN REVEAL ZOOM SOCIAL NO UISunday, March 25, 12 39Boeing 747 – terribly complex, not something I would want to simplify with one button and a scroll wheel either.Remember from Thinking Fast & Slow – Slow thought is more accurate, smaller fonts encourage readers to absorb moreand read more carefully
  40. 40. Zoom: It’s All a Question of Perspective 1.2.3 PRIORITIZE PATTERNS DATAVIS ROLES LEARN REVEAL ZOOM SOCIAL NO UI Power of Ten – Charles & Ray Eames -, March 25, 12 40These are 4 stills from a designer classic, the Power of Ten by the Eames. Starting in the universe, to earth, to a human, toDNA. What to show, what is important in each frame, is all dependent on the zoom level. We zoom in and out ofapplications all the time as well. Search is a form of zoom. So are expanding and collapsing menus. Data visualizationsoften display the big picture, and then the use can dive into the data itself for a particular day, item or event.
  41. 41. Social & Emotive Design 1.2.3 PRIORITIZE PATTERNS DATAVIS ROLES LEARN REVEAL ZOOM SOCIAL NO UI • Social factors can mitigate complexity; provide motivation • Competition, leaderboards and rankings • Cooperation, sharing, bragging rights and helping others • Think Linux or GitHub or even FacebookSunday, March 25, 12 41Appeal to the social and human side by utilizing:- Social media, social aspects, etc- Humor & compassion- Sharing & community status- Rewards & accomplishments
  42. 42. And Remember, the Simplest UI is 1.2.3 PRIORITIZE PATTERNS DATAVIS ROLES LEARN REVEAL ZOOM SOCIAL NO UI • Phone/SMS/Notifications •Manual or wiki • Automation Never send a human in to do a computer’s job.Sunday, March 25, 12 42Sometimes, the best user experience solution is to skip the user interface entirely. It is always worth asking if a UI is theright solution for a problem, or if instead a script, a notification, and/or a wiki page of instructions might be the betteranswer.Strange as it may seem conceptually, sometimes the answer might not be great design, but great DevOps. DevOps isabout collaboration, people over process over tools. Taking it even a step further, NoOps is about automation; invisibletools that make people and process unnecessary. Whether NoOps turns out to be a pipe dream or not, it’s clear that inmany areas of software development and operations, there is a strong push towards automation as a means ofincreasing software quality. A desire for automation leads to the need to eliminate user interfaces that cannot be easilyscripted and ultimately controlled by other software.Never send a human in to do a computer’s job.
  43. 43. Thank you! Get in touch Twitter @cloudforest @cloudforestuxSunday, March 25, 12 43