When doing custom application development, sometimes a small change to the user interface makes a big positive impact on the user experience. In this article, we’ve found a great example of that principle in action. Some readers of our blog may be familiar with Start Software and Robin Bennett. Start Software is a medium sized custom application development company, whom we’ve profiled in the past. Recently they were kind enough to send over a screenshot of a small UI change they made in one of their applications.
And the change was simple – use a picture of people instead of just color coding to make the calendars more readable.
Background on using calendars in custom application developmentTypically, no matter what scheduling tools you use, calendars are displayed pretty much the same way. Each person (or resource or calendar) is assigned a color. Their color appears in the legend and is used when an event for that person is displayed.
Here is a screenshot from one of the Alpha Five tutorial videos showing what this looks like.
Calendar1 is blue, and Calendar2 green. Remember a “calendar” could refer to a person or a resource. So we could have just as easily written in “Jim” for Calendar1 and “Linda” for Calendar2.
This is pretty much how most calendars work, like for example Google Calendar.
However, if you think about it, there are 2 distinct drawbacks.
One is that a good proportion of males are color blind - possibly as many as 1 in 10 when it comes to red/green color blindness. (Women are affected too, but it’s far less common).
The other problem is that you need to look at two places on the screen to determine the schedule your looking at. Either you need to look at the legend and find an event, or your need to look at an event and look back at the schedule. Having a person look in two places gives them twice as much opportunity to make a mistake.
Plus, this also becomes more cumbersome when you are tracking many resources and not just a handful.
In their application, Start Software eliminated all of these drawbacks at once, simply by placing photos into each event.
When you look at the schedule, you know instantly whose calendar you are looking at. Presumably it would also be a handy way for a new employee to put a name with a face. (I needed to leave the screenshot above at low resolution to obscure client names – but I think you get the idea)
How Did They Do That?Dan Darkin, a developer at Start-Software was kind enough to send over his notes explaining how did it.
To begin, he created image files for each person.
Keep in mind that each person in the schedule is assigned a calendar, this is how the component works. It’s part of a parent child relationship where each record in the Calendar table can have multiple matching records in the Events table.
So for convenience, he named each picture after the value of the person’s GroupID field in the Calendars table.
Then when an event is created, some server side code is executed that creates the HTML needed to display the picture. Here is a screenshot of the code.
Dan also wrote code that allows images to be swapped in and out when the underlying resource changes.
We think this is a very clever technique for a very common problem, and we hope you can adapt it in your own applications.
Thanks Robin, Dan, and the rest of the folks at Start-Software for sharing this!