This post was originally made on our old blog in 2013 and has been reposted here.
What exactly does the HTML5 powered web mean for UI & UX designers specifically and wireframing / prototyping more generally? Traditionally, designers have relied on a wide range of methods and techniques to communicate their thoughts and ideas, first to themselves and then to an internal team (if applicable) and ultimately to their clients. This is not going to change anytime soon and nor should it. Here I am concentrating on static mockups and wireframes as they are the most commonly used technique.
My question: Does the use of static mockups, as a design tool, lead to needlessly limited designs for an increasingly interactive and dynamic web? Put even more simply - does the tool limit the output?
So the web is changing and changing fast. When we say the web now we mean the whole web - covering mobile, tablet, wearables, portable games consoles, games consoles, web via TV and whole slew of devices somewhere in between. We stand on the cusp of nothing less than a UI revolution.
Dynamic panes with live and continuously updating information, animations, transition effects, scaling, sliding, growing, rotating, scrolling, embedded media such as video and audio in various forms - all of this, propagating with increasing frequency and speed. Beyond the changing standards in web design is the prospect of a whole new wave of web applications with incredibly rich interfaces - just take a look at Google Chrome Store to see some very early examples - the web is going to be more dynamic than we can imagine and in a lot more places.
The tablet revolution that is sweeping the world is another huge shift in terms of interface design and how we interact with those interfaces - just as it is with mobile smartphones - touch brings with it many types of gestural interactions that are difficult to mock up in a meaningful way via simple static screens -it is now becoming increasingly necessary to test on the target device and test early in order to have any idea if certain design directions are worth pursuing further. This changing face of the web brings with it a whole new set of challenges for designers. The main issue is how designers create wireframes and prototypes quickly that effectively and clearly communicate web content which is primarily dynamic. We believe a new class of tools are needed.
A lot of designers tend to begin prototyping with pen and paper - this is a two-way process. A static sketch on paper is an excellent way to quickly think through ideas at a high level but the more in-depth we go the less suitable it is. Sketches are usually followed by some form of static mockup - either low fidelity or high fidelity, but in either case, usually static. The use of static mockups will typically only result in designs that do not truly take rich dynamic behaviours into account.Designing for a dynamic medium through a static medium means the design thinking is naturally limited right out of the gate - the tool does indeed limit the output. A static mockup given to a programmer as a blueprint for creating a dynamic interface will most likely be full of holes and missing a lot of information that the programmer needs - does the programmer just invent the missing information himself - surely this is a recipe for friction in a dev team that leads to cost and deadline overruns with sub-par end results.
A common argument used is that it is better to start with low fidelity mockups and then move progressively onto higher fidelity mockups as the design process progresses along. Given as a reason for this is that it will focus a clients attention on the important elements at each specific stage of the design. Well, I don’t buy it!If a fully dynamic high fidelity prototype was as quick and simple to create a low-fidelity static prototype I believe designers would not be so keen on drawing cartoon approximations of their designs. But instead, designers without requiring coder-input could give their clients something more substantial and tangible to relate to, something more representative of the actual user interface and user experience. Something that offers more value - something more exciting and more impressive - running on a touch device if needed. Not a case of clients focusing on the wrong things (on the visuals) but clients simply getting a much better feeling for the whole user experience and earlier in the design process.
Consider how easily the complex animated UIs in this video could be communicated via static means…
A look at Corning’s vision for the future with specialty glass at its heart
A final point is that of emergence. Not all designs emerge fully formed through a pen onto a page, later to a wireframe and finally over to a coder for manufacture. Experimentation, play and emergence are all critical elements that allow designers the creative freedom to “discover” solutions that they may not have otherwise found. A rich toolset will allow a designer quickly experiment with many ideas in real-time and to evolve those ideas in real-time. For new kinds of dynamic interfaces and new kinds of user experiences - we need a new set of tools that are just as dynamic and capable. At Fluid UI, we believe that designers want to work quickly and easily to blow the socks off their clients with stunning rich animated prototypes and exciting user experiences and that is exactly what we aim to deliver.
At the start of the process, the spec can be a little vague. At this stage, blockframe or wireframes are ideal. You can focus on the big picture without having to get bogged down in details. Sometimes, it is difficult to make a client understand the value of the wireframes but this is also part of your job as a designer. So, you need to get used to it.
Designers are often under a lot of time pressure to get work done. But, while it is important to work to a timetable, it is also important to get the most out of the design phase. Any errors made in the design will add time and money to the development phase. While, it costs a lot less but in terms of time and money to fix these problems before you start development.
The key to this stage is testing. Test with your team and make sure that everyone is on the same page. Make sure that the designer and development team are on the same page. More importantly, and especially if you working for a client or another department withit your organisation, you need to ensure that they are happy to sign off on the designs and this can only be done if they have been walked through the design.
