Interface-old

Interface design
Design de l'interface:propostions

Interface: archive 2009

mapping issues
Pour ces premières projections fictives, on a utilisé seulement la couleur dans les cercles. Mais nous n'écartons pas l'utilisation de screenshot de la page URL à la place de couleurs.

questions de granularité:

Comment traiter visuellement des adresses qui renvoient à un type de site comme un site de documentation, de forum, un blog, etc ... Dans le fichier sqlite chaque adresse semble traitée individuellement:

Résultat: nous avons plus 800 URL dans le fichier: dont une certaine quantité d'URl qui sont de même "famille" (i.e. issues du même répertoire ou sous-domaine ou domaine principal).

ça pose la question: comment traiter l'information visuellement ?

ex: http://doc.ubuntu-fr.org ou forum.ubuntu-fr.org etc ... compte pour 1 click pour chaque page.

Or un-e utilisateur-trice qui va sur un grand nombre d'adresses commençant par "forum.ubuntu-fr.org" ou "doc.ubuntu-fr.org" etc... on peut dire que le sous-domaine forum.ubuntu-fr.org est un répertoire important pour lui-elle, et qu'il serait intéressant de le notifier. (Ainsi peut-être aussi le root website: www.ubuntu-fr.org ). C'est une manière de contextualiser l'information. Dans un mapping individuel ( la carte d'un seul utilisateur), nous avons essayé de regrouper ces pages sous une URL marquée d'un "+" qui serait un bouton qu'on peut cliquer pour "déplier" l'URL et afficher les résultats par granularité. Dans ce cas là, chaque URL cliquée une ou deux fois (rarement plus dans nos fichiers !) comptent pour la valeur qu'elles ont en terme de popularité (c'est à dire très faible). mais elles sont regroupées autour de l'url du répertoire. Nous observons que visuellement ça ne pose pas de problème de compréhension, .. (c.f: rapport de grandeur avec d'autres URL plus éloignées sur le même niveau d'échelle matricielle); nous avons montré ces drafts autour de nous et cet affichage semblait compréhensible aux autres personnes. Nous pouvons aussi jouer avec la transparence et le côté "organique" d'une animation .. ( ces petits spots seraient un peu mouvants, élastiques etc ... De toute façon, il faudra qu'on regarde avec duc, mais les effets d'elasticité sont visibles dans des animations flash et en java aussi ...) La question devient plus compliquée lorsque nous devons traiter cette granularité au niveau d'une fusion avec un-e autre utilisateur-trice qui auraient le même rootwebsite mais des fichiers complètement différents.

Ainsi par ex: deux utilisateur-trice-s ont en commun le site www.youtube.com -- ce sera le cas de beaucoup d'entre nous :-). Mais chacun-e visionne des contenus complètement différents. Donc lorsqu'on fait l'intersection de ces deux cartes: en commun ils ont youtube.com mais rien à l'intérieur ... Nous avons essayé de représenter ce que ça donne dans le draft no ...

draft mapping --single user
Draft 1: Une carte simple d'un-e utilisateur-trice sans personnalisation des données (pas de classement par catégories ou label)

personnalisation du mapping
les URL sont placées dans des categories ou labels

Draft 3:

alternative -2 : les liens sont visibles et les catégories sont transparentes ( moins pop !)

DOMAINE MODE
Domaine mode

Node onmouseover

Nébuleuse onmouseover

Nébuleuse explosée

Nébuleuse explosée, version outside

TAG MODE
Tags

Tags version2

Tags version3

Tags version4

Tag onmouseover

Tag onmouseover version2

Tag explosé

PROJECTION::OPACITY OR NODE SIZE
Projection:opacity

Projection:size

Projection:co-occurance on one/two(???) clcik

Projection and lighting dynamic co-occurance

personnalisaiton & co-occurance
co-occurences draft 1:

toutes les co-occurences sont affichées. pas de distinction entre lien entrant et lien sortant.

un clic sur le lien pour afficher un menu alternatif ou une fenêtre liste des liens co-occurents entrant et sortant. L'utilisateur doit pouvoir selectionner soit toutes les co-occurences sur la selection, soit les co-occurences entrantes soit sortantes soit toutes les co-occurences globales. Draft 2: co-occurences dans la carte avec tous les autres liens en transparence.

Draft 3

Ouverture d'une catégorie; la catégorie s'ouvre tjrs dans la moitié gauche de la matrice. la largeur des autres tranches correspond au calcul du pourcentage du total des sites taggés pour chaque catégorie.

Les sites des autres catégories sont visible en transparence. Les fonds des catégories sont transparents. les onglets sont visibles -- ils pourraient être masqués et visible seulement en rollover avec la souris !

les catégories sont masquées seules apparaissent les onglets pour informations.

maps projection
les données locales sont projetées dans les données globales ou elles sont intégrées à d'autres données d'autres utilisateur-trice-s.

La grandeur des noeuds signifie la popularité et le degré de transparence signifie la proximité d'intérêt : plus c'est opaque plus les données sont proches.

les icones des utilisateurs en bas permettent d'activer les options de la fusion ( union, intersection différence) ou de masquer l'un ou l'autre des résultat.

Par défaut: pourrait-on dire que les résultats affichent les données plus ou moins proches de la deuxième, troisième, quatrième carte par rapport à la première ?

Les options de la fusion permettraient d'activer des filtres plus fins?

En rollover ou en cliquant pour activer les co-occurences (comportement encore à définir avec tous les autres comportements de l'interface ... ), nous proposons une sorte d'animation d'effet de bulles plutôt que des lignes qui restent très statiques.

Draft 1, 2, 3 4:

Projection de la carte locale dans les données globales (en bleu). les données globales sont montrées par grandeurs selon leurs importance.

1: catégories onglets locaux visibles;

2: catégories masquées

3. la carte globale est dans la matrice au lieu d'être à la périphérie; alternative;

4. les noeuds globaux en relations avec le noeuds local selectionné



Draft 3 & 4 3. présentation alternative: les noeuds de la carte globale sont affichées en transparence selon leurs importances. 4. idem: les noeuds affichés sont lié au noeud sélectionné dans la carte locale

merging maps


1,2.3 fusion de cartes

1. union entre 3 utilisateurs-trices

2. union entre deux utilisateurs-trices et disassociation avec un troisième utilisateur-trice

3. union entre deux utilisateurs-trices, le troisième est rendu invisible

comportement:

dans le menu union: un clic sur l'utilisateur affiche le maillon de l'union, la carte est prête à être fusionnée, un deuxième clic sur un autre utilisateur réalise l'union avec la deuxième carte et ainsi de suite ...

un clic dans une carte fusionnée désactive l'union. Un deuxième clic masque l'utilisateur.

clic à nouveau le rend visible, deuxixème clic active l'union etc ...

listes+tag
Tag mode. On mouse over: tag borders apparait; on click (right) tag explose

List and tag est explosé

mapping archives - links
edition archivée des mapping

draft union - intersection differences

personnalisation du mapping

personnalisation et co-occurence

personnalisation et granularité - archives

merging maps - archive

archives mapping
12 2009

structure proposition 1: barre utilisateur hoizontale dans la partie supperieure de l'interface la forme cercle a été retenue:

il semble que ce soit une forme généralement utilisée, rassurante, et qui induit un sentiment d'universalité; renvoie aux concept d'espace, univers, cosmos, organique,etc ..

très souvent utiisée pour symboliser les noeuds dans les réseaux, elle peut être bien comprise dans cette fonction,

elle est neutre, et peut donc être facilement remplacée par le choix des utilisateur-trices (voir d'autres draft ci-dessous avec d'autres tentatives que le cercle).

fond de l'image: 1 screenshot de la page web en question

la grosseur des éléments signale leur popularité dans le réseau

l'opacité - transparence signale le degré de co-occurance: plus les sites sont éloignés et transparent moins ils sont co-occurant avec l'élément central. les filtres se déployent toujours par rapport à la recherche de l'utilisateur. c'est de celui-ci que partent les résultats. ( on peut imaginer que les résultats s'affichent avec une forme d'élasticité qui donnerait un côté organique à la cartographie.)

Par le click droit de la souris, L'utilisateur peut déplacer les éléments, il peut les supprimer, il peut modifier les liens entre eux ... (voir comment il peut le faire .. ) // il peut par exemple pointer l'un des sites de la cartographie et demander d'afficher les résultats pour ce site sur la même cartographie et ainsi composer sa propre cartographie d'éléments hétérogènes et personnels ...

le même avec des icones symbolisant quel contenu contiennent les liens de la cartographie -- voir avec Duc en fonction de l'analyse des adresses URL. comme dans la proposition 2 des cercles oranges à la place de screenshots des siteweb. Une représentation très abstraite qui peut être simplement effacée au profit d'une personnalisation.

structure proposition 2

archives 10.2009
3d visualisation proposal

NAVIGATION PANEL MOVEMENT INSIDE OF MAPPING: The small navigator on the left corner//mouse buttons and roller//flashes on the keyboards navigate research inside of the mapping.

The first results in the research appear as the closest nodes.

ONCLICK node: activate url link in blank page

ROLLOVER node: shows links between other nodes in different transparent colour; url/tilte is showed differently; infopanel shows information about website; the "red" line appears to connect node with elements in panel search / history.

WATCH THIS VIDEO



NAVIGATION PANEL

visualisation proposal - 18.10.09
Navigation par url, requests frequencies on one word on the request field of search box:

In that exemple: we have a layer for displaying information, one layer that show a kind of history of research within the user session.

In the environment layer we have still two levels of transparencies which could show a second level of information ..

We have to discuss about that way of displaying information.

We also have to be aware that a request can be made of more that one word, and the result of the query is quite different. Why it would be different at all? I do not understand? Also: none of the icons has a name except the one pointed on rollover. Do we need to have names, or address of the files and domain in the environment window ? (-- i would say yes ) I agree. I do not think it would be usable and effective if user do not have any information about the objects/informations in the environment of his/her research May-be we have to make other different scenarios ? Here is a more complete visualization with different colors in the environment layer - showing the co-occurence system - bigger and smaller icons indicating a more or less popular links related to URL-requests frequencies.

The address of each data are added so as the user knows what these icons are about ( What websites they are linked to) I am affraid we might have problem if displaying full URLs, because the path to some page can be quite long. What about displaying only top-domain name such as "google.com" or"gnu.org", "cyberaxe.org" so without "www" and without the path to a specific file? On the history layer, information can be sorted by name, visited date, keywords, address ( web adresses - web location) more ? --- need to be discussed

name and web location have different meaning (name are more or less related to the title of the page in the html code, or different other information, depending on the script in the page which will load information from somewhere else / database, other file's title etc ... ). Which means that on the environment layer, we could choose to display name instead of addresses.

usefull links


Layout
Définitions Cette page traite des informations liées au développement de l'interface. C'est un page en cours de développement, sujet à modifications Les éléments de l'interface Liste des différents éléments qui peuvent composer l'interface; fenêtres, boutons, icones, search box   un search box fenêtre de navigation: un navigateur permet les comportements: zoom in et zoom out dans l'environnement graphique [le mapping] - la fenêtre de navigation est un petit layer que l'on peut déplacer dans l'interface ( cf: comportement des layers)  fenêtre des informations: une fenêtre qui comprend une liste d'URL et de noms attachés à ces URL

(maybe a short description of listed pages too- like in the result list of some search engines that users are used to -familliar with).

what do you mean by used to ? Proche d'un historique de navigation; cette fenêtre est une liste des requêtes que l'utilisateur/trice opère sur le réseau. Elle liste à la fois les requêtes effectuée avec le search box, et les liens activés directement depuis l'environnement.

this window should be re-designed: Do we display both information in the navigation window as graphic map and in this window as text list ? or do we change this window into a kind of "history window" which would list the history of the visited links or roll-over links during the session user ?

We have seen differents kind of web mappings with different solutions: but i am not convinced with a display where what we see in the environment window is the same information than the one displayed in the information window. Why the users should use the environment window, if they are used with text list displayed information ? In some example, I found that having duplicated information lead to some kind of confusion (ex: touchgraph)... it takes time to understand where you have to go, and realize that acting on the graphical environment has the same effects than acting  on the text list (change in both windows take place in the same time, so after a while you see there is a connection between the two then I wonder, why we need two windows that do the same thing ? ).   in addition, we might think of including an option of viewing our own research history inside this window. In data case, data about sites we have previously visited, would be listed/sorted like in this window, and they would contain data like in Mozilla history page. The questions are: Do we really need such application if web browser has it too? Is it technically possible to list those data in that particular window? If application is updated once/twice a month - how that would function with history option? Finally, where would those data on personal history be stored- on personal computer of users or elsewhere?)

we have to ask the developpers if there is any possibility of recording users history inside the system. maybe i see it could be a problem related to the security of the users data ( too many informations related to the users could make it possible and easier to link data with users which is a security issue (concerning the anonymization of the process of recording data   la fenêtre de l'environnement: la plus grande fenêtre, celle qui contient le mapping, elle peut être redimentionnée selon les besoins de l'utilisateur/trice. Dans cette fenêtre on affiche/visualize la resultat de la recherche. Ou meme temps c'est aussi la fenêtre de la navigation visuelle.  une fenêtre avec un menu horizontal: login, paramètres et settings: c'est une option importante; si l'utilisateur/trice peut contrôler le display et la manière dont les informations sont enregistrées, le système apparaîtra beaucoup plus réactif et 'user-friendly le paramétrage de l'aspect de l'interface est une option utilisée très largement. login: les paramètres de login, logout</li> paramètres:l'utilisateur/trice peut modifier les couleurs de l'interface, les fonts, -eventuellement des skins ? - le comportement de certaines fenêtres (définir quels comortements et quelles fenêtres)</li>  settings: l'utilisateur/trice peut gérer ses informations, classer et backuper les archives de ses recherches, changer son mot de passe, définir et modifier son profil [manipuler ses votes: c'est à dire ajouter des keywords ou etiquettes à ses votes ?]</li> </ul> fenêtre des filtres: active les filtres liés aux informations: indices de popularité, indice de temporalité (recommended sites), indices des popularité et recommendation.

About filters -. We know by sure now - the informations are sorted with 3 kind of filters

- URL frequencies popularity of URL in global,

- URL,URL frequencies: co-occurence and recommander system: when users visit a website what other website(s) do they visit in a relative close time which could mean related contents or close contents in terms of interests.

- URL, requests frequencies most popular websistes related to users researches.

The first filter is only brute information; usefull for global statistic, it is not usefull for the users in their requests

In order to simplify the reading of information by users, should display one filter view at a time; either first the popularity ranking URL, requests frequencies and then decide: in what way and at what time we should propose a co-occurance navigation / visualization ? Or reverse proposal: first the co-occurance navigation and in what way we go back to populartiy requests frequencies ? anyway showing these information is very complexe if we think about dealing with the granularty of these information, then we have more than 1 or 2 layers of information .. </li>  I do not understand this well by reading it from wiki, we should speak about it by skype maybe </li>  layer de la date de mises à jour des informations (des data qui rentre dans la systeme) </li> fenêtre des convéniences maybe we should delete this layer and add these options to the users layer in order to avoid too many layers on the interface. Besides, it is quite a logic these are options for users

Export a picture of the mapping/visual representation of the research: print, send to a friend, share: ces options permettent à l'utilisateur/trice de prendre des clichés de la navigation:  print fichier png ou pdf sauvegardé sur la machine de l'ordinateur ou print direct avec l'imprimante / à mon avis il devrait y avoir les trois options: print, export as pdf ou export as png</li>  send to a friend envoi du cliché par email</li>  share picture envoyer l'image sur une plateforme de web2.0: twitter, flickr, autre ?</li> </ul></li>  fenêtre des information sur le lien: petite fenêtre indépendante masquée liée au comportement click sur le lien (voir ci-dessous) affiche les informations relatives au lien. In our researches of web mapping from touchgraph or Kartoo with Kasia, we have found that having a layer which display information related to the webside (maybe with a rollover behavior on the link) could be usefull. Information such as: a capture image of the page, the valid URL and some keywords related to this link -- global keywords that have pointed to this link !) comme: la date de vote dans le réseau, combien de fois le lien a été visité depuis qu'il est enregistré, les mots clefs associés, l'indice de popularité, évent: la localisation géographique du serveur ??? </li></ul> Comportement des fenêtres  Les fenêtres seraient des layers avec des comportements de déplacement de type click and drag. Les fenêtres peuvent être fermées par un bouton de fermeture de la fenêtre.  un bouton refresh permettrait de rétablir les fenêtres par défaut by default mean that we have defined x, y, height and width default values for each opened layer   Comportements interactifs de l'environnement  comportement en rollover: en passant sur un lien actif avec la souris des informations

différentes informations: 1. sur un calque indépendant, liée au site sur lequel on pointe; 2. informations sur les co-occurances: visiblité des sites relatifs au site sur lequel on pointe

liées aux informations by relevant and recommander system apparaissent </li>  comportement en  click:  ouvre le lien dans une nouvelle fenêtre</li> </ul> As Adla said it is very difficult and very complex to visualize serveral kind of different information at the same time. We have to be aware of this difficutly and try to find a "human readable" map of informations that will be usefull and used

Les informations
Niveaux des informations: filtrage Plusieurs informations sur les données cohabitent soit ensemble soit séparémment par filtrage Plusieurs filtres possibles: indices de popularité, système de recommandation ( calculé selon un indice de temporalité: le nombre des mêmes liens sélectionnés par des utilisateurs/trices qui définissent des champs d'intérêts conjoints et qui permettent de relier d'autres sites proches sélectionnés par ces mêmes utilisateurs par défaut: les deux options sont visibles sur l'interface, simultanément, on travaille les différents niveaux d'information par les transparences, différentes couleurs, différentes icones, differnt taille des icones,, l'utilisateur peut afficher l'un ou l'autre des deux modes exclusivemement par les options de filtrages le bouton refresh permet de  revenir à l'affichage par défaut et donc également au visuel des informations par défaut   La temporalité  URL,URL frequencies seem to relate to the mesure of time during which a user visit websites. The closest time indicate contents which are close to the first choice. Then it gives information about close contents, which then can be classified in a co-occurence table. It is this information which is used by the recommander systems. The idea of results which should change related to a temporality has not been confirmed. We have to ask for more information about that question les informations sont données dans une temporalité, c'est à dire que les résultats peuvent être fluctuants en fonction de l'activité des utilisateurs/trices, des flux d'adresses entrant dans le réseau (votes des utilisateurs/trices), les indices de popularité qui peuvent être dégressifs pour un site ou progressifs

Les mises à jours des informations permettent de vérifier ces éléments de fluctation des données La granularité La granularité concerne les données affichées sur le réseau. Lorsque l'utilisateur/trice vote pour un site (sélectionne un site), il vote pour une page (une adresse qui souvent est plus que le simple root index du site). Pour replacer l'information dans son contexte, il est important de la faire figurer à l'intérieur du site qui la contient: c'est à dire lister l'index - et une partie du chemin vers la page ( par ex: le répertoire qui la contient) indiquer tout le chemin intégralement n'est peut-être pas très intéressant. Visualisation des informaitons Note: The biggest challenge is to find a way to visualize all these complex relation between URLs - and to represent them at the same time, within a same space (map) in a way that they give the user the efficient and relevant results of his/her research on a very clear and understandable way. The biggest problem at the moment is to understand how we can combine two type of research results -popularity & recommendation- and how to show them within the same space? we have to play with these different levels of information, we have to display as well the granularity, the popularity ranking users requests and the co-occurence mesures. We need to use graphical informations such as transparancy, colors, shapes, icons images, sounds, etc... being aware that too many kind of different levels of information can  kill information. la granularité, l'indice de popularité, la temporalité et la relevance selon un système de recommandation. L'utilisation des transparences, des couleurs, des formes et des icones peuvent jouer un rôle dans la visualisation de ces informations

useful external links
html hell pages Kartoo (search engine new interface) Kartoo-E Recommendation (visualisation) UJICO.COM (visualization of the research results) [http://www.baddesigns.com/mswebcnf.htm "Do Metaphors Make Web Browsers Easier to Use?" by Elissa D. Smilowitz] "Collaborative search engines" by Wikipedia