Cima+

 
 

Propulser votre entreprise sur le Web

Les technologies SoleWeb, création de site web profesionnel.  
   

Blogue
Monde du Web SoleWeb

 


 

Tendances Web 2013-2014Les tendances Web 2014-2015

Le point de vue de l'internaute, l'Internet mobile, design web, commerce électronique, vidéos et publicité en ligne... Quels sont les nouveaux comportements des internautes ? Qu'en est-il des grandes tendances du Web ?

Lire la suite

 

Le "Responsive design" ou conception de sites web adaptatifs

Repenser l'approche de création d'un site Internet

offrir au visiteur une expérience de consultation optimale facilitant la lecture et la navigation en fonction de l'appreil utilisé...

Lire la suite

 
 

Google Checkout, Google Wallet, enfin disponible au Québec

Google Checkout, bientôt Google Wallet, est le système créé par Google pour compétitionner avec Paypal, mais il reste un produit encore inférieur, car il offre peu d'options en comparaison avec ses ... 

Lire la suite

 
 

Optimiser vos images

Une image vaut mille mots.

Une page remplie de texte dans un site Web n'incite pas à la lecture. L'apport d'un image augmente l'intérêt et la curiosité. L'image idéale est celle qui résume le plus le contenu de la page....

Lire la suite

 
 

Creation d'un formulaire Web SoleWebLa conception d'un formulaire pour le web.

Les problématiques de lisibilité, d'organisation visuelle et de choix des champs sont les points centraux dans la conception d'un formulaire. On peut dégager certains standards mais les choix d'interface sont souvent ...

Lire la suite

 
 

La première impression - conception d'un site WebLa première impression

Premier coup d'œil.

Lors de la conception d'un site Web, un même design ne produit pas le même effet sur papier que sur ecran. Le design web est un compromis entre une présentation possédant un graphisme époustouflant, permettant de donner une ... 

Lire la suite

 

 

La charte graphique

Un site intègre de la première à la dernière page. 

Une charte graphique est l'ensemble des règles graphiques, colorés et formels créés pour la communication imprimée (ainsi que d'un site Web). Cette charte a pour but de faciliter le quotidien de chacun en fournissant des...

Lire la suite

 
 

Google Panda / penguinGoogle Panda et Penguin - Nouveauté pour le référencement (SEO)


Depuis les mise à jour des Algoritmes de référencement de Google, comment devons-nous réagir pour avoir un bon positionnement ?
 

Google Panda a été initialement décrit comme une mise à jour visant à sanctionner les fermes de contenu et sactionner les site de mauvaise qualité.

Lire la suite

 

Conception d'un formulaire

 

La conception d'un formulaire pour le web.

 

Les problématiques de lisibilité, d'organisation visuelle et de choix des champs sont les points centraux dans la conception d'un formulaire. On peut dégager certains standards mais les choix d'interface sont souvent dictés par le " pourquoi " du formulaire.

Cet article présente les standards de conception de formulaires et quelques recommandations à adapter à la spécificité de chaque situation.

Qu'ils servent à envoyer un message, acheter un produit ou remplir un questionnaire, les formulaires doivent respecter certaines règles. Une des plus importante consiste à demander uniquement ce qui est essentiel. Nous savons que les formulaires trop long à remplir ne seront pas utiliser.


Champs obligatoires

 

La lisibilité d'un formulaire passe aussi par une détection rapide de ce qui est "obligatoire" et de ce qui ne l'est pas. Il est donc essentiel de penser à spécifier les champs obligatoires (par un * par exemple).

Une légende être placée avant ou après le formulaire. 

 

La légende peut être une phrase du type:

 
 -Les informations marquées d'un * sont obligatoires, ou
 - * indique un champ obligatoire.

 

 

Le choix des éléments de formulaire

 

La première étape dans la conception d'un formulaire consiste à déterminer son utilité, ce à quoi il doit servir, et les informations qu'il doit permettre de recueillir. Il faut trouver la manière optimale de questionner l'utilisateur.

Un formulaire se décompose en différents éléments de formulaire.

Le champ texte " ligne "

 
Controle de formulaire Web SoleWeb - Champ Texte

 
L'élément "Ligne" permet d'obtenir des données textes sur une seule ligne.

Règle(s) à retenir: dépendamment du contenu, prévoir un espace suffisant pour que toute l'information soit visible.

Le champ texte " Courriel de  l'expéditeur "

 

Controle de formulaire Web SoleWeb - Champ Courriel

 
Pareil à L'élément "Ligne" mais permet d'obtenir le courriel du visiteur. Lors du traitement, le formulaire passera cette information pour que vous puissiez répondre sans retaper l'adresse. Ce champs vérifiera la validité du courriel entré.

Règle(s) à retenir: dépendamment du contenu, prévoir un espace suffisant pour que toute l'information soit visible.

 
Champ Courriel d'un formulaire Web

Exemple :
 Exemple de taille de champ - formulaire SoleWeb
les deux champs lignes "Courriel" et "ISBN" n'ont pas la même taille du fait de la différence des informations attendues.

 

 


Le champ texte " multi-ligne "

 
Création d'un formulaire Web - champs multi-ligne

 
L'élément "multi-ligne" permet d'obtenir un champ texte de plusieurs lignes.  Une barre de défilement va automatiquement apparaître si le texte est plus long que l'espace alloué.

Règle(s) à retenir : prévoir un espace assez grand pour que l'information soit facile à relire.

Exemple :

Creation d'un site Web  - Formulaire exemple d'un champs multiligne

 
le champ détails permet a un visiteur d'expliquer son problème.

 

 


Le bouton radio

 
controle de création d'un formulaire SoleWeb - Bouton radio

 
L'élément "Bouton radio" correspond à un élément de formulaire permettant une sélection unique. Il n'y aura alors qu'une seule réponse valable.

Exemple d'utilisation de boutons radio :

 
Conception d'un formulaire Web - Exemple de bouton radio

 
choix entre plusieurs options de système d'exploitation.

Règle(s) à retenir : Les boutons radio sont des éléments qui ne peuvent fonctionner qu'en groupe (c'est à dire au moins deux boutons radio). Il ne peut donc pas exister d'interface avec un seul bouton radio.  Le tout doit être placé par défaut sur l'option la plus fréquemment choisie, ou que l'on suppose la plus appropriée en fonction d'une analyse de la tâche.

 

 


La case à cocher

 
Conception d'un site Web avec SoleWeb -  Formulaire - Case à cocher

 
L'élément "Case à cocher" permet d'obtenir des réponses binaires (coché = oui, décoché = non).

Règle(s) à retenir : Les cases à cocher peuvent être présentées seules.

Exemple d'utilisation de cases à cocher:

 
élaboration d'un formulaire - exemple de cases a cocher

 
La présence des 3 cases à cocher (Vendredi, Samedi et Dimanche) permet à l'utilisateur d'effectuer :
- Une sélection unique (une option parmi les 3 proposées);
- Une multisélection (2 ou 3 options parmi les 3 proposées).

 

 


 

Le menu déroulant

 
Création d'une page Web - L'élément Menu déroulant

 
L'élément "Menu déroulant" permet d'obtenir une liste d'options avec un libellé (texte) visible. Ce type d'élément d'interface permet de proposer un grand nombre d'options sans prendre beaucoup de place à l'écran. L'utilisateur ne peut faire que des choix uniques.

Règle(s) à retenir  : Le choix montré lors de la première utilisation doit être le choix par défaut ou un libellé invitant le visiteur a faire un choix. Vous pouvez aussi mettre comme libellé une description du choix à faire, par exemple " sélectionner votre âge ".

Exemple d'utilisation de menus déroulants : 

 
Menu déroulant standard

 
Exemple de menu déroulant

 
Ligne avec 3 menus déroulant vous indiquant le type de choix a faire.

 

 


Organisation visuelle du formulaire

Présentation générale du formulaire

La conception d'un formulaire doit avoir pour objectif de permettre aux utilisateurs de le renseigner rapidement et efficacement

Un formulaire est généralement présenté sur une seule page pour facilité la rapidité d'exécution (Le passage d'un champ au suivant peut toujours se faire au clavier et très rapidement, sans rechargement de la page).

Groupement et ordonnancement des champs

Un travail très important lors de la conception d'un formulaire consiste à rendre l'interface claire et lisible. Il s'agit de choisir quels champs "vont ensemble", et dans quel ordre on affiche ces champs. On devra donner à chacun des groupes de champs, un titre.

En général, on recommande dans la conception des formulaires, de se baser sur les habitudes des utilisateurs (par exemple pour des personne qui remplissent des formulaires de commandes ou de vente, le formulaire en-ligne doit ressembler au formulaire papier).

Les champs dont la probabilité de remplissage est moindre ou les champs  optionnels, pourront être groupés dans une catégorie à la fin du formulaire.

Alignement des champs et des libellés

Pour optimiser l'organisation visuelle d'un formulaire, on doit aussi se préoccuper des rapports libellés / champs. Il s'agit de jouer sur l'alignement pour que l'apparence du formulaire aide la lecture.

En règle générale, il est appréciable que tous les champs soient alignés. On essaie plutôt de jouer sur l'alignement des libellés aux champs. Ceci permet que l'organisation visuelle du formulaire conserve une certaine cohérence et soit ergonomique pour l'utilisateur.

Les avantages d'un alignement à gauche des libellés sont essentiellement liés à la facilité de lecture. C'est en fonction de la taille des libellés que l'on décidera d'un alignement à gauche ou à droite:

Alignement à gauche

Les libellés sont dits alignés à gauche lorsque qu'ils débutent tous au même endroit sur un repère horizontal. Il est recommandé d'aligner les libellés à gauche lorsque le nombre de caractères séparant le libellé le plus long de celui le plus court ne dépasse pas 6 caractères.

Exemple :

 
Lorsque les libellés du formulaire ont une longueur comparable, il est plus adapté de les aligner à gauche. Ceci facilite en effet la lecture.

Alignement à droite

Exemple :

 
les libellés de ce formulaire sont alignés à droite. Cela permet de conserver une distance libellé - champ raisonnable malgré la longueur du libellé "Nombre de joueurs".

 

SoleWeb vous permet de créer votre formulaire sécurisé, en prenant en charge les champs obligatoires, la page de confirmation et la page d'erreur, et cela sans avoir a créer une seul ligne de code.


Retour au Blogue



HTML Comment Box is loading comments...