April 12, 2016
There remains one drawback, however — these solutions are still prone to bad user experience. Problems that often lie in the smallest details, micro-interactions, are very hard to solve using classic designing tools like Sketch or Photoshop. Even with popular online prototyping tools like UXPin or Atomic (which are great design tools altogether), it is hard or almost impossible to actually test-drive more sophisticated ideas. Usually, they only provide us with limited and simple animated mockups with little to no logic; the interactions are often limited to basics like clicks, touch events or swipes.
Additionally, the time and energy needed to create more complicated flows and interactions grows exponentially. If one wants to be very precise over all the possible cases, this gets even worse, up to the point I consider to be counterproductive.
This is where a prototype designer steps in. This role was covered in a great talk called Like a Pro(totyper): Lean Prototyping for UX Designers by Heather Daggett given at push.conference last year (2015). I find it really inspiring and highly encourage you to watch it! She presented the possibilities that are open to designers the moment that they learn to code (in her company’s case it is HTML+CSS combined with AngularJS and Dynamics.js). Those possibilities are huge! If you are a UX/UI designer, you should consider trying to prototype in code as well. Framer.js might also be handy if you don’t want to go all in.
Sadly for me, this is still not the ideal solution.
The reason? Heather states that the way prototyping designers write the code is totally different than how front-end developers would. This is not production-ready code and this is nothing to blame the designer for — it is the front-end developer’s responsibility to write quality code. They have the required experience and knowledge. This sadly leads to potential duplication of work, which in turn increases the total costs of development. For some companies this might not be a problem, but it’s rarely the case.
What if front-end developers could solve those design problems? I think you already know where this is going. :)
This does’t mean you have to jump in and become a prototype developer right now. Depending on your understanding of the design process, your problem solving skills and the project flow in your company, the place to start can be different.
If you don’t feel competent enough to solve design problems just yet, start with improving your design thinking. Work closer with the designers, help them with your knowledge, be curious and ask questions. Learn from them and let them learn from you. Read more about user interactions and user experience in general. Think about how you can improve the user experience with the technical knowledge that you have already. Remember that User Experience isn’t just what one can see on the screen, but is rather everything that happens in-between. Hence, you don’t have to be a prototype developer to make a difference! In the end this will make for a better application.
However, if you have this certain set of design skills and already work closely with the design team...
Let’s first answer the question: Why should front-end developers do the prototyping and not the designers?
I believe there are some strong arguments in favour of design-oriented front-end developers. First of all, code is our world, this is what we do for a living. We know this stuff - we know the possibilities and the limitations of current technologies. Hence, we can code more demanding prototypes much faster than designers.
Additionally while doing this, we can already estimate the future performance of certain solutions across different platforms and probably even talk with backend developers about certain approaches. There is also quite a high probability that most of the code could be used in production later on, after some polishing of course.
After all, the working prototype is done by a skilled front-end developer who understands when to take shortcuts, while sticking to good practices and keeping the proper code architecture wherever possible. All this gets even easier if we utilise the component-based, view-layer-oriented frameworks of today like Vue.js or React, where the interface logic can be easily separated from the business logic. Creating working prototypes has become faster than ever before.
Keep in mind that introducing prototype development in your company might not be easy. As with everything new, you have to prove that it is actually worth the time and money.
To help you with that, here are some of the pros & cons of prototype development:
Code used in prototypes can serve as a basis for production ready code (the amount of it depends on the shortcuts taken)
When the development of the production code starts, you already have the idea of all the different data flows. This means it’s very easy to incorporate the TDD (test-driven development) approach.
Coded prototypes can be used for usability tests
You can skip a part of or even the whole static design phase, depending on the developer’s design skills and the application characteristics
There are some cons, however:
How does prototyping look in your company? What more can front-end developers do to improve the user experience?