Dissecting Web Design Le site App

Applications Web, applications Android, applications iPhone et iPad et maintenant, avec la sortie des applications Mac, le monde semble devenir fou d'applications! Il semble qu'il existe une application pour répondre à presque toutes les situations? mais dans un marché numérique, comment ces applications se promeuvent-elles? Avec le design web bien sûr!

Il existe des dizaines de milliers d'applications (et ce nombre augmente chaque jour). Naturellement, toutes ces différentes applications doivent utiliser différentes méthodes pour se promouvoir et l'utilisation d'un site Web est l'une des stratégies les plus essentielles. Les sites Web des applications sont parmi les mieux conçus et de nombreuses tendances se retrouvent dans ce créneau particulier du site. Dans cet article, nous examinerons de plus près certaines des techniques actuellement utilisées..


introduction


Le site Angry Birds est d'une simplicité trompeuse. Il utilise l'illustration pour diffuser efficacement l'esprit de son application sans recourir à un design trop stylisé..

"Où serions-nous sans Angry Birds nous permettant de nous défouler en lançant de petits animaux à plumes autour de l'endroit?"

Certaines personnes ne pourraient tout simplement pas vivre sans Evernote pour tous leurs besoins en matière de prise de notes et comment pourrions-nous savoir où tout le monde se trouve sans Foursquare? Où serions-nous sans Angry Birds nous permettant de nous défouler en lançant de petits animaux à plumes autour de l'endroit? Les applications sont presque devenues essentielles au travail et à la vie sociale de nombreuses personnes.

La popularité des applications a eu pour conséquence que plusieurs milliers d’applications ont été diffusées sur les différents marchés. Pour qu’une telle application soit remarquée, elle doit se distinguer de la masse et un site Web bien conçu est l’un des moyens de parvenir à cet objectif..

Les sites Web d'applications doivent effectuer plusieurs tâches différentes de manière efficace. Tout d'abord, il est absolument essentiel que les sites Web d'applications soient bien conçus, de même que tout site Web vendant des produits en ligne; étant donné que la perception d'un acheteur potentiel sur la valeur et la qualité du produit sera influencée par l'environnement dans lequel il est contenu. En plus de présenter un aspect esthétique, les sites Web d’applications sont censés commercialiser l’application, communiquer son objectif, démontrer ses capacités et même informer l’acheteur de la manière de l’utiliser. Certains peuvent même avoir à intégrer des fonctionnalités de commerce électronique si l'application n'est pas vendue sur un marché..

Il va sans dire que répondre à toutes ces exigences peut s'avérer un défi. Les concepteurs doivent trouver des moyens créatifs de le faire. Nous examinerons ensuite en détail certaines des caractéristiques communes aux sites d'applications qui contribuent à leur succès. Commençons.


Des thèmes

Le site Web EpicWin App imite le thème de leur application sur leur site? au maximum. Tout, des textures de fond à la typographie, souligne le style et le ton de l'application.

Une grande majorité des sites Web d'application choisissent d'imiter le thème de l'application qu'ils promeuvent. L'utilisation créative d'images, de couleurs, de textures et de nombreux autres éléments permet au sujet de l'application de transcender l'application elle-même et permet au site Web de devenir une extension de celle-ci. Il existe de nombreux exemples de cette méthode en action, un exemple évident serait le site Web de l'application Tea Round..

L'application Tea Round, dans leurs propres mots; "règle rapidement les arguments fondés sur la soif en décidant qui fait le thé". Il est extrêmement évident, d'après la conception du site Web, que le but de l'application repose sur le thé?

L'utilisation d'images telles que la bouilloire, la tache de tasse sur la note et la tasse de thé dans le logo est très révélatrice du but de l'application. Comme mentionné précédemment, il s'agit d'une utilisation très claire de cette technique, mais elle peut également être utilisée avec davantage de subtilité, comme dans le site Web ci-dessous..

Ceci est le site de l'application Get Galleried, qui présente des exemples de conceptions Web de haute qualité afin de fournir à l'utilisateur de l'inspiration. Depuis le site lui-même - "Nous pré-peuplons des sites inspirants à partir de galeries de design triées sur le volet pour vous dans une interface rapide en mosaïque". Remarquez comment le site Web utilise un motif en mosaïque pour son arrière-plan - évocateur de la galerie en mosaïque présentée par l'application.

Cette technique d’extension du thème de l’application au site est un excellent moyen de communiquer sur la nature de l’application elle-même. Bien sûr, même s'il sera toujours nécessaire de fournir une explication sur le fonctionnement exact de l'application, cette méthode fournit instantanément à l'utilisateur une idée générale de son objectif..

En outre, l’utilisation des mêmes textures, couleurs et éléments de conception pour le site et pour l’application a pour avantage supplémentaire de créer une continuité entre les deux plates-formes, ce qui permet à l’utilisateur de se familiariser avec la marque et d’être plus à l'aise avec l'application..


Icônes et boutons

Vous remarquerez que, outre les sites Web conçus autour de thèmes, ils sont également conçus pour ressembler à une application. Les éléments couramment trouvés dans les applications, telles que les icônes et les boutons, sont également souvent utilisés dans la conception des sites Web..

La conception du site Web à la manière d'une application présente deux avantages principaux. Le premier avantage est lié au point soulevé précédemment, dans la mesure où il contribue à créer une continuité entre le site Web et l'application. Deuxièmement, il est raisonnable de penser qu’un bon nombre de visiteurs de ces sites utiliseront des appareils tactiles, tels que des iPhones et des iPads..

Les applications utilisent des éléments d'interface larges et visuels, tels que des icônes et des boutons, car ils sont beaucoup plus faciles à interagir lors de l'utilisation d'appareils tactiles. Il est donc recommandé d'utiliser ces fonctionnalités sur le site Web..


Images de l'appareil et captures d'écran

Vous pouvez parler de votre application comme bon vous semble, utiliser chaque superlatif du dictionnaire et prétendre que cela résoudra tous les problèmes de la vie, mais si les gens ne voient pas ce qu'ils achètent, ils seront très réticents à s'engager. C'est l'un des nombreux problèmes que certaines personnes rencontrent lors de l'achat de produits sur Internet, en particulier pour les informations électroniques telles que les livres électroniques et la musique numérique..

Pour résoudre ce problème, les images sont utilisées pour aider l’acheteur à visualiser ce qu’il achète, telles que des images de jaquettes d’album sur iTunes ou des livres numériques représentés sous forme de livres. C'est à peu près la même chose avec les applications; les sites Web affichent souvent des captures d'écran de l'application affichées sur des appareils tels que les iPhones, les iPads et les écrans d'ordinateur. Cette technique permet non seulement à l'utilisateur de se familiariser avec l'apparence de l'application, mais elle l'aide également à visualiser l'application sur son propre appareil, ce qui peut influer sur sa décision d'achat..

Si le dicton "Une image vaut mille mots" est vrai, alors une vidéo devrait communiquer plus d'informations sur votre produit que vous n'auriez jamais pu utiliser avec du texte. De nombreux sites Web d'applications ont commencé à utiliser la vidéo pour démontrer leur application et ses capacités aux acheteurs potentiels..

La démonstration vidéo de l'application Concentrate est un excellent exemple. La vidéo est en mesure de démontrer pleinement toutes les fonctionnalités de l'application dans un laps de temps relativement court. Avec l'ajout d'une musique de fond agréable et de courts titres de sections; la vidéo est plus divertissante et l'information est beaucoup plus facile à digérer que les nombreuses lignes de texte nécessaires pour communiquer la même information.


Disposition

Comme nous l'avons vu, les sites Web d'applications ont de nombreux objectifs à atteindre, mais leur objectif principal est d'amener les visiteurs à acheter l'application elle-même. Tous les sites Web incluront une forme de lien vous permettant de télécharger l'application, soit via un magasin d'applications, soit directement depuis le site lui-même..

Pour aider le site Web à réaliser cela, les concepteurs créent souvent une mise en page simple, mais efficace, qui guide l'utilisateur à travers les points clés du site et finalement vers l'élément d'appel à l'action (le lien de téléchargement). Beaucoup choisissent d'utiliser la mise en page «Z». Brandon Jones, éditeur de Webdesign +, a déjà évoqué en profondeur la mise en page «Z». Il s'agit d'un excellent article qui vous aidera à mieux comprendre les points que nous discutons ici..

Voyons comment une telle disposition est mise en œuvre sur un site Web d'application. Nous utiliserons le site Web pour l'application Leaflet. Une fois encore, il existe un excellent tutoriel sur Webdesign + sur la réalisation de cette conception particulière. Une forme approximative en «Z» a été superposée sur le site Web pour aider à démontrer plus avant nos arguments..

Vous remarquerez que la forme en "Z" couvre différents points du site dans l'ordre suivant:

  • Images de l'appareil iPhone avec des captures d'écran de l'application
  • Le logo / nom de l'application
  • Une brève description de l'application
  • Le bouton de téléchargement

Le concepteur a délibérément choisi de placer ces points le long du chemin qu’il souhaite que l’utilisateur suive. Si le visiteur du site devait effectivement suivre le chemin prévu, il serait tout d'abord informé du but du site par le biais de l'utilisation des images iPhone avec des captures d'écran de l'application. L'utilisateur remarquerait alors rapidement le logo de l'application suivi d'un paragraphe décrivant brièvement ce que fait l'application..

Maintenant que l'utilisateur a été informé des nombreux avantages de l'application, ainsi que des images attrayantes, il arrive à un bouton bien placé (à côté d'un prix tentant) qui lui permet d'acheter l'application à lui-même..

Il existe une quantité incroyable d'applications disponibles et il s'agit d'un marché très concurrentiel. Il est donc essentiel que vous puissiez attirer l'attention de vos utilisateurs, exposer les avantages de l'application et faciliter leur achat en un rien de temps et la disposition en «Z» est parfaite pour cela. De toute évidence, il est impossible d'adapter toutes les informations dans cet espace. Vous constaterez donc souvent que les sites qui implémentent cette présentation détaillent davantage le fonctionnement de l'application plus loin dans la page..

La mise en page «Z» n'est en aucun cas la seule mise en page utilisée par les sites Web d'applications, car il en existe de nombreuses autres, mais elle est très efficace si elle est utilisée correctement. Voici quelques exemples supplémentaires de la mise en page 'Z' en action.

Obtenez Galleried

Evernote


Étapes et points de balle

Le marché des applications est saturé et si un acheteur potentiel n'est pas rapidement convaincu par votre application, vous pouvez être assuré qu'il pourra trouver quelque chose qui le sera ailleurs. Par conséquent, il est essentiel que vous puissiez communiquer le fonctionnement de votre application et les avantages qu'elle apportera de manière claire et concise..

L'utilisation de puces et d'étapes numérotées est une méthode efficace pour décomposer les informations, car les utilisateurs peuvent ne pas vouloir lire des paragraphes entiers d'informations sur son fonctionnement..

Le site Web de l'application Gallerytopia utilise à la fois des puces et des étapes numérotées pour communiquer des informations sur l'application. Tous les avantages se résument en utilisant une petite quantité de puces courtes, faciles à digérer. Les avantages énumérés par ces points sont encore améliorés par l’utilisation de symboles de ticks visuels, presque comme s’ils vérifiaient votre liste d’exigences..

Plus bas dans la page, les instructions d'utilisation de l'application sont divisées en trois étapes numérotées. Il est très courant que les sites Web d'applications divisent des informations sur le fonctionnement de l'application ou sur son utilisation en un petit nombre d'étapes numérotées. Ces étapes indiquent que l'application est très simple et facile à utiliser, car personne ne veut acheter quelque chose d'aussi compliqué que de bien?


Plus d'exemples de sites d'applications géniaux

Maintenant que nous avons vu certaines des fonctionnalités mises en œuvre par les sites Web d'applications, examinons comment fonctionnent certains des meilleurs sites Web d'applications. Vous trouverez ci-dessous quelques exemples de sites Web d'applications magnifiquement conçus..

Kaléidoscope

Factures

Bord

Concentrer

Courrier

Evernote

Des choses

Couches

App Epic Win


Conclusion

Nous avons discuté de nombreuses fonctionnalités et techniques différentes des sites Web d'applications et il semble y avoir un objectif commun par rapport à bon nombre de ces fonctionnalités; et c’est-à-dire communiquer des informations rapidement et efficacement. Il a récemment été annoncé que l'App Store d'Apple avait atteint dix milliards de téléchargements et que le marché était en croissance constante. Le site Web de n'importe quelle application doit capter l'attention de l'utilisateur, en communiquer les avantages et le rendre facilement accessible, le tout dans un court laps de temps. sinon, il y a beaucoup d'autres options pour un acheteur d'applications à choisir.

Enfin, il convient de mentionner que, bien que ces sites Web utilisent de nombreuses techniques pour atteindre leurs objectifs, ces fonctionnalités ne seraient pas aussi efficaces si elles n'étaient pas contenues dans des conceptions de sites Web aussi belles..

Cet article a présenté quelques fonctionnalités et techniques qui rendent les sites Web d'applications efficaces. Avez-vous remarqué d'autres fonctionnalités parmi ces types de sites Web? Existe-t-il un site Web particulièrement intéressant que vous connaissez? S'il vous plaît partager vos pensées et commentaires ci-dessous!