larlet-fr-david-cache/cache/4d691dd589324c33115323060bc51181/index.md

title: Scaling UIs
url: http://blog.dnsimple.com/2015/03/scaling-uis/
hash_url: 4d691dd589324c33115323060bc51181

<p>In our world, when we usually talk about <strong>scaling</strong>, we normally refer to infrastructure, processes, or frameworks. But can this apply to UIs? I think so. A UI that cannot fit any more content gracefully is a UI that has problem scaling.</p>

<p>A few weeks ago, we launched a newsletter. Stop reading now and <a href="https//newsletter.dnsimple.com">go sign up</a>; the material is great. Anthony tells you how to open oysters and a few other DNS related tricks.</p>

<p>Only a few days later, I noticed that we didn't have a link to the newsletter from dnsimple.com. I opened a GitHub issue and started thinking about where to add the new link.</p>

<p>The footer seemed an obvious choice. The link to our blog is already there. I was excited about making this change since reviewing the structure and content of our footer was sitting on my personal "needs ❤️" list.</p>

<p><em>Here is the footer when the GitHub issue was opened.</em>
<img src="http://blog.dnsimple.com/files/2015/footer-old.png" alt="The old footer"/></p>

<p>The link to the blog is sitting on the left column. The newsletter link shouldn't be far from it. But adding a new link would break the balance of this section. We’ll end up with a dangling link sitting all by itself in the last row.</p>

<p>So I started looking for other options, but realized that our footer didn't scale easily to new content. A refactoring was in order.</p>

<h2>Asking the footer</h2>

<ul>
<li>Why am I looking at the footer?</li>
<li>What problem(s) am I trying to solve?</li>
<li>What is the job of the footer?</li>
</ul>

<p>I like these questions because it helps me run through a few scenarios to understand what content should be on any piece of UI.</p>

<p>In the case of the footer, a few answers I came up with:</p>

<ul>
<li><strong>I need to jump to a certain page, I am lost.</strong> The footer should help me by putting the most important and relevant links up front.</li>
<li><strong>Something is wrong, I need to contact support.</strong> The footer should have a clear way for me to find help.</li>
<li><strong>I am curious about what you guys are about.</strong> The footer should let me explore other content that you provide.</li>
</ul>

<p>Equipped with these few answers, I started looking at the job at hand.</p>

<h3>I need to jump to a certain page, I am lost</h3>

<p>Cohesion and coupling are two concepts routed in programming. I continually find them relevant when approaching frontend work.</p>

<p>When programming, we strive for our code to be highly cohesive: elements that are related to each other, belong together. We also seek loose coupling: elements that have little in common are disconnected and far away from each other.</p>

<p>Without the mumbo-jumbo: store your food at a distance from your clothes, and keep the medicine away from the children!</p>

<p>Applying these principles, we can see that the old footer was all over the place. The section on the left had links about the company and product (blog, pricing, blog) mixed with tools like Whois Search and API documentation.</p>

<p>The middle section was a spaghetti of our own terms, policies, and agreements; sprinkled with a couple of ICANN links. Lastly, a link to twitter was detached from the rest and probably claiming too much attention.</p>

<p>After applying the cohesion and coupling principles, and grouping the links, we now show the most important and relevant links up front to make navigation as easy as possible.</p>

<p><em>A first iteration applying cohesion and coupling</em>
<img src="http://blog.dnsimple.com/files/2015/footer-iteration-1.png" alt="Footer iteration 1"/></p>

<h3>Something is wrong, I need to contact support</h3>

<p>Things will surely go wrong. Servers fail to respond, errors on web pages, confusion, you name it. For this scenario, it could make sense to concentrate all the items related to <em>troubleshooting</em> in the same area.</p>

<p><em>The section that answers urgent questions like "is this working?", "where are the docs?" and "where can I contact support?"</em>
<img src="http://blog.dnsimple.com/files/2015/footer-header.png" alt="Footer header"/></p>

<p>Hovering or tapping on the status link display a full report of all our systems.</p>

<h3>I am curious about what you guys are about</h3>

<p>The previous footer had 2 links: <a href="https://dnsimple.com/about">about us</a> and <a href="https://blog.dnsimple.com/">blog</a>. We have since then added a newsletter and will probably add a few other things in the near future. By organizing our links, we now have space to tease the latest blog post and display a form to subscribe to our newsletter.</p>

<p><img src="http://blog.dnsimple.com/files/2015/footer-full.png" alt="Footer full"/></p>

<h2>Entropy</h2>

<p>Entropy gets his way. Always. But I am hoping that armed with a couple of tools, we can delay and sustain this fight:</p>

<ul>
<li>Why I am looking at this UI?</li>
<li>What problem am I trying to solve?</li>
<li>What is the job of this UI?</li>
</ul>

<p>Keep asking the right questions and fold the content where it belongs. Just don't throw everything in the same kitchen cabinet.</p>