Design Awareness

An introduction to design thinking for developers and executive colleagues.

Transcript

1. Design Awareness An introduction to design for everyone Brian McConnell October, 2012
2. 1995 Built first website 2000 Founded web design agency 2004 Started profitable media property ‘03-’08 Programmer & Tech Lead 2008 Learned I’m not a user Who is this guy? I’ve been doing this for a long time. I’ve worked in every part of the delivery chain. In 2008 I did my first user tests of an application for AHA. A lightbulb went off for me about how important the interface is in peoples’ lives.
3. Design Awareness 1. Defining design. 2. The business value of design. 3. Design fundamentals. 4. Making design happen.
4. 1. Defining design. 2. The business value of design. 3. Design fundamentals. 4. Making design happen. Design Awareness
5. Design is everywhere. Our daily lives are full of these interactions. Everything we touch, read, or listen to was designed by someone. Consider some of these interfaces in our office:
6. This is the microwave in our kitchen. How many of you need to cook fish in there? What about the clock? Somebody decided that the off button needed to be more prominent than the start button. This is full of features we don’t really need. The design on the right is a microwave MVP. This fits with how people reheat their leftovers. 30 seconds, stick your finger in it, add more time.
7. This is the thermostat in our office. There are three different numbers. What’s the current temperature? What’s the temperature you want? How do you adjust that desired temperature? What’s the hvac system doing right now? What is that third temperature for? At least it tells us what day it is. Consider a different kind of design. The desired temperature is clear. The current temperature is also present with proximity layout connecting it to the delta between the current temperature and desired temperature.
8. Soy sauce is the ultimate commodity. It’s literally salt water. There is no such thing as “gourmet” soy sauce. The difference between one brand and the next is the design. Kikkoman is a design icon that you see on the table of every asian restaurant in the country. They’ve achieved this status by designing a better experience. Try pouring a small amount of soy sauce out of a flimsy plastic bottle. Try pouring a small amount out of a rigid glass bottle with the narrow pour spout.
9. The magazine cover on the left is a landing page. It’s covered in calls to action that have been carefully worded and colored to attract attention. The magazine on the right is a richer experience that tells a story about “bee-stung” lips.
10. This font is called Avenir. It is san-serif, geometric, high x- It was designed in 1988 by Adrian Frutiger. Even the type that you’re looking at was designed by someone. Some person made careful decisions about the reading experience considering the technology, the font’s use and the emotional connection of humans to basic geometric shapes.
11. Design is communication, not decoration. Here are some things I’ve heard people say over the last couple of months: "Don’t spend much time on it. Just mock it up." "... I looks that way because it’s the designer's prerogative." "Can you make this look good?" “We just need some design guidance later.”
12. Design is communication, not decoration. It’s a process for improving human interactions. You can not have a well designed product if treat design like window dressing. Design isn’t about looks. It’s about creating solutions for people.
13. Design fulfills us. Good design has the ability to fulfill people by solving menial problems for them. Every pain point our customers have is an opportunity to delight them.
14. Maslow’s Higherarchy Abraham Maslow’s 1943 paper "A Theory of Human Motivation." http://en.wikipedia.org/wiki/Maslow's_hierarchy_of_needs
15. A design view of Maslow Simply functional is not enough. A barely functional or useful tool becomes a chore. Simply usable is not enough. A dull usable tool becomes labor.
17. 1. Defining design. 2. The business value of design. 3. Design fundamentals. 4. Making design happen. Design Awareness
18. Design is a competitive advantage. Design enables you to solve problems. People will pay you to make their problems and their pain go away. People are solution agnostic and will use whatever works. This can be a competitive advantage.
19. The Diamond Rio was the first mass-market MP3 player in the US. The Rio had a ton of storage, worked on most computers, boasted excellent sound quality, it could record, it could create playlists, and it was affordable. It was a great product. So what happened?
20. Apple used better design to solve the core user need. How to get all your new music you downloaded from napster, off your computer, and where you wanted it. They created a better end to end solution that solved a problem. They designed a complete solution that solved most peoples’ needs.
21. Here are three picture sharing services that have terrific features and aesthetics. They’re all defunct. Why didn’t they succeed?
22. They didn’t solve the core problem. Remove the labor in sharing photos. Remove the need for photo editing, and organizing.
23. Instagram shares a photo in 4 taps. no data entry, no organizing, no photoshop.
24. We can see a strong correlation between design quality and market traction. Here are 3 charts comparing blogtalkradio with spreaker. Clockwise from top: compete.com, alexa, google trends BTR is plateaued while Spreaker is trending up. The difference is in the experience rather than the features.
25. Design is needed in the enterprise. The following data points tell a story of users in enterprises who’ve used elegant interfaces in iOS and Android and won’t settle for substandard experiences. The trends of BYOD and paying out of pocket for consumer SASSes indicates that design is a differentiator for enterprise users.
26. Smartphones have spoiled enterprise users. 95% smartphones 91% used for work 45% have tablets! “iPass Mobile Employee” Definition: Any worker using any mobile device (including laptop, smartphone, cellphone, or tablet) who accesses networks for work purposes. http://www.networkworld.com/news/2012/051012-android-ios-259183.html
27. Smartphones have spoiled enterprise users. iOS Blackberry Android http://www.networkworld.com/news/2012/051012-android-ios-259183.html 86% of users regularly use a well designed and polished interface.
28. Basecamp is used at: http://37signals.com/svn/posts/2997-sneaking-into-the-fortune-500-through-the-back-door
29. "Questions about whether design is necessary or affordable are quite beside the point: design is inevitable. The alternative to good design is bad design, not no design at all." --Douglas Martin Eliminating design is not an option.
30. 1. Defining design. 2. The business value of design. 3. Design fundamentals. 4. Making design happen. Design Awareness
31. An illuminated manuscript from 7th century Ireland. Graphic design today is the result of 1500 years of refinement.
32. The adding machine designed by Charles Babbage in 1822. Built posthumously in 1885. Programming is at its oldest 150 years old. That’s 1/10 of modern design practice.
33. Color Color theory is a big deal. It’s based on cues from nature and the wavelengths of light.
34. Colors has meaning Red has the shortest wavelength and the highest energy. In nature it usually indicates danger: either in toxic plants or hostile animals. Orange is also a warm color. It’s often associated with the fruit of the same color and autumn indicating change and motion. Fire is orange. Yellow is another energetic color due to its association with the sun and gold. Green is quite obviously a calming color symbolic of rebirth and fertility. The wavelengths are much longer than red and warm colors. Blue is another much cooler color. In addition to its physics it has connotations of mood and also professionalism. Purple is the color of royalty due to its rarity in nature. The longest wavelength in the visible spectrum means it has less energy than other colors.
35. Brands designing their identity lean heavily on color because color conveys core identity values.
36. Typography
37. Helvetica Didot MT Trade Gothic Rockwell Caslon Gil Sans Thin FF Din Regular Cheltenham Blackmoor Banana Split League Script Digital-7 Eccentric Rosewood Cooper Swan Song Type faces have personalities. Every font tells a story. Choose the font that tells your story. Serifs and serif fonts are the oldest. The serifs are residue from calligraphy. San-serifs are newer and therefore perceived as more modern. Each of these was designed in the 20th century. They’re easier to read on low resolution screens. Every special typeface conveys an emotion. {Type weights and color structure and prioritize content.}
38. Layout & Form Page structure is not haphazard or esoteric. It follows an order and structure.
39. Grid Systems
40. An same manuscript we saw earlier. The type setting follows the same leading and line-length rules still used today: 62% of the page is dedicated to type, line heights are 150% of the typeface height, line lengths are limited to 40 characters. The yellow rectangle indicates a golden-rectangle. More on this in a minute...
41. The Cinchcast Connect Studio follows a grid system. 50% of the page is dedicated to the most important task while 50% is dedicated to other functions. The proportions of the page promote focus.
42. Proportions in Nature
43. 1, 1, 2, 3, 5, 8, 13, 21, 34, 55 a/b = .618 Layouts are defined by geometry. The fibonnacci sequence - a popular trivia question among programmers - is a useful tool in structuring content. Dividing one number by its following number produces a constant. This is the golden ratio.
44. 1, 1, 2, 3, 5, 8, 13, 21, 34, 55 The golden ratio is found throughout nature.
45. The greeks knew about it. Parthenon got all kinds of golden ratios. Floor plan, alter, facade...
46. Twitter’s redesign uses the golden ratio in constructing its layout.
47. So do we. This is the new MyBTR prototype.
48. In god we trust. All others bring data. We deal with data not opinions.
49. Quantitiative data We deal with data not opinions.
50. Quantitative data informs us on what users are really doing and what their needs are. We found a particular URL in blogtalkradio receiving a lot of traffic... but couldn’t recreate that on the segments page. Why does it have the tab url parameter? What is so valuable about this page that it has zero! bounces? Why are people navigating to it distinctly (high % of uniques)? Why are people navigating to the archives page when they tell us anecdotally they don’t use it?
51. We finally found the link on the dashboard.
52. This insight is the reason we made metrics a focus of the MyBTR redesign.
53. Qualitative data We deal with data not opinions.
54. User testing. User surveys.
55. 1. Defining design. 2. The business value of design. 3. Design fundamentals. 4. Making design happen. Design Awareness
56. Design is a process. The difference between good design and great design is the hard work you put into it.
57. "What I really want is a product that is complex, has a steep learning curve, carries lots of extra features and is really slow." --nobody This is the opposite of what people say they want. We all want the same things: great designs, and yet the world is full of bad experiences. How does this happen? Great design is the result of a focused process intended to deliver great design.
58. How does apple create great design?
59. Apple starts with a pixel perfect full mockup of every screen in an application. I’ve used the Cinchcast iPhone app for illustrating my point. This isn’t even the entire app, but it’s enough to demonstrate.
60. Apple then does 10 different versions of the same app in order to explore different solutions.
61. They choose the 3 best approaches.
62. They then iterate on those three approaches to refine them.
63. The best iteration is chosen for prototyping.
64. The Prototype then undergoes further iteration.
65. This is what that level of effort might look like.
66. Product process
67. Design Research Information architecture UI Design Iteration Development Design Prototype Development Refactoring Planning Objectives Requirements Validation Prioritization Testing Regression Staging Data Production Data Production Env. Waterfall This is the waterfall methodology. It follows a linear path that mimics the passing of time. It serializes disciplines and communication.
68. Design Information architecture UI Design Development Prototype Development Planning Requirements Prioritization Testing Staging Data Production Env. Scrum-but The old process at Cinchcast. We excised crucial steps from the waterfall process. Simply cutting time and effort can’t yield the same scope or quality. It also doesn’t allow for change in the latter stages. We need to find a new way of working.
69. Sketch Refine Prototype Retool Test Measure Agile UX Agile UX
70. Agile UX Principles Communicate instead of document Work iteratively Tools Live style guide Prototypes Testing We’re not Apple. We need to find ways to create a great product with radically stricter constraints. “Agile UX” is the design response to agile development. It embodies the spirit of agile - and meeting the timelines - by massively narrowing scope, eschewing formal deliverables for communication loops between disciplines, and creating tools to connect those disciplines. We use these tools to drive the product design decisions.
71. Live Style Guide http://www.blogtalkradio.com/styleguide http://platform.cinchcast.com/content/styleguide.html A “live” style guide differs from traditional style guides by using live application code. Using the actual styles and components the application is built from allows us to maintain a library of reusable components. This radically speeds up design and development.
72. This is the Cinchcast live style guide. You can see tab components, buttons, and some instructions about designing forms.
73. The settings page was built with no UI design input by applying the styleguide to a wireframe.
74. The final version of the page was designed in HTML using the style guide components in just 3 hours.
75. Prototypes Prototyping is not simply a way to validate your idea; it is an integral part of your innovation process. We build to think and learn. “The clothes just fit differently when you put them on.”
76. Prototypes in action: a “tracer bullet” of the registration form builder gave us a framework for the workflow and UI controls needed.
77. The registration form builder was skinned in a day by applying our style guide to the jQuery components used to build it
78. Testing
79. We did in person usability studies of studio prototypes. These tests uncovered quite a few key usability and product issues: we needed per item volume control, the importance of search, the run time was a distraction... but most of our assumptions about aesthetics were validated by user reactions.
80. Prototypes of MyBTR allowed user testing. This instructed us on how power users work around limitations in the platform’s navigation and reporting tools as well as highlight friction points in the scheduling process. It also allowed us to interact with responsive breakpoints.
81. Thank you! @mrbmc mrbmc.com Everyone loves unicorns.