Tablet usage is exploding. One study estimates that “90 million americans will use a tablet device in 2014″[1]. With this statistic, understanding how to design tablet interfaces is more important than ever. New research reports that users use tablet interfaces differently from desktop ones. When using a desktop interface, users have an instinctual preference to vertically scroll. However, when using a tablet interface, users have an instinctual preference to horizontally swipe. Users use desktop and tablet interfaces differently, so you should design them differently too.

Horizontal Swiping Instinct

Eye tracking research shows that users “have an overwhelming instinct to swipe horizontally through a full screen photo gallery” [2]. This has design implications for interfaces with image-heavy content. The research further found that “participants who were given an iPad in landscape orientation swiped horizontally 93% of the time. In portrait, they swiped horizontally 82% of the time. This is statistically significant evidence for a horizontal inclination and that the swipe direction isn’t just a random behavior.” [2]. Regardless of portrait or landscape orientation, most users instinctually prefer to swipe image-heavy interfaces horizontally.

Three Different Layouts Tested

In their research, they tested three tablet prototypes with different content layouts that each contained a combination of text and images. The first one was a traditional layout that’s most similar to what users regularly use on desktop interfaces. The layout places the content in columns which is ideal for vertical scrolling. Some story headlines were bigger than others, and some showed images while others did not. In an exit interview, only “35 percent preferred the traditional prototype” [3].

The second prototype they tested placed the content in rows. It was designed like a carousel, where horizontally swiping the page would show more content. The category headings were vertically aligned, and the story headlines were horizontally aligned. In the exit interview, a resounding “fifty percent of the readers preferred the carousel design.” [3]

The third prototype they tested placed the content in tiles of various sizes, where images dominated the screen. Users could only see the category names first, and had to select a category before they could view the story headlines. In the exit interview, only “15 percent liked the flipboard.” [3]

Why Users Preferred the “Carousel” Layout

Out of the three prototypes, the “carousel” layout was the most friendly for horizontal swiping and the most efficient for finding a story. The user’s eyes didn’t have to work as hard to read the category headings or story headlines because they were vertically and horizontally aligned. This allows the user to scan down in one direction to find a category and scan across in another direction to find a story. Users could horizontally swipe the page and continue scanning the same row of stories without breaking their gaze. Not only that, but switching focus to another category requires little eye movement. As the user horizontally swipes, they’re able to maintain a consistent and efficient scanning pattern from page to page.

The traditional layout makes users work their eyes more because it doesn’t offer a clear, straight path for scanning categories and stories. Instead, the category headings and story headlines are scattered in different places on the page. Users have to move their eyes from column to column to scan the categories and stories. There’s also a lot of variation in the text and image sizes that could easily cause the user’s eyes to unintentionally stray from what they’re focusing on to a more dominant element. The stories that have images will draw more attention than stories that don’t even if users aren’t particularly interested in it.

The “flipboard” layout was the most visual, but the large size of the images could cause users to look at content they’re not particularly interested in. Showing users just an image for each category makes it harder for them to choose one because they don’t understand the context behind the image. The layout makes the user tap more than the other layouts because they have to choose a category before they can see any stories, and they have to tap all the way back to the category page when they want to view stories from a different category.

Designing a Horizontal Swipe Layout

Not all tablet interfaces work well with a horizontal swipe layout. But If your tablet interface is full of images, categories and headlines, you should design it for horizontal swiping. Here are a few guidelines and examples to help you get started.

Organize your content in rows

The first challenge is to size and arrange your text and images to fit inside a content box. These boxes will become rows for each category. You can organize the text and images in a dynamic way so that your layout looks more appealing. For example, in the first row, NPR places the headlines above the thumbnail images so that the headlines draw more attention. However, in the second and third rows, the larger images grab the user’s attention first.

Make your category headings stand out

Sometimes users only want to see content for a particular category. If your category headings aren’t distinct, it makes it harder for users to tell what type of story they’re looking at. MSN uses bold typography and vibrant colors to distinguish one categorical row from another.

Use partially visible content as a navigational cue

Users won’t know to horizontally swipe if you don’t give them a navigational cue. Let them know that there’s more to see by making the content partially visible on the edge of the page.

Avoid making multiple items on the page swipable

In a horizontal swipe layout, users expect that swiping the screen will turn the page. Don’t confuse users by putting multiple carousels on your page and making the page swipable. A research study found that “swipe ambiguity plagued users when multiple items on the same screen could be swiped. Carousels often caused this usability problem in apps that also relied on swiping to move between pages” [4].

Consider a split view for less back button hitting

Every time the user taps into a story they have to tap back to the category page to read another story. By giving users a split view of the category page and the story their reading, you make it easy for users to browse stories without needing to hit the back button each time.

Users Prefer Landscape Orientation

Based on the research, it’s clear that users prefer horizontal swiping on tablet interfaces. What’s also interesting is that “seventy percent said in the exit interview that they strongly prefer holding a tablet in horizontal or landscape orientation” [3]. This orientation is ideal for horizontal swiping because users have more width to see more content on a page. With most users using their tablets in landscape orientation, it makes sense to design your interfaces for horizontal swiping. The use of tablets is rising, but understanding how users use them is just beginning.

References

[1] http://www.emarketer.com/Article/One-Three-Online-Consumers-Use-Tablet-by-2014/1008701

[2] http://www.poynter.org/how-tos/digital-strategies/171368/poynter-eyetrack-tablet-research-shows-horizontal-swiping-instinct-for-photo-galleries/

[3] http://www.poynter.org/how-tos/newsgathering-storytelling/visual-voice/191875/new-poynter-eyetrack-research-reveals-how-people-read-news-on-tablets/

[4] http://www.nngroup.com/articles/ipad-usability-year-one/

The 200 UI Design Icons giveaway has ended and it’s time to announce the five winners. Thank you to FileSquare for making this giveaway possible, and to everyone who participated.

Congratulations to the winners!

1. Caleb
2. Carmen Albu
3. megan
4. Nathan Graves
5. yingying

The winners will receive an email on how to get their icons. If you didn’t win, you can still buy the icons at PixelGlyph.

Everyone has scrolled to the bottom of a web page before and seen that row of numbers. That row of numbers is a website’s pagination. Pagination is a user interface pattern that divides content into different pages. It’s important to have one on your site to prevent your pages from becoming too long and overwhelming. But the way paginations are designed today are painful for users to use. It’s time to turn the page on painful pagination.

Stop Making Your Pages So Short

A web page is not like a book. The size of a book limits how much content can fill a page, but a web page has infinite height and can hold or load as much content as the website can handle. The only drawback to putting too much content on a page is that it can make the site load slower. However, most sites have enough bandwidth to support showing more content per page without compromising the loading time. The problem is that most sites show users very little content with short pages. By making your pages longer without compromising loading speed, users will get more content per page and won’t have to click the pagination as much. They’ll be able to easily scroll to see more content faster.

Users have better experiences with scrolling than clicking. The mouse wheels, touchpads and touchscreens of today make scrolling faster and easier than clicking. To get to the next page in a pagination, the user has to find the link target, hover the mouse over it, click it and wait for the new page to load. That’s a lot of work when you break it all down. Imagine the user having to do that over and over because of short pages. To scroll, all the user has to do is flick their finger on the mouse wheel, touchpad or touchscreen. There is no wait time and new content comes to them with minimal effort. Stop making your pages so short and allow users to scroll for more content instead of clicking.

A clever way to measure if your pages are too short is to look at the height of your scrollbar. A short page will have a tall scrollbar. A longer page will have a short scrollbar. You don’t want to have a scrollbar that’s too tall or short, but something that’s in-between. This balance will offer users more content without slowing down page loads.

Offer Content Filters to Users

Some paginations can have so many pages that the page numbers start to reach triple digits. No user will ever sit and browse from page 1 to 100. This is why you should never display your content as a giant, endless archive. Instead, offer your users different content filters that organize and display the archive by specific categories or attributes. This allows users to only see content that matters to them without getting overwhelmed.

Make Your Click Targets Bigger

Many sites underestimate how important the size of pagination click targets are. That click target is the user’s only means of getting to the next page. Make the target big and easy to see so that users will want to keep going to the next page. This means turning your “next” and “previous” links into larger links or buttons. With a larger click target, users will be able to spot and hit it faster and easier.

Don’t Use First and Last Links

Some paginations have first and last links that allow users to skip to the first or last page. This is unnecessary and ususally confuses users. Sometimes the first and last links are displayed using double arrowheads, which users will often mistakenly click thinking it’s the single arrowhead link that takes them to the next page. Labeling the links “first” and “last” also causes clicking errors because of its proximity to the “next” and “previous” link.

The first and last link is not necessary because most users prefer to look at content chronologically. There’s no reason for them to start from the last page unless they’re trying to find content from the past that they’ve already seen before. For those cases, you should have a search field in your navigation for that.

However, there is utility in giving users the option to go back to the first page. The first page often has the most relevant and recent content. After paginating the user might want to go back to the first page without having to click the “previous” link over and over. You should display the first page link as the number one with an ellipsis, such as “1…”. This way it won’t visually interfere with the “next” and “previous” links.

When to Display Page Numbers

It’s not necessary to always show a row of page numbers in your pagination. If your pagination has a lot of pages in the high double digits or above, it’s not helpful for users to see how many total pages there are because they won’t be able to get through them all. However, if your pagination has only a few pages in the low double digits or below, showing the pages in your pagination can encourage users to browse to the end. You should display page numbers when the amount of pages are small, but go with a simple next and previous button when the they are enormous.

There is one exception to this rule. When dealing with eCommerce sites, it’s better to show the page numbers in your pagination so that users can refer back to a specific page to look at products they’re considering to buy. Page numbering also allows users to shop for products more throughly because it shows them which pages they’ve viewed, and where they are in their viewing progress. Not only that, but when users need to bookmark a page, it saves it with descriptive title tags of the page number and product category so that they can pick up where they left off without forgetting what they were shopping for.

When to Use Infinite Scrolling

There are only a few instances where infinite scrolling is effective. When your content opens in a new tab or modal window, infinite scrolling is a useful technique. But if your content opens on the same page, infinite scrolling can frustrate users. When the user clicks to go back, they’ll lose their place and progress in the content stream and will have to scroll from the top of the page again. Opening content in a new tab or modal window allows users to keep their place and progress and continue scrolling without restarting or refreshing the page. An example of infinite scrolling opening content in modal windows is Pinterest. An example of infinite scrolling opening content in new tabs is Inbound.

Another issue with infinite scrolling is that when users get to a certain point in the stream, they can’t bookmark where they are and come back to it later. If they leave the site, they’ll lose all their progress and will have to scroll endlessly down the page to get back to the same spot. This is why infinite scrolling is bad for eCommerce sites. When users shop online, they want to be able to come back to the place they left off and continue their shopping. They also want to be able to save a page of products they’re comparing. Infinite scrolling is effective only when it’s used in the right context.

Paginating with Keyboard Arrows

Not many sites are taking advantage of arrow key pagination yet. This unique technique gives users the freedom to paginate without clicking the pagination. A simple press of the right arrow key takes them to the next page while the left arrow takes them back a page. However, users won’t know this feature is available unless you make note of it on your site. An example of this technique in use is Dribbble.

Avoid the Pains of Pagination

The pains of pagination run deep. For most users, a hard to use pagination is what stops them from continuing to browse a website. If the deeper pages of your site aren’t seeing the light of day, you could have a pagination problem. There are a lot of bad paginations on the web today. Do your part to stop bad pagination by making sure the pains of pagination aren’t found on your site.

Do you have a set of icons to use for the user interface you’re designing? Win a set of 200 UI design icons you can use on your next project by entering this giveaway.

About PixelGlyph

FileSquare, a prototyping tool and remote collaboration platform, recently launched a set of 200 beautifully designed icons called PixelGlyph. They are perfect for iOS toolbars and tab bars, Android apps, websites, t-shirts, tattoos and anything you want to use them for.

PixelGlyph has a free version that comes in 2 sizes (16 and 48 pixels squared), 1 color and in PNG format. You can download this 4.2MB zip directly from the website. Just leave your email, and the download link will arrive at your inbox. No other information required.

For the Pro version ($25), you not only get PNG files, but you also get the vector source files in AI and EPS formats. Vector icons are better for you to have because it allows you to change the color and size of the icons.

How to Win a Pro Icon Set

We’re giving away 5 Pro icon sets. We’ll choose 5 winners randomly, and reach them via email. Share this post on Twitter, leave a comment and your Twitter name, and you could win the $25 icon set for free!

A form has many user interface elements. If you don’t know how to use them all properly, you could make filling out forms difficult for your users. One interface element that’s commonly misused is the select menu.

When to Use a Select Menu

Sometimes you’ll find a select menu with 2 options and sometimes with over 20 options. In both cases, the select menu is used wrong. When you have less than 5 options for users to select from, you should use radio buttons. This allows users to make their choice faster and easier because all they have to do is look at their options and click once. With a select menu, users have to click the menu, scroll to an option and click again. A select menu also keeps the other options hidden until the user clicks it. When you have less than 5 options, it’s better to visibly lay them all out on the form with radio buttons so that users can scan them quicker.

A select menu with over 15 options is just as bad as one with less than 5. When you put that many options in one menu, you’ll slow users down because they’ll have to scan and scroll through the long list. Sometimes the list of options can get so lengthy that the menu takes up the entire screen. When you have more than 15 options in a menu, you should either lessen the amount of options, or use a text field to allow users to enter their own data. An open text field prevents users from having to fiddle with a giant select menu and makes filling out the form faster and easier.

Labeling Select Menus

Like other form elements, a select menu should always have a label next to it. However, you should also have a label inside the select menu that tells users what they’re selecting. The label should clearly and distinctly describe the group of options. A generic label such as “Please Select” isn’t clear enough for accessibility users who use screen readers to fill out forms. Adding a label outside and inside the select menu allows all users to take action quicker without any confusion.

When to Use a Default Select Menu Option

Most of the time, you should avoid giving users a default menu option. This is because if users fill out the form and accidentally miss the select menu, the wrong option could get submitted. It’s safer for users to get an error message for not selecting an option than to submit the form with the wrong option. The only time you should give users a default menu option is when you are certain that over 90% of your users will use that option. This saves the majority of your users time from having to mess with the select menu.

Grouping Select Menu Options

If the options in your select menu have a hierarchy, you should split them into groups using the optgroup tag. This allows users to find the option they want quicker by scanning the group labels instead of every single option. Users won’t be able to select the group labels. They’re only there to give the menu hierarchy and make scanning options easier. Accessibility users also won’t confuse group labels as options because screen readers can’t read them.

Using Select Menus for Navigation

Select menus are mainly used on forms, but sometimes they’re used for navigation. Some websites will use a select menu to allow users to filter or sort page content. When users select an option, they will navigate to a new page. This approach is accessible to screen readers only if users can tab to the select menu and move through the options with their arrow keys without navigating to a new page. The select menu should only navigate to a new page when the user hits enter. A small minority of screen reader users will have Javascript turned off. In order for select menus to work with Javascript turned off, you need to have a submit button next to it. Users will navigate to a new page after they select an option and hit the button.

Select Menus are Best for Forms, Not Navigation

Although you’ll see select menus used for navigation, it is recommended that you only use them for forms. Mobile websites will often use a select menu for their main navigation to save space. However, there are problems with this approach that affect usability, accessibilty and SEO.

At first glance, a select menu for the main navigation doesn’t cosmetically look right because it doesn’t blend in with the site design. It feels awkward because once you click it, you’ll get the spinning wheel used for picking options on mobile forms. Users have to tap the menu, flick their finger to the right option and press the “Done” button, which is a lot of work. Not to mention, the “Previous”, “Next” and “AutoFill” buttons aren’t even applicable in this situation because you’re not filling out a form.

Users won’t be able to use your select menu navigation if they have Javascript turned off. This is an issue for some screen reader users. A more accessible menu is one that opens the menu when the user tabs to it, and allows them tab through the different options. This can only work if the options in the menu are real links. This is also the same reason select menus don’t offer any search engine optimization benefits. If you want to optimize your navigation for search engines, avoid using a select menu for your navigation and offer users a dropdown menu with real links.

Stop Misusing Select Menus

There are a lot of misused select menus on the web. This happens when people lack a basic of understanding of how to use them. Now that you know, you can help put an end to it by making sure your site uses select menus the right way.

It’s time to wave goodbye to 2012 and welcome 2013. Before we usher in the new year, I’d like to share with you the most popular articles of the year based on pageviews. Next year I plan on writing even more articles and making them better than ever. If you’d like to contribute an article, I invite you to do so. Here are the top 5 UX articles of 2012 each with a short commentary of my thoughts. Enjoy!

1. Why Your Links Should Never Say Click Here

This article was hugely popular. And rightly so, because labeling links is so fundamentally important for a good user interface. Saying “click here” communicates to the user from the designer’s perspective, not the user’s. As the designer you want them to click “there”, but what the user is trying to do is carry out a specific task. A task-related action makes a far better link label than “click here”. I hope we see less and less of this malpractice in 2013.

2. 8 Reasons Users Aren’t Filling Out Your Sign Up Form

Signing up for a website is a bigger investment for users than you’d think. When users sign up, they are giving out their personal information to access a website. In order for users to do this, they have to trust you and feel that your website offers value. This article illustrates all the psychological barriers that holds users at bay from signing up. Get users to invest in you by showing them that you’ll protect their information, won’t spam them and won’t ask for unnecessary information upfront. Most sign up forms don’t make the effort to build up the user’s trust. Simply asking users to sign up is not enough.

3. How to Make Progress Bars Feel Faster to Users

The science behind this article was interesting. Most users don’t like to wait. But waiting is much more tolerable if users feel that an application is progressively loading faster. The way your progress bar moves and animates does make a difference to the human eye. By using the techniques presented in this article you won’t make your application load any faster, but you’ll give users the cognitive perception that your application loads faster than it does.

4. Why Scrolling is the New Click

This was a really important article for 2012 and will be even more important for 2013. Not everyone has caught on to the fact that clicking requires more effort from the user than scrolling. To click, you have to find the target, hover over it, click and wait for a new page to load. To scroll, you can do that with the mouse wheel or trackpad anywhere on the screen, and you don’t have to wait for a new page to load. I’m hoping in 2013 we’ll see more applications support the use of scrolling over clicking.

5. Why It’s Important to Sketch Before You Wireframe

Wireframing is a big thing in designing user interfaces. But sketching is a big thing in designing user experiences. You cannot skip sketching or wireframing. Both are important steps in the design process. Wireframing allows you to flesh out the details of the user interface more, but sketching allows you to develop the core concept of what users will experience from screen to screen. Sketching is a great way to get other people involved in the process. I enjoy sketching with my clients because I get a better sense of their ideas and what they’re trying to do. In 2013, I think more designers will see how important sketching is, and the difference it’ll make on their work.

The giveaway for three lifetime prototyping accounts of FileSquare has ended. Thanks to those who participated, and the people at FileSquare for making this giveaway possible. FileSquare is a simple way to make click-through mockups and collect feedback on your designs. Go to their website to try a demo, or download their free iPhone app from the app store.

The three winners of FileSquare accounts are:

The winners will receive an email on how to activate their account. Congratulations to the winners and stay tuned for more awesome giveaways.

FileSquare is offering three fully-featured lifetime accounts ($19/Month each) to UX Movement readers!

Why you should choose FileSquare

FileSquare is a simple tool to make click-through mockups, and collect feedback on your designs. It’s the perfect tool for web agencies, software houses, freelance developers and designers.

1) Usability testing with mobile app prototypes

Create click-through mockups to test the flow and interaction of your app design on mobile or web. By presenting a high-fidelity prototype, you can gain more insight and feedback on usability compared to low-fidelity wireframes or paper prototypes.

2) Makes working with freelancers and clients more efficient

Explain or discuss your latest design project with a freelancer or colleague and point out the problem from a screenshot of your work in progress. FileSquare makes working with freelancers or remote teams quick and easy.

3) Impress your clients and get approval faster

Impress your clients with high-fidelity prototypes and present designs that look “almost like a real thing”. FileSquare helps your clients understand your design better, and allows them to give feedback with annotations. No more vague comments about making the design “pop” – feedback will be specific, concrete and actionable.

FileSquare is easy to use

FileSquare might seem hard to use, but it’s not. Although we’ve developed over 10 powerful features, creating prototypes and getting feedback is still easy to do in three steps.

Step One

Upload your design files.

Step Two

Link up the files by clicking and dragging, and create your prototype.

Step Three

Test your prototype for mobile or web.

Not clear enough? Check out the video demo.

How you can win a free account of FileSquare

To win a free account of FileSquare, post your comment about how you would use FileSquare. For extra credit, follow @filesq_app and tweet about the product. We’ll choose three winners and announce their names in another post. Good luck!

If you want a hands-on experience of FileSquare, sign up and try a demo account today.