Smaller touch targets are harder for users to hit than larger ones. When you’re designing mobile interfaces, it’s best to make your targets big so that they’re easy for users to tap. But exactly how big should you make them to give the best ease of use to the majority of your users? Many mobile developers have wondered this, and most have turned to the user interface guidelines provided by the platform developer for the answer.

What the Mobile Platform Guidelines Say

Apple’s iPhone Human Interface Guidelines recommends a minimum target size of 44 pixels wide 44 pixels tall. Microsoft’s Windows Phone UI Design and Interaction Guide suggests a touch target size of 34px with a minimum touch target size of 26px. Nokia’s developer guidelines suggest that the target size should be no smaller than 1cm x 1cm square or 28 x 28 pixels.

While these guidelines give a general measurement for touch targets, they’re not consistent with each other, nor are they consistent with the actual size of the human finger. In fact, their suggested sizes are much smaller than the average finger, which can lead to touch target problems for users on mobile devices.

Small Touch Targets Lead to Big Problems

Small touch targets make users work harder because they require more accuracy to hit. Users need to reorient their finger, from finger pad to fingertip, to hit the target with clear visual feedback. Using the finger pad would cover the entire target, making it impossible for users to see the target they’re trying to hit. Users use the fingertip to hit small touch targets because it gives them the visual feedback they need to know that they’re hitting their target accurately. But when users have to reorient their finger, it slows their movement down, and forces them to work harder to hit their target.

Not just that, but small touch targets can lead to touch errors. When small touch targets are grouped near each other, users can accidentally hit neighboring targets and initiate unintended actions. This is because the user’s finger overlaps on to the neighboring buttons. And if pressure is not carefully applied in the right spot, it’ll trigger the wrong action. It’s easy for users to make these errors with their index finger. But it’s even easier for them to make these errors if they use their thumb, because their thumb is much larger than the target. Sometimes users will tilt their thumb sideways and use the thin side to hit a small touch target. But this is a lot of unnecessary work.

Thumb use among mobile users is popular. Some users won’t always have two hands free when they’re on their mobile device. Many prefer the convenience of using only one hand and their thumb. Users shouldn’t have to switch from using one hand to two hands, or from their thumb to their index finger to hit a target accurately. And more importantly, the size of a target shouldn’t cause them to make touch errors. Small touch targets make things harder for users, where a finger-friendly target does not.

Pixel Width of the Average Index Finger

An MIT Touch Lab study of Human Fingertips to investigate the Mechanics of Tactile Sense found that the average width of the index finger is 1.6 to 2 cm (16 – 20 mm) for most adults. This converts to 45 – 57 pixels, which is wider than what most mobile guidelines suggest.

A touch target that’s 45 – 57 pixels wide allows the user’s finger to fit snugly inside the target. The edges of the target are visible when the user taps it. This provides them with clear visual feedback that they’re hitting the target accurately. They’re also able to hit and move to their targets faster due to its larger size. This is consistent with Fitt’s Law, which says that the time to reach a target is longer if the target is smaller. A small target slows users down because they have to pay extra attention to hit the target accurately. A finger-sized target gives users enough room to hit it without having to worry about accuracy.

Pixel Width of the Average Thumb

There are many users who use their index finger to tap mobile targets. But there are just as many users who use their thumb as well. The big difference with the thumb is that it’s wider than the index finger. The average width of an adult thumb is 1 inch (2.5 cm), which converts to 72 pixels.

For users who use their thumbs, 72 pixels does wonders. They’re easier and faster to hit because they allow the user’s thumb to fit comfortably inside the target. This makes the edges visible and easy to see from all angles. This means that users don’t have to reorient their thumb to the very tip to see it hit the target. Nor do they have to tilt their thumb to the side to hit it. One tap with their thumb pad is enough to do the trick.

A Target Size Study for One-Handed Thumb Use on Small Touchscreen Devices found that user errors declined as the target size increased. Users were able to tap the target faster without having to make intentional physical accommodations to increase accuracy such as reorienting the thumb, which would have slowed performance.

Another study on Touch Key Design for Target Selection on a Mobile Phone also found that the number of errors decreased as the touch key size increased. In addition, it was provided that the larger the touch key size, the higher the success rate and pressing convenience.

Finger-Sized is Ideal, But Not Always Practical

As many benefits there are to using finger-sized targets, they’re not always practical in every situation. On a mobile device, you’re working in a limited space. This means when you have many finger-sized targets together, they can take up more space than your screen can afford. However, when you have a few finger-sized targets together, that’s when you can fit them all on your screen without trouble. You will need to measure the size of your screen and touch targets to know exactly how big of a touch target you can afford. If you can’t afford finger-sized touch targets on your interface, use the guidelines the mobile platform gives you instead.

Finger-sized targets are much easier to apply on a tablet than a mobile device because there is more screen space available. You can use them liberally without the fear of taking up too much space and improve tablet usability instantly. However, mobile devices are where users have the most trouble hitting touch targets. And that’s where finger-sized targets are needed the most. The challenge for designers is to figure out how to make the most of finger-sized targets on the mobile screen. This might require using less touch targets than you normally would. But this is a plus because it forces designers to keep their navigation simple and minimal.

Thumb-Sized Targets for Gaming Applications

Another thing to think about is when to use a thumb-sized target over an index finger-sized one. It’s difficult to know whether most of your users will use their thumbs or index fingers on your application. However, if your application is a game, it’s likely most users will use their thumbs to play instead of their index fingers. This is why thumb-sized targets are particularly useful for gaming applications. By making your game control targets thumb-sized, users can play the game with better handling and control. They’re able to see the game control targets as they move their thumbs, and the game will feel more adaptive to them.

It is without a doubt that matching your touch target sizes to the average finger size improves mobile usability for many. Whether your application is a game or any other, touch targets are designed for users to tap. If the user has to take their attention away from using your application to the way they move, orient or arc their finger to tap a target, it degrades their experience of your application. With this new-found insight, you can create applications that are truly finger-friendly. Finger-friendly design isn’t reserved for the few. It’s a new design standard for mobile applications to follow everywhere.

(Powered by LaunchBit)

Luckily, there’s a way you can help users who forget their usernames log in to their account. Most users remember their email address more than the usernames they use across different websites. This is because most users check their email regularly and are more familiar with their email address. However, some sites don’t allow users to log in with their email, but rather username only. This can force forgetful users to create a new account all over again. Users are not only frustrated that they forgot their username, but now they have to do extra work. In addition to the frustration, forcing forgetful users to create a new account can populate your database with ghost accounts. This isn’t good for you or the user.

A flexible identification field would allow users to enter either their email address or username to log in. This not only helps users who forget their username, but also users who forget which email address they used to sign up for your site. A user might forget the email address they used, but remember the username. The flexible ID field adapts to the user and what they remember. Users have the freedom to choose to log in with their username or email. If one fails, they can always try the other option.

Adding a flexible ID field on your login form has many benefits. A username and email address are both unique to a user. It makes sense to allow them to choose what they want to use to log in if they forget one or the other. Limiting the user to only one login ID runs the risk of users forgetting it and getting locked out of their account. Getting locked out isn’t fun for anyone. But with a flexible ID field, you can prevent this from happening to your users. Giving users the help they need when they make errors is important part of interface design. But preventing users from making those errors in the first place is a more important part of interface design that designers should strive for.

(Powered by LaunchBit)

Instead of just showing how many users out of the total number of voters found a review helpful, show the percentage of users who found a review helpful. This makes the helpful reviews easier to spot. Instead of reading every review, users can sift through the unhelpful reviews and read the most helpful reviews to get better information and save time. It’s difficult for users to calculate how helpful one review is over another when the votes are written in fraction form. Displaying them in a percentage form allows users to effectively scan and weigh each review before they invest time in reading it.

Not every review is equally helpful. Users won’t know which ones they should spend their time reading if a voting percentage isn’t displayed. This technique is useful for large eCommerce sites that get a lot of product reviews such as Amazon and eBay. If you want to give your users a good product review experience, don’t force them to read every review, and don’t make them think. Make helpful reviews easy to see by not just showing the number of helpful votes, but also the percentage of helpful votes. By doing this you’ll speed up the user’s research efforts and save them time.

(Powered by LaunchBit)

Browser Tabs Have Changed Everything

Back then, many people frowned upon opening links in new windows. New windows were hard for users to manage. But the introduction of browser tabs have changed this. Instead of opening up new windows, you can now open links in new tabs. The big difference here is that browser tabs are easier for users to manage than browser windows.

When a new window opens, it covers the user’s earlier window. The user is left confused and wondering how to get back. But when a new tab opens, the user can still see their earlier tab at the top. Switching back to it is swift and easy. In fact, many users have multiple tabs opened at once when they’re browsing. The tabs metaphor is easy for users to understand. The way it’s done on browsers today makes flipping from tab to tab easy and seamless. Now that the browser has changed, the way designers target their links should change too.

Internal vs. External Links

Links that take users to another page on the same website are internal links. Internal links should never open in new browser tabs, but rather the same tab the user is on. Opening new tabs of the same website is redundant and confusing for users. If it’s the same website but a different page, the site’s navigation menu is still visible to users. They can simply use the menu to navigate back or elsewhere if they need. Keeping users in the same tab also helps them better understand the navigation flow of your site. Therefore, it doesn’t make sense to open new tabs if the links take users to the same website.

External links, however, should open in new tabs. These links take users to a different website. Many designers make the mistake of opening external links in the same tab. There are many problems with this that designers need to know about.

• Internal Link
• External Link

Back-Button Fatigue

When you open external links in the same tab, you create back-button fatigue for users. Every time the user goes to an external website they have to hit the back button to go back to your website. If they decide to click the links on the other website, they have to hit the back button even more times to get back to your site. This is a lot of unnecessary work for users.

Opening an external link in a new tab allows users to explore the other site as much as they want without having to hit the back button again and again to go back to your site. All they need to do is click the tab your site is on. There’s no excessive back-button pressing or long wait times.

Slowing Down User Flow

External links that open in the same tab can also slow down user flow. Many users who browse search engines or link sharing sites are looking for information. They’ll often click multiple links on a page to get information from different sources. Opening the external links in new tabs allows users to scan the page once, click on all the relevant links and start consuming and sifting information. The user doesn’t have to keep going back to the source page to continue scanning for more links to click. There’s less interruption in their flow.

When users do want to go back to the source page, it’s easy to do because the tab will stay open until the user manually closes it. The user doesn’t have to click the back button multiple times and wait for the source page to reload. They can easily get to it just by clicking the tab.

Overworking the Website

Opening external links in the same tab doesn’t just overwork the user, it also overworks your website. Every time the user goes back to your website it uses your site resources to load the page. You can save a lot of resources by opening external links in new tabs. If the user wants to go back to your website, they won’t need to load the page again. They can just click your site tab. This is fast and easy and doesn’t use any bandwidth. They don’t need to hit the back key or open a context menu to go back.

Inaccurate Analytics

Many times users will click an external link in the paragraph of an article to better understand the article’s context. This doesn’t mean they want to leave your site without having finished reading the article. However, your site analytics will show a different story. If your external links open in the same tab, it’ll show that users are exiting your site quicker than they actually are. This is because the external link takes users completely off your site when the link opens in the same tab. However, an external link that opens in a new tab will still keep your site tab opened as the user visits the external site. Their time on your site ends when they manually exit out of your site tab, not when they visit an external link.

A user clicking an external link does not mean that they want to leave your site. You should not treat external link clicks as site exits. The only clear exit from your site is when the user hits the close button on the tab.

External Links Affect Your Site and Users

Links that take users to different websites should open in new tabs. Links that take users to a different page on the same website should open in the same tab. If you’re opening external links in the same tab as your site, this affects both you and your users. You not only experience inaccurate analytics and make your website work harder, but you also make your users work harder and slower. In a world today where links dominate the web, making your links open the right way is almost as important linking to the right page.

(Powered by LaunchBit)

The reason information is harder to find with an overloaded sidebar is because part of the navigation lies below the fold. This means the entire navigation is not visible to users at once. They have to scroll down to see the rest. And most of them won’t do this unless there’s a reason to.

If the user hasn’t found what they’re looking for in the navigation above the fold, they might scroll down to look for it below the fold. However, that’s only if they have an idea of what they’re looking for. If they don’t have a target in mind, they’ll keep most of their attention on links above the fold and ignore the ones below. This can lead to users missing links they might need.

Another problem for a user who is looking for a below the fold link is that they have to spend time and effort scanning through all the links above the fold before they can get to the links below the fold. Users shouldn’t have to waste time and effort looking through the links they don’t need to get to the links they do need. Finding the link they need should happen in seconds, not minutes.

A faceted overload can also lead to slower user engagement or none at all. The more links you display to users, the longer it’ll take for them to make up their mind. They not only have to read through more stuff, but they also have to decide where to go through the process of elimination. In order to say yes to one link, they have to say no to all the other links on the page. This means they have to look and consider everything. And a full-page of links is too much to consider.

Showing the Top-Level Link First

The goods news is that there’s a way you can keep all the links in your sidebar navigation while minimizing the user’s workload. By applying faceted minimization you can display your navigation above the fold, and allow users to bypass the links they don’t need. This will make your page less cluttered, and save users time and effort.

Most faceted navigations have top-level links. A top-level link is the main title that describes all the other links under it. It’s what users should read first before they consider the other links. Faceted minimization hides the secondary links and shows only the top-level link first. Users only have to scan the main titles to find what they’re looking for. Once they find it, they click the main title and the other links show. With this approach, the user doesn’t have to look at every single link in the sidebar. And they don’t have to go digging below the fold. They can find what they’re looking for faster and easier by scanning the main titles first.

You might have one section of links in your sidebar that is often used by your users. In this case, you can keep that section displayed and unhidden as the default. If most users will use that section, you don’t want them to have to always click the top-level link to get to the other links under it.

Faceted sidebar navigations allow you to list many links along the side of your page. But you can still overdo this and overwhelm users if you list too many. When your sidebar navigation starts to get out of control, apply faceted minimization to make your navigation simpler and easier to use. Processing information and making decisions take time and energy. And users only have so much of it.

(Powered by LaunchBit)

Productivity Papers is a system of printable papers that help you develop productive habits and routines so that you can reach your goals more effectively. It‘s based on the study and research of how experts work. Stop stressing out and overworking yourself with mediocre results. Work like an expert, and you’ll eventually become one.

Experts have developed habits and routines that are conducive to top performance. Anders Ericsson did a study on violinists at the Berlin Academy of Music. He found that the best violinists practiced in sessions no longer than 90 minutes with a 20-minute break between each one. And they almost never practiced more than 4 and half hours a day.

The 90-Minute Work Routine reflects how experts work. It will help you keep track of your daily work sessions, the time of day you work, and the distractions that keep you from your work. This paper helps you develop time management.

Experts don’t just practice their craft. Ericsson found that they “deliberately” practice it. This is more than repeating a task over and over. And it’s more than working on tasks you enjoy and already know how to do. Deliberate practice involves concentrated effort on a specific task you can’t do well while getting continual feedback. Experts use continual feedback to improve performance. As performance improves, enjoyment increases, and the task gradually becomes an automatic habit.

The Deliberate Practice Sheet helps you keep track of specific tasks you want to improve on, and the feedback you get from each performance. It also allows you to rate your level of skill, enjoyment and habit so that you can see your improvement over time. This paper helps you develop self-mastery.

Experts also set their goals differently. They make their goals very specific. They have a clear understanding of the what is it they want to achieve, why they want to achieve it, when they’re going to work on it, where they’re going to work on it and how they’re going to get there. When you make your goals vague, you’ll settle for what’s good enough when the going gets tough. Experts are able reach new heights because they shoot big and have a specific plan to get there.

The Specific Goal Plan helps you get specific about your goals. It’s a way to clarify the what, why, when, where and how of your goals so that you can better reach them. This paper helps you develop a plan-of-action.

Experts couldn’t get to where they are without consistency. Goals aren’t reached in one shot. They’re reached through consistent effort. It may take months or years, but as long as you’re consistent, you’ll get there.

Jerry Seinfeld, one the highest paid comedians ever with an award-winning sitcom, understood this. He revealed that the way he became a better comedian was by creating better jokes. And the way to create better jokes was to write everyday. He marked an X on his calendar for each day he did his task of writing. After a few days, a chain would form. The goal is to not break the chain.

The Chain Calendar allows you to mark an X on the days you do what you tasked yourself. As you stay consistent, you’ll clearly see the chain you make for the entire year. There are also weekly notes to the side for writing about the days you missed, or your weekly accomplishments. This paper helps you develop consistency.

Each productivity paper comes as a printable PDF. You can print as many as you need. They’re all beautifully designed and easy to write on. You get all of this for just $7.00. After payment is complete, you will receive an email to download the file. Payment is PayPal secure.

Productivity Papers helps you work the right way to get the most results. It doesn’t do the work for you. Becoming an expert isn’t easy. Anything worth achieving rarely is. But once you put in the work and work the expert way, the results you see will astound you, and those around you.

(Powered by LaunchBit)

The winners of the UserTesting giveaway are:

1st place – Jessica

“We have so much noise on our two most trafficked pages. I want to know where people are getting lost and/or giving up. How they are or are not finding the things they want.

Ultimately, I want to streamline my sales cycle and I need to know what aspects of the design are getting in the way.

HELP!”

2nd place – John

“I like the idea of User Feedback. I have created a site that is starting to get traffic, but the analytics state that the visitors aren’t taking the paths that I layed out for them. I am going to set up some A/B testing, but, that takes time and still may not be sure if we are converting as many visitors as possible.

Any help would be appreciated.”

3rd place – Kris

“I would test trustseals and certification seals BEFORE I purchase them. And figure out which one is actually worth my money. When they range from a couple of hundred dollars a year to thousands it seems like we purchase these all on emotion. It would be good to get real user feedback on what they think of it in the real context and if they even notice them!

I would also test out my competitors and see if the users pick up on the trustseals and what their comments are.

Since trustseals are ongoing and you spend it every year then it would be prudent to know which ones are going to work before. You spend the money.”

Thanks to those who participated, and a special thanks to UserTesting for making this giveaway possible!

(Powered by LaunchBit)

Many years ago, clicking was the simple answer to this question. The general thought was that if you made your page too long, users would only view and read the top half and glance over or ignore the bottom half. Today, things have changed. Many users do scroll to the end of the page and have no problem doing so. Scrolling has become a second-nature and clicking a chore. As user behavior changes over time, designers need to take that into account in their designs.

There are advantages and disadvantages to both scrolling and clicking. However, the advantages outweigh the disadvantages for scrolling. Scrolling is faster for users than clicking. With mouse wheels and touchpad swipes, users can scroll through content with a flick of a finger. Compared that with clicking, where users have to find the link, read it, target it, click it and wait for the page to load.

Users get content in the order that it’s designed on the page with a glimpse of everything. With clicking, users can skip a link and go to the next one without ever visiting the pages they skipped.

Scrolling keeps users in their reading flow. They scroll to continue reading until they read the end of the page. Clicking breaks the user’s reading flow because after they’re through with a page, they have to stop and click the link to the next one. Users also don’t have to wait for a new page to load, which can further break reading flow. All they have to do is scroll to the next section.

Clicking doesn’t win out on speed or ease of use, but it also has its advantages. Clicking allows you to track user clicks to a page with analytics. You can’t do this with scrolling. The only thing you can track is the top-level page, not the sub-sections.

Each page will have a link that you can share with others. This link will also index in search engines. With scrolling, only the top-level page will index.

There are trade-offs between clicking and scrolling. It seems that scrolling is better for usability. But clicking is better for analytics and search engines. As the designer, it’s your job to weigh what’s important. Knowing the advantages of scrolling and clicking will help you decide which way to go. However, if the user experience is what you’re after, scrolling is the answer.

(Powered by LaunchBit)