Designing for Thumbs
In his analysis of 1,333 observations of smartphones in use, Steven Hoober found about 75% of people rely on their thumb and 49% rely on a one-handed grip to get things done on their phones. On large screens (over four inches) those kinds of behaviors can stretch people’s thumbs well past their comfort zone as they try to reach controls positioned at the top of their device.
Captchas are problematic. Traditional captcha solutions have been a failure so far. Below is one of the more user friendly solutions I have come so far
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.
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
Malaysia 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.
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.
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.
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:
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)