Creating a good user experience

Creating a Compelling User Experience - part 1.

Hi, in the previous post I covered setting up Facebook logins for your Google site using OAuth 2.0.  This post will cover more around building up a nice, responsive, usable UI.  I have to confess this is not normally my number one area but for the purpose of my start-up it's something I'm having to get my head around (with some much-appreciated assistance).  Hence, this is part 1 of my journey with this but I think I've already got some interesting things to show.

Basics

The basics of building a good user experience with Google sites and Apps script gadgets is to adhere to the following:

• Maximise the use of client events wherever possible - and I mean really maximise them, the less round trips to the server you can make, the better user experience you'll provide.
• Make sure when you do a round-trip to the server you make it obvious to the user some processing is happening if you don't want them randomly clicking on other buttons on the screen.  Remember, GAS gadgets all run asynchronously on the server so you can get some funny behaviour if you're not careful.
• Also, if you have really long running operations be aware of mechanisms like cache services (I haven't really had the need to use this yet but it's there if needed).  
• All these things are also summarised here  https://developers.google.com/apps-script/best_practices  but hopefully I can give some "real-life" examples.
• For appearances I've found it best to use in-line CSS which I'll also demo
• Finally I make extensive use of the built in charts that come with Google Apps which are pretty awesome.  I won't go into a lot of details in this post on those, will leave them for a future post since they would have enough material to warrant it.

My Example

To see how most of this works in real-life just go have a look at www.socialsamplr.com or check out the screenshot.

Step 1 - Create the controls and make them look pretty

The first task I had was to load the controls on the page and make them look pretty - at least to me (if you think they're fugly let me know I'm always open to feedback).  This is best done by applying in-line css.  The code I wrote to achieve this is as follows.  First, create a bunch of controls.

Then apply in-line CSS to them:

And here's a sample of the functions applying the styles.

And that's pretty much it for nice looking controls.

Step 2 - Use client events to improve the user experience

This step takes a bit more planning, but trust me it's worth it.  Using client events extensively is key to making the screen responsive to the user and creating a nice experience.

The first thing is simple, but effective.  On the screen shot shown earlier from my web app, you'll see there's two groups of drop-downs and buttons.  The lower group can be shown and hidden by toggling the label you see just above it (the label saying "Hide").  This is simply done by adding a client click event to that label which sets the visible property of those controls to false or true. A very simple but effective technique for preventing your pages being overly cluttered with confusing controls for the user.  Basically just done like this:

You'll see you create an event for the control itself forEventSource(), the one for any other controls on the screen as well forTargets.  Note, multiple forTargets can be set.

The next bit is really cool.  You can create client and server events for a control.  This is key if you want to show the user something is processing and prevent them from randomly clicking buttons (remember events are asynchronous) and stuffing up your beautiful screen you've spent all those late nights developing.  Also, it enables you to create some call Ajax-like functionality if you want.  So for the buttons on the website, here's how I achieved it.

I create a client event for a button where it sets it's own text to "Working" and also sets the background colour of any other buttons to grey.  This will then all be reset to the original colours and text once the server side event is complete.  Code is shown as follows.  First set the client events on the buttons.

  buttonRun.addClickHandler(uiApp.createClientHandler().forEventSource().setText("Working...").forTargets(buttonRunTimeline).setStyleAttribute("background-color","#C0C0C0"));

This then gets repeated for the remaining buttons, referencing the others.  For example buttonMySubject would be.

buttonRunTimeline.addClickHandler(uiApp.createClientHandler().forEventSource().setText("Working...").forTargets(buttonRun).setStyleAttribute("background-color","#C0C0C0"));

Then proceed to attach a server event to each button and make sure after the server events are run the following function is called to reset the buttons to their original state.  This is shown as follows.

Step 3 - Other tips

Some other pointers I've found helpful when it comes to reducing the server-side processing time for events.

• Where you need to do any complex data processing use arrays - makes a big difference than iterating through rows from a ScriptDB table.
• Where you want to change controls on a screen, load the controls from doGet() and then toggle their visibility for improved performance - much better than adding and removing controls dynamically.
• Consider tricks like using some hard-coded initiation values for your screen when users first arrive.  The improved load-time performance can make all the difference to first time users (obviously there's a trade off with dynamically generated values).

In Summary

In summary, I'm not going to pontificate about how to make the world's most awesome UI - there's plenty of books around for that.  But for using GAS in Google Sites I've found some of these tricks have really worked.  Also, if you have time to visit www.socialsamplr.com and have any feedback I'd really appreciate it.

Next Week

Next week I'll run you through how I've created the dynamic charting on the site.  Until then, don't work too hard!

cheers

Daniel