How to increase signups by 50% using “popup forms” Posted in A/B Split Testing, Case Studies on March 15th, 2011 We recently did an A/B test on Visual Website Optimizer homepage with an aim to increase signups for our free 30 day trial account. As you can see, our signup form is short (with just a couple of fields), has good social proof (testimonials on the right) and we have a direct link to the signup page in the website header. Homepage as a sweet-spot for optimizing signups We could have tweaked our signup page in this A/B test. Note that above the page fold, we had a Watch Video call to action. Change the Watch Video button to Start Now button The first change we wanted to test was the most obvious one. This increased signups somewhat but the real game-changer was the following change. Introducing “Popup Forms”: 50% increase in signups As mentioned earlier in the post, our signup form is fairly short (with only a couple of fields). What this did was amazing! What’s next? Paras Chopra Know all that you need to get started: 230inShare Tags
Interface Design is Copywriting Kind of impossible to separate the skills of interface design and copywriting. There is a lot to like in the presentation The Language of Interfaces by Des Traynor, in which he makes several important points about Interface Design. The first is that words mean everything in the interface. Every single word you choose is important, from the call-to-action button to the headline to the words in an error message. Each word, if carefully chosen, adds to the experience of the user, making them more confident and sure that they’re on the right track. Good design is not an accident. The real question is…what are the details that matter? While I’ll be the first to say “Oh…look a shiny new JQuery widget!” Traynor resurfaces a great post by Jason Fried in which Fried suggests that Copywriting is Interface Design…I think we should also look at it the other way. The best line in Traynor’s piece is this one: Nothing says Send Message, like the words “Send Message”. So…the fix was straight-forward.
10 crimes sur l’ergonomie des sites web que vous ne devriez plus commettre L’article sur les 10 crimes sur les balises HTML que vous ne devriez plus commettre est actuellement l’article qui a été le plus lu sur Kiwano et aussi celui qui a entrainé le plus de commentaires de votre part. Alors, nous n’avons pas pu résister à l’idée de vous proposer une traduction du nouvel article de Chris Spooner intitulé « 10 Usability Crimes You Really Shouldn’t Commit » sur son blog Line 25 Web Design Blog. Voici donc une sélection des dix crimes les plus courants concernant l’ergonomie et l’accessibilité des sites webs avec la solution pour les éviter. Crime n°1 : avoir des labels non associés aux champs de saisies dans vos formulaires Il est indispensable d’utiliser la balise label pour vos labels de formulaires et de renseigner l’attribut « for » pour pointer sur l’ID du champ de saisie. Crime n°2 : avoir un logo qui ne contient pas de lien vers la page d’accueil de votre site Crime n°3 : ne pas avoir de couleur différente sur les liens qui ont été visités
Flat Pixels: The Battle Between Flat Design And Skeuomorphism Get the Kindle version: If you're paying attention to what's going on in the design world, you've probably noticed the ongoing debate around skeuomorphism vs flat design. So here's a quick test. Which of these two calculators feature a skeuomorphic design? Which of these two apps is skeuomorphic? If you answered "skeuowhat?" But if you answered "the app on the right, of course!" The correct answer is that both apps are skeuomorphs. Defining Skeuomorphism This obscure word describes the way designs often borrow a particular feature from the past, even when the functional need for it is gone. Or, as Wikipedia tells us : A skeuomorph is a physical ornament or design on an object copied from a form of the object when made from another material or by other techniques. While Wikipedia only mentions "physical ornaments", the digital world has seen skeuomorphism popularized in the past couple years mainly thanks to the recent iOS-inspired trend of rich textures and life-like controls. Notes
25-point Website Usability Checklist I've been thinking a lot lately about my process. Experience is a powerful thing, but it's rare that we really sit down and try to map out what we know. A while back, as part of my 5-point Website Clinic, I developed a 25-point website usability checklist - a way to create some method out of my madness and make sure that I don't forget anything critical when I'm working with a new client. Even though it's part of one of my paid offerings, I've decided to share this checklist. A few disclaimers: First, I don't claim this list is comprehensive or unique. Jakob Nielsen has a great 113-point checklist in his book, Homepage Usability, for example. Basic Overview The list is split into 4 roughly equal sections, (I) Accessibility, (II) Identity, (III) Navigation, and (IV) Content. Section I. This section contains not only traditional accessibility issues, but anything that might keep a visitor from being able to access the information on a website. 1. 2. 3. 4. 5. 6. Section II. 7. 8. 9. 10.
Ergonomie web illustrée 11 Common Web Design Mistakes (Blunders) | Web 2.0 There are tons of website on the Internet, and hundreds or probably thousands are created by day. Here’s a very interesting thing to ponder – What are the elements of a good website? Image Credit: tveskov Building a website can be daunting but the real challenge lies in making it usable. In this article, we would like to highlight 11 web design blunders that web developers and designers make and some suggestions how these mistakes can be easily avoided. 1. The web is like an archive of information. Suggestions:Google Custom Search is a neat, simple and effective way to get started. Here’s a simple form code to display Google’s search engine on your site too. More: Designing The Holy Search Box: Examples And Best Practice- This article details guidelines for designing the search box. 2. This is a crucial element of web design. Suggestions:Fortunately, there are simple ways that you can do to improve the users’ reading experience on your website. 3. 4. Suggestions: 5. 6. 7. 8. 9. 10. 11.
It's Not What You Say, It's How You Present It Content marketing is the hot new thing in the wake of Google's animal themed algorithm updates. Marketers are doubling down on content. Yet, the majority of content on the web is not optimized for readability. It's not just what you say, it's how you present it. What Is Readability? There are a lot of definitions of readability, some of which stir up a fair amount of debate. Readability is about making your content accessible and comfortable. Readability Improves SEO If you make your content difficult to read the value of that content goes down. In short, readability is a valuable but overlooked part of SEO. People Don't Read, They Scan The first thing you have to come to grips with is that people are not reading every word. On the average Web page, users have time to read at most 28% of the words during an average visit; 20% is more likely. That doesn't mean you should skimp on good writing. Use A Font Hierarchy If you look back through this blog you'll see how I figured this out over time.
7 enseignements pratiques tirés du eye-tracking : le F-pattern Cet article inaugure une série de 7 articles à propos des enseignements du eye-tracking, technologie qui permet de voir à travers le regard des utilisateurs sur les sites web. Utilité de l’eye-tracking en tests utilisateurs Ah, le eye-tracking ! L’eye-tracking est donc une technologie qui a le grand avantage de pouvoir se mettre (presque) dans la tête du client lorsqu’on l’observe au cours d’une séance de tests utilisateurs. Outre qu’elle permet de comprendre des comportements spécifiques dans le cadre d’une étude contextualisée, elle a aussi permis de tirer un certains nombres d’enseignements généraux très utiles qui une fois assimilés permettent de mieux raisonner sur la manière dont les gens voient et utilisent les pages de votre site. C’est pourquoi ce billet inaugure une série : 7 enseignements pratiques tirés du eye-tracking. Qu’est-ce qu’une carte de chaleur ? Représentation de l’attention des lecteurs Pourquoi cela ? Adapter les textes au web Bonne réécriture de vos pages !
Why cards are the future of the web Cards are fast becoming the best design pattern for mobile devices. We are currently witnessing a re-architecture of the web, away from pages and destinations, towards completely personalised experiences built on an aggregation of many individual pieces of content. Content being broken down into individual components and re-aggregated is the result of the rise of mobile technologies, billions of screens of all shapes and sizes, and unprecedented access to data from all kinds of sources through APIs and SDKs. This is driving the web away from many pages of content linked together, towards individual pieces of content aggregated together into one experience. The aggregation depends on: The person consuming the content and their interests, preferences, behaviour.Their location and environmental context.Their friends’ interests, preferences and behaviour.The targeting advertising eco-system. Twitter is moving to cards Google is moving to cards Everyone is moving to cards The list goes on. Notes
Pricing Pages in Web Design: Getting Users to Sign Up What is are the first thing a visitor will look at before signing up for a paid service? The pricing of course. Can they afford it? Pricing pages can sell a service, or scare people away. Pricing Pages in Web Design Shopify Shopify has a well-designed and bright pricing page that uses a lot of great techniques that likely turn into high conversion rates. Featured and "Most Popular" plan is highlighted visually, and uses the term "Most Popular" for social influence." Wufoo Wufoo's pricing page matches their overall brand and style with quirky typography and a colorful design. A quick and short list of primary features making decision making simple.On this page, the plans are listed from most expensive to free. Freckle Freckle really emphasizes the little risk involved, which can be a great influencing factor to get more visitors to sign up, and then turn into paying customers later. CobbleStone CobbleStone is a service that offers website solutions for churches and such organizations. SipGate
Design Is About Intent | Rampant Innovation The most admired companies of each age are often associated with a certain core competency. Ford popularized assembly line manufacturing in the 1910s. Toyota kicked off the lean revolution with its Toyota Production System in the postwar years. Apple is unquestionably the most admired company in the world today. Lest there be any doubt, they told us last summer: Apple is about design. Design as the New Management Tool Largely due to Apple’s unprecedented success, design has recently become extremely fashionable in the broader business imagination: A selection of recent headlines Business gurus like Roger Martin, institutes like Stanford’s d.school, and consultancies like IDEO have all helped spread the gospel. We saw this pattern with the Lean and Quality movements too - both generated extensive, organized, and widely adopted disciplines (think of Six Sigma’s DMAIC methodology and hierarchy of belt colors). What Design Is Really About Overarching intent is easy. The Three Design Evasions
Books On Designing Products That Drive Action by ZURB We received an amazing amount of tweets and questions following our talk on Design that Drives Action at MozCon yesterday. Many folks asked for books and resources they can use to learn more about the principles behind designs that drive actions. So we decided to put together a quick post recommending some of the books that have helped us learn the craft. Visual Design Jakob Nielsen's "Homepage Usability: 50 Websites Deconstructed" focuses on home page design as the most important point of presence of any website. Don Norman's "Design of Everyday Things" does a phenomenal job of entertaining the reader with insights into why some everyday objects satisfy customers while others frustrate them. Content Maria Valoso's "Website Copy That Sells" is one of the few books that we've photocopied pages from and distributed around the office. Jakob Nielsen's "Designing Web Usability" probably fits into all three categories: visual design, content, and forms. Forms Bonus
Online Usability 101 is here: watch our free 7-video series & become a user testing heavyweight | Loop11 Online Usability 101 is here: watch our free 7-video series & become a user testing heavyweight News January 30th, 2013 We’re fired up to announce the launch of Online Usability 101: a video series that promises to make you knowledgeable about user testing. Designed for aspiring user testing pros, and really anyone who’s interested in a refresher on usability testing best practices, project ideas and smart tips, the 7-video series is complimentary. Check out the Online Usability 101 videos What’s covered in the course, you ask? 1) What is Usability? 2) Why Usability is Important 3) When to Conduct Usability Testing 4) Deciding What to Test 5) Selecting Participants 6) Scripting and Launching the Test 7) Analyzing the Results Have thoughts or feedback on the video series?