Combien de fois avez-vous terminé un projet, seulement pour regarder en arrière et dire: 'Si seulement je pouvais remonter le temps et tout recommencer avec ce que je sais maintenant!?' Au moins j'y ai pensé.
Cela nous arrive à tous; nous sommes ravis d'un nouveau projet. Nous plaisantons avec le client sur le site Web actuel, signons les contrats, puis commençons les plans et les prototypes. Lorsqu'il s'agit de petits projets, ces types de stratégies pourraient fonctionner. Mais lorsqu'il s'agit de grands projets, de croissance soudaine et de changements imprévus après la première présentation. Et si vous terminez le projet, vous vous retrouverez probablement avec une pollution visuelle qui ressemble à ce que vous étiez censé réparer, seul celui-ci aura l'air un peu mieux que l'original.
l'efficacité inhérente au traitement de gros volumes sur des ordinateurs plus gros est appelée _____.
Une bonne conception de flux de travail commence par un bon processus de planification. Tweet
Un bon design et un bonne expérience utilisateur Ils ne partent pas d'un prototype ou d'une maquette attrayants, ni d'un plan directeur, mais avec une base conceptuelle axée sur les objectifs de l'entreprise. Et ces objectifs ne sont pas «Faisons un site Web plus simple et plus beau». Comme vous êtes responsable de la UX Oui OIGNON (Expérience utilisateur et interface utilisateur), il est donc nécessaire de veiller à ce que les utilisateurs aient la meilleure expérience dans l'interface en cours de conception. Et pour y parvenir, vous devez planifier soigneusement dès le début.
Recherche initiale pour la conception de pages Web
Une fois l'enquête initiale du champ client et son concurrence , la prochaine chose à faire est de savoir par quoi commencer. Vous pouvez avoir un prix distinct pour cette analyse (qui sera inclus dans le devis final du projet). Cela évitera les citations élevées et ambiguës qui sont censées inclure tous les éléments qui sortent plus tard.
Le client à traiter en exemple est une organisation à but non lucratif dans le domaine de l'archéologie. L'entreprise explore et protège les sites archéologiques du sud-ouest du pays. Actuellement, le site Web est extrêmement désorganisé. Imaginez des montagnes et des montagnes de contenu vaguement organisé sur un ancien portail cms. Dans cet esprit, la première étape consiste à organiser votre contenu.
Étape 1: Familiarisez-vous avec le contenu
Lorsque vous construisez une nouvelle maison, vous n'effondrez pas tous les murs sans d'abord enlever ce qui se trouve à l'intérieur. Le premier objectif serait d'entrer dans toutes les pièces et d'en retirer tout le contenu. Dans Design Speak, nous devons accéder à toutes les entrées et déterminer celles qui doivent être statiques et celles qui contiennent du matériel à publier.
Avoir les informations peut faire une stratégie pour mieux organiser le site. En principe, on ne vérifie pas ce qui doit être éliminé définitivement et quoi non, car dans le monde réel cela ne fonctionne pas de cette manière. Chaque partie du portail est affectée à une équipe de travail, car il y a beaucoup de contenu. Il est préférable de tout classer en premier.
Habituellement, vous commencez par la page principale, puis le reste des pages est analysé. De cette façon, j'ai un aperçu du site Web avant la première réunion. Bien que ce ne soit pas le cas pour le projet que nous avons ici, pourquoi la plupart des liens étaient cachés dans le contenu et n'étaient pas accessibles dans la navigation initiale du portail, (si le devis du projet était basé sur la navigation principale ou page, ce sera le moment où vous le regretterez). Une fois qu'on a parlé à différentes personnes de l'équipe du client, la situation pourrait être clarifiée pour continuer.
En fin de compte, la solution était de parler au client et d'avoir une séance de brainstorming ( réflexion ). Au cours de cette session, le client a été invité à identifier les caractéristiques, le contenu, le flux de travail et l'orientation de la page Web. Ensuite, les noyaux suivants ont été établis ( types de noyau ), certains sont nouveaux et certains sont déjà établis:
La partie la plus difficile de ce projet est que les liens n'étaient pas disponibles à première vue, mais cachés dans le contenu du site. Et une fois le client et son équipe discutés, le projet pouvait continuer.
Étape 2: Création du focus, simplification et organisation
Avec le contenu de la maison hors de la maison, emballé et étiqueté, il est temps de faire les plans d'une nouvelle maison qui aura un meilleur style et montrera le contenu d'une meilleure manière. Mais avant d'y arriver, il faut se concentrer.
Selon le client, les utilisateurs qui visitent le site Web recherchent des informations sur l'archéologie, telles que leurs projets de recherche, voient les événements à venir ou lisent le magazine mensuel. Même si ce sont les zones de contenu où les utilisateurs se retrouvent, le site Web ne tourne pas autour d'eux; Afin de trouver le centre d'intérêt du portail, vous devez faire attention au cœur de l'organisation.
Il a été défini que «l'emplacement» est au centre du contenu. Sans l'emplacement ou l'emplacement, les sites archéologiques, les ruines, les musées ou les expositions n'existeraient pas. À la base, l'archéologie tourne autour des lieux.
Une fois que vous êtes concentré, il est temps de simplifier et d'organiser. Vous trouverez ci-dessous le contenu qui a été extrait du site et qui n'était pas lié à des emplacements, tels que les pages d'équipe, les rapports annuels, etc. Après avoir trié et catégorisé le contenu, cette carte a été obtenue:
numéros de carte de crédit piratés avec tous les détails
Maintenant, vous avez deux zones principales «À faire» et «Emplacements». Dans 'Choses à faire', tous les sujets liés à l'organisation sont traités, tandis que dans 'Lieux', le contenu lié à un emplacement spécifique est couvert. L'utilisateur moyen peut ne pas connaître le nom de la vidéo ou du projet, mais l'emplacement où il a été développé. Par exemple, dans la section projets, l'utilisateur pourrait trouver celui qui l'intéresse grâce à son emplacement.
En outre, il existe une couleur pour chaque type de message. D'un point de vue organisationnel, les événements en ligne, les expositions, les cours et les expositions sont tous essentiellement des événements, mais il en existe différents types.
Sur le site actuel, il y avait une page statique pour un magazine et une pour le magasin. Il a été décidé d'éliminer l'étape supplémentaire consistant à se rendre en magasin et de disposer à la place d'un modèle pour les articles de magazine en magasin. Le reste est simple: une page avec des informations sur l'organisation, un lien direct vers le magasin, une page de don (pourquoi ces pages génèrent des bénéfices et ont besoin d'une section dans le navigateur principal), aussi de nouvelles pages pour les mises à jour et un lien direct vers le magasin / des dons. Parce que ces pages rapportent de l'argent, elles méritent une place dans la navigation principale. Vous avez maintenant le plan de projet et il est temps d'y lier le contenu.
Étape 3: bouclage du client
Dans le plan du site affiché ci-dessus, les types de page sont inclus mais pas le plan de contenu. Comme vous le savez peut-être déjà, la plupart des problèmes surviennent une fois que le client commence à ajouter du contenu sur le site. Pour éviter cette situation, une boucle est faite avec le client depuis le début. La prochaine chose à faire est de créer un document Google avec le plan du site que nous avons, puis de l'envoyer au client pour nous dire quel est le contenu actuel et comment il souhaite le mapper dans la nouvelle structure.
Si quelque chose ne convient pas, cela peut être résolu plus tard. C'est l'une des étapes les plus importantes, car elle n'implique pas seulement le client, mais nous permet également de connaître les problèmes de structure avant le début de la mise en œuvre. Pour le projet dont nous traitons, il s'est avéré que certains éléments du plan du site ont été modifiés par rapport au menu; Comme le client avait plusieurs pages de dons, la solution était de créer un article unique pour eux.
Création de structure visuelle par wireframing
La prochaine chose à faire est de créer une structure visuelle pour le site. Pour que la fonction système fonctionne avec succès et pour réaliser l'idée de «tout ce qui concerne l'emplacement», une relation bidirectionnelle a été créée entre les différents types de messages.
définition du principe de conception
Voici l'idée: lorsqu'un visiteur arrive sur le site archéologique et choisit le Grand Canyon, il verra non seulement les informations sur le lieu, mais il trouvera également les événements, les projets, les expositions et tout ce que le client a lié en relation à la page du Grand Canyon. Et donc nous nous retrouvons avec quelque chose comme ça:
La page d'index des emplacements affiche les lieux les plus récents en haut. La barre de recherche est la première chose que l'utilisateur verra en entrant dans la page. Lorsque l'utilisateur entre sur le site, il pourra voir la carte Google sur 80% de l'écran, et lorsqu'il choisit un point dessus ou qu'il consulte la page, le réseau de listes apparaîtra pour faciliter sa recherche.
Sur une page de localisation individuelle, la navigation principale sera sur la gauche, car ce sont les informations les plus pertinentes, tandis que les méta-informations relatives à l'emplacement seront sur la droite. Lors de la conception d'un plan, pour obtenir une bonne composition, vous devez disposer de blocs bien définis d'éléments primaires, secondaires et tertiaires. Ainsi, l'œil humain suivra chacun sans se coincer dans un seul élément.
Dans cette mise en page, l'utilisateur commencera à l'en-tête du site, puis continuera au bloc de contenu, puis aux informations à droite. Chaque segment de contenu associé est affiché par ordre de pertinence et d'importance. Si l'utilisateur lit des informations sur le Grand Canyon, par exemple, cela sera probablement suivi de photos et d'une carte de l'endroit.
Ce site est essentiellement éducatif, donc 'Relatif à cet emplacement' viendra plus tard. Étant donné que le client n'a pas beaucoup d'informations uniques associées à chaque emplacement, le contenu à peine utilisé a été combiné en un bloc unique sous le menu du site.
Le fait de placer des miniatures du magazine et des vidéos dans le contenu associé ajoute des éléments visuels supplémentaires et guide les utilisateurs vers la page «acheter». La page se fait en vous montrant les emplacements car cela incite les utilisateurs à continuer à naviguer sur le site Web.
L'étape suivante consiste à continuer avec cette structure pour d'autres types de messages. En voici quelques uns:
Maintenant que nous avons un modèle général pour les types d'articles, je peux me concentrer sur la page principale. Comme pour toute interface utilisateur, la première étape consiste à atteindre l'objectif de la page d'accueil. Une étude des clients a montré que de nombreux utilisateurs tombent sur le site sans comprendre pleinement de quoi il s'agit. Par conséquent, une introduction et un texte de bienvenue devraient être la première chose que les utilisateurs voient. Le nouvel objectif central tourne autour des lieux et cela devrait être le bloc secondaire, suivi de ce qui se passe sur ArcheologySouthwest.org (magazine actuel, blog, événements, actualités, etc.). Voici l'itération du processus de conception:
Avec la V1, une mise en page de base a été créée qui ressemble à la page initiale. Il n'y a pas beaucoup de hiérarchie; La première chose qu'un utilisateur verra est l'endroit en vedette, puis il se perdra dans les colonnes. Avec V2, une colonne séparée a été créée, ce qui facilite le suivi. Cependant, il y a encore place à l'amélioration. C'est là que la connaissance du contenu joue un rôle important. ArcheologySouthwest.org est connu pour ne pas avoir plus de deux événements à la fois, il est donc inutile d'en avoir plusieurs sur la page d'accueil. Dans la V3, l'accent est mis sur les événements à venir. Par conséquent, s'il y en a plus de deux, l'utilisateur peut cliquer sur un bouton «plus» et voir le reste. Un accent supplémentaire a également été mis sur le magazine actuel, car il est la source d'argent du client. Les utilisateurs commencent par le haut et avec l'utilisation d'un motif F, ils se déplacent vers le bas. Alors maintenant, le flux de l'œil est Emplacement> Bienvenue> Magazine> Événements> Actualités.
Maintenant que vous disposez d'un filaire visuel et d'une structure de site, il est beaucoup plus facile de solidifier les fonctionnalités et le fonctionnement des choses. Vous avez une autre réunion avec le client pour passer en revue la fonctionnalité réelle (qui vient maintenant à la lumière) et le flux d'interaction de l'utilisateur. On sait qu'il y aura encore des ajustements à la fin, mais ce ne sera que des ajustements et non des changements dans l'ensemble du processus. Le plus important est qu'il n'y aura pas de surprises.
Conception de pages Web
Maintenant pour la partie passionnante. Convertir le filaire en quelque chose que les gens utiliseront et apprécieront. Avec ce design, ils voulaient renforcer le flux beaucoup plus grâce à l'utilisation de marquages colorés et de typographie. Le guide de style du client est le suivant:
Commencer par la typographie
La typographie est la base d'un bon design et c'est pourquoi elle a été déterminée dès le départ. La plupart de son identité utilise les polices Univers Condensed Light et Adobe Caslon. Il n'y avait pas de règles sur le moment où Adobe Caslon devait être utilisé, mais il a été noté qu'il n'est pas utilisé aussi souvent que Universe. Une petite étude de typographie a été menée pour voir quelles coutures ont créé le meilleur environnement pour une humble et professionnelle à but non lucratif, sans paraître différente de sa garantie actuelle.
Lors de comparaisons de polices, il est clair qu'Adobe Caslon fera un excellent travail en tant que police de titre et Univers pour les sous-titres. Avoir les principaux titres en majuscules donne à la marque une touche plus personnelle. Tout avoir en majuscules fait de l'archéologie une entité corporative.
quelle est la théorie de la gestalt
Pour les titres principaux, vous allez utiliser Adobe Caslon et utiliser Univers Condensed Light pour tout le reste afin de correspondre à la garantie de votre marque actuelle.
Création de l'apparence du site Web
Ils voulaient créer une expérience légère et ouverte pour les utilisateurs, qui devraient sentir que cette organisation à but non lucratif les prend au sérieux sans être froids et corporatifs.
Sur la base des données analytiques, la majorité des visiteurs proviennent d'ordinateurs de bureau (probablement parce que la plupart des gens visitent le site pour faire des recherches) et par conséquent, l'accent initial était mis sur la conception pour les utilisateurs d'ordinateurs de bureau. Cela s'est avéré être la conception finale:
Lors de la connexion à partir d'un ordinateur de bureau, je voulais que les utilisateurs voient immédiatement l'emplacement en vedette, le texte de bienvenue et les événements à venir suivis d'une partie du titre du magazine. De cette façon, les gens peuvent voir ce que l'entreprise fait et ce dont ils font la promotion avant de devoir faire défiler la plupart des appareils portables. L'utilisation d'une ombre douce sur la colonne de gauche lui donne plus d'attention et solidifie la hiérarchie.
llc c corp contre llc s corp
Sur les appareils mobiles, les priorités sont un peu différentes, car les utilisateurs ont accès aux informations en déplacement, les événements sont plus importants et sont donc plus élevés sur la liste. La mise en page complète se termine comme ceci:
Mise à jour du bouton Faire un don dans le pied de page pour qu'il soit plus franc en le remplaçant par une phrase au lieu d'un bouton.
Création du repos
Ce concept de design peut ensuite être appliqué de la même manière dans nos autres designs.
Nous savons avec certitude que les utilisateurs accèdent à la page de détails pour deux raisons: soit ils veulent en savoir plus sur le point de repère, soit ils connaissent déjà cet emplacement et ne recherchent que des informations (adresses, numéros de téléphone, etc.). Par conséquent, il est important de présenter les deux options immédiatement afin que nos utilisateurs ne perdent pas de temps à chercher.
Il a été décidé de séparer la colonne de données de la zone de contenu pour lui donner plus de poids, ainsi que pour rendre la page plus intéressante. Cela permet de créer une hiérarchie de composition de sorte que lorsque l'utilisateur atteint la page, il voit d'abord le titre, suivi des images de la galerie et de la colonne de méta-détails ci-dessous. Cela garantit qu'ils remarqueront immédiatement les méta-informations supplémentaires. Un petit coup de pouce supplémentaire vous permet de garder les yeux sur elle et de parcourir plus facilement les informations.
Le client n'aura pas beaucoup de vidéos et de magazines liés à chaque emplacement, donc nous ne montrons que des articles et s'il y a autre chose, ils peuvent cliquer sur le lien. La vue mobile se réduit comme prévu avec le contenu qui apparaît en premier, puis les méta-informations. Les vidéos et les magazines ont été créés en dernier sur notre page mobile, car ils sont moins importants pour les utilisateurs mobiles. D'autres sections internes suivent cette même structure et wireframes pour créer une bonne expérience et un flux constant.
En réfléchissant au processus de conception, on peut voir que la plupart du temps a été consacré à l'organisation et à la planification. Alors que seulement 30% du temps était consacré à la conception. Souvent, lorsque les concepteurs montrent leur travail, ils sont malhonnêtes sur le temps passé à organiser des documents Google, plutôt que de créer des maquettes flashy. Tant d'autres concepteurs se lancent directement dans des maquettes et se retrouvent avec des projets déraillés et des clients mécontents. Il n'y a pas une seule façon de planifier, il suffit de le faire si vous voulez avoir un projet réussi. Laissez-nous vos commentaires sur la façon dont votre processus est, ou comment il diffère - Il serait intéressant de voir les flux de travail des autres.
