mirror of
https://old.git.ood.ovh/flambyte/RUX.git
synced 2025-05-10 22:14:30 +02:00
index page at user Journey + js close nav
This commit is contained in:
parent
9cae4114fa
commit
573cb54ee0
46 changed files with 845 additions and 201 deletions
332
index.html
332
index.html
|
|
@ -89,13 +89,31 @@
|
|||
|
||||
<ul class="list--header">
|
||||
<li>
|
||||
<a class="link link--header link--active" href="#partie0">Partie //01</a>
|
||||
<a class="link link--header" href="#partie0">//00</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="link link--header" href="#partie1">Partie //02</a>
|
||||
<a class="link link--header" href="#partie1">//01</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link link--header" href="#partie2">//02</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="link link--header" href="#partie3">//03</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link link--header" href="#partie4">//04</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link link--header" href="#partie5">//05</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link link--header" href="#partie6">//06</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link link--header" href="#partie7">//07</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
|
|
@ -109,74 +127,297 @@
|
|||
<div class="header__navigation--m">
|
||||
<ul class="list__m--header">
|
||||
<li>
|
||||
<a class="link mlink--header mlink--active" href="#partie0">Partie //01</a>
|
||||
<a class="link link--header" href="#partie0">Partie //00</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="link mlink--header" href="#partie1">Partie //02</a>
|
||||
<a class="link link--header" href="#partie1">Partie //01</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link link--header" href="#partie2">Partie //02</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="link link--header" href="#partie3">Partie //03</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link link--header" href="#partie4">Partie //04</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link link--header" href="#partie5">Partie //05</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link link--header" href="#partie6">Partie //06</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link link--header" href="#partie7">Partie //07</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<section class="headback">
|
||||
<div class="headback">
|
||||
<div class="fond">
|
||||
<img class="headtitle" src="/assets/images/headlogo.png"></img>
|
||||
<img class="headtitle" src="/assets/images/headlogo.png"
|
||||
alt="illustration portant les initiales de l'atelier Rethinking User Experience. RUX">
|
||||
</div>
|
||||
<!--<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">.awesome-layouts</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></code></pre>-->
|
||||
</section>
|
||||
<section class="grid">
|
||||
</div>
|
||||
<section class="grid grid--content">
|
||||
<div class="strip strip--1"></div>
|
||||
<h1 class=" title mgrid-start01 mgrid-end04" id="partie0">Phase 0 : Synopsis</h1>
|
||||
<p class="mgrid-start01 mgrid-end04 partie1_blackfill">L’atelier RUX <strong>(rethinking UX)</strong> est de
|
||||
<h1 class="title mgrid-start01 mgrid-end04 dgrid-start01 dgrid-end06" id="partie0">Synopsis</h1>
|
||||
<p class="mgrid-start01 mgrid-end04 dgrid-start04 dgrid-end06 partie1_blackfill">L’atelier RUX (rethinking UX)
|
||||
est de
|
||||
réaliser une interface adaptée et
|
||||
compréhensible pour
|
||||
l’utilisateur, pour une
|
||||
navigation facile et rapide”</p>
|
||||
<div class="strip strip--2"></div>
|
||||
<p class="mgrid-start02 mgrid-end05 partie1_blackfill">Le directeur de la Haute école Albert Jacqard nous à
|
||||
<p class="mgrid-start02 mgrid-end05 dgrid-start05 dgrid-end06 partie1_blackfill">Le directeur de la Haute école
|
||||
Albert Jacquard nous à
|
||||
donner une mission ! </p>
|
||||
<div class="strip strip--3"></div>
|
||||
<p class="mgrid-start01 mgrid-end04 partie1_blackfill">Repenser notre cours de récré</p>
|
||||
<figure class="img__content">
|
||||
<img class="image_undertxt" src="assets/images/plancour.png" srcset="assets/images/plancour@2x.png 2x"
|
||||
alt="plan de la cour de la Haute École Albert Jacquard" loading="lazy" decoding="async">
|
||||
<p class="mgrid-start01 mgrid-end04 dgrid-start03 dgrid-end05 partie1_blackfill">Repenser notre cours de récré
|
||||
</p>
|
||||
<p class="mgrid-start01 mgrid-end04 dgrid-start02 dgrid-end06 partie1_blackfill">Notre budget est limité à 200k€
|
||||
+-</p>
|
||||
<div class="strip strip--cash"></div>
|
||||
<figure class="img__content dgrid-start04 dgrid-end06">
|
||||
<img class="image_undertxt image_undertxt--iv" src="assets/images/plancour.png"
|
||||
srcset="assets/images/plancour@2x.png 2x" alt="plan de la cour de la Haute École Albert Jacquard"
|
||||
loading="lazy" decoding="async">
|
||||
<figcaption class="figcaption">schéma illustré de la cour</figcaption>
|
||||
</figure>
|
||||
<div class="strip strip--cash"></div>
|
||||
<p class="mgrid-start01 mgrid-end04 partie1_blackfill">Notre budget est limité à 200k€ +-</p>
|
||||
<figure class="img__content">
|
||||
<figure class="img__content dgrid-start02 dgrid-end05">
|
||||
<img class="image_undertxt" src="assets/images/cour.png" srcset="assets/images/cour@2x.png 2x"
|
||||
alt="plan de la cour de la Haute École Albert Jacquard" loading="lazy" decoding="async">
|
||||
<figcaption class="figcaption">Photo prise de la cour "plan large"</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<p class="grid__discu">
|
||||
<h2 class="title mgrid-start01 mgrid-end04" id="partie1">Création de l'Équipe</h2>
|
||||
<div class="mgrid-start01 mgrid-end04">
|
||||
<ul class="discu__liste">
|
||||
<li class="discu__el discu__el--pink">— On choisit quel nom pour la Team ?</li>
|
||||
<li class="discu__el discu__el--blue">— Les Rases moquettes en référence au fait qu’on va réajuster la cour
|
||||
!</li>
|
||||
<li class="discu__el discu__el--green">— Hahahahaha, allez !
|
||||
</li>
|
||||
<li class="discu__el">On se met au boulot !</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="grid grid--content">
|
||||
<p class="mgrid-start01 mgrid-end04">Pour bien commencer n’importe quel projet il faut avant tout … un client ! Le client nous a demandé de
|
||||
concevoir et repenser l’agencement de la cour de l’école, cependant il nous a donné des contraintes et a
|
||||
répondu à certaines de nos questions.</p>
|
||||
<p class="mgrid-start02 mgrid-end04">Et c’est à ce moment précis que l’on a mis la première vitesse. Notre tout nouvel atelier consistait à
|
||||
<section class="grid">
|
||||
<h2 class="title mgrid-start01 mgrid-end04" id="partie1">Création de l'Équipe</h2>
|
||||
<div class="mgrid-start01 mgrid-end04 dgrid-start02 dgrid-end05">
|
||||
<ul class="discu__liste">
|
||||
<li class="discu__el discu__el--pink"> On choisit quel nom pour la Team ? (Célia)</li>
|
||||
<li class="discu__el discu__el--green">— Les Rases moquettes en référence au fait qu’on va réajuster la
|
||||
cour
|
||||
! (Pina)</li>
|
||||
<li class="discu__el discu__el--blue">— Hahahahaha, allez ! (Amandine, Célia, Jessy, Justin et Pina)
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section class="grid grid--mega section__color section__color--pink">
|
||||
<h2 class="title mgrid-start01 mgrid-end04" id="partie2">Prémices</h2>
|
||||
<p class="mgrid-start01 mgrid-end04 dgrid-start02 dgrid-end05">Et c’est à ce moment précis que l’on a mis la
|
||||
première vitesse.</p>
|
||||
<p class="dgrid-start04 dgrid-end06">Notre
|
||||
tout nouvel atelier consistait à
|
||||
repenser l’usage de la cour en proposant des moyens d’agencement. Pour réaliser cela, on a eu recours à
|
||||
notre stratégie d’apprentissage ! </p>
|
||||
<p class="mgrid-start01 mgrid-end04 content__objet">
|
||||
La fusion d'un <mark>travail collaboratif</mark>, des travaux de recherches qui nous permettent d’aller découvrir le monde
|
||||
extérieur et <mark>nos utilisateurs</mark> et le travail pratique, ainsi que la partie individuelle pour mettre en œuvre notre
|
||||
site web, <mark>mon site web~</mark>, qui représente le fruit de notre travail. On réalisera alors notre étude de cas ! Ou notre <mark>Case-study</mark> pour
|
||||
faire plus élégant.</p>
|
||||
</div>
|
||||
<p class="mgrid-start01 mgrid-end04 dgrid-start03 dgrid-end07 content__objet">
|
||||
La fusion d'un <span class="highlight">travail collaboratif</span>, des travaux de recherches qui nous
|
||||
permettent d’aller découvrir le monde
|
||||
extérieur et <span class="highlight">nos utilisateurs</span> et le travail pratique, ainsi que la partie
|
||||
individuelle pour mettre en œuvre notre
|
||||
site web, qui représente le fruit de notre travail. On réalisera alors notre étude de cas ! Notre
|
||||
<span class="highlight">Case-study</span> pour
|
||||
faire plus élégant.
|
||||
</p>
|
||||
</section>
|
||||
<section class="grid section__color section__color--green">
|
||||
<h2 class="title mgrid-start01 mgrid-end04" id="partie3">Prémices bis</h2>
|
||||
<p class="mgrid-start01 mgrid-end04">La première étape à été d'<span class="highlight">observer la
|
||||
cour</span> afin d'avoir un visuel plus
|
||||
globale sur la cour.</p>
|
||||
<p> Une fois terminé, la classe qui était bavarde se retrouve tout de suite dans un silence le plus total.
|
||||
J'écrivais beaucoup de questions que je pourrais poser au directeur. Seulement les questions n’ont pas
|
||||
été posées dans un <span class="highlight">ordre précis.</span></p>
|
||||
<p class="mgrid-start02 mgrid-end05">Le directeur, celui qui était censé répondre à nos questions, a
|
||||
commencé à expliquer la situation. En faisant cela, il a transformé nos questions en réponses.</p>
|
||||
<p>Voici les questions:</p>
|
||||
<a href="https://miro.com/app/board/uXjVPsdXjzw=/?share_link_id=851619025509" target="_blank"
|
||||
title="Sur Miro">Aller sur Miro</a>
|
||||
<p class="mgrid-start01 mgrid-end05">
|
||||
Les questions ont été posées au directeur. Il nous a expliqué son point de vue, sa vision des choses. Il
|
||||
avait en tête de créer un axe qui nous permettrait de nous diriger plus facilement vers le Bâtiment A, B
|
||||
et C. En gardant bien en tête que bien souvent, manque de place oblige sur les parkings, les gens se
|
||||
parquent là. </p>
|
||||
<p class="mgrid-start01 mgrid-end05">
|
||||
Il imagine cela comme un Forum ( une zone de discussion). Où il y aurait la possibilité de manger, des
|
||||
lieux d’exposition, déco des murs, activités, zone de
|
||||
lecture. Distribution des diplômes. Lieu de concert. Boîte à livres. </p>
|
||||
</section>
|
||||
<section class="grid">
|
||||
<h2 class="title mgrid-start01 mgrid-end04" id="partie4">Guide d'entretien</h2>
|
||||
<p class="mgrid-start01 mgrid-end05">Alors pour cette étape, je suis partie du principe que je ne sais pas
|
||||
ce qu'il faut pour résoudre ce besoin. Même si nos futurs utilisateurs sont des élèves comme moi et mes
|
||||
camarades, il est important de comprendre <span class="highlight">les utilisateurs, leurs
|
||||
raisonnements</span> comment ils utilisent la cour, leur temps libre.</p>
|
||||
<p> Et pour cela, on prépare un <span class="highlight">guide d'entretien</span></p>
|
||||
<details class="section__color--slot" open="">
|
||||
<summary class="title__slot">Voici le guide d'entretiens en entier:</summary>
|
||||
<ul class="guide__liste">
|
||||
<li class="title--medium guide__el">Introduction :</li>
|
||||
<li>Bonjour, nous sommes étudiants en deuxième année de l’option Web.
|
||||
Bienvenue et merci de bien vouloir participer à notre interview.
|
||||
Je vais te poser des questions sur ta vie en tant qu’étudiant. Toutes tes réponses seront
|
||||
correctes. Cette interview sera enregistrée, retranscrite et ne durera que 5min. Ta
|
||||
participation peut être anonyme. Nous n’utiliserons ces données que dans le cadre scolaire.
|
||||
</li>
|
||||
|
||||
<li class="title--medium guide__el">Echauffement :</li>
|
||||
|
||||
<li>Peux-tu te présenter ? </li>
|
||||
<li>Quels sont tes passe-temps ? </li>
|
||||
<li>Kotes-tu sur Namur ? Sinon d'où viens-tu ? Comment viens-tu à l’école ?</li>
|
||||
<li>Quels sont les indispensables d’un étudiant ? En dehors du cadre de l’école ou non ?</li>
|
||||
<li>Que penses-tu de l’HEAJ et de ses environnements ?</li>
|
||||
|
||||
<li class="title--medium guide__el">Questions générales :</li>
|
||||
|
||||
<li>Si tu pouvais importer un élément de ton ancienne école dans l’HEAJ lequel serait-il ? </li>
|
||||
<li>Dans quels endroits de l’école te sens-tu le moins à l’aise ?
|
||||
</li>
|
||||
<li>Dans quels endroits de l’école te sens-tu le moins à l’aise ? </li>
|
||||
<li>Dans quels endroits extérieur te sens-tu le mieux ? Pourquoi ? </li>
|
||||
|
||||
<li class="title--medium guide__el">Approfondissement :</li>
|
||||
|
||||
<li>Si tu devais améliorer une partie de l’école, laquelle serait-il ? Pourquoi ? Comment ?
|
||||
</li>
|
||||
<li>Si tu avais une baguette magique, que changerais-tu par rapport à la cour de l’école ?</li>
|
||||
<li>Tu pourrais nous faire un petit dessin de ta cour idéale ?
|
||||
</li>
|
||||
<li>Si ton dessin se réalisait, passerais-tu plus de temps dans la cour ?
|
||||
</li>
|
||||
<li class="title--medium guide__el">Clôture de l’entretien :</li>
|
||||
|
||||
<li>Nous t’avons posé des questions sur ta condition de vie en tant qu’étudiant ainsi que sur
|
||||
l’école. Aurais-tu quelque chose à rajouter ?
|
||||
</li>
|
||||
<li>Merci pour ta participation ! Bonne journée.</li>
|
||||
|
||||
</ul>
|
||||
</details>
|
||||
<details class="section__color--slot details__QR" open="">
|
||||
<summary class="title__slot">Réponses généralisé:</summary>
|
||||
<ul>
|
||||
<li>Q : Que penses tu de l’HEAJ et de ses environnements ?</li>
|
||||
<li>R : Les locaux sont mal indiqués, triste et <span class="highlight">manque de vie</span> dans
|
||||
l’école</li>
|
||||
<li>Q : Si tu devais améliorer une partie de l’école, laquelle serait-il ? Pourquoi ? Comment ?
|
||||
</li>
|
||||
<li>R : <span class="highlight">Plus de vert</span>, retravailler les extérieurs avec des jeux </li>
|
||||
<li>Q : Dans quels endroits extérieur te sens-tu le mieux ? Pourquoi ? </li>
|
||||
<li>R : Là, où il y a de la <span class="highlight">verdure</span> et <span class="highlight">de la
|
||||
vie</span> en générale.</li>
|
||||
<li>Q : Si tu avais une baguette magique, que changerais-tu dans la cour ?</li>
|
||||
<li>R : Des tables, du sport, <span class="highlight">de la verdure.</span></li>
|
||||
<li>Q : Si ton dessin se réalisait, passerais-tu plus de temps dans la cour ?
|
||||
</li>
|
||||
<li>R : oui principalement</li>
|
||||
</ul>
|
||||
</details>
|
||||
<figure class="img__content">
|
||||
<img class="image_undertxt" src="assets/images/interview.png" srcset="assets/images/interview@2x.png 2x"
|
||||
alt="photo représentant une de nos interview" loading="lazy" decoding="async">
|
||||
<figcaption class="figcaption">Une de nos plus belles interview</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section class="grid section__color section__color--blue">
|
||||
<h2 class="title mgrid-start01 mgrid-end04" id="partie5">Top Task & fonctions</h2>
|
||||
<p class="mgrid-start01 mgrid-end05">Le résultat de interviews ont démontré que ce qui revenait souvent était la
|
||||
volonté <span class="highlight">d’ajouter des verdures</span>, ainsi qu’un espace pour travailler. </p>
|
||||
<p class="mgrid-start02 mgrid-end06">Suite à cela, on pouvait choisir quel
|
||||
Top task nous intéressait le plus parmis celle qu'on aurait voté.</p>
|
||||
<figure class="img__content">
|
||||
<img class="image_undertxt" src="assets/images/votetop.png" srcset="assets/images/votetop@2x.png 2x"
|
||||
alt="photo représentant une de nos interview" loading="lazy" decoding="async">
|
||||
<figcaption class="figcaption">On avait droit à 3 votes maximum.😇</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section class="grid section__color section__color--blue">
|
||||
<h2 class="title mgrid-start01 mgrid-end04" id="partie6">Audits</h2>
|
||||
<div class="slideshow-container">
|
||||
<p class="mgrid-start01 mgrid-end05 slide_set">J'ai beaucoup aimé la préparations de nos audits. C'est à
|
||||
dire chercher
|
||||
un peu partout des idées venant des architectes, des passionés par de la récup pour créer des bancs, des
|
||||
supports pour les plantes. Dans la <a href id="#partie7"> partie 7</a>, on y trouve mon croquis qui rentre en lien avec les images
|
||||
ci-dessus.
|
||||
</p>
|
||||
|
||||
<div class="mySlides fade">
|
||||
<figure class="img__content img__content--slide">
|
||||
<img class="image_undertxt image_undertxt--slide" src="assets/images/plante.jpg"
|
||||
srcset="assets/images/plante@2x.png 2x" alt="photo représentant une de nos interview"
|
||||
loading="lazy" decoding="async">
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="mySlides fade">
|
||||
<figure class="img__content img__content--slide">
|
||||
<img class="image_undertxt image_undertxt--slide" src="assets/images/plante2.png"
|
||||
srcset="assets/images/plante2@2x.png 2x" alt="photo représentant une de nos interview"
|
||||
loading="lazy" decoding="async">
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="mySlides fade">
|
||||
|
||||
<figure class="img__content img__content--slide">
|
||||
<img class="image_undertxt image_undertxt--slide" src="assets/images/plante.png"
|
||||
srcset="assets/images/plante3@2x.png 2x" alt="photo représentant une de nos interview"
|
||||
loading="lazy" decoding="async">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="mySlides fade">
|
||||
|
||||
<figure class="img__content img__content--slide">
|
||||
<img class="image_undertxt image_undertxt--slide" src="assets/images/rest2.png"
|
||||
srcset="assets/images/rest2@2x.png 2x" alt="photo représentant une de nos interview"
|
||||
loading="lazy" decoding="async">
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="mySlides fade">
|
||||
|
||||
<figure class="img__content img__content--slide">
|
||||
<img class="image_undertxt image_undertxt--slide" src="assets/images/rest4.png"
|
||||
srcset="assets/images/rest4@2x.png 2x" alt="photo représentant une de nos interview"
|
||||
loading="lazy" decoding="async">
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="element_dot">
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<section class="grid section__color">
|
||||
<h2 class="title mgrid-start01 mgrid-end04" id="partie7">User Journey</h2>
|
||||
<h3 class="title mgrid-start01 mgrid-end04"></h3>
|
||||
<p class="mgrid-start01 mgrid-end04">Les User journey, est utilisés pour les recherches et améliorations selon
|
||||
un ou des
|
||||
problème(s) trouvé(s), cela permet d’améliorer nos projets et de trouver une solution plus optimale pour le
|
||||
projet.</p>
|
||||
<ul>
|
||||
<li class="slide"> <img class="image_slide" src="assets/images/user1.png" alt="User journey réalisé"
|
||||
srcset="assets/images/user1@2x.png 2x" loading="lazy" decoding="async">
|
||||
</li>
|
||||
<li class="slide"> <img class="image_slide" src="assets/images/user2.png" alt="User journey réalisé"
|
||||
srcset="assets/images/user2@2x.png 2x" loading="lazy" decoding="async"></li>
|
||||
<li class="slide"> <img class="image_slide" src="assets/images/user3.png" alt="User journey réalisé"
|
||||
srcset="assets/images/user3@2x.png 2x" loading="lazy" decoding="async"></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="grid">
|
||||
<h2 class="title mgrid-start01 mgrid-end04" id="partie7">Intégration</h2>
|
||||
<figure class="img__content">
|
||||
<img class="image_undertxt" src="assets/images/plancroquis.png" srcset="assets/images/plancroquis@2x.png 2x"
|
||||
alt="photo représentant une de nos interview" loading="lazy" decoding="async">
|
||||
</figure>
|
||||
</section>
|
||||
<aside class="grid reseaux">
|
||||
<h2>Retrouvez-moi sur :</h2>
|
||||
|
|
@ -265,7 +506,6 @@
|
|||
</ul>
|
||||
|
||||
</aside>
|
||||
</main>
|
||||
<footer>
|
||||
<div>
|
||||
<nav>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue