Dragonfable (2)

Pour continuer mon post précédent, je vais continuer à vous montrer quelques éléments essentiels du jeu qui font que le jeu est agréable et facile à jouer. Ces éléments dont je parle sont les menus, qui sont le coeur même de n'importe quel jeu de rôle sur le web. Voici un exemple d'interface que vous rencontrerez tout au long du jeu, celui des quêtes :

Comme les quêtes sont linéaires, il n'y a qu'un seul bouton disponible au départ et les autres se débloquent au fur et à mesure que vous les accomplissez. Ce système est vraiment très simple car nous sommes habitués à lire de haut en bas, alors l'utilisateur posera instinctivement ses yeux sur le premier bouton. Jetons maintenant un coup d'oeil à l'icône rouge et or qui attire l'oeil.

Ce petit menu agréable à regarder sert à gérer votre Dragon (d'où le nom du jeu) ainsi que de voir toutes ses propriétés. À peu près n'importe qui serait capable de se servir de cette interface aisément, surtout parce que les boutons sont gros et le texte véhicule des messages explicites qui sont faciles à comprendre et qui attirent l'oeil.

The world ends with you (2)

Passons maintenant à la suite de mon précédent message concernant The world ends with you. Dans ce dernier, je vous ai montré l'interface d'une boutique ainsi que celle du menu d'options, qui étaient de loin les deux illustrations les plus chargées du jeu. Dans l'interface de navigation, celle qu'on utilise pour se promener à travers la ville, il n'y a que deux boutons, dont un qui ramène directement au menu d'options auquel on peut déjà accéder avec le bouton start. Le moyen de naviguer est très simple, il suffit de pointer avec son stylet où l'on veut que le personnage se déplace, c'est aussi simple que ça. Voici un faible exemple de la navigation, car malheureusement je n'ai pas trouvé de meilleure image.

L'écran de haut est statique, nous donnant souvent une vue d'ensemble de la zone où vous vous trouvez, tandis que l'écran tactile est très dynamique, avec des éléments d'arrière et d'avant plan ainsi que des angles de perspective parfois impossibles qui jaillissent de votre écran donnant tout un style au jeu.


L'interface durant un combat est encore bien plus simple, aucun bouton, seulement vos badges (ce qui vous donne accès à vos attaques) et leur jauge. Toutes vos attaques ont un certain nombre d'utilisations après lesquels ils entreront dans leur temps d'épuisement, dépendant de chaque badge. Même si l'interface est très simple et très épurée, c'est sûrement le système de combat le plus compliqué qu'il m'ait été donné d'essayer, mais il reste néanmoins le plus génial et bien pensé.

Cette image sera certainement la plus compliquée à expliquer, car au premier coup d'oeil vous devez trouver ça mêlant. Dans l'écran supérieur se trouve votre partenaire, ses attaques se font avec le panneau directionnel et il est soit contrôlé par le jeu ou soit par vous-même, alors oui, vous vous battez sur deux écrans différents. L'écran inférieur, beaucoup plus simple, affiche votre personnage que vous pouvez déplacer, contrairement à l'autre, ainsi que vos badges et leurs jauges juste en dessous. Vous pouvez déplacer vos badges n'importe où dans l'écran quand vous appuyez sur start, vous donnant accès à une interface complètement personnalisée en combat. Pour mieux vous expliquer la complexité du système de combat, je vous dirige vers un lien sur un review de The world ends with you qui saura peut-être vous éclairer sur le sujet! J'espère que vous avez apprécier ces deux petits messages informatifs sur ce jeu absolument génial que je vous conseille vivement d'essayer!

The world ends with you

Avant tout, je voudrais m'excuser de ne pas avoir pris le temps d'écrire d'article ces dernières semaines, je n'arrivais pas à trouver d'inspiration, mais je me suis souvenu d'un jeux très intéressant sur la Nintendo DS. Ce jeu se nomme The world ends with you.

Un chef d'oeuvre de Square Enix conçu spécialement pour exploiter toutes les options que la Nintendo DS pouvait apporter. The World Ends with You introduit un univers baignant dans l'esthétique très particulière du Hip Hop japonais, un courant nettement moins hargneux que ses incarnations américaine ou française. Tetsuya Nomura, designer de Square, compose des personnages aux traits nerveux et aux accoutrements « stylés » à la dernière mode de Shibuya qui ont une tendance fashion. Car c'est dans ce quartier le plus branché de la capitale japonaise, ou bien plutôt dans une version stylisée mais aisément reconnaissable de celui-ci, que se déroule l'intégralité du jeu.


Pour revenir au sujet principal de ce blog, l'interface de ce jeu est tout simplement remarquable, il est très facile de se déplacer à travers la ville et d'interagir avec les différents éléments vous entourant tel que les boutiques ou les personnages clés. Il ne suffit que d'appuyer doucement sur l'écran tactile pour sélectionner quelque chose, c'est donc très accessible pour tout le monde. Il faut aussi noter que la musique est omniprésente dans le jeu, elle vous suit partout, dans tout ce que vous faites, que ce soit en vous promenant, en arrangeant vos options, en combat ou même dans une boutique. Sans la musique géniale et les effets visuels dynamiques originaux, le jeu n'aurait absolument aucun style ni âme, ce ne serait qu'un pauvre jeu avec une belle histoire.

Voici donc une image prise à l'intérieur du jeu, elle illustre l'interface lors d'un achat dans une boutique (L'image de gauche) tandis que celle de droite illustre le menu Start.

 
Comme vous pouvez le voir, il y a beaucoup d'éléments à assimiler au premier coup d'oeil, mais ils restent tout de même bien organisés en blocs et ils sont faciles à différencier. Vous pouvez voir ici tous les produits qui se trouvent dans la boutique, l'image associée à chaque produit ainsi que son prix. Juste en haut se trouve le nombre de Yen dont vous disposez. Le bouton de sortie est très bien défini avec une couleur qui sort du gris et rouge du reste de l'interface. Pour acheter un produit, il suffit de cliquer dessus et de le glisser sur l'icône buy, qui est illustré par un panier (La checkbox sert à activer la validation d'achat, ex: "Êtes-vous sûr de vouloir acheter ce produit?"). Vous pouvez explorer les boutons de la partie inférieur de l'écran pour accéder à de plus amples informations concernant l'item en question, contenant des termes que vous apprendrez au fur et à mesure que vous avancerez dans le jeu, car il y a des tutoriels une bonne partie du jeu.




Passons maintenant à l'image de droite, qui illustre l'interface du menu lorsque vous appuyez sur le bouton start. Ce menu, beaucoup plus simple que celui des boutiques, est vraiment efficace car il vous montre tout ce que vous avez besoin de savoir. Complètement en haut se trouvent à la fois la journée dans laquelle vous êtes ainsi que votre location. À gauche se trouvent les marques de vêtements et de badges (Les objets qui vous donnent accès à diverses attaques lors de combats) qui sont populaires dans la zone où vous vous trouvez, plus elles sont populaires, plus vos attaques seront dévastatrices et vice-versa. Un peu plus à droite se trouve la carte de la ville ainsi que les initiales des marques dominantes dans chaque zone. Le reste du menu s'explique pas mal tout seul. Il faut aussi noter que chaque partie supérieure des images se situe sur le premier écran, allégeant le tout.


C'es tout pour cet article, je vous reviendrai sous peu avec plus d'informations sur ce jeu vraiment génial et groovy! 

Dragonfable

Je vais ici vous parler d'un jeu qui a marqué une bonne partie de ma jeunesse ; Dragonfable. C'est un jeu de type RPG (Jeu de rôle) qui se joue dans votre navigateur web. C'est sincèrement le jeu Flash le mieux fait et le plus complet qu'il m'ait été donné de voir jusqu'à aujourd'hui. L'interface est très agréable à voir et tellement simple à utiliser que n'importe quel enfant sachant lire l'anglais serait capable d'y jouer et de se débrouiller. Voici donc un aperçu de l'interface graphique hors combat:

Tout semble très net, avec trois gros boutons en forme d'images qui nous suggèrent assez bien ce à quoi ils servent (Celui du milieu est inutile si vous êtes un nouveau joueur). J'aime vraiment la façon dont ils on rendu leur jeu facile d'accès pour tout le monde qui aurait même des vertus pédagogiques tout en restant assez amusant pour les gens plus âgés. L'interface change durant un combat, nous permettant d'avoir accès à tout un arsenal d'attaques différentes pour vaincre nos ennemis.

Vous pouvez donc voir ci-haut qu'un nouveau personnage ne possède qu'une attaque normale, mais au fil du temps vous débloquez différentes techniques qui apparaissent dans les boutons qui se trouvent à gauche et à droite de l'attaque principale. Une belle grosse flèche rouge flotte par dessus la tête de l'ennemi que vous avez sélectionné pour vous montrer qui vous allez attaquer, pour ne pas vous confondre durant les combats contre plusieurs adversaires.

Finalement, voici de quoi a l'air le menu lorsque vous entrez dans un magasin pour vous procurer des items.

Je trouve que le menu est très bien organisé, avec un bouton pour fermer la page, une barre de défilement, un bouton pour acheter, et il y a même un onglet pour vendre des objets et un autre pour avoir un aperçu de l'objet sélectionné. Tout est très bien organisé et très facile à utiliser, ça en est presque intuitif, car il ne suffit que de voir pour comprendre ce qu'il se passe.

Horizon Roc

J'ai toujours eu envie de voir Horizon Roc, le plus grand centre d'escalade intérieur du Québec, être bien représenté sur le web. Cependant, cela semble être le dernier de leurs soucis même si leur site web est le premier qui sort lorsque l'on écrit escalade sur Google. Voici un bref aperçu de leur site web actuel.

Horizon Roc

Selon moi, il n'est pas très fonctionnel ni beau, en plus du fait que l'information est très mal répartie et pas très facile à trouver. La première chose que j'ai eu envie de cliquer était "Site Extérieur", qui avait vraiment l'air d'être un lien important, mais qui en fait n'est qu'un texte souligné. Bref, j'ai tout simplement pensé à un design qui serait plus approprié pour un site web aussi important, mais ce n'est qu'une simple maquette pour l'instant. La voici:

Maquette

Je vais la développer d'avantage durant les semaines à venir, mais sentez vous libre d'écrire vos commentaires! Merci!

Schéma des étapes de Production

Bienvenue!

Bienvenue sur mon nouveau blog! Ce dernier aura pour sujet le design d'interfaces et j'y posterai un nouveau message chaque semaines qui porteront soit sur les aspects importants du design d'interfaces, les nouvelles choses que j'ai appris concernant les interfaces, ou tout simplement des critiques de l'interface de certains sites web ou jeux vidéo. Les commentaires sont les bienvenues!