Design for Developers
•Transferir como PPTX, PDF•
0 gostou•352 visualizações
Design for Developers, as presented at Northern Virginia Code Camp 2012
Recomendados
Mais conteúdo relacionado
Destaque
Semelhante a Design for Developers
Semelhante a Design for Developers (20)
Último
Último (20)
Design for Developers
- 1. Design for Developers Things You Need To Know If Your Users Are Human Ed Buhain October 27, 2012
- 4. You’re Surrounded! • Think of something you think is poorly designed. • Share with your group.
- 5. We’re Surrounded! • Pick a group representative. • Share with the whole room.
- 7. About Me Ed Buhain ed.buhain@excella.co @buhain m blog.buhain.com
- 8. Design for Developers Things You Need To Know If Your Users Are Human Ed Buhain October 27, 2012
- 11. Perception is biased by experience.
- 12. Perception is biased by experience.
- 13. Perception is biased by context. • Polish silverware.
- 14. Perception is biased by goals.
- 15. Perception is biased by goals.
- 16. Perception is biased by goals.
- 17. Perception is biased by goals.
- 18. Human Perception: Implications • Avoid ambiguity. • Be consistent. • Understand the goals.
- 22. Proximity
- 23. Proximity
- 24. Similarity
- 25. Common Fate
- 26. Continuity
- 27. Closure
- 28. Symmetry
- 29. Figure & Ground
- 30. Figure & Ground
- 33. Present Structured Data • 8775553948 • 5112345112345114
- 34. Present Structured Data • (877) 555-3948 • 5112 3451 1234 5114
- 35. Present Structured Data • You are confirmed on United Airlines flight 2049, departing from Washington-Dulles Airport at 10:00 a.m. on Saturday, October 27, 2012 and arriving at Seattle-Tacoma International Airport at 3:00 p.m. United Flight 2049 Washington-Dulles to Seattle- Tacoma Departs: Sat 10/27 10:00 AM
- 36. Present Readable Data • LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. DUIS NON NISI SED METUS INTERDUM LUCTUS. PROIN SCELERISQUE ORCI EU DIAM PLACERAT EUISMOD. CRAS IN NUNC MOLLIS LECTUS BLANDIT SAGITTIS. ALIQUAM ERAT VOLUTPAT. MAURIS SAPIEN TORTOR, ULLAMCORPER VITAE CONGUE UT, EUISMOD IN LECTUS. • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non nisi sed metus interdum luctus. Proin scelerisque orci eu diam placerat euismod. Cras in nunc mollis lectus blandit sagittis. Aliquam erat volutpat. Mauris sapien tortor, ullamcorper vitae congue ut, euismod in lectus.
- 37. Present Readable Data • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non nisi sed metus interdum luctus. Proin scelerisque orci eu diam placerat euismod. Cras in nunc mollis lectus blandit sagittis. Aliquam erat volutpat. Mauris sapien tortor, ullamcorper vitae congue ut, euismod in lectus.
- 38. Focus On Relevant Information
- 39. Focus On Relevant Information
- 40. Airport Signage • Color Coding • Terminology • Fonts • Pictograms
- 43. Windows 8 • Modern Design • International Typographic Style • Motion Design
- 44. Windows 8 Design Principles • Show pride in craftsmanship. • Do more with less. • Be fast and fluid. • Be authentically digital. • Win as one.
- 45. Tiles
- 46. View States
- 47. App Bars
- 48. Charms
- 49. Message Dialogs
- 50. Flyouts
- 51. Context Menus
- 52. Toasts
- 53. App Page
- 54. App Page
- 55. App Page
- 56. App Page
- 57. Certification
- 59. Certification
- 62. About Me Ed Buhain ed.buhain@excella.co @buhain m blog.buhain.com
- 64. Walkabout • Do you have an app (or will you)? • What effect does design have on your app? • Which elements of Windows 8 will you use?
Notas do Editor
- Here’s a door from Excella's main office in Arlington.Which way does the door open?It's a really nice office, but here, we sacrificed obvious cues for the sake of beauty and symmetry -- or at least conforming to the design standards of the building. We're used to cues that tell us whether to (gesture) push or pull.When we first moved in, I noticed one of Excella's partners looking up every time he approached a doorway. He was looking for the only visual cue we have…
- … the door stop at the top of the door.Someone gave me a helpful mnemonic. The main doors in the office open away from the main space.Is that helpful? Maybe.I'll also tell you that to make room for that knowledge, I probably forgot something else. Was it a grocery list from July? Was I supposed to be somewhere else today? Should your users have to make up mnemonics because you forgot to think about how they'd use your software?
- Let's do a really quick exercise. Let's take a really quick minute to get into little groups -- pairs, trios, whoever's close by. If you don't know each other, say hi and introduce yourselves. What I want you to do is think about something you think is poorly designed, and why. It can be anything -- software, hardware, everyday things.Don't worry about whether or not you agree or disagree.Share with your group.When we're done we'll share some of our ideas.(Pair Share - 90s)
- Now pick someone to represent your little group. We'll go around the room and just shout out some of the ideas.(Shout Out – 120s)
- Have you ever built THE FORM? Have you ever thought it was a good idea?When this stuff was new, it was pretty neat. You could throw something like this together pretty quickly.Our needs have evolved. THE FORM might work, sure, but there are so many things wrong with the form.Today, I want to suggest an alternative.
- So, who am I?I should probably say what I do. My certifications say I’m an MCPD Enterprise Applications Developer (which probably isn’t the term for it anymore), a PMP Project Management Professional, and a CSP Certified Scrum Professional.I say that I’m a software engineer or a software developer.I’m not a designer. I say I’m borderline OCD – I like everything in its place – but I’m not a psychologist, either.
- This is design for developers.If I'm able to make only one point today, it is that the technologies we build must also communicate effectively. And it's a challenge, because we won't always be there to explain how to use it; it's up to our designs to be self-explanatory.Just because you can do something with design, just because you can do something with technology, doesn't mean you should.
- You could end up with something that people can't use.You could end up with the Carelman teapot.Today I want to explain our human biases, describe design principles I think every developer should know, and show you how our software platforms give us the tools to build better designs.
- Set Phasers On StunTherac 25Well, we know that software isn’t a perfect thing. We know that humans are pretty flawed, too.Let’s look at how flawed our perception is.
- Perception is biased by experience.
- I had a conversation with a colleague the other day…
- Polish silverware. Are we referring to the verb?
- Perception is biased by goals.Let’s do a little experiment. On the next slide I'm going to show you the contents of this toolbox. I'm going to give you 3 seconds to answer a question: are there scissors in the toolbox? Ready? Go.
- 3-2-1
- So, were there scissorsin the toolbox? Now I’ll ask you this: Was there a screwdriverin the toolbox? What was on the bottom right? What else was in the toolbox?
- Well, we have to look again. We just found out that our perception is biased by our goals. I kind of just told you not to look for anything else! We perceive what we expect to see, not what's actually there. Our perception is biased by our experience, context, and our goals.So what’s that mean?
- Avoid ambiguity: be sure that your users interpret the display the same way. Button vs. Label. Vision plus software for the Therac 25.Be consistent: Place information and controls in the same locations.Understand the goals: Users come to a system with goals they want to achieve. Washington Gas.
- Here’s my opportunity to complain about consistency.
- And speaking of understanding the goals…So, what sorts of things should we consider when we build our user interfaces?
- Gestalt - principles of visual perception History - German psychologists - Our visual system automatically imposes structure on visual input and is “wired” to perceive whole shapes, figures, and objects rather than disconnected edges, lines, and areas. Our brains simplify things for us.Hand out graphic organizer.Today we’ll talk about 7 of these principles. I don’t know if that’s all of them, but they’re all relevant to us.You have 7 boxes on your sheet. Grab a pen and use this sheet so you remember the principles. Draw, write, whatever strikes you about what I show you.
- Gestalt includes some principles of grouping.Proximity - items that are closer together are grouped. On this slide we have twelve stars but our minds group them into rows.
- On this slide we have twelve stars again but our minds group them into columns.
- Similarity – Items that look similar are grouped.
- Common Fate – Items that move together are grouped.
- Gestalt includes some principles to resolve ambiguity.Continuity – we’re biased to see continuous forms; we can even fill in missing data.Does anyone recognize this logo?Imaging/Intelligence – can you imagine how some OCR algorithms would work on this?
- Closure – Our brains close open figures so they are perceived as whole objects.
- Gestalt includes some principles for organizing data.Symmetry - parse complex scenes in a way that reduces the complexity.If we had to draw that, how would we do it? How would a computer do it?
- Figure/Ground - circle/triangle, watermarkWe can separate what we see into layers – the foreground (figure) and the background (ground)
- Figure/Ground - circle/triangle, watermarkGot ‘em? Do you see how biased we are?So given that we’ve known about these biases for years, why do we have debacles like this?!?!
- We know these principles, but we don't always follow them. This is an elevator in a building nearby. What's wrong with this interface? First off, I have to look around for a while to find the lobby button. It’s kind of isolated and it has a little star on its label, but it’s not as obvious as it could be. Second, what did we just learn about grouping?
- What happens if we look at the buttons from this perspective?So – now that we know these principles of human perception… how do we start applying them?
- Unstructured vs. Structured DataWe’re conditioned to look for structured data.
- Phone Number Formats“Please do not enter dashes or spaces.”
- Unstructured vs. Structured DataWe’re conditioned to look for structured data. Specific information vs. natural language prose.Prose vs. Tables - Airline ReservationCut the fluff!
- Much like the ambiguous door.Typefaces
- Background Noise.I’m color blind so I’m really good at picking bad color combinations.
- Peripheral vision sucks!
- Peripheral VisionWhere have we applied this knowledge? Signage.
- Cleanliness, readability, e.g. airport - know exactly what it means without spending time thinking about it, clear, simple iconsMijksenaar
- They put a lot of thought into the airport signage at Schiphol.Color coding: Color should make sense and clearly communicate an information category.Terminology: Assume that visitors know nothing about the facility and use terminology that is easily understandable to everyone. Fonts: Don’t use more than one font, and stick to such sans-serif typefaces as Frutiger, Clearview, Gill or Meta. Pictograms: Don’t rely too much on pictograms; supplement with text, especially with less familiar functions.
- Modern Design - Bauhaus - Reduce to the EssenceInternational Typographic Style - Swiss Design - Clear, Honest and BeautifulMotion Design - Cinematography - Bring it to Life
- Show pride in craftsmanship - "Oh wow, that's really cool." Woodworking - quality of joints. National Zoo app review.Devote time and energy to small things that are seen often by many.Engineer the experience to be complete and polished at every stage. Do more with less - content before chrome – the answering machine messageCreate a clean and purposeful experience by leaving only the most relevant elements on screen so people can be immersed in the content. Be fast and fluid - Response Time - App Cert, launch in 5s or less, suspend in 2s or lessLet people interact directly with content, and respond to actions quickly with matching energy.Bring life to the experience, create a sense of continuity and tell a story through meaningful use of motion.Be authentically digitalTake full advantage of the digital medium. Remove physical boundaries to create experiences that are more efficient and effortless than reality.Win as one - consistency, users know how to use your app without ever using it beforeTake advantage of what people already know to provide a sense of familiarity, control, and confidence.
- Let’s look at all the different tools we have available to us!Grab your notes. What principles do you see in play?Tiles – Start Menu – Grouping
- View States – Organizing Data
- App Bars - Consistency
- Charms - Consistency
- Message Dialogs - Reduce Noise, Figure/Ground
- Flyouts - Reduce Noise
- Context Menus - Reduce Noise
- Toasts - Peripheral Vision
- Show Part of the next Page - Closure
- App Page / CanvasPage Layout The grid, units Why?
- App page header - 5 units (100 px) from the top, 6 units (120px) from the leftContent - 7 units from the top, 6 units from the leftNo bottom margin (scroll off the screen)
- Horizontal padding - hard-edged items, e.g. images, tiles - 2 sub-units (10px)Lists - 2 units (40px) Vertical padding - hard-edged items - 2 sub-units (10px)Tile and text lists - 1 unit (20px) Horizontal padding between groups - 4 units (80px) Why?
- Who’s gone through the certification process? Polishing your app might take longer than the functionality! Touch, mouse, and keyboard input - touchable elements within thumbs' reach
- Device capabilities - screen sizes, device featuresFluid, multiple views of your app - logo sizes, snapping, built-in graphical scalingRoaming data – my preferences go with me
- Two references I want you to do it. I told you about Set Phasers on Stun.A lot of what I showed you comes from Designing with the Mind in Mind by Jeff Johnson. It’s a beautiful book in print, although there’s a Kindle Edition, too.
- About Me
- As you head out the door and head back out to the lobby, pair up. Pick a question or two.You don't have much time because the lobby's right there...Hang out at the Excella table to relax and talk Windows 8.