Rays Development Blog - Interfaces

Dialogs and Usability

Ray Cassick — Sat, 02 Oct 2010 19:52:33 GMT

Oddly enough I just noticed today how annoying this IE dialog box is:

The example above shows an attempt made by a web page that I visited to reach out on my behalf and open a web page that I happen to have on my ‘Trusted site’ list within IE8. Yeah, I put FaceBook on my trusted sites list because I got tired of having to allow certain things every time I went there and I do trust it enough, because I regulate very closely what features I have enabled and what I use FB for, on my own.

I imagine more and more of us are seeing this nowadays as we are becoming entrenched in the draw of sites like FaceBook and other socially oriented sites and that other web sites are leveraging them as ways to get their sites noticed and voted for, etc… I imagine that it is going to be happening more and more as the line between sites with links such as these gets blurred more and more. Rank this, rate that, yadda, yadda, yadda…

To be honest, I am not 100% clear on the VALUE of this type of cross linking yet, or if it is really more of a passing fad that will soon fizzle out in favor of the next cool ‘thing’ that comes along. But I digress.

The point I want to make is for all those UI centered development folks out there (myself included I am afraid) that often times maintain a somewhat shortsighted focus on the task at hand and perhaps don’t look forward a little bit further and ask the next question:

“What else would make sense to include here as part of the design?”

So, I ask you, what else do YOU think would make sense here as part of this design?

Theme to Jeopardy playing quietly in the background…

BUZZ!

How about this as a suggestion?

How about offering the user (me) the ability to ADD the currently ‘Un-trusted site’ to the ‘Trusted sites’ list from here?

To me, this is a HUGE miss in this design. Why? Because had the simple question been asked there are so many easy ‘quick hitter’ options that could have been done to enhance the user experience here with very little effort.

The current state

As it sits right now, the user has the ability to click the ‘Yes’ button and tell IE to trust this link request. The problem is that if there are multiple areas of the currently un-trusted linking to trusted sites you have on your list, even if the URL is the same, you get asked each and every time if you want to allow it.

This can cause two problems.

First - if the site address does not change the user can either think that they didn’t click properly, or maybe they moved the mouse as they clicked, something that people with physical issues often have problems with, and the click didn’t register so they get frustrated at themselves and the user experience as a whole.

Second - they get stuck in a cycle of having to click on so many boxes that they accidentally allow a site that perhaps they really didn’t want to.

In addition to this really poor user experience it is frustrating to think that the only way to avoid having to do this again is to write down or remember the address of each of the sites that popup (probably write them down manually?) and then add them to my trusted sites list latter as a manual effort.

NOT a great UX to say the least.

What could we do here?

So, being the proper engineer here I always have in mind the idea that before I go to someone and say ‘you did this wrong’ I should take the responsibility to bring along my ideas on methods on how to make it right. After all, it is easy to point a finger and laugh, it is harder to think about possible ways to suggest how that problem be solved. Pointing and giggling just makes you an annoyance, offering viable solutions makes you part of the process of solving the problem.

UI Option #1

Provide the user with a button in this window to allow them to just jump right over to the ‘Internet Options’ and then the ‘Trusted sites’ dialog box with the URL filled in and just offer the user the chance to add the site to their list if they want to.

UI Option #2

The second option is very simple. Just provide the user with the ability to add the site to the ‘Trusted sites’ list using a simple check box on this dialog box as I have shown here:

I am sure given a bit more time we could come up with a few more ways to make this work, but the point is that it appears as if the effort was not made at all, and even a small step would have provided some fantastic user level value with a minimal amount of design, code and testing efforts.

You could even go one step further and have the OS keep track of how many times you have allowed a specific URL access and provide the user with a pop-up dialog box in the system tray area maybe once a week or so and let them know that hey, they trusted this site x number of times over the last weeks or months, maybe they want to consider adding it as trusted.

There are so many options that would be simple, add some real value, and enhance the UX in this case, and through so many releases of the OS and IE I have yet to see this addressed once.

If there is someone out there from MS reading my blog (yeah, I am sure there are - NOT!) then let me know if you think I am saying makes sense. Actually, if there is ANYONE out there reading my blog (I know there are a FEW – I watch my daily logs) then reach out and comment here.

Do you agree with me or not? If not, then let me know why.

I am always open to others opinions in cases like this, and since I do design as well write code, I ALWAYS welcome user feedback.

Let me KNOW what YOU think would be the best way to address this.

Pick a design and stick to it (please).

Ray Cassick — Mon, 27 Sep 2010 01:55:02 GMT

Well it has happened again?

Found yet another inconsistency on the Microsoft Office suite that for some reason annoys me to no end now that I found it. The issue lies around the ability to select colors.

Within outlook you can create message categories and assign them to messages in the mail list. This is pretty useful when you need to quickly identify groups of messages visually. I actually make use of this myself to help me separate personal emails from work related emails, and then a bit more granular to help rate them by importance via color (IE: light are less priority, darker are higher priority). It seems to work pretty good so far and helps keep me organized. However, lately something has just been itching at me about the way it works and looks, and suddenly last night it hit me. The color picker dropdown box that the Outlook colorization category uses is not a standard color selection dropdown. Here is what it looks like:

Problem #1 - It's just wrong! Windows has a standard color picker dialog box, why not use it? Someone had to:

Take the time to design the control interface.
Take the time to create a drop down control JUST for this use and include it in the code.
Test it.
Release it

Problem #2 - It's been done wrong! The UI of this control is awful and it is non-standard.

It mixes the look and feel of a combo box and a menu control. Notice that the control uses a dropdown arrow to indicate the available action but then the option area is not a list style control, but instead is a menu style area, and even contains the light shading on the left where the menu would normally place icons that show this options equivalent location on a tool bar.
The available colors are all mixed up. They are not in any specific order (IE: Light to dark, grouped by tone value, etc?) Very bad design indeed.

It's clear that someone at Microsoft does know how to design a color selection control, because they offer one. I see it used all the time, even in the same application (Outlook) when I want to change the color of my text. It looks like this in case you have forgotten:

See? Now THAT'S how it is supposed to look. Gives you access to the standard colors most often used, allows you to select form a nice wide range of other colors, arranged in (some) hue order to create a theme style, and then gives you the option to jump over to a more advanced selection dialog (using the More Colors?) option, where you can mix your own colors using not just the RGB or HSL scale but also brightness.

THAT is how it's done.

Now I am not going to argue about the effectiveness of the color selection dropdown I am showing above, I am simply showing that it exists, is considered a standard within the Microsoft community, both by internal developers and external customers, and seems to be effective enough for general use. I would not settle for this style in a high end art-centric application, but for what it needs to do as part of the Microsoft Office package I think this design is clear, concise and effective.

I do have to say however that even this design seems to have been perverted a bit. Taking a look into the same type of area but within the Microsoft Publisher application reveals this color option:

Bluch! Boring!

BUT at least it gives you the ability to jump to the more advanced option just like the others do using the ‘More Colors…’ option, and there you get the same dialog as shown above. In fact, because this is a professional (semi at least) desk top publishing application, this dialog box offers you the added option of using the Pantone color scale as well as the other RGB and HSL styles (who ever though that selecting a color would be so darn complicated?)

Since I was poking around I decided to crank open my copy of Microsoft Expression Blend 3 and see what that did for me. I figured as I went upwards in application complexity and relative use in the graphics industry I figured this one would be a bit more advanced (IE: Complicated) and I was presently surprised at the available features AND the obvious usability.

There is surprisingly very little labeling within the control itself, but I think most you can get the idea about what you can do with it pretty quickly. As I have often sighted to various groups in the past that have had to listen to me drone through usability discussions, quite often it is simple UI and the ability to play that leads towards an efficient design. You do not always have to GIVE the answers explicitly as long as you allow people the latitude to try and undo, leading to the adage that experience often leads to the best learning

So, I just HAD to do one more thing and revisit my old buddy PhotoShop.

Wow, it is actually not too bad. Funny, but it was kind of better than I had expected it to be. I do however notice that they may need a usability person to review this because the various types of color selections should really (IMHO at least) have a box around them showing that they are grouped together.

So, what have we learned here?

Yeah, I know, beyond the fact that I can get overly picky?

I think that the message is clear. Consistency is key.

As a developer, there is not really a need to go off reinventing the wheel. What would have been wrong with a dropdown solution similar to this?

At very least I think this leverages the idea I am trying to get across. And, it would give me more darn color options instead of just the static 25 that I am apparently stuck with for my categories.

Oh, and DO NOT GET ME STARTED on the fact that this listing of categories is the SAME listing that I have available between my CALENDAR and my CONTACTS!

UGH!

That is the subject for another blog post!

Touch interfaces - Maybe I don't get the hype?

Ray Cassick — Thu, 07 Jan 2010 16:40:10 GMT

Touch touch touch…

To be honest I don’t get it.

I touch my computer every day already. I use a mouse and a keyboard to do it, but to be honest I see very little sense in using my finger to manipulate objects on my computer. My finger tip is large, and my monitors (all 4 of them) are at a 90 degree angle to my desk. Why would I want to use my hand to reach out (and up) to manipulate objects on my computer screen when I can use the mouse to do it?

Now other devices like game tables, interactive kiosks, digital book readers, Maybe PDAs and stuff, that’s fine, but I have yet to see value in a touch screen PC that is not at very least stylus oriented. And on that subject, what is the hot thing about handwriting recognition. I specifically use a computer (and previously a typewriter) because my handwriting sucks :) Why on earth would I want to write on my PC screen? Sign a digital document? Sure, but now get someone to trust that ‘I’ signed it and we will be all set. That technology is still not proven yet and most people don’t really trust it. Using a finger print is a better option, and far more trusted, but still not entirely mainstream yet.

Yes, the touch demos that I have seen show fancy things like dragging and throwing photos around a table top, or playing games, or ordering off of a virtual menu, and those are all good examples of the use of touch technology, but at a very narrow focus and scope. The demos about interactive touch counters in the stores that allow you to compare multiple products side by side are cool too but also relay not JUST on touch but also on RFID technology that is not really related to touch. You could do one without the other. Games like chess, checkers, solitaire (every computer HAS to come with a copy of that right?) are fine for touch, but would you really want to play WOW or DOOM using touch?

I have YET to see one ultra compelling demonstration of using touch in an office environment that wows me more than a mouse does. Can you imagine trying to do photo-retouching using your finger? Editing code or creating an application form in Visual Studio using your hands? How about highlighting text and dragging it around or changing fonts using your hands? Now picture doing all that on a 17 or even a 21 inch screen.

I am not saying that touch does not have it use, it does, but on a somewhat narrow scope I think. I think you will see (my prediction) that touch WILL finally take hold at some point, but more along the lines of interface technology that we are already familiar with today. Give me a keyboard that I can reconfigure on the fly based upon the application that is active on my screen, and do it that way. Give my a touch pad to replace my mouse, or maybe two touch pads (one on each side of my virtual keyboard) so I can do multi-touch stuff. Maybe I will reach out to my screen a bit and do larger granularity things like flip pages on a large document, or open an application by tapping on an icon, but touch is not the generic answer to one problem.

It looks cool in movies, and sounds cool in high level technical talk, but in reality, where I live, I need what works, and I just don’t see touch being a PC related thing with a ton of impact like most do.

FORCE me into a touch only interface and loose me as a customer. I WOULD use a stylus more instead of a mouse on a laptop, but don’t make me write what I can type MUCH faster or you loose me as a customer.

My prediction is that the next big wave will be multi-modal interfaces. Provide me the ability to use touch where it makes sense, and then at the same time allow me to use a mouse or stylus or keyboard where it makes sense, at the same time and at MY whim. I want to scroll down in an online book a few pages by using my hand to grab and flip a PDF down a few pages then as they scroll by use my right hand with my mouse to grab the page as I see it, stop it, and then select a few words on the screen so I can reach up and press the bold button with my left hand on the screen? That’s great.

And before all you naysayer out there bring up all the cool ‘things’ from movies like Minority Report, keep in mind that was a ‘gesture based interface’ NOT touch based, and I think that is closer to being far more useful than pure touch, but a subject for another blog entry.