Qu'est-ce qui rend cette conception de point de vente datée?

J'essaie de comprendre ce qui fait que cette conception d'écran de point de vente (POS) a l'air datée.

Est-ce les boutons 3D, les couleurs, la disposition, la police? Et que feriez-vous pour lui donner un aspect actuel?

N'étant pas un professionnel du design, je peux voir que c'est daté. Mais je ne sais pas pourquoi et comment changer cela.

D'autres réponses se concentrent sur la façon d'améliorer la conception, mais puisque vous avez demandé pourquoi la conception semble datée:

Police trop petite . Tout à gauche a l'air moins daté que les autres, pourquoi? À gauche, la taille de la police correspond à l'espace vertical disponible pour le texte, tandis que dans tous les autres boutons, la police est beaucoup trop petite. Jetons également tous les majuscules, Arial, et les 3 lignes de texte fixes sur chaque bouton (chaque bouton autre que Pay semble être formaté pour recevoir du texte en haut, au centre et en bas vertical, ce qui entraîne une gêne s'il n'y a que 2 lignes du texte réel).

Couleurs peu attrayantes . L'écran semble utiliser 9 couleurs presque aléatoires, qui font toutes partie des 64 couleurs EGA d'origine. De nombreuses interfaces graphiques modernes utilisent des différences de couleurs plus subtiles, à moins qu'il n'y ait une grande différence entre les boutons. Certaines interfaces graphiques modernes utilisent également des dégradés de couleurs dans les boutons.

Pas d'images.

Effet 3D 2 couleurs. Les boutons 3D qui utilisent une bordure de 2 pixels de large avec du blanc uniforme en haut à gauche et du gris uniforme en bas à droite, plus une bordure entièrement noire d'un pixel autour d'eux sont en effet démodés.

Trop simple. En utilisant uniquement des boutons, il y a une occasion manquée d'indiquer intuitivement que nous examinons actuellement la section Aliments. Un Gui moderne utiliserait d'autres indices pour indiquer que les parties magenta et jaune appartiennent ensemble, comme un rectangle rempli derrière les boutons jaunes qui s'étend jusqu'à l'arrière-plan derrière le bouton de nourriture:

Enfin, l'en-tête POS System me dérange, mais je pense que c'est juste une mauvaise conception, et n'a rien à voir avec sa datation.

Avant de modifier quoi que ce soit, assurez-vous que l'affichage actuel prend en charge plus que EGA (palette de 16 couleurs, choisie dans une table de 64 couleurs), et si vous souhaitez utiliser des images, assurez-vous que la résolution de l'affichage permet à l'utilisateur de reconnaître ce qui est affiché dans le images. Parfois, les appareils utilisés sur le terrain sont un peu plus anciens qu'on ne l'imagine. En outre, lorsque vous changez de couleur, gardez à l'esprit le daltonisme.

Étant donné qu'il s'agit d'un système de point de vente, je dirais que la fonctionnalité est là. Les boutons sont gros, relativement faciles à lire, et ils sont organisés en groupes, ce qui me faciliterait la recherche de ce que je recherche.

Cela dit, je vois de bonnes décisions structurantes, mais pas beaucoup de décisions de conception. Voici ce que j'examinerais:

• Polices : tout dans votre application utilise Arial en majuscules, mais tous les éléments ne sont pas identiques. Il existe une hiérarchie et vous pouvez utiliser des styles de police ou des familles pour représenter cela. Par exemple, les lignes du bas pourraient utiliser des majuscules, car elles ne font pas vraiment partie des options principales. Vous avez choisi d'agrandir "Pay", ce qui est bien, mais c'est le seul bouton avec une taille de police différente. Pourquoi changer la police, et non par exemple la couleur? Je ne dis pas que vous devriez, je veux dire que penser de cette manière peut vous faire découvrir de nouvelles façons de séparer les éléments. Par exemple: Avez-vous envisagé d'utiliser des séparateurs?

• Espacement : vous n'utilisez pas le même espacement (marges) pour de nombreux éléments. Regardez dans les systèmes de grille , vous en bénéficieriez énormément. Une disposition équilibrée rendra le design plus ordonné et poli. Vous avez également des problèmes d'espacement étranges (IMO) avec le texte à l'intérieur des boutons. Le bouton avec 1 ligne est centré, 2 lignes ont un immense espace entre les lignes et 3 lignes semblent correctes, car il y a un espacement égal partout. Ne serait-il pas plus logique d'avoir toujours le même espace entre les lignes de texte, au lieu d'essayer de tirer le texte le plus près possible des bordures?

• Couleur : Le regroupement fonctionne pour rendre clair que différents boutons font des choses différentes, mais je ne vois pas de raison derrière la palette. Essayez de penser dans le sens de: Puis-je utiliser la couleur pour pousser davantage mon message? Puis-je utiliser la couleur pour faciliter la recherche de boutons? Vous le faites déjà en donnant un ton différent à "Envoyer". C'est une excellente décision. Mais je vois que votre couleur sélectionnée est différente selon qu'elle se trouve sur la colonne de droite ou la colonne centrale. Pourquoi?. Alors pensez-vous, où pourriez-vous utiliser la couleur de la même manière? Jetez un œil à Google Material , ils pourraient vous inspirer pour essayer de nouveaux combos.

• Ombres et effets : L'effet 3D est très utile dans ce contexte, et je pense que vous pourriez le pousser encore plus loin. Voici un exemple de POS 3D . Avez-vous également envisagé d'utiliser des icônes? Ils peuvent apporter une belle aide visuelle.

Je pense que l'application a l'air datée car elle ne suit pas vraiment de tendance, à l'exception des blocs de couleur avec quelques ombres portées, ce qui était la norme lorsque les logiciels de conception et les langages de codage ne permettaient pas beaucoup de créativité à cet égard. Maintenant, vous pouvez presque tout faire. Votre conception semble datée, car elle ne tire pas parti de ces astuces et choix de conception qui sont devenus populaires ces dernières années.

Je vous recommande de jeter un œil à d'autres applications similaires, de vérifier ce qu'elles font bien ou mal, de voir comment la vôtre peut se nourrir de certaines de ces idées. Vous avez déjà un grand squelette, il a juste besoin de chair. Une grille et peut-être jouer avec des couleurs complémentaires feraient de grandes choses pour votre application.

À première vue, je ne peux pas dire rapidement ce qui est quoi (et j'ai de l'expérience avec les systèmes de point de vente des restaurants). Pour moi, les éléments en gris à droite de l'interface utilisateur ne semblent pas appartenir ensemble. Les éléments jaunes au centre de l'écran semblent en fait être 3 sections, mais ce n'est pas clair?

À partir des exemples que j'ai montrés ci-dessous (et je ne dis rien de leur qualité, ils sont une sélection aléatoire d'une recherche rapide) Vous pouvez voir l'utilisation d'icônes, d'images et de grands blocs de couleur. Ce sont des outils utiles pour identifier des actions et distinguer des domaines de fonction séparés ou une hiérarchie d'informations.

Je n'ai pas eu le temps pour une réponse plus détaillée, mais ce que je dirai, c'est de jeter un coup d'œil aux exemples de conception actuelle de l'interface utilisateur. Par exemple, une recherche rapide de «POS UI Design» vous donnera des images telles que:

La conception mise à part, est-elle fonctionnelle et les personnes qui l'exploitent savent-elles comment l'utiliser? Il y a un élément de ne pas réparer ce qui n'est pas cassé si c'est le cas.

Oui, il a l'air daté, mais de nombreux systèmes de caisse que j'ai utilisés sont coupables du même look simple. Des boutons arrondis et des couleurs choisies en fonction de l'accessibilité pourraient l'embellir, mais mon instinct est que c'est purement une pièce fonctionnelle et essayer de "jazz it up" pourrait ajouter de la confusion aux employés.

L'effet 3D est en fait utile dans ce cas car il indique rapidement à l'utilisateur qu'il s'agit d'un bouton cliquable, et j'imagine que dans le domaine de la restauration, le temps est d'une grande importance.

Je ne suis pas non plus un professionnel du design, mais puisque je dois prendre en compte ce genre de chose lors de la création d'applications mobiles ...

1. Abandonnez l'effet 3d de la vieille école win32. Il est littéralement hors de contact à une époque où tout le monde s'attend à ce que les choses soient conviviales sur l'écran tactile. Ce que vous voulez utiliser, ce sont de grandes régions plates pour chaque zone d'action (bouton) sans aucun espacement entre les groupes de boutons associés ou des ombres sous les boutons. Regardez dans la conception matérielle d'Android . C'est utile même pour les applications non mobiles.

2. Utilisez des bordures (et non des couleurs) pour regrouper les éléments associés si ces éléments sont espacés. S'il n'y a pas d'espacement entre eux, utilisez des couleurs pour que toute la zone associée ressemble à une couleur d'arrière-plan unie.

3. Choisissez des couleurs plus douces (pensez aux couleurs pastel) et faites partie d'un schéma de couleurs complémentaire. Assurez-vous d'avoir des versions claires et foncées de chaque couleur dans votre palette. J'espère que vous n'avez pas encore affaire à un système qui ne peut s'afficher qu'à partir de l'ancienne palette de couleurs CGA / VGA 16.

4. Les éléments de l'interface utilisateur doivent être uniformément colorés selon le schéma de couleurs. Par exemple: les boutons fournissant une entrée d'interface utilisateur peuvent être considérés comme différents des boutons qui changent de page ou déclenchent une fonctionnalité principale, mais il devrait généralement y avoir 1 couleur utilisée pour chacun de ces types de boutons, par opposition à 1 couleur pour tous les boutons dans une zone fonctionnelle donnée. Cela permet à l'utilisateur d'avoir une meilleure idée de ce que chaque élément d'interface utilisateur va faire.

5. Préférez utiliser l'espacement entre les zones d'action pour les séparer et des bordures plates et douces entre les éléments d'action. Les éléments d'action dans une zone doivent avoir une taille régulière (imaginez que chaque élément d'action soit 1 ou plusieurs cellules adjacentes dans une grille).

6. Lorsque vous utilisez une zone de titre dans la fenêtre:

   une. Tous les éléments d'action de cette zone doivent tenir dans la zone de titre.

   b. Tous les éléments d'action de cette zone doivent être globaux pour l'application (c'est-à-dire connexion, paramètres, etc.).

   c. Le titre ne doit pas être recouvert par autre chose qu'un logo.

J'espère que ça aide.

Presque tous les éléments semblent être des boutons. Mais quand je lis les étiquettes, il semble que certains boutons sont des boutons d'action, tandis que d'autres sont destinés à la navigation.

Dans une interface utilisateur moderne, vous distingueriez les deux. Une rangée d'onglets sert d'aide à la navigation efficace, à la fois pour montrer où vous êtes actuellement et comment aller ailleurs. Avoir un onglet Pizza pour toutes les options de pizza et un onglet Pâtes pour toutes les pâtes.

Peut-être que le bouton violet FOOD agit déjà comme un tel onglet, et DRINKS en est un autre. Ils ne devraient certainement pas être à droite - l'anglais est lu de haut en bas, de gauche à droite, et votre flux de travail doit le copier.

Une rangée d'onglets fonctionne assez bien, mais ici, vous pouvez avoir une hiérarchie plus profonde. Dans ce cas, il peut être judicieux d'afficher l'état actuel de l'interface utilisateur sous la forme d'un chemin:, Food > Starters >une ligne en haut de la page des démarreurs. Faites de la première entrée du menu "Démarreurs" un bouton "<Retour aux aliments"; cela vous permet de masquer plusieurs contrôles.

Tout d'abord, je demanderais quel est le but?

Faut-il que l'opérateur trouve rapidement la clé et rende la commande plus rapide sans erreur de saisie? ou doit-il attirer et encourager les utilisateurs à utiliser l'interface graphique de la machine?

Dans ce cas, le but de la pièce indique clairement qu'il s'agit d'une saisie de transaction efficace et rapide. Par conséquent, nous pouvons aller de manière plus simple et plus organisée que la forme, la couleur et la hiérarchie doivent dicter l'ordre logique sur la tendance de conception et la fantaisie.

Le problème avec l'interface graphique actuelle est:

Couleur : couleurs trop dures, qui créeront du stress au fil du temps et affecteront l'efficacité de la décision des utilisateurs. Un fond blanc avec d'autres couleurs à contraste élevé crée certainement une fatigue oculaire et il est difficile de trouver rapidement les informations nécessaires que l'utilisateur doit recueillir.

Police : trop petite pour trouver et prendre une décision, également affectée par la couleur dure et le contraste entre le texte. Cela pourrait fortement affecter les nouveaux utilisateurs à s'habituer au système, plus longtemps et produire plus de fausses entrées.

Ordre et regroupement : devons-nous avoir le nom "POS System" là-haut en grande taille de police? Est-ce bénéfique? NAN! Les utilisateurs de ce système et les éléments à l'écran le disent clairement. Le regroupement est-il logique? Pas vraiment, beaucoup peuvent être groupés, donc les utilisateurs peuvent le trouver logiquement. Est-ce qu'une partie du mot choix a du sens? NAN! "ENVOYER"? envoyer quoi? "Définir les menus"? établissez-vous des menus tous les jours? NAN! en avant. La hiérarchie et le choix des mots doivent être examinés attentivement.

Certaines personnes ont posté une interface graphique avec des images et des trucs fantaisistes, en ce qui concerne le but de l'équipement lui-même, il indique clairement qu'il n'a pas besoin d'être sophistiqué, mais doit être très fonctionnel et réfléchi.

Parce que cela ne ressemble en rien à la façon dont les "tuiles" sont conçues pour les appareils mobiles, Android ou Windows OS vient spécifiquement à l'esprit, il est également totalement inapple - ce qui provoque un conflit car ils commandent une grande partie de ce qui est visuellement en vogue. À peu près tout est "faux", donc je vais sauter les détails.

Toutes ces réponses sont excellentes, mais si vous voulez du matériel de référence, un exemple brillant de ce à quoi ressemble un bon système de point de vente moderne, consultez l'application Square sur iPad.

https://itunes.apple.com/us/app/square-register-point-sale/id335393788?mt=8

La plus grande chose que je pense que vous pourriez faire pour améliorer l'existant (et pourquoi il a l'air si daté) est que l'interface utilisateur moderne a tendance à aimer beaucoup d'espace blanc - et aussi à rendre l'espace blanc blanc. Beaucoup de modèles utilisent de nos jours le type inversé (texte blanc sur fond noir ou texte blanc sur n'importe quelle couleur sombre). Comme ce site: https://developer.wordpress.com/calypso/

Les boutons doivent être organisés par fonction, hiérarchiques et les boutons doivent être cohérents avec la méthodologie de mise en page.

En termes simples:

1) Placez les boutons les plus utilisés dans un endroit où tout le monde peut facilement les trouver;

2) Les boutons intérieurs doivent être "contrôlés" par la coque extérieure (fenêtre dans une fenêtre, dans la fenêtre);

3) Si vous avez un bouton Entrée (ou tout autre bouton d'ailleurs, gardez-le au même endroit même si les écrans peuvent changer.

De nombreux systèmes de point de vente ont essayé d'optimiser la conception fonctionnelle, mais je pense que le point de vente Rezku est un peu en avance sur le jeu .