Sasquatch Planet

After reading about how to enhance the ROI of the shopping cart process, I became interested in the mobile shopping experience. While I am well versed in many forms of e-commerce, I never bought anything using my phone, despite the fact that most of my online time is spent on that device. I’m the ideal consumer for a mobile experience.

The majority of my online shopping happens through Amazon so I decided to compare experience between using their mobile enhanced web site on their iPhone shopping app. The differences between the two experiences are immediately striking. Check out these screens:

Web Site

Hold on…more to come…

The two screen above combine to to make the home page of Amazon’s web-optimized site. While the menus do feel mobile friendly, the total experience is clumsy when compared to this:

The mobile app, as expected, takes advantage of all the available tools. Amazon maximizes space by placing account and cart information in the bottom nav bar and promoting three primary areas of business: Gold Box deals, customer recommendations and the Kindle App. You don’ t have to move finger to scroll to any other hidden information. From this point (I’m already logged in the screen shots), customers may want to login. While the mobile web site appears to be a stripped down version actual site, the app login screen is similar but it has one subtle but big difference:

A secure login button. One of the mental obstacles preventing me from doing mobile shopping was an absurd fear it wasn’t as secure as regular online shopping. Yes, there are different issues but nothing egregious. Amazon anticipated my concern and tried to alleviate it with that yellow Sign In button and security assurances. It worked. The web-optimized site did not have this, which left me feeling more confident when I used the app.

After searching for a few items, I dropped them into my shopping cart. The app utilized the phone in a few neat ways here. First, it displayed my item count in the cart in the lower nav bar. And whenever I dropped something into my cart, the phone vibrated to confirm the action. Again, these are just neat enhancements to the user experience. The shopping cart on the web site version felt boring compared to that.

Here’s the shopping cart screen on the web site.

Notice how drab and complicated it looks compared to the app shopping cart.

The app version clearly displays the multiple items in the cart. There aren’t extra buttons or choices to make to reach the next step. You can adjust the quantity on both screens but one feels much more user friendly than the other. After clicking on the checkout screen, you are taken here:

The app’s order review screen combines or hides a few of the multiple screens from the web site’s checkout process. The shipping address field is highlight in red for you take action. You can select the Gift Option under each item individually, which is a nice feature too.

I didn’t finish the entire checkout process because, honestly, I wasn’t buying any books today. I walked away completely impressed with the Amazon app though. Based on my experience, I’ll look for retailer app to do my mobile shopping before I ever attempt to use their standard web site.

There is one other cool feature that the mobile-optimized web site didn’t have or was well hidden. Check this out:

A barcode scanner!

When you enter the search menu, you can choose to enter search criteria or scan a barcode from an item. For comparison shoppers, this is perfect. Just scan any item in a bricks & mortar store for a Amazon price comparison. You may just find some significant savings online.

Click here for the HTML5 form.

Last week, we had a great guest speaker from Coffee Cup software come to our class. J. Cornelius, the VP of Operations, covered many different topics about the web during this time with us. His lecture, more like a guided discussion, followed the evolution of the internet while interweaving personal anecdotes where appropriate. While the entire talk was engaging, I found a few of his points to really stick out.

Accessibility

Since we were recently covering the topic in class, JC spoke about the need for accessibility in web development. It is so tempting to cut corners when building your content for the web in a hectic business environment. Maybe you may decided to give incomplete alt tags or leave them blank entirely for the sake of time or budget. Issues like that are present across the web. But JC just reinforced the need to develop to web standards because that structure inherently follows accessibility guidelines. I think back to all of the pages I’ve written that may not have adhered to best web standards and how limiting or frustrating interacting with those sites might be for impaired users.

Innovation

JC voiced some frustration with the lack of innovation on the web, which sounds like an oxymoron. But the felt development had been stymied by corporate direction or other outside factors, like browser integration issues. I found that interesting because web technology is impressive to me but I’m a neophyte when it comes to understanding the background of all of it. He was very encouraging that students like us think in new ways to push the web forward.

Beginnings

Like my most comics book nerds, I have a softspot for origin stories and I thoroughly enjoyed JC’s story. Coffee Cup started out as an actual Coffee Shop with a good URL. The tech savvy customers created a piece of freeware that was spread across the web. Obviously, this was in the days before Napster conditioned web users that everything online should be free because people began sending donations or the software. Coffee Cup set a price point and the software company was born. These stories always inspire me because a group of people honed a little product into a successful progressive company that is still growing today. With just the right timing, a little luck and solid skill, anyone can gain some momentum on the web. Hearing JC’s roots, you can understand why he’s so passionate about innovating on the web. That’s where his company got their start. From a little idea that was just a bit smarter than anything else out there.

After listening to SpoolCast: Luke Wroblewski and Innovations in Web Input, I’m thinking about an issue we’re facing at work. Recently, we’ve been re-examining the process our circulation department uses to capture subscriptions and renewals. They’ve moved on from antiquated mailing cards to prompts through email. But the response rate has remained relatively low. These emails link users to a simple form that requires their information to be re-entered. Despite directly contacting a subscriber to renew a product they’ve either paid for in the past or personally requested, our circulation department struggles to push up renewal rates.

One solution we’ve considered is applying a unique URL to each email with that user’s specific data. When the click the link in the email, they will driven to a form that is pre-populated with their data. Because of the drastic differential in the percentages of the open rate and the submit rate, we think the dull act of entering information in the fields is discouraging to users. Instead of entering their address into a form for an organization they know has that information, they choose to do one of the million other possibilities available at that second like open another email.  By using the unique URL approach, we’re trying to make it as easy as possible for the user to renew their subscription.

I assumed this was the conventional way of thinking.

But Luke talked about the concept of Gradual Engagement. When he described the ritual of opening an Apple product, I found myself relating to that type of experience, which is immersing yourself in the sign-up or discovery process. Gradual engagement is the process of creating a positive sign-up experience for users that involves them more in the product, shows them product capabilities and keeps them interested to the final click. Reading about his example of Twitter’s gradual engagement process, I wonder how we can transfer those lessons to a business environment. Renewing your subscription to a magazine might be dull but if you can transform that process to help the user submit news to that publication, learn how to participate in conferences, see other subscribers through their contacts or add free newsletters to their accounts, they may be more engaged.

Another point of emphasis on the podcast, which complements gradual engagement, is the retrieving user data from multiple sources, like Facebook, Twitter, blogs, etc. We all know how much data Facebook shares (or do we?) about their users. If businesses can tap into those APIs or grab that type of information on customers across the web, they can grab information on the user that was entered by them. Although it is a huge invasion of privacy depending on your POV, some customers may sacrifice that for convenience, if they even understand where the data is coming from.

The downside, at least from my perspective, is that smaller businesses may have a harder time tapping into these available input sources due smaller technology budgets or gaps in their IT knowledge.

Still, gradual engagement is a concept I plan to learn much more about.

To me, web usability is similar to what that Supreme Court Justice said about obscenity: you know it when you see it.

Essentially, web usability is the level of ease at which a visitor can navigate your site for their targeted content. The more thought you put into web usability, the less thought a user should. The second someone starts thinking about how to do something on your site, you start thinking about about how you could have designed that something in a better way. When thinking about the usability of your site, there are a few core concept to apply to it:

Logic

Try to understand the most logical way to organize the site from your perspective. Do the same from the user’s perspective. And then apply it to your business goals. Scrub the site with every POV possible before you start planning the IA for the site. Because what seems logical from a business perspective, such as loading down a user with a crowded product page to increase sales, may be enough to drive the consumer away entirely before completing the sale.

Clarity

Of course, a site shouldn’t have a hot pink background with green text and animated fish that swims up and down the navbar. But clarity in design also shouldn’t swing to a minimalist white space extreme either. Good, usable design naturally emphasizes the important content and navigation issues while allowing the user to quickly and intuitively find what they are looking for at the moment. But clarity also encompasses the content too. Thinking back to our lessons on writing for the web, strong, concise and informative headlines are just as important as clean design. When the user can quickly scan the page for information and, this is crucial, process that information for their next step in site navigation, you have done your job.

Definition

When reading up on usability, this is something I hadn’t thought much about…until I realized I already had thought about it. Lots of times. Definition is removing all ambiguity from a user’s action on the site. To eliminate any question about the consequences or possibilities of clicking this button or opening that link during their visit. For example, what happens when I try to change my shipping rates in the middle of the transaction? How far back in the process will I be rerouted? These issues are omnipresent. While you can’t remove all doubt from the experience, you can try to define as much as possible with visual cues, design, hints or direct explanations when needed.

Web accessibility is hard to do. Scoping, developing and launching a web service, site or initiative is already an exhausting and complicated process from the beginning that even considering the idea of adding specific features for a small segment of users is far removed from development thought processes. Just testing for browser compatibility is complicated enough with worrying about accessibility issues. But that doesn’t mean we shouldn’t strive to be as accessible as possible.

People we accessibility issues can be segmented into different categories based on their disabilities or situations.

Visual

Visual accessibility issues can range from total blindness to someone who forgot to put on their glasses. The web remains such a visual medium which alienates anyone with vision issues, even if they are simply just colorblind. Imagine a site design that uses colored visual cues to direct the reader to links, special features or helps identify types of information. That site would be non-functional to anyone who can’t discern specific colors. My good friend’s brother has a form of tunnel vision that severely limits his vision. He can’t drive. He has trouble reading food labels in grocery stores. And watching him constantly zoom and unzoom single words on web pages to read them is frustrating. For a site that might take me 5 seconds to navigate, it may take him 10 minutes to find the right link or piece of information.

Mobility

People with mobility issues have some issue with basic motor functions. They may not be able to walk or are paralyzed on one side of their body. Their issues are physically limiting in what their bodies can accomplish. I remember being a kid that loved Nintendo. But I always felt bad for this kid at my school that was paralyzed from the neck down. One day I read an article in Nintendo Power, a magazine, about a new controller that for paralyzed people. The image in the magazine showed a kid, sitting in a wheelchair, playing Super Mario Brothers by blowing into a tube. I showed the article to my mother and asked her to give it to the kid’s mother. I couldn’t bring myself to do it. I don’t know why. But I know how happy I was just to see that this kid had a chance to play. But I don’t know how the game designers could do anything different with the available technology to increase accessibility for him. To the best of my knowledge, mobility issues are more likely to be solved by outside technology.

Auditory

Thankfully the web has evolved passed the stage when every site played a song or launched a noisy animation upon loading. The auditory ambushes have disappeared but the use of sound on the web has grown. The majority of people I know listen to some music on the web and they definitely watch YouTube videos. But how many of those videos are CC. I tried using the CC feature on a few YouTube clips while writing this post but the service didn’t work (or it might be user error). When embedding audio or video in a site, it is always important to remember how that will effect a hearing impaired user’s functionality and experience.

Cognitive

People with cognitive issues have some impairment with brain functions. I find these accessibility issues to be the most difficult to anticipate or even understand. There are so many conditions that fall under cognitive issues from Dyslexia to Down Syndrome. Or the issues might stem from severe head trauma or a disease. Walking in the shoes of someone with the other types of accessibility issues is easier for us to do. We can close our eyes to be blind for a second. We can mute the sound on our computers. Or tie our hands behind our backs. But we cannot easily, or at all, train our minds to think like someone with an impairment. My wife’s uncle was sustain a severe brain injury during a store robbery in the early 90s. A few years ago, he asked me to show him how to use email. This man has trouble remembering events from 5 minutes ago or processing conversations with a quickened tempo. When you lump in technology, you might as well be describing spaceships to a caveman. But he was determined to learn how to use email to communicate with a friend. I spent a few hours teaching him how to use the service. During the process, I realized how much intuitive design takes accessibility for granted.

After listening to the web fonts episode of The Big Web Show, I grew interested in the various fonts-as-a-service models on the web. Coming from a print background, the idea of paying a subscription fee for access to a massive font library rather than paying a hefty fee to add one font to your organization’s library is an intriguing idea…especially as print publications transition their content to the web.

1. Typekit

Typekit offers designers a cloud-based approach to font management. For a certain fee, designers have access to a library of fonts to use on their sites. The company offers tiered pricing and access for different levels of users, which should fit most needs. Your level of usage can range from 2 fonts on 1 site with a set monthly pageview ceiling for free or unlimited font use on unlimited sites with no monthly pageview ceiling for $99.99 annually. The fonts are accessed and implemented on sites using the CSS @font-face technology.

The Typekit model offers designers maximum flexibility when working with fonts for the web. The big con is that when the subscription stops, so does the font access.

2. Web FontFonts

Web FontFonts from Font Shop offer are alternative to the Typekit model. These are web-optimized fonts that are licensed based on the number of monthly pageviews for a site. Unlike Typekit, the Web FontFonts are delivered to the user instead of hosted on the server (although you have that option too). They cannont be used for desktop OS though. Designers can use these fonts however they like. The fonts are implemented using the CSS @font-face method. A neat feature of Web Font-Fonts is that you can host licensed fonts with a Typekit account. While the pricing and delivery structure fits the old font business model, Web Font-Fonts are a great resource for designers who want to maintain permanent access to a favorite unique font.

3. Font Spring & Font Squirrel

These two services offer open source fonts for designers to use. Font Squirrel focuses on free commercially-licensed fonts while Font Spring offers both free and paid fonts. If I understand it correctly, Font Squirrel has a cool function for generating @font-face code and files for fonts. Apparently, this can sacrifice the quality of the fonts though.

Those are just a few of the font options available to web designers. Browser compatibility and integration still remain a huge issue with web fonts but the technology is getting better. I’m interested to try some of these different business models.

Innovate…then regulate.

That is the normal course for the maturation of an industry. As the web grew in popularity and function, the progression was driven by everyone from the largest corporations in the world to enthusiastic hobbyists. Either of those were just as likely to develop something innovative and striking for the web. This paradigm helped fuel the internet boom for people as the found functionality and services on the web that allowed to grow comfortable with it as something used constantly in their daily lives. We’ve now reached a point on the web where the goal is less about how to do something on the web BUT how to do it better.

Standards are important for obvious reasons. But as the browser becomes the dominant tool for software usage and web access, they are the key to consistency.  As HTML5 and CSS3 are introduced, these increasingly powerful languages need to be applied with same rules whether the coder is writing for a browser-drive LED display in a microwave or an enterprise level software-as-a-service. Standards provide reliability to everyone who works with the web. By following web standards, other companies and users know how a program or service will interact with their technology and can build accordingly.

The hubris involved in the decision-making process to develop away from web standards when designing a browser is inexplicable. While it is naive to believe that we can reach a point when all browsers will perform exactly the same, developing towards incorporating best web standards and practices is a smart, logical direction. Instead we’re left with a fracture approach, which forces web designers and companies to spend more time developing for different standards and performance issues rather than on crafting better products.

Although there is no official regulatory body for web standards and practices, it is incumbent on anyone who works with web technology to learn about best web standards and practices. For the web to reach the next level, the strategy must change from a scattered, unfocused approach to one of consistency, productivity and reliability. Organizations like the World Wide Web Consortium are great places to start.

I need this. You have it. What’s the easiest way for me to find it?

Information Architecture is the concept of creating a fluid, navigable and easily understood system or design for users. The term can be applied to back-end information systems, like a CMS or database, and front-end systems, like a web site. For this post, we’re interested in information architecture as it relates to web design.

Creating a site that allows visitors to quickly grasp the organizational system of information is extremely important to a site’s success. Successful information architects understand what their customers are trying to do and structure a system to fit this behavior. They also understand the business purpose, any and all constraints, corporate goals and the overall site direction. Maintaining Findability for the customer or targeted audience is a primary goal for the the information architect .

A good way to learn about challenges information architects face today is to look over the topics featured at the 2010 Information Architecture Summit. The list of programs offers a wide variety of information architecture issues. Some of the more interesting topics include a program on finding easy design ways to leverage human behavior to maximum benefit for you site. This is a concept that all information architects should be thinking about. How can you take advantage of what someone naturally wants to do instead of coercing them into it? Another interesting topic covers the evolution of Search and how it will influence us in the future. Searching is important because it is how customers find your site and find things on your site. Understanding search behavior is a power tool for an information architect. There was even a program based around information architects finding a way to assess themselves as professionals. The concept appears to be that the field lacks traditional means of defining an information architect or an obvious path for advancement, which is slightly ironic as information architecture is about designing a system with clarity, purpose and direction.

Take the time to read through the topics listed on the site. Despite being sparse on information, the basic concept descriptions can spark lots of thought.

Chatper 5 of Interact with Web Standards emphasizes clarity, brevity and poignancy when writing content for the web. The web writer’s goal is to craft content in short, dense chunks that are easily consumed by the reader.

Compare/Contrast

The author provides a clear distinction between successful web writing and styles that discourage readers from using your site. Poor web writing is can be overwritten, grammatically unsound, scattered, muddled, too self-serving or littered with jargon. Readers are likely to respond to your message when the content is delivered on point, readable, engaging and organized. She offers plenty of tips to accomplish this both in the actual written word and when crafting the site’s look.

Prep, Prep, Prep

Lay the foundation for good content before ever writing a word. The chapter offers a few good tools for creating the right web environment for content generation when building a site. By using audits, wireframes, site maps and style guides, web writers and developers are on the same page and have a solid understanding of how, where, when and what content will be used on the site.

Hive Mind

Know what your readers want to accomplish by thinking like them. Web writers must understand why someone is visiting a site. If it is a grocery site, readers are likely looking for sales information. If it is a local little league site, readers might be after schedules, stats, standings or sign-up information. Organize the site and develop the content so readers can easily access desired content. Web sites don’t need to adhere to a linear flow. Instead, serve the content so it serves readers by sharing a similar mindset. Web writers must deliver content that can be quickly skimmed for the readers’ intended target while keeping them engaged and still navigating the site with momentum.

Inside & Out

Write for robots. I’m not talking about 1s and 0s but in searchable terms that boost a site’s performance in search engines. SEO(search engine optimization) helps drive traffic to your site by boosting you ranking on said search engines. To do this, web writers must strategically integrate key words into their content to capture the attention of the bots but not kill the reader with redundancy. Web writers must also deliver key words for the back-end alt text, which is also a source of information for search engine bots.

Meet Expectations

Today’s web users expect content delivered in smart, consumable ways. They want to breeze through your site to satisfy their needs. It is in the web writer’s hand to accomplish this. Meet their expectations and they will be back.