web-dev-qa-db-fra.com

Comment concevoir une application futuriste

J'espérais obtenir des conseils de développeurs UX plus expérimentés. Mon client m'a présenté un défi unique et j'ai l'impression d'échouer.

Plus précisément, ils veulent une interface utilisateur qui a l'air moderne et presque futuriste. Call of Duty , le rapport minoritaire a été spécifiquement mentionné -

Le défi auquel je suis confronté est de leur donner quelque chose de proche, mais réellement utilisable. L'application est un programme que les gens utiliseront toute la journée. Personne ne veut vraiment regarder une interface comme un jeu toute la journée. De plus, je sais qu'en tant qu'ingénieur front-end, je ne veux pas charger un tas d'images statiques, donc je veux implémenter autant de cela que possible en CSS. J'ai besoin que le balisage résultant soit dynamique, donc je peux l'animer ou le mettre à l'échelle sans déformer les images statiques.

Je sens vraiment que je suis hors de ma ligue. De plus, ils veulent pouvoir changer le schéma de clair à sombre, etc. je veux m'enfermer dans quelque chose qui a l'air bien en noir ...

Donc, je suppose en un mot, comment faites-vous quelque chose de futuriste mais réellement utilisable? Aidez-moi!

Voici ce que j'ai pour une liste d'articles - Ça me semble un peu ringard

http://jsbin.com/aleroq/41/edit

2
thebringking

Je peux penser à quelques éléments qui pourraient vous guider:

Identifier le public

Votre premier problème est d'identifier le public, et avec lui, le but exact de la conception esthétique. Pourquoi votre client veut-il quelque chose de futuriste? Qu'est-ce que le client essaie d'accomplir? Quel est le public - qui veut-il impressionner? Pourrait-il s'agir d'utilisateurs potentiels (c'est-à-dire de leur vendre ou de les recruter)? Supérieurs? Visiter des dignitaires? Le client lui-même? Cela vous donnera une orientation à la fois sur le style esthétique à poursuivre et sur la façon de le mailler avec la convivialité. Par exemple, peu importe si vous pensez que c'est ringard. Ce qui importe, c'est si le public pense que c'est ringard. Si les utilisateurs ne sont pas le public, il suffit de les éviter de réagir négativement à l'esthétique. Au-delà de cela, ils ne s'en soucient probablement pas. Vous pouvez rechercher et tester la réaction du public et des utilisateurs.

En ce qui concerne la convivialité, en fonction de votre public, il y a de fortes chances qu'il ne soit que brièvement et superficiellement exposé à l'application. Après une courte période, le public est passé à regarder autre chose que l'application (par exemple, la démo est terminée). Même si le public est les utilisateurs, ses membres pourraient bientôt être tellement absorbés par la lecture et/ou l'utilisation de l'application, ils ne remarquent plus l'esthétique - ils s'intéresseront au contenu, pas à sa forme.

Si vous n'avez qu'à vous préoccuper de la première brève exposition au public, vous pouvez obtenir l'esthétique sans compromettre la convivialité assez facilement, car la conception graphique la plus extrême ne devrait apparaître qu'au premier démarrage de l'application - peut-être sur le tableau de bord/page d'accueil, ou peut-être simplement sur l'écran de démarrage. Au-delà de cela, le design "futuriste" se limite principalement à la couleur, à la forme et au choix de la police qui rappelle subtilement au spectateur les images les plus fortes au début. Des choses comme les choix subtils de couleurs (par exemple, le choix de la police vert foncé par rapport à la police noire) auront peu d'impact sur la convivialité, sauf dans les conditions d'utilisation les plus extrêmes.

Ne regardez pas l'avenir. Ressemblez à l'avenir

Une fois que vous avez identifié le public, vous devez arriver à la conception esthétique spécifique. Votre problème peut être qu'en s'inspirant des films et des jeux informatiques, vous imitez une vision fictive de l'avenir. En imitant quelque chose de faux, votre application a l'air de faire semblant - le public associe l'esthétique à quelque chose de trivial, pas une application sérieuse à utiliser toute la journée. C'est peut-être pour ça que ça a l'air ringard.

La solution est de regarder des choses réelles pour l'inspiration. Qu'est-ce que votre public associe à l'avenir? Le chasseur F-35? L'ISS? Le supercalculateur Jaguar? Ce que vous choisissez dépend du type d'avenir que vous souhaitez transmettre. Par exemple, s'agit-il de la compétitivité du F-35 ou de la coopération de l'ISS? Vous voulez probablement que votre design esthétique évoque le design fonctionnel de votre source d'inspiration. Par exemple, vos lignes de séparation dans l'application pourraient ressembler aux lignes en zigzag améliorant la furtivité des portes de train d'atterrissage du F-35. Vous ne voulez probablement pas copier le design esthétique d'autre chose, même quelque chose de réel (par exemple, la murale sur la Jaguar). Comme faire un Xerox d'un Xerox, vous n'allez pas ressortir aussi frais et solide que l'original. Vous voulez être original vous-même. Par définition, tout ce qui existe déjà n'est pas l'avenir.

Ne ressemble pas au futur. Sois le futur

Il ne s'agit peut-être pas du tout d'esthétique, mais de créer une nouvelle façon d'interagir avec l'application. Vous dites que vos utilisateurs seront de grands utilisateurs des applications. Cela signifie qu'il vaut la peine pour eux d'apprendre une interface utilisateur innovante si cette interface offre des performances supérieures une fois que l'utilisateur l'a apprise. Peut-être que ce que votre client veut vraiment, c'est un contrôle innovant, un idiome d'interface ou un canal de communication qui améliore l'application pour vos utilisateurs.

Vous pouvez peut-être rendre vos utilisateurs plus productifs grâce à une interaction vocale et gestuelle intégrée. Vous devrez peut-être utiliser un son stéréophonique pour orienter l'utilisateur vers les éléments de l'espace physique. Il est peut-être temps pour un écran monté sur la tête. L'innovation exacte dépendra des tâches de votre utilisateur et de la technologie disponible pour résoudre ses problèmes. Étudiez les tâches des utilisateurs pour les problèmes à résoudre et étudiez la littérature HCI et d'autres technologies pour des solutions possibles.

C'est l'autre façon de mailler l'utilisabilité et l'esthétique, où l'amélioration de l'utilisabilité avec l'innovation est l'esthétique.

1
Michael Zuschlag

Si votre exigence la plus importante est de paraître futuriste, votre meilleure option est de regarder vers l'avenir et de copier certains des modèles qu'ils auront utilisés.

Et par "regarder vers l'avenir", je veux dire, bien sûr, les films et séries télévisées de science-fiction, et peut-être aussi les dessins animés d'anime. Trouvez les titres qui décrivent les interactions avec les ordinateurs et voyez si cette interface aura du sens pour votre application.

Aussi, à ce stade, essayez de vous concentrer sur CE QUE vous voulez mettre en œuvre, et non sur COMMENT vous allez le faire. Les images statiques ou CSS ne devraient pas vous concerner à ce stade. Trouvez d'abord à quoi devrait ressembler votre produit final; vérifiez ensuite auprès du client si c'est ce qu'il veut; et ensuite seulement le mettre dans le code.

1
Pasha

Vous voudrez peut-être y aller hexagonal comme ils l'ont fait avec Conquist 2 . J'aime particulièrement les paramètres de la dernière capture d'écran, qui s'ouvrent si vous cliquez sur les roues dentées. Un mélange entre la conception de Windows 8 Metro mais avec des hexagones au lieu de carrés devrait être visuellement attrayant et utilisable.

0
KMBredt