GUIIO - A Postmortem

Over the past two or so months, I have been working on a project that has received no discussion on this blog. Namely, the use of ASCII Art to describe user interface (UI) design ideas. Many of you probably have seen examples of what it is I am talking about, in fact there are several examples of this on the Bugzilla database for The Mozilla Project

Here's a quick example of a User Interface designed using a tool I have developed called GUIIO (more on this later):

.........................................
.                                       .
.User name : [_____________]            .
.                                       .
.Password :  [_____________]            .
.                                       .
.                                       .
.                                       .
.                                       .
.    ----------     ----------          .
.    | Login  |     |Cancel  |          .
.    ----------     ----------          .
.........................................

The project consisted of an application, GUIIO, which makes designing User Interfaces (UI) in ASCII as simple as using a UI Builder such as the GLADE Interface Builder,QT Builder,etc. It also consisted of a study which looked into the practice and perceptions of design and this textual design medium (i.e. ASCII art). Finally, a paper was developed based on the results of the study, as well as a presentation which discussed the work. I will now briefly discuss each of these aspects of the project.

Our study was broken into three distinct parts. In the first part of the study, background information of the subject (age, profession, computer expertise, etc.), their experiences in designing user interfaces, and finally their perceptions on ASCII art were collected and analyzed. The second part of the study had subjects rank and comment on the ASCII art designs of several common controls (comboboxes, textboxes, listboxes, etc.). Finally, the third part of the study presented the subjects with a series of completed interfaces in ASCII art. The subjects would then identify which components of the interface they could recognize. There was a total of 11 people who participated in the study, 9 male students, a female student and a male civil servant. While the study may be somewhat biased based on the low number of participants in the study, as well as the the fact that our sample isn't representative of UI designers and the UI design community, given the constraints that I was working under (time, energy and otherwise), it was the best I could afford.

There were five questions that were of interest in the study which I will briefly highlight and discuss which were:

1. What user interface design mediums do people use?
2. How do people communicate?
3. Which ASCII art design best represents UI components?
4. Are there issues in using ASCII art?
5. Are there guidelines in designing ASCII art?

Firstly, the most common user interface design mediums people use Integrated Development Environments, such as Visual Studio, or Eclipse. Hardcoded user interfaces and visual designers were the next common methods people designed UIs. These methods of designing UIs are costly, as it tends to take a while to build a UI in any of these tools, as you must carefully specify what it is you are trying to build. In addition, these mediums can also limit the designer's ability to express novel UI design ideas as designers are tied to the tools and components that are readily available to them. However, this is not true in other design mediums such as hand drawn sketches. It is important to note that only seven of the eleven participants in the study have had experience designing UIs.

The results of the second research question, which explored how people communicate, is reflected by the following graph:
As the graph clearly shows, e-mail and instant messaging are the two primary communication channels participants primarily use. This has important implications on design mediums, as the design mediums designers use, should match the communication channels they use. Otherwise, it would be difficult for them to receive timely, rich feedback from their colleagues on their designs in the forms of critiques. Design critiques, by the way, where your colleagues rip apart your design ideas, is a tradition of design culture. Luckily our design medium seems to match the communication channel participants indicate they use as both e-mail and instant messaging primarily make use of text.

Speaking of critiques, we had participants rank and comment on ASCII art designs we have put together for several common UI components, such as listboxes, textboxes, and buttons. What we discovered was that certain components, such as buttons, labels and checkboxes had a particular design which was consistently highly ranked. However, there was another group of components, such as menus and vertical sliders did not have a design which was consistently highly ranked. Certain types of controls are easier to design for in this text only medium, than others. In addition, it is possible to design controls in this text only medium which most people can recognized. The following is a graph which summarizes the rankings of the various designs of UI components which were presented to participants:



There are many reasons why ASCII art isn't a common design medium in practice. Rather than speculate on possible reasons why people hastily ignore this medium, we asked participants directly during our interview what issues they had in creating,viewing, modifying and sharing ASCII art. It is important to note that not all participants in the study were familiar with the concept of ASCII Art. In any event the following charts highlight the difficulties participants mentioned in the creating/modifying and sharing/viewing activities:





Before I discuss the final research question we explored, I think it is important to briefly discuss exactly what these issues were. In creating and modifying ASCII art, getting things to look the way they want refers to the classic problem of a designer translating the design idea they have in their head to the design medium they are using. This difficulty can be found most all design mediums including sketching on paper, which is why many people aren't that great at drawing. However, ASCII art amplifies the difficulty factor, as it is not immediately obvious what combination of computer-printable characters will give you the desired look you want for a particular UI component. Furthermore, it can be very time consuming adjusting for proper formatting to get the design to render correctly on your screen, which poses as a difficulty in viewing and sharing ASCII art. Finally, adjusting a design in this medium is typically a time consuming and painful process involving the careful realignment of rows and columns of characters whenever an aspect of the design is changed.

There are some guidelines that I can pass on to those who are interested in using ASCII Art to represent UI components and UI ideas. Firstly, there seems to be a fine balance in ASCII art between the design having too little detail and too much detail. Secondly, there may be certain aspects of the design of one components that may be appropriate in the design of another component. Designs in ASCII art must have a clear beginning or end, otherwise people viewing the ASCII art may have trouble interpreting the art. Certain visual components, such as containers which are items which hold inside of them other items, need to have a clear outline, otherwise the visual hierarchy is lost on users. Fine grained details often go unnoticed, take advantage of this fact to make designs which are space compact, which not only make it easier to fit content on the screen, but also make editing the components easier. Finally, realize that you cannot win them all. What I mean by this is that not all ASCII designs you create will be universally recognizable. It may take several different attempts at a design before you have a large enough audience of people who can recognize the design you are after.

We have developed a tool called GUIIO which is designed to alleviate the problems associated with representing UI designs in ASCII Art. GUIIO is an open source project which is based on a PERL module called ASCIIO (which can be found here).

GUIIO brings the ease of use and direct manipulation of UI components found in GUI Builders such as QT Creator, or the GLADE Interface Designer, but to ASCII Art. To draw a UI component, simply click its button from the component palette and the component's representation in ASCII Art will be drawn on the GUIIO form, which is an ASCII art form that renders designs in the Monospace font, hence removing the issues associated with rendering ASCII UI designs on other types of forms. One can then drag the component anywhere on the form to place it where ever the designer chooses. Using just a text editor, this task would take a very long time, as one would have to offset line by line the characters that make up the component that needs to be moved, and then worry about alignment and formatting to make the UI design look consistent.

In addition, since each of the components has its own ASCII rendering, the designer doesn't have to think about how to represent the UI component in ASCII reducing the cognitive strain on the designer. In fact the designs of these ASCII Art representations of the components have been field tested and many of the designs that have been implemented have been highly ranked in a study we conducted. That isn't to say that these components could perhaps later have an improved ASCII representation.

Finally, UI designs created in GUIIO can be saved as a plain text file, meaning that the GUI design you have created will be saved exactly as you see it, in ASCII Art. You can also copy the ASCII Art design into your clipboard and easily paste it into another application, such as an e-mail application for discussion of how a UI design looks like, inline in the body of your e-mail. You can even do the inverse. That is you can open a file which contains an ASCII Art representation of the UI someone else has created, and GUIIO will determine what components are in the design, and populate the GUIIO form with those components and its associated properties. You can also copy and paste into GUIIO an ASCII Art representation of a UI you saw somewhere else (such as on a forum and newsgroups) and GUIIO will again recognized the components and populate the GUIIO form with the design. As a result you can have all of the flexibility and time saving capabilities of the GUIIO regardless of whether you created the design in the tool or found it somewhere else.

The following is a screenshot of GUIIO in action:


I would like to thank the people who have worked on ASCIIO all this while. It has provided me with an excellent foundation to base my work upon. It has been fairly easily to add new components (called Stencils in ASCIIO speak) to GUIIO, as one needs to only edit a single text file, and change some self-explanatory fields (such as Text, to change the text that the component will render). It was also a breeze to change the behaviour that a component takes on (called Stripes in ASCIIO speak), as common actions, like dragging, clicking, and resizing are all given their own functions in its own respective stripe source file. However, the development was not all cakewalk, for instance developing the capability to read in plain text representations of UI designs and convert them into something GUIIO can understand (such as textboxes, listboxes, labels, and other UI components it has a vocabulary for) was tricky. For one thing, some of these components are multi-line and so the standard technique for solving this problem (regular expressions) was not enough, as you cannot immediately apply regular expressions to multiline patterns of characters, although I did manage to make good use of them along with a look up table to decipher detected components and their properties.

I would also like to thank the graphic designer(s) who contribute to the GLADE Interface Designer project. I have borrowed the icons you use to represent available controls in the toolbox/control palette, for use inside GUIIO's tool palette. I have no doubt spent countless hours designing those descriptive icons, and it has been a great time saver for myself to rely on this other important contribution from the OS community.

In the next couple of weeks I intend on uploading my work to CPAN including source for all others to take a look at. It will be licensed under the PERL license. I will post an article to this blog describing how to access the PERL module and code, when this all becomes available to CPAN.