Current State of Web User Interface Design & Development

User Interface (UI) design is the design of websites/apps with the focus on the user’s experience and interaction. The goal of user interface design is to make the user’s interaction as simple and efficient as possible. Good user interface design puts emphasis on goals and completing tasks, and good UI design never draws more attention to itself than enforcing user goals.

The design process must balance technical functionality and visual elements to create a system that is not only operational but also usable and adaptable to changing user needs.

Legendary product designer Dieter Rams has influenced the iconic product designs from Braun in the 1960s, to Apple’s products. Dieter Rams Ten Principles of “Good Design” stipulate:

  1. Good design is innovative
    The possibilities for innovation are not, by any means, exhausted. Technological development is always offering new opportunities for innovative design. But innovative design always develops in tandem with innovative technology, and can never be an end in itself.
  2. Good design makes a product useful
    A product is bought to be used. It has to satisfy certain criteria, not only functional, but also psychological and aesthetic. Good design emphasises the usefulness of a product whilst disregarding anything that could possibly detract from it.
  3. Good design is aesthetic
    The aesthetic quality of a product is integral to its usefulness because products we use every day affect our person and our well-being. But only well-executed objects can be beautiful.
  4. Good design makes a product understandable
    It clarifies the products structure. Better still, it can make the product talk. At best, it is self-explanatory.
  5. Good design is unobtrusive
    Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained, to leave room for the users self-expression.
  6. Good design is honest
    It does not make a product more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept.
  7. Good design is long-lasting
    It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years — even in today’s throwaway society.
  8. Good design is thorough down to the last detail
    Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the consumer.
  9. Good design is environmentally friendly
    Design makes an important contribution to the preservation of the environment. It conserves resources and minimises physical and visual pollution throughout the lifecycle of the product.
  10. Good design is as little design as possible
    Less, but better — because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicity.

In Bill Moggridge’s book of interviews, Designing Interactions, Gillian Crampton Smith, an academic in interaction design, introduced the concept of four dimensions of an “interaction design language”. In other words, these dimensions make up the interactions themselves, and as a result they make up the communication between a user and the screen. The four original dimensions are: words, visual representations, physical objects or space, and time. More recently, Kevin Silver, senior interaction designer at IDEXX Laboratories, has added a fifth dimension, behavior.

  • 1D: words should be simple to understand, and written in such a way that they communicate information easily to the end user.
  • 2D: visual representations are all graphics or images, essentially everything that is not text. They should be used in moderation, so as to not overwhelm.
  • 3D: physical objects or space refers to the physical hardware, whether it’s a mouse and keyboard, or a mobile device a user interacts with.
  • 4D: time is the length that the user spends interacting with the first three dimensions. It includes the ways in which the user might measure progress, as well as sound and animation.
  • 5D: behavior was added by Kevin Silver in his article, What Puts the Design in Interaction Design. It is the emotions and reactions that the user has when interacting with the system. Using these five dimensions, an interaction designer can pay attention to the very experience the user has when communicating and connecting with a system.


Iterative design is the current best-practice process for developing user interfaces. It’s a specialization of the spiral model described by Boehm for general software engineering.

Iterative design offers a way to manage the inherent risk in user interface design. In iterative design, the software is refined by repeated trips around a design cycle: first imagining it (design), then realizing it physically (implementation), then testing it (evaluation). After the UI has been evaluated and redesigned several times, we have (hopefully) learned enough to avoid making a major UI design error. Then we actually implement the UI — which is to say, we build a prototype that we intend to keep. Then we evaluate it again, and refine it further.

These activities are assigned to different departments/roles within a company: designer, developer and marketer. In other words, there’s a mix of skills that go into building a better UI/UX.

How Is Front-End Development Myopia Affecting Us?

Especially when referring to Web development, there’s a very real & recognized front-end fatigue. The problem extends further than JavaScript itself and this is an important symptom of “Front-End Development Myopia” (inspired from the similar term, “marketing myopia”, introduced by Theodore Levitt in a paper first published in 1960 in the Harvard Business Review).

The railroads serve as an example of an industry whose failure to grow is due to a limited market view. Those behind the railroads are in trouble not because the need for passenger transportation has declined or even because that need has been filled by cars, airplanes, and other modes of transport. Rather, the industry is failing because those behind it assumed they were in the railroad business rather than the transportation business. They were railroad oriented instead of transportation oriented, product oriented instead of customer oriented.

Another analogy would be: people don’t want to buy a quarter-inch drill, they want a quarter-inch hole.

What we need to ask ourselves is: why are we doing what we’re doing? what it’s for and who it’s for? At the moment it seems that we’re mostly building railroads/infrastructure (countless JavaScript/CSS libraries & frameworks). Don’t get me wrong, those are important, but to what end? Aren’t we losing track of what’s really important: the user?

And if we agree that building for the user is our main goal, I think we can also acknowledge that this is a process that requires multiple iterations — a process that we seldom navigate by looking at the data. Usually there’s somebody else analyzing it and feeding you the essentials needed for the next product release. There lies the gap between product development and user metrics which leads to lots of guess-work before it reaches back to development trenches.

The feedback loop is broken — how can we remedy this?

What if product metrics could be directly integrated in the product development process? What if we could add a new dimension to UI/UX development: METRICS. And what if we could build the UI/UX components to automatically adapt and morph based on these metrics?

THAT is MorphL’s mission, folks!

We know we have a gargantuan mission ahead and we’re just getting started, but we all believe this is the future of UI/UX development and we’re excited to have been given the chance to contribute to it.


  1. https://medium.com/innovatemap-current/on-the-current-state-of-design-systems-in-ux-4cd0aa1fad71
  2. https://msdn.microsoft.com/en-us/library/windows/desktop/ff728828(v=vs.85).aspx
  3. https://startupsthisishowdesignworks.com/
  4. https://www.designprinciplesftw.com/collections/ten-principles-for-good-design
  5. https://web.archive.org/web/20160806215332/http://somerandomdude.com/2012/01/10/transition-from-development-to-design/
  6. http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/
  7. http://groups.csail.mit.edu/graphics/classes/6.893/F03/lectures/L2.pdf
  8. https://www.smashingmagazine.com/2016/11/not-an-imposter-fighting-front-end-fatigue/
  9. https://en.wikipedia.org/wiki/Marketing_myopia
  10. https://hbr.org/2004/07/marketing-myopia

Leave a Reply

Your email address will not be published. Required fields are marked *