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

25

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.

Écran POS

Craig HB
la source
2
Salut! Bienvenue dans GD.SE :) Quelque chose de similaire à votre question, juste plus large, a été posée ici: graphicdesign.stackexchange.com/questions/17885/… Cependant, je pense que vous devriez transformer votre question en critique , vous obtiendrez beaucoup des commentaires plus détaillés. Vous devrez peut-être ajouter quelques informations pour nous permettre de répondre plus facilement
Yisela
7
Arrrrghh !! Extra's!!
user56reinstatemonica8
2
Mon Dieu, je ne connaissais pas le terme "POS" dans la façon dont vous l'avez utilisé lorsque j'ai ouvert ce fil. Le sens familier avec "pièce" pour "P" semblait bien s'accorder.
polkovnikov.ph
Ce système utilise des boutons système intégrés qui manquent de style de bordure lorsque l'arrière-plan est défini. C'était OK quelque part à la fin des années 90 à l'époque de Visual Basic 6 et Delphi 7. Il n'y avait tout simplement pas d'alternative facile à faire correctement.
polkovnikov.ph

Réponses:

35

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:

entrez la description de l'image ici

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.

Peter - Unban Robert Harvey
la source
19

É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.

Yisela
la source
Bon maintenant toutes les bases sont couvertes ... Je peux donc supprimer la mienne.
joojaa
@joojaa J'étais en frénésie d'édition et je n'ai remarqué que d'autres As continuaient à apparaître, mais je ne les ai pas vérifiés. Je vois que nous partageons pratiquement tous les commentaires! Dommage que vous ayez supprimé le vôtre, il est toujours valide - esp. les biseaux rétro, n'aurait pas pu mieux dire.
Yisela
15

À 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:

entrez la description de l'image ici

entrez la description de l'image ici

entrez la description de l'image ici

Cai
la source
11

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.

Bagseye
la source
2
L'expérience utilisateur et la fonctionnalité sont des éléments importants d'une bonne conception - merci d'avoir soulevé ce point. Si cela fonctionne bien, soyez très prudent et testez tous les futurs changements de conception. N'aggravez pas la fonctionnalité juste pour rendre le système plus "joli".
bemdesign
Je pense que les exemples de photos dans l'autre réponse ici sont des exemples clairs de forme sur fonction. Ils imposent également un lourd fardeau aux directeurs / commerciaux pour créer l'iconographie personnalisée et ils supposent sans raison que les icônes peuvent simplifier le processus de sélection. Si je devais choisir la seule interface utilisateur que je voulais utiliser pour le point de vente dans un environnement occupé, je choisirais celle d'origine "obsolète".
Yorik
1
Évidemment, des coins arrondis yo. Ce mec tourne toujours sous Windows 2000 ...
Mazura
9

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.

Arkain
la source
J'ai jeté un coup d'œil à la page de conception de matériel et elle est écrite dans un tel langage designese, qu'un simple mortel ne peut pas commencer à le comprendre. Si vous avez un lien vers une page qui l'expliquerait à des gens qui ne parlent pas des opportunités, des métaphores, renforçant l'utilisateur comme moteur et synthétisant les principes, j'aimerais beaucoup en voir un.
Sami Kuhmonen
2

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.

MSalters
la source
1

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.

Nomadme
la source
0

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.

James Kachan
la source
Salut James, bienvenue sur GD.SE! Les détails sont ce que nous recherchons ici. :) Montrer quelques exemples pour soutenir ce que vous dites aidera certainement à améliorer la qualité de votre réponse et aidera la personne qui a demandé à comprendre ce que vous voulez dire. N'hésitez pas à éditer et à élaborer!
Vicki
0

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/

Chuck Dries
la source
0

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 .

Paul K
la source