UI Oddities #3 – Google Calendar

It’s been a very long time since I did a UI oddity post. I actually do spot them fairly regularly, but I’m usually pressed for time and never get around to it. Fortunately, right now I have an annoying UI feature in front of me and I have time to post about it. Observe the screenshot below (and ignore the fact my Google+ life appears fairly well dead).

The top-right corner of my Google Calendar window

I don’t want to give Google a hard time as they have highly skilled developers and designers, and with the volume of data they get this is probably on purpose. However, try answering the following questions:

  1. Which button do you click if you want to print the page?
  2. Which button do you click if you want to go to the calendar settings dialog?
  3. Which button do you click if you want to change the display density of the calendar?
  4. Which button do you click if you want help with using the calendar?
  5. Which button do you click to refresh the calendar?

Here’s the answers:

  • Print and Refresh are both in the More menu.
  • The display density setting is in the bottom cog menu.
  • The calendar settings dialog and calendar help system can be found in the top cog menu.

Maybe it is just me, but because I don’t use the Google Calendar app overly frequently, I always find myself going between all three buttons until I eventually find the one I want. Intuitively, for me anyway, I would prefer a different layout that would make much more sense to me. I would offer the user the ability to learn that the top cog is only ever related to ‘me as a cross-property Google user’, and is never related to a specific Google application. I would then have a separate, ‘in-app’ cog that the user can learn only ever relates to the application they are currently in. The cog as a symbol for configuration works very well, and should be used in all applications consistently.

More concretely, I would put the calendar settings in the bottom cog, and possibly even the calendar help, although I’m not convinced help is in the right place in either cog (and should probably be in its own button to help total newbies to get started). I would then consider the most important links that should be consistently displayed to the user regardless of their domain, and put it in the top cog. However, given a little bit of mouse clicking, you can actually already find a perfect rendition of this menu by clicking on either the email address or the small user image. This suggests that there may actually be no use case for the top cog at all, and perhaps a tiny amount of screen real estate can be freed up. You can see this menu in the screenshot below (and behold the wonder that is me pretending to be a photographer).

The global Google action menu

The only question is if the links in the popup menu are the most important ones, and to me it would seem that they are. So, perhaps there is no need for the top cog at all.

With respect to the ‘More’ button in the first image, I find it confusing, and would rename it to ‘Actions’. This is because it isn’t clear to me at all what ‘more’ is in the button. Based on its placement, I could very easily conclude that it is more calendar layouts (following on from day, week, month, and ‘4 Days’), despite the small space between the two buttons. To me, ‘Actions’ makes far more sense – this is the place to go for various actions I can perform upon the calendar, such as printing and refreshing.

Anyway, these are all just my thoughts based on the frustration of the top image button layout. The suggested changes are the result of no real consideration, and I will wait patiently as Google ignore me (due to their massive volumes of design and data arguing against my point). But who knows, maybe one day I’ll visit my barely used calendar to find everything I want on the first click. That would make me happy 🙂

UI Oddities #3 – Skype

Another quick post at a UI that annoyed me today, and today it is beta 2 of the Skype 5 client. Obviously, this is pre-release software, so perhaps it’ll be fixed by the final release. Anyway, the message I want to get across in this UI Oddities post is don’t make me scroll unnecessarily.

Refer to the image below. This is admittedly an image I found online of a slightly out-of-date client, but the point remains the same: the number of contacts on screen is considerable, given the size of the actual viewport. You can lessen the amount of scrolling even further by setting options inside Skype to hide contacts who are offline (which is my preference). Notice that, in this case, ‘Robert Miller’ is expanded as this contact has focus. That lets me see more details about that person, but in a normal workflow, this isn’t necessary and you’d have all contacts collapsed. Finally, note that the status messages that people sometimes use is to the right of the contacts name.

An older Skype client

I like this approach. My main requirement with Skype is to see which colleagues and friends are online, so that I can do my job. I have multiple monitors on my desk, and always have my Skype client visible on one of them. This makes it very easy to track who is online, and perform my job. In other words, the Skype 4 (and less) UI was great for me.

Compare the first screenshot to the second screenshot, which comes from my machine. In this case more emphasis is placed on the persons profile image, and therefore the amount of scrolling required is considerably more. In this case the status messages appear beneath the contacts name, rather than to the right, and space is reserved even if there is no status message. In the screenshot, there is only one status message (which is the dark red box). I’m sure this design is justified internally because the image is now bigger (even when the user doesn’t have an image defined), but in general I don’t like it because, as I said at the beginning, it requires me to scroll considerably more, and I can’t have my Skype window tall enough to see all online contacts at any one time.

The Skype 5 beta 2 client

As soon as I started up the new beta Skype client, I tried to dig through the options to try to change this. In my ideal situation, the image would be removed and the status message would return to it’s more logical location at the right of the contacts name. Alas, I failed to find anything in the options area, but I’m secretly hopeful that I just missed it, or that it’ll turn up in a future beta release.

For what it’s worth, my wish for an option to configure how the contacts looks isn’t without precedent. Windows Live Messenger has an options window, and one section of it contains the options shown in the screenshot below. In this case Windows Live Messenger lets me specify what both my favorites and my other contacts look like. Elsewhere in the options window I’ve set it that I don’t want to have favourite contacts. As shown in the screenshot below, all other contacts take the appearance of a small rectangle only (with the colour of the rectangle signifying the users status). This maximises the number of contacts I see onscreen, which is exactly what I need.

Windows Live Messenger contacts configuration options

I really hope to see a similar option in a future release of Skype 5, as the current approach is a huge nuisance for me. In general though, the message of this post is to other UI designers to consider your user, especially in cases where there is a potential for them to have a lot of data being presented, and where there may be some form of passive updating going on within the view. In these cases, there is considerably more value in presenting more data to the user at any one time over whitespace, which is unfortunately the direction Skype is currently going.

UI Oddities #2 – NetBeans

Todays UI oddity is small, but important, and it’s something that has irked me ever since I started using NetBeans (when I joined the JavaFX team last year). Despite me picking on NetBeans here, this problem is common in many applications, and largely goes ignored or unnoticed by developers. I wanted to point it out as it is a very easy UI crime to commit, and one that can sometimes take a lot of effort to fix. Fortunately, in the cases below it would be trivial to fix.

In NetBeans you often get dialog windows like the one shown below. The problem is simply that the header area has a 1 pixel wide gray border around all four edges. This looks nice to delineate between the white of the header and the light gray of the main content area, but it looks really bad on the north, east and west sides of the header. Fortunately this is easily fixed.

To back up my point, look at the screenshot below, which is again NetBeans, but a different dialog without the additional border on the north, east and west sides of the header. In my opinion it looks considerably cleaner:

The only negative aspect is that the two border colours differ between the top dialog and the bottom dialog, but this again is an easy fix and just a matter of defining the default colour for header borders.

Finally, I wanted to point out another common example of bad borders, and was fortunate enough to find the following screen in my NetBeans install:

This screenshot nicely shows the problem of nested borders. Look at the centre ‘Expanded Text’ tab. Inside this tabbed area is a rich text editor with its own border, but it is also wrapped within the border of the tabbed area. This looks untidy and cluttered. It’s also worth nothing that the space between the inner and outer borders differs on each side. In my opinion the inner border (the rich text editor border) should be removed in this circumstance. It would lead to a visually less cluttered and cleaner dialog in a small way.

So, in summary, be careful of borders in your software. It’s very easy to put components together and not really notice that borders are being duplicated like this. Finally, even though this is a NetBeans UI Oddity, it’s very common all across the software world, so I’m not picking on NetBeans here 🙂

Fortunately, this is an easy fix in this specific case.

UI Oddities #1 – Skype

Every so often I use some software in my day-to-day life that, whilst useful, slightly perturbs me. I thought I’d catalogue these, and perhaps keep an eye out to see if in future releases of the software it is improved. These posts won’t be based on any one software family or language, and will be infrequent in nature – just whenever I stumble across UI that bothers me. I encourage readers to disagree with me or provide their own thoughts. These posts, as with all my posts, are off-the-cuff remarks that aren’t hugely considered and are likely to be flawed – help keep me honest 🙂

First up is Skype. I’m running Skype 4.2.0.0169 on Windows 7. I use Skype very often as I work from home and pay them a small amount each month to get ‘unlimited’ calls to the US. Often times at the end of the call I’m asked if I want to give feedback as to the call quality of the previous call. Almost always the quality is excellent, and I’m always happy to tell them that. So, up pops the dialog, which looks like the following (click for full size):

The Skype 'Call Quality Feedback' dialog

So, in many regards the dialog is tidy. I like the use of stars to indicate the quality, making them the actual button to click is very nice. I like the summaries given for each of the five options – it seems clear when to select which option. Finally, I like the general design of the dialog. It’s professional and clean.

The problems I have with this dialog are small and finicky. Firstly, where did one-third of the dropshadow on the Skype image disappear to in the top-left corner? Secondly, why put the ‘Cancel’ button down the bottom-right corner? Thirdly, why is the dialog the height it is? There is about 90 pixels of wasted whitespace at the bottom of it, and the window isn’t resizable.

Fair enough though – this dialog is not intended to stick around – you give the feedback and that’s it, right?

Well, that’s where the real oddity begins. That isn’t the end of the interaction. Once I give my feedback I’m subjected to a second page of the dialog:

The Skype 'Thank You' dialog

So, after being helpful, I now get the privilege of being thanked and then having to close the dialog myself. This is when the height of the window becomes frustrating – I clicked in the middle of the dialog on the previous page, and now I need to move my mouse a considerable distance to get to either of the close/finish buttons.

My suggestions are simple and require only minor changes:

  1. Thank the user for their consideration towards giving feedback on the first page. Even if they don’t want to help it never hurts to be thankful. Especially considering you did just pop up a dialog and steal their attention.
  2. Consider moving the cancel button on the first page to instead be a sixth option in the central pane of the first page. Call it something like ‘I prefer not to say’ and choose an appropriate icon to easily indicate visually that a user uninterested in helping would click it instinctively.
  3. Get rid of the thank you page entirely. Regardless of the feedback given on the first page, simply dismiss the dialog. Don’t make me click again.

That’s it. Given this small change I think the Skype ‘call quality’ dialog would be improved and certainly a little less annoying (given it’s a frequently recurring dialog). Admittedly, it’s not a light-and-day improvement, but then often-times UI improvement are just a collection of small tweaks, and this is just another one that should be considered in light of any future UI improvements that they may plan.