4 essential UX rules taught by eye-tracking research. Web designers use a lot of tools to make the sites they design the best possible for site visitors; one of the best ways of achieving this is incorporating actual science and research into design to maximize user satisfaction. Eye-tracking research provides designers with a blueprint of sorts to guide them on the priorities with which site visitors generally absorb the information on any given site. Eye-tracking research also tells us a good deal about the way in which site visitors read websites. This information can be used by savvy web designers to tailor-make a site to the average person.
When users get a great experience from visiting your site, they’ll be back, and chances are good that they’ll even turn into regular site visitors. So just what does this insightful research tell us about the average site visitor? Draw visitors’ eyes with gripping headlines—not pictures! So if you’re a designer working for a news site, keep this in mind. Design your site in an F-shaped pattern.
Don’t Use Automatic Image Sliders or Carousels, Ignore the Fad. 553inShareinShare I’m sure you’ve come across dozens, if not hundreds of image sliders or carousels (also called ‘rotating offers’). You might even like them. But the truth is that they’re conversion killers. So if they’re not effective, why do people use them? 2 reasons: Some people think they’re cool. What the tests say I’m not alone. We have tested rotating offers many times and have found it to be a poor way of presenting home page content.
Chris Goward, Wider Funnel Rotating banners are absolutely evil and should be removed immediately. Tim Ash, Site Tuners Jakob Nielsen (yes, the usability guru) confirms this in tests. Notre Dame university tested it too. Product design guru Luke Wroblweski summed it up like this: . There’s a discussion about automatic sliders on StackExchange UX. Here are some of the things different people who tested them said: Almost all of the testing I’ve managed has proven content delivered via carousels to be missed by users. Adam Fellows Here’s another one: Lee Duddell. Du zoning au mockup, itinéraire d'une maquette web.
Il n’est pas toujours évident de s’y retrouver dans le vocabulaire, nouveau et souvent anglophone, de la conception web. Nous sommes nombreux (83 % [**]) à avoir déjà vécu une situation d’incompréhension à cause de ce vocabulaire. Les termes « zoning » et « mock-up », en particulier, ont des significations différentes selon les personnes [**] et prêtent au quiproquo, quand ils ne sont pas carrément considérés comme synonymes de « wireframe »… Pour mieux s’y retrouver, commençons par mettre les bons mots sur les choses. sketch / croquis La première chose que l’on fait, c’est de jeter des idées sur papier, sous la forme de croquis.Outils : papier et crayons, Sneakpeekit, InterfaceSketch Le sketch est trop peu utilisé : vous êtes seulement 16 % à crayonner régulièrement et près de 50 % [**] à ne jamais faire de croquis ! C’est pourtant une façon d’organiser sa pensée, que l’on soit designer ou développeur.
Conception ergonomique zoning wireframe / maquette filaire prototype Habillage graphique. Pourquoi leboncoin.fr est-il le premier site de ecommerce français ? Il faut le voir pour le croire. Le 1er site de ecommerce en France (selon les chiffres de Médiamétrie) en mars 2013 est Leboncoin.fr avec 17 millions de visiteurs uniques en un mois, ce qui le place à la 11ème position des sites les plus visités en France.
Loin devant La Redoute ou Amazon (enfin, pas trop loin, quand même). La preuve que c’est pas parce qu’on fait un site design tout plein de fonctionnalités qu’on arrive à vendre plus et mieux que les autres. Avec ses pages marrons, genre papier-peint de ma grand-mère, son interface à la Microsoft des années 80 et ses annonces parsemées de fautes d’orthographes, le site français a réussi à devenir une institution nationale sans rien faire (ou presque). Alors faut-il copier Leboncoin ou s’en inspirer ?
Une offre pléthorique Leboncoin, c’est en permanence des centaines de milliers d’offres publiées non pas par des chefs de groupe ou des chefs de rayons, mais par des particuliers. Une interface simple d’usage. Why Is Facebook Blue? The Science Behind Colors In Marketing. Editor's Note: This is one of the most-read leadership articles of 2013. Click here to see the full list. Why is Facebook blue? According to The New Yorker, the reason is simple. It’s because Mark Zuckerberg is red-green color blind; blue is the color Mark can see the best. Not highly scientific, right? So how do colors really affect us, and what is the science of colors in marketing, really?
First: Can you recognize the online brands just based on color? Before we dive into the research, here are some awesome experiments that show you how powerful color alone really is. Example 1 (easy): Example 2 (easy): Example 3 (medium): Example 4 (hard): These awesome examples from YouTube designer Marc Hemeon, I think, show the real power of color more than any study could. How many were you able to guess? Which colors trigger which feeling for us? Being completely conscious about what color triggers us to think in which way isn’t always obvious.
Black: Green: Blue: So how did that experiment turn out? To Infinite Scroll or Not to Infinite Scroll: Where We’ve Come So Far. Today we’re delving into the most relevant facts on how infinite scrolling turned out to become such an acclaimed technique all over the web, and why, despite its popularity, it’s not yet all that widely adopted in web design. This feature appeared at a point in the history of the Internet when the amount of information to be presented on web pages increased, and the speed of connections allowed the reader to access and transfer information at greater rates. The question of infinite scrolling on web pages is one of the aspects involved in the user experience design, and isn’t as cut-and-dry as you might think. Beginnings and Popularisation At Google, it’s called continuous scrolling and can be also be referred to as endless scrolling. This technique is notably used in the news feed page on Facebook; the images search results page of Google and the Twitter timeline.
An interesting up-to-date example published for reference purposes can be seen at the Isotope jQuery plugin demo page. Mobile Form Usability: Place Labels Above the Field. This is the 2nd in a series of 8 articles on mobile usability that draw on findings from our mobile e-commerce usability report. On mobile, should the field label go to the left of or above the field?
After completing a large-scale usability study of 18 mobile e-commerce sites, which included test subjects completing more than a thousand mobile checkout form fields, the answer is: above, with one exception. The Issues with Left-Aligned Field Labels on Mobile The main issue with left-aligned field labels relates to the smartphone display size and aspect ratio. Quite simply, if a left-aligned label needs to be in front of the field, the narrow screen leaves very little space left for the field itself. Not being able to see their input caused trouble for numerous of the subjects during testing. This forced the subjects to fiddle around with the quirky text selection / panning tools. Label Above the Field Dynamically Change Label Position in Landscape Orientation. GDS design principles. Blog › Guidelines pour produire des PSD adaptés au web. Je préparais dernièrement un document pour un boulot afin de montrer à des boîtes de créa print comment faire des PSD propres pour le web.
Le but inavouable de la démarche était d’éviter de se retrouver avec des charniers inexploitables en intégration, chose qui arrive encore un peu trop souvent. Pas de règles de ninja ou de gimmicks avant-gardistes ici, juste des bonnes bases saines pour faire un boulot clean. J’ai omis sciemment les nouveautés CSS3 et autres gadgets pour me focaliser sur l’essentiel. Après avoir soumis ma petite liste sur Twitter et à quelques copains, j’ai constaté que beaucoup avaient leur mot à dire sur la question et il m’a paru intéressant de publier la chose pour avoir des retours plus complets. Dernière modification : le 12 juin 2014. Préparer le fichier Quelques règles de base et rappels simples pour préparer un document web-safe : Travailler en RVB et profil sRVB (pas de CMJN !). Adapter la créa aux contraintes web Et voilà. Design Tip: Never Use Black by Ian Storm Taylor. One of the most important color tricks I’ve ever learned was to avoid using the color black in my work.
Mrs. Zamula, my childhood art teacher, first warned me about black when I was in middle school. And I heard the same again multiple times at RISD. It sounds weird at first, but it’s good advice. Problem is, we see dark things and assume they are black things. Shadows aren’t black. In high school, I spent lots of my free time in the art room with a few other art-loving friends. I probably went through that book ten times. His shadows are some of the most saturated parts of his paintings, and that’s on the screen too. Now you might be thinking, “Yeah, but those are paintings. But I must have been thinking the same thing, because one of those days in art class Mrs. I was amazed. The corner of Chestnut and Polk. The darkest part of that image? Black overpowers everything else. When you put pure black next to a set of meticulously picked colors, the black overpowers everything else.
Mrs. Sticky Menus Are Quicker To Navigate. Advertisement Most designers would agree that navigation is one of the most critical components of a website. Despite this, it is not always easy to use or access. Traditionally, users must scroll back to the top of the website to access the navigation menu. I recently wondered whether sticky menus makes websites quicker to navigate, and I conducted a usability study to find the answer. Let’s look at the results of the study, a few implementation techniques and some related challenges. Sticky Navigation Defined Sticky, or fixed, navigation is basically a website menu that is locked into place so that it does not disappear when the user scrolls down the page; in other words, it is accessible from anywhere on the website without having to scroll. Usability Study Research Conditions For the study, I created two test websites that were nearly identical. 1. 2. 100% Preferred Sticky Menus Without Knowing Why Desktop Software Navigation Menus Some Good Examples Getting Started Avoid iFrames Conclusion.
It's Not All Doom And Gloom On The Web. The Anatomy Of A Perfect Landing Page. 21 Beautiful Contact Pages. As web designers, each project you work on has a unique set of goals and requirements. However, we all have one goal for all our projects – to impress people, creating the websites that are memorable. Who wouldn’t like this, right? To accomplish this purpose, we usually think of all kinds of content strategies or… For any website, content is the most important part. So, naturally, you would want it to be as simple and straightforward as possible, in order not to worry about viewers trying to understand the cryptic messages hidden behind poor color choices and messy fonts.
This is why not only the general design and imagery but… Have you ever had one of those bad days when it seems that everything is crashing around you? The summer of 2017 was a thrilling period for all fans of the “Game of Thrones” series. One Page Portfolio. Hand-coded HTML and CSS is what I do. It's what I'm good at so why not? Featured Project: Inspect Element My Portfolio About Me Now this is a story all about how my life got twisted upside down and I'd like to take a minute just sit right there I'll tell you how I became the prince of a town called Bel-Air. I whistled for a cab and when it came near the license plate said fresh and had dice in the mirror, if anything I could say that this cab was rare but I thought nah, forget it, yo home to Bel-Air!
16 Pixels: For Body Copy. Anything Less Is A Costly Mistake. 16 Pixels: For Body Copy. Anything Less Is A Costly Mistake Advertisement I know what you’re thinking. “Did he just say 16 pixels? I’d like to persuade you otherwise. As usability expert Oliver Reichenstein says in “The 100% Easy-2-Read Standard1”: [16 pixels] is not big. In this article, I’ll explain why 16 pixels should generally be the minimum size for body copy in modern Web design. You see, in most cases, if you’re building websites with the font size set between 10 and 15 pixels, you are costing your clients money.
Readership = Revenue If you’re building a website for someone — even yourself — chances are its purpose is to make money. Perhaps it’s to sell a product directly, or to offer a service, or just to generate leads. So, every element should be designed to achieve that goal. Think about it. Important Facts About Reading There are some particular findings that are pivotal to issues such as readership and readability and comprehension, which is really what body copy is all about.