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. Related:  Web page usability & SEO (Search Engine Optimization)

Design For Efficiency: Photoshop Techniques & Templates | Viget Inspire Yep, it's me again. The pro-process designer who wants you to use smart objects and break those awful Photoshop habits. Are you noticing a theme yet? I love efficiency. This time I'm breaking down my techniques for designing large sites and sharing tools for efficient comp production. Short on time? Mass Comp Production PROCESS. The techniques I outline here can be a big time-saver when you're tasked with producing 10 or 20 Photoshop comps, but they are beneficial for smaller sites too. I know I'm borderline OCD, and not everyone loves organizing their design files the way I do. Avoid find-it frustration. LAYOUT & STYLEGUIDE TEMPLATES: YOUR NEW BFFs When I'm starting up a big project, I always start with the two PSDs I am going to share with you. The layout template is my starting point, and usually ends up the base for dozens of additional templates. The style guide template has pre-loaded folders too. Here's what the layer structure looks looks like before tailoring:

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.

Set Your Measure: Optimizing Line Length for Reading | Adam D. Scott This post is part of a series entitled Better Web Typography that I will be publishing over the coming months. Widescreen monitors are quickly becoming ubiquitous and from high resolution desktop monitors down to little 13” laptops we’ve grown accustomed to designing for ample screen real estate. For many web designers this creates an overwhelming temptation to fill that space. Unfortunately, when setting blocks of type, this is often done at the readers expense. Simply put, though they can easily be found all over the web, long line lengths are difficult to read. In The Elements of Typographic Style, Robert Bringhurst suggests: Anything from 45 to 75 characters is satisfactory. 66-character lines are ideal. How Can This Translate to the Web? The most basic way to test the line length of our content is to subject it to the “alphabet test.” Below are the line measures for common web typefaces subjected to the 66 character alphabet test: Line Lengths & Flexible Layouts and instead write

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.

Website Stencil Kit — UI Stencils Brainstorm website and app ideas with ease using our precision cut Website Stencil Kit. Wireframe quickly and efficiently with the most commonly used iconography and interaction techniques. The kit includes:-Stainless steel stencil with all your favorite user interface iconography- 8 1/16 x 3 inches-Zebra mechanical pencil-Plastic protector-2 UI Stencils Stickers-Downloadable .PDF letter or A4 paper template This kit works precisely with our Responsive Sketch Pad or our Browser Sketch pad

« 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 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. <?

Ideal line length for content Date: 3 May 2003 Author: Russ Weakley Is there an ideal line length for content? To quote a passage from “Web Style Guide – Basic design principles for creating web sites”. The ideal line length for text layout is based on the physiology of the human eye… At normal reading distance the arc of the visual field is only a few inches – about the width of a well-designed column of text, or about 12 words per line. Research shows that reading slows and retention rates fall as line length begins to exceed the ideal width, because the reader then needs to use the muscles of the eye and neck to track from the end of one line to the beginning of the next line. The challenge I’d like to design a site that uses optimal line lengths. Layout methods Most websites lay out content used either fixed width (set to an absolute measurement) or flexible width (set to a percentage of the screen, so that it scales in or out based on the browser window). Flexible-width columns also have problems. A solution

User Experience Design Definitions User Experience "User Experience (abbreviated: UX) is the quality of experience a person has when interacting with a specific design. This can range from a specific artifact, such as a cup, toy or website, up to larger, integrated experiences such as a museum or an airport." Sources: UX Net, "'User experience' encompasses all aspects of the end-user's interaction with the company, its services, and its products. Source: "User Experience - Our Definition." Source: "The Elements of User Experience." “Information architecture defines the structure of information. Luke Wroblewski Source: InspireUX User Experience Design "[E]xperience design uses the interactions of customers with products, services and company branding to optimize the overall impressions left by these. Source: "What is User Experience Design," Montparnas. UXBASIS' model is based on a creative process of a four part cycle; plan, act, observe and refine. Source: UXBASIS Discussion See also

"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?

Making Infield Form Labels Suck Less Let me start off by saying you really shouldn’t put form labels—or even placeholder text—inside of form fields if you want to be safe. But we can’t always play it safe. Sometimes putting labels inside of form fields is the best option we’ve got. Jeremy Fields, Steve Schoeffel, and I found ourselves making that decision on a recent project, and we set out to make the best of a tricky usability situation. Why Shouldn’t I Put Labels Inside Of Form Fields? There are a number of usability issues with putting labels inside of form fields especially if they’re not implemented well. Text inside the field can get mixed with user input if it’s not removed from the field. If—like we did—you’ve found that infield form labels are your best option given the project requirements, there are some ways to mitigate these usability issues. Group related fields (e.g. addresses, credit card information) Clearly differentiate labels from user input Provide good visual feedback Pros: Cons: Example: Our Solution

10 Simple and Impressive Design Techniques - Smashing Magazine Advertisement Complex design techniques are often time-consuming and, well, complex. Some of these advanced effects1 can add plenty of depth to designs, but when used in the wrong place, they do little more than distract viewers from the project’s intended focus. These effects may be precisely what a design needs to have the impact it requires, but even in these cases, they should be complemented by simpler effects. Simple effects and techniques are the building blocks of today’s designs. With a “less is more” mentality, we’ve selected 10 very simple and impressive design techniques that can drastically improve the performance and appearance of your designs. For more techniques, you may want to look at our previous articles: The basics first. 1. Sadly, adding extra contrast is one of the most overlooked and under-used techniques. Joost de Valk5 makes great use of thin, high-contrast lines that make it easy for the user to distinguish between different section of the page. 2. 3. 4. 5. 6. 7.