Blog

Later Ctrl + ↑

Why and how to highlight hyperlinks on mouse hover

Hyperlinks should be highlighted on mouse hover. This provides feedback necessary for the user to feel that the element is clickable. It is equally good to highlight the borders of the images and other non-text elements. I use red as the highlight color, and it works well.

Interestingly, changing mouse pointer from an arrow to a hand is not quite enough. The pointer is my avatar on the screen, so changing it just reinforces the idea that I am aiming to click an element, not that the element is going to respond to my click.

Since CSS provided us with an easy way to add nice transitions to web pages, some designers have implemented fading in and out of the said highlight color. But using fade-in defeats the purpose of the effect: when an element’s color fades-in lazily on hover, the feeling of responsiveness disappears and a page starts to feel numb.

I use only the fade-out transition, i. e. instantly change an element’s color to red on hover, then gradually change it back to blue when mouse moves away. Here are some links to my previous posts to test the effect (will not work in your RSS readers, obviously):

This is how you write a great title for a blog post

Several years ago, if you were to write an article on article titles and you wanted its own title to work best, you would name it something like “Coming up with a great title for an article” or even “10 qualities of a great title”. That was how you attracted clicks.

But recently something has changed. The articles now have titles like “Here is what you should know before updating iOS” or “Look at this amazing picture of Mars made by Curiosity”. As if the first sentence of the text was used in place of a title. The more and more we see these titles that try to shift your attention from themselves to what goes after them. It is the content of an article, right?

Wrong. What really goes after them is a link. That is how twitter sharing works. Now that the title itself is no longer clickable, there no need to attract clicks to it. Instead, a title should look like a direct speech of someone who shares the link, adding to the credibility of the link that follows.

I find it fascinating how technology changes language.

Samara in October, 2013

There are many beautiful old buildings in the city center:

1

They have fantastic signs:

2

And gorgeous balconies:

3

Many buildings have arches:

4
5

For some reason, when I was here for the first time, I did not have any curiosity to what was inside. But I should have:

6
7

The true Samara yards are behihd those arches. With shoes being dried on a little fence:

8

With wonderful stairs:

9

With colorful doors:

10

Without any doors:

11

With impossible brickwork:

12

With numbers written on a wall:

13

With numbers written on a fence:

14

And, of course, with mailboxes:

15

Look at those mailboxes!

16
17
18
19
20
21

Apple, please do not make a 4K display

In several hours Apple will unveil its new products, which are believed to be the new iPads, MacBooks and the new Mac Pro.

Some people have speculated that along with the new Mac Pro Apple will release a new 4K display. Or at least expressed an opinion that such a move would be welcome. Particularly, Marco Arment has said in the latest Talk Show, that he would buy one (or even two) immediately.

A new, better desktop display is what I want either, but 4K is not an answer to that at all.

I am currently using the Apple’s 30-inch Cinema Display from 2004 running at 2560×1600 resolution. Unfortunately, noone, including Apple, has since released a better display for me. Apple’s own newer displays, i.e. a 27-inch Thunderbolt display or a 27-inch iMac display, run just 2560×1440. And not only the resolution is lower, these displays are also glossy, whereas I prefer a mirror to be a separate device. If Apple announces a 4K display later today, I don’t see how it can be better than the 2004 one I already have.

There are different definitions as to what 4K resolution means. Let’s say Apple picks a 4096-pixels-wide option. So for a 16:10 display, the resolution would be 4096×2560. Now there are three options as to how to use these pixels.

The standard “retina” pixel-doubling approach will result in an effective 2048×1280 resolution. So I will end up with 36% less real estate than I have now. Also, on a 30-inch display such 2×2 “pixels” will be gigantic and all non-retina stuff will look ugly (and I don’t want to “upgrade” to a smaller display). So this does not work at all. Another option would be to use scaling (as available on the retina MacBook Pros). While scaling definitely looks OK on retina, I want to enjoy razor-sharp pixels on my new display, not some blurry crap (even if it is not that blurry). And the last option would be to use the actual 4096×2560 as is. With Mac’s very poor ability to scale UI fonts, I don’t think I will be able to see anything in such a mode. I doubt this option will even be available without some sort of a hack.

As you see, there’s no way a 4K display can be any better than the good old 2004 Cinema Display. So I hope Apple will not use 4K and will go straight to “5K” with a 5120×3200 30-inch matte Retina Cinema Display. Please?

Delete at least the empty things without confirmation

In The Humane Interface, Raskin explains that confirmations do not help prevent destructive actions, as people quickly form a habit of responding “Yes” to every “Are you sure?”. To protect the user’s data from their own mistakes, it is much more effective to implement the undo feature ubiquitously.

But if you are too lazy for that, at least check if the thing I am deleting is valuable. Adobe Lightroom is at least this smart: when you ask it to delete an empty folder, it does so stat. Apple’s Reminders, on the other hand, is very dumb: when you try to delete an empty list, it still wants to make sure you are sure.

How I bought into the iOS 7 icons’ large circles

Many designers seem to not like the size of the circles in iOS 7 icons constructed with the help of “Jonny Ive’s grid”. Here is a fragment from Neven Mrgan’s blog:

The large circle is too big. Many apps in iOS 7 use it: all the Store apps, Safari, Messages, Photos… In all these icons, the big shape in the center is simply too big. Every icon designer I’ve asked would instead draw something like the icon on the right. To our eyes—and we get paid to have good ones, we’re told—this is more correct.

At first, I also liked the smaller “iOS 6 style” circle better, it looked more balanced to me. But I also kept thinking that there was something good about the new icon. Somehow the fact that there were almost no margins around the circle makes it look lighter. Why?

A couple of days ago I accidentally saw a state-of-the-art washing machine (by pure accident it turned out to be Samsung). My own washing machine is about 20 years old, but it still works fine, so I never bothered to look at the new ones. On the left, the washing machine I saw, or the right, my own one:

Notice something? After having seen the one on the left, I can no longer tolerate the old iOS 6 icons. Those gigantic margins make them look heavy and outdated (like the washing machine on the right). The old TV sets’ curvy screens also had very large areas around them, it was technically necessary. The old houses had very small windows, or it would be next to impossible to heat them. But today people build houses where the whole wall is a window. Televisions try to have as thin frames as possible. And washing machines have large transparent doors.

The new App Store icons should be spacious. There is no need to balance the inner and outer parts of the circle: the outer part has no reason to exist at all. At the same time, the bigger the App Store sign is within the icon, the easier it is to see it. Which is a win.

What we perceive as beautiful is largely defined by the technological progress.

Earlier Ctrl + ↓