background preloader

An Extensive Guide To Web Form Usability - Smashing UX Design

An Extensive Guide To Web Form Usability - Smashing UX Design
Advertisement Contrary to what you may read, peppering your form with nice buttons, color and typography and plenty of jQuery plugins will not make it usable. Indeed, in doing so, you would be addressing (in an unstructured way) only one third of what constitutes form usability. In this article, we’ll provide practical guidelines that you can easily follow. Why Web Form Usability Is Important The ISO 9241 standard defines website usability as the “effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments.” Let’s clarify this last point by discussing the three main uses of forms. Uses of forms, based on Luke Wroblewski’s Web Form Design: Filling in the Blanks2. Thus, the relationship between forms and usability have two aspects: Forms can make a website usableor unusable, because they stand in the way of the user achieving their goal;Forms need to be usablein order to help the user achieve that goal. Aspect 1: The Relationship 1.

Meaningful Transitions // Home Meaningful Transitions - Motion Graphics in the User Interface »Meaningful Transitions - Motion Graphics in the User Interface« deals with the use of animations in the user interface. It documents transitions in a clustered way to show at which point transitions can be a helpful extension to a static user interface, because of cognitive benefits to enhance the user experience. The purpose of Meaningful Transitions is to illustrate the process of the interaction and the structure of the user interface. »Does your animation have weight, depth and balance? Does your animation have weight, depth and balance? This Website was created in context of the Interface Design Bachelor's degree at the FH Potsdam 2011 by Johannes Tonollo. »Meaningful Transitions - Motion Graphics in the User Interface« deals with the use of animations in software user interface. Click to read »Meaningful Transitions - Motion Graphics in the User Interface« (Preview/German)

The Future Of CSS: Embracing The Machine - Smashing Coding Advertisement Designers hold CSS close to their hearts. It’s just code, but it is also what makes our carefully crafted designs come to life. Thoughtful CSS is CSS that respects our designs, that is handcrafted with precision. But how does this tradition fit in a world where the websites and applications that we want to create are becoming increasingly complex? Looking Back If we look back in history, deep into the Industrial Revolution, we will see a parallel with what will happen with our handcrafted style sheets once the complexity of the products that we want to build becomes too great. The Industrial Revolution1 (which took place approximately between the middles of the 18th and 19th centuries, starting in the UK) was a period of upheaval in society; several aspects of life were changing. One of the many products of the Industrial Revolution. These machines that were created with efficiency in mind were initially quite primitive, and the public didn’t know what to think of them.

42 Famous Login and Registration Forms Today, I want to showcase some of the most famous login and registration forms on the web. As a web developer you might be interested in having a compact overview of the different designs of these essential website elements. For your design, what would you do better? Do you think being a top site gives […] Today, I want to showcase some of the most famous login and registration forms on the web. As a web developer you might be interested in having a compact overview of the different designs of these essential website elements. For your design, what would you do better? Share your opinion and maybe you have some interesting showcases to add? I hope you enjoy it! 1. Well, Google is Google, so fancy design is never a really big topic. 2. Flawless in functionality, I would say. 3. Now, what I don’t really get, are these changes of style within Google. 4. 5. 6. 7.

« Responsive Web Design » : Aperçu du livre La semaine dernière j’ai eu la chance de recevoir dans ma boîte aux lettres, le quatrième opus, en version presse, des excellents petits livres de poches de la collection « A Book Apart », édités par Eyrolles. Ce dernier est intitulé : « Responsive Web Design ». Les précédents de la série étaient : A ce propos, je vous conseille de lire les différentes critiques que j’ai pu faire sur ces trois livres, qui je l’espère vous incitera à les lire. Ethan Marcotte, auteur du livre est connu dans le cercle du développement Web. Voici donc mes notes à propos du livre ! Avant de commencer je vous propose d’introduire le sujet avec une introduction récupérée sur l’excellent alsacreations : La spécification CSS3 Media Queries du W3C définit les techniques pour l’application de feuilles de styles en fonction des périphériques de consultation utilisés pour des pages (X)HTML. Très prometteur comme introduction non ? Au sommaire Comment est abordé le sujet ? Ce que j’en pense…

Using XML with MySQL Paul DuBoispaul@kitebird.com Document revision: 1.01 Last update: 2003-01-24 Table of Contents Introduction A growing number of applications today use data represented in the form of XML documents. XML as a data transfer medium. You can use XML from within any language that has the appropriate processing tools available. The examples shown here assume that you have a MySQL database named test on the local host, accessed through a MySQL account with a user name and password of testuser and testpass. Writing Query Results as XML Suppose that you want to produce XML output from a table named animal that has two string columns: +--------+-----------+ | name | category | +--------+-----------+ | snake | reptile | | frog | amphibian | | tuna | fish | | racoon | mammal | +--------+-----------+ The information in the table can be retrieved easily using a simple SQL statement: SELECT name, category FROM animal The question is how to convert the information residing in MySQL to an XML representation. <?

"Accessibilité du Web - Glossaire Web - Paris-Web" Aller au contenu – Aller à la navigation Glossaire Web Dans le cadre des conférences Paris Web Accessibilité du Web Dans une acception large, un site accessible est un site conçu suivant des standards qui rendent son contenu et ses fonctionnalités accessibles : aux personnes ayant une faible connaissance d’internet ou une faible bande passante, aux personnes qui naviguent avec des périphériques restreints, aux outils manipulant le contenu (robots d’indexation des moteurs de recherche, traducteurs automatiques, etc.). Vous entendrez ce mot lors des conférences suivantes : Je veux un VRAI sous-titrage ! Éditer cette entrée Retour au Glossaire Index Alphabétique Paris Web 2011 c'est : Nous suivre Fonctionnement du site Pour ajouter une nouvelle entrée dans le Glossaire, aller sur la page Entrée Glossaire Pour modifier un texte, double cliquez sur le texte pour l'éditer rapidement si vous êtes enregistré sur le site. À propos

Semantics in HTML 5 I’m going to make a bold prediction. Long after you and I are gone, HTML will still be around. Not just in billions of archived pages from our era, but as a living, breathing entity. Too much effort, energy, and investment has gone into developing the web’s tools, protocols, and platforms for it to be abandoned lightly, if indeed at all. Let’s stop to consider our responsibility. HTML 5, the W3C’s recently redoubled effort to shape the next generation of HTML, has, over the last year or so, taken on considerable momentum. There are also revisions to the structure, syntax, and semantics of HTML, some of which Lachlan Hunt covered in “A Preview of HTML 5.” But for this article, let’s turn solely to the semantics of HTML. The BBC recently announced that they would drop the hCalendar microformat from their program listings, due to accessibility and usability concerns with the abbr design pattern. This is not simply a theoretical problem. Extensible semantics#section1 But how about this?

8 critères ergonomiques pour évaluer la persuasion d’un site Cela fait près de 18 ans que les professionnels se basent, entre autres, sur les critères ergonomiques de Bastien et Scapin. Bien qu’ils soient toujours pertinents et utiles, ils ne sont plus suffisants pour représenter la réalité actuelle du Web. La tendance est à la recherche de persuasion et, bien qu’on en parle de plus en plus sur Internet, c’est un domaine qui manquait cruellement de référence pratique. Ce n’est plus le cas. Dans sa conférence du 29 avril 2011, Eric Brangier nous présentait des critères d’évaluation de la persuasion. Ces critères, qui devraient être publiés bientôt sur le site du laboratoire ETIC de l'université Paul Verlaine, vont permettre d’ouvrir de nouvelles voies dans l’évaluation et la conception d’interfaces. Avant la persuasion : évolution des recherches en ergonomie Durant les 40-50 dernières années, les recherches en ergonomie des interfaces ont beaucoup évoluées. Critères d’évaluation de la persuasion Les critères suivants sont organisés en deux groupes.

Art and the Web: Drawing: Part II We are excited to announce Treehouse’s second book called ‘Art and the Web: Value, Texture, & Color’ written by Nick Pettit. This book is part of a larger series that Nick is writing about the elements and principles of art, as they relate to the web. We are releasing each chapter as a blog post on Think Vitamin and at the end, you will be able to download the entire book for free. — Ryan Carson. To get you caught up, here is Drawing: Part I Drawing: Part II I strongly believe every web professional should possess some degree of artistic skill. In the series "Art and the Web", we’re exploring the elements and principles of art, and nothing reinforces concepts better than putting them into practice. Albrecht Dürer, The Little Owl (1508) Exercises Drawing takes a lot of practice, so don’t be discouraged if your first (or twentieth) attempts are bad. Shade a Sphere Most beginning drawing students will focus heavily on using lines to reveal the form of objects. Gather Textures Study a Color

Innovative Techniques To Simplify Sign-Ups and Log-Ins - Smashing Magazine Advertisement There are many ways to design sign-up and log-in forms. Most designers are familiar with the conventional ways. Simplifying Sign-Ups The purpose of every sign-up form is for users to complete it successfully and send it in. Ask for a User Name After The User Has Signed Up Sign-up forms typically ask users to create a name that is unique to the website. Require Users to Type Their Password Only Once Many sign-up forms ask users to type their password in two different fields. In reality, though, this allows for greater error, because it forces users to type more. A more efficient approach would be to ask users to type their password in once, but then include a box they can check to unmask the password, so that they can check it. jQuery Plug-In for Masking Passwords Auto-Fill City and State Fields Based on User’s ZIP Code If you require the user’s home address, then consider auto-filling the city and state fields based on the ZIP code. Auto-Complete the Country Field Conclusion

OpenClassroom Full courses. Short Videos. Free for everyone. Learn the fundamentals of human-computer interaction and design thinking, with an emphasis on mobile web applications. A practical introduction to Unix and command line utilities with a focus on Linux. Introduction to fundamental techniques for designing and analyzing algorithms, including asymptotic analysis; divide-and-conquer algorithms and recurrences; greedy algorithms; data structures; dynamic programming; graph algorithms; and randomized algorithms. Database design and the use of database management systems (DBMS) for applications. Machine learning algorithms that learn feature representations from unlabeled data, including sparse coding, autoencoders, RBMs, DBNs. Introduction to discrete probability, including probability mass functions, and standard distributions such as the Bernoulli, Binomial, Poisson distributions. Introduction to applied machine learning. This is a course created to test the website.

10 conseils d’ergonomie basés sur des études de recherche Internet abonde de conseils utiles sur l’ergonomie de sites Internet. Nous prenons au sérieux ceux qui apparaissent être les plus logiques. Mais il est parfois réconfortant de voir certaines théories qui circulent validées par des recherches sérieuses. Cet article traite des résultats de plusieurs recherches sur l’ergonomie, dont, entre autre, la captation du mouvement des yeux sur une page Web, les analyses et rapports sur l’utilisabilité et la convivialité, et enfin, des idées pour améliorer le design. Beaucoup de ces conseils, tel que mentionné précédemment, semblent de mise, mais ils sont enfin soutenus par des statistiques. D’autres, par contre, vous surprendront peut-être et changeront votre opinion sur certaines coutumes actuelles. 1. L’idée que les utilisateurs seront frustrés s’ils doivent cliquer plus de trois fois pour trouver le contenu qu’ils cherchent sur votre site Web circule depuis bien longtemps déjà. Mais pourquoi une limite arbitraire de trois clics ? 2. Le Dr. 3. 4.

How Disregarding Design Limits The Power Of Content - Smashing Magazine Advertisement It appears to be a reader’s market. More written content is freely available than ever before, accessible in just about every format you could imagine. As soon as I ask that question, several others quickly follow: Is content so flexible? These questions didn’t randomly pop into my head one day. I decided to see for myself by examining several pieces of content and comparing how they look and function in a variety of incarnations: the printed page, the Web and eReaders. A Very Brief History of Content and Design Long ago, when we humans first began writing things down, there wasn’t a clear difference between pictures and words. In order to properly document the wealth and splendor of their kings, Sumerian scribes had to repeatedly etch up to hundreds of animal pictograms onto clay tablets. On the left, an example of logographic writing. Sometimes words are enough. Even Basic Formatting Carries Meaning What you’re looking at above is a recipe for cookies. 1. 2. 3. But Wait! 1.

Innovations - Le responsive design: le nouveau visage d'Internet? Publié le 05 janvier 2012 Les usages digitaux évoluent et entrainent dans leurs sillages une prolifération des supports. Portables, tablettes, ordinateurs, netbooks ou smartphones, le défi à venir sera de pouvoir harmoniser cette démultiplication de l’écran. Eclairage par Dagobert dans sa dernière étude sur le sujet… Réponse concrète à la prolifération des formats d’écran, le responsive design, qui agite les spécialistes depuis quelques mois, est une approche radicalement novatrice dans la distribution de contenus et services en ligne. Aujourd’hui et depuis plusieurs années, les professionnels de la com et les consommateurs font face à la multiplication des terminaux: ordinateurs fixes, ordinateurs portables, smartphones aux tailles d'écrans variées, tablettes et bientôt téléviseurs connectés… Les résolutions et tailles d’écrans se font plus nombreuses, sans compter les différences et les nouvelles habitudes de lecture. Sylvain Bénémacher La suite de l'étude ci-dessous :

Related: