NEW NAME. SAME EXPERTISE.
We changed our name! After 14 years of creating award-winning digital products & services, it’s time for a new identity that better reflects the human insights-driven, digital customer experiences we create.
VISIT OUR NEW SITE
NEW NAME. SAME EXPERTISE.
We changed our name! After 14 years of creating award-winning digital products & services, it’s time for a new identity that better reflects the human insights-driven, digital customer experiences we create.
VISIT OUR NEW SITE

AIAIO: Our Blog

AIAIO: Our Blog

The pulse and reviews of Alexander Interactive

Archive for the ‘UX’ Category

How Television Shows Can Ensure a High Quality Experience for Viewers

Whoever said television is dead, obviously hasn’t taken a cold, hard, look at a Roku… or an Apple TV, or an Amazon Fire Stick. Television isn’t dead, it’s evolving; moving increasingly fast in the direction of online, on-demand, broadcast. Thanks to streaming sites like Netflix, HBO Now, and Amazon Prime, binge watching has allowed TV fans to unwind anywhere, anytime. Yet, not only is it the act of watching 10 nonstop hours of Game of Thrones pleasurable, it’s also downright engaging; starting before the show begins and even after it ends. So much so that binge watching, or watching any amount of television at all, is no longer a means to an end for boredom, it’s a chance for show runners to engage with viewers like never before.

According to a survey by Conviva, a video optimization provider that was reported by Techcrunch, more than half of today’s binge watchers are unlikely to return to a series they’ve stopped watching due to a negative experience. Whether it’s from poor resolution, frequent interruptions, or an unavailable episode/season for long periods of time, the well over 100 million people binge-watching want just one thing: a quality watching experience. But how can television shows provide that, especially when they’re not in charge of what (legal or illegal) streaming sites they appear on?

There is only one answer: television shows need to focus on their viewers at all times, throughout every episode, across all channels. Seems difficult… until you realize that some shows have already achieved huge levels of success by doing just that.

Quality television requires a fan base — one that’s dedicated to the overall storyline, its characters, and the behind-the-scenes team that make it all happen. In return for their continual support, show runners often give something exciting back to their fans. They begin to focus on the wants, desires, hopes and dreams of their viewers, and sometimes actually implement their ideas into the storyline. This doesn’t mean by any means that every show has to have a main character like House of Card’s Francis Underwood that literally talks to the viewer, but it’s not like that type of dedication hurts viewership…shows just need to make sure they don’t go too far.

“At a certain point, as always happens in Hollywood or culture in general, a set of superficial things come to stand in for quality,” says author of ‘Difficult Men: Behind the Scenes of a Creative Revolution’ Brett Martin for the New York Post.  Essentially what Martin is saying here is to never forget your audience’s standards. It’s inevitable that some viewers are going to get bored or disconnected and leave. If every show had the same viewing ratings as its premiere date, than no one would win an Emmy. But what’s important to remember is that although some viewers will leave, those that stay are the heart and soul of any show. Honing in on those users will allow the show to thrive – living a long and healthy life (looking at you, Law & Order: SVU, currently on season 18). But this type of lifestyle won’t last long without being shared.

Today, shows that see the light of day (aka a second season), take their experience to the next level… well, levels. Quality television shows are designed for shared experiences. Taking the action off screen and into the real world is what sets apart B-list shows, from A-list winners. Most recently, the #1 spot on the leaderboard goes to USA’s Mr. Robot. The mysterious drama revolving around an underground hacker society has gone to extreme lengths to tie in the viewer. From tweeting this seasons first episode a full 24 hours before it’s release (then deleting it shortly after), to launching a VR narrative experience at Comin-Con, to even secretly relaying messages in the form of QR codes on screen mid-episode, Mr. Robot  is the epitome of the total television experience for viewers. But if Mr. Robot is the King, The Walking Dead is quite obviously the Queen.

Debuted on AMC in 2010, The Walking Dead has some of the most dedicated fans of any television show. Viewers talked about the series so frequently that the network created a second show just to talk about it: Talking Dead. Various other series have too incorporated an after-show for fans to further revel in the shocks and rumors of each episode (Mr. Robot just debuted the after-show Hacking Robot, and Bravo’s live after shows often lead to some intense catfights thanks to the Real Housewives). But to push the experience even further, Universal Studios Hollywood in Los Angeles, California created a Walking Dead Attraction, filled with professionally trained zombies. Yeah, it’s that serious.

So for other shows to catch even a bit of the viewer wave Mr. Robot and The Walking Dead are riding, they need to stay focused on the user across all digital channels and engage where their viewers do. Television isn’t on it’s last leg, but the way viewers watch it just might be. It’s time for shows to move past the realm of ‘the box’ and into the real world- where everything is shared. Television is in the big leagues of UX now, will your show be ready?

UX

Selecting Tools for Moderated Remote User Testing

In my previous article, I spoke about how to prepare yourself for a moderated remote usability test. The tools you use while conducting a remote user test are just as important as being prepared. This article is meant to highlight my experience with tools I’ve used in the past for remote user testing.

Using Ethnio for Recruiting and Paying Incentives

Ethnio is a tool that allows you to create a screener, schedule participants and pay them for their time. When you create a screener, you place their JavaScript on your site. They also provide a mobile-friendly direct link for you to place in your Facebook or LinkedIn ads.

Once the user fills out the screener you can use Ethnio’s template emails to schedule the prospect’s test. Ethnio provides a way for you to show users the open testing spots for their choosing. After conducting your user test, you can automatically send the participants their gift cards by simply inserting the participants email and the amount you’d like to pay them.

Ethnio was quick, convenient, and gave us access to the actual users that use the site, not professional user testers.

Something to keep an eye on are their template emails. In the past, we had to contact each participant on our own since we wanted to send them specific information. Despite this, Ethnio is perfect when it comes to recruiting qualified participants quickly.

Prototyping with InVision

InVision allows you to share functioning prototypes with the participant easily and quickly. It helps simulate how the actual site will work. InVision gives you so much control over your design that you are able to make changes on the fly even in between user tests based on the insights you received.

InVision allows you to quickly create hotspots and hover states on your wireframes so the user can go through an experience. When prototyping for user testing, it’s important to make sure the user can carry out entire flows.

Presenting the site in a realistic context is key. It makes it more difficult to get insights when you’re asking the user to imagine what would happen if they explored a specific area of the site. It also helps to turn off the hot spot hinting and commenting while testing. That way you aren’t giving any misleading direction on how to navigate through the site or giving the participant access to view comments between team members. Below is a screenshot of how to share your InVision prototype with your participants.

Prototyping with invision

Remote User Testing with GoToMeeting

For a recent user test, we wanted to be able to view the participant’s screen and record the session so we thought GoToMeeting would be a good option. In the past we’ve used join.me but we were having some issues with the audio and the screen sharing.

GoToMeeting is simple. The only thing the participants need to do is install the GoToMeeting Chrome plugin and from there all they need to do is access a link for their testing session. It’s easy to record our session and there’s no lag time between what the user is looking at and what I see on the screen which is an issue we had with other meeting software.

GoToMeeting allows you to view the user’s reaction and what part of the site they are exploring simultaneously. It helps gather behavioural insights as if you were in the room with them. You can ask participants to share their screen and if you want to view their actual facial reactions, they can use their webcam.

GoToMeeting Screenshot

These tools allowed me to moderate the test and experience the site with the user. I do recommend these tools but I would also explore other ones out there and see what is best for you. I also recommend trying these tools out before your testing sessions in order to make sure you know how to navigate them flawlessly. Once you do, it becomes easier to moderate and to keep your focus on the testing sessions.  

 

Uncategorized

How to Run a Flawless Remote User Testing Session

A guide for planning and running a moderated remote user test

There are plenty of ways you can run a usability test. Most people would advise you to do them in person; others may advise you to use a service that will automate the test. This may not always be an option for your project, so running a moderated remote usability test is the next best thing!

Remote testing can lead to incredibly helpful insights. You get to experience user’s reactions on the fly; and access your own customer base—not a panel of professional user testers. Just like in-person testing, you need to prepare ahead of time, and that prep work is a little more difficult since technology is involved.

This article is meant to help you prepare for a remote user test by highlighting the key actions to consider:

  • Recruiting your own participants
  • Technical check-Ins
  • Scheduling
  • Managing incentives
  • Getting to know the user

There will be moments where participants may back out at the last minute, you’ll run behind schedule, or your software won’t work they way you hoped it would. That’s okay! Because this guide will prepare you for anything that gets thrown your way.

 

Recruiting Your Own Participants

Before you can run a usability test you need to find qualified participants. There are several ways to find the right candidates for your test: use a professional recruiter; recruit from your email subscribers; asking your Twitter and Facebook followers; or recruiting customers directly from your website.

For a recent user test on a client project we chose to use Ethnio, a remote recruiting tool,because they had a very specific user base and loyal customers that we needed to target. Ethnio allowed us to place a screener on the client’s website and ask questions that would help us rule them in or out.

When determining whether or not a participant is qualified for the test, ask yourself the following questions when evaluating their responses.

  • Does the participant have anything to do with the development or design of what you are testing?
  • Do they represent your personas that you developed or a target audience you are trying to reach?  
  • Are they already familiar with the website and subject matter?

Once you have your participants ready you should plan to conduct a technical check-in.

 

Preparing for Technical Check-Ins

Before you run the usability test I recommend conducting a technical check-in prior to the big day. Asking a participant for an extra phone call prior to the session can be seen as a waste of time. It’s important to remind the user why they signed up and give some details so they know what to expect during their testing session.

In order to make the testing event successful we know we need to do a 15 minute dry run a few days before the test to check the technology. We adjusted the language of our email to let the participant know what we expected of them. Here is an example email template we used for a recent test:

 

Hello [Name],

Thank you for signing up to participate in our research for X website! We can’t wait to hear your thoughts about what we’re working on.

We will reach out separately to schedule your 60 minute research session on Tuesday 12/8. During this session you will explore our site and get a $100 Visa gift card for your feedback.

But first, we wanted to do a quick technical check-in with you in order to test the software we’ll be using for the session. Are you available for a 15 minute technical check-in on Friday, 12/4 between the hours of 9:00am EST – 4:00pm EST?

There are a few things you will need to prepare for this tech check in.

  1. We’d like to make sure that you have access to a web browser like Google Chrome. If you don’t have access to it already, please download it before our call here: https://www.google.com/chrome/.
  2. Once you have Google Chrome installed, please download the following extension so [moderator’s name] can view your screen: We will be using GoToMeeting to share screens. You can go to this link and click “Add to Chrome” to install the extension.

Thank you for your time and feel free to ask any questions.

Best,

[Moderator’s Name]

 

Conducting the Technical Check-Ins

For this testing session we used GoToMeeting to share and record screens. Many of the users weren’t familiar with GoToMeeting. We needed to make sure they had the proper plug-in installed and knew how to share their screen. Taking 15–20 minutes to do this saves time and decreases the chances of things going wrong during the actual testing session.

For those who didn’t end up doing a technical check in, we spent a lot of time trying to make sure the audio and screen sharing was working properly. There were times GoToMeeting just kept freezing or the user couldn’t hear me. During another session, a user didn’t realize that they needed to be on their computer in order to walk through the prototype. Running a technical check-in helps avoid these issues.

If you plan on using GoToMeeting (GTM) for user testing, you can follow these steps during your technical check in.

  1. A few minutes before the scheduled technical check-in time, open the GTM desktop app and log in to the meeting. You have to manually enter the meeting number.
  2. Dial into the audio via the phone then put it on speakerphone and mute the phone to dial-in your audio code. Remember to un-mute when your user gets on the line.
  3. You can see when your user enters the meeting as their name will appear in the participant list in the GTM app. You can also see whether they are connected to the phone or computer audio by the icon next to their name in the app.
  4. After thanking the participant, walk them through the screen share setup if they haven’t connected already.
  5. Press “Change Presenter” in the GTM desktop app. Normally, this will prompt them to download the desktop app, but if they have the Chrome extension installed, they won’t have to. Remind them to share their entire screen, not just the GTM screen.
  6. If you want to also see their face and they’ve agreed to using a webcam, direct them to the camera icon in the GTM in-browser view.  
  7. Make sure their web cam feed and their screen are visible on your desktop.
  8. Send them a URL via the chat function (something neutral like google.com) to make sure they can find and use chat. This way you’ll be able to send them links.

Now that you’ve done your technical check-ins, you can focus on scheduling the actual user testing sessions.

 

Scheduling

You should dedicate entire work days to user testing. That way you get in the flow of testing and won’t get interrupted by other tasks. For one of our projects, I dedicated two days to user testing with four sessions each day. Each session was an hour and I added time in between each session. When scheduling tests it’s helpful to give yourself 15–30 minutes in between sessions for you to debrief with your team. Take this moment to review your notes and figure out if there are any questions you would like to ask differently or explore different task during the next round of testing.

Since you are using an hour of someone’s time to conduct research, it’s important to provide an incentive to show your appreciation for agreeing to participate in your study.

 

Managing Incentives

Ethnio allowed us to use their site to deliver Visa gift card codes to the participants. When it comes to determining the value of the incentive, consider the value of the insights they will give you and how hard it was to recruit participants. If you know that the project you are working on has a very specific and unique user set, you may want to give them a larger incentive. Typically, we like to provide an $50 incentive for 30 minutes; $100 for 60 minutes. Don’t forget to include that incentive in the screener to attract participants.

 

Get to Know the Participants

The participant is going to be nervous. They have to speak to a complete stranger, answer non-stop questions and be recorded for an hour. In order for them to be comfortable and truly say what’s on their mind, the moderator needs to move the conversation past the typical “good morning” and “how’s your day going?”

Have a pre-interview script ready and ask them about  their experiences with the site. Get to know why they were on the site in the first place. Some questions we like to ask are:

  1. Name
  2. Age
  3. Occupation, if relevant
  4. How they discovered the site?
  5. What were they trying to do on the site? Read an article or purchase an item?
  6. What is their level of knowledge of what the site provides?
  7. How often do they go to the site?

Then ask them questions based on their answers. If they mention they were purchasing a specific item, ask them why or for whom. Following up based on their answers can help you figure out what experience the user was having on the site. From there on it becomes easier to walk through the prototype, make a few jokes and really hear about their experience with the design.

Once you follow these steps, and get through the first hurdle of getting to know a participant, you should be ready for testing. Following all of these steps will make your remote user test go smoothly. Now all you have to focus on is developing your script to facilitate the conversation. Good luck and get to testing!

 

UX

Ai Hosts a Design Roundtable with SheSays New York.

SheSays

On May 28, Ai hosted a Design Roundtable Event in partnership with SheSays .  SheSays is an award-winning, global creative network that organizes events and provides mentoring and recruitment services to enable top females in the industry help others navigate and advance in their careers.

The topic last Wednesday was one near and dear to everyone at Ai: BALANCING SPEED, EFFICIENCY AND DESIGN INTEGRITY.  It was an honor to moderate the discussion and hear from our impressive panel of speakers including Jenine Lurie (Found of Disruptive Experience), Jaclyn Burgan (Senior Interaction Designer at Turner Broadcasting) and our very own Design Lead, Christina Goldschmidt.

A special thanks to Amanda Jaskiewicz and Alessandra Lariu of SheSays! The energy, enthusiasm and perspective shared was incredible– and we met a lot of talented new friends too.

Ai

Redefining the Post-Mortem Meeting

Thinking back to my first time seeing the meeting subject title ‘Post Mortem for (insert project name that went horribly awry)’ pop up in my Inbox …I remember hitting ‘Accept’ somewhat reluctantly. My mind quickly concocted a visual of a mock funeral for said project, the people there didn’t really like the project, but they attended anyway…out of respect. Afterward they talked about a few good qualities, but mostly complained about it before going back to business as usual.

Yes, a little strange maybe, but that odd visual story in my head proved to be accurate for most Post-Mortem meetings attended in the years that followed. Different agencies, different projects, but they all usually played out in the same way. Typically, one of these meetings would be scheduled only after a project that was riddled with issues, blown budgets & missed deadlines. As for projects that went tremendously well? No need for a Post-Mortem, we’re awesome, go team!

Changing the Perception

Unfortunately, these after-the-fact meetings usually have a negative connotation attached to them. People attend with their backs up, ready to defend their role on the project, air grievances, and place blame elsewhere. Luckily, it doesn’t have to be this way. When it comes down to it, team members want the projects they take part in to be successful. Changing the perception of how a Post-Mortem is perceived is crucial to future success on projects with that specific client, and your company’s process as a whole. Enacting this change is done by focusing on the holistic view of how your company evolves its process over time, not just what they should have done in hindsight on that one project.

Below are the tenants that should always be top of mind for anyone planning on conducting a Post-Mortem successfully. If you stay true to these items, your team will start to view these meetings as a beneficial aspect of the project and you will see the improvements in future endeavors.

1) Keep the meeting structure simple

There are quite a few meeting outlines that exist out there, but they all really break down into five main components. At Ai, the following structure for Post-Mortem meetings has proven very successful.

• What has been working?
• What has not been working?
• What was painful but necessary?
• What did you learn about working with this particular client?
• Any recommendations that we should implement into future processes?

This breakdown requires the team to begin with positive aspects of the project, and end with forward-thinking process improvement ideas to help set an optimistic tone and shift the perception away from the negative. It’s tempting to gloss over everything but that pesky second bullet, but it is so important to make sure all aspects – good and bad – are discussed.

2) Ensure the attendees are prepared ahead of time

By nature, Project & Account Managers are organized. Keeping the client happy, the projects successful, and the team working efficiently is par for the course. This includes getting your Post-Mortem meeting outline in order. But these goals are not always the main focus of the team members executing the deliverables. They are focused on their daily tasks at hand, whether it involves getting a Strategy Recommendation out the door, or the third revision of creative done in time to hand off to Technology. Basically, people are busy and this could fall low on their list of things to get done.

To sidestep any probable delay in receiving feedback, send out a list of questions to the staff at least one week before the meeting. Put a reminder on their calendar, asking them to send responses by a specific date. This forces team members to really think about the answers. If you ask people to physically type out their feedback, you will find the content will be more pointed & specific. People will instinctively recognize in their bulleted list what is legitimate, and what is just whiny.

3) Time It!

The recommended time for a Post-Mortem is no longer than 1.5 hours. Sometimes this can be difficult, especially if there are too many missteps to count. The organizer can sidestep this by identifying overlapping problem areas received in the initial feedback and integrating them into one focus point. Each bullet point has a specified time allotted and, once you reach the maximum time for that item, assess whether it is necessary to schedule a follow-up meeting.

4) Introduce the Mini-Mortem

A few months ago, a PM was trying to see what she could do to correct a list of growing issues on a hectic project…then a light bulb went off. Why wait until after a project has come to an end to course correct issues and highlight achievements? By placing a ‘Mini-Mortem’ at the halfway point of the project, the team as a whole was able to identify problem areas and pain points before the project is over. By providing them a means to voice these concerns and call out things they feel are working well, it allows the Account Managers ample time to refocus efforts where needed. Again, it’s important not to ignore the positive aspects, this is a great time to leverage what has been working well and build upon it.

5) Apply Lessons Learned To the Next Project

When Post-Mortem meetings occur after a project, often times whatever learnings are captured tend to be quickly forgotten. The information shared between coworkers during these meetings is on some level remembered, and corrections of previous issues happen organically, but this isn’t enough. At some point people will roll off and new members will transition onto a piece of client business. If tangible steps aren’t taken to capture the valuable information shared during a Post-Mortem, the ever important ‘Next Steps’ will never be implemented. When mistakes aren’t corrected, these meetings tend to be viewed as a time-suck. Why bother meeting if management isn’t going to fix it the next time around?

When a new piece of work gets underway, make sure there is time allotted to review the previous Post-Mortem notes along with the Next Steps from that meeting. Below is an example of one item that showed up on the whiteboard of a Post-Mortem, and it’s Next Step:

Issue:
“ Having multiple work-in-progress meetings scheduled with the client each week was great in that we got buy in on our ideas throughout the process, but towards the end of the project we needed less meetings and more time to focus.”

Next Step:
PM to check in with the creative team each Monday, at this time we will assess what WIP’s are needed that week. We will also shift the 9:00am scheduled time to 5:30pm to allow creative to be ready.

A Happier Team

By implementing the steps above, you will begin to shift the overall attitude around how the Post-Mortem meeting is perceived by your coworkers. So start changing the perception, assign next steps and hold the team accountable. Next time a new piece of work rolls around, reserve a slot of time to refer back to the items that came up in the last Post-Mortem. Make sure to highlight the good and bad, although correcting mistakes is crucial…touching upon what the team excelled at will boost morale and remind everyone that ‘it wasn’t all bad’.

And lastly…can we please change the name of this meeting?

Business

UX Critic: Highrise and LinkedIn

I am an unabashed fan of 37 Signals’ Highrise contact management tool. For concentrated, straightforward sales and CRM, it’s an ideal web app. Between notes, contact information and useful task reminders, it’s a key part of how Canopy does business, and by and large it’s a delight to use.

Today Highrise rolled out LinkedIn profile integration, a nice idea that they say has been regularly requested. But the implementation is cumbersome and disappointing to the point where I’m probably not going to use it.

Here’s why:

It’s reactive. LinkedIn profiles are only added to Highrise profiles once the user has pasted the appropriate link from LinkedIn into a text field in the contact’s edit screen. There’s no dynamic list generation, no scanning the LinkedIn database, and more importantly, no recognition of post-login URLs. Which means…

It’s cumbersome. For each contact, I have to go to linkedin.com, find the right individual, click through to his or her full profile page, and copy the public link off the web page to add to Highrise. Grabbing URLs out of my status bar won’t work, because Highrise can’t reconcile them. (I suppose one could just find public profiles via Google, but that doesn’t seem practical at all.)

It's David! No, it's Reid!It’s account-reliant. Despite the need to use public profile links, Highrise and LinkedIn require users to log into both systems to coordinate data. But:

It’s not relational. Highrise doesn’t care if you have connected with the people whom you access on LinkedIn-via-Highrise. It also doesn’t care about your accuracy. I had no problem, for example, dropping LinkedIn CEO Reid Hoffman’s LinkedIn profile onto my own Highrise contact page. This doesn’t much matter when it’s being manually updated, assuming the user is careful, but it’d sure be nice to hit the right David Wertheimer by cross-referencing company, title and location data between the two services.

This seems like a great idea missing some key integration points that would make it as practical and useful as the rest of the system.

UX

Amazon Redesign: A Small Step Towards T-Commerce

When it comes to e-commerce there is no bigger name than Amazon.com. So when the world’s largest online retailer recently began rolling out a redesign to a small segment of its users, there was no doubt it would make waves.

A recent Wall Street Journal report speculated that the new site foreshadows the debut of a new Amazon tablet, citing the new site’s simplified feel and larger buttons. But when it comes down to it, the redesign still falls short on some t-commerce fundamentals.

Navigation

The new homepage has a much cleaner, more modern look. The new silver navigation and heavy use of white space definitely feel more up-to-date, taking cues from the Dieter Rams/Jonathon Ive school of desaturated minimalism.  This change emphasizes elements like promo images and the count of in-cart items, but raises an interesting challenge for the strength of Amazon’s brand as the formerly omnipresent blue and orange color scheme has been relegated to near nonexistence.

The majority of the redesign efforts seem concentrated in the top navigation, which has been simplified and improved with larger buttons. The biggest improvement UX-wise comes in the form of a navigational flyout that swoops out of the “Shop by Department” button. The menu’s bold black text on a white background look great on both monitors and tablets and the grey text blends in enough to not be obtrusive. The drop-down also includes the sexiest feature of the redesign with its new images hanging out of the menu itself over the page behind it.

Another nice touch on the new navigation bar is the shopping cart button that shows products (with images) in customer’s cart upon being clicked.  This is very UX and t-commerce friendly in that it lets users peek at their cart without interrupting the shopping experience.

Site Search

One of the biggest UX changes for the site as a whole is the new search bar, which takes center stage as the focal point of the improved top navigation. For a retailer with products as varied as Amazon, making the search the primary focus is in many ways ideal for a t-commerce interface. The first thing users will notice is the new drop-down that appears when clicked/tapped, displaying daily deals with accompanying images. This is a great use of an “Easter egg” to save space on the page below.

The search functionality has room for improvement in its predictive suggestions. The selectable terms on the type ahead search drop-down are still quite small, making this feature is among the least tablet friendly aspects of the new site. Not only are the search terms too small to tap (especially if you have big fingers), but there are too many of them. On an iPad the type ahead drop-down falls underneath the on-screen keyboard. A more user-friendly solution would be to give fewer options with larger clickable areas., not unlike the daily deals drop-down.

Hero Images

The redesign’s most drastic changes are immediately below the top navigation. With the former category navigation buttons on the left consolidated to the top navigation’s drop-down menu, the page takes on a two-column layout that is very thumb-friendly for tablet users.  Everything seems clearly and intuitively divided into buttons that can be easily pressed with thumb or the other.

The main hero image has been completely changed with the new look. The old Amazon has one hero image touting the latest Kindles. The new hero area has two stacked promos with slider navigations that allow for 13 total options. While one hero may not have been enough for Amazon’s merchandisers, 13 is a bit much to digest,  resulting is a sleek and navigable but unrefined hero scheme.

T-Commerce Shortcomings

When put into portrait orientation on a tablet, the new site is just as unusable as the old design. Throughout the site a vertical format yields pages too wide to be read or navigated without zooming in, resulting in minuscule pricing values, unreadable reviews, and effectively invisible calls to action. An ideal solution would be dynamically flexing this layout to pare down some of the horizontal elements when in a portrait orientation (e.g. dropping a row of five suggested products to three).

Another t-commerce question mark hanging over the new Amazon is speed. In Ai’s testing, page load time was significantly slower on the new site. This could be a real barrier to entry for some tablet users. The new promo images are undoubtedly pretty, but taking longer to load could end up hurting the bottom line.

To be truly tablet friendly, Amazon will also need improved product pages. Seemingly untouched by the redesign, the current product pages force tablet users to squint and swipe as they poke around for buttons taking them to some of their most desired links. A product page redesign (which could be just over the horizon) could solve this by corralling cluttered text into concise links and collapsing unnecessary information out of sight.

Improving T-Commerce UX

While the new design is definitely a welcome update, it definitely not a huge improvement in terms of optimizing the site for t-commerce. The minimalistic design makes for stronger visual cues in important areas of the site, but if users need to zoom in on areas they can’t see those cues can quickly end up out of view.

For true t-commerce optimization Amazon should revisit the site’s user-interface on a tablet device. Making sure that tappable areas can accommodate larger fingers by limiting the amount of options displayed.

Using CSS3 media queries to adjust the layout of the site’s product pages and increase the tappable area within faceted navigation or mega drop-downs would also vastly improve the user experience.

Complex pages also could be reworked by moving elements around the page to match Amazon’s business and merchandising requirements by, for example, move product reviews above the fold on a tablet to emphasize user-generated content.

Truly committing to tablet UX also includes a commitment to gesture-based navigation where applicable, like giving users the ability to swipe and drag hero images to cycle through them.

The new Amazon.com is slightly more tablet friendly, but it is far from an optimal solution. The redesign is definitely a move in the right direction for t-commerce, but only a half-step.

For more on Ai’s approach to t-commerce, read Alex Schmelkin’s article “Make Way for T-Commerce”  in E-Commerce Times.

Written with contributors Ed Samour and Seth Whitton

Ecommerce

Make Way for T-Commerce

Originally published in E-Commerce Times.

Tablet commerce may be the new kid on the block when it comes to online retail, but as a recent Forrester research poll indicates, many online retailers are seeing that half of their mobile commerce transactions come from tablet devices.

Moreover, 7.6 percent of the U.S. population will be tablet users by the end of 2012, according to eMarketer estimates. So how should online retailers take advantage of tablet commerce? And should they do so right now?

It Starts With Your Existing Site

The key to implementing a successful tablet commerce (t-commerce) strategy starts with a retailer’s existing desktop site. Customers are already shopping with their tablets on traditional retail websites — but sites that were not designed for tablets may run into issues.

User interface elements that proved successful on the desktop may not work on a tablet. For example, mega-dropdowns and mouse “hover” behaviors do not translate well to a finger-based browsing experience: Users don’t generally drag their finger around the screen looking for hotspots.

Users Deserve a Tablet-Optimized Site

Tablets are different from mobile devices and should be treated accordingly. A troubling early development in t-commerce had a number of retailers redirecting tablet users to their mobile-optimized sites. This was a mistake, and is largely being replaced with retailers deploying tablet-optimized experiences.

There is a huge difference in screen real estate between tablets and mobile, and a t-commerce site should therefore have more in common with a traditional e-commerce site than an m-commerce one. The fact that many mobile sites were delivered first means that many retailers are not taking advantage of the larger screen real estate that is available on a tablet.

The t-commerce site should still maintain a sleek user interface while delivering substantially more information than an m-commerce site. As with mobile, the quality of content delivered must be commensurate with the quality of information on the company’s e-commerce site so that the user experience is consistent.

Moreover, the interface of a tablet is different than that of a desktop site. On a tablet, one doesn’t track clicks and mouse trails, but instead must focus on “smudges and swipes.” Multitouch functionality should be integrated into the site in appropriate areas, including 360-degree product photography spins and swiping through long product lists.

HTML5 Enables Rich Interactions

Technological developments have opened up possibilities that did not exist years ago. HTML5 offers site developers the ability to create superior, smooth user experiences, and it enables other must-haves for tablet sites, such as auto-suggest search bars and one-page checkouts.

At the same time, these technological advancements can pose significant challenges to retailers looking to develop a tablet initiative. For example, it is widely accepted that Apple(Nasdaq: AAPL) and its iPad are dominant in the tablet ecosystem.

As a number of retail sites still use Flash for certain interactions (which Apple does not support), the necessary migration toward the use of HTML5 technology can mean extra costs and delays.

It’s Not Just the iPad

Another factor to keep in mind for a tablet initiative is that even though the iPad is the dominant player in the industry, there are many other tablets, including the Samsung Galaxy, RIM PlayBook, Motorola (NYSE: MOT) Xoom, and others that run on Google’s (Nasdaq: GOOG) Android platform.

While they comprise a relatively small segment of the market, these other tablets certainly warrant additional cross-device testing of a retailer’s website to ensure compatibility.

Establish Goals and Watch the Analytics

As with all digital initiatives, analytics should be watched closely. Retailers must monitor the conversion success of their websites with tablet users, finding areas that under- or over-perform relative to their desktop-based shoppers.

Do your tablet users browse more then they search? Is this different behavior than desktop users? Just like on the desktop, testing is key. Retailers should experiment with multiple shopping experiences, allowing consumer usage patterns to shape the future of their tablet offerings.

It is also important to establish revenue goals for a tablet initiative. Tablets, despite the huge boom in recent popularity, may not yet be ubiquitous enough to warrant a huge initiative for all retailers.

Adoption of tablets is expected to increase 400 percent by 2012, based on eMarketer estimates, but it is important to keep in mind that this is a global statistic for a niche market.

Some may feel the need to be there first, others may want to wait and see. What is certain is that t-commerce is rapidly growing, and it must be considered an important piece of any online retailer’s digital strategy.

Happy swiping!

UX

The Evolving Web: Multi-Screen Patterns

At 7:15 the alarm on my iPhone goes off, notifying me that it’s time to wake up. I briefly check my email, waiting a bit for my mind to snap out of its drowsiness, and then pull myself out of bed. Today the TV in my bedroom stays off, but I flip on the set in the living room to catch the headlines and weather while I make some coffee. Next, I sit down at my computer to fire off a quick email I forgot to send out the night before, sync up the news articles on my Kindle for the commute and head out the door to work. I see seven different screens in my first hour; three more are waiting for me at my desk at work. This is my typical device-filled morning.

Our current technological environment plays host to thousands of digital devices. People move from one screen to another, increasingly expecting their gadgets to integrate into a consistent experience across all platforms. Because of this it’s becoming more important that businesses, app creators, information architects, designers, and code slingers take responsibility for providing their clients with strategies for a multi-screen playing field– thinking beyond the smartphone to other devices. But solely creating several applications and scenarios for each device won’t cut for much longer. It’s time for us to start thinking about the relationships between different devices and how people utilize and interact with each of them.

I recently had the opportunity to attend the BrandPerfect Tour NYC. Design consultancy Precious hosted a workshop exploring several multi-screen patterns, the context of the user, and connections between devices. Their documentation of these relationships gives us a clear picture of current possibilities between devices and provide some great solutions on your next multi-platform project.

Gadgets

Cuttin’ Through the Clutta Like A Knife Through Butta

As the economy slowly pulls itself out of the recession, retailers are trying to connect with consumers in different ways.  Reuters reports that Best Buy is scaling back its trademark “big box” stores, focusing instead on “mobile” retail locations and bolstering their online presence.  However, The New York Times reported last week that many brick-and-mortar stores are back to embracing size and clutter.  While piling up the goods may be great for B&Ms, this strategy usually fails to translate in the expanding ecommerce world.

Online there exist far better strategies for engaging consumers than drowning them in a sea of digital clutter. We advise our clients to embrace simplicity, proven behavioral strategies and technology like dynamic personalization. Few if any brick-and-mortar stores can make quick, store-wide changes like what can be done online.  Digital optimization strategies allow our clients to take risks and experiment with their online offering, to adjust quickly based on real-time feedback, and then to experiment some more.

We have empowered many clients with this strategy, and it works.  For example, our de-cluttering redesign of PexSupply resulted in a 33% jump in conversions, and 45% increase in total orders.  Take a look at the difference after the break.

Business