Jure Cuhalev » usability

Captcha is such an ugly word

Jure Cuhalev — Fri, 04 Dec 2009 08:16:46 +0000

Hat tip to Wikia who gave it a few moments of thought and renamed captcha to blurry word. It still doesn’t tell you why it’s there, but now you can at least find it. Before that, it was just a nonsense term (for someone not in IT/web field).

No related posts.

The great OK/Cancel button dilemma

Jure Cuhalev — Sat, 07 Mar 2009 23:40:26 +0000

Today I created a simple web form. So simple indeed that it has only three design elements:

: Image by panavatar via Flickr

input field
OK button, in this case labeled “Save”
Cancel button

Since I’m always confused about the order of OK - Cancel buttons (you, should it be OK / Cancel or Cancel / OK), I checked a few dialogs around my OS X and they all read Cancel / OK.

I personally prefer the second option, as I usually like to confirm my dialog boxes and it’s much easier to hit OK in down right corner vs. finding the item next to it.

Second choice it’s probably that I’m brainwashed from seeing this choice all the time on my Mac.

After showing my choices to the person in charge, I got the obvious feedback: “Reverse the Cancel / OK button”.

Fine! (I change the button order and go looking in various HIG documents).

Here are results:

Apple’s HIG states:

Always put the action button in the bottom-right corner of the alert. This is the button that completes the action that the user initiated before the alert was displayed. [ed. note: this would make it Cancel / OK]

GNOME’s HIG states:

Show a Cancel button that will prevent authentication and close the alert. Place this button to the immediate left of the OK or equivalent button. [ed. note: this would make it Cancel / OK]

Microsoft’s HIG states:

Place command buttons that apply to all property pages at the bottom of the property window. Right-align the buttons and use this order (from left to right): OK, Cancel, and Apply. [ed. note: this makes it OK / Cancel]

KDE’s HIG doesn’t state anything (or at least I couldn’t find it), but it seems that it standardizes on OK / Cancel.

So here we have two camps. The OK / Cancel one is clearly bigger because of the whole Windows platform using this convention. I’ll leave out different argumentations out of this document, as it’s kind of a holy war between certain UX factions.

Interesting thing with this issue is that it doesn’t matter, as long as you standardize. Nobody managed to measure any difference as long as it was the same across the whole environment.

But what to do in case of Web applications, where you can’t standardize the whole Internet? Jakob Nielsen thinks that you should go with the option that is natural to more of your users.

At the end of the day, this translates to use OK / Cancel as majority of your users will probably be on Windows or KDE, unless you’re running some kind of OS specific niche site. Even then you should only switch if you’re working for OS X crowd as you can’t really know Window Manager usage distribution of your users.

What about you? Do you OK / Cancel or Cancel / OK things? Or are you just constantly twitching because that OK never feels right?

OmniGraffle stencils

Jure Cuhalev — Thu, 26 Feb 2009 12:43:46 +0000

UX community in Slovenia is slowly waking up, even though this might just mean I had lunch with @mitjamavsar. The discussion evolved around tools for wireframing and prototyping. Since I’m a happy mac user I pitched for OmniGraffle as it had something that’s a killer feature for me – great stencil community.

What’s a stencil? It’s a small sprite that can be reused in your OmniGraffle documents so you don’t have to reinvent UI elements every time you need them.

Graffletopia - UI elements overload

While there are almost too much stencils on the page, one set stands out on its own. Yahoo! Design team Wireframe stencil kit.

Yahoo! Design Stencil Kit

It’s available for OmniGraffle, Visio and in more traditional vector formats like PDF, PNG and SVG. If you take a look at only one stencil library this month, let this be the one.

Jure ?uhalev: Hi-fidelity prototyping with OmniGraffle Pro (jurecuhalev.com)
Review: OmniGraffle Pro 5.0.2 (macworld.com)
Konigi and Yahoo! Web UI Wireframe Stencil Kits for Omnigraffle (incsub.org)
Sharing and creating HTML and CSS templates (ajaxian.com)
OmniGraffle 5.1 improves Visio compatibility (macworld.com)

Hi-fidelity prototyping with OmniGraffle Pro

Rhetorical dialog boxes anyone?

Jure Cuhalev — Tue, 10 Feb 2009 11:17:54 +0000

Modal dialogs are something to be very careful around as they break the flow of user interaction and scream at user “Focus! Answer this NOW!”

But what do you think when you get something like this:

: Question box?

I imagine it would be too much to build a QA tool that would scan all the dialogs and detect if they end with question mark (or if you’re really smart – use natural language processing to detect the question form) and notify someone to take a look at what’s happening. One can dream ..

Have you seen any interesting dialogs recently?

No related posts.

Find of the day: Quince: A UX Patterns Explorer

Jure Cuhalev — Tue, 03 Feb 2009 21:35:48 +0000

Being subscribed to a million of different obscure mailing lists and blogs has some advantages. Every once in a while you grab announcement of a rare gem early. Today I receivend an email about Quince – A UX Patterns Explorer by Infragistics.

It’s a visual representation of some of interface patterns used in interface design field. Idea behind these patterns is that if we manage to standardize on certain ways of doing things, then the overall usability and user experience of your interface will benefit from it.

So the big problem is – how do I learn patterns? The usual way in * design profession is that you observe the world around you, take note of remarkable work of others and observe the problems of your users to iterate to a solution.

The other approach is to dive into one of these pattern sites, see how others solved similar presentation/navigation/input/ .. problem and get inspiration from it. Quince is one of such solutions.

Quince browser

It has a wide collection of different patterns together with examples, rational and screen shots. All neatly organizable and browsable. It also allows community to add and vote for their own so it has potential to grow with time.

The bad? It’s done in Silverlight and has a bit confusing User Interface. But it seems to work nicely on my Mac for now and I plan to evaluate it in my future interface design.

Quince patterns

And for the ones wondering – Quince is a very nice flower of Asian origin:

Image by Martin LaBar via Flickr

OmniGraffle stencils

Stepping out of dating and relationship on Facebook

Jure Cuhalev — Tue, 27 Jan 2009 11:03:59 +0000

I’ve been fascinated with Facebook relationship decisions for a while now. One of the more interesting challenges with this complex term is that it’s not fully transitional. You don’t just go single -> complicated -> dating -> engaged -> married and the same way back. Sometimes you also want to step out from the whole dating thing and say, I’m not even single (as it implies that you’re available for persuasion) but that you’re just not playing the game.

So how do you express this with the user interface? Simple, you make an empty box that anyone can assign meaning to it, but its mostly there to have the most private option and to dissolve any implications of labeling yourself.

Facebook remove relationship status drop-down

With drop-downs, it’s often the case that we want to undo our option but the form won’t allow us. It takes extra attention to detail to allow such option.

uCertify – Adobe Flash CS3 Ace Exam review

Jure Cuhalev — Sat, 24 Jan 2009 22:35:19 +0000

uCertify is an online companies that provides different course-ware for different vendor certifications, including Microsoft and Adobe. They’ve sent me a review copy of Adobe Flash CS3 Ace Exam as I wrote in my about box that I’ll gladly write my opinion of things

The basic idea of the product is that if you take enough practice tests and the application takes score of the things you know and don’t know you can slowly learn everything you need to know for the actual test.

Everything happens from this dashboard:

uCertify

Instead of describing whole application, I’ll try to make a more of a usability review of it.

Learning notes are well prepared but lack better navigation from within text. Having related articles or wiki like links would increase browsability of content in initial learning stages. Right now it feels more of a book experience that you have to read from beginning to the end in linear fashion.
Studying topics are nicely grouped but also give the sense of learning by heart feeling. It’s probably really easy to pass an exam with this tool without having real experience with Adobe Flash.
I’m not sure what their intention with tagging was. It’s useful to tag articles, but having to keep taxonomy in the head is a bad decision. Show me the tags I used on other articles so I can group them via tag!
Please use standard Windows dialogs. Having your own pop-up dialog is annoying as it doesn’t confirm to usual Windows shortcuts.
More keyboard shortcuts would be useful. Like using direction keys on the keyboard for moving left and right, instead of having to click buttons.

Overall it’s a nice and cheap way to study for exam and in the process also learn something. While it probably allows one to learn all the cue cards, ii also contains enough articles and explanation of questions and answer to be useful with real knowledge.

I would wish they would follow Microsoft Human Interface Guidelines as they have some interesting self made dialog boxes and interfaces.

I’m also a bit disappointing that it doesn’t work on OS X as Flash is not Windows only. I tried installing it using Crossover Office but it sadly failed at that.

Disclaimer: this review was not paid, but I did recieve full uCeritfy Adobe Flash CS3 Ace Exam to be able to take a look.

Top 3 Usability (UX) Conferences in 2009

Jure Cuhalev — Fri, 16 Jan 2009 13:57:33 +0000

A few people asked what would be my Top 3 recommendations for Usability and Human-Computer Interaction Design conferences to plan for in 2009. I’m looking at this from very Central European centric point of view of course.

: Image by Kounelli via Flickr

In no specific order:

UX London, 15th – 17th June 2009, London – Early bird: £895 (~900 EUR)
UX Week, 15-18 September 2009, San Francisco, CA – $1795 (~1 356 EUR)
or alternative UX Intensive Berlin, 12-15 May – Early bird: $1795(~1 356 EUR)
UX Camp Berlin, 23 – 24 May 2009, BarCamp style event. Most useful if you speak German or are pushy enough about people speaking English around you.

There’s also a Upcoming group Interaction Design that lists most of these events.

I would advise against going to general Web conferences to learn more about UX as their are too general in their nature and you’ll unlikely learn anything new.

Is there an UX conference that I missed and is a must go in your opinion?

How do you design? – Free E-Book

Jure Cuhalev — Thu, 18 Dec 2008 22:34:16 +0000

Image by See-ming Lee ??? SML

I’ve always been a bit of methodology junkie, so imagine my delight when I stumbled upon this great Beta E-book on design methodologies. Author Hugh Dubberly walks us over 100 different processes and methodologies in his book How do you design?

Having this kind of resource always with you must be really handy if you’re still strolling the halls of university and need t figure out who and what to quote based on actual work you did. It should also be handy to any consulting as Hugh breaks models into different sections like Academic models, Consultant models and even Complex linear models.

Now that I’ve read this book I can say that my personal beliefs that good (UX) Design is cyclic falls mostly within teories of Spiral Path after Paul Souza (1996 in Dubberly 1995) and Iconic model of the Design process after Mihajlo D. Mesarovic (1964 in Dubberly 1995).

The one that looks really intriguing is Extreme programming planning/feedback loops after Don Wells (2000 in Dubberly 1995) as it defines very concrete time lines for each step of design process:

From How Do you Design? p. 127

The book is a very nice read for these dark December nights and I can’t wait for the day that it’s going to get published in a paper form as I’d really like to own it.

Hi-fidelity prototyping with OmniGraffle Pro

Jure Cuhalev — Fri, 21 Nov 2008 08:45:03 +0000

Getting a chance to work in industry that you’ve heard so much in school is a really great experience. Today I’m hyped up about designing user interfaces and writing specifications for how things should work.

Image by snowcrash via Flickr

Personally, I’m a big fan of paper prototypes. A technique where you create low-fidelity prototypes that allow you to iterate quickly and without need to invest a lot of time in creating ideas. Trying this for a while now, I’ve learned that just paper prototypes are not enough. People just doesn’t take them too seriously.

This time around, I’m experimenting with upgrading my paper prototypes with computerized version. Nothing too high-fidelity, just printed wireframes in nice boxes and with a rough copy in place.

What about tools? I decided to experiment with OmniGraffle Pro (being a Mac Head) and some excellent stencils from Graffletopia.

To make the whole process easier, I followed a great video from Michael Angeles, Creating prototypes with OmniGraffle, it shows you how to use Actions->Jump tool to create interactive PDF’s that you can use to simulate actual user interaction. It also quickly presents good layout technique, how you’re supposed to have a Master layer with overall grid and then just create different canvases for new layers. Best spent 5 minutes of last week, watching that.

Summary: Go watch the video, and give a bit more hi-fi prototypes a chance, after being happy with your paper ones.