Blog

Later Ctrl + ↑

Large click areas for small elements

All user interface designers should know and apply the Fiitts’s law. It says that the larger and the closer the target area is, the easier it is (i. e. takes less time) to reach it. Immediate corollary: make buttons big.

What is not so obvious is that instead of making an element bigger, you can just enlarge the click area. I do this with the main menu on my site.

If I did not care, the click zones could have been like this:

They are actually three times larger:

This makes the links so much easier to click.

As visual designers do not usually denote the click areas, this is a trick for web developers to know.

By the way, making click areas too large does not pay off, as the Fitts’s function is logarithmic.

World

The new section has opened on my website in English: World.

I publish photos from cities and countries I have visited and write short comments about them. My attention gets grabbed mostly by transport, signage and wayfinding, but not only.

Austria:

  • Vienna, where Danube is split into two rivers by a 20-km long artificial island,
  • Hallstatt, a beautiful village in the middle of Austrian nowhere.

Germany: Cologne.

The Netherlands:

More stories to come.

Dealing with legal all-caps

Some lawyers think they should shout at their readers by using all-caps text — this is how they communicate the idea “this is important”. Here’s a fragment of some Apple document:

Why do lawyers use all-caps?

The lawyers do disservice to themselves: all-caps text is much harder to read than normal one. If you are a designer, you are responsible for this, but unfortunately changing it is often beyond your power. So here’s what you do when no one is looking:

Dealing with legal all-caps

And all-caps becomes small-caps:

Here is how you avoid legal all-caps

The text still stands out, but it no longer looks ugly and most importantly it is noticeably easier to read. We’ve used this trick in Getwear’s terms of use and other similar pages. See also: Typography for lawyers.

Do not ask me for email I have just entered

You enter your email in a sign-in form and then realize you do not remember your password. You click “remind me my password” and get redirected to “Remind password” form. You get asked for the email, again.

This is stupid, do not make this silly mistake in your projects.

Accidental Tech Podcast

Marco Arment and John Siracusa both ended their podcasts this winter. I was a fan, these were actually the two best podcasts out there. Turns out, the guys could not live too long without podcasting. Even better, now they are doing a podcast together: the Accidental Tech Podcast.

You cannot not love Siracusa’s “explanations”. Here’s the previous episode, listen the explanation about skeuomorphism and leather stitching from 1:18:05 (just after the song):

It’s all good stuff.

Timed modes

As you may know, modes are bad. Even worse are timed modes often used in the human interface of consumer electronics.

A mode is a state of user interface in which the same user action leads to the same result; in different modes, results of the same actions are different. Photoshop is famous for its exuberant use of modes: a click within an open image may do anything depending on what tool and options you have selected. The problem with modes is that you are not constantly aware of the current mode, which leads to errors: you want to draw a line, but accidentally create a gradient fill.

Now imagine a TV remote. Left-right buttons change volume and up-down buttons switch channels. These four buttons are also used for menu navigation. Now, when you are in the menu and you want to make the TV louder, you press the right button through habit. Unfortunatelly, now the button means “make screen aspect ratio wider”. The menu is not just a mode, it is a timed mode: if you don’t press anything for 10 seconds, the menu will be closed. If you are trying to set up this TV with a help of a user manual, you will be very frustrated: every time you look up the manual, the menu disappears and you have to start over.

Timed modes in a car UI are not just frustrating, but can also be dangerous. To change the audio bass level, you have to go to the menu, find the EQ settings, select “bass” and then adjust it with a knob. By the time you get to the necessary menu item, the traffic light turns green, so you have to postpone the adjustments until the next traffic light. Chances are, you will then need to navigate the menu again. If you know that the interface will not wait for you until the next traffic light, you will be forced to adjust bass while driving.

If you cannot avoid modes in your user interface altogether, at least don’t use timed modes. If I have changed my mind and don’t want to set up the TV or adjust the bass, I will just press cancel myself.

The Home button problem of iOS

When presenting the first iPhone, Steve Jobs said that the Home button “takes you home from wherever you are”. The button was a genius invention of Apple designers.

Unfortunately, in iOS 3.0 Apple has ruined it. Since then it takes you home from wherever you were — unless you are on the Home screen already, in which case it opens the Spotlight screen. Before that, the Home screen was the base of the user interface, it felt comfortable and stable, and the Home button got you there, no matter what. Now that the Home button switches you between Home and Spotlight, it no longer feels predictable and reliable.

My iPhone 4 is more than two years old. It runs iOS 6 quite slowly and the Home button is not registering clicks sometimes. So when I press Home and nothing happens, I press it again. Now, there are three possible outcomes: nothing happens again (the button failed twice); the Home screen appears (the button failed only the first time, lucky me); the Spotlight screen appears (the button has worked both times, but the phone was being too slow to react on time). There’s also a contact bounce problem: sometimes a single click is registered as a double click, and the app switcher gets displayed. This is such a pain in the ass! As you may have guessed, when I want to make a real double click, the outcome is completely random.

I want back the power and simplicity of Home button. I even suggest removing the double-click app switcher. First of all, there’s no reason for it to even exist. I can switch to any app by going to the Home screen and tapping its icon. But even if the switcher has to exist, let me go to it by dragging from the bottom, the way I open the Notification Center by dragging from top. Oh, and by the way, kill the freaking Notification Center. Well, this is a different story.

Rename AltWWDC

It’s cool that people have came up with an idea of AltWWDC. But it’s about Mac, so obviously it should have been called OptWWDC.

Online video and opening titles

Online video does not require an opening title.

On television, opening title is the only way to introduce a program. It alerts the viewers that the program is about to begin, giving them several seconds to make themselves comfortable in front of the TV.

On the Internet, the video is introduced by the content of the page it is on. There is already a title and in most cases even a description. And it’s up to user when to hit “Play”. When she does, there’s no point in alerting her, it just irritates her by delaying the show.

If video is made to be used on many different sites and thus needs some sort of title within itself, it’s always better to use a signature in the corner or on a plate which fades out shortly.

RocketDocs and web app wrappers

I’ve tried RocketDocs, a wrapper for Google Docs, and was quite disappointed:

  1. It does not recover my open documents after restart. What’s more, it presents me with a list of accounts instead of showing my anything resembling a web view. Every time is like first time.
  2. For unknown reason it takes RocketDocs about five times more time to load Google Docs pages than Safari or Chrome (makes no sense, but true, at least for me).
  3. You have to sign in twice. First you sign in to RocketDocs, then it opens the web view for your Google Docs, and Goole wants you to sign in again. Weird.

RocketDocs wants to be a better wrapper for Google Docs than a browser, but fails to deliver.

The killer feature for a web app wrapper: reopen my content instantaneously. Unfortunately, no one does this (please prove me wrong). We hate web apps for the Blank Screen Of Wait. So the only reason for an alternative wrapper to exist is to remove the wait. Namely, deliver me from the white background which I have to look at instead of actual content. Pre-load everything from cache, from saved screenshot (like iPhone Springboard), do whatever it takes to show me my stuff fast.

Earlier Ctrl + ↓