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
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 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 !
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
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?
Guidelines for Checkout Design According to e-commerce researchers, an average 65.23% of potential customers abandon their shopping cart. In this blog I have outlined some comprehensive steps that can help reduce cart abandonment. Add Description for Fields Labels Form field labels without an explanation could cause confusion regarding the information being asked of the customer. Most customers need extra help, so for example, instead of showing a “?” or having a mouseover effect that shows details of what’s being asked, you can simply display the information below the form labels. Highlight Credit Card Fields with Security Icons Study shows that users are actually more concerned about security while entering the credit card information. Also, highlighting the payment input fields with different color or border and icons make them feel more secure and highlight the sensitive fields too. User Shipping Address as Billing Address by DefaultReduce the time it takes customer’s to fill in information.
No to NoUI – Timo Arnall ‘The best design is invisible‘ is the interaction design phrase of the moment. The images above are from my ever-expanding collection of quotes about how design and technology will ‘disappear‘, become ‘invisible‘ or how the ‘best interface is no interface‘. The Verge has recently given both Oliver Reichenstein and Golden Krishna a platform to talk about this. I agree with some of the reasons driving this movement; that design’s current infatuation with touchscreens is really problematic. But I also take issue with much of the thinking for a few reasons that I’ll outline below. 1. We already have plenty of thinking that celebrates the invisibility and seamlessness of technology. Computing systems are suffused through and through with the constraints of their materiality. – Jean-François Blanchette As systems increasingly record our personal activity and data, invisibility is exactly the wrong model. 2. Invisible design leads us towards the horrors of Reality Clippy. 3. 4.