Google seems to favor the fast and easy type. We’re talking websites here. Google says fast and optimized pages lead to visitor engagement and conversions. Two things The Karcher Group keeps an eye on when offering professional SEO services as part of our online marketing strategy.
Google offers valuable tools for you to look under the hood of your website and perform necessary analysis and optimization. These include the following options:
PageSpeed Insights will identify performance best practices you can use for your website. The PageSpeed optimization tools look to provide a level of automation to the process.
PageSpeed Insights offers up a lot of recommendations and technical guidance that helps you get a lean and mean website. Things to avoid such as landing page redirects and things to consider such as server response time. All of these things aim to optimize the performance of your website.
All of this is great information to use on your site and help rank higher when someone searches for your product or service. The truth of the matter though is once Google serves up your website a human must look at it and actually use it. That’s where good looks (aka. User Experience Design) and a friendly smile can set you apart from the competition.
Good User Experience Design (UX) helps serve up a good experience when customers find your website. It considers how the website looks and how its content is organized, all for the sake of usability and accessibility. UX aims to present things like a human would want to see them as opposed to how a computer would organize and store data.
So, is your website looking ugly? Or maybe it’s real easy on the eyes but still not making sales? Take a look at Google’s tools and then let me know questions. We can talk about design and search engine optimization.
I’m a long-time reader of articles written by the Nielsen-Norman Group (NNg), an evidence-based website user experience research company operating since 1998. One of their website’s fine authors, Hoa Loranger, (also author of the much-acclaimed book, Prioritizing Web Usability) produced a concise article recently in which only the headline caught my eye out of a list of articles. My choosing to read it was partially induced by my empathy for web accessibility. Fight Against “Right-rail Blindness” is pretty catchy, eh? The other reason is that it further enforces part of a presentation I share while guest lecturing upperclassmen at local high-schools: website visitors naturally steer away from areas that look like advertising.
The first thing to understand is the term “right-rail”. In web development, for a desktop browsing experience, this is the right-most portion or column of the web-page. What often gets put into a right-rail is supplementary bits of information – things that are ancillary to the main content of the page. As a side-note, this would be content that follows after the main content in hierarchy. Depending on the website, this might include additional reading, advertising, and/or site-wide call-to-action (CTA). In trafficked websites like Google and Facebook, having ads placed here is the de-facto standard – hence the “training” of the general public.
Here’s the 4 main tips Loranger mentions and we continue to use to prevent “right-rail blindness”:
Don’t design content to look like banner ads – a clean sidebar design garners trust
“Choose a light-weight, simple visual design for the right column—one that matches the content of the site. People are more likely to trust and click on links that look like valuable content than what appears to be irrelevant advertising.”
These CTAs look too much like external advertisements
Position content away from the banner ads to avoid “guilt by association”
“…people perceive elements that are placed together to be related. It’s fine to feature ads on your site. People are used to it. However, whenever possible, group external and internal promotions separately, and make them look distinct to avoid any confusion.”
The simplified content placed between “ad-like” content still gets ignored
Feature thumbnail images only if they communicate useful information quickly
“Each image requires cognitive effort to discern, especially at small sizes, so choose them wisely. When selecting images, pick ones that supplement the content and are easily discernible in small sizes. Our eyetracking research shows that simple images, that have simple backgrounds and identifiable objects, attract more attention than busy images.”
Thumbnails shown here are too small even with simplified imagery making them useless
Feature content that is relevant and helpful
“Consider when to offer broad or narrow topics. For example, at top-level pages (e.g., homepage and section pages), people are much more open to serendipitous discovery. However, at the article level, people are more topic focused and need highly relevant content.”
This article features additional content that isn’t within the same topic
In the full article Loranger supports these points by mentioning the relevant background research associated. It’s a well thought and insightful article published and read by those closer to the web development spectrum, so I thought it made sense to share with our readers – the potential web design client and current client (using our custom-developed APOXE CMS).
In summation, like all valuable space on your web page, use this information to make careful decisions about the content you’re placing in your “right-rail” so you can effectively see the benefit.
You can read the entire article here and feel free to share your thoughts in the comments.
Not to be confused with Newegg’s abysmal member checkout process (with its 10-year old interface, silly tabbed payment options and an encumbering amount of text inputs), the guest checkout process is something to be modeled. I almost wonder at the decision to keep the old member checkout process when the guest checkout is so clean and familiar to the general e-commerce audience. Perhaps Newegg customers have been so painfully willing to plow through the old system over the years that they can’t function with anything else. Regardless, allow me to point out a few things that I love about the Guest Checkout Process.
First of all, the look is clean and organized. It’s not too cluttered and the inputs are large and easy to see. The flow of required information is easy to follow.
Something more important than the look however, is the logical way in which the checkout steps are constructed. Rather than dividing the steps into Address, Delivery, Payment, Review like many checkout flows are, it’s divided more intuitively into Shipping, Billing, Review. This is a break from traditional thinking as it properly groups like information in the same steps. Everything needed from the customer regarding shipping happens on step 1. Everything needed from the customer for billing happens on step 2. Review to make sure it’s correct. Purchase. Easy-peasy.
The steps also play together nicely, reducing the amount of information you need to enter twice. For example, on step 1 you enter your shipping address. On step 2, your billing address is automatically entered to match the shipping address you entered in step 1. The address doesn’t even appear in input boxes because 9 times out of 10, an order is being shipped to the same place it’s being billed. However if you need to change this, all you have to do is check a box and all of the address fields become editable. Additionally, the cardholder name on step 2 is prefilled with your name from step 1. Convenient!
Let’s not forget the review order step. In addition to the clean layout and usability best-practices, they place the full order details in a large column to the left, with a smaller summary view of the order on the right with a “place order” button. This allows the customer to view all the nitty-gritty about the order such as reviewing their shipping and billing addresses, cart information, product summaries and return policies, and shipping options (that you can change if you want, but they pre-select the free option for you – duh!) . However, the summary view shows you everything you care about at the moment you make the purchase – How much cash am I spending? Neatly laid out before the customer is the product total, tax, shipping and grand total. Did I mention that the summary view scrolls vertically along with you so it’s always in sight? Also, right before making the purchase, the customer can enter a password and have their account created for next time. This is a nice way to sneak in that signup step without being obtrusive.
It’s refreshing to see a quality and conventional checkout process taken just a few steps further to make it an even more intuitive experience. Now if Newegg could only clean up their other checkout process to be so simple!
Back in July, I shared some of the outdated web design trends you should make sure your website is avoiding. So what’s trending now-a-days in the world of website design?
Retro Design Trend
History does repeat itself. The last resurgence of a retro feel in design was around 2005. Retro web design characteristics include:
period color themes (often pale colors)
It’s effective because people, the general populous of which being comprised of an aging demographic of web surfers, have a tendency to associate “value” with old things.
Retro Web Design Examples
Timo’s Air Conditioning and Heating out of Palm Springs, CA, is a nice example of retro design style; however the site is also an example of a site being “over-designed” – weighing in at roughly 2 Megs – whoa momma!
Mighty Mighty Bosstones, the popular ska-punk band based out of Cambridge, MA, is another example of a website employing the retro web design trend by using the period illustration style and color palette along with the classic skewed-rectangle shape for content areas. This design is a good example of not being “over-designed” although it still boasts a significant download size for visitors (and a splash page).
Authentically Digital Design Trend
The authentically digital design trend represents a flat, two dimensional look that heavily relies on solid background color and plenty of white-space, interesting typography and large format imagery that become (as it should be) the focus of the page. It avoids trying to look like any other medium such as print, 3D or photo realism. Delight in the fact this technique can provide a fast online experience.
Authentically Digital Web Design Examples
The following 3 big brands provide great examples of the authentically digital web design trend:
Or maybe you haven’t, perhaps secretly hoping that if you just pretend you don’t know about it, you won’t have to face the reality that your site (amongst many, many, many other sites out there) will need to make some changes in order to adapt to this brave new world.
Whatever the case, recent comments from Google’s Webmaster Central Blog, along with Google’s recommendation that “webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device” indicates that the need to pay attention to your mobile users is becoming more and more important.
In particular, if you’ve been using a mobile splash page incorrectly, you will need to make that update right away. For example, when a Google user does a search and the search results page show a specific URL (ie. www.tkg.com/online-marketing), it is imperative that mobile users are taken to a mobile version of that page, not the mobile version of the homepage. If you’re not sure how your mobile site is working, make sure to test that out and if it’s not working as it should, get it fixed right away!
Of course creating a completely separate mobile experience is a lot of work. Per Google’s recommendation, your best bet is actually to follow the best practice of a responsively designed site.
Not sure you should care about this? Let’s look at some mobile usage stats that TKG is seeing amongst our own client base. (Don’t worry – none of this information is personally identifying!) These stats cover a range of industries from online retailers to B2B lead gen sites to local businesses serving Canton, Ohio.
All data is from January 1 – June 30, 2013
(Yes, you read that right! Nearly ½ of all traffic is mobile!)
On the whole, when we look at a large sample of marketing clients, we’re seeing between 8% and 26% of all traffic coming from mobile devices from January 1 – June 30, 2013.
But, when we look at trends in mobile traffic, we’re also seeing some remarkable jumps, both from 2012, and even just over this last 6 month period. Take a look:
You’ll notice that many sites went from single digit mobile traffic (often around 7 or 8%) in January 2012 to as high as 50% in June 2013. These numbers even blow us away!
So, what’s the take away on this? Well, even if you like to live life on the edge and aren’t so concerned with Google’s recommendation, you should be concerned with the user experience. If you’re seeing any real traffic from mobile devices, it’s time to take action and make sure that those visitors are given the very, very best experience possible. After all, a bad experience doesn’t tend to make someone want to do business with you.
Not sure how much of your traffic is mobile? Here’s any easy way to find out.
Paste this URL into a browser and then follow Google’s instructions to login to your Google Analytics account.
Choose your website profile and then click “Create”.
You’ll immediately be taken to a Dashboard screen that tells you exactly how much of your traffic is mobile. You can also change the date range if you’re interested in another time period. The best thing is that this Dashboard will always be available in your account, so you can look at your mobile traffic any time.
Interested in learning more about your mobile visitors or what going responsive means? Leave me your questions in the comments! Or request a quote from TKG. We’d love to chat!
Just because a website shows up on the internet, does not necessarily mean it was made correctly. It also does not mean that the site is guaranteed to show up properly in all of the most common browsers, let alone browsers as old as Internet Explorer 7. The big question then is how do you create a website correctly and make sure it is compatible with as many browsers as possible? That is where the World Wide Web Consortium (W3C) comes into play. The W3C is responsible for creating web standards, supplying developers with code validation services, and providing developers with a starting ground to learn a variety of web technologies.
Purpose of Web Standards
Web Standards lay a foundation for proper web development. Consider it the solid foundation that a house is built on. When you build on the solid foundation, it is sturdy and will hold true even through some nasty weather. But when you avoid the standards, it cannot be guaranteed to be sturdy in every situation.
Web browsers are built by corporations and big name companies so they make sure to run on this foundation to ensure that it works. Websites on the other hand can be created by literally anyone and therefore can be done either the right way, or that person could do whatever they felt was right. Web browsers work well with websites that are created by the same standards, but if a developer does whatever they want, some problems could arise.
Code validation services
The W3C provides 3 different validators: HTML, CSS, and Unicorn. Unicorn is a combination of HTML and CSS validators as well as using other web services to help create the highest quality web page. What you can do with these validators is enter a page URL or upload the HTML or CSS file and the validator will check the file against web standards and produce a list of warnings and errors that are highly recommended to be fixed. Since these tools help make sure that web pages match the standards set by the W3C, very obscure hard to track down errors can be fixed just by running the page through validation and fixing any errors that page may have.
Why follow all of these rules?
Let’s face it, not everyone on the face of the earth is going to use the latest browsers such as Chrome, Firefox or even IE 9 or 10. There are still some out there that favor IE 7 and some even IE 8. If you truly want to become a successful web developer, it is important for web pages to look good in all of these browsers, not just the latest and greatest. Not interested in learning to create a website yourself, but still want a top of the line website that follows all of these standards and works in all of these browsers?
Coincidentally, at The Karcher Group, it is our policy to provide these exact services for you so you can have that top-of-the-line website built by people who care about your business and want to see you succeed.
Like all things meant to draw your attention (auto styling, fashion, architecture), design and graphic “language” or visual communication is constantly evolving to keep you looking in a certain direction.
Is your website suffering from these outdated trends?
Splash Pages There was a day when splash pages were cool because they added to the mystery of what your website experience was going to be – while it had to load (which took for-ev-er). Pretty much, those pages let you get in some extra branding. With speed, simplicity and content being everything these days, all a splash page is doing is adding an extra step in the process. It’s a relatively simple thing to remove these, so cut it out. An absolutely unusable splash page (sorry, Petr).
Common Fonts (yawn) There is the obvious need to have the font on your website be legible, so sticking with a typical installed font found on most computers is a great safety net, but web development has come along way with the ability to include “web fonts” in any webpage. One caveat is that web fonts add to the number of files needing to be downloaded and thus add download time, so be judicious. Different fonts also have different file sizes too depending on the amount of characters found in them. If you use Comic Sans or Papyrus, it’s time for you to update. Check out the growing list of what types of web fonts are available.
Too Many Fonts Here’s a no-no that will always be a no-no. If you have multiple people updating your website, this can easily become problematic. Too many fonts create distraction and drop your website down quite a few notches on the professional scale (unless your business is selling fonts). If you can, have the font selection feature removed in your CMS (content management system). Rule of thumb: Stick with two unique fonts (and colors) at most.
Again, the speed, simplicity and content of your website is paramount. Even if your website designer can design every last detail or nook and cranny of the web page and tie it all together perfectly, it doesn’t mean you should. So if you’re just designing for design’s sake, give it a rest.
Too Many CTAs (calls to action)
This falls somewhat inline with “over-designing”, but even the cleanest designs can misuse this vital aspect of doing business online. Let’s clarify that a CTA is the final on-page feature you want a visitor to take action on. A secondary “path” may be applicable, but if you have three or more, you moving into “poor user experience territory” that will likely overwhelm or confuse users. There are also great page designs where one CTA would include multiple actionable “options” (of which you’d choose one) – like picking a phone plan.
Think your site needs a design re-fresh? Add your website link in the comments and we’ll provide some honest feedback!
Due to the industry I’m a part of, it seems that I always have a reason to create a wireframe! For those that are not familiar, creating a wireframe is a quick way to express an idea through a rudimentary sketch. Here’s a couple of (non-website) ideas:
Space-planning – think of landscaping projects or re-organizing a room in your home
Organizational charts – depicting the hierarchy of people or documents
Decision-making – showing the steps through a process based on choices
The easiest and cleanest way to create wireframes for most is by creating a digital sketch, but what program will work best for your specific need? If your go-to “design” program is Microsoft® Paint, please keep reading! Thinking about using Paint for sketching mildly induces panic, although I must say that I’ve seen some amazing things when it comes to producing some fine art from this tried and true application.
There are some great programs available; however, they can get pricey. If you’re interested in making a purchase, I’ve used these applications with great success:
If you don’t have a large budget, why not turn to the internet-based applications? They’re always on, (nearly) always available us, and surprisingly similar to interacting with desktop software. A large number of them have a some level of “free” worked in as well where you can try it before you buy it.
Let me introduce you to my new favorite app, Moqups.
Moqups has become my go-to application for quick sketching and wireframing. The company says it best:
“Moqups is a nifty HTML5 App used to create wireframes, mockups or UI concepts, prototypes depending on how you like to call them.”
Here are just a few of the reasons why I love Moqups.
Robust Features (but just the necessities)
Seriously – Add, Save (As), List, Preview, Share/Collaborate (via email), Export (in PDF & PNG format), and Recover Projects
(searchable) Stencils that start with general shapes and text (for those reading that are not in the web industry) and include those specific to forms, media, e-commerce, mobile, and desktop – even upload and save your own to use!
Stencil layout tools for alignment, layering, grouping, and live-hyperlinking
Layout your “paper” in any size, with grid-paper or plain or using 960.gs (nice!), use guidelines, and snap your stencils to them for effortless placement
Great support and active community – http://community.moqups.com/
User-Interface and Usability
The layout of the app itself resembles some of the previously mentioned desktop software (and why not borrow from what’s tried and true?)
Most actions are single-click while deeper functionality is only a second click away. And there is right-click menu availability – why not?
Try looking closer at the toolbar menus or the right-click menu and you’ll find keyboard shortcuts for virtually everything making the experience very desktop-like. I wouldn’t be surprised if the paid features include customizable shortcuts where I could make “the left-handed snarling opossum” good for something in this app too!
A few of my favorite hidden features are the ability to Shift+Arrow for nudging anything 10px at a time or when resizing an object you can maintain the perspective by using Shift+Drag on a corner anchor handle
Level of FREE
The application is offered free to visitors with or without an account – creating an account is quick and allows you to save your projects
A free account allows you up to 3 projects – and projects can have any number of “pages” within them
Even though you’re limited to 3 projects, a free account does allow you full control of the app’s primary features for creating, editing, and exporting your ideas
When you’re completely hooked, you’ll want to base a set of wireframes off a single template, create a new project by copying as a revision, or begin to collaborate with your clients or team – and here’s where the upgrade seems totally worth it
Drop those pencils and save a tree, try out Moqups and set ideas free (the rhyming was intentional!). If you’re not already using Moqups, share in the comments what you’re using and why you like it!
Obviously, good web designers have project work that visually speaks to you while it simultaneously is pleasing to the eye. Kind of like buying your first house or meeting the love of your life – you just know.
If you’ve done your initial home work on a prospective designer, you’ve discovered there is a good personality match and their references check out. I suppose then this article might best be titled “traits a top-shelf designer”.
Good web designers are relatively abundant, but top-shelf designers are, in large, those that have years of experience behind them – having gone through bad projects or worked with a variety of project managers to ultimately know these following traits make a relationship and project work smooth. If you’re new to or considering a design career, I’m hopeful these will get you a leg up.
Thinks “What if?”
Start by asking questions
A good project manager should be the provider of the base of information to get a project done. A top-shelf designer asks any questions they have at the time of reviewing objectives, digests the information (post-meeting), and follows up with a re-statement of the information.
It may seem silly, but the step of re-stating the objectives offers an opportunity to expose any missing details that should have been provided initially, allows an opportunity to ask any more questions for further clarification, and reassures the project manager that their designer has no mis-interpretations.
Constantly think “What if?”
This trait is one that is meant to be engrained in every facet of project work and becomes the catalyst for the questions asked at a project’s on-set.
Constantly thinking “what if?” is especially significant when it comes to complete re-branding projects or those that include a website component to them. The re-branding flavor of project can run in a multitude of directions like current and future logo uses, the different channels of marketing chosen (on or off-line), etc. Any seasoned designer could share that knowing and making sure designs are produced at high resolution (or physical dimension) initially can save you from re-doing or adding hours of work resulting in missing a deadline.
When purely in the web space, factors like on-page interactivity, functional contingency (when s*%# happens), intended devices (responsive design), etc. have deep importance on how a design should be executed and/or what should be considered a complete set of deliverables.
Finish on time (or before)
With objectives covered at the on-set of the project and carefully thought out “what if?”s, this very critical point becomes simple to consistently accomplish – and a joyous occasion between you and your project manager – at any stage where a deliverable is due. Nothing says “hire me (again – for the freelancers among us)” louder than being a dependable part of the team.
I would typically say “save the war stories” for internal conversations, but since this article is meant to expose the hiccups that cause points of failure in a designers project work, share with us your worst experience. If you’d rather, hit me up privately and allow us to expand this article.
What are traits you look for in good web designers?
I was going to write a thrilling blog post about woot.com and how it’s grown like crazy over the past year then I would detail each cool feature they’ve implemented in the last twelve months to accommodate their growth.
But just in my overview of how woot functions I realized that there’s so much that we can learn from the site simply from their business model that we can have an entire discussion just on that. So here we go…
If you’re unaware of the e-commerce site woot.com, then consider yourself lucky to be reading this blog post. Woot helped pioneer a whole new take on e-commerce that’s centered around good deals, low flat rate shipping, and a great interactive and social community experience.
When the site began, it lived behind the mantra of “one day, one deal” – meaning that each day the website would sell a single product at an incredibly low price until either the product was sold out or 24 hours had passed and the next deal begins. That’s right – a catalog of one product! Doesn’t it seem counter-intuitive to sell one random product at a time? What if people don’t want that product? Why would anyone come back if you never know what you’re going to get? What makes this site so special? Let’s examine some of the untraditional methodologies that woot employs to see if that exposes the answers to our questions.
Product Stories, not Product Descriptions
Woot doesn’t simply describe a product to the consumer in a traditional sense. Woot tells a clever and funny story about the product being sold. All the details that you need to know about the product to make an informed buying decision or worked naturally into this story. I’ve often had friends send me a link to woot.com simply because the product story was hilarious. This kind of approach can dramatically increase awareness to the site because it engages the visitor with something that’s beyond a product, it’s entertainment!
Product Discussions, not Product Reviews
Customers have far more to offer to each other than simply their thoughts on the product they purchased. Woot encourages all the shoppers of the site to discuss the product in any way that makes sense. If you own one of those products, tell other what you thought. But maybe you don’t own the product. Go see what other sites are selling the product for and report back to the others what you find – maybe the deal isn’t that great, but maybe it’s amazing! Maybe you’ve found a review from another website that you want to share with other shoppers. We’re all in it together to determine if the product being sold is worth a shot. Maybe it’s such a good deal and fantastic product that we might want to pick up a few as gifts. This kind of approach creates a community which will naturally foster repeat customers.
Speaking of repeat customers, thanks to the reporting available to all visitors, we can see just how many people are repeat shoppers. Today, 83% of the people who purchased the product have bought from woot before. That’s pretty incredible (not to mention fun to know). But even more, 23% of those purchases have bought more than 25 times! Another fun fact thanks to the woot report, the first person to buy the product today did it within 1 minutes and 40 seconds after the product was posted. 11:00am seems to be the hour most people bought. Most purchases are coming from Oregon. And the list of fun little details goes on thanks to all the reporting sitting right here on the product page. Why do we care? Honestly, I don’t know, but here I am sitting here reading through it spending even more time on their site. That can’t be a bad thing. It’s all about engagement and the site experience.
The last part of the site that I’m going to comment on is one of the most important aspects of the Woot website – Woot Offs!
These are multi-day events that Woot has every-other month or so where instead of selling just one product like usual, they queue up many products and sell one at a time until it sells out, then begin the next sale immediately. This can be a very addicting event. Customers will spend hours watching the site, waiting for the current deal to sell out and the next to start. While the products being offered are great, Woot spices it up by randomly selling the fabled “Bag of Crap” for $1. Everyone wants a Bag of Crap. It’s a mystery product and you won’t know what it is until it arrives at your door. It can be anything from a power adaptor for a device you don’t even own, to a flat screen TV. If you’re lucky, you’ll get to purchase a Bag of Crap and maybe even get something great! What do you have to lose?
When you engage your customers in the shopping experience it becomes more than about buying products. It’s a place you can go for entertainment and community – finding a great deal is just a bonus. Woot has managed to do this flawlessly. If Amazon is jealous of what you’re up to, you must be doing something right!
What other sites have you found that do a good job of engaging customers?