- projet en alternance -
côntrole de prix et inventaire
- mi-2023
Objectif : Rendre l’interface plus moderne et intuitif.
Contexte : alternance
Support : scanette sous OS d’android
Rôle : chargée UX / UI design
Outils : Figma, Illustrator, After Effects
- à propos de -
contrôle de prix
L’application « Contrôle de prix » permet de vérifier les prix et les étiquettes des articles en magasin. En cas d’erreur constatée, elle offre la possibilité de signaler et transmettre facilement l’information pour une correction rapide.
inventaire
L’application « Inventaire » est destinée à la gestion des inventaires en magasin ou réserve. Elle permet de scanner les articles, de modifier les emplacements et de vérifier les stocks.
scanette
Modéle : ZEBRA PS20
Écran : 4″ (taille d’une carte bancaire)
OS : android
Contrôle de prix
- Écrans principaux -
Problème :
- Manque de retour visuel et textuel : L’application avait une interface très simple avec des instructions de scan basiques, offrant peu d’accompagnement visuel ou textuel.
- Absence de liste et pas de possibilité de modification de saisie : L’application ne permettait pas d’accéder à un récapitulatif ou à une liste des articles scannés, ne donnant ainsi pas la possibilité aux utilisateurs de vérifier ou corriger leurs saisies.
Solution :
Retour visuel et textuel amélioré : L’interface est devenue plus intuitive, avec des icônes visuelles claires et des boutons distincts pour signaler les erreurs de prix ou d’étiquette. Des supports visuels ont été ajoutés pour confirmer les actions.
Accès à la liste et modification des saisies : Une nouvelle fonctionnalité permet de gérer et modifier les articles scannés dans une liste d’actions.
accueil
*Faites glisser le curseur (< >) pour visualiser les différences entre les versions avant et aprés.
article scané
Prototype
*Faites glisser le curseur (< >) pour visualiser les différences entre les versions avant et aprés.
- Écrans d'erreur -
Problème :
- Manque de retour visuel : Les écrans d’erreur avaient une présentation basique avec des icônes simples, rendant la compréhension des erreurs moins intuitive pour l’utilisateur.
- Disposition des éléments : Le bouton « retour » n’était pas suffisamment grand pour l’écran et était trop éloigné du bouton de scan intégré dans la scanette.
Solution :
Retour visuel : Les écrans d’erreur sont désormais plus visuels et intuitifs grâce à des illustrations distinctes pour chaque type d’erreur.
Disposition des éléments ajustée : Le bouton « retour » est maintenant plus visibles et accessibles lorsque la scanette est tenue avec une seule main.
Animatioins
- Pour les deux solutions -
Les écrans d’erreur et les animations sont similaires pour les deux logiciels car ils appartiennent à la même suite d’applications, seule la couleur varie.
code invalide
SESSION EXPIRÉ
ARTICLE INCONNU
ERREUR connexion
scan d'article
ERREUR inattendu
réussite
Inventaire
- Démarrage de la session -
Problème :
- Démarrage fragmenté : Chaque choix concernant le type et l’emplacement de l’inventaire était présenté sur une page distincte, sans possibilité de retour en arrière. En cas d’erreur, l’utilisateur devait cliquer sur « menu » pour effectuer une modification.
Solution :
Options de démarrage sur une seule page : La liste complète de configuration de démarrage est présentée en un seul écran, offrant à l’utilisateur un récapitulatif complet avant de débuter la session. Pour modifier une configuration, il suffit de cliquer sur « emplacement » dans la navigation, évitant ainsi la recherche du bouton dans le menu.
- Scan -
Problème :
- Navigation superflue : Bien que les écrans de scan aient une interface simple et uniforme, ils présentaient certaines complexités, comme le besoin de parcourir le menu pour ajouter l’option de poids dans l’« inventaire standard ».
- Information manquante : Les détails utiles tels que l’emplacement de l’inventaire choisi lors du démarrage n’étaient affichés nulle part.
Solution :
Transition du menu à la barre de navigation : Toutes les pages et fonctionnalités accessibles précédemment depuis le bouton « menu » sont maintenant disponibles depuis la barre de navigation ou directement depuis la page, par exemple, la saisie du poids est désormais accessible via un bouton à bascule.
- Information et indices : Les écrans offrent plus d’accompagnement visuel et textuel. Des illustrations aident à s’orienter avant le début du scan et fournissent une réponse visuelle immédiate après l’enregistrement des articles, améliorant ainsi l’expérience utilisateur.
Inventaire standard
Inventaire standard avec poids
Inventaire presse
- Liste -
Problème :
- Gestion de la liste : La flexibilité et les options pour la gestion des entrées étaient limitées. Les utilisateurs ne pouvaient pas modifier ou supprimer les articles directement depuis l’application ; ils devaient plutôt naviguer dans le menu pour transférer la liste vers l’ordinateur.
Solution :
Améliorations générales : L’interface de la liste des articles scannés est désormais plus informative et interactive. Les utilisateurs peuvent accéder à des détails supplémentaires tels que l’heure de scan et l’emplacement de la session, ainsi qu’à un bouton « transmettre » bien visible pour finaliser et envoyer les entrées.
Gestion de la liste : Des options pour modifier ou supprimer des articles sont maintenant facilement accessibles en faisant défiler vers la gauche.
- Finalisation -
Problème :
- Faible retour visuel : Les écrans de finalisation de la session étaient fonctionnels mais basiques, offrant peu d’informations et de retour visuel pour guider l’utilisateur.
Solution :
Optimisation du retour visuel et textuel : Les écrans sont maintenant plus informatifs, incluant une confirmation de transmission avec des avertissements clairs, ce qui rends le processus plus transparent. Pendant la transmission, des illustrations fournissent un retour visuel immédiat, améliorant ainsi l’expérience utilisateur. Enfin, les options pour terminer l’inventaire sont formulées de manière plus élaborée, offrant la possibilité de recommencer ou de quitter l’application.
Confirmation
Transmission
Finalisation
