SeaOrbiter. Documentation

Transcription

1 SeaOrbiter Documentation

2 SOMMAIRE SeaOrbiter Plaquette interactive, kézako? Les 4 questions Mockups Wireframes

3 SeaOrbiter SeaOrbiter est le seul vaisseau au monde qui permet l exploration du grand large et des abysses, 24h/24 sur de longues durées. Le design de la plaquette s inspire des éléments du monde sous-marin. Voyons comment en une plaquette, nous allons faire découvrir à l utilisateur l étendu de ce projet dont Jacques Rougerie est l inventeur. 05

4 Plaquette interactive, kézako? Les 4 questions SeaOrbiter #Créativité #Simple #Intuitif #Design #Informatif c est quoi? ça sert à quoi? MENU à quoi ça ressemble? qui l a fabriqué? Vaisseau Missions Médias Témoignages Avant de se lancer dans une plaquette interactive, nous avons résumé en quelques mots, ce que doit être une plaquette interactive. A disposition de tout le monde, cette plaquette doit surtout être simple. Il s agit d un mini site intuitif permettant à l utilisateur d avoir les informations nécessaires sans qu il y en ai trop, ni qu il n y en ait pas assez: juste le nécessaire et sans qu il y passe des heures sous peine d être ennuyé. Et tout cela, en prenant du plaisir à la navigation et à la lecture! Naviguer 06 07

5 Mockups 0. Splash Screen 0.a Le saviez-vous? 1.a Accueil 2. Témoignages 3. Vaisseau 4. Missions Pour une immersion totale, un splash screen simple, avec seulement le logotype SeaOrbiter ainsi qu une phrase d accroche. L invitation à tapoter sur Découvrir est claire, c est la seule interaction proposée. Une vidéo en background des fonds marins ainsi qu un fond sonore soutiennent l immersion. Cette box s ouvrira à chaque fois que l utilisateur démarre l application. C est un moyen de sensibilier l utilisateur sur des chiffres scientifiques qui ont le mérite d être clairs. Par exemple, 71% de la surface de la planète sont constitués par les océans. L accueil sera simple et non surchargée. Dans l accueil, on distinguera 3 parties. Il y aura le texte en slide qui décrira brièvement le vaisseau. A droite, on trouvera une esquisse du vaisseau où l utilisateur pourra s amuser à le tourner pour le voir dans tous les sens. Puis, le bouton «Naviguer» qui permettra à l utilisateur d accéder au menu et ainsi, de continuer son voyage! Sur ce screen s affichera un how to use pour l utilisateur, permettant de l aider dans sa navigation C est sur cette page que l utilisateur découvrira les principaux acteurs du SeaOrbiter. Nous mettons en avant les personnes ayant participées à ce projet en les citant. De grandes personnalités sont presentes, cela permet à l utilisateur de prendre conscience de l ampleur du projet. Il s agit de la page la plus importante du projet: le vaisseau. C est ici que l utilisateur pourra interagir sur le vaisseau en appuyant sur les boutons dédiés. Un pop-up s ouvrira ainsi qu une description détaillée et un zoom sur la zone concernée. L utilisateur pourra ici comprendre pourquoi le vaisseau gigantesque! Egalement ici, un screen dédié sera mis en place pour prévenir l utilisateur du fonctionnement de cette page. (tap sur les boutons) L utilisateur pourra ici comprendre le but du SeaOrbiter de manière précise. Comprendre les objectifs du vaisseau est essentiel pour l utilisateur qui tombe par exemple par hasard sur le SeaOrbiter. Ce sera un simple slider où l utilisateur pourra naviguer entre les missions

6 Storyboard, 5. Médias Pour une immersion totale, un splash screen simple, avec seulement le logotype SeaOrbiter ainsi qu une phrase d accroche. L invitation à tapoter sur Découvrir est claire, c est la seule interaction proposée. Une vidéo en background des fonds marins ainsi qu un fond sonore soutiennent l immersion. Mockup... C est exactement dans ce genre de projet qu on se rend compte qu un stylo et un bout de papier sont importants. Exprimer ses idées à son équipe n est pas forcément chose aisée, et on peut être clairement à côté de la plaque, surtout si on attend la maquette graphique pour se décider. La réalisation de simples storyboards/mockups nous ont permis de communiquer rapidement de façon claire dans l équipe: entre le chef de projet, les développeurs et le graphiste, on savait où se diriger. On pouvait distinguer les avantages, les inconvéniants ou si simplement, c était réalisable ou non

7 Wireframes Splash Screen Impressions, idées : immersion, grand visuel Le saviez-vous? Impressions, idées : grand visuel, simple, marquant 12 13

8 Accueil - aide Impression, idée : intuitif Accueil Impressions, idées : grand visuel, immersion 14 15

9 Vaisseau - aide Impression, idée : intuitif Vaisseau Impressions, idées : intuitif, grand visuel 16 17

10 Vaisseau - exemple 1 Vaisseau - exemple

11 Témoignages Impression, idée : slider, acteurs Vaisseau Impressions, idées : intuitif, simple 20 21

12 Médias Impression, idée : bulles, textes, images Vaisseau Impression, idée : simple 22 23

13 Documentation 2014 Zohra Chekima Fabien Pasquet Nicolas Servant Robert Nguyen SeaOrbiter

14