Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h1>UI design <em>is</em> hard</h1> <p>To the question:</p> <blockquote> <p><strong>why is UI design so hard for most developers?</strong></p> </blockquote> <p>Try asking the inverse question:</p> <blockquote> <p><strong>why is <em>programming</em> so hard for most <em>UI designers</em>?</strong></p> </blockquote> <p>Coding a UI and designing a UI require different skills and a different mindset. UI design is hard for <em>most</em> developers, not <em>some</em> developers, just as writing code is hard for <em>most</em> designers, not <em>some</em> designers. </p> <p>Coding is hard. Design is hard too. Few people do both well. Good UI designers rarely write code. They may not even know how, yet they are still good designers. So why do good developers feel responsible for UI design? </p> <p>Knowing more about UI design will make you a better developer, but that doesn't mean you should be responsible for UI design. The reverse is true for designers: knowing how to write code will make them better designers, but that doesn't mean they should be responsible for coding the UI.</p> <h1>How to get better at UI design</h1> <p>For developers wanting to get better at UI design I have 3 basic pieces of advice:</p> <ol> <li><strong>Recognize design as a separate skill</strong>. Coding and design are separate but related. UI design is not a subset of coding. It requires a different mindset, knowledge base, and skill group. There are people out there who focus on UI design.</li> <li><strong>Learn about design</strong>. At least a little bit. Try to learn a few of the design concepts and techniques from the long list below. If you are more ambitious, read some books, attend a conference, take a class, get a degree. There are lot of ways to learn about design. <a href="http://www.librarything.com/work/8032" rel="nofollow noreferrer">Joel Spolky's book on UI design</a> is a good primer for developers, but there's a lot more to it and that's where designers come into the picture.</li> <li><strong>Work with designers</strong>. Good designers, if you can. People who do this work go by various titles. Today, the most common titles are User Experience Designer (UXD), Information Architect (IA), Interaction Designer(ID), and Usability Engineer. They think about design as much as you think about code. You can learn a lot from them, and they from you. Work with them however you can. Find people with these skills in your company. Maybe you need to hire someone. Or go to some conferences, attend webinars, and spend time in the UXD/IA/ID world.</li> </ol> <p>Here are some specific things you can learn. <strong>Don't try to learn everything</strong>. If you knew everything below you could call yourself an interaction designer or an information architect. <strong>Start with things near the top of the list</strong>. Focus on specific concepts and skills. Then move down and branch out. If you really like this stuff, consider it as a career path. Many developers move into managements, but UX design is another option.</p> <ul> <li><strong>Learn fundamental design concepts</strong>. You should know about affordances, visibility, feedback, mappings, Fitt's law, poka-yokes, and more. I recommend reading <em><a href="http://www.librarything.com/work/768" rel="nofollow noreferrer">The Design of Everyday Things</a></em> (Don Norman) and <em><a href="http://www.librarything.com/work/62763" rel="nofollow noreferrer">Universal Principles of Design</a></em> (Lidwell, Holden, &amp; Butler)</li> <li><strong>Learn about user experience</strong>. This is becoming the umbrella term for the human-centered design of web sites, applications, and any other digital artifact. The classic primer here is <em><a href="http://www.librarything.com/work/62762" rel="nofollow noreferrer">The elements of User Experience</a></em> (Jesse James Garrett). You can get an <a href="http://www.jjg.net/elements/" rel="nofollow noreferrer">overview and the first few chapters from the author's site</a>.</li> <li><strong>Learn to sketch designs</strong>. Sketching is fast way to <em>explore</em> design options and find the right design, whereas usability testing is about getting the design right. Paper prototyping is fast, cheap, and effective during the early design stages. Much faster than coding a digital prototype. The key text here is <em><a href="http://www.librarything.com/work/4701386" rel="nofollow noreferrer">Sketching User Experience: Getting the design right and the right design</a></em> (<a href="http://billbuxton.com/" rel="nofollow noreferrer">Bill Buxton</a>). Sketching is a particularly useful skill when working with IA/ID/UX designers. Your collaboration will be more effective. For a good primer on how and why designers sketch, watch the presentation <a href="http://www.slideshare.net/ugleah/how-to-be-a-ux-team-of-one" rel="nofollow noreferrer">How to be a UX team of one</a> by Leah Buley from the <a href="http://iasummit.org/" rel="nofollow noreferrer">2008 IA Summit</a>.</li> <li><strong>Learn paper prototyping</strong>. The fastest way to iteratively <em>test</em> an interface before you write code. Different from sketching and usability testing. The definitive book here is <em><a href="http://www.librarything.com/work/319043" rel="nofollow noreferrer">Paper Prototyping</a></em> (Carolyn Snyder). You can get a good DVD on this from the <a href="http://www.nngroup.com/reports/prototyping/" rel="nofollow noreferrer">Nielsen Norman Group</a>. </li> <li><strong>Learn usability testing</strong>. Discount testing is easy and effective. But for many UIs, usability is hard to do well. You can learn the basics quickly, but good usability people are invaluable. If you want a book, the classic is <em><a href="http://www.librarything.com/work/2292796" rel="nofollow noreferrer">The Handbook of Usability Testing</a></em> (Jeffrey Rubin). It's older but offers thorough coverage of lab-based testing. The famous starter book is <em><a href="http://www.librarything.com/work/12322" rel="nofollow noreferrer">Don't Make Me Think (2nd Ed)</a></em> (Steve Krug). I caution people about this one: Krug makes it sound easier than it is. But it is a good starting point. The user research books listed in the next point also cover this topic. And you can find piles about it online. </li> <li><strong>Learn about information architecture</strong>. The main book here is <em><a href="http://www.librarything.com/work/2608" rel="nofollow noreferrer">Information Architecture for the World Wide Web (3rd)</a></em> (Louis Rosenfeld &amp; Peter Morville). A good starter book is <em><a href="http://www.librarything.com/work/62754" rel="nofollow noreferrer">Information Architecture: Blueprints for the Web</a></em> (Christina Wodtke). For more, visit the <a href="http://iainstitute.org" rel="nofollow noreferrer">Information Architecture Institute</a> or attend the annual <a href="http://iasummit.org" rel="nofollow noreferrer">Information Architecture Summit</a>.</li> <li><strong>Learn about interaction design</strong>. The main book here is <em><a href="http://www.librarything.com/work/3037776" rel="nofollow noreferrer">The Essentials of Interaction Design (3rd)</a></em> (Alan Cooper, <em>et al</em>). A good starter book is <em><a href="http://www.librarything.com/work/1202204" rel="nofollow noreferrer">Designing for interaction</a></em> (Dan Saffer). For more, visit the <a href="http://ixda.org" rel="nofollow noreferrer">Interaction Design Association (IxDA)</a> or attend the annual <a href="http://interaction09.ixda.org" rel="nofollow noreferrer">Interaction Design conference</a>.</li> <li><strong>Learn fundamentals of graphic design</strong>. Graphic design is not UI design, but concepts from graphic design can improve an interface. Graphic design introduces design principles for the visual presentation of information, such as proximity, alignment, and small multiples. I recommend reading <em><a href="http://www.librarything.com/work/10038" rel="nofollow noreferrer">The non-designer's design book</a></em> (Robin Williams) and <em><a href="http://www.librarything.com/work/2815655" rel="nofollow noreferrer">Envisioning Information</a></em> (Edward Tufte)</li> <li><strong>Learn to do user research</strong>. Where usability tests an interface, user research tries to model users and their tasks through personas, scenarios, user journeys, and other documents. It's about understanding users and what they do, then using that to inform the design instead of guessing. Some techniques are interviews, surveys, diary studies, and cart sorting. Good books on this are <em><a href="http://www.librarything.com/work/62757" rel="nofollow noreferrer">Observing the User Experience</a></em> (Mike Kuniavsky) and <em><a href="http://www.librarything.com/work/457101" rel="nofollow noreferrer">Understanding Your Users</a></em> (Courage &amp; Baxter)</li> <li><strong>Learn to do field research</strong>. Watching people in the lab under artificial conditions helps (ie: usability), but there is nothing like watching people use your code in context: their home, their office, or wherever they use it. Goes by various names, including ethnography, field studies, and contextual inquiry. Here is <a href="http://www.adaptivepath.com/ideas/essays/archives/000569.php" rel="nofollow noreferrer">a good primer on field research</a>. Two of the better known books here are <em><a href="http://www.librarything.com/work/1330347" rel="nofollow noreferrer">Rapid Contextual Design</a></em> (Karen Holtzblatt <em>et al</em>) and <em><a href="http://www.librarything.com/work/311880" rel="nofollow noreferrer">User and task analysis for interface design</a></em> (Hackos &amp; Redish).</li> <li><strong>Read UX design web sites</strong>. Some of the big ones are <a href="http://boxesandarrows.com/" rel="nofollow noreferrer">Boxes &amp; Arrows</a>, <a href="http://www.uxmag.com/" rel="nofollow noreferrer">UX Mag</a>, <a href="http://uxmatters.com/" rel="nofollow noreferrer">UX Matters</a>, and <a href="http://digital-web.com" rel="nofollow noreferrer">Digital Web magazine</a>.</li> <li><strong>Use UI pattern libraries</strong>. There are patterns for interfaces. For web sites, I recommend <em><a href="http://www.librarything.com/work/5520877" rel="nofollow noreferrer">The Design of Sites, 2nd ed</a></em> (Van Duyne, <em>et al</em>) and <em><a href="http://www.librarything.com/work/5804" rel="nofollow noreferrer">Homepage usability: 50 websites deconstructed</a></em> (Jakob Nielsen &amp; Marie Tahir). For desktop applications I recommend <em><a href="http://www.librarything.com/work/630562" rel="nofollow noreferrer">Designing interfaces</a></em> (Jennifer Tidwell), and for web applications I recommend <em><a href="http://designingwebinterfaces.com" rel="nofollow noreferrer">Designing Web Interfaces: Principles and Patterns for Rich Interactions</a></em> (Bill Scott &amp; Theresa Neil). Online you should check <a href="http://www.welie.com/patterns/" rel="nofollow noreferrer">Welie pattern library</a>, <a href="http://ui-patterns.com/" rel="nofollow noreferrer">UI patterns</a>, and <a href="http://designingwebinterfaces.com/explore" rel="nofollow noreferrer">Web UI patterns</a>.</li> <li><strong>Attend UX design conferences</strong>. Some good annual conferences are: <a href="http://iasummit.org/" rel="nofollow noreferrer">Information Architecture Summit</a>, <a href="http://interaction09.ixda.org/" rel="nofollow noreferrer">Interaction '09 (IxDA)</a>, <a href="http://www.uie.com/events/uiconf/" rel="nofollow noreferrer">User Interface</a>, and <a href="http://uxweek.com" rel="nofollow noreferrer">UX week</a>.</li> <li><strong>Attend a workshop or webinar</strong>. You can take workshops, webinars, and online courses. This is far from a comprehensive list, but you might try the <a href="http://www.uie.com/events/virtual_seminars/" rel="nofollow noreferrer">UIE virtual seminars</a>, <a href="http://www.adaptivepath.com/events/" rel="nofollow noreferrer">Adaptive Path virtual seminars</a>, and <a href="http://www.rosenfeldmedia.com/webinars/" rel="nofollow noreferrer">UX webinars from Rosenfeld Media</a>.</li> <li><strong>Get a degree</strong>. A graduate degree in HCI is one approach, but these programs are mostly about writing coding. If you want to learn about the design of digital artifacts and devices, then you want a graduate program that's not in CS. Some options include <a href="http://www.design.cmu.edu/show_program.php?s=2&amp;t=3" rel="nofollow noreferrer">Interaction Design at Carnegie Mellon</a>, the <a href="http://www.stanford.edu/group/dschool/" rel="nofollow noreferrer">d-School at Stanford</a>, the <a href="http://itp.nyu.edu/itp/" rel="nofollow noreferrer">ITP program at NYU</a>, and <a href="http://www.iakm.kent.edu/" rel="nofollow noreferrer">Information Architecture &amp; Knowledge Management</a> at Kent State (disclosure: I'm on faculty at Kent; we are seeing more and more people with CS degrees moving into UX design instead of management, which is interesting, because management is the traditional path for developers who want to move away from writing code while staying in their field). There are many more programs. Each has their own perspective, areas of emphasis, and technical expectations. Some come out of the arts and visual design, others out of library and information science, and some from CS. Most are hybrids, but every hybrid has deeper roots in one or more fields. If this interests you, look around and try to understand the differences between these programs. Some offer online courses and certificate programs in addition to full-fledged degrees.</li> </ul> <h1>Why UI design is hard</h1> <p>Good UI design is hard because it involves 2 vastly different skills:</p> <ul> <li><strong>A deep understanding of the machine</strong>. People in this group worry about code first, people second. They have deep technological knowledge and skill. We call them developers, programmers, engineers, and so forth.</li> <li><strong>A deep understanding of people and design</strong>: People in this group worry about people first, code second. They have deep knowledge of how people interact with information, computers, and the world around them. We call them user experience designers, information architects, interaction designers, usability engineers, and so forth.</li> </ul> <p>This is the essential difference between these 2 groups—between developers and designers:</p> <ul> <li><strong>Developers make it work</strong>. They implement the functionality on your TiVo, your iPhone, your favorite website, etc. They make sure it actually does what it is supposed to do. Their highest priority is making it work.</li> <li><strong>Designers make people <em>love</em> it</strong>. They figure out how to interact with it, how it should look, and how it should feel. They design the experience of using the application, the web site, the device. Their highest priority is making you fall in love with what developers make. This is what is meant by user experience, and it's not the same as brand experience. </li> </ul> <p>Moreover, programming and design require <em>different mindsets</em>, not just different knowledge and different skills. Good UI design requires both mindsets, both knowledge bases, both skill groups. And it takes years to master either one.</p> <p>Developers should expect to find UI design hard, just as UI designers should expect to find writing code hard. </p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload