jan korbel

As Jason Fried put it: “Grid looks like very original thinking”.

Google-like search in the library of UI design elements, but wait, with source files such as PSD or HTML/CSS.

Online mobile interface prototyping tool. Even if you are not in it, just try it to see what an HTML5 web app could do.

HTML5 Sortable is a jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API.
…
Works in IE 5.5+, Firefox 3.5+, Chrome 3+, Safari 3+, and Opera 12+.

Moqups is a nifty HTML5 App used to create wireframes, mockups or UI concepts, prototypes depending on how you like to call them.

Nice set of online generators that might save you time brought to us by Ui Parade. Go play with Button Builder, Form Builder, Icon Builder, Ribbon Builder.

Great tutorial by Mary Lou of Codrops.

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.

Good article by Patrick Cox of Codrops, about these elements of pricing page:

1. Separate packages
2. Make your offer stand out in the crowd
3. Clear, honest and attention-grabbing type
4. Benefits comparison
5. FAQ’s
6. The left-to-right/right-to-left debate
7. Trust

Nestable is an interactive hierarchical list. You can drag and drop to rearrange the order. It even works well on touch-screens.

Via @smashingmag

I tweeted that I don’t think the checkboxes Facebook uses in its Messages section (below), are the best way to go about the problem. I suggested using the icon itself as the toggle for this job.

I come up with a rough draft. Obviously, it would need more thinking and knowing more about Facebook’s style guide, but you get the concept.

There were some interesting comments…

@soundake @jankorbel Checkboxes stand for *settings*, buttons stand for *actions*. Trying to merge them together is not good idea. #howgh :)

— Tomáš Hellebrand (@hellishcz) June 11, 2012

@jankorbel @hellishcz @soundake Checkboxes are just fine. No need to invent proprietary round checkboxes.

— Michal Illich (@michalillich) June 11, 2012

@jankorbel Don’t be clever, be obvious – zvlášť na webu pro miliardu BFU…

— Tomáš Kafka (@keff85) June 11, 2012

 
So here is my line of thinking.

What is the job here?

Facebook wants its users to be able to know that they can:

• Send the message to mobile phone
• Switch the Enter key mode

And at the same time allow them to do it.

Both the jobs are complicated enough, we can safely presume, it is impossible to design something that enough users will get the first time they see it. That’s precisely why Facebook has a tooltip in place when you hover the icon or the checkbox. That’s something I would keep.

Now, for the “allow the user to tell us, he wants to activate the function” problem.

What the user has to know?

First, what the user has to know to be able to use current solution?

1. The checkbox is something she can click.
2. The checkbox has two states (checked / unchecked).
3. There is relationship between the icon and the checkbox on the left of it.
4. When the checkbox is checked it means you want to activate the function the icon stands for and vice versa.

Quite low bets, granted, none the less, you can see there is some abstraction, mainly for the novice user you are trying to protect with “easy checkboxes”.

What the user needs to know to be able to use my proposed solution?

1. It is something she can click.
2. It has two states (on / off).
3. When she clicks it toggles the state.

 
Back to the job we want to solve.

Less abstraction

I defined the job to be done here as letting the user know she can do something here, and giving her the tool to do it.

All in all, I think I removed some abstraction from the thought process our imaginary user has to go through: How the checkbox works.

I’m aware, that my solution introduces the problem that the user has to be able to distinguish between the two states (on / off), but I firmly believe that’s less abstract than the checkbox concept. It’s much closer to the working of physical button in the real world.

Looking forward to your comments.

UPDATED (June 12, 2012)

Jiri Jerabek tweeted his take on the toggle.

I would not show the label “Send to mobile” and stick with the current tooltip solution and the “Enter mode” toggle should look the same as the “mobile” one, but otherwise this is movement along the way I think it should be done.

Nice UI for a “volume” dial built on jQuery.

This video by Microsoft nicely demonstrates the problem and sets the bar to jump – 1 ms.

Via TechCrunch

Good templates for wireframing in Keynote for iPad, iPhone, Android, Blackberry, Facebook, general web app, Windows 7, Windows 7 Mobile and OS X.

Via @BerkaUX

By now you’ve probably seen the promotional video of the Leap, which created quite a stir last week all over internets. But just in case, here it is.

It definitely is cool. I just have a problem with the Leap being positioned by the producer in a “We are changing the world” and “Say goodbye to your mouse and keyboard” way.

I would like to see better interface for our desktop and laptops as much as the next guy but I rather doubt that it would be the Leap. Here is why.

Desktop-class OS metaphor itself

Whether we like it or not, the desktop + windows + files metaphor currently used in OS X, Windows and other operating systems is built to be used with keyboard and mouse. It does not matter how good the Leap is, it will not be better for the current operating systems.

We see it on the touch devices like iPhone or iPad that for the new interface method to be better for some tasks, it required completely different OS.

So, if you saw the video above and thought “Wow, this is how I want to control my computer”, forget it, not going to happen. Not the least because controlling something with virtual touch is one abstraction layer more than using the touch we already have coming in full swing.

Accessory you need to buy

OK, so what if there are going to be applications developed for the Leap that run on the classical OS’s? That is definitely possible, but as it requires user to invest $70 on the top of the app price, we could predict, it will be interesting proposal for very limited number of apps.

Yes, I know, producer of the Leap says they are in the talks of integrating the technology right into notebooks but even if we give this the benefit of doubt, we could be sure it will be on very small number of the total market for some time. Who would develop his application for such a constrained niche? Chicken and egg, anyone?

Revolution? No. Useful? Could be.

I will tell you who maight. For example someone who wants to wow his target audience. Showrooms of car dealers, jewelleries, booths on trade shows and such.

Or highly custom applications for many areas such as 3D modeling and there are surely others.

The Leap could be useful, but it definitely will not be revolutionary.