Tag: UI

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.

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

Apple UI

Just came across this. It’s Apples GUI guide lines, some good stuff in there for sure.

HumanComputer Interfaces. Problems with messaging – Part 3

In this the final of my posts around messaging I’ll suggest some ideas that work towards a better experience for users and thus better functioning software. Of course this will not be exhaustive and I encourage others to shear their thoughts, ideas and experiences.

Previous Parts
Part 1
Part 2

Why bother!?!
It’s a fact that handling things well when they go wrong is critical in customer satisfaction and retention. We all know the frustration of crappy error messages and how angry it makes us feel. So we should ensure our users don’t have to go though the same pain.

If you’re working on a serious piece of work why not take the extra time to properly handle messaging? OK, if I’m knocking out a quick and dirty maybe I don’t want the hassle of getting my hands dirty. If however you’re working on a serious project it could make a big difference in how your application is used and viewed.

Use a custom form?
Rather than sticking with bog standard “msgbox”, why not use a userform? You can tailor this to suit your applications messaging needs and over come some of the short falls of standard approaches. You can:

> Make the form bigger
> Customise it to fit in with your applications/tool look and feel
> Make text bigger and clearer
> Use colour
> Use varied and meaning full images
> Make use of controls

It was my intention to publish a (production quality) userform that could be used as a replacement for the standard message and error boxes; unfortunately this has proven to be far more complex than I first thought! I will endeavour to complete this task as I feel it would be a genuinely useful tool.

Use directional messages.
With built in messaging you have to use OK, Cancel, Abort, Retry, Ignore, Yes or No. You have to contort your messages to fit around these generic options. For example,

MsgBoxExample.PNG

Might be better presented like this:

CustMsgBoxExample.PNG

And what if there are more than 3 options? With “msgbox” you’re into the business of popping up multiple dialogs! However be sure to avoid this type of thing from Lotus Notes:

2clicksor1.PNG
So that will be 2 clicks every time I want to do something SO frustrating!

Undo rather than nag!
If I click the close button lets go right ahead and assume I want to close the window!
Rather than asking me for endless confirmations provide a way to undo the action. In their new OSX, “Leopard”, Apple have tried to do this in just about everything. From a VBA perspective it’s quite hard. Jan Karl and J-Walk have published methods for undoing VBA actions. The other popular idea is to save the file state just before the VBA code runs. You will have to pick the right one for the situation, need less to say there will be an overhead!

Provide context
One of the most important aspects missing from a lot of messaging is context. Context is about communicating “relativity” thus what the importance/effect of a choice maybe. For example

“Save Changes?”

vs

“2000 records have changed – Save Changes?”
And
“1 record has changed – Save Changes?”

You could add even more context to this, by say making the label back ground light up red for the 2000 case, this would elevate its relative importance level over the 1 record case, this type of idea might be useful in some cases, but actually counter productive in others, so you need to think hard. Ultimately it’s a judgment about adding value, does it make the thing easier/nicer to use?

Avoid pop up messages.
There may be a very good reason why you want to pass on some information to a user, some value is invalid, some settings will lead to a long run time and so on. But if you code for a popup to appear all the time it soon becomes annoying. Consider instead using “inline” information. Think about filling out forms on web pages. Generally warnings which appear are much less intrusive, and more helpful. There is also less of a disconnect for the user, the error message can appear right next to the place where the error has occurred.

What to say?
When you do have to message the user what should you say and how should you say it?
Well the first thing I would suggest is a big fat line which say what’s gone wrong. This needs to be short and sweet and to the point it needs to be clear and something that I can quickly understand and judge.

Then I think I would like to know what it is I have done wrong. So rather than:

“Could not find file”

say

“File [File Name] could not be found in folder [dir].

After that you need to tell me how I can fix this problem. So:
“Check the file is in the location targeted, check the extension is correct and that the file can be accessed, that it’s not copy protected and that the drive is accessible”

Ok so I’m sure you could come up with better suggestions, but you see the point.

Some good guides as to what to include in you error text can be found here and here.
The MS guide is here, but it’s not the best!

A note about the Task Dialog
Many of the issues I have highlighted and some of the suggestions I’ve made above have been implemented in the new Vista Task Dialog (good piece here). This goes some way to better messaging (“Task Dialog”, ?!), sadly it’s only available via an API in Vista (well, according to a VSJ article I read, so not in .Net 3?!)

messageboxconverted.jpg

So there you have it, not complete, in fact probably just the tip of the iceberg, but hopefully something to get you thinking.