Unminify JS, CSS and HTML Code Why Infield Top Aligned Form Labels are Quickest to Scan by anthony on 04/28/15 at 4:42 pm How easy is it for users to scan your form? If your form is hard to scan, it could take longer than expected for users to complete it. This leads to form abandonment and loss of potential sign ups. The way to avoid this is to make your fields quick to scan when users first see them and after they fill them out. Scanning Pre-fill and Post-fill When users first see a form, they scan it to size up the amount of time and effort it’ll take to fill it out. After filling out a form, users will scan it again to check if their input is correct. To prevent form abandonment, you have to make your fields quick to scan pre-fill and post-fill. Problem with Most Forms Today Most designers today align their form field labels in a way that takes time and effort to scan. The two most common ways are: Top aligned labelsInfield labels While both are quicker to scan than left aligned labels, users still experience scanning issues. Top Aligned Labels Many Visual Fixations anthony
Un défilement animé (« Smooth scroll ») en jQuery sans plugin | jQuery Nous avons vu précédemment comment réaliser un site de type one page en full CSS. On va maintenant égayer la navigation entre les rubriques en y ajoutant un effet de défilement animé (« smooth scroll ») en jQuery. Cet effet sera déclenché au clic sur un élément ayant une classe js-scrollTo (cela permet de ne pas limiter son application au menu et de faire fonctionner le défilement également sur des liens internes). Le préfixe js- permet de différencier les classes à vocations cosmétiques de celles dédiées à l’interactivité JS. Voir la démo Exemple avec les liens du menu : <ul class="menu"><li><a class="js-scrollTo" href="#page-1">Page1</a></li><li><a class="js-scrollTo" href="#page-2">Page 2</a></li></ul><div id="page-1"></div><div id="page-2"></div>
Linkedin, social icon | Icon search engine SVG - Base64 PNG - Base64 Help License: Creative Commons (Attribution-Share Alike 3.0 Unported) (help for licenses) Additional sizes Typicons - 308 vector (SVG) icons View all icons in icon set 1 comment By Stephen Hutchings Visit website SVG PNG AI CSH More Please wait SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More View all icons in icon set Related icons SVG PNG AI More SVG PNG AI CSH More SVG PNG AI More SVG PNG AI CSH More SVG PNG AI More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI More SVG PNG AI More SVG PNG AI More PNG More SVG PNG AI More PNG More SVG PNG AI More SVG PNG AI More SVG PNG AI More
Inline validation in forms — designing the experience — WDstack Designing the default UX At the end of this research, my conclusion is the following: Nobody knows what they’re doing, humanity is doomed and our only hope is the colonization of Mars. Ok, it’s not that bad. But, we still have some serious problems: There is no consensus on the default validation handlingDifferences between the sites are huge, we can’t expect users to be familiar with any of the presented approachesA lot of solutions are bug ridden, which is a good indicator of how hard it is to implement a good inline validation Let’s recap the questions stated before the research: When should the field be marked as dirty? If we can find the right answers to these questions, we can assure that the validation UX will be at least good. When should the field be marked as dirty? In the research, you could see both approaches: mark field as dirty as soon as the user focuses the fieldmark field as dirty after the user entered some data in it When should the errors be shown? The implementation
Inspiration : 15 animations CSS pour dynamiser vos call-to-action Les call-to-action ont un rôle essentiel puisqu’ils vous permettent de convertir les visiteurs de votre site. Nous avons déjà vu que l’efficacité d’un CTA dépend de son design et nous vous avons fournit quelques conseils pour perfectionner le design de vos boutons. Mais si cela ne suffit pas à inciter au clic, pourquoi ne pas ajouter de l’animation pour attirer l’attention de vos visiteurs ? Laissez vous inspirer par notre sélection de 15 animations CSS pour vos boutons. Mouvement autour du bouton Cette micro-interaction se compose de deux ronds bougeant autour de votre bouton. Attirés par ce mouvement, vos visiteurs passeront plus facilement la souris sur le texte, de dernier prenant alors la forme d’un véritable bouton. Effet zoom Ce bouton laissera apparaître un reflet dans le coin supérieur gauche du bouton et le texte sera zoomé au passage de la souris. Trouvez le graphiste idéalpour tous vos projets graphiques Style cartoon Bouton de téléchargement animé Formulaire caché Effet gluant
Le top des ressources gratuites en Web design pour 2012 Magazine du Webdesign C'est à cette période de l'année que l'on voit apparaître des centaines d'articles sur le Web du type : Les 10 meilleurs [...] de 2012. 20% des ressources gratuites pour Web designers listées dans ces articles peuvent susciter un certain intérêt, les 80% restantes sont à jeter. En voici quelques-unes qui ne finiront pas à la corbeille. Web Interface Lab Une collection d’éléments d’interfaces utilisateur gratuits codés en HTML5 et CSS3. Pixabay : plus de 40,000 photos et illustrations gratuites En tant que Web designers, vous êtes constamment à la recherche d’illustrations et de photos. The Entypo Pictogram Suite Une collection gratuite de pictogrammes . Gemicon Encore une ressource gratuite d’icônes, cette fois-ci c’est 600 icônes gratuites à utiliser pour tous vos designs. Other Icons On continue avec les icônes. Wireframe.CC L’outil incontournable pour du wireframing rapide et facile. Google Web Fonts Font Fabric Un showcase de fonts gratuites. Subtle Patterns Premium Pixels Agile Designers
Bad Forms | Examples of Good and Bad Web Form Design and Best Practices Moving Letters | Text animated with JavaScript & anime.js Source <h1 class="ml1"><span class="text-wrapper"><span class="line line1"></span><span class="letters">THURSDAY</span><span class="line line2"></span></span></h1> <h1 class="ml2">Sunny mornings</h1> <h1 class="ml3">Great Thinkers</h1> <h1 class="ml4"><span class="letters letters-1">Ready</span><span class="letters letters-2">Set</span><span class="letters letters-3">Go!</span></h1> <h1 class="ml6"><span class="text-wrapper"><span class="letters">Beautiful Questions</span></span></h1> <h1 class="ml7"><span class="text-wrapper"><span class="letters">Reality is broken</span></span></h1> <h1 class="ml8"><span class="letters-container"><span class="letters letters-left">Hi</span><span class="letters bang">! <h1 class="ml9"><span class="text-wrapper"><span class="letters">Coffee mornings</span></span></h1> <h1 class="ml10"><span class="text-wrapper"><span class="letters">Domino Dreams</span></span></h1> <h1 class="ml12">A new production</h1> <h1 class="ml13">Rising Strong</h1>
La nouvelle solution mobile de Wix Nous sommes fiers de vous annoncer le lancement de notre nouvelle solution mobile. Désormais, vous pouvez automatiquement optimiser votre site pour les smartphones et tablettes en un clic. Bien évidemment, il vous est possible de personnaliser son design à volonté – sans pour autant modifier son rendu sur les ordinateurs. Jouez avec la mise en page, masquez les éléments que vous désirez, redimensionnez votre contenu, le tout avec l’éditeur que vous connaissez (et appréciez) déjà. Profitez d’une liberté totale de customisation et offrez à vos visiteurs une expérience d’utilisation mobile unique. Pourquoi et comment optimiser votre présence sur l’Internet mobile? 40% des Français sont connectés sur le Web mobile, il est par conséquent essentiel de présenter un site mobile optimisé. Dans l’Éditeur Wix, il vous suffit de suivre les instructions ci-dessous afin de créer votre site mobile personnalisé : Pour les amateurs de vidéos, voici un tutoriel explicatif sur notre éditeur mobile:
That Web Guy - 15 steps towards better form usability Written January 2, 2012. 21 comments. In our never-ending battle to make our web sites as usable as possible, bringing a good user experience to a web form remains among the holy grails of usability. It shouldn’t be that difficult to achieve, but we keep seeing web sites that present forms in a exceedingly complex or outright unusable state. So in this article I’ll attempt to offer some best practices by demonstrating poor vs good examples of form design. For starters, here’s a list of 15 things to keep in mind for good form design. Use top aligned labels There’s a good reason for this, and you don’t need to perform your own eye tracking study to understand it. In the example above demonstrating top aligned labels, there are four visual fixations and only one visual direction (down). Never place labels inside the fields You see my cursor in the second field below? Clearly indicate mandatory fields If a field is required, then come right out and say it. Reduce the number of mandatory fields