Olaf's

Cats and Not-the-cats

User Interface Design Without Programming

Posted by Olaf on Tuesday March 6th, 2012 @ 08:13 PM

A new project is starting. You are in front of a prospective client and are demonstrating the way your solution will solve their problem. You have explained your proposal, you went over how you address customers needs and then the client is asking that dreaded question: “Can you show me something?

How to discuss user interfaces with clients?

Most clients will be nontechnical. Clients are thinking in terms of their own business and usually their business has nothing to do with designing software. They want to have a problem solved and prior to signing the order they want to know how you will go about it.

So they want to see the GUI. But a GUI will require a running logic behind it. You are stuck with a chicken-and-egg problem: write the logic to handle the GUI before knowing what the client is expecting from the GUI. What about usability? It is not yet about styling, just to know which button goes where. This is not a new problem, there are several ways for handling it.

There is paper prototyping. It is seen as a good way to design user interfaces. After all, pencil and paper are a common commodity in an office. There is no ramp-up phase trying to learn a new tool. Freehand drawing might not be nice but everybody can do it. Buttons, lists and other widgets can be designed as needed. Most importantly, the client will understand why after the design and usability session(s) there is still lots of work left in the project. Work as in: writing code, testing for usability, performance verification and so on. All that paper drawings have to be transferred into bits and bytes.

The problem with paper prototyping is that it is a physical activity. As such it does not fit well into our modern style of working remotely and telecommuting. Clients work from their offices not ours. Getting a few minutes of screen-share-time via internet is rather easy. Traveling to the clients offices for a meeting in person will consume a lot of time. Sometimes it is not even feasible due to distance. Most project stakeholders simply will not be in the same office. Discussing and aligning with them can be a challenge unless somebody really enjoys scanning paper into electronic format.

So there are limits to how far a paper prototype can work. However there are many GUI Prototyping Tools. Some are integrated into developer IDEs, some are part of the tools that graphics designer use. One example is StoryBoards in Xcode, others are listed here.

We want a tool that can simulate our GUI, that does not require code or even programming and that is reasonably easy to learn and use. This post is about MockupScreens, kindly provided by the author Igor Ješe.

Getting Started

MockupScreen is available for OSX and Windows. Installation on both platforms is painless. On OSX it is a matter of dragging the app to the Applications folder. On Windows the application installs to a user writable directory, no administrator rights are needed. The app can be tried and tested for 30 day before purchasing, so it is worth taking it for a spin.

The app interface window is divided between the main work area and the helper areas. In the main working area the forms (the screens) are created. Positioned around the work area are: the widgets list on the left, the widget properties and the comment section on the bottom and the navigator area to the right.

Creating a GUI

Setting up a GUI screen and adding widgets is only a matter of dragging and dropping from the list to the form. Each widget has its own properties, plus it can be assigned a comment. Widgets can be aligned and positioned as needed using mouse or keyboard. I am a keyboard person, so I like to tune the position of the widget by typing the coordinates. Alternatively the widget can be dragged into place using the mouse.

The kind of widgets available cover for most needs. There is no direct iPhone support but still it is possible to design an iPhone or iPad UI with the components available. An UILabel is a “Text”, a UITextField is a “Field”. Sliders seem to be difficult to emulate however the other elements are doable out of the box.

Every widget can have a comment. This comments area is one of the things that makes MockupScreen interesting. Think of the review session with client and stakeholders. All those notes and feedback gathered can be inserted right next to the applicable widget. Great! No more post-its stuck to the printouts.

Another interesting feature are the skins. Skins change the look & feel of the forms and the widgets. With a single click of a button the same screen can be made to look like a windows form or like a OSX form. Coming back to the example from the introduction above, where a customer want to see something to get an idea: the Black&White skin will create just that impression that says ‘this will be the behavior of the GUI, it is only a mockup, it is not yet a finished App’.

Share and Collaborate

Most projects will be made up of more than a single screen. To the right of the main working area is the screens panel. It will hold the screens that are part of the project and it is acting as a navigator. Screens that relate can be grouped together. This way maintaining an overview even when the project is becoming larger. For example your input/output screen make up one group, results screen are another group and so on.

Groups (scenarios) can be imported, benefitting from previously created work or by merging in work done by a fellow team member. Mockups can be exported to HTML and PDF for archiving and documentation. The export to PDF or HTML format is static without animation present in the output. 

Exchanging mockups between Mac and Windows is possible without modifications, just moving the mockup file across. A project team with a mixed computing environment is not locked into one platform. There is no linux version.

Animate It

So far we have a static UI, we could have done this in most IDEs. In MockupScreens your UI can become alive. And this is a feature that makes MockupScreen really useful.

Widget can be assigned a link to another screen. Pressing a widget, for example a button, will switch to the linked screen. It is called a slideshow. Think of it as being a presentation of screens (slides) that can animate back and forth emulating the behavior of the UI.

In a paper prototyping session the user would shout out the action and the paperboy will shift the cutouts. With a MockupScreens slideshow the user (the client) can use the new UI directly, while you lean back, monitor, observe and take notes. All this without writing a single line of code. You can put your client and your users right in front of the slideshow and let them have a “play” on their own. You can observe and collect feedback.

Modifying the slideshow is as fast as you can point and click. For example a previously prepared scenario can be loaded in in order to have the user to go through an alternative. Because there is no compile time the interruption to the user is minimal.

Summary

The time to learn MockupScreens is brief. Animated UIs can be created without writing a single line of code so there is no need to be a programmer. Changes to the design can be implemented quickly effectively speeding up the refinement process, allowing for more iterations. The user can be involved right from the beginning using the animated screens. Feedback can be tracked using the comments field, even if is only a reference number to the company’s issue tracking system. Different skin can change the look & feel.

There are a few things that can be improved with MockupScreens: The background color for the OSX skin is hard wired and some of the fonts are small to read. Under OSX tabbing through the properties jumps over the “Change” button, something that works fine under MockupScreens for Windows. Nothing really being a show stopper, just those little things that could be better.

Support for MockupScreens is responsive and more than willing to help. When contacting the support team it was confirmed that above mentioned items are already on their to-do list. 

Overall I consider MockupScreens as a useful addition to my toolset.

The home of MockupScreens is at mockupscreens.com. A single user license is US$99. Multi-seat, corporate licenses and educational discounts are available