Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mmicastres/sae401-thomas-zabalo-etienne-gonella
sae401-thomas-zabalo-etienne-gonella created by GitHub Classroom
https://github.com/mmicastres/sae401-thomas-zabalo-etienne-gonella
Last synced: about 1 month ago
JSON representation
sae401-thomas-zabalo-etienne-gonella created by GitHub Classroom
- Host: GitHub
- URL: https://github.com/mmicastres/sae401-thomas-zabalo-etienne-gonella
- Owner: mmicastres
- Created: 2024-03-05T09:50:05.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-04-22T08:53:01.000Z (9 months ago)
- Last Synced: 2024-04-22T12:01:31.907Z (9 months ago)
- Language: PHP
- Size: 200 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Répository React et React Native
https://github.com/Thomas-Zabalo/React
https://github.com/Thomas-Zabalo/React-native
# Dossier UX
## Membres du groupe
ZABALO Thomas sur ***Apple Design***
GONELLA Etienne sur ***Material Design***
## Description générale de l'application
Notre application vise à faciliter la création de personnages pour le jeu vidéo Baldur's Gate 3 en permettant aux joueurs de préparer leurs personnages à l'avance. Cette préparation permet de mieux comprendre l'utilisation des sorts et une planification plus stratégique.
Au début de l'aventure, les joueurs doivent créer un personnage en choisissant sa race, sa sous-race, sa classe, sa sous-classe et son origine. Chaque choix influence les compétences et les caractéristiques du personnage, qui évoluent au fil des 12 niveaux.
Plonger dans le jeu sans préparation peut être risqué, car les choix effectués affectent directement l'expérience de jeu. De plus, à mesure que les joueurs progressent, ils débloquent de nouvelles compétences et sorts, les confrontant fréquemment à des choix difficiles.
L'objectif de notre application est d'anticiper ces choix en proposant une visualisation complète des compétences disponibles pour chaque niveau de progression, indépendamment de la race et de la classe choisies. Cela permet aux joueurs de planifier leur progression tout au long de l'aventure, maximisant ainsi l'efficacité et la satisfaction de jeu.
## Fonctionnalités / Écrans
Inscription
> - Formulaire permettant aux utilisateurs de s’inscrire
> - Imposer un mot de passe sécurisé
> - Crypter les mots de passe
Connexion
> - Formulaire de connexion grâce à l’adresse email et le mot de passe
> - Possibilité de se souvenir de l’utilisateur
Page d’accueil
> - (Présentation application) visible seulement sur le format desktop
> - Création de mon personnage
> - Visualisation trois derniers persos créés
Page profil
> - Informations personnelles (possibilité de les modifier)
> - Nom, prénom, photo
> - Liste mes persos
> - Option pour modifier un personnage déjà créer
Page modification personnage
> - Même page que la création de personnage, mais avec les éléments du personnage choisi précédemment
> - Cette partie serait une *V++*
Page création de personnage
> - Choix de sa race, sa sous-race, sa classe, sa sous-classe et son origine
> - Choix des sorts pour chacun des 12 niveaux
> - Validation de la création de personnage
Page liste personnage communauté
> - Liste des personnages crées
> - Détails des personnages crées
Page personnage
> - Nom du personnage
> - Détails de sa race, sa sous-race, sa classe, sa sous-classe et son origine
> - Détails de tous les sorts qu'il a choisi pour chacun des niveaux
### Navigation
Dans notre application, nous avons opté pour l'intégration d'un menu visible afin de faciliter son utilisation pour les utilisateurs. Cette approche évite à l'utilisateur de devoir chercher comment accéder aux différentes fonctionnalités de l'application.
Le menu est composé de trois éléments clairement identifiables grâce à des icônes :
> - Un logo "profil", pour accéder à son espace personnel (ou Page Profil)
> - Le logo du jeu, pour revenir à l'accueil
> - Une icône en forme d'étoiles, pour accéder à la liste des personnages créer par l'utilisateur, avec en plus, les personnages "étranger" (c.a.d. créés par d'autres personnes mais modifiés par l'utilisateur)
En plus du menu, l'application propose d'autres moyens de navigation, notamment des boutons comme "Voir plus" ou "Créer". De plus, une image de profil en haut à droite permet également d'accéder rapidement au profil utilisateur.
Ces différentes options de navigation ont été mises en place pour offrir une expérience conviviale et intuitive à l'utilisateur, lui permettant ainsi de naviguer facilement dans l'application et d'accéder rapidement aux fonctionnalités qu'il recherche.
## Accueil
Notre page d'accueil a été conçue de manière simple et intuitive, avec trois sections distinctes pour offrir une expérience enrichissante aux utilisateurs.
#### Création de personnages
Dans cette première section, les utilisateurs ont la possibilité de démarrer leur aventure en créant leur propre personnage. Que vous soyez un débutant ou un joueur expérimenté, notre interface conviviale vous permettra de donner vie à votre personnage de rêve.
#### Personnages de la communauté
La deuxième section est spécialement dédiée aux personnages de la communauté. Partagez vos créations avec d'autres utilisateurs et découvrez les personnages uniques créés par la communauté. Vous serez inspiré par la diversité et la créativité des personnages partagés ici.
#### Médias et réseaux sociaux (Qui n'est pas sur ce design système)
Enfin, notre troisième section est une passerelle vers les médias et les réseaux sociaux. Restez à jour avec les dernières nouvelles et les annonces concernant le jeu. Explorez du contenu supplémentaire, découvrez des astuces et des guides, et restez connecté avec d'autres joueurs via nos réseaux sociaux.
### Ecran 1 / Page 1
## Accueil
Sur la page d'accueil, nous avons plusieurs éléments comme :
- Création de personnage : Vous pouvez créer votre propre personnage en utilisant notre interface conviviale. Personnalisez les traits, les compétences et l'apparence de votre personnage pour qu'il corresponde parfaitement à votre vision !
- Affichage des personnages de la communauté : Découvrez les personnages créés par d'autres utilisateurs de notre application. Explorez une variété de personnages uniques et inspirez-vous pour vos propres créations !
Nous avons conçu une interface utilisateur intuitive avec un slider sur la page d'accueil. La troisième diapositive est partiellement masquée pour encourager les utilisateurs à explorer davantage. Nous avons utilisé des couleurs contrastées telles que le noir, le gris opaque et le violet pour mettre en valeur les éléments cliquables et les boutons.
### Ecran 2 / Page 2
## Connexion
Bienvenue sur notre page de connexion. Connectez-vous avec votre adresse e-mail et votre mot de passe et appuyez sur le bouton "Connexion" pour accéder à votre compte et à la création de personnage.
Les différents champs :
> - Adresse e-mail
> - Champ de mot de passe
> - Bouton "Connexion"
> - Bouton "Inscription"
Après s'être connecté nous sommes redirigé vers la page d'accueil, nous avons désormais accés à la création de personnage ainsi qu'a la visualisation de son compte, dans lequel toute ses informations personnelles sont présentés.
### Ecran 3 / Page 3
## Inscription
Si vous n'avez pas encore de compte, vous pouvez en créer un facilement en cliquant sur le lien "Inscription" sur la page précédente. Vous serez dirigé vers une page d'inscription où vous pourrez fournir les informations nécessaires pour créer votre compte.
Les différents champs
> - Nom d'utilisateur/Pseudo
> - Adresse e-mail
> - Champ de mot de passe
> - Champ de confirmation du mot de passe
### Ecran 4 / Page 4
#### Liste des personnages
Sur cette interface on retrouve le même système de "Cards" dans lequel est représenté les personnages de la communauté. Ces personnes sont caractérisés par son "Nom", sa "Race" ainsi que sa "Classe". On retrouve par la suite un bouton en amont qui permet de voir les details spécifique du personnages
### Ecran 5 / Page 5
## Création de personnage
Choix de la race : L'utilisateur commence par choisir la race de votre personnage parmi les onze options disponibles. Chaque race possède des descriptions détaillées et des caractéristiques uniques, y compris :
> - Distance d'attaque : Cette caractéristique indique la portée d'attaque préférée de la race, qu'il s'agisse du combat rapproché, à distance ou des deux.
> - Compétences : Chaque race est dotée de compétences particulières qui lui confèrent des avantages uniques dans différentes situations.
Une fois que le choix de l'utilisateur a été fait, il pourra passer à l'étape suivante de la création du personnage.
## Justification du choix
La mise en place de "Cards" pour la sélection d'un personnage présente de nombreux avantages. Visuellement attrayantes, les "Cards" permettent une présentation claire et concise de toutes les options des personnages disponibles, facilitant ainsi la comparaison et la prise de décision pour les utilisateurs. Leur interactivité permet également aux utilisateurs d'explorer chaque option en détail, et cela nous permettra de le développer plus facielement. En combinant visibilité et facilité d'utilisation, les "Cards" offrent une meilleure expérience utilisateur pour la sélection d'un personnage.
### Ecran 6 / Page 6
## Création de personnage
#### Choix de la sous-race
Certaines races proposent différentes sous-races, mais pas toutes, chacune des races qui proposent une sous-race à ses propres caractéristiques et compétences spécifiques. Ces sous-races offrent des options de personnalisation supplémentaires pour affiner votre personnage selon vos préférences de jeu.
#### Description et caractéristiques des sous-races
Chaque sous-race est accompagnée d'une description détaillée de ses origines et de ses caractéristiques distinctives. Cela permettra à l'utilisateur de découvrir les traits uniques de chaque sous-race, notamment leur distance d'attaque, leurs compétences de sous-classe et d'autres particularités qui les différencient les unes des autres.
## Justification du choix
Nous avons mis en place le même système de "Cards" pour ranger nos sous-races.
### Ecran 7 / Page 7
## Création de personnage
Lorsque que l'utilisateur choisi une sous-race, il aura également l'opportunité de sélectionner un sort mineur ou majeur selon la sous-race qu'il choisit. Chacun de ces sorts offre des avantages uniques pour affiner les compétences du personnage.
Choix du sort mineur
Certaines sous-races proposent une sélection de sorts mineurs parmi lesquels l'utilisateur peut choisir. Ces sorts mineurs offrent des effets variés, allant de compétences offensives à des capacités de soutien ou de défense.
#### Caractéristiques des sorts mineurs
Les sorts mineurs sont accompagnés de descriptions détaillées de leurs caractéristiques, notamment leur distance d'attaque, leur portée, leur puissance et d'autres aspects spécifiques. Il arrive aussi que l'utilisateur puisse choisir plusieurs sorts tout dépendra encore une fois de sa race et de sa classe.
## Justification du choix
Nous avons mis en place le même système de "Cards" pour ranger nos sorts.
### Ecran 8 / Page 8
## Création de personnage
Après que l'utilisateur ait choisi sa race et sa sous-race, il est temps de définir la voie que le personnage empruntera en sélectionnant sa classe parmi douze options uniques.
#### Choix de la classe
Il existe douze classes différentes parmi lesquelles l'utilisateur pourra choisir. Chaque classe offre un style de jeu différent, des caractéristiques uniques et des compétences spéciales.
#### Description et caractéristiques des classes
Chaque classe est accompagnée d'une description détaillée de ses origines, de ses compétences spéciales et de ses habilités principales qui donne des avantages dans certaines situations.
## Justification du choix
Nous avons mis en place le même système de "Cards" pour ranger nos classes.
### Ecran 9 / Page 9
## Création de personnage
Lors de la création du personnage, l'utilisateur devra choisir son origine qui influencera grandement le jeu. L'origine du personnage est en quelque sorte histoire personnelle.
#### Amélioration des habiletés
Chaque origine confère au personnage des habiletés spécifiques qui correspondent à son histoire et à son passé. Ces habiletés peuvent être utilisées pour résoudre des énigmes, influencer les dialogues ou réussir des actions spécifiques tout au long de votre aventure.
#### Bonus sur certaines actions
En plus des habiletés spécifiques, chaque origine offre également des bonus sur les habilités principales, ce qui donne un avantage dans certaines situations.
## Justification du choix
Nous avons mis en place le même système de "Cards" pour ranger nos origines.
### Ecran 10 / Page 10
## Création de personnage
#### Choix de compétences/sorts
L'utilisateur aura la possibilité de choisir parmi une sélection de compétences et de sorts. Ces choix détermineront les capacités et les talents du personnage, lui permettant de s'adapter à différentes situations et styles de jeu.
#### Passifs tout au long des 12 niveaux
Tout au long de la progression, son personnage bénéficiera de passifs spéciaux qui lui conféreront des avantages supplémentaires. Ces passifs peuvent améliorer ses capacités de combat, sa résistance aux dégâts, ou lui offrir des compétences spéciales uniques.
## Justification du choix
Nous avons choisi d'utiliser une liste déroulante avec plusieurs éléments visibles pour offrir une expérience utilisateur plus intuitive. Cette approche permet aux utilisateurs de voir immédiatement une partie des options disponibles sans avoir besoin de dérouler complètement la liste.
En affichant plusieurs éléments de la liste déroulante, nous facilitons la navigation et la sélection des options pour les utilisateurs. Cela leur permet de parcourir rapidement les choix disponibles et de sélectionner celui qui correspond le mieux à leurs besoins sans avoir à parcourir une longue liste.
Cette approche est particulièrement utile lorsque la liste contient un nombre limité d'options et que les utilisateurs peuvent facilement visualiser toutes les possibilités sans être submergés par une liste déroulante trop longue.
Enfin, nous offrons à l'utilisateur la possibilité de donner un nom au personnage qu'il va créer.
### Ecran 11 / Page 11
## Création de personnage
Voici un aperçu de ce qui pourrait apparaître sous l'un des niveaux. Cet aperçu varie en fonction de la classe choisie ainsi que de la race du personnage.
### Justification pour la création de personnage interface
Meme justification que celle juste en aval
### Ecran 12 / Page 12
## Liste des personnages de la communauté
### Utilisation des cards pour représenter les personnages de la communauté
Les cards sont un moyen efficace de présenter visuellement les informations sur chaque personnage de la communauté. En utilisant des cards, nous offrons une présentation uniforme et organisée des différents personnages, ce qui facilite la comparaison et la sélection pour les utilisateurs. Chaque cards affiche de manière concise et claire le nom du personnage, sa race et sa classe, fournissant ainsi les informations essentielles pour aider les utilisateurs à choisir quel personnage veulent, ils voir.
## Justification
### Choix des couleurs pour les boutons et le fond des cards
Nous avons choisi d'utiliser des boutons détaillés en violet et un fond noir pour les cards afin de créer un contraste visuel saisissant et attrayant. Le violet est une couleur souvent associée à la royauté, à la créativité et à l'originalité, ce qui renforce l'idée de personnages uniques et extraordinaires au sein de notre communauté. De plus, le fond noir offre un contraste fort qui met en valeur les éléments de la cards, attirant ainsi l'attention de l'utilisateur sur les informations importantes.
### Ecran 13 / Page 13
## Profil
### Compte utilisateur
Dans votre compte utilisateur, vous pouvez accéder à vos informations personnelles ainsi qu'à la gestion de votre profil.
> - Photo de profil : Une photo que vous avez choisie pour représenter votre compte.
> - Adresse e-mail : Votre adresse e-mail utilisée pour vous connecter à votre compte.
> - Pseudo : Votre pseudonyme ou nom d'utilisateur.
> - Mot de passe : Votre mot de passe sécurisé.
> - Nombre de personnages créés : Le nombre total de personnages que vous avez déjà créés.
Le bouton "Modifier" est disponible pour vous permettre de mettre à jour vos informations personnelles à tout moment.
## Justification
Le design de cette interface est simple, clair et épuré, comme le reste de l'application, afin de garantir une expérience utilisateur fluide et intuitive.
### Ecran 14 / Page 14
## Modification profil
### Compte utilisateur
Lorsque l'utilisateur veut modifier son compte il a cliquer sur modifier. A partir du moment ou il a cliquer sur le bouton il peut modifier
> - Photo de profil : Une photo que vous avez choisie pour représenter votre compte.
> - Adresse e-mail : Votre adresse e-mail utilisée pour vous connecter à votre compte.
> - Pseudo : Votre pseudonyme ou nom d'utilisateur.
> - Mot de passe : Votre mot de passe sécurisé.
> - Confirmation du Mot de passe : Validation du nouveau mot de passe sécurisé
> - Nombre de personnages créés : Le nombre total de personnages que vous avez déjà créés.
Le bouton "Modifier" permet de valider les mises à jour du profil sur les informations personnelles de l'utilisateur.
## Justification
Même explicaiton que celle en aval
### Ecran 15 / Page 15
## Modification profil photo
### Photo Utilisateur
Lorsque vous cliquez sur votre photo de profil, un modal apparaît proposant différentes images représentant les personnages que l'on croise dans le jeu. En sélectionnant l'une des images, votre photo de profil se met automatiquement à jour.
## Justification
Même explicaiton que celle en aval
## Différence entre web et mobile
### Conception cohérente sur tous les appareils
Nous avons choisi de maintenir une conception cohérente sur tous les appareils, que ce soit sur desktop ou mobile, afin d'offrir une expérience utilisateur fluide et intuitive. Cette cohérence visuelle permet aux utilisateurs de naviguer facilement d'un appareil à l'autre sans perdre leurs repères.
### Fonctionnalités spécifiques à la version desktop
Bien que la conception reste la même, la version desktop de notre application propose une fonctionnalité supplémentaire : la partie admin. Nous avons décidé d'intégrer cette fonctionnalité uniquement sur la version desktop car nous estimons qu'elle sera plus accessible et plus pratique pour les administrateurs de l'application.
### Avantages de la cohérence visuelle
Maintenir le même design sur les deux plateformes permet aux utilisateurs de se repérer facilement, quel que soit l'appareil qu'ils utilisent. Cela garantit une expérience utilisateur uniforme et confortable, tout en offrant des fonctionnalités spécifiques là où elles sont le plus utiles.
## Maquettes finales
Nous avons décider de choisir le Design System d'Etienne "Matérial Design" car nous avons trouvé que ce DS etait plus accessible et plus facile d'utilisation, d'autant plus que contrairement à celui d'Apple on retrouve plus de composant et plus de cadre pour réaliser la maquette, on aura donc une structure plus stable et plus adapté dans le développement web et mobile.
***Liens vers les maquettes***
#Desktop et Mobile Thomas
https://www.figma.com/file/YuhwJtUTLoiZkc7srXcJpB/Application-avec-Apple-Design?type=design&node-id=1402%3A11502&mode=design&t=MpEsNFvRpGPDrXTf-1
#Desktop et Mobile Etienne
https://www.figma.com/file/fa4tjoYDCjhy48dcc1ZzH1/Material-3-Design-Kit-(Community)?type=design&mode=design&t=SyHPt0BHXMEqN32g-0