UI Design

The MIE Podcasts – Chandoo

Purna Duggirala. Purna Duggirala. Purna Duggirala. You might better know him as Chandoo, but his name is Purna Duggirala. Chandoo is a very friendly fellow, and we had a great chat about charts and dashboards, how to design them what approaches to take etc etc… So if that sounds like your sort of thing, have a listen.

The PHD company christmas card circa 2009......

Purna runs a great Excel site Pointy Haired Dilbert, it really is super, but I reckon that anyone who reads this will know that much already. He has an MBA from IIM Indore and Computer Science degree from Andhra University, and he’s an Excel MVP, of course!  only the best for the readers (and listeners) of Methods In Excel.

One thing I didn’t know about Purna is his ability to multi task, the bat eared amongst you will be able to detect Chandoo simultaneously talking and typing away… no doubt writing some more excellent blog posts for PHD!

On the use of Tabs

Tabs are everywhere. The most common complaint is that they allow lazy UI design. It’s easy to see why that argument has come about, but tabs are undeniably useful, to break things up, or as a grouping control. For my money, here’s the 101.

Excel’s option dialog is awash with tabs, 13 all told. I’ve been using Excel for years, I still can’t remember where all the options are, I know there in there somewhere, but often times I’ll have to do a bit of hunting. Not clever!


MS Project is better, the tabs are all the same size which is an improvement, but still look at how many there are – 3 rows no less!

Firefox uses pictures, which I like, but its real win is that there’re only 7 tabs – on one line. Ok, so Firefox has fewer features than Excel or MSP. Still that’s not the point, the point is the number is manageable – having everything on one line is “Log2(N-1)”* times easier to consume than multiple line.

Best of all I like tabs down the side. I don’t think they work in all cases, but for something like options, down the side is good. Office 2007+ has swapped to this design in a lot of its dialogs. I don’t love its implementation, but the ideas good. Visual studio does it well. There are tabs across the top, so another “sub set” would be confusing, down the side makes sense. UI design should be about making sense! Also it’s really well done. Look how the selected tab stands out, and is associated to the content on the RHS.

So over all I would suggest,
1. Keep the number of tabs down, no more than 6
2. Only one row
3. Use images if you like
4. Use RHS tabs where you can – Sadly VBA’s tabs down the RHS are quite poor.

These are just my unqualified thoughts of course, you’re welcome to yours, and feel free to express them in the comments!

*1. I’m guessing, that is to say it’s my option that it’s easier, and 2; I’m postulating that the difficulty of finding the right tab follows something like Hick’s Law.

Drawing on a VBA Userform

I’m making a few post with old stuff from my main site (which is now closed), this is so I can point to the blogpost when I update my downlaods page, which I am planing on doing at some stage in the next few years!

This example uses an API to let you actually draw on the form free hand style!

drawonform

It  can be downloaded here: Drawing_v3

Lock up your applications, WPF is coming

Black is the new grey. And I’m nervous.
If you don’t know what WPF is, (it stands for Window Presentation Foundation), its MS’s new technology for UI. Here are the basics:

  • It’s a XML type language that describes how the UI will look – think CSS, it kinda works a bit like these
  • It’s uber cool– (it has things call animations, and motion blurs!)
  • Silverlight, Silverlight, , Silverlight*

It can look like this, sort of webby, right?

wpfui

Why am I nervous? Not because of WPF itself, I think it’s cool. My worry is that like any tool it can be misused. It’s real easy to design bad UI.

Back when the “green screen” was king it was really hard to design a bad UI, because it was almost impossible to design a good one! There was no such thing as a good UI, there was no such thing as a bad UI, there was just UI!

greenui

Then “modern” win forms, came along, and people could do much more. That meant the opportunity for good and evil got bigger. Some UI these days is tremendous, some totally sucks (the ri…stop it!) but compared to what might be around the corner?

badui

A bad UI designer moving from Winforms to WPF, is like taking a knife from a homicidal maniac and handing him a machine gun.

Maybe I’m worrying about nothing. The best case is all new WPF UI is great, worst case is it’s all really bad. Mostly likely, it will start off mixed, maybe a bit more bad than good, then over time, as people start to see more and more good examples, it evolves to be used broadly well.

Still there’s that first bit to get through ;-(

*Silverlight is a bit like flash for WPF on the web. The thing that’s good about it is that you can (also most) take a desktop WPF app and host it in the cloud, or the reverse.

Beyond Excel Comments

Beyond Comments in Excel.

I’m not sure how it happen. I’m not sure when it happen. At first I was shocked, then I felt used, now just anger. [;-))))]
Somehow Mike Alexander has hacked into my laptop, and started to steal my blog post ideas. I use ATnotes to jott down any ideas I have for blog posts, here what’s on my desktop at the mo:

Comments in Excel

As you can see top of the list is “x things I hate about Comments in excel”. Well the old piglet has just posted this – nice work. So slightly after, slightly following here’s my list:

  • Can’t change default colour via UI
  • Cant change the default shape via the UI(?)
  • They look rubbish – mac, google anyone
  • Can’t set the start up position – robustly
  • Damage formatting of cells
  • Don’t display correctly with frozen panes etc
  • Can’t get rid of the line (?)
  • The line & arrow are poor quality
  • Are as technically advanced as a stone wheel.
  • Have never been significantly updated
  • Indicator triangles are wrong colour by default (green is a formula error?!)

And I bet there’s more. Unlike Mike though I’m not implementing them for tool tips. I’m interested in error feedback.

Modern programming technologies like .Net, have error providers, these are controls developers can use to track and respond to errors, proactive and reactively. Comments are dumb. They’re just there, and from a user experience P.O.V they don’t offer much. Sure there’re better than nothing, but only just.

Luckily we can work around this. Its really quite easy to put together a formula which can check for errors, then display a message accordingly. It won’t solve all of my issues but it’s another tool in the tool box. Here’s an example from a project I recently worked on. In this case data was entered into a “table” layout, errors where reported at the top of the document. I used a set of functions to the right hand side of the input table to check the important cells in the table.

Comments In Excel 2
Here’s another example but for a more orthodox form. It’s clear to see the benefits over the comments here. If the user enters the right data then no errors message is given, but when it’s wrong, bingo they can get some meaningful feedback, you can also add an additional checks at the end to see if there are any outstanding error on the sheet. As you can imagine you can make this as simple or as complex as your needs require.

Comments In Excel 3

So there you go, if you’re building a worksheet or form thats going to get used a lot, by a lot of different people, then maybe you should take the time to implement custom error messages, and get ride of those rubbish old comments!!!

P.S here’s the last example: MIE Tool Tips Comments Example