1. IHM Anthony Dumas
1
Speed Demo Archive
Dossier de redesign
1 – Etude de l’existant :
Speed Demo Archive (http://speeddemosarchive.com/) est un site web
historique de la communauté des speed runners, comprenez des gens qui finissent
des jeux video le plus rapidement possible. Ce site est aujourd’hui une référence
dans la communauté des speed runners.
Ce que nous devons nous demander, c’est si ce site est une référence pour sa
praticité et son utilité ou pour son caractère historique. Petit retour en arrière,
Speed Demo Archive est né en 1998, après la fusion de deux sites aillant pour
sujet le speed-run du jeu Quake. Il a ensuite été alimenté avec le temps par des

2. IHM Anthony Dumas
2
speed-run d’autres jeux populaires. A ce jour, 955 jeux sont présent dans la base
de données de SDA.
On doit bien reconnaitre que le design, à défaut d’être d’une beauté
flamboyante, est assez pratique dans un premier temps. Le fil d’information au
centre nous tiens informé des actualités du site et les différents liens nous permettent
de facilement accéder aux informations dont nous avons besoin. Cependant, tout
cela devient moins pratique quand on s’intéresse à la page de recherche du site
web. (http://speeddemosarchive.com/gamelist.html)
On notera tout d’abord que, aux vues des options données pour la recherche,
on peut penser que cela est suffisant pour permettre une recherche rapide et fluide.
Actuellement, ce n’est pas aussi pratique que cela. Pour rechercher, par exemple,
les speedruns de la série de jeu Zelda, vous aurez plusieurs choix :
 Soit passer par le sélecteur de système, indiquer « All » puis faire une recherche
par ordre alphabétique. Les jeux ici sont plus ou moins rangés par série, donc
vous trouverez facilement tous les jeux qui ont été speed-runés dans cette série.
Cependant, vous devrez aller tout au fond de la liste et chercher par vous-même
car il n’existe pas d’indexation par alphabétique comme on en trouve sur
différents site.

3. IHM Anthony Dumas
3
Figure 1 - Exemple d'indexation alphabétique
 Soit passer par la recherche Google, qui va rechercher l’information que vous
recherchez sur l’intégralité du site et non seulement sur la liste des jeux. Cela
nous donne un résultat lourd à charger et illogique, vu que nous sommes sur la
page Game List et que nous cherchons donc un jeu dans la base de données
de SDA.
Enfin, penchons-nous sur les pages des jeux eux-mêmes. Prenons par exemple la
page d’un jeu comme Mass Effect.

4. IHM Anthony Dumas
4
Le site reste sur la même charte graphique, du noir, du blanc et des images.
Nous avons la bannière du site, une description rapide du jeu, quelques images et,
le plus intéressant, les caractéristiques des différentes runs réalisées sur ce jeu.
Nous avons les conditions d’execution, le temps d’execution, le nom du runner et la
date. Tout cela est rapidement accessible et pratique, dans le sens que nous avons
un rapide résumé des informations concernant les runs de ce jeu.
Regardons maintenant la partie réservée aux runs individuellement, qui se
trouvent sur la même page.

5. IHM Anthony Dumas
5
On retrouve le titre de la run, le player vidéo (nous y reviendrons) et le texte de
la « submission », qui est une explication de la run par la personne qui l’exécute. Il
y a plusieurs choses à dire :
 Tout d’abord, le titre de la run est placé sans rien de bien extraordinaire, on
pourrait s’attendre, vu que c’est un titre, a un texte en gras ou souligné, mais
rien de cela. Si il y a plusieurs runs sur la même page, cela fait légèrement
brouillon.
 Ensuite, le player vidéo, lui, se retrouve être dans un placement un peu étrange.
Il est collé sur la droite, ce qui est contraire a la logique de beaucoup de sites
de vidéo, où le player est au centre.
 Enfin, ce player est d’une taille quasiment ridicule, obligeant de le passer en full
screen pour voir ne serait-ce que les textes à l’écran. Un placement au milieu de
la page et une plus grande taille serait réellement agréable pour vraiment
profiter des vidéos du site.

6. IHM Anthony Dumas
6
En résumé, Speed Demo Archive est une référence, non pas pour son design
pratique, mais bien pour sa base de donnée impressionnante pour la communauté
et pour son caractère historique comme étant le premier site à s’intéresser au
domaine. Tout ce dont il a besoin, c’est d’un design plus clair.
2 – Redesign
Mockup agrémenté de quelques notes.
Nous devons tout d’abord supprimer le fond noir, qui n’est pas attirant aux
premiers abords. Ensuite, nous devons créer un véritable menu et non une liste
horizontale de lien hypertexte. Enfin, nous pouvons ajouter quelques images dans
les news pour les rendre plus attirantes a lire. Voici le mockup du résultat pour la
homepage.

7. IHM Anthony Dumas
7
Le choix du bleu comme fond est contestable, ceci est simplement une
préférence personnelle. Le menu, autrefois en lien hypertexte, a été remplacé par un
menu d’icônes que l’on retrouvera sur d’autres pages, permettant de garder une
cohérence entre les différentes pages.
On peut maintenant se pencher sur la page de recherche de site, une autre des
pages importantes du site. Comme montré précédemment, elle se compose simplement
d’un menu déroulant, de quelques boutons radios et d’une recherche Google sur
l’intégralité du site.

8. IHM Anthony Dumas
8
On y aura ajouté plusieurs liens hypertextes permettant de faire des recherches
par lettre et une recherche uniquement centrée sur les jeux de la liste, permettant un
accès beaucoup plus rapides aux titres que l’on veut voir. On garde toujours le menu
pour accéder aux autres parties du site et le logo du site pour revenir à l’accueil.
La liste des jeux a elle aussi été revisitée, pour permettre, premièrement, une
navigation plus agréable, mais aussi de permettre de faire la différentiation facilement
entre les versions US, Japonaises et Européenne.
On pourra ajouter au besoin sous le titre d’autres mentions comme les temps
des runs, les noms des participants, la date de parution sur SDA, etc.

9. IHM Anthony Dumas
9
Ici, nous avons rajouté une jaquette pour le jeu et un titre en gros pour chaque
run. Aussi, nous avons rajouté un player plus grand, qu’il faudra ajuster selon la
résolution de la vidéo, de plus nous gardons la cohérence du design avec le menu.

10. IHM Anthony Dumas
10
3 – Conclusion
Avec ce nouveau design, nous pensons qu’il est plus simple d’accéder aux
informations que nous voulons, c’est-à-dire pour la majorité des utilisateurs du site, les
vidéos des runs.
Maintenant, pour y accéder, nous avons plusieurs possibilités, en choisissant le
système, en donnant directement le nom du jeu ou en choisissant simplement la
première lettre du jeu.
Le plus gros changement a été fait sur la liste des jeux, en rendant plus agréable
la navigation et le choix de ce que nous allons regarder. Cela peut être amélioré
encore avec un petit panneau incluant vignettes du jeu et description quand on passe
la souris par-dessus les jaquettes.
En résumé, ce design semble faciliter la recherche et l’accès aux informations
les plus importantes de Speed Demo Archive, les vidéos.
Note :
Le site étant modifié pendant le marathon (du 5 au 11 Janvier 2014), pour
accèder aux pages du site, il vous faudra aller sur le lien suivant
(http://speeddemosarchive.com/gamelist.html), cependant la page d’accueil n’est pas
disponible.