Posted by randfish User experience and SEO: friends or enemies? They’ve had a rocky past, but it’s time we all realized that they live better in harmony. Dispelling the negative myths about how UX and SEO interact is the first step in improving both the look and search results of your website. In today’s Whiteboard Friday, Rand talks about some persistent UX myths that we should probably ignore. Have anything to add that we didn’t cover? Leave your thoughts in the comments below! Video Transcription “Howdy, SEOmoz fans, and welcome to another edition of Whiteboard Friday. This week I wanted to talk a little about user experience, UX, and the impact that it has on SEO. Now, the problem historically has been that these two worlds have had a lot of conflict, especially like late ’90s, early 2000s, and that conflict has stayed a little bit longer than I think it should have. I believe the two are much more combined today. But there are a few things that many people, including those who invest in user experience, believe to be true about how people use the web and the problems that certain user experience, types of functionality, certain design types of things cause impact SEO, and they impact SEO negatively. So I want to dispel some of those myths and give you things that you can focus on and fix in your own websites and in your projects so that you can help not only your SEO, but also your UX. So let’s start with number one here. Which of these is better or worse? Let’s say you’ve got a bunch of form fields that you need a user to fill out to complete some sort of a registration step. Maybe they need to register for a website. Maybe they’re checking out of an e-commerce cart. Maybe they’re signing up for an event. Maybe they’re downloading something. Whatever it is, is this better, putting all of the requests on one page so that they don’t have to click through many steps? Or is it better to break them up into multiple steps? What research has generally shown and user experience testing has often shown is that a lot of the time, not all of the time certainly, but a lot of the time this multi-step process, perhaps unintuitively, is the better choice. You can see this in a lot of e-commerce carts that do things very well. Having a single, simple, direct, one step thing that, oh yes, of course I can fill out my email address and give you a password. Then, oh yeah, sure I can enter my three preferences. Then, yes, I’ll put in my credit card number. Those three things actually are more likely to carry users through a process because they’re so simple and easy to do, rather than putting it all together on one page. I think the psychology behind this is that this just feels very overwhelming, very daunting. It makes us sort of frustrated, like, “Oh, do I really have to go through that?” I’m not saying you should immediately switch to one of these, but I would fight against this whole, “Oh, we’re not capturing as many registrations. Our conversion rate is lower. Our SEO leads aren’t coming in as well, because we have a multi-step process, and it should be single step.” The real key is to usability test to get data and metrics on what works better and to choose the right path. Probably if you have something small, splitting it up into a bunch of steps doesn’t matter as much. If you have something longer, this might actually get more users through your funnel. Number two. Is it true that if we give people lots of choice, then they’ll choose the best path for them, versus if we only give people a couple options that they might not go and take the action that they would have, had we given them those greater choices? One of my favorite examples from this, from the inbound marketing world, the SEO world, the sharing world, the social world is with social sharing buttons themselves. You’ll see tons of websites, blogs, content sites, where they offer just an overwhelming quantity of tweet this, share this on Facebook, like this on Facebook, like us on Facebook, like our company page on Facebook, plus one this on Google+, follow us on Google+, embed this on your own webpage, link to this page, Pinterest this. Okay. Yes, those are all social networks. Some of them may be indeed popular with many of your users. The question is: Are you overwhelming them and creating what psychologists have often called the “paradox of choice,” which is that we as human beings, when we look at a long list of items and have to make a decision, we’re often worse at making that decision than we would be if we looked at a smaller list of options? This is true whether it’s a restaurant menu or shopping for shoes or crafting something on the Internet. Etsy has this problem constantly with an overwhelming mass of choice and people spending lots of time on the site, but then not choosing to buy something because of that paradox of choice. What I would urge you to do is not necessarily to completely get rid of this, but maybe to alter your philosophy slightly to the three or four or if you want to be a little religious about it, even the one social network or item that you think is going to have the very most impact. You can test this and bear it out across the data of your users and say, “Hey, you know what? 80% of our users are on Facebook. That’s the network where most of the people take the action even when we offer them this choice. Let’s see if by slimming it down to just one option, Twitter or Facebook or just the two, we can get a lot more engagement and actions going.” This is often the case. I’ve seen it many, many times. Number three. Is it true that it’s absolutely terrible to have a page like this that is kind of text only? It’s just text and spacing, maybe some bullet points, and there are no images, no graphics, no visual elements. Or should we bias to, hey let’s have a crappy stock photo of some guy holding up a box or of a team smiling with each other? In my experience, and a lot of the tests that I’ve seen around UX and visual design stuff, this is actually a worse idea than just going with a basic text layout. If for some reason you can’t break up your blog post, your piece of content, and you just don’t have the right visuals for it, I’d urge you to break it up by having different sections, by having good typography and good visual design around your text, and I’d urge you to use headlines and sub-headlines. I wouldn’t necessarily urge you to go out and find crappy stock photos, or if you’re no good at creating graphics, to go and make a no good graphic. This bias has created a lot of content on the web that in my opinion is less credible, and I think some other folks have experienced that through testing. We’ve seen it a little bit with SEOmoz itself too. Number four. Is it true that people never scroll, that all the content that you want anyone to see must be above the fold on a standard web page, no matter what device you think someone might be looking at it on? Is that absolutely critical? The research reveals this is actually a complete myth. Research tells us that people do scroll, that over the past decade, people have been trained to scroll and scroll very frequently. So content that is below the fold can be equally accessible. For you SEO folks and you folks who are working on conversion rate optimization and lead tracking, all that kind of stuff, lead optimization, funnel optimization, this can be a huge relief because you can put fewer items with more space up at the top, create a better visual layout, and draw the eye down. You don’t have to go ahead and throw all of the content and all of the elements that you need and sacrifice some of the items that you wanted to put on the page. You can just allow for that scroll. Visual design here is obviously still critically important, but don’t get boxed into this myth that the only thing people see is the above the fold stuff. Last one. This myth is one of the ones that hurts SEOs the most, and I see lots of times, especially when consultants and agencies, or designers, developers are fighting with people on an SEO team, on a marketing team about, “Hey, we are aiming for great UX, not great SEO.” I strongly disagree with this premise. This is a false dichotomy. These two, in fact, I think are so tied and interrelated that you cannot separate them. The findability, the discover bility, the ability for a page to perform well in search engines, which remains the primary way that we find new information on the Internet, that is absolutely as critically important as it is to have that great user experience on the website itself and through the website’s pages. If you’re not tying these two together, or if you’re like this guy and you think this is a fight or a competition, you are almost certainly doing one of these two wrong. Oftentimes it’s SEO, right? People believe, hey we have to put this keyword in here this many times, and the page title has to be this big on the page. Or, oh we can’t have this graphic here. It has to be this type of graphic, and it has to have these words on it. Usually that stuff is not nearly important as it was, say, a decade ago. You can have fantastic UX and fantastic SEO working together. In fact, there almost always married. If you’re coming up with problems like these, please leave them in the comments. Reach out to me, tweet to me and let me know. I guarantee you almost all of them have a creative solution where the two can be brought together. All right, gang, love to hear from you, and we will see you again next week for another edition of Whiteboard Friday. Take care.” Video transcription by Speechpad.com Sign up for The Moz Top 10 , a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don’t have time to hunt down but want to read!
Continue reading here:
UX Myths That Hurt SEO – Whiteboard Friday
Posted by randfish It’s been a long time since I’ve written about design here at Moz, but I spent my morning in a great meeting with Derric , and was inspired by a lot of his ideas and what we reviewed to revisit some of the emerging trends and outlier creatives that are opening our eyes to what’s possible. Below, you’ll find some truly exceptional, unique elements of creative layout and artistry, as well as simple tweaks to best practices that are pushing the field forward. Hopefully, a few will inspire yor design directions, too! #1 – Products Floating on the Background Here’s a good-looking page from Hugh & Crye Shirts , showcasing one of their garments: Not bad, right? But watch what happens when the product is lifted out of the photo context and floated onto the background (courtesy of designer Chris Svetlik ): Pretty remarkable, right? Something about the texture makes me want to reach out and grab it. The design minimizes the distance between the product and the interaction on the screen and in this instance, the drop-shadow adds to the ethereal, physical quality of the connection between browser and shirt. Here’s another example of the same principle at work from Makr Carry Goods , creators of some beautiful bags: The bag doesn’t quite scream “grab me” like the shirt above (at least to me), possibly due to the lack of shadow, but the effect is still clearly a differentiator. It’s evident again below in a great design from Tinkering Monkey: I hope more product photography goes this direction, allowing for a more immersive experience when viewing physical goods on the web. #2 – Typography IS the Design Minimalist sites have been leveraging the power of typography for years, but it’s finally maturing thanks to massive upgrades in web-rendering of fonts and some genius layouts by experienced designers. Below is an example from Girlfriend NYC , whose whitespace is as elegant and suggestive as any I’ve seen: Another great example comes via Infinvision , who adds artistry to font design and tells a terrific story through their copywriting and copyillustrating: I’m excited to see more of this make its way out of designers’ portfolios and into product, software and content websites. I suspect there’s some phenomenal opportunity for creatives to make this work with the right client. Maybe even something for mobile? #3 – The Infographic as the Primary Communication Tool For the past decade, infographics have been “add-ons” to websites, often living in blogs or article sections apart from the primary story of the product/brand. No more. In the past few years, there have been some remarkable moves to make the infographic itself the center of the site, and the results are pretty cool. Below is a screenshot from MahiFX , a trading platform that gives its pitch by comparing salaries entered by users to that of a legendary investor and user of their platform. Have a peek: Perhaps just as engaging, though less parseable (at least for us English speakers) is this remarkable industry page from the French VinSociete : If an infographic can tell the story with data better than paragraphs of text and bullet point lists, why not? Here’s Maersk’s website , a massive shipping company, showing off the visual comparisons of their freighters against major international landmarks: I love the creativity and visualization of this approach and hope it catches on. I can imagine so many boring “about” pages and “industry explanations” turning into link-worthy, share-worthy content using this approach. #4 – The Vertical Storyteller This trend may not have started with Ben the Bodyguard , but the site has come to represent a movement all its own. After launching, it received thousands of tweets and hundreds of links and that’s just for the design! The product wouldn’t come out for another 3 months. Obviously, Ben’s onto something. To experience for yourself, visit this page and start scrolling down (don’t click the video, just scroll). Another example comes by way of Reverend Danger , whose digital agency site features some clever scroll-triggered animations and a whimsical style: It can’t be long before more sites adopt this methodology, particular considering the success of the “Ben” design in building excitement for the product. #5 – Show the App and the Rest Will Follow Remember this scene from the Muppets Take Manhattan? Of course you do! But just in case you’ve forgotten (even though you saw it, like, a million times as a kid) and don’t feel like watching the video, it’s the one where Kermit, after being stricken with temporary memory loss, informs a group of brand marketing frogs that perhaps the best way to inform the public about a new soap is simply by “saying what the product does.” Above is Chart.io , taking Kermit’s advice to heart in their design. Five words explain what the product does (it’s “Google Analytics for Business Data”) while the screenshot shows off an interface that looks like it will deliver precisely on that promise. Here’s a slightly different take on the same problem from If This Then That : The app itself doesn’t quite showcase as elegantly as Chart.io, so IFTT took the liberty of spelling it out using a visual typographic interface. It almost reminds me of the simplicity Google first displayed when they launched (remember the old days when everyone thought their minimalist blue results were the key to their success?). #6 – The Interactive Flourish It used to be that interactivity meant complex and overwhelming, but designers like Ian James Cox and Bianca Mangels are overhauling that with simple, brilliant elements like the ones showcased below: The interactive brain diagram is merely a creative delivery vehicle for information that’s clearly listed on the left-hand side of the page. But the attention to detail and the extra effort make it stand out from the crowd. I must have browsed through two hundred design portfolios in the last week, yet this one caught my eye and kept my focus. #7 – Flawless Fluidity on any Resolution It’s still tough to find, but there are a handful of sites that “degrade” so eloquently, they’re just as exceptional on a phone, a laptop and a giant desktop monitor. One example comes via Joshua Sortino , who professes perfection and actually delivers. Here’s his site at 1600px wide: And again at 400px wide: Here’s another exemplary perfomer: The Manual , which uses the clever tactic of keeping the content to the left and letting the photography take the rest of the space. Given the massive growth in web speed and use on devices of all shapes and sizes, I expect this practice to get more and more common. Hopefully, others can find ways to do it as beautifully as these two. #8 – The Brand as a Cartoon Character Here at SEOmoz, we have our beloved Roger Mozbot: And the trend to update friendly, cartoon pals to help personify brands is certainly growing. Here’s an example from Fork , the open source CMS: Another favorite comes via Wallt , who represents a wall artist in the Netherlands: I like brand mascots and I like cartoons. Until the past few years, it was hard to find great examples on the web, but today, there’s dozens, if not hundreds of solid representations. A lenghty thread on Quora covers many of the best-known ones among startups , and I’d be shocked to see this trend go anywhere but up. #9 – Inspired by Print + Paper Design This trend’s been around a long time, but the execution’s improving and I’m finally seeing designs that don’t just employ paper-goods style UIs to be “retro.” An example of a highly useful and usable interface on this front comes via Oak Street Bootmakers , who combine great product photos and good-looking clothing with a classic print-inspired UX: There’s even a “colophon” in the footer 
#10 – The Irreverent Message I like when brands can authentically express their message in a way that challenges convention and surprises the viwer. Restaurant site Dilly Deli in Tulsa, OK starts things off on the wrong foot: But somehow, despite “them bein’ fightin’ words,” it works. Tripfab applies the same irreverent spirit with a clever graphic to make their point: Obviously, this tactic isn’t for everyone but it certainly can help a site (and the brand behind it) stand out from the crowd. #11 – Focus on the Input Box Earning a click is impressive. Earning a form fillout, email address or website capture? That’s where the bread gets buttered. Check out Stella Monitoring , whose throwback design does a nice job of focusing on the true call-to-action, the input box for website speed testing. From there, it’s just an email away from a brilliantly executed conversion. OpenGovernment does a pretty top-notch job of this as well, quickly funneling visitors to either the email signup or to the right district. The CTA is clear and the design puts all the focus in the right places: Wonder how their input rates compare to OpenSiteExplorer …