Get in Touch

How can we help?

Whether you are looking to redesign your site or simply refresh your brand, we are here to help!

Prefer to send us an email? hello@imarc.net

The Effectiveness of the Carousel

Posted by Sean Beck on August 23, 2013. Tagged: best practices, strategy, user experience

Most of us are familiar with the carousel, even if we don't know it by name. You may know it as a slideshow or a marquee, but they all have the same functionality. It's generally the first thing a user sees when visiting a site - a big block of rotating content that lies at the top of the homepage. The goal is to show users as much content as possible, while giving them a call to action.

Carousel Examples

These are just a few examples of carousels that iMarc has built for clients. We often include them in sites as they are a common request. But just how effective are these carousels at providing meaningful content and giving a call to action that the users actually take?

Why do we use carousels?

The use of carousels is derived from a need to give multiple pieces of content a center stage on the homepage. Many clients believe it is important to have the most important content lie "above the fold." Generally, this is driven by a need to satisfy multiple departments within a company wanting their content front and center.

From a developer's point of view they are easy to implement due to the abundance of ready-built plug-ins. The combination of ease-of-implementation and the demand from clients makes carousels a very popular tool in the web development industry.

What does the data tell us about carousels?

Unfortunately, most carousels have proven to be less than effective at engaging users. Erik Runyon has some great data reflecting this conclusion.

  • User engagement with the carousel ranged from 1.07% – 9.409%. The high end of the range was an outlier, with the majority of the carousel engagement being in 1-2% range.
  • Within that 1-9% range, the first slide in the carousel was clicked 54.57% – 89.1%.  Subsequent slides had engagement as low as 2.4%. This mean that slides were engaged by as low as .02568% of users. You can see why this could be a problem.
  • On the bright side, it seems randomizing the order of the slides helps with engagement. If the first slide is different everytime a user lands on the page, then the engagement should be spread out equally across all slides.
  • Using a carousel that automatically switches between slides raises engagement. The site that used an autoplaying carousel had the highest engagement, at 9.409%. It also had the highest engagement for subsequent slides, which ranged from 7.97% – 17.87%.  Both of these figures are significant deviations from the other sites tested.

What about iMarc specific data?

Recently, iMarc conducted user testing for the a client's website. After providing the users with a series of tasks to complete, we asked them if they could recall what the three slides on the homepage carousel were about. Zero of the testers were able to list back all three correctly, and the majority were only able to recall the first slide. Further, we found the less content that was on a carousel slide, the better. This is especially important if the carousel auto-scrolls - users must be able to quickly scan the content before the slide transition occurs.

What should we take away from this data?

Before I wrote this post, I was ready to throw out the idea of carousels all together. Having looked at the data, I still believe they are not very effective at engaging users. However, if you must use a carousel there are several paths to improvement.

  • Randomize the order of the slides for every user when they land on the page. This prevents the first slide from being the only content the user engages with.
  • Turn on autoscrolling. Many users have difficulty finding or using the navigation controls for carousels. This prevents them from ever seeing anything but the first slide.
  • Continually refresh the content in your carousel. Often times the carousel is used in a prime spot for promoting new material. If content is left to linger, it can become stale, wasting real estate that could be used more effectively.

Lastly, I'd like to point to Dave Tuft's post on "above the fold" which is a good complement to this post. The use of carousels and the emphasis on above the fold content for webpages are two common points of contention. It may be time to rethink both.

Conditional Widths Using the Adjacent Sibling Selector

Posted by Marcel Moreau on August 21, 2013. Tagged: best practices, engineering

All of the websites iMarc builds have administrative areas where clients can control their web content. One common content type clients like to control is photo galleries. When creating a photo gallery in iMarc’s CMS, a site adminsitrator has the ability choose what sections of the website to display it in. We typically output these into an aside. For example, a client creates a photo gallery of their staff’s annual outing. They would like to show this not only in their About section, but also their Community section because many local colleagues attended.

For a front-end developer, this unknown can be problematic. How can we ensure that our layout will handle one or two columns properly?

Layouts

Adjacent Sibling CSS Selector

I’ve found that using a CSS adjacent sibling selector handles this essentially as a conditional statement:

aside.primary + .main { margin-right: 220px; }

Is there a div.main following an aside.primary? If so, then give div.main a right margin to push it away from the aside. If there is no aside, then div.main will fill its parent with 100% width, as block level elements do.

This allows more flexibility for our main column. We do not need to set hard widths in our CSS based on section.

Browser support for the adjacent sibling selector is IE8+.

Here’s a demo via this fiddle.

Kill Two Birds With One Phone

Posted by Kevin Hamer on August 14, 2013. Tagged: mobile, technology

I drifted around the office and did a quick survey of what sorts of mobile computing devices people use in the office.

  • Everyone in the office has a smart phone. There were a few hold outs, but now everyone's running iOS, Android (or WebOS.)
  • 60% of us have tablets. Even more amusingly, aside from one person in the office, everyone with a tablet also has a laptop.
  • 90% of us have laptops. Whether an iMarc provided laptop or not, nearly everyone in the company has at least one laptop.

With smart phones only really becoming common place over the last five to six years and tablets (just counting web-capable devices with touch displays) really only showing up significantly in the last three to four, both have become staples of our culture and business. While laptops aren't new, even over the past two and half years we had at least four people convert from desktops at work to laptops.

The Ubuntu Edge campaign really got me thinking about device convergence. My phone is already my media player and my GPS, but we might not be that far away from it taking on even more roles.

Attempts at Convergence

The Ubuntu Edge is hardly the only device trying combine phones, tablets, and PCs together. Here's some current examples of how companies are trying to make devices that function in more than one role.

Devices Covering Multiple Roles

device overlap

Making Phones Bigger (Samsung, Sony, and HTC)

While this certainly isn't limited to these three companies, these three stand out. HTC is up to 5.5", Samsung is up to 6.3", and Sony just came out with a 6.4" screen device. With small tablets really focused around 7–8", the gap is practically nonexistent.

Keyboard Optional (Microsoft and Lenovo)

While again, not limited to these two companies, both Lenovo (Thinkpad Helix) and Microsoft (Surface) have devices which have removable keyboards, to either convert a laptop to a tablet or a tablet to a laptop.

Putting a Phone in a Tablet (ASUS Padfone)

This isn't a new product, but its certainly a rarity to see in the wild. The ASUS Padfone Infinity for example, came out this year as a phone with a "tablet dock" to provide a bigger screen when you want it. The Padfone is Android 4.x based.

A Phone With a Laptop Dock (Motorola Atrix)

The Motorola Atrix also hasn't really taken off, however the "laptop dock" for the phone makes it a fairly unique phone-laptop hybrid.

Phone with a Desktop OS and Specs (Ubuntu Edge)

The Ubuntu Edge is trying to make a big jump forward in device convergence by getting people to literally buy into the idea of a phone that they can connect to a keyboard, mouse, and monitor to use as a desktop.

Arizona Society of CPAs Goes Mobile!

Posted by Katie Desmond on August 7, 2013. Tagged: clients, design, mobile, user experience

We are thrilled to announce that we have just launched the new mobile site for the Arizona Society of CPAs (ASCPA)! We began working with ASCPA in 2010 when we designed and developed their full website, which is mobile compatible. However, over the course of that time their mobile traffic tripled. Being the forward thinking innovators that they are, ASCPA was very interested in making sure it was providing the best user experience to its members on-the-go.

ASCPA Mobile

In order to best serve their mobile audience, we took a step back and first determined what kind of mobile presence ASCPA needed. There are a few different approaches that we could take to deliver the best results, including:

  1. We can design and develop the site using responsive design techniques which allow the full site to be displayed and optimized whether a user accesses the site from a smartphone, tablet, or the desktop.
  2. We could design a mobile specific site which provides streamlined content to users based upon what information they are accessing from a mobile device.

For the ASCPA site we took a hard look at the Society’s Google Analytics and recommended a mobile specific approach. The ASCPA site is extremely robust but we found that most mobile users were looking for job listings (29% from 1/1/12-12/20/12) and course information (30% from 1/1/12-12/20/12) from their phone. Therefore providing streamlined content to users with links to the full site to access more information was our recommended approach.

The robust mobile site features course information allowing users to browse upcoming courses, browse categories, or search by start date and keyword. The job posting section enables users to scan job opportunities by title and date posted, and view the selected job description including links to the company’s website and information about how to apply. Knowing that users on the go often are looking for directions and contact information the new site also features a link to Google Maps and the Society’s address and office hours.

It was a great project and we can’t wait to start tracking the results!

Calm before the storm

Posted by Robert Mohns on July 31, 2013. Tagged: culture

This week is Yankee Homecoming, a week and a half long summer festival in Newburyport. Fried dough, live bands, craft shows, kids activities, a Michael Jackson impersonator, tarot readings, ice cream, and people everywhere… The cacophony can be deafening. (I'm pretty sure it was a major factor in Nils leading the charge to open our Silicon Valley office.)

As I walked to the office this morning, I was struck by how peaceful it is then, as the vendors were just opening up their tents in market square and getting ready for a long day.

Yankee Homecoming, Market Square, Newburyport, MA 01950

Bonus photos

Later in the day, I noticed the Michael Jackson impersonator outside my office window:

Michael Jackson impersonator at Newburyport Yankee Homecoming 2013

Obligatory cute kid photo:

Walking into Market Square

Leaked Culture Reel Photos

Posted by Jared Laham on July 26, 2013. Tagged: creative, culture

imarc_reel

We have just wrapped on a video shoot here around iMarc East's office and thought, since celebrities leak photos of themselves, we could give you all a peak at some behind the camera shots. We had a blast working with Off The Front Productions on this video and can't wait to share it with you all soon. Stay tuned!

jeff_interview

jared_makeup

Some of us obviously had more beautifucation needs than others and were good sports about getting makeup applied for their cameo. Yes that beard is real, I swear.

filming_outside

When we were out filming on Inn street, some pedestrains passing by asked if we were filming an episode of cupcake wars (there is a cupcake shop next door to our office) or a new Mark Wahlberg movie. 

Action shots compliments of Tim Gurczak.