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 ‘Gadgets’ Category

Getting a “Head” on Selenium headless testing

A headless Selenium testing system is an ideal addition to any development workflow. Selenium reduces testing time, and integrates into CI tools such as Jenkins. The benefits are great, but only *if* you can get your tests to run. One of the most time consuming problems that can arise from a headless system is a failed test. How can you debug, when you can’t see the browser? Ideally, you will test your scripts locally before running them on the headless system, but anyone who has even dabbled in the world of automation knows that a single procedure can yield very different results on different systems and in different environments. You can deal with the differences, but first you have to see them.  After much searching, I could not find a straight answer as to how to export this display to my Windows machine from our Linux server. It is really quite simple, and can be done in a few steps.  In order to display a headless Selenium test on a Windows machine from a Linux server, you must first be able to have an X window (X11) server running on your Windows machine. This is the underlying window display environment common to Unix systems. I used Xming, as it is the easiest to use and involves almost no setup.

You can download Xming from here.

When the installer finishes, run the Xming server. This doesn’t do anything that you can see, but starts the X11 environment on top of Windows.  Now you need PuTTY, the SSH client.

You can download PuTTY here.

Now that you have installed PuTTY, run the executable. In the left hand category listing for the settings, click on the X11 tab and enable X11 forwarding.

Type in the host name or IP of the remote machine and connect. Type “firefox” in the command line of your PuTTY shell (this assumes you have Firefox on your system).  This should pop the Firefox browser!  Now that you can get the remote Firefox instance to show on your Windows machine, you can run Selenium through PuTTY and debug on the fly with the command:

java -jar (PATH-TO)/selenium-server.jar -trustAllSSLCertificates \
        -htmlSuite BROWSER URL  (PATH-TO)/SUITE  (PATH-TO)/LOG
Gadgets

Pew Study Highlights Growing Tablet Use

Last week BGR posted a great infographic visualizing the results of a Pew study on how tablet users are consuming their news. The findings of the research confirmed findings by Forrester, specifically that people who own tablets use them – a lot. According to the study 77% of tablet owners use their tablets daily.

The study also showed that tablet owners spend an average of 95 minutes per day on their tablets. With Apple reporting record iPad sales (over 11 million sold last quarter), these findings show that e-retailers can only expect the amount of visits from tablet-wielding consumers will continue to grow exponentially.

Some of the most interesting numbers coming out of the study centered around the use of native apps versus mobile browsers. Almost twice as many responders reported using mobile browsers as their main news source compared to apps (40% for browsers, 21% for apps), which shows the importance for having sites optimized for tablet users.

As shown in Ai’s T-Commerce Report, even the largest internet retailers are still struggling to capture this up-and-coming demographic. This report shows that while a few retail giants have capitalized on the t-commerce market with responsive designs, larger calls to action and gesture friendly interfaces (Nike is a prime example), most e-commerce giants are falling behind the curve when it comes to t-commerce. Even Amazon is showing slow adoption of t-commerce best practices in its new redesign; though their new fashion deal site, MyHabit, is highly optimized for t-commerce.

For more on how you can optimize your site for t-commerce check out Alex’s article “Make Way for T-Commerce” or download the T-Commerce Report.

Ecommerce

Ai Releases its T-Commerce Report

Ai T-Commerce Report

This morning Ai released its T-Commerce Report, a best practices guide for tablet-based UX design and t-commerce review of the ten largest retailers on the web.

We’ve written about the importance of t-commerce UX optimization before on the blog (and E-Commerce Times) and reviewed Amazon’s redesign from a t-commerce perspective. The T-Commerce Report goes into more depth on how the top-selling sites on the internet are adapting to a tablet based future and how you can do the same. Check it out here.

Gadgets

What Does the Kindle Fire Mean for T-Commerce?

The Ai office was abuzz today with the news of Amazon’s Kindle Fire. The new tablet appears to be the first competitor to steal the wind out of the iPad’s sails (and possibly iPad sales as well).

The overall sentiment around the implications of the product itself was a guarded excitement. Most of that excitement focused on the price, an appetizing $199.

It is only a matter of time before t-commerce reaches the tipping point that sends it into its boom. A sub $200 price tag could be that tipping point. If so, retailers with tablet-optimized UX will be the benefactors. With only a seven-inch screen, the Fire will put an even higher premium on the size of retail sites’ calls-to-action.

While the Amazon redesign may have overlooked many t-commerce UX fundamentals, one site that appears to be perfectly optimized for use on the Fire is the recently launched, MyHabit, Amazon’s partner in competition with Gilt Groupe. With large call-outs and a minimalistic design layout, the site appears to be tailor-made for use with the Fire (even down the the flash product videos, which will render on the Fire’s Silk browser).

After the (positive) sticker shock, the second-most exciting piece of news to come out of today’s Amazon press conference was the the Fire’s native Silk browser. Silk is a truly tablet-optimized browser that will split site rendering processing power between the tablet and Amazon’s cloud computing system. Using Amazon’s cloud as a type of “endless cache,” sites should render significantly quicker than they would using only the Fire’s dual core processor.

This type of “split browsing” (as Amazon is calling it) has huge implications for t-commerce. During this early period of tablet development, processing assistance is vital for optimizing page load times.

Ai has put a premium on designing sites for page load time optimization. Will this innovation make this optimization irrelevant? The answer is almost certainly “no” since even with the demo of the browser show some lag in load times. It could mean though that sites optimized for page load speed have comparable load times on Silk as they would on a laptop.

The one real certainty coming out of this news is that the future of t-commerce is getting closer by the minute.

Gadgets

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

The Tablets are Coming. Are You Ready?

Now that we’re firmly in the age of mobility, buying online through a computer may appear obsolete  for some consumers. With a click of a button on your smartphone (which is always on) or your tablet (which is always on standby), you can access your favorite online merchant from anywhere.

It appears though that of our mobile devices, tablets are taking a lead when it comes to e-commerce. This comes in spite of their rather recent re-introduction, marked by the iPad’s 2010 launch (previous attempts to make tablet PCs didn’t survive long enough to be remembered).

According to the results of a Forrester report published on Forbes Blog, 9% of online shoppers have a tablet device, and while they already have other mobile devices, including smartphones, their preferred method of shopping is (you guessed it) their tablet. And while the iPad ruled the tablets’ market for a while now, the debut of Android’s Honeycomb this past February brought a strong contender to the market with a stable and attractive tablet-optimized OS that is now available for all manufacturers to use on their new tablets (look out for highly anticipated devices from Amazon and Sony coming soon).

With all this kind of momentum gathering, one thing is certain… “t-commerce” is the next big thing.

Ai’s clients have witnessed the evolution of tablet visits firsthand. Between May 2010 and 2011, the iPad visits grew by 782% for one of our clients and by 433% for another, while those clients’ iPhone visits only grew by 146% and 99%, respectively. The iPhone has been out since 2005 whereas the iPad came out in 2010, but such explosive growth for the iPad makes it clear that the tablet, as a traffic and revenue source, cannot be ignored.

As Bill Siwicki of Internet Retailer put it, “If you haven’t already created an m-commerce site or a mobile shopping app, now is the time. It’s not too late.”

For more insight on how to optimize for the tablet wielding consumer, see Alex Schmelkin’s post Make Way for T-Commerce.

Gadgets

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

Nook Color + E-Comics = Awesome!!

In search of electronic comic reader

I got the Barnes and Noble Nook Color late last year after being disappointed both by the 1st iPad and the available Android tablets at the time. Resigned to not invest in a full fledged tablet as of yet I also found myself unable to take the e-ink plunge for 1 reason: comic books are printed in color.  I had been managing to get by reading e-comics with ComicRack on my Desktop/Laptop and Comic Book Lover does a reasonable enough job on the iPhone 4. But trying to get caught up on X-Men in rush hour traffic is impossible with a laptop and just annoying on a small (if beautiful) screen.

Enter the Nook Color: an Android powered, full color, touch screen, wifi enabled e-reader. At $249, it’s priced beween full blown Android tablets/iPad and the current king of pure e-readers, the Kindle. But because the Nook is based on the Android operating system you actually do gain the potential for full tablet capabilities (i.e. non Barnes and Noble apps) either through eventual Barnes and Nobles upgrades or through various rooting/unlocking techniques available on the web.

Getting Comic Books on the Nook Color

When it comes to actually reading comics on the Nook, the first thing to do is get them on to the device.  The Nook lets you drag and drop any of its supported formats directly on to the device (or  an optional micro SD card) once its attached to your Mac or PC so loading new content is usually easy. However since most e-comics come in either CBR or CBZ format you will usually have to convert them to a format the Nook supports, so I usually use Calibre to convert the comics to either E-Pub or PDF depending on the content:

  • EPub is good for manga and similarly formatted graphic novels and they come over well on the Nook’s 7 in screen. Also the navigation is pretty similar to readers on the IPhone so you can tap the edge of the screen to quickly navigate forward and backward.
  • PDF is generally better for standard comics and graphic novels because you can zoom in on larger panels and view the page in different orientations. However current native PDF reader that ships with the Nook Color is sort of lame so you can’t do two page layouts for example and have to navigate using vertical swipes only. These aren’t really deal breakers (since you cant do two page layouts in EPub either), but I do miss the effect of many multipage panels and that can make reading them a little disjointed.

Other Coolness

Beyond the general comic book coolness the expandability of an SD card is pretty cool for rotating different comic collections in and off quickly. I also use the Book Shelf feature to cross file comics for instance organizing both by series title and by story arc. Also the built in web browser, while not super snappy, is really handy when you quickly need to hit up wikipedia to figure out when Batman 1st met Talia Al Ghul. Beyond the comics it self, reading  magazines and periodicals on the NookColor is also pretty awesome  as a lot of thought went into their Magazine reader interface.

Conclusion

With the advent of the iPad 2 and the Motorola Xoom I might finally take the tablet plunge, but thanks to the Nook Color I’m not pressed. With its vivid screen, expandability, supported formats, ease of use and Android roots the Nook Color is not just the best only E-reader for comics and graphic novels, but compelling mobile platform with room to grow in its space.

Gadgets

Getting it onto the Kindle

I’ve been loving my Kindle 3 since I upgraded from my sony reader. There are so many options for getting various reading materials onto it. Here are a few of the ones I like the best:

  • Want to get some RSS feeds onto the Kindle? (12 feeds for free) KindleFeeder is the way to go. It also has a bookmarklet for capturing and sending whole pages from your browser.

    I use this to send articles in Google Reader that I want to read later to my Kindle. I use my starred items to do this. Starred items have their own RSS feed which you can put into kindlefeeder. For information on how to get the link to the RSS of your starred items, click here.

  • Send to Kindle” for chrome is a button that will send the content of the page your are currently viewing.
  • The third method is the built in free Kindle email address that isn’t broadly advertised: your.name@free.kindle.com will beam most docs that you mail it to your Kindle over wifi (does not work with 3G)
  • Calibre is great for managing what is on your Kindle and converting just about any file format to .mobi (a format the Kindle can read)

Gadgets

How to fix your gadgets

Ever feel like you’re doing the same silly things to fix things the same things over and over? Ever read forums where 10 people enthusiasticly post the same solution that you’re already trying to find an alternative for? Well, no need to post on forums any more, your answers are all here.

How to fix:

  • Windows XP – reinstall
  • Macs – delete preferences, fix disk permissions (really?)
  • Windows Vista – install Windows 7 (really!)
  • Linux – you’re already capable of helping yourself. Move along.
  • iphone – you’re holding it wrong
  • blackberry – delete service books, wipe data
  • android – root your phone, install a community ROM, then complain to Cyanogen

Credit:You’re holding it wrong”  courtesy of Engadget, my favorite blog.

Funny Stuff