can't use it

5 MINUTES AND 44 SECONDS LEFT.

What is this, a bomb?

Flickr has changed their buttons with flat ones instead of the thick-bordered ones they had before. I didn’t like the new ones very much because they lack the affordance of being “pushable”:

Here’s a crude version on how I’d make them more button-y

Also, I think UI-wise the buttons could lead the user to do the more desirable action for Flickr. In this case, they have placed a Preview button so users would read what they write and end up leaving smarter comments :) Why not highlight it a bit?

or then in the style that Facebook has introduced:

It’s good to provide users guidance in the form of defaults actions in forms and dialogs. A good example is Mac OS UI’s dialogs such as:

Turkcell’s web page for managing mobile phone subscriptions not only annoys customers with superfluous captcha and password aging, they do not provide a ‘back’ button in their error page as well!

They probably expect the customer to return to the previous page using the tab. However, it should ideally not be a link and should have the same content in every page, as they don’t have any secondary navigation.

I wondered why Apple decided to let go of the address bar that would fill up as a page loads, as it was an elegant UI that communicated what was happening.

Apparently this change was made to prevent users’ delusion that they had to wait until the bar completely filled up:

The big blue progress bar led to users waiting for mostly-loaded and usable pages. Removing it makes browsing effectively faster.

This sounds like how users think keyboards interaction is much faster even though they performed equally as well with mice.

Everytime I create a trip on Dopplr, I get the feeling that I have done something wrong, because they have the informative feedback in red.

It’s strange if they are doing this on purpose. I think it should rather be green. Here is a crude version of what I would do instead:

Safari 4’s beta sports an interface which is quite similar to Google’s Chrome: the tabs live in the title bar.

Here is what I think:

• It is definitely more logical that the address bar and the toolbar live within a tab, as actions performed in that area affects the current tab, not the whole application.
• However by doing this Apple is breaking the standard Mac OS UI of 20+ years, that there exists a title bar to move a window.
• It is more difficult to drag a link and have it opened as a new tab. Before the whole empty tab area could be used for this. Currently this is accomplised by a 5-pixel-wide area at the left of the create tab button.
  

  Before this whole area could be used to create a tab

  

  It's now this big.

• The handle in a tab (which lets you drag the tab) looks like it actually would resize the tab, as the same design is used to denote resizing elsewhere in Mac OS (like the bottom right corner of windows).
  

  Standard Mac OS handle resizes

  

  But Safari's handle moves a tab

As Safari 4 is in beta, Apple definitely will make some changes to the UI, and I’m eager to find out how they will tackle these problems.

A few weeks ago Google started using imageless buttons which are produced entirely with HTML/CSS. So they don’t use images and are apparently resizable.

The big problem about these buttons are, that in terms of semantical markup, they are a mess.

<div tabindex="0" act="7" class="goog-imageless-button
goog-inline-block goog-imageless-button goog-imageless-button-collapse-right
goog-imageless-button-primary" id="" role="button">
	<div class="goog-inline-block goog-imageless-button-outer-box">
		<div class="goog-inline-block goog-imageless-button-inner-box">
			<div class="goog-imageless-button-pos">
				<div class="goog-imageless-button-top-shadow"></div>

				<div class="goog-imageless-button-content">
					<b>Archive</b>
				</div>
			</div>
		</div>
	</div>
</div>

I personally see no point in using such a tag soup to implement buttons. In the longer run, loading a single image (assuming we’re using a CSS sprite) and using it over and over would consume less bandwidth than using 725 bytes for each button.

The article in StopDesign offers a better way of creating psuedo-rounded-corner buttons with not that much markup. By the clever use of a sprite, they obtain a horizontally and vertically resizable button.

<button class="btn" type="button">
	<span>
		<span>button</span>
	</span>
</button>

Also as they use an image, they have a much smoother gradient, as opposed to Google’s three-striped version.

There is also the jQuery UI approach to the problem, which I find elegant as well. They have a holistic solution to create toolbars and other UI elements.

<div class="fg-buttonset fg-buttonset-single ui-helper-clearfix">
        <button class="fg-button ui-state-default ui-state-active
ui-priority-primary ui-corner-left">Edit</button>
        <button class="fg-button ui-state-default ui-priority-primary
ui-corner-right">View</button>
</div>

From 37Signals:

(1) Windows 7 Explorer vs. (2) Dance Dance Revolution.

I’m reading a fantastic book and I thought I should share its equally fantastic preface with you:

There are professions more harmful than Industrial Design, but only a very few of them. And possibly only one profession is phonier. Advertising Design, in persuading people to buy things they don’t need, with money they don’t have, in order to impress others who don’t care, is probably the phoniest field in existence today. Industrial Design, by concocting the tawdry idiocies hawked by advertisers, comes a close second. [...] Before, if a person liked killing people, he had to become a general, purchase a coal mine or else study nuclear physics. Today, Industrial Design has put murder on a mass-production basis. By designing criminally unsafe automobiles that kill or maim nearly one people around the world each year, by creating whole new species of permanent garbage to clutter up the landscape, and by choosing materials and processes that pollute the air we breathe, designers have become a dangerous breed. And the skills needed in these activities are carefully taught to the young people.

The book is “Design for the Real World” by Victor Papanek. You can check out more pages using Amazon » but notice that this preface is not there.

One thing to remember:

If you’re asking users to grade things on a scale, provide the “no opinion” as a default. Or have your code assume “no opinion” if the user doesn’t select anything. Please don’t force the user to click “no opinion”s one by one.