Mind the Gap

May 16, 2013

UI implementation has an almost natural tendency to diverge from its intended design. Those beautiful pixel-perfect design comps go through the brutal reality of software development in the form of deadlines, roadmap changes, miscommunication, platform limitations, and bugs, lots of bugs. The final product is very often not quite what you originally envisioned.

This is what I call the Gap.

Pixel imperfection, inconsistent behaviour, unexpected user flow, responsiveness issues, visual glitches, janky animations. You name it. The Gap is on all these unintended UI bits that end up in the release.

Unfortunately, the Gap is not something you can avoid entirely. Software development is no simple business, there is always something you let slip or have to compromise when you’re building anything non-trivial.

There are a number of factors in the development process that affect the Gap—for better and worse. Design process is definitely one of them.

Generally speaking, the larger the distance between the design and engineering teams, the worse the Gap tends to be. The way design is approached in the development process has a great influence on how well designers and UI engineers interact.

For example, many companies adopt a waterfall design process—especially large corporations where there is a sharper split of roles between teams. Designers spend a long time working on their specs, detailing every single aspect of the product or feature and UI engineers only start working on it once the specs are “done”.

The danger with the waterfall design process is that it might create a disconnection between design and engineering teams due to the focus on deliverables and specs instead of the much-needed fluid communication between the teams.

Why is it so important to have designers and engineers working very closely? First, there are a number of issues that you only spot once you actually try the design ideas. If designers don’t engage with engineers, the product will likely stick with broken and/or unintended design.

Furthermore, design issues are tricky in that they have this qualitative side that tends to be invisible to untrained eyes. Design problems will not necessarily be caught by even the most competent QA team or the most solid UI tests—because both are usually focused on the functional correctness of the product. Designers are naturally the ones who tend to be more sensitive to these design-level issues. This is why their engagement with the engineering team is so vital.

With that said, the design team rarely has the bandwidth to do design QA work, especially on large and complex projects. This is why having design-minded engineers can make a massive difference because they can set much higher bar for the UI quality right from the initial implementation and beyond—instead of relying solely on the designers to do so.

The bottom line is that the design process does not end with the specs, no matter how complete they look. In fact, design specs are just the beginning.

Iterative design processes that engage designers and engineers very early tend to result in higher UI quality because it provides the necessary flexibility and agility to steer ideas as they are implemented. Sounds obvious but this is much easier said than done. Just see how rare is to find products with outstanding user interfaces.

A substantial part of the UI engineer’s work is about fighting the Gap by implementing user interfaces that are as close as possible to their intended design. After all, the best user interfaces are the ones that feel intentional even on the smallest details.

So, mind the Gap.

Latest posts

New tablet UI for Firefox on Android December 03, 2014
Joining Facebook November 27, 2014
Leaving Mozilla November 26, 2014
Probing with Gradle October 07, 2014
New Features in Picasso September 23, 2014