Usability: Delete Confirmations Done Right

Here is a great way of implementing delete confirmations in web app interfaces. It’s intuitive and usable. It’s done within the same “delete” button but with an extra click. This is how it works, you click once on the button and it will change its state to confirmation button, you click again to confirm deletion.

It’s way better than the overlay popups in the middle of the screen or other too creative ways that go counter-intuitive to the usability of the web app.

It’s from Zapier.com, kudos to them for making their UI user-friendly.

Efficient Way to Consume Content on the Web

For the past few months this is how I consume the content on the web and mobile, I primarily use this method to read longer blog posts and articles. I also use it to save articles so that I can read them later.

What’s the current problem?

You would ask “what’s the current problem that it requires this kind of solution?”. Well, the current problem is that there are many great blogs and websites on the web that are simply difficult to read. This could be due to many reasons. Here are some of them:

  • using small font sizes for the content
  • using dark backgrounds behind the content
  • using difficult to read font-styles
  • blog layout is not user-friendly
  • too many ads on the blog
  • etc etc.

The Solution

Solution is a product called Readability that works with your web browsers, smartphones and tablets. Here is how it works.

1. You sign up for an account with Readability and drag the browser bookmarklets to your browser’s toolbar. Bookmarklet works with all the major web browsers. (You can also install Google Chrome extensions)

2. And when you are browsing the web and come across a good blog post or an article that you would like to read..

3. You just press the bookmarklet and it will send that particular page to your Readability account. Google Chrome extension gives you few options when you press the button; Read Now, Read Later, and Send to Kindle. Continue reading

Offline Usability: Voting Made Difficult

voting usability x markMalaysia is gearing up for General Election soon. Yesterday mainstream newspaper NST had an article about how people in Malaysia cannot even mark the voting ballots properly. It read:

AROUND the world, a simple X is all it takes to mark the spot on a ballot paper. But just leave it to Malaysians to get a little more creative when stating their choice of candidate…

…According to Election Commission figures, there were 134,058 spoilt votes cast for state assembly seats and 165,018 for parliamentary seats in 2004.

While it may sound so simple to just mark [X] beside the desired candidate, little they know that this is actually quite confusing for people, especially the elderly.

[X] is used for Deleting not Selecting

First of all, people never use [X] for selecting something. X is used for deleting, rejecting or making something void. In everyday life, people either tick or circle the preferred choice.

I am sure this problem happens in every country, it’s just more prevalent in one country than another. Sure, Governments can teach its people how to mark [X] correctly during elections and decrease the number of spoiled votes. But the better, more sustainable solution would be to introduce a system that is usable and intuitive to all people. Because when the system is flawed, you have to constantly teach the people how to use it. That means more expenses for the Government. But if the system is replaced with a functional one, the cost would decrease and there would be less errors and less headache during each election. Maybe using “tick” would help!? Or having separate “Yes” and “No” ballot boxes, where you could throw the deserved candidates? I am sure there will be dozens of other better alternatives if one was to brainstorm.

WP Plugin: Make your blog’s search strings SEO friendly

wp plugin nice searchNice Search is a WP plugin that makes your blog search “SEO friendly”.

It’s in quotes because normally search results won’t get indexed by search engines, because they are dynamic. Unless of course you store them as a static page in a specific folder in your blog.

But the plugin is still very useful, it makes your search strings “nicer” as the name of the plugin says. As you can see from the screenshot, it turns the normal wordpress search string into /search/keyword format, which is a lot more readable.

Plugin page: http://txfx.net/code/wordpress/nice-search/

CSS Tip: Increasing readability of your blog in one easy step

One line of CSS code can do so much to improve your blog’s readability. It’s a simple thing to do, yet I see many blogs are not making use of it. It’s the line-height: code in CSS. It defines the space between the lines. Screenshots below show two different pages; one without line-height code and another with line-height set to 20pixels.

As you can see, it’s so much easier to read the second page.

css line height

css line height 20px

Just add: line-height: XXpx; to your main theme in style.css file

Whitespace around images

Another thing that is usually neglected is, not using whitespace around the images (i.e padding). It’s a simple thing to do too. I have blogged about it here, this post teaches you how to specify margins for your images, so that the text around the image won’t stick to the border of the image.

While these things are fairly simple things to implement in blogs (which many of us do not bother to do it), but the result that they produce is: better blog readability and professional looking blog.

Usability: Too fancy texts are ignored as ads

It’s a holiday season. So, many websites are offering various promotions on their websites, usually those promotions are placed on the main page (homepage), with the intention that the more people see it, the more clicks will it get. And more people will buy the products.

Unfortunately, that’s not the case with most promotions, (they don’ get clicks, but get ignored instead) especially when those promotions are fancy banners and texts. At least that’s what the usability guru Jakob Nielsen has analyzed.

He made a research on U.S Census Bureau homepage, checking the usability of the population counter (text in red) and how many people actually used that text:

usability too fancy

86% of users failed to find the country’s current population when it was presented in large red numbers. The reason? Users ignored a key area because it resembled a promotion..

Beyond banner blindness, the major reason this homepage failed is that it used made-up terms or branded descriptions rather than plain-spoken words. Terms like “Population Clock,” “Population Finder,” and “QuickFacts” are not as descriptive as a simple line of text that says: Population of the United States: 302,740,627 (as of Aug. 31, 2007)

Continue reading