<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">

  <title><![CDATA[dbanks design]]></title>
  <link href="http://dbanksdesign.com/atom.xml" rel="self"/>
  <link href="http://dbanksdesign.com/"/>
  <updated>2018-09-13T21:47:45-07:00</updated>
  <id>http://dbanksdesign.com/</id>
  <author>
    <name><![CDATA[Daniel Banks]]></name>
    <email><![CDATA[danny@dbanksdesign.com]]></email>
  </author>
  <generator uri="http://octopress.org/">Octopress</generator>

  
  <entry>
    <title type="html"><![CDATA[Kaizen Design]]></title>
    <link href="http://dbanksdesign.com/blog/kaizen-design/"/>
    <updated>2014-05-27T14:54:24-07:00</updated>
    <id>http://dbanksdesign.com/blog/kaizen-design</id>
    <content type="html"><![CDATA[<article class="article kaizen_design">

  <header class="article_header">
    <div class="article_header_inner">

      <h1 class="article_title" id="article_title">Kaizen Design</h1>

      <p class="article_subtitle" id="article_subtitle">Technology for the sake of technology, created without full consideration creates more problems than it aims to solve.</p>
    </div>
  </header>

  <section class="article_content">
    <div class="article_content_inner">
      <div class="center_article_content">
        <p class="article_content_intro">An idea I always strive to keep in mind is that of Kaizen. I first heard about the concept of Kaizen from Whitney Hess’ presentation on <em>Do It Yourself User Experience</em>. Kaizen is Japanese for “continuous improvement” or “change for the better,” and was first coined by Masaaki Iami in his book <em>Kaizen: The Key to Japan’s Competitive Success</em>.</p>

        <p>The original intent of the concept of Kaizen was to create an efficient and more humanized workflow in businesses. Kaizen is implemented in the workplace by asking all employees to continuously analyze their workflow, and to suggest any changes the company could enact to improve efficiency. This input is valuable because assembly line workers are the most knowledgeable about their work, and therefore the especially qualified to make suggestions on how to improve their performance. Their input is not only beneficial for the improvement of technical efficiency, but it also creates a heightened sense of community and involvement, by giving the workers a sense of participation and ownership within the company.</p>

        <p>These principles of self-analysis and improvement don’t need to be restricted to inner-company workings. It can also be applied to the relationship between the company and its customers. In Whitney Hess’ talk, she mentions how companies should continuously attempt to improve their applications, based on feedback and usability testing. No application is perfect, and furthermore the needs of users are constantly changing. Kaizen can be implemented through small things, such as maintaining open communication with customers through a feedback form. By doing this the company will have a better understanding of the needs of its users, and they will feel like their input is valued, and the product will be improved.</p>

        <p>Kaizen can also be applied to your own practices as a designer. Applying Kaizen to a design, be it is a website, logo, print ad, etc., can significantly improve the effectiveness of your creative process and the final result. Think about what you are working on at each moment – is it adding value to the design? Anything you add or subtract should improve the overall design of the project.</p>

        <blockquote>Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.</blockquote>

        <p>This is not to say that all design should be minimal, rather, all design should serve a purpose. “Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.” This quote from William Strunk Jr.’s Elements of Style, applies to design as well as writing. As designers, we are not indiscriminate embellishers; we should constantly strive to create concise designs. Perfecting efficient design won’t happen overnight. It takes time, effort, and continuous self-analysis to become the best designers we can be, and this self-examination and improvement is the essence of Kaizen. The path to excellence lies along continuous evaluation and improvement of our methods and practices. <em>Complacency is the death of a designer.</em></p>

        <p>There are many ways a designer can adopt Kaizen practices in their life in order to improve his or her skills. Paying attention to yourself and your process will help you to become a more efficient and concise designer. What makes you most productive, what gets you past designer’s block, how do you handle certain problems? These are all things we should be asking ourselves to better our process, and ourselves as designers. Besides continuous self- assessment, a designer should try to improve his or her self, and their design practice, by always continuing to educate themselves. This doesn’t just mean reading the latest ‘Top 10 jQuery Effects’ article, but learning about typographic rhythm, color theory, Gestalt Principles, psychology, cognitive science, and so on. If you know your weakness is typography, work on learning a bit each day. The best designers are the ones who are constantly learning new things, and address those things they struggle with.</p>

        <p>I try to think about Kaizen every day. How can I improve this design? How can I be a better designer? How can I be a better person? <em>If what I’m doing isn’t improving me – then what is it doing?</em></p>
      </div>
    </div>
  </section>
</article>]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[What's in a Name]]></title>
    <link href="http://dbanksdesign.com/blog/whats-in-a-name/"/>
    <updated>2014-05-27T14:50:02-07:00</updated>
    <id>http://dbanksdesign.com/blog/whats-in-a-name</id>
    <content type="html"><![CDATA[<article class="article electronic_car_doors">

  <header class="article_header">
    <div class="article_header_inner">

      <h1 class="article_title" id="article_title">What&#8217;s In A Name</h1>

      <p class="article_subtitle" id="article_subtitle">Technology for the sake of technology, created without full consideration creates more problems than it aims to solve.</p>
    </div>
  </header>

  <section class="article_content">
    <div class="article_content_inner">
      <div class="center_article_content">
        <p class="article_content_intro">I have recently noticed a disturbing trend in the field of design, both in personal and professional spheres. More and more I have noticed the application of ridiculous nomenclature and adjectives to the title of Designer. Rockstar Designer. Ninja Developer. Design Guru. CSS Wiz. Samurai Designer. Pixel Pusher. This needs to stop. As a designer, you are none of these things:</p>

        <ul class="column bulleted">
          <li>Rockstar</li>
          <li>Ninja/Samurai</li>
          <li>Guru</li>
          <li>Wiz</li>
          <li>Magician</li>
          <li>Pixel Pusher</li>
          <li>Jedi</li>
          <li>User Experience Professional*</li>
          <li>User Interface Engineer*</li>
          <li>Information Architect*</li>
        </ul>

        <aside class="note">Because most people misuse these titles</aside>

        <p><strong>To label yourself as such brings down the entire field of design.</strong></p>

        <h2>Rockstar</h2>
        <p>This is probably the most common modifier designers and developers use to describe themselves. <a href="http://artequalswork.com/">Nathan Ford</a> has made some great points as to why it’s just plain silly to call yourself a Rockstar Designer:</p>

        <blockquote>Great rock stars would be lousy designers, lacking the discipline and respect that is needed to accomplish effective communication. I still have absolutely no idea what Kurt Cobain was trying to convey, specifically. Designers need method, objectivity and consistency: three things that would probably kill many of the albums I most revere.</blockquote>

        <p>It’s understandable why someone would want to call him or herself a Rockstar. Rockstars rock, they’re awesome, and you rock at design don’t you? Well I hate to break it to you, but if you call yourself a Rockstar Designer, you probably don’t actually rock at design. If you need to add this modifier to the title of Designer, then maybe you don’t deserve that title to begin with. When you call yourself a “rock star” you debase both yourself as a designer, and design as a legitimate field in itself.</p>

        <h2>Samurai/Ninja</h2>

        <p>Your code is so clean and nimble that any bugs lingering in the shadows stand no chance. You are a cunning assassin of code and design. Designers call themselves “samurais” or “ninjas” in an attempt to present themselves as dedicated and efficient. Well, these qualities do not set you apart; all good designers are dedicated and efficient. And thus, as with the term “rockstar,” you demean the field of design by using a term as if it were necessary to distinguish those characteristics of yours as different from all other designers. You are saying “I’m not just a designer – I am also efficient and dedicated!” Through your negative implications about all other designers, you bring down the entire field and whether you believe it or not, that debases YOU as a member of that field as well.</p>

        <h2>Guru</h2>

        <p>All praise the almighty Design Guru! His glorious designs and applications are divinely inspired! Anyone who styles themselves as a Guru, isn’t. First off, it’s arrogant – Guru is not a title you can just claim for yourself. It has a spiritual and almost infallible connotation. Even the most experienced designers can learn things from beginning designers or professionals in other fields, and if you have forgotten that, then you’re clearly NOT that great, and the title is negated anyways. There are no design gurus, only amateurs who call themselves such in a futile attempt to transcend and disguise their lack of skill.</p>

        <h2>UX Professional, UI Designer, IA</h2>

        <p>UX/UI/IA are cliché buzzwords now. Amateur freelance web designers have unrightfully claimed these phrases from the Cognitive Science world and tainted them. Without proper knowledge of what these terms mean, amateurs have passed watered-down and fallacious meanings to poor ignorant clients. User Experience, User Interface; these phrases have lost their original intent. Everyone is a UX/UI designer now. Nothing has actually changed in the field of UI; amateur web designers just like the title. The terms UX and UI have been abused into meaninglessness.</p>

        <p>Ryan Carson wrote about the problem with UX. “‘UX Professional’ is a bullshit job title. It’s just a way to over-charge naïve clients. All web designers should be UX pros.” User Experience is an integral part of design. If you can’t create a productive experience for the user, then you aren’t competent in this field and so to call yourself a UX professional is redundant to the genuinely talented designer.</p>

        <p>Using the title UX Designer is slightly different than using Rockstar/Ninja/Guru. People who call themselves Rockstars and Ninjas do it in order to elevate themselves above all other designers, while designers who call themselves UX Designers (as well as other titles like UI Engineer, and anything with a U) do so in an attempt to distinguish themselves from amateurs who call themselves designers. &nbsp;In an age when anyone with Photoshop can be pretentious enough to call him or herself a designer, that title has to some extent lost its true meaning and value. It is increasingly misunderstood as an easy, simple, frivolous profession. It is understandable why a designer might wish to remove and elevate their self from that stigma – but taking on some silly label is a completely ineffective and even a detrimental approach.</p>

        <h2>You Are A Designer</h2>

        <p>It is natural to want to stand out. This is especially true when your field and title is misunderstood, and you’ve somehow come to believe that standing out via a new title means distinguishing yourself from amateurs. In the first episode of the ‘Let’s Make Mistakes’ podcast, Mike Montiero talks about when comics tried to rename themselves ‘graphic novels’. ‘Maus’ wanted to re-title itself as such because of the stigma against comics as a respected medium. By definition though, Maus was a comic book, though longer and more serious than most. Rather than using a different name for the medium, he should just prove through his work that the medium is worthwhile. As with comic book artists, designers have wanted to change their title because of the negative implications. Designers face negative stereotypes in part because of the amateurs who call themselves “designers”. We don’t want to be lumped in with those laymen; we are different – professional! And so designers adopt titles like “User Experience Professional” in an attempt validate our profession and separate ourselves from the phonies.</p>

        <p>Forget that. Be proud to call yourself a designer. There will always be amateurs in any field who do not deserve certain titles. Do acclaimed authors call themselves “Guru authors” in order to separate themselves from the other terrible authors out there? Do talented doctors call themselves “Ninja Surgeons” or “Samurai Pediatricians” to distinguish themselves from doctors of poor caliber? No – and if such distinctions were used, it would delegitimize those entire fields. It says “to be a doctor means nothing in itself – I am diligent though, so I’m a samurai doctor!” Don’t be afraid to call yourself a designer and just that. Own the title. I am not a guru, a samurai, a jedi, or a rock star: I am a designer. That’s it; I need no other title. Let your work speak for itself. Shit by any other name, well, is still shit. So don’t try to hide your (lack of) talent with a fancy name. <em>Distinguish yourself through your work, not your title.</em></p>

        <ol class="footnotes">
          <li><a href="http://artequalswork.com/posts/rockstar.php">Please Don’t Call Me A Rockstar</a></li>
          <li><a href="http://thinkvitamin.com/user-science/user-experience/ux-professional-isnt-a-real-job/">‘UX Professional’ Isn’t A Real Job</a></li>
        </ol>

      </div>
    </div>
  </section>
</article>]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Sweat the Small Stuff]]></title>
    <link href="http://dbanksdesign.com/blog/sweat-the-small-stuff/"/>
    <updated>2014-05-25T22:09:44-07:00</updated>
    <id>http://dbanksdesign.com/blog/sweat-the-small-stuff</id>
    <content type="html"><![CDATA[<article class="article sweat_the_small_stuff">

  <header class="article_header">
    <div class="article_header_inner">

      <h1 class="article_title" id="article_title">Sweat The Small Stuff</h1>

      <p class="article_subtitle" id="article_subtitle">Good enough isn’t good enough. Take the effort to make sure every detail is in place.</p>

    </div>
  </header>

  <section class="article_content">
    <div class="article_content_inner">
    <div class="right_article_sub">
      <div class="target">
        <div class="target_height"></div>
        <div class="target_inner">
          <svg class="target_svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="100%" height="100%" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
            <g>
              <path fill="#C94E3E" d="M285.174,128.073c0,0,0,8.921,0,18.276c0,74.838-60.669,135.507-135.507,135.507
                c-74.839,0-135.507-60.669-135.507-135.507c0-7.416,0-18.276,0-18.276H285.174z"/>
              <circle fill="#F16A5B" cx="149.667" cy="135.507" r="135.507"/>
              <circle fill="#FFFFFF" cx="149.667" cy="135.507" r="108.406"/>
              <circle fill="#F16A5B" cx="149.667" cy="136.109" r="81.304"/>
              <circle fill="#FFFFFF" cx="149.667" cy="136.109" r="54.203"/>
              <circle fill="#F16A5B" cx="149.667" cy="136.109" r="27.102"/>
              <polygon fill="#579EAF" points="258.976,29.661 229.014,46.674 243.016,31.919 258.825,23.939   "/>
              <polygon fill="#579EAF" points="260.14,37.504 230.424,54.945 250.204,50.196 265.02,40.495   "/>
              <path opacity="0.4" fill="#231F20" d="M225.132,289.131c0.469,1.572,0.145,4.901-0.776,7.661c-0.962,2.887-2.201,4.039-2.769,2.569
                c0-0.002-0.001-0.004-0.002-0.006l-0.119,0.347l-2.936-7.787l-0.066,5.85l-4.202-10.147l-1.119,0.291l-10.162-24.523l-2.35-18.853
                l-0.088-0.334l-54.371-143.219l2.292-6.354l52.952,135.221l9.15,6.802l9.521,26.439l-0.077,6.897l2.437,6.769l-2.01,0.587
                l4.619,11.532c0.006,0.013,0.011,0.021,0.017,0.034c0.001,0.005,0.001,0.012,0.002,0.016l0.069,0.171L225.132,289.131z"/>
              <polygon fill="#F2DFAD" points="269.214,34.629 146.172,100.979 148.112,94.644 263.492,24.993  "/>
              <polygon fill="#63B4C7" points="259.578,31.618 229.616,48.631 234.735,34.177 250.545,26.198   "/>
              <polygon fill="#63B4C7" points="261.084,37.753 231.457,54.379 246.534,57.172 261.349,47.472   "/>

              <ellipse transform="matrix(0.866 -0.5001 0.5001 0.866 20.7021 137.2421)" fill="#D1C398" cx="266.391" cy="29.999" rx="1.844" ry="5.42"/>
            </g>
          </svg>
        </div>
      </div>
    </div>


    <div class="left_article_content">
      <p class="article_content_intro">Finishing a project just because it’s reached a point where “it’s good enough” might be one of the worst things a designer can do. When you think or say “well, it’s good enough” you are compromising yourself as a professional designer; good enough is good enough for amateurs, not for professionals.</p>

      <p>A few weeks back I had a crisis of faith in my profession. While on a 2 hour long drive after working 8 hours on a Saturday cleaning up the final details of a website, I thought to myself: “what is the actual utility of spending hours on details most people wouldn’t even notice?” If no one would notice or care about changing the color of a border by 1%, what’s the point?</p>

      <p class="pullquote">I mean the site hadn’t been perfect, but it had <em>good enough.</em></p>

      <p>Luckily the moment passed. A professional designer should absolutely spend time getting every little detail correct. The problem with ‘good enough’ is that while small details might not matter individually, they add up. The border of a button being slightly off, a font being a slightly too small, minor misalignments; all these details, even in their relative individual unimportance, create dissonance in the design. Each uncorrected detail is a sour note in a symphony. How many can you get away with for the symphony to still sound good? To sound good <strong>enough</strong>? This is the slippery slope designers fall down when they compromise their standards.</p>
    </div>

    <div class="bg_article_content">
      <div class="left_article_content">
        <p>Though it might feel like you’re the only one who notices these little things, you’re not. A laymen won’t have the academic expertise to specifically identify or express what seems off to them, but they will know something is off. They’ll either be vaguely put off by the design or they’ll just glance over it just like you, and think – “it’s good enough I suppose” – and move on.</p>
      </div>
    </div>

    <div class="left_article_content">
      <div class="article_note" id="article_note_1">
        <sup class="article_note_number">1</sup>
        I’m paraphrasing here, but you get the point.
      </div>

      <p>A coworker of mine used this analogy: “The little details are like the hem on the pants of a tailored suit. Most people might just think ‘those are some nice pants’, but someone who knows suits will notice the proper hem.”<sup class="article_citation" id="article_citation_1">1</sup> This might seem like designers catering to other designers, and that is partially true. Designers might be the only ones who are able to <em>identify</em> the details, but that is because we are trained to see them. Laymen might not be able to succinctly define the particular imperfections, but they will still know something is off.</p>
    </div>
  </div>

      <div class="details">
        <div class="details_height"></div>
        <div class="details_inner">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="100%" height="100%" viewBox="0 0 1205.667 467.333" enable-background="new 0 0 1205.667 467.333">

      <g id="Layer_8">
        <g opacity="0.15">
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="1206.334" y1="0" x2="1206.334" y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="1188.334" y1="0" x2="1188.334" y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="1170.334" y1="0" x2="1170.334" y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="1152.334" y1="0" x2="1152.334" y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="1134.334" y1="0" x2="1134.334" y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="1116.334" y1="0" x2="1116.334" y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="1098.334" y1="0" x2="1098.334" y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="1080.334" y1="0" x2="1080.334" y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="1062.334" y1="0" x2="1062.334" y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="1044.334" y1="0" x2="1044.334" y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="1026.334" y1="0" x2="1026.334" y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="1008.334" y1="0" x2="1008.334" y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="990.334"  y1="0" x2="990.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="972.334"  y1="0" x2="972.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="954.334"  y1="0" x2="954.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="936.334"  y1="0" x2="936.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="918.334"  y1="0" x2="918.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="900.334"  y1="0" x2="900.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="882.334"  y1="0" x2="882.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="864.334"  y1="0" x2="864.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="846.334"  y1="0" x2="846.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="828.334"  y1="0" x2="828.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="810.334"  y1="0" x2="810.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="792.334"  y1="0" x2="792.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="774.334"  y1="0" x2="774.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="756.334"  y1="0" x2="756.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="738.334"  y1="0" x2="738.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="720.334"  y1="0" x2="720.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="702.334"  y1="0" x2="702.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="684.334"  y1="0" x2="684.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="666.334"  y1="0" x2="666.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="648.334"  y1="0" x2="648.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="630.334"  y1="0" x2="630.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="612.334"  y1="0" x2="612.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="594.334"  y1="0" x2="594.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="576.334"  y1="0" x2="576.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="558.334"  y1="0" x2="558.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="540.334"  y1="0" x2="540.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="522.334"  y1="0" x2="522.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="504.334"  y1="0" x2="504.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="486.334"  y1="0" x2="486.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="468.334"  y1="0" x2="468.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="450.334"  y1="0" x2="450.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="432.334"  y1="0" x2="432.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="414.334"  y1="0" x2="414.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="396.334"  y1="0" x2="396.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="378.334"  y1="0" x2="378.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="360.334"  y1="0" x2="360.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="342.334"  y1="0" x2="342.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="324.334"  y1="0" x2="324.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="306.334"  y1="0" x2="306.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="288.334"  y1="0" x2="288.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="270.334"  y1="0" x2="270.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="252.334"  y1="0" x2="252.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="234.334"  y1="0" x2="234.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="216.334"  y1="0" x2="216.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="198.334"  y1="0" x2="198.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="180.334"  y1="0" x2="180.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="162.334"  y1="0" x2="162.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="144.334"  y1="0" x2="144.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="126.334"  y1="0" x2="126.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="108.334"  y1="0" x2="108.334"  y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="90.334"   y1="0" x2="90.334"   y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="72.334"   y1="0" x2="72.334"   y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="54.334"   y1="0" x2="54.334"   y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="36.334"   y1="0" x2="36.334"   y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="18.334"   y1="0" x2="18.334"   y2="500"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="0.334"    y1="0" x2="0.334"    y2="500"/></g>
        </g>
      </g>
      <g id="Layer_7">
        <g opacity="0.15">
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="-12" y1="-0.667"  x2="1236" y2="-0.667"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="-12" y1="17.333"  x2="1236" y2="17.333"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="-12" y1="35.333"  x2="1236" y2="35.333"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="-12" y1="53.333"  x2="1236" y2="53.333"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="-12" y1="71.333"  x2="1236" y2="71.333"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="-12" y1="89.333"  x2="1236" y2="89.333"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="-12" y1="107.333" x2="1236" y2="107.333"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="-12" y1="125.333" x2="1236" y2="125.333"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="-12" y1="143.333" x2="1236" y2="143.333"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="-12" y1="161.333" x2="1236" y2="161.333"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="-12" y1="179.333" x2="1236" y2="179.333"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="-12" y1="197.333" x2="1236" y2="197.333"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="-12" y1="215.333" x2="1236" y2="215.333"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="-12" y1="233.333" x2="1236" y2="233.333"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="-12" y1="251.333" x2="1236" y2="251.333"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="-12" y1="269.333" x2="1236" y2="269.333"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="-12" y1="287.333" x2="1236" y2="287.333"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="-12" y1="305.333" x2="1236" y2="305.333"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="-12" y1="323.333" x2="1236" y2="323.333"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="-12" y1="341.333" x2="1236" y2="341.333"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="-12" y1="359.333" x2="1236" y2="359.333"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="-12" y1="377.333" x2="1236" y2="377.333"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="-12" y1="395.333" x2="1236" y2="395.333"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="-12" y1="413.333" x2="1236" y2="413.333"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="-12" y1="431.333" x2="1236" y2="431.333"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="-12" y1="449.333" x2="1236" y2="449.333"/></g>
          <g><line fill="none" stroke="#FFFFFF" stroke-width="2" x1="-12" y1="467.333" x2="1236" y2="467.333"/></g>
        </g>
      </g>
      <g id="Layer_5">
        <line opacity="0.3" fill="none" stroke="#FFFFFF" stroke-width="2" x1="37.667"   y1="143.43"  x2="1171.084" y2="143.43"/>
        <line opacity="0.3" fill="none" stroke="#FFFFFF" stroke-width="2" x1="37.667"   y1="323.431" x2="1171.584" y2="323.431"/>
        <line opacity="0.3" fill="none" stroke="#FFFFFF" stroke-width="2" x1="72.284"   y1="359.333" x2="72.284"   y2="106.333"/>
        <line opacity="0.3" fill="none" stroke="#FFFFFF" stroke-width="2" x1="108.333"  y1="359.333" x2="108.333"  y2="106.333"/>
        <line opacity="0.3" fill="none" stroke="#FFFFFF" stroke-width="2" x1="270.334"  y1="359.333" x2="270.334"  y2="106.333"/>
        <line opacity="0.3" fill="none" stroke="#FFFFFF" stroke-width="2" x1="396.834"  y1="359.333" x2="396.834"  y2="106.333"/>
        <line opacity="0.3" fill="none" stroke="#FFFFFF" stroke-width="2" x1="486.084"  y1="359.333" x2="486.084"  y2="106.333"/>
        <line opacity="0.3" fill="none" stroke="#FFFFFF" stroke-width="2" x1="432.246"  y1="359.333" x2="432.246"  y2="106.333"/>
        <line opacity="0.3" fill="none" stroke="#FFFFFF" stroke-width="2" x1="522.334"  y1="359.954" x2="522.334"  y2="106.954"/>
        <line opacity="0.3" fill="none" stroke="#FFFFFF" stroke-width="2" x1="774.365"  y1="358.62"  x2="774.365"  y2="105.621"/>
        <line opacity="0.3" fill="none" stroke="#FFFFFF" stroke-width="2" x1="738.877"  y1="358.62"  x2="738.877"  y2="105.621"/>
        <line opacity="0.3" fill="none" stroke="#FFFFFF" stroke-width="2" x1="702.167"  y1="358.62"  x2="702.167"  y2="105.621"/>
        <line opacity="0.3" fill="none" stroke="#FFFFFF" stroke-width="2" x1="612.5"    y1="358.62"  x2="612.5"    y2="105.621"/>
        <line opacity="0.3" fill="none" stroke="#FFFFFF" stroke-width="2" x1="576.184"  y1="358.62"  x2="576.184"  y2="105.621"/>
        <line opacity="0.3" fill="none" stroke="#FFFFFF" stroke-width="2" x1="810.194"  y1="358.62"  x2="810.194"  y2="105.621"/>
        <line opacity="0.3" fill="none" stroke="#FFFFFF" stroke-width="2" x1="846.494"  y1="358.62"  x2="846.494"  y2="105.621"/>
        <line opacity="0.3" fill="none" stroke="#FFFFFF" stroke-width="2" x1="882.5"    y1="358.62"  x2="882.5"    y2="105.621"/>
        <line opacity="0.3" fill="none" stroke="#FFFFFF" stroke-width="2" x1="954.334"  y1="358.62"  x2="954.334"  y2="105.621"/>
        <line opacity="0.3" fill="none" stroke="#FFFFFF" stroke-width="2" x1="990.555"  y1="358.62"  x2="990.555"  y2="105.621"/>
        <line opacity="0.3" fill="none" stroke="#FFFFFF" stroke-width="2" x1="1026.334" y1="358.62"  x2="1026.334" y2="105.621"/>
        <line opacity="0.3" fill="none" stroke="#FFFFFF" stroke-width="2" x1="1134.384" y1="358.62"  x2="1134.384" y2="105.621"/>
        <line opacity="0.3" fill="none" stroke="#FFFFFF" stroke-width="2" x1="1098.084" y1="358.62"  x2="1098.084" y2="105.621"/>
      </g>
      <g id="Layer_1">
        <g>
          <g>
            <g><path fill="#FFFFFF" d="M146.002,144.93c10.788,0,20.972,1.742,30.27,5.176c9.238,3.418,17.343,8.611,24.09,15.434
                c6.751,6.832,12.112,15.511,15.933,25.795c3.754,10.117,5.779,31.072,5.779,45.654c0,12.271-1.592,23.749-4.732,34.117
                c-3.123,10.296-7.899,19.301-14.194,26.763c-6.283,7.445-14.235,13.388-23.636,17.662c-9.411,4.277-20.685,6.446-33.509,6.446
                H73.784V144.93H146.002 M107.616,288.17h2h33.735c5.666,0,11.235-0.929,16.553-2.759c5.408-1.858,10.291-4.982,14.513-9.287
                c4.199-4.284,7.593-9.916,10.089-16.738c2.478-6.774,3.736-12.004,3.736-21.782c0-8.792-0.87-16.854-2.585-23.963
                c-1.747-7.231-4.666-13.525-8.677-18.707c-4.053-5.233-9.474-9.293-16.112-12.068c-6.565-2.74-14.729-4.129-24.265-4.129
                h-26.987h-2v2V286.17V288.17 M146.002,142.93H71.784v181.047h74.218c13.17,0,24.615-2.207,34.337-6.626
                c9.718-4.418,17.831-10.482,24.337-18.192c6.506-7.712,11.363-16.868,14.58-27.472c3.211-10.603,4.818-22.167,4.818-34.698
                c0-14.296-1.97-35.746-5.904-46.35c-3.938-10.602-9.397-19.435-16.386-26.505c-6.988-7.066-15.263-12.368-24.818-15.904
                C167.406,144.699,157.086,142.93,146.002,142.93L146.002,142.93z M109.616,286.17V180.737h26.987
                c9.315,0,17.146,1.326,23.494,3.975c6.345,2.651,11.446,6.468,15.302,11.447c3.855,4.98,6.626,10.964,8.313,17.952
                c1.687,6.988,2.529,14.818,2.529,23.493c0,9.482-1.206,14.511-3.614,21.095c-2.41,6.59-5.625,11.931-9.639,16.025
                c-4.017,4.096-8.595,7.03-13.734,8.796c-5.144,1.771-10.443,2.65-15.903,2.65H109.616L109.616,286.17z"/></g>
            <g><path fill="#FFFFFF" d="M395.837,144.43v34.307h-88.843h-2v2v33.368v2h2h70.373v34.397h-70.373h-2v2v33.668v2h2h89.271v33.808
                H271.163V144.43H395.837 M397.837,142.43H269.163v181.547h129.102V286.17h-91.271v-33.668h72.373v-38.397h-72.373v-33.368
                h90.843V142.43L397.837,142.43z"/></g>
            <g><path fill="#FFFFFF" d="M575.21,144.43v33.807h-52.066h-2v2v141.741h-33.832V180.237v-2h-2h-51.565V144.43H575.21
                 M577.21,142.43H431.746v37.807h53.565v143.741h37.832V180.237h54.066V142.43L577.21,142.43z"/></g>
            <g><path fill="#FFFFFF" d="M674.621,144.93l61.938,177.047h-34.058l-12.533-34.495l-0.479-1.317h-1.401h-64.337h-1.498
                l-0.421,1.438l-10.076,34.375h-33.772l60.689-177.047H674.621 M630.625,252.972h3.003h44.579h2.987l-1.138-2.762l-21.687-52.632
                l-0.022-0.054l-0.025-0.052l-0.481-1l-1.931-4.011l-1.717,4.107L631.782,250.2L630.625,252.972 M676.04,142.93h-38.796
                l-62.061,181.047h38.07l10.497-35.812h64.337l13.012,35.812h38.277L676.04,142.93L676.04,142.93z M633.628,250.972
                l22.411-53.632l0.481,1l21.687,52.632H633.628L633.628,250.972z"/></g>
            <g><path fill="#FFFFFF" d="M809.194,144.93v177.047h-33.829V144.93H809.194 M811.194,142.93h-37.829v181.047h37.829V142.93
                L811.194,142.93z"/></g>
            <g><path fill="#FFFFFF" d="M881.827,144.93v141.74v2h2h69.854v33.308H847.994V144.93H881.827 M883.827,142.93h-37.833v181.047
                h109.687V286.67h-71.854V142.93L883.827,142.93z"/></g>
            <g><path fill="#FFFFFF" d="M1062.685,139.833c8.798,0,21.177,1.453,29.433,3.455c7.67,1.866,14.658,6.756,20.824,11.07l0.548,0.383
                c5.277,3.697,10.219,9.767,14.687,18.042c3.263,6.041,5.158,14.315,5.399,23.472h-34.253c-0.348-3.702-1.234-9.653-3.449-12.898
                c-2.127-3.115-4.491-6.339-7.933-8.516l-0.501-0.317c-2.836-1.795-5.076-3.213-9.15-4.046
                c-4.169-0.851-12.784-1.247-17.293-1.247c-3.131,0-9.29,0.32-12.566,1.007c-3.272,0.689-6.295,1.917-8.986,3.65
                c-2.717,1.752-4.979,3.972-6.722,6.594c-1.823,2.729-2.747,6.183-2.747,10.268c0,3.958,0.79,7.417,2.223,9.74
                c1.508,2.454,4.271,4.595,8.445,6.547c3.856,1.809,9.24,3.633,16,5.423c2.284,0.606,4.872,1.386,7.611,2.211
                c5.375,1.62,11.469,3.455,18.609,5.055c2.021,0.453,4.454,1.223,7.271,2.116c1.77,0.56,3.775,1.195,5.97,1.844
                c6.673,1.975,11.749,4.234,16.457,7.326c5.922,3.895,10.374,8.264,14.01,13.75c3.936,5.946,7.138,18.091,7.138,27.072
                c0,6.354-2.087,14.614-5.727,22.664c-2.911,6.434-7.303,12.066-13.055,16.742c-5.791,4.713-13.104,8.443-21.731,11.086
                c-8.689,2.659-18.91,4.008-30.379,4.008c-9.251,0-18.364-1.153-27.085-3.43c-7.419-1.937-14.709-5.638-22.942-11.646
                c-6.266-4.569-11.538-10.908-15.669-18.843c-3.331-6.393-5.445-12.414-5.561-22.047h33.635c0.032,4.351,0.29,6.66,2.353,10.618
                c2.221,4.281,5.222,7.802,8.919,10.463c3.647,2.633,7.771,4.045,12.838,5.355c4.803,1.242,9.835,1.872,14.958,1.872
                c3.458,0,7.204-0.292,11.132-0.866c4.043-0.588,7.884-1.741,11.413-3.425c3.633-1.728,6.707-4.145,9.136-7.183
                c2.638-3.291,3.813-6.829,3.813-11.472c0-4.714-2.053-9.311-5.783-12.945c-3.055-2.969-6.423-5.595-11.262-8.779
                c-3.579-2.357-12.095-5.832-16.722-7.438c-3.09-1.072-12.169-3.46-17.594-4.887l-1.215-0.32
                c-7.258-1.911-13.166-3.766-18.594-5.838c-6.463-2.462-11.799-4.58-16.727-7.531c-5.06-3.031-14.133-10.429-16.297-14.44
                c-2.798-5.188-4.217-11.638-4.217-19.17c0-8.34,2.286-17.457,5.967-23.795c3.336-5.754,12.15-13.558,18.928-18.373
                c4.993-3.547,11.418-6.266,20.831-8.817C1044.831,141.298,1055.362,139.833,1062.685,139.833 M1062.685,137.833
                c-7.712,0-18.421,1.547-26.134,3.633c-7.709,2.089-15.362,4.781-21.467,9.118c-6.106,4.339-15.727,12.493-19.5,19
                c-3.777,6.505-6.236,15.966-6.236,24.798c0,7.872,1.471,14.584,4.457,20.12c2.404,4.457,11.82,12.087,17.029,15.207
                c5.191,3.109,10.938,5.359,17.042,7.684c6.105,2.332,12.391,4.217,18.797,5.904c5.203,1.37,15.407,4.032,18.661,5.162
                c4.761,1.652,12.99,5.054,16.278,7.219c4.756,3.131,7.993,5.653,10.968,8.544c2.969,2.893,5.177,6.853,5.177,11.511
                c0,4.334-1.125,7.414-3.374,10.221c-2.25,2.814-5.061,5.023-8.434,6.627c-3.372,1.609-6.986,2.691-10.843,3.252
                c-3.856,0.564-7.47,0.846-10.844,0.846c-4.979,0-9.799-0.604-14.457-1.809c-4.66-1.205-8.716-2.549-12.169-5.041
                c-3.457-2.488-6.228-5.74-8.313-9.762c-2.091-4.012-2.133-5.912-2.133-11.697h-37.626c-0.161,10.604,1.765,17.26,5.783,24.971
                c4.014,7.709,9.437,14.557,16.264,19.535c6.828,4.982,14.7,9.637,23.615,11.965c8.916,2.326,18.109,3.494,27.591,3.494
                c11.724,0,22.05-1.367,30.964-4.096c8.916-2.73,16.386-6.545,22.409-11.447c6.025-4.898,10.562-10.723,13.614-17.469
                c3.051-6.748,5.904-15.615,5.904-23.488c0-9.637-3.374-21.988-7.47-28.176c-4.097-6.182-8.957-10.621-14.579-14.318
                c-5.625-3.694-11.289-5.887-16.988-7.573c-5.703-1.686-9.968-3.231-13.371-3.994c-10.838-2.429-19.482-5.478-26.145-7.248
                c-6.669-1.766-11.891-3.531-15.664-5.3c-3.777-1.766-6.307-3.694-7.591-5.784c-1.287-2.086-1.927-5.319-1.927-8.692
                c0-3.694,0.801-6.748,2.41-9.157c1.603-2.41,3.65-4.417,6.143-6.025c2.49-1.603,5.26-2.729,8.314-3.373
                c3.049-0.639,9.102-0.964,12.154-0.964c4.658,0,12.957,0.403,16.894,1.206c3.934,0.805,5.929,2.167,8.983,4.095
                c3.048,1.928,5.179,4.775,7.348,7.952c1.929,2.825,2.928,8.631,3.253,13.771h38.128c0-9.959-1.892-19.434-5.666-26.422
                c-3.773-6.988-8.876-14.229-15.299-18.729c-6.427-4.494-13.777-9.747-22.047-11.759
                C1084.313,139.337,1071.681,137.833,1062.685,137.833L1062.685,137.833z"/></g>
          </g>
        </g>
      </g>
      </svg>
        </div>
    </div>

    <div class="article_content_inner">
    <div class="center_article_content">
      <p>If you are a beginning designer you may not have the experience to identify the exact nuances that perfect a design (and even if you’ve been a designer for many years, you probably still have room to grow!) That is fine. “Perfection” is relative to your aesthetic tastes as well as your skill level. As you learn and progress as a designer, you will get better at articulating problems and identifying dissonance in a design. The only thing to worry about is that this work is the best you can do at this time, and learning to recognize the details that add or subtract to a design. If you think you can do better, do better. If it seems a little off, make it right.</p>

      <p class="pullquote">Compromising your skill and professionalism does nothing but beget more compromise.</p>

      <p>Want some examples of little details that make big impacts? Try <a href="http://littlebigdetails.com/" target="_blank">Little Big Details</a>.</p>
    </div>
  </div>

  </section>

</article>]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Electronic Car Doors]]></title>
    <link href="http://dbanksdesign.com/blog/electronic-car-doors/"/>
    <updated>2014-05-25T22:08:52-07:00</updated>
    <id>http://dbanksdesign.com/blog/electronic-car-doors</id>
    <content type="html"><![CDATA[<article class="article electronic_car_doors">

  <header class="article_header">
    <div class="article_header_inner">

      <h1 class="article_title" id="article_title">Electronic Car Doors</h1>

      <p class="article_subtitle" id="article_subtitle">Technology for the sake of technology, created without full consideration creates more problems than it aims to solve.</p>
    </div>
  </header>

  <section class="article_content">
    <div class="article_content_inner">
      <div class="center_article_content">
        <p class="article_content_intro">Technology for the sake of technology, created without full consideration creates more problems than it aims to solve. This point can be illustrated by two stories about cars. My girlfriend drives a 2000 Honda Odyssey van (fig. 1), and another friend drives a 2011 Cadillac CTS (fig. 2). Both cars have a version of electronically latching doors, but with different designs and results.</p>
      </div>


      <figure class="fig_with_text">
        <img src="http://dbanksdesign.com/assets/electronic_car_doors/honda.jpg" />
        <p>I can’t count the number of times a passenger has improperly used the Odyssey’s automatic sliding doors. The exterior door handles are the same as those on manual van doors. On a manual door, you would pull the handle and then slide the door towards the back of the van, laterally in the direction of the door handle. On the electronic door, you pull the handle, and the door slides back automatically. The handles on the inside of the door are turned 90 degrees, so that you grasp the handle with your hand and pull and turn it in the direction the door opens.</p>
      </figure>


      <div class="center_article_content">
        <p>In addition to the electronic latching problem (more on that in a second), the exterior door handle is just poor design. On the electronic door, the outside handle requires pulling only towards yourself, in a direction perpendicular to the way the door is supposed to go. Its counterintuitive, pulling in a direction totally unrelated to the way the door functions. The inside door handle is at least shaped in such a way that you can only pull it in the direction the door operates, laterally forwards and backwards in relation to the car. (Don Norman discusses door handles more in depth in his book The <a href="http://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/0465067107/" target="_blank">Design of Everyday Things</a>, which I highly recommend.)</p>

        <p>Besides the poor design of the handle in terms of understanding, there is the functionality issue of the electronic latching. The Honda’s doors are automatic, but the design does not convey this. It looks exactly the same as any manual van door. To properly open and close the door, the passenger needs to give a quick pull of the handle towards the him/herself, and then let go. The door then automatically (but slowly) slides back into place and latches. The most likely motivations for this type of door are for safety, most likely to prevent children from using the door recklessly, and perhaps because of the prevalent contemporary allure to consumers of modern and electronic things vs. old and manual. Fair reasons, but the implementation of the idea doesn’t provide proper cues to the passenger that the door is automatic; it looks exactly like any other (non-automatic) minivan door handle, and this causes people to misuse it all the time. <em class="em_strong">Technology without consideration causes more problems than it solves.</em> Maybe the automatic latch does solve some “issues,” but it creates a host of new ones.</p>

        <p>Most people are familiar with how manual sliding doors on a van work. Besides being familiar, the shape of the door and handle gives passengers cues as to how to operate the door without any previous knowledge. Someone with no previous experience should understand how to open the door. By making the sliding door automatic without changing any visual cues, passengers have no idea that the door is automatic. They constantly try to pull the door both open and shut, but it feels stuck because the motor won’t let the door slide freely. The result is that they just continue to pull harder on the door thinking that it’s stuck or broken and not realizing that they’re just misusing it. Sometimes this results with the door jamming and beeping, stuck in some position neither open nor closed until the driver automatically opens or shuts it using the driver’s controls (a seriously irritating result). I don’t have any firsthand experience with doors like this being permanently broken because passengers continually try to pull it closed, but I wouldn’t be surprised at all if they were out there (try googling ‘honda odyssey door’). On multiple occasions my girlfriend has had to shut the door using the driver controls when it jams because of people trying to pull it shut, and she has to explain to passengers all the time that they need to just let go of the door.</p>

        <p class="pullquote">
          <span class="highlighted_text">Doors should not need an explanation.</span>
        </p>

        <hr />
      </div>

      <div class="bg_article_content">
        <div class="center_article_content center">
          <img src="http://dbanksdesign.com/assets/electronic_car_doors/cadillac_transparent.png" />
        </div>
      </div>

      <div class="center_article_content">
        <p>The door handles on my friend’s CTS are much different. The exterior door handle appears to be the door itself, and there is a cut out of the body of the car at the top of the door so you can put your hand in and pull the door out (fig. 2). The interior door handle is a similar shape to the outside handle of the Honda Odyssey, like a luggage handle at the end of the armrest (fig. 3). These doors are not automatic like the Honda, but they do latch electronically like the Honda. To open the CTS’s door, you have to press a button that unlatches the door, then pull or push to open it. The implementation on the CTS is only marginally better than the Odyssey though. When your hand grasps the handle (on both interior and exterior) you can feel a physical button that unlatches the door. If you were to grasp the outside handle and pull (not knowing there was a button) the pressure of your hand would press the button anyways. This door handle design is fine, the only problem may be if a passenger overlooks it and searches for something more recognizable as a door handle. Aesthetically though it is quite nice as it doesn’t compromise the slick angles of the car.</p>
      </div>

      <figure class="fig_with_text">
        <img src="http://dbanksdesign.com/assets/electronic_car_doors/cadillac_interior.jpg" />
        <p>The interior door handle for the CTSV is slightly more problematic in that it doesn’t resemble a normal door handle, but seems like part of the armrest. The button is clearly visible, but does not give any visual cues to indicate that it unlatches the door. Passengers (myself included) are left confused and have to ask how to open the door. One positive aspect of this design is that it is ergonomic. With your arm on the armrest your hand falls on the handle and the button is under your thumb. It is in a familiar and comfortable place, but the shape still does not provide enough information to show that the button unlatches the door.</p>
      </figure>

      <hr />

      <div class="center_article_content">
        <p>Some of the ideas found in the CTS’s implementation of the electronic door could be used to help the Honda Odyssey. By using a button in the familiar place of the door handle, passengers would be more likely to assume the function of the button and also to prevent unnecessary pulling or pushing of the door. The buttons would help passengers to not improperly use the door, but may still confuse them if having never used electronic doors before.</p>

        <p>These anecdotes hopefully show that cultural context, visual cues, ergonomic affordances, and especially functionality must be taken into account when designing anything. Honda changed the functionality of the door handle without making it apparent to users, which caused problems. While ergonomically appropriate, lack of visual cues caused passengers to ask how to open the door of the CTS.</p>

        <p class="pullquote">Proper implementation of a feature is as important as the feature itself.</p>

        <hr />
      </div>
    </div>
  </section>


</article>]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[The Problem With Pagination]]></title>
    <link href="http://dbanksdesign.com/blog/the-problem-with-pagination/"/>
    <updated>2014-05-25T14:57:34-07:00</updated>
    <id>http://dbanksdesign.com/blog/the-problem-with-pagination</id>
    <content type="html"><![CDATA[<article class="article the_problem_with_pagination">

  <header class="article_header">
    <div class="article_header_inner">

      <h1 class="article_title" id="article_title">The Problem With Pagination</h1>

      <p class="article_subtitle" id="article_subtitle">Pagination is a staple component of most web sites and applications. We messed it up though.</p>
    </div>
  </header>

  <section class="article_content">
    <div class="article_content_inner">
      <div class="center_article_content">
        <p class="article_content_intro">Pagination is a staple component of most web sites and applications. We deal with it on a daily basis – on blogs, photo galleries, inspiration sites, image searches, etc. Every time I see page 1 at the bottom and links for page 2, 3, 4, … 1234 on a blog, I feel uneasy.</p>

        <p>I first realized a problem with pagination while observing my girlfriend browse through images on weheartit.com. For those unfamiliar, it is a site where users can ‘heart’ (similar to Facebook’s ‘like’) images and they get put in the site’s feed. My girlfriend likes to browse through the images and sometimes points out cool ones to me. One day while I was watching her, I saw her go to page 100 and then move forward in the pages (going to 99 then 98 and so on). I asked her why she did this, and she said that because images get added so quickly to the site if she were to go the other direction (page 1 to 2 to 3 etc) she would see the same pictures on each page because they would get pushed back while she was browsing. The problem is when anyone hearts an image it gets put first on the first page (page 1) and pushes all hundreds of thousands of images back. Images are always moving and will never stay on the same page. This forces users to come up with novel ways just to get basic functionality (browsing) out of the site!</p>

        <p>I feel this example shows and underlying flaw of this type of pagination. I am referring to reverse-chronological pagination for blogs and blog-type sites (like inspiration sites, showcase sites, etc). Blogs present information in reverse-chronological order because users want to see the newest information first. It would be annoying to list posts in chronological order and have to scroll or click through every time to see the most recent post. This is perfectly fine and normal, the problem lies in calling the home page &#8216;page 1&#8217;.</p>

        <p>When I imagine a &#8216;page 1&#8217;, <em class="em_strong">any page 1</em>, I think of it as synonymous with &#8216;the first page&#8217;. Now when I talk about my blog posts, my first blog post is the one I wrote first; my oldest post. It will always be my first and nothing can change that. So why doesn’t my first blog post go on my first page? Instead, it lives somewhere on page 4 or 13 or 27 depending on how many other posts I&#8217;ve written.</p>

        <p>Now I’m not saying that my first blog post should be displayed first on my homepage. I’m saying that my homepage should be page 4 or 13 or 27, depending on how many posts I’ve written. On page 1 would be my first blog posts and newer posts would get added to higher pages. Now my blog would be truly reverse-chronological order, as the page numbers would also go in reverse. I find it weird that the posts go in reverse-chronological order but the page numbers don’t. The counter-argument to this is most people refer to the homepage of a blog as the ‘first page’ so calling it ‘page 1′ would make sense in the fact that it is the user’s first page. So in this sense page 1 works because it is the first page the user interacts with. The first page is relative to the person, the reader of a blog would consider the homepage the first page, whereas the writer would consider the page of his oldest posts the first page. I think the writer should win in this sense because I don’t feel calling the homepage page 27 would hinder usability as long as it still shows the most recent blog posts.</p>

        <p>Back to the original example of weheartit.com, if that site were to implement my pagination suggestion, there would be no more browsing troubles. New images would get added on to higher pages so if you started on the homepage, which lets say is page 100, and you browsed back in time you would go 100 to 99 to 98 and get different images on each page because images would always be on the same page. Every time you or anyone went to page 100, it would be the same images, but maybe a month from now the homepage might be page 200.</p>
      </div>

      <p class="pullquote">
        <span class="highlighted_text">The idea is that content on each page remains the same no matter how many posts are added.</span>
      </p>

      <div class="center_article_content">
        <p>An added benefit of this is that I could send someone a link to page 98 and they would see exactly what I see, no matter what. In the example of weheartit.com, the homepage might be something ridiculous like page 123,821 in which case having individual links to pages would not work, but still being able to go to page 100 and always see the same thing is important.</p>

        <p>One problem though is that the wrong pagination has become the standard for every blog and every blogging platform. Even if I could write plugin for WordPress or write a completely new blogging platform to accommodate this new pagination, would it be worth it? People have already become accustomed to the wrong way; it may hinder usability just doing it differently. Just like America will never adopt the metric system although it is much easier to use, to use this new pagination schema might be too costly. Although this may be a very minor change and users might not even notice. I would guess that using pagination is a very low use function in most cases. Therefore this will most likely not affect the majority of users, however might help a small number.</p>

        <p class="pullquote">Even though it may be marginally useful, I think it’s worth a shot; pagination can be saved.</p>
      </div>
    </div>
  </section>

</article>]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Introduction to Proximity]]></title>
    <link href="http://dbanksdesign.com/blog/introduction-to-proximity/"/>
    <updated>2014-05-25T14:08:48-07:00</updated>
    <id>http://dbanksdesign.com/blog/introduction-to-proximity</id>
    <content type="html"><![CDATA[<article class="article introduction_to_proximity">

  <header class="article_header">
    <div class="article_header_inner">

      <h1 class="article_title" id="article_title">Introduction to Proximity</h1>

      <p class="article_subtitle" id="article_subtitle">Good enough isn’t good enough. Take the effort to make sure every detail is in place.</p>

    </div>
  </header>

  <section class="article_content">
    <div class="article_content_inner">
      <p class="article_content_intro">I see a lot of designs that either don’t pay attention to the proper use of space or simply get it wrong. The proper use of proximity is key to creating a consistent relationship and hierarchy of page elements. When care is not taken, websites and interfaces can at the very least be visually displeasing or confusing, and at worst frustrating and distracting from the site’s purpose.</p>

      <p>To see why proper spacing of elements is key to usability and aesthetics, take the Gestalt Law of Proximity:</p>

      <blockquote>Spatial or temporal proximity of elements may induce the mind to perceive a collective or totality.</blockquote>

      <p>To elaborate, our brains group elements that are close to each other and associate those elements as being related. Elements nearer each other will have a stronger relationship in our minds than elements further apart. This is an evolutionary trick our brains have learned to help understand our surroundings better. To see how this works, take a look at the example below.</p>

      <figure class="wide">
        <img class="" title="proximity" src="http://dbanksdesign.s3.amazonaws.com/uploads/8c25d738-9ccf-4148-b3d5-b5258740d4ac.png" alt="">
      </figure>

      <p>Without thinking about it, our brain organizes the dots into 4 categories because of both the proximity of the dots within the groups as well as the groups themselves. To be more specific, our brain sees 2 groups and 3 subgroups of the right group. This conclusion may seem obvious, but the implications in design are important.</p>

      <p>Even though you as the designer may think of elements as related, if you do not space them as such your users will not share this impression. This may distract or confuse a user if they see content that should be related, but is spaced as if it’s not.</p>

      <p>Lets walk through a quick example. Say you are designing the homepage of a blog and on that homepage you have a list of articles. Each article has a title, a byline, and a description. In this simplistic example, it would make sense to have the title, byline, and description all vertically stacked and equally spaced. The spacing between each article should be more than within each part of the article to signify each article as its own unit.</p>

      <figure class="wide">
        <img src="http://dbanksdesign.s3.amazonaws.com/uploads/0bf9abcf-ff42-4044-ac8c-57043fdacae1.png" alt="" title="proximity_example" class="">
      </figure>

      <p>Another thing to keep in mind about proximity is consistency and a minimal number of values for padding. When I am designing I like to start with a set of 3 values for padding; small, medium, and large. Usually these values will be somewhere close to 1em (~14px), 2em (~28px), 3em (~42px) respectively. I add more padding values as necessary but I keep the total number small and each value unique for simplicity. I would never have padding values of 1em and 1.1em; values should either be exactly the same or clearly different (this is another Gestalt Law, more on this later).</p>

      <p>Using these 3 padding values to revisit the blog homepage example, the spacing of the title, byline, and description would be 1em and the spacing between the articles would be 2em. The large padding value of 3em would be used to space out layout elements of the page such as the sidebar or the header and footer of the page. This way, the different elements’ relationship to one another is made clear.</p>

      <p>A general rule for spacing elements is that <em>the larger the element, the more padding it needs</em>. This is not part of the Gestalt Law, but more of an aesthetic ideal. Page elements have a visual gravity or weight and the larger the element is, the more spacing it needs. Without adequate space, large elements will suck in the smaller elements and create clutter. This can be seen in the previous blog example; as the elements grow larger, so does the padding.</p>

      <p>One trick I find helpful is to use padding values in ems rather than pixels in responsive designs. Then, if the text size changes, all the paddings will adapt and retain a consistent relationship. Using ems also helps to visualize padding values as they relate directly to the size of the text.</p>

      <p>I have only scratched the surface of an important topic in design. Hopefully this will serve as a starting point to exploring how spacing and proximity affect a design. The most important point to take away is the importance of being mindful that <em>spacing affects both the aesthetics and usability of websites and interfaces</em>. Make deliberate decisions on padding and remember, elements closer to one another have a stronger relationship to each other than those further apart.</p>
    </div>
  </section>
</article>

]]></content>
  </entry>
  
</feed>
