WYSIWYG is dead go with the flow

Since the birth of window based user interface (MAC, Microsoft Windows) application designers have adopted the What You See Is What You Get approach to creating User Interfaces. Visual Basic was one of the early tools to provide a canvas onto which a screen can be drawn by simple drag and drop of screen elements on top of the canvas. “Property” sheets allowed these controls to be specialised/designed further for example change font, size, captions etc. This paradigm of development has since stuck with us, and this post questions whether this is right and whether this is the future?

Most corporates have started to standardise front end screens to be developed in browser technology for the right reasons such as; cross platform, ease of distribution, zero install. As expected tools vendors have provided good support for browser application development. However does the WYSIWYG paradigm apply? Should you still create browser screens in the same way as desktop applications?

Browser applications typically use a “flow layout” whereby the screen layout changes according to the size of the browser window. This is very useful because users could have different screen sizes, or browser settings (e.g. lots of toolbars) or even be viewing the application on a mobile device. Using a flow layout means that screen layout will change according to the users browser window size, thereby automatically handling each of the differences above.

Using this approach however means that creating a screen using a drag and drop approach onto a canvas does not necessarily give you a view of the final screen layout, hence you have to question whether now WYSIWYG is the right development paradigm for browser applications.

Another issue is that different browsers sometimes interpret the browser differently, causing screens to appear in differently across different browsers.

There is also the issue that “look and feel” is actually separated from the screen code into a style sheet, and a screen may be presented using different syle sheets, Hence displaying a form could be drastically different depending on the stylesheet used ( some great examples of this can be seen at http://www.csszengarden.com/ ).

With the above in mind is it time for a new approach? Perhaps using a more “real time design” approach. With such a tool, users would create screens and then run them to see how they would be rendered in different browsers, devices and screen sizes. With the proliferation of devices a multi-channel approach is becoming core to many organisations, and in such a world screen sizes will vary greatly, a new approach is required for creating screens because now the paradigm has changed to What You See Is What You Might And Most Probably Wont Get.



Tags: , , , , , , , , , , , , , , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: