Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Should coders design

Sash Zats
March 01, 2018

Should coders design

Sash Zats

March 01, 2018
Tweet

More Decks by Sash Zats

Other Decks in Technology

Transcript

  1. 11 years ago I graduated with a masters degree in

    metallurgy - science of how to melt metals and alloys. Obviously I never worked in that field a single day. Should coders design
  2. and then self-taught software engineer. But even after transitioning into

    software engineering, I kept passion for design and soon enough realized not too many people in software engineering have that. At first it was just an intuition that having this skill is an advantage. 10 years later, this is my first attempt to formalize why this is a great skill to have and how you don't have to know how to draw to actually practice it. Should coders design
  3. I used the word "design" several times already, but I

    haven't explained what did I mean. What
  4. Whenever you use an overloaded term such as design, it

    makes sense to explain what will I use it for. If you google for design courses, 90% of the results are about the tools. You will probably agree that software engineering hardly ends with Xcode. What can be better than a quote from Steve Jobs to kick off your talk I will focus on "how it works" part. More precisely on how software engineers can contribute to this aspect of the product "design". "Design" Design is not just what it looks like and feels like. Design is how it works. ϔσαЀ;΅㶨΁Ϳ΄Ξ͜΁憎͞Ρ̵͡ Ϳ΄Ξ͜΁ఽͮΡ͡;͚ͩ͜;ͽ΅΀ ̶͚Ϳ͜䱛ᚆͯΡ͡Ͷ -- Steve Jobs
  5. Now when we agreed on what "design" is, and the

    what are we going to talk about, let me explain why I think it's an important topic Why
  6. We as engineers are easily excited about technology, architecture. It's

    easy to get carried away and focus on implementation details instead of "what are you building". I found myself in this situation quite a few times: beautiful architecture, marvellous code, but lousy user experience. Why • Avoid "lack of context" mistakes ̿πЀϓμφϕ΄ཹই̀Ψࢧ᭿ͯΡ͵ Η
  7. Imagine you've been tasked with building a car wheel, you

    did a good job: it is round, and it rolls on the road just fine. Why • Avoid "lack of context" mistakes ̿πЀϓμφϕ΄ཹই̀Ψࢧ᭿ͯΡ͵ Η
  8. Now imagine you didn't know it supposed to work in

    the dust, sand and dirt… without being repaired for many months… Why • Avoid "lack of context" mistakes ̿πЀϓμφϕ΄ཹই̀Ψࢧ᭿ͯΡ͵ Η
  9. on Mars! All these conditions would undoubtedly affect your wheel

    design. Without knowing entire spec it's possible to build a wheel, but it hardly will solve bigger problem at hand. Why • Avoid "lack of context" mistakes ̿πЀϓμφϕ΄ཹই̀Ψࢧ᭿ͯΡ͵ Η
  10. One of the common reasons engineers are waiting for designers

    is because designers forgot to export assets. It's surprisingly easy to learn how do it yourself. Why • Avoid "lack of context" mistakes • Be more independentsktch - ΞΠᇿᒈͭ ͼ㵕ͥ͵Η΁ • Unblock yourself - ᛔړͽͽͣ΀͚͡ ᘍ͞ͼΕΞ͜ sktch https://www.invisionapp.com/blog/sketch-front-end-developers-2/
  11. Another common reason for back and forth is missing behavior

    for certain scenarios. Imagine you open a user profile screen, and the authentication token has expired? What should you do? The easiest solution is to imagine that you are using someone else's (Apple's) app that has a similar functionality. What would you want to happen as a user? Would a cute error message make sense? A retry button? Would you like to be prompted to type your credentials again? Would you want app to crash? (Please don't do that) Detaching yourself from your codebase and imagining you are using someone else's app helps to lose the fear of solution complexity: you will know what you need to do in this situation, later you can figure out how to do it Why • Avoid "lack of context" mistakes • Be more independent • Unblock yourself • Resolve undefined behaviors - ๚ਧ嬝 㵕֢Ψᥴ䷥ͭΞ͜
  12. Finally spread the word whether it's within your company or

    the open-source community you are involved with. Everyone will benefit from having more design-aware engineers: next time your colleague reviews your code they will not only pay attention to the code quality, but will mention that you might've forgot to handle a case when no data is returned back or that you didn't match the original design in that particular scenario… Why • Avoid "lack of context" mistakes • Be more independent • Evangelize - 㬃᭲ͯΡ͵Η
  13. Imagine it is 2008, Apple is about to admit 3rd

    party apps to the App Store, you are helping to build the first of its kind app to find the best ramen around you. Contributing tech expertise ದ悬䌑槹ᘏ;ͭͼ΄揙ሠ • Latest technology and API available ๋ෛ΄ದ悬ΚAPI͢ڥአݢᚆ
  14. Designer suggests to start of with a search screen: you

    type in your address or pick a spot on the map and the app shows the best ramen. You can already see a room for improvement, right? Contributing tech expertise • Latest technology and API available ๋ෛ΄ದ悬ΚAPI͢ڥአݢᚆ
  15. If the most common case for our app is for

    people to find food around them, why don't we use the location sensor? That can simplify most common scenario or eliminate it altogether. You can save around 5-20 seconds every time people are using your app. It might seem like an obvious example now, but it's just due to the location being such a "trivial" technology these days. This one is probably the easiest yet the most powerful way to start with. If you are attending this conference or watching the video, chances you are interested in the new technology, and know a thing or two about the latest trends in tech and hottest new APIs. Don't take it for granted, not everyone is as involved in the technology. Contributing tech expertise • Latest technology and API available ๋ෛ΄ದ悬ΚAPI͢ڥአݢᚆ
  16. Designers, product managers or even other engineers are not necessarily

    as aware of the newest technologies to the same extent as you are. They might've heard of machine learning or augmented reality, they might even know what it looks like, but they might not know what the technology is capable of. Every technology these days has many facets: ML can be used to correct spelling, identify objects in the images, write a musical piece or drive your car. Our phones and laptops are very powerful devices that are capable of truly magical experiences, and we are going to take a look at a few examples later, you can be the person who highlights additional layer of technical expertise to explain Contributing tech expertise • Latest technology and API available • Helping your teammates to understand what's technologically possible ದ悬ጱ΁֜͢ݢᚆ͡ΨώЄϭϮαϕ΁ ቘᥴͫͱΡಋۗͧΨͯΡ
  17. Tony Fadell - inventor and designer behind iPod, and, later,

    Nest thermostats gave a great talk at TED few years ago where he goes behind the scene of his thinking. I highly recommend to watch it. Contributing perspective Habituationtf - 泿۸ tf https://www.ted.com/talks/tonyfadellthefirstsecretofdesignisnoticing
  18. One of the topics of his talk is habituation -

    property of our brain to offload hard work we do daily and turn it into a habit - something we do subconsciously, without thinking. Sometimes it's a good thing: it helps us when we are learning to drive - few months in we are noticeable less stressed, we don't have to focus on the signs, traffic lights, other drivers - it becomes a habit. Contributing perspective Habituation
  19. The same mechanism kicks in when we are dealing with

    an awkward position of a shelf at home, or it makes us click buttons in every standard iOS alert without looking, just to dismiss it as soon as possible and get back to whatever we were doing. Habituation also makes us stop noticing problems new users of our product will be very acutely aware of. That's partially why we are so good at critiquing others' products and not our own - we naturally stop seeing the problems we have to deal with daily. Hope you are seeing the danger in letting habituation to hide those problems from? Here are few simple tricks that make use much better at noticing and solving this kind of problems Contributing perspective Habituation
  20. When thermostats made their first appearance, they were quite simple,

    but as utility bills went up, manufactures tried to offer better products: programmable thermostats with many options to chose from. But people aren't great at predicting the future and most of the people outside of this room don't like to program all that much. Despite industry best efforts, people were not saving money. When Nest came up with their product they employed machine learning to observe your habits and predict how warm do you like your apartment on a given day of the year. Not only they solved the problem of savings, they also reduced amount of interaction with thermostat to the minimum, solving several complicated problems instead of just iterating on the UI design. Your problem usually doesn't exist on its own, it is usually preceded by some problems, along with some problems following it. Sometimes by zooming out you can not only solve the problem at hand but also tackle entire class problems people would still have even after you solved yours. Contributing perspective Habituation • Look broader
  21. If your iPhone can be unlocked with a fingerprint, you

    probably kept the names as "Finger 1", "Finger 2" under the Touch ID section of the Settings app. And maybe you were in a hurry when you registered one of your fingerprints, but now you want to re-add it again. But how are you gonna know which one to remove? And being security conscious person you probably don't want to name them "Right Thumb" or "Left Index Finger". To figure out which of the entries to remove just rest the finger on Touch ID and the corresponding row is going to get highlighted. This helps to solve the problem at the moment when person is the most frustrated. And it does so in a very elegant way! Contributing perspective Habituation • Look broader • Look closer
  22. I don't have kids of my own yet, but most

    of my friends already do. Hanging out with them means that you are constantly being bombarded with tons of questions: Why are cars not flying? Why don't we ask our pets what do they want? Why are fridges don't fill themselves with groceries? Why are cars don't drive themselves? As you can see all of these questions would be answered with "This is just the way world works" only a decade ago. Today you can already see self-stocking fridges, self-driving cars, Elon Musk might be delivering on flying cars with BFRs, and there are even some attempts to read pets' minds… Though I'm not sure how successful those are. What used to be a question that would leave parents without answer, becomes a reality. Make sure you embrace those kind of questions. Make sure you have people who "think young" on your team - this way you will always have someone who challenges needless dogmas. Contributing perspective Habituation • Look broader • Look closer • Think younger
  23. So why bother? It's like being a magician: guessing what

    was person's intent and making achieving the intent easier, faster and more delightful. Here are 3 delightful examples from Apple products And?
  24. Apple believes it is important to play the interface sound

    to confirm certain type of the user actions. For example when user records a photo or video. But no one ever wanted to record the confirmation sound, that's why Apple would play the inverse of the capture sound to make sure it won't be recorded with the video. Here I have to acknowledge, I tried to reproduce this one, and there's no sound played at all, but the idea is quite brilliant even if it's a myth. 3 examples from Apple • Shutter sound when recoding videosnd - 梍ኮ䦒΄τϰϐόЄςγЀϖ snd https://twitter.com/drunknbass/status/914043092923064320
  25. Imagine that you are sending a message to a person

    who owns an iPhone and MacBook. The most obvious thing would be to send a notification to both making sure that user is aware of the new message. Thinking about it a bit more, if I just unlocked my phone or glanced at my watch, chances are my attention is still on this device. Why not to send the notification there first and if I don't interact with any of the devices for a bit, only then send it to the others? 3 examples from Apple • Shutter sound when recoding video • Active deviceact act https://support.apple.com/en-us/HT208472
  26. Or if I have "hey, Siri" enabled and I'm at

    home where I have both my iPad and iPhone waiting for the trigger command, wouldn't it make sense to trigger the device that I just interacted with? Or I say "hey Siri play latest episode of Game of Thrones" and there's a variety of devices in the room, wouldn't it make sense to delegate this command to the Apple TV? 3 examples from Apple • Shutter sound when recoding video • Active deviceact act https://support.apple.com/en-us/HT208472
  27. Conversely, if Face ID fails to recognise you, but the

    match quality is higher than a certain threshold and you immediately follow the failure by entering your passcode, Face ID takes another capture and augments its enrolled Face ID data with the newly calculated mathematical representation. Apple leverages failure to recognise your face as a learning opportunity, as long as you confirmed your identity with alternative authentication, making consecutive unlocking with your face easier. This will help with temporary appearance alteration that go beyond acceptable range of variation. 3 examples from Apple • Shutter sound when recoding video • Active device • Face ID adaptivityfid fid https://images.apple.com/business/docs/FaceID_Security_Guide.pdf
  28. Today we covered how design is not about drawing We

    learned that being better at design will help you to be a more independent and powerful contributor We took a look at ways of contributing whether it's by providing your knowledge of modern technologies and educating your peers about them as well as by noticing and fixing problems around you that others just accept as a given And we checked out a few examples of what's possible when designers work together with software engineers to create better experiences that go beyond just software or just design. Outro
  29. This quote is so widely used, it almost became a

    cliche, but the core idea still stands! As you can see, you don't have to know how to draw, or use Photoshop to suggest great ideas that will make better product people love. And it's quite "simple", too - just ask yourself "Is my product solving a problem for people? If it does, what did they want to do? What was getting in their way? How to make the process more delightful and more frictionless" Of course it's not easy, but having this in mind along with "how do I make this code as functional and reactive as possible" will help. Outro Technology alone is not enough—it’s technology married with liberal arts, married with the humanities, that yields us the results that make our heart sing ದ悬΅ϷϦ϶ϸίЄϑΚՈ樌௔;Ӟ姼΁΀Ρͩ;ͽ౯̸΄ஞΨྈ ΥͱΡ愚ߝΚςЄϠφ΁䥮嶆ͫ΢Ρ -- Steve Jobs