Why You Might Want A WYSIWYG Layout Editor for Android

When I read "Why You Don't Really Want A WYSIWYG Layout Editor for Android" by my friend and colleague Roman Nurik and my initial reaction was - hmm, actually you know, I really think I might. We discussed it via email briefly, but figured you guys might enjoy reading both sides of our discussion.

Roman makes a lot of really good points - particularly on the importance of designing a coherent model for user interaction. This must not be underestimated. His ideas for UX templates sound awesome, and I totally agree that there is no silver bullet to solve the difficulties around creating great UIs.

Where we disagree is on the effect that visual layout editor could have on the quality of Android app UIs. My experience tells me that a good visual editor would have a positive effect on the quality of Android UIs, while also making it easier for beginners to get started.

Fine tuning by hand is always going to be a necessity - but getting started visually can make life a lot easier.

Visual layout editors for native platforms can make assumptions that HTML editors can't

Before joining the world of Android, I spent 10 years writing winforms apps - 5 years of Delphi followed by nearly the same of C# .NET. I've spent a lot of time with the UI tools from Borland and Microsoft.

Using web / HTML design tools to evaluate the usefulness of native layout editors is a little misleading - the reason you don't use Frontpage or Word to build webpages is because the HTML they produce is a thing born of hate - there's no reason an Android layout editor can't produce beautiful XML.

It's also worth noting that the disappearance of WYSIWYG web-dev tools coincided with the rise of Web 2.0 - when HTML made way for Javascript and CSS. I haven't seen anyone who hates themselves enough to try and create a WYSIWYG Javascript layout editor.

If we're going to compare the success and potential of visual layout editors we should be looking at native tools like Microsoft's Visual Studio and Expression Blend.

Whenever I design a new UI I start with pen and paper

Like Roman, I always start by sketching. It's the easiest way to get a feel for the the user experience workflow I'm after. This works because brain-pen-paper is the shortest path to visualizing my ideas.

Moving from pen to PC creates a barrier, but it's a price worth paying to see how my design actually works in right context.

I'm not so attuned to the Matrix that looking at XML lets me see UI, so having to turn my sketches into XML requires an additional context switch: from visual design to writing code and then back to visual layout. By using a layout designer I can continue to think visually and adapt my design without having to translate back and forth from code to images.

Witness the popularity of AppInventor

If you're not familiar with the classes and UI metaphors of a development language this context switch is brutal. You're constantly interrupting yourself by searching the docs for the name (and attributes) of the class you need.

With a visual designer you can browse the available controls and glance at their properties. The barrier to getting started and creating your first UI is significantly reduced, and your ability to experiment, test, and discover are enhanced.

It's important to remember that the built in controls are just a first step. I think of them as stencils, many of which will be replaced with better, customized solutions as the app develops. At my first job they remarked that I was "not just building the car from scratch, but engineering every nut and bolt." They seemed surprised that I took this as a compliment.

Native Visual Designers are designed for variable hardware

The size of application windows in Windows have never been fixed. WinForms layout editors are used to develop for an environment where different screen sizes are assumed. In fact your windows are expected to be dynamically resizable.

One of the beauties of WYSIWYG is that you can make changes to the presentation context and instantly see it's effect on your code. In Winforms that meant dragging your form around to make it bigger and smaller and see how your UI reacted. Having that ability in Android would be great - particularly as you can witness the changes in layout and assets as you modify the screen size and resolution without the context switching.

Users will use your app if it solves a problem. They will stay loyal if using them brings then joy

Roman suggests that "Visual layout editors arguably also place a lot of emphasis on the aesthetics". I don't think that's true. If anything, traditional WYSIWYG UI tools have done the opposite - resulting in uniformly depressing, drab UIs.

Not that this is better.

No matter what though, you are going to need to get your hands dirty in amongst the XML to get your layout right - and it's likely to be pretty early on in the process.

A rich visual layout editor is neither necessary nor sufficient to guarantee a great UI

Lazy developers will create rubbish user interfaces. If you want to use a visual designer because it's faster to drag-and-drop than to write out XML then you're doing it wrong. I believe that a good UI designer can make it easy to dynamically modify the look and feel of each component beyond being a simple drag and drop layout tool. By baking in some of the best-practices for UI development you can help codify successful UX.

Creating a compelling user experience is about more than just laying out controls on an Activity. You need to spend a lot of time thinking about what workflow you're trying to support, and how to make the user journey pleasant if not an outright joy.