Design de l’application mobile Traverse

En complémentarité au billet sur l’application d’éditorialisation, cette publication présente le design de l’application mobile Traverse.

En attendant d’y intégrer les « bons » contenus (images, textes etc), les écrans présentés dans ce billet permettent de:

  • découvrir les fonctionnalités principales: mode découverte et mode exploration
  • comprendre la création de playlists
  • avoir une impression de l’expérience utilisateur via le design et les concepts d’ergonomie d’usage

Grâce au travail considérable réalisé par 8Bit Studio, les développeurs de Mobile Thinking peuvent maintenant démarrer le travail de programmation, pour aboutir au début de l’été à une version beta de l’application mobile.

 

La suite…

Stage design web (UI/UX)

Dans le cadre des produits et projets développés chez Memoways, nous cherchons une ou un stagiaire design web.

Vous êtes intéressé/e de collaborer sur:

  • le développement d’applications web ou mobiles au niveau design UI&UX
  • du prototypage de players vidéo Comet
  • le design d’éléments ou modules pour du storytelling vidéo (templates vidéo pour les réseaux sociaux)
  • la réalisation de schémas explicatifs, de plaquettes (print) et de documents de présentation (écran)

La suite…

Résumé de l’atelier design de services

Pour réaliser la plateforme numérique du projet Patrimoines franco-suisses en partage, il s’agit de répondre à trois questionnements en parallèle:

  • Quelles données ?
    Chaque lieu de patrimoine a ses propres outils de base de données, ses logiques d’indexation et méthodologies de travail. Nous avons fait un premier recensement des contenus existants dans des bases de données métiers, cartographié les pratiques courantes; maintenant il s’agit de voir comment on peut agréger les contenus dans un outil commun afin de créer des liens entre ces contenus: des histoires transversales.
  • Quelles histoires ?
    Cet outil que nous allons développer entre 2016 et 2017 permettra de récupérer des données et métadonnées existantes, ajouter des connecteurs sociaux (récupérer de manière très ciblée des contenus depuis Instagram, Facebook, Twitter etc) avec l’objectif de rendre les données éditorialisées vivantes avec des contenus « temps réel » du web social. Nous avons esquissé des schémas de fonctionnement et d’architecture; une fois que nous aurons validé les sources et les usages nous pourrons préciser les fonctionnalités et le design de cet outil d’éditorialisation commun.
  • Quels usages ?
    Des données éditorialisées sans savoir qui va les utiliser, comment et dans quel but, ne sont pas vraiment utilisables. C’est pourquoi il est indispensable de pouvoir esquisser des scénarios d’usages souhaités, en lien avec les usages actuels mais également en imaginant des nouveaux usages qui permettraient d’atteindre un public plus jeune.

Nous menons ces 3 chantiers de front; le chantier des scénarios d’usages a fait l’objet d’un atelier orienté « design de services » mené par la Cité du Design et qui s’est tenu début avril à Ferney-Voltaire.

La suite…

Player vidéo pour la RTS

Avec Memoways, nous venons de finaliser un « POC » (Proof Of Concept ») pour la RTS (Télévision Suisse Romande).

Les enjeux étaient les suivants:

  • il s’agit de valoriser la mine d’or que sont les archives de la RTS (plus de 80’000 heures) et de connecter les histoires qui permettent de rapprocher le passé à des publics qui ne viennent pas tout seul fouiller dans les archives
  • au niveau de l’expérience utilisateur, pouvoir naviguer intuitivement à travers une grande masse de vidéos, trouver les reportages intéressants et découvrir d’autres contenus sur un mode de « sérendipité »
  • au niveau des fonctionnalités, pouvoir accéder à des contenus de manière précise, transversale et pouvoir créer des listes de lecture (ou des collections personnalisées)
  • à terme, pouvoir choisir les vidéos intéressantes de manière maîtrisée (montage vidéo dans le navigateur)

Nous avons fait les choix suivants pour répondre aux enjeux posés ci dessus:

  • proposer des playlists éditorialisables (les capsules qui sont présentées sur la landing page – ici sur un mode random) ainsi que des listes personnelles basées sur du filtrage à partir d’un mot clef, en fonction de ses propres questions et envies;
  • pouvoir chercher à l’intérieur des reportages, en passant par une sorte de chapitrage basé sur les mots clefs et non sur un time code;
  • faire du filtrage multi-critère réactif et visuel, où l’on peut tout de suite voir le résultat de son filtrage dans l’interface, sans devoir recharger la page;
  • naviguer, filtrer et interagir à travers une interface très visuelle posée par dessus la vidéo. Les interactions se font de manière fluide, sans perturber la lecture vidéo. La vidéo est la page web…

Voici une vidéo qui montre comment il est possible de naviguer à travers les reportages (à l’aide des tags attachés aux reportages):

La suite…

Quelques schémas

Dans le cadre de projets que nous avons déposé ces derniers temps, nous avons, grâce à la précieuse collaboration de Anna Cavalleri, pu réaliser un certain nombre de schémas.

Une image vaut mille mots: l’enjeu pour pouvoir communiquer le projet de manière simple et directe, et d’être le plus économe en mots – ces schémas vont pouvoir nous y aider.

Voici le schéma de la plateforme logicielle Memoways (qui est à la base du dispositif artistique Walking the Edit):

Plateforme Memoways

 

Le workflow du projet: réalisation de contenus, indexation puis réception interactive.

workflow

 

Recherche graphiste

Une esquisse d’interface pour l’application mobile

 

La société Memoways cherche un/e graphiste pour réaliser les projets suivants:
– design d’une application mobile (iPhone + Android), voir ce billet sur l’application actuelle. Il y a une base déjà existante, mais encore beaucoup de choses sont à inventer;
– design de sites web (améliorations des sites http://walking-the-edit.net et http://memoways.com). Idem, les bases sont là, mais à faire évoluer;
– améliorations graphiques sur les documents de communication, réflexion sur des modules de présentation (slides, vidéos…)
– design d’une application MAC OSX, infos. Tout est à faire pour ce chantier là.

La suite…

Salle de cinéma

En travaillant sur le site web, se pose la question de comment présenter le duo trajet/film dans notre salle de « WEnema »:

projection_toutesbulles

version où l’on voit dans le futur…

projection_videdevant

Version où, comme pour le film, on ne sait pas ce qui arrive…

Il y en a sûrement encore plein d’autres possibles.

UF, 22.05.2009

Graphisme – pistes pour le site web

Le chantier du graphisme est complexe – il s’agit de proposer des interfaces claires, intuitives et ayant un même air de famille entre le WEphone et le site web.
De la même manière que pour le WEphone, nous n’aurons pas le temps ni les moyens d’aboutir à une version évoluée et complète du site web d’ici la fin de la phase 2, donc les efforts actuels sont portés sur le fait de déterminer les intentions, les idées et les fonctionnalités que nous aimerions voir sur le site web final.

Dans les grandes lignes, les intentions et envies sont les suivantes:
– le site doit être vivant et modulable, il doit rendre compte à sa manière des enjeux contenus dans le projet (rapport à la mémoire; réapropriation d’un territoire et de médias; auteur collectif; forme de l’inachevé et de l’ouverture, etc). On doit également sentir qu’il s’agit de jouer avec les dimensions spatiales et temporelles: espace réel / espace digital; potentialités d’un espace (réel ou digital); temps multiples (le passé dans le temps réel; le futur à l’horizon du présent; le temps du parcours et le temps du film, etc)
– la place du spectateur: il n’est pas seulement passif mais peut aussi devenir actif – et le but du site est de l’inviter à le devenir. Il s’agit donc d’imaginer plusieurs stratégies qui l’y amènent (marcher son film; commenter les films des autres; éditer des modules etc). Le site comme moteur d’enregistrement de son parcours à travers les liens qui y sont possibles… (d’où l’idée du bouton d’enregistrement qui s’allume sur le logo, cf plus bas)
– degré de personnalisation: découlant de ce qui est développé ci dessus, inviter le visiteur du site d’utiliser celui-ci en combinant les modules et les filtres de recherches selon ses envies. Le site est, d’une certaine manière, un gestionnaire de base de données avec lequel on peut accéder et afficher les informations qui nous intéressent…
– et bien sûr, il faut que le contenu éditorial soit le plus complet et « excitant » possible: il s’agit de parler autant à un public plus large (habitants, touristes d’une ville) qu’à des spécialistes habitués à ce genre d’aventures.

Ce qui est posé actuellement est surtout une grille de base qui est très modulaire; la plupart du temps on a une zone centrale qui peut présenter soit du contenu éditorial soit du contenu « vivant » (les films etc), entourée par une zone verticale et horizontale qui donne des contenus supplémentaires selon le contexte (news; commentaires; films; parcours; modules).

Premier exemple: la homepage.

siteweb_home_mai09

A savoir:
– la zone de menu est encore en évolution; il s’agit de rester sobre, mais actuellement c’est trop neutre et standard (donner plus de « profondeur », de volume, de hiérarchie).
– En dessous du logo, il y aurait une zone de texte défilant avec un lot de phrases qui décrivent le projet (style « un lieu de rencontre entre l’espace urbain et l’espace digital »; « un dispositif qui permet de générer un film en marchant » etc);
– de la même manière, le texte sous « Le dispositif » change (il y a 3-4 types de textes différents);
– un film, sous forme d’une capture d’écran, est promu en home et donne un exemple avec les commentaires et statistiques sur le résultat escompté;
– on peut filtrer les films affichés via une liste déroulante (actuellement, trié selon le nombre de vues et par date) directement dans l’entête;
– Edit box: c’est l’endroit où on trouvera les fonctionnalités d’édition (notre boite à outils). Elle n’est opérationnelle que si on est loggué (ce qui est possible de faire en tout temps). On pourra y changer / éditer les commentaires que l’on a fait sur les films; si l’on a marché un film, on peut via cette interface ajouter des intertitres au film (en fonction des règles édictées), on peut y concevoir des modules personnalisés (fonction encore très embryonnaire, mais qui permet de concevoir des boites qui présentent de manière imagée des statistiques, par exemple une représentation de la vitesse en rapport avec le nombre de médias, ou les thématiques par rapport aux sujets etc); on peut indiquer les préférences de tri, de recherche etc
Questions ouvertes:
– première ligne de menus: idéalement ne garder que le login et mettre le reste ailleurs…
– permettre de hiérarchiser (via des couleurs, formes ou séparations) les niveaux de contenus (cf ci dessous)

Deuxième exemple: la page du visionnement des films.

siteweb_movie_mai09

Il y a plusieurs idées ici, qui sont assez difficiles de rendre compte sur une image statique:
– le logo prend des couleurs différentes en fonction de la navigation. Il y a deux pistes (encore toutes fraîches, à vérifier et tester):
1) couleurs qui donnent une indication sur le niveau ou le type d’information. Le rond en magenta « s’allume » si on est logué, si l’on enregistre une action (texte, module etc); le premier / détermine les informations éditoriale (textes, extraits image etc) et le double // détermine les « informations collectives » (les films, parcours, commentaires), ce qui est vivant de manière indépendante…
2) couleurs qui donnent l’information du niveau de navigation. Il y a 3 niveaux: la home; le premier niveau de menu; le deuxième niveau de menus.
– il reste également à voir comment on « éteind » notre salle de cinéma (la page qui accueille le duo trajet / film), de manière à pouvoir se concentrer sur l’essentiel, tout en ayant la possibilité d’y voir également quelques statistiques (selon une présentation que l’on peut personnaliser)…

Encore pas mal de travail…!

UF, 22.05.2009

Graphisme – WEphone

Il ne sera pas possible d’implémenter les pistes graphique sur notre WEphone pour la fin de cette phase 2 – cependant, il s’agit de pouvoir préciser les intentions et de déterminer les affichages que nous souhaitons (dans un monde idéal, sachant que nous aurons lors de la concrétisation des contraintes techniques).

WEphone mai 09

Les questions qui se posent, que nous n’arrivons pas à résoudre actuellement, sont les suivantes:
– bouton start / stop: pour le moment nous utilisons le logo comme bouton; c’est une bonne idée mais ce n’est pas encore abouti (place sur l’écran ?; comment gérer les états différents ?; utiliser les éléments qui le constituent de manière différenciée ? etc);
– information sur le temps écoulé: il faudrait déterminer une zone de placement d’informations, dans laquelle il sera possible d’afficher des informations diverses (temps écoulé, nombre de médias entendus, kilomètres parcourus etc); prendre comme exemple l’affichage d’informations dans un viseur de caméra… (on peut donc afficher plein d’informations comme aucune);
– légende: très importante pour savoir interpréter celle visualisation, la légende est posée actuellement « par défaut »; il faudrait la traiter de manière spécifique (cf légendes d’une carte), en évitant de la mettre au même niveau que nos bulles – c’est une problématique similaire à l’affichage des informations techniques;
– ligne de temps: le quadrillage en 4 zones est intéressant seulement si c’est repris sur les autres écrans également; on doit sentir que la ligne verticale est le temps présent. La ligne de temps devrait être plus présente à gauche qu’à droite (où elle part en « trompette »…);
– les bulles: il faut mieux arriver à différencier ce qui se passe à droite par rapport à la gauche. Pour schématiser: à droite, le futur, les potentialités -> sensation d’espace, de volume, d’ouverture (idéalement les bulles y sont aussi légères que des bulles de savon) – et à gauche, le passé, l’histoire écrite -> sensation « d’aplatissement », les choses sont devenus figées dans leur forme, seul le temps garde sa dimension… En discutant avec Pascal Amphoux, nous avons eu l’idée que l’espace à gauche est en 2D, mais avec un mouvement inéluctable de la droite vers la gauche, comme une sorte de tapis roulant sur lui même qui « tire » les bulles dans l’espace de droite (en 3D) vers la gauche, et passé le moment présent (la ligne médiane), applati les médias et les « enfile » sur le fil du temps. Vincent Jacquier est en train de simuler ce processus via After Effects, on devrait avoir une version dynamique prochainement histoire de tester ces idées.

UF, le 22.05.2009 

Graphisme – piste pour l’interface du WEphone

En attendant les autres écrans (en cours de réalisation), voici déjà une version (un état) de ce qui fonctionnera sur notre WEphone. il s’agit donc de présenter le processus en cours, c’est donc des visuels qui vont être animés (mouvement de droite à gauche, plus ou moins vite en fonction de la taille des médias: plus ils sont longs, plus c’est lent; plus ils sont courts, plus c’est rapide…)

 WEphone_090409

Vue du WEphone: lors du parcours, il est possible de suivre l’évolution du processus de montage en cours. Ici un écran qui montre les thématiques présentes dans le montage (et atteignables sur le territoire); il va y avoir plusieurs présentations de champs de métadonnées qui donneront une indication sur le processus en cours, d’objectiver et d’amplifier l’expérience de la marche génératrice d’un film.
A gauche, le film marché (le passé); au centre, la tête de lecture (le présent); à droite, les médias potentiellement accessibles (le futur).

Plus de vues suivront…

UF 09.04.09