As we work on updating
Laguna Survey and adding new features, there is one question we constantly ask ourselves: "What can we remove from the interface this time around?"
That may sound like a weird question to ask - after all, a new version is about new features, isn't it, not removing them? Yes, but nobody said anything about removing features. The trick, the real trick, the difficult part that way too many companies do not work hard enough on, is "How can we add this new cool features while at the same time keep the interface as simple, or even simpler, than before."
A simple interface means an non-confusing interface and an app that is easy to use. It is not true that adding features and making the application perform more advanced functions does by necessity increase the complexity of the interface. It is only common. Common because especially with enterprise app development, the simplicity of the interface often is not considered important enough to merit much thought. Features are considered much more important, and there is an unfortunate tendency in certain circles to think that a cluttered interface communicates an advanced feature set.
We think a cluttered interface communicates laziness in the development team. A clean, simple interface that can communicate its own state, and is discoverable for advanced users, is paramount. For the users, and for us. If the users can easily figure out the interface, that means they don't have to ask us about it. Which means we spend less resources on support and more on developing the next cool feature.
You don't have to be an interface genius to make a great interface. It is enough to do like we have done, to constantly think about it, and iterate. And iterate and iterate. We will get there eventually.
I'd like to offer up surveyCanvas as an example of this. surveyCanvas is our module for producing the survey questionnaire. We had a really cool idea for this task from early on, making it into a true AJAXy, DOM-manipulating, OO JS, real-time, WYSIWYG... well, you get the idea. That was the concept, and that part turned out to work great.
Now, to insert a new element in the questionnaire, you'd just use the correct tool on the Tool panel. This is how the Tool panel area looked like in an early beta of surveyCanvas (it was then called SurveyDesk):
The page that contained surveyCanvas had a header with company graphics, and a logo. Very much web-page-like. At this point we were still struggling to get that genuine web application look and feel going.
As you can see, the Tools panel stretches out over the width of the page, and there are buttons for each function. Upper row, labeled 'Insert', contains all the different things you can insert in the questionnaire, and the second row contains commands for manipulating the same.
The thinking behind this layout was very much to have everything instantly accessible with the click of a button. So our concept of simple was more or less "fast". One click, boom!
Well, simple does not necessarily equal fast, of course. There are other considerations. There are already too many elements here, not to mention what will happen as you start adding more types of elements and more commands.
So, iterate.
Much better! We gathered all element types into a drop-down menu. Visually, we can now add as many more types as we like without cluttering up the interface. We've however had to trade in some operational speed for clarity. You now have to click to open the menu, click to select item type, then click to insert it.
The header is now just one thin grey line, and even though Options now has been tabbed with Branching, everything looks much cleaner.
Notice that we also now call items precisely that, instead of 'nodes' as in the beta. Calling what you add to your questionnaire a 'node' is something only a programmer would do, which is precisely why that term ended up in the interface....
So, now we are ready to add some features. Iterate!
Turns out the Options panel need all the vertical space it can get for certain question types, especially on small monitors. And it seems the Tools panel doesn't need so much space, so better to let the Options panel take over some of the real estate. Looks cleaner, too.
By this stage we feel we have firmly established that the Tools panel pertains to the elements you put down in your questionnaire, so the labels to the left are superfluous and can be omitted. The header is also completely gone, as in a desktop app, as the browser window itself shows the title.
There are clearly now more elements in the Tool panel than the last iteration, because more features have been added. We are not saying you should never add more buttons to a release, only that you owe it to your users and your support staff to work as hard as you can on simplifying the interface. Apart from the new tools, we wanted to direct the user to the very helpful video tutorial, so it gained its own button, too. This is how surveyCanvas looked as of version 1.2.
Not quite there yet...
For the next version we are planning several new features in surveyCanvas. This again presents the problem of potential clutter in the Tools panel. What to do?
Indeed, what to do? A constraint we always have to work within is that of being a web application, i.e. running inside a browser. This is a challenge sometimes because: a) we do not have access to normal application features like a standardised menu system, and b) because many users have certain expectations about how things work on the web, expectation which might contradict expected behaviour in a normal desktop application.
For instance, the concept of the link is at the heart of the web. But we think of, and want to communicate, Laguna Survey as an application, so we do not use normal links inside the app itself, as we think that would dilute the concept (yes, links have been seen in desktop apps, but we have to work actively to be seen as a 'real' app). However, there are many places in Laguna Survey where a command is little more than a link, like the 'Reference manual' and 'Video tutorial' in the Tools panel in the illustration above. These then are presented as simple, custom buttons. We feel it is not appropriate to use the <button> element for these tasks, because we think many users have a mental model of executing a 'real' command with such buttons on the web. 'Sign in!'. 'Submit!'. 'Upload!'. The distinction is however far from clear-cut in all cases, and we are still struggling with this.
As an aside, let me tell you a little secret. You know that "Starting Laguna Survey..." message you see after you've hit 'Log in' and before you see the Laguna Survey main window? Its purpose? Getting all the user's data from the databases and set set them up in a way to then be used in the app? No.
Transferring the user's mental state from 'surfing the web' to 'using an application'?
Correct! We think the 'Starting' message has a real and important function, but it is not a technical one. It only takes a second to get all data on a user from the back-end servers and construct the main window. The 'Starting' message is pure psychology; when the main window has been loaded, the user must really believe she is running a real app, because that is what we are trying to serve. The 'Starting' message allows a mental transition, a mental wormhole. Leaving the web page browsing of the Sonora IT web pages and emerging in something that serves a web application.
This fact is not widely known outside of the development department, and in Laguna Survey's lifespan, everybody else has so far just taken the 'Starting' message for granted. Nobody ever asks about it. Not our users and not anybody internally. It works.
Back to the main thread. Another pain is not having access to application menus. A desktop application can 'hide' much of its richness and feature set in its menus, ready to be discovered by the power user. A menu on a web page, however, is something completely different. These drop-down menus were only ever meant to be for choosing options in a form. They were never meant for selecting commands to be executed, like application menus, so they behave accordingly: The first item is not treated as a headline, when you select something, the menu is stuck on what you've selected, etc.
So what to do? Well, if we add more commands, we could gather them in a drop-down menu with an 'Execute' button beside it. But that just doesn't make sense. If you choose one of the commands from the menu, it is always because you want to execute it, so why should you have to choose the command, then press a button? Why not just execute the command immediately? It is after all a command menu.
It might not be what the user expects from a menu on the web. But we have decided that is the way forward anyway. We have to take certain liberties if we want to keep innovating, and maybe users are ready to start expecting a different behaviour in web applications anyway? So, this is what the Tools panel area is going to look like in the next version:
The commands that you can perform on the elements are now contained in a single menu. Whenever you choose one of them, it is immediately executed, and the menu springs back to show 'Edit', just like an application menu would.
"But why didn't you make some custom menus, if the normal ones were not meant for that use, and users expect them to behave differently?".
Glad you asked! In short, the built-in menus have some properties that makes a lot of sense to take advantage of. They are standard, for one thing. They may look a bit different from browser to browser, but their behaviour is well understood and consistent. They display were they are supposed to, scroll if necessary, and are always large enough to display all contained text, horizontally. You do not have to cook up some custom JS and CSS to try to duplicate those aspects. But the most important feature is that the browser knows that they are menus. This is important in a wider perspective, in regards to for instance accessibility.
It struck us that the menu for inserting the elements should then also behave like that. You only ever use it to insert elements, so why should you click an 'Insert' button after you've chosen what to insert? You shouldn't have to, of course. So now, just choose the element to insert, and it is immediately inserted.
Now we have a cleaner, simpler interface with room for more item types and more commands, and we've reduced the number of clicks to execute them from three to two. We've added some more auxiliary commands and options but the Tools panel still looks cleaner than in previous versions.
And yes, we're going to add multiple undo/redo in the next version. We have it working in-house and it rocks!