logo du site Interfaces numériques

Gesture Browser
Prototype pour la navigation interactive
en dispositifs mobiles
Gesture Browser. Prototype for browsing web pages, using the touch screen as an innovative solution for the use of mobile devices

Martha Kaschny Borges ,
Marta Adriana da Silva Cristiano ,
Nacim Miguel Francisco Junior 
et Hilton Wichwski 

https://doi.org/10.25965/interfaces-numeriques.2494

L’article présente les résultats d’une recherche qui a étudié les étapes nécessaires au développement d’un prototype pour la navigation des pages web, en utilisant l’écran tactile, comme solution novatrice pour l’usage de dispositifs mobiles avec accès à l’internet. Le projet est fondé sur le langage Java et la plate-forme Androïd. Le navigateur décrit effectue les actions suivantes : avancer, rétrocéder, mise à jour, entre autres au moyen de gestes sur l’interface tactile où chaque symbole effectue une action. Le prototype construit à permis l’envoi des informations à l’appareil pour la réalisation des actions à travers les mouvements gestuels sur l’écran tactile. Ce travail met l’accent sur l’innovation en ce qui concerne la facilité d’utilisation d’une interface gestuelle sur des appareils mobiles. Il aborde également l’état de l’art sur les interfaces numériques.

The paper presents results of research that has studied the steps needed to develop a prototype for browsing Web pages, using the touch screen as an innovative solution for the use of mobile devices with access to the Internet. The proje is based on Java and Androïd platform. Describes the browser performs the following actions: forward, surrender, update, among others, using gestures on the touch interface where each symbol performs an action. The prototype built has allowed the send information to the device for the implementation of actions through gestural movements on the touch screen. This work puts emphasis on innovation with respect to ease of use of a gestural interface to mobile devices. He still claims to work with the state of the art digital interfaces.

Sommaire

Texte intégral

1. Introduction

Le monde d’aujourd’hui est le scénario de changements constants, de nouvelles méthodologies, dans tous les domaines : sociaux, culturels, économiques, entre autres. L’importante expansion des technologies numériques se distingue. Le développement du secteur des technologies à permis l’utilisation de divers outils et dispositifs à fort potentiel pour l’intégration entre hardwares et softwares. L’internet en est un exemple, qui permet en temps réel la réalisation de recherches et se présente comme un moyen de communication rapide, d’échanges de connaissances, d’accès à la culture et d’expérience avec différents dispositifs.

Avec l’expansion du web 3.0 et de toutes les possibilités offertes à partir de l’informatique mobile, notamment les téléphones portables, les PDA, les tablettes, les ordinateurs portables et les netbooks, il est nécessaire de développer une veille permanente sur le caractère innovant des usages car ces usages de technologies orientées vers les utilisateurs s’amplifient.

Ainsi, la technologie doit être insérée dans l’environnement social de façon à permettre à l’usager la mise en œuvre des actions instrumentées, au sens proposé par Rabardel (1995, 2004), sans avoir besoin d’étudier le fonctionnement du dispositif qu’il utilise. L’usage doit être intuitif et pratique et la technologie doit présenter un fonctionnement efficace. Dans ce sens, le développement d’un outil numérique doit mettre l’accent sur l’usager final.

Note de bas de page 1 :

Au moment de l’élaboration de cet article, l’Anatel à publié les données relatives jusqu’en février 2012.

Note de bas de page 2 :

Données disponibles sur : http://www.anatel.gov.br/Portal/exibirPortalNoticias. do?acao=carregaNoticia&codigo=24913

Parmi les dispositifs qui ont ce type d’avantages, actuellement, les téléphones portables sont les plus couramment utilisés au Brésil. Selon l’ANATEL – Agence Nationale des Télécommunications au Brésil, la télé densité est arrivée, en décembre 20121, au taux de 126,45 % de la population du pays. Cela signifie que plus de 100 % de la population brésilienne utilise le portable en 20122. Selon l’ANATEL, le nombre en valeur absolue des nouveaux abonnements enregistré au mois de février, est le plus grand depuis treize ans. Ainsi, ces données justifient la création des solutions axées pour ces dispositifs.

À chaque nouvelle version de portables présentés sur le marché, on constate l’émergence de solutions plus intégrées, qui visent à répondre aux besoins des usagers communs, mais aussi des entreprises. Parmi ces solutions, les transferts de données, la mobilité, les images, les sons, les systèmes d’accès à internet et de localisation en temps réel, sont les plus employés. Les usagers des portables ont besoin d’un navigateur qui ne pollue pas leurs écrans, avec un accès facile à des vidéos, à des musiques en ligne, et aux textes, toujours avec une navigation rapide et facile.

Dans ce sens, cet article présente les résultats d’une recherche qui a étudié les étapes nécessaires au développement d’un prototype pour la navigation des pages web, en utilisant l’écran tactile, comme une solution novatrice pour l’usage de dispositifs mobiles avec accès à l’internet. Le prototype construit à permis l’envoi des informations, de passer d’une page à une autre et recharger cette page, au moyen des gestes réalisés sur l’écran tactile.

2. Dispositifs mobiles

Auparavant, les outils numériques étaient employés pour une tâche seulement, comme par exemple, les lecteurs MP3, les portables, entre autres. Aujourd’hui, avec la demande croissante du public, les dispositifs doivent proposer des tâches multiples dans un seul appareil. C’est exactement cela qui caractérise l’ère moderne des dispositifs mobiles (Oliveira, 2001). En même temps, la multiplication des applications sur les portables a exigé le développement de différents systèmes opérationnels, dont les suivants :

Symbian : est un système opérationnel multitâche, plus léger que certains concurrents, il est utilisé principalement par Nokia, Samsung, et Sony Ericsson ;

Windows Mobile : est une plate-forme pour les dispositifs mobiles dont le but est de ressembler au système opérationnel de Windows utilisé sur les aires de travaux ;

Palm OS/WebOS : créé pour être le système opérationnel du Palm Pilot, lancé en 1996. Ils étaient légers, pas chers et avec des fonctionnalités semblables aux agendas électroniques.

En sus des plates-formes mentionnées, il y a actuellement sur le marché d’autres systèmes qui ont des caractéristiques spécifiques. Chaque système a son propre navigateur en fonction des caractéristiques de fabrication et des fonctionnalités, par exemple, la fonction de réquisition et de redirection des pages.

Pour la construction du prototype décrit dans cet article nous avons utilisé le navigateur Androïd Browser, produit par Google et livré avec la plate-forme Androïd. Selon Matos (2009) ce navigateur utilise le WebKit comme moteur. Selon Google (2011) pour programmer des applications pour l’internet, il est possible d’utiliser une application particulière à travers la mise en œuvre de la WebView qui fait partie du SDK Androïd, ou il est possible de l’exécuter par le navigateur qui accompagne l’appareil.

3. Usabilité et dispositifs mobiles

L’un des facteurs mis en évidence par l’étude est la façon de communiquer des utilisateurs dans un système d’information. Cette façon détermine des caractéristiques à l’interface elle-même qui doit être facile à apprendre et économe en nombre d’étapes pour accéder à une fonctionnalité.

Selon l’Organisation Internationale de Standardisation (9 241-11, 1998) l’usabilité est la capacité d’un produit déterminé à être utilisé par des usagers spécifiques, pour atteindre des buts particuliers avec efficacité, efficience et satisfaction dans un contexte d’utilisation définie. La technologie doit toujours être utilisée pour optimiser les capacités des usagers et l’usage des ordinateurs devrait être simple, sûr et le plus agréable possible. Quelle que soit leur utilité, la mise en place de systèmes aux usages difficiles peut mener à l’insuccès d’un logiciel.

Selon Nemer (2006) l’usager n’utilise les nouvelles fonctionnalités d’un dispositif que si leur facilité d’utilisation est réputée supérieure ou égale à celle des dispositifs précédents. Cette posture de l’usager doit être prise en compte au moment du développement des systèmes pour les appareils mobiles de petites tailles, tels les portables. Ainsi, ces dispositifs défient les développeurs, quand ils présentent des limitations importantes telles que la taille, la mémoire, une faible puissance de traitement, entre autres, souvent du fait de leur miniaturisation.

Selon Ferreira (2004) le contexte d’usage est une autre caractéristique qui se distingue parmi les problèmes de l’usabilité. L’environnement des appareils mobiles est généralement très dynamique, car ces appareils captent l’attention des usagers avec des activités parallèles. C’est pour cela que l’interaction entre l’usager et l’appareil doit exiger un faible niveau de concentration, d’où l’accent mis sur la conception des systèmes de design et des interfaces simples et fonctionnelles. Une solution proposée par Neves (2005) pour résoudre ces problèmes d’usabilité sur des appareils mobiles consiste à développer des écrans avec des menus légers et faciles pour la réalisation des tâches, tout en considérant les difficultés trouvées lors des usages qui exigent la réalisation de tâches simultanées.

4. Écran tactile et interfaces gestuelles

Pour la construction du prototype il est nécessaire de considérer la dimension relative à l’interactivité. L’une des premières formes d’interactivité est, selon Stanford (2011), la souris, qui a été présentée au public le 9 décembre 1968, par Douglas C. Engelbart. Ce fait peut être considéré comme l’origine des écrans tactiles. Les écrans tactiles sont devenus si communs que le W3C développe actuellement une normalisation pour ces interfaces. Dans ces spécifications il y a quelques événements créés par Apple, qui déterminent la force du toucher et aussi la quantité des rayons X, Y sur l’écran. La majorité des interfaces d’aujourd’hui n’utilisent pas encore ces spécifications, la plupart d’entre elles se limitent à imiter les mouvements de la souris (W3C, 2011).

Un projet qui mérite une mention est le « OmniTouch » de Harrison, qui utilise le contrôle appelé « Kinect » de la « XBOX » de Microsoft. Ce dispositif utilise un projecteur et un programme informatique pour réaliser des projections partout, rendant toute surface utilisable. La conception de Harrison n’est pas exactement un écran tactile, mais il vérifie la surface sélectionnée et il utilise des caméras de contrôle pour identifier les objets et les doigts de l’usager, en utilisant la position des doigts dans l’espace pour voir le geste réalisé par l’usager et créer ainsi une action pour le geste (Harrison, 2011).

5. Le prototype créé avec l’Androïd

Selon Ableson (2009) le système Androïd est comme une pile logicielle pour les dispositifs de l’Open Hand Set Alliance, un groupe formé par 47 entreprises. Le premier dispositif a été lancé avec l’Androïd G1 fabriqué par HTC et fourni par T-Mobile. Quelques mois après le lancement du G1, l’Androïd Market a été lancé tout en permettant aux usagers d’installer ces applicatifs directement sur leur portable. À partir de ces versions, une nouvelle plate-forme a été lancée sur le marché.

Androïd est un environnement en couches, fondé sur le Kernel du système Linux, qui est gratuit et en open source. Il viabilise la connectivité WiFi, Bluetooth, GPRS, EDGE, 3G, même si la connectivité dépend du hardware de l’appareil. Selon Google (2011) il a une bibliothèque graphique, le OpenGL, pour faire des graphiques 3D/2D. Il possède encore une bibliothèque appelée WebKit, la même que le Safari de l’iPhone, avec l’open source et il comprend encore une base de données, le SQLite. L’Android a été conçu en 2003 et, en 2005, il a été acheté par Google. En 2008, est lancé le premier smartphone équipé avec le système Androïd. Ce système possède un support en C/, C++ (Androïd NDK) et Java (Androïd SDK).

La plupart des navigateurs pour l’Androïd n’ont pas la capacité de faire des actions comme : arrêter le chargement de la page, avancer, faire le zoom, entre autres, tout en utilisant la technologie tactile pour promouvoir une plus grande interaction avec l’appareil mobile (par exemple, toucher l’écran de l’appareil pour revenir à la page précédente).

Cet article aborde le développement d’un applicatif pour les dispositifs qui utilisent le système Androïd avec l’intention de promouvoir une plus grande interactivité entre l’usager et l’applicatif. Outre promouvoir des actions de divertissement et une plus grande interactivité, ce navigateur propose des raccourcis qui sont utiles tout en laissant l’écran visuellement net, non pollué par trop de boutons, permettant une lecture facile pour la navigation.

Le prototype mis en œuvre est divisé en plusieurs parties : les classes externes et internes (dans les classes), les lecteurs d’audio et de vidéo, le chargement du favicon (l’icone qui apparaît sur le côté de l’adresse, dans la plupart des navigateurs) dans le deuxième fond, des barres de navigation, l’historique des navigations, des favoris et le noyau.

La partie du programme responsable pour montrer à l’usager les audio, via l’internet (en ligne), est l’AudioPlayerActivity et l’AudioView. Celui-ci communique avec la plate-forme par le biais des bibliothèques et il est le responsable pour construire la partie logique de l’applicatif. Par ailleurs, l’AudioPlayerActivity est responsable pour la construction des activités qui comportent des graphiques et il est l’intermédiaire entre le noyau de l’applicatif et l’AudioView. L’AudioView et l’AudioPlayerActivity forment ensemble le noyau audio qui est responsable pour l’exécution de l’audio en ligne pour l’usager.

La partie du programme qui transmet la vidéo en ligne est appelée VideoPlayerActivity. Pour que cette vidéo fonctionne, il est nécessaire de communiquer avec la bibliothèque de la plate-forme qui dispose d’un « player » (reproducteur de média). Dans cette activité il y a également une logique pour la lecture des vidéos. Contrairement au reproducteur d’audio, qui est séparé en deux parties, le prototype créé pour la vidéo bénéficie d’une pièce unique. Cela permet à l’usager d’exécuter un audio sans avoir besoin de faire une customisation. Avec l’action de l’usager, le lecteur vidéo apparaît directement sur l’écran. Ainsi, le lecteur audio est séparé en deux étapes et le lecteur de vidéo en une seule.

L’audio en conjonction avec la vidéo forment, ensemble, le noyau des médias. Il est possible de reproduire ce noyau et d’en traiter les médias, lesquels sont exécutés par le noyau du prototype, sauf pour les vidéos YouTube (site de vidéo en ligne), qui ont besoin d’un applicatif spécifique installé dans l’équipement qui va être utilisé. Le noyau est apparent dans la barre d’adresse des navigateurs des usagers. De plus, ce sont eux qui traitent les gestes sur l’écran, en vérifiant si les gestes se trouvent catalogués dans la bibliothèque des gestes. La bibliothèque a été développée avec l’aide de l’applicatif qui est sur Androïd SDK appelé « Gesture Builder ». SDK (Software Development Kit) permet de développer des applications à partir d’un logiciel de base.

Le module qui pilote le noyau s’appelle le MainBrowser. Il définit le contenu en train de s’afficher sur l’écran du navigateur, comme les vidéos, les audios, les fichiers d’images et aussi les fichiers en flash. Si l’activité consiste à accéder à une vidéo ou à une audio, l’activité envoie des données de l’URL (adressage des contenus) pour les activités respectives démandées, qui sont appelées des players. Par contre, si l’activité consiste en un geste, elle est traitée dans l’activité MainBrowser, puisque chaque geste a une commande spécifique y compris l’affichage de l’historique et des favoris.

Aujourd’hui, la plupart des navigateurs pour smartphones cherchent à faciliter l’accessibilité des usagers via des barres, celles-ci sont identifiées par plusieurs pages ouvertes dans la même fenêtre, comme le montre la figure 1.

Figure 1. Barres du navigateur « Gesture browser »

Figure 1. Barres du navigateur « Gesture browser »

Les barres sont également présentes dans le prototype afin de rendre la navigation plus aisée. Dans la plupart des dispositifs mobiles qui prennent en charge le multitâche, il est plus difficile pour l’usager d’arriver à visualiser l’ensemble des tâches et de passer de l’une à l’autre que de simplement en créer de nouvelles, même si elles existent déjà, quitte à multiplier le nombre de barres. Le prototype offre là encore, la possibilité d’occulter les barres et la barre d’adresse, ce qui laisse l’écran le plus net possible, sans affecter sa facilité d’usage.

Pour le chargement de l’icone de la page il existe dans la plupart des navigateurs de l’internet, une icone appelée favicon, dans la page définie sur l’HTML, comme indiqué sur la figure 2. Pour voir comment le favicon fonctionne dans le prototype, il suffit d’observer sa position sur la barre au-dessus du titre de la page. Pendant le processus de chargement l’icone de la page ne sera pas affichée.

L’un des points clés de l’usage du navigateur est l’accès à un historique et à des favoris. Dans le prototype, ces derniers sont chargés par BookmarkHistoryActivity. Au niveau du code, historique et favoris se distinguent par l’emploi des chiffres 1 et 0. L’historique est lié à 1 alors que les favoris nécessitent l’emploi du 0.

Figure 2. Création de l’icône pour la page HTML4. Source : W3C (2011)

Figure 2. Création de l’icône pour la page HTML4. Source : W3C (2011)

Comme on peut voir dans la figure 3, l’interface de l’historique présente un titre qui peut être « historique » ou « favoris », suivi d’une liste simple avec l’adresse du site. Lorsqu’on clique sur un élément de la liste, sans le glisser, l’activité se termine et la page est chargée.

Figure 3. Image de l’interface graphique de l’historique

Figure 3. Image de l’interface graphique de l’historique

Cette liste n’utilise pas une base de données de l’applicatif, mais elle utilise le navigateur Androïd lui-même. Elle est synchronisée automatiquement avec le navigateur et elle est incluse dans la bibliothèque de l’applicatif. Pour l’utiliser, il suffit de configurer les permissions requises.

Avec le même modèle, les lecteurs audio et vidéo ont une interface similaire. L’aspect qui différencie l’un de l’autre est que le lecteur vidéo n’a pas besoin d’une personnalisation ou customisation ou même d’ajouter une image pour remplacer la vidéo, comme il faut le faire pour l’audio.

Figure 4. Image de l’interface du lecteur d’audio

Figure 4. Image de l’interface du lecteur d’audio

L’interface des « players » est l’image, le bouton de retour, le contrôle de pause, pour avancer et revenir, le temps total et le temps d’exécution. Les contrôles ne s’affichent que lorsque l’usager touche l’image et ils disparaîtront en quelques secondes. Quand l’usager voit une vidéo, les contrôles n’entravent pas la vue de l’usager, ce qui rend l’interface aussi légère que le noyau du navigateur.

Figure 5. Image de l’interface du lecteur de vidéo

Figure 5. Image de l’interface du lecteur de vidéo

Figure 6. Image de l’interface de retour de pages

Figure 7. Image de l’interface pour avancer les pages

image

image

Pour illustrer l’interface gestuelle, les figures 6 et 7 montrent une flèche lorsque la reconnaissance est établie. Dans les figures, la flèche montre la simulation de la touche sur l’écran tactile pour l’usager. Lorsqu’il glisse le doigt de droite à gauche, comme le montre la figure 6, une flèche apparaît pour revenir à la page précédente. Lorsque l’usager glisse le doigt de gauche à droite, apparaît la flèche pour se déplacer à la page suivante, comme le montre la figure 7. Pour la mise à jour des pages, il suffit que l’usager glisse le doigt en réalisant le symbole de l’infini.

Figure 8. Image de l’interface pour actualiser les pages

Figure 8. Image de l’interface pour actualiser les pages

Les fonctionnalités décrites ci-dessus montrent les possibilités de l’écran tactile quant à l’usabilité et l’interactivité sur des dispositifs mobiles, cela plus spécifiquement sur les portables où la petite taille de l’écran n’empêche pas l’usager d’utiliser une technologie basée sur le geste qui est réputée simple et efficace.

7. Conclusion

Le progrès technologique des dispositifs mobiles se distingue par l’accent mis sur l’expérience utilisateur de l’usager final. Malgré les nombreuses facilités que nous avons pour gérer l’accès à distance, comme les navigateurs, le « Gesture Browser » innove dans l’aspect de l’usabilité, en mettant l’accent sur la visibilité de l’écran, sur les mouvements gestuels et sur le chargement rapide des pages. Le développement sur la plate-forme Androïd a permis l’implémentation et le modelage de ces caractéristiques de façon efficace et efficiente, tout en assurant une utilisation appropriée de cette nouvelle technologie.

Par le biais de l’écran tactile il est devenu possible d’avancer, de reculer et de recharger les pages web sur les dispositifs mobiles, même ceux de petite taille, au moyen de gestes simples. L’action de mise à jour des pages consiste en un mécanisme qui permet de toucher l’écran et glisser le doigt formant le symbole de l’infini (∞). L’action d’avancer sur les pages est réalisée par le biais de gestes sur l’écran tactile, en glissant le doigt de gauche à droite sous la forme d’une flèche () et, pour revenir à la page précédente, il suffit de glisser le doigt de droite à gauche, en formant une flèche inversée ().

Le prototype décrit dans cet article a ouvert son code en libre accès open source. Il est disponible sur http://sourceforge.net/p/gesture browser. Il a obtenu une licence à partir des règles Créatif Commons – attribution d’usage non commerciale – partagé par la licence 3.0 Unported, qui autorise la copie, la distribution et la modification du prototype pour des fins non commerciales.

Autres versions

Pour citer ce document

Référence papier

Borges, M. K., da Silva Cristiano, M. A., Francisco Junior, N. M. et Wichwski, H. (2012). Gesture Browser. Interfaces numériques, 1(3), 561-576.

Référence électronique

Borges, M. K., da Silva Cristiano, M. A., Francisco Junior, N. M. et Wichwski, H. (2012). Gesture Browser. Interfaces numériques, 1(3). https://doi.org/10.25965/interfaces-numeriques.2494

Auteurs

Martha Kaschny Borges
Programa de Pós-Graduação em Educação
Universidade do Estado de Santa Catarina
2007, av. Madre Benvenuta, 88 035-001, Florianópolis. Brésil
marthakaschny@hotmail.com
Marta Adriana da Silva Cristiano
NUTEC - Núcleo de Pesquisa em Tecnologia e Informação
Centro Universitário Barriga Verde
s/n, Rua Pe. João Leonir Dall’Alba, 88 870-000. Orleans. Brésil
marta.php@gmail.com
Nacim Miguel Francisco Junior
NUTEC - Núcleo de Pesquisa em Tecnologia e Informação
Centro Universitário Barriga Verde
s/n, Rua Pe. João Leonir Dall’Alba, 88 870-000. Orleans. Brésil
Hilton Wichwski
SI – Sistema de Informação, Centro Universitário Barriga Verde
s/n, Rua Pe. João Leonir Dall’Alba, 88 870-000. Orleans. Brésil
hws689@gamil.com

Licence