Interface Multimodal para Navegação Guiada por Fala na Web

Interface Multimodal para Navegação Guiada por Fala na Web Almir
Galindo Florêncio Filho ORIENTADOR Dr. Carlos de Salles Soares Neto

Roteiro Introdução 1. Objetivos 2. A ferramenta 3. Estudo de
caso 4. Conclusões 5.

Introdução

Introdução • Interação humano-computador • Multimodalidade • Reconhecimento de fala

IHC HUMANO COMPUTADOR

IHC USUÁRIO SISTEMA DE COMPUTADOR INTERFACE DO USUÁRIO SISTEMA

Fatores decisivos • Usabilidade • Aplicabilidade • Comunicabilidade • Acessibilidade

Multimodalidade USUÁRIO COMPUTADOR INTERAÇÃO

Multimodalidade USUÁRIO COMPUTADOR FALA MOUSE & TECLADO GESTOS

Multimodalidade • Correspondência entre dispositivos e sentidos humanos

Multimodalidade • Audição: microfone • Visão: câmera ou sensor de
movimento • Tato: tela de toque ou display de braille • Paladar e olfato

Multimodalidade Computação pervasiva

• Modos facilitados de uso • Interações mais naturais •
Múltiplos usuários simultâneos • Ubiquidade das aplicações Computação pervasiva

Aplicações multimodais • Jogos com Xbox Kinect • Leap Motion
• iPhone com Siri • Jogos sensíveis a movimentos • Leitores de tela

Reconhecimento de fala USUÁRIO COMPUTADOR FALA

A fala é o modo mais natural de comunicação para
as pessoas

contudo… ! A fala ainda não é amplamente utilizada por
aplicações computacionais

Por quê? • Processamento de linguagem natural (NLP) • Identificação
x entendimento • Usabilidade da interface do usuário

Fala como modalidade de interação

tipos de Tarefas • Seleção • Composição textual • Quantificação
• Orientação • Posicionamento • Caminho ou sequência

É só seguir em frente toda vida, depois vira a
direita depois de um viaduto amarelo, logo depois dele pega o retorno e pega voltando. Você vai ver um shopping do lado esquerdo depois de umas quatro quadras. depois passe pela ponte e verá um posto …

Objetivos

Algumas deduções • Existem raras aplicações atuais com fala •
Dependência de tecnologias não padronizadas ou proprietárias • Funcionalidades limitadas • Dificuldade de reutilização

objetivos • Desenvolver uma ferramenta que permita a interação multimodal
guiada por fala na web • A ferramenta deve ter uma interface assistiva intuitiva • Utilizar apenas tecnologias abertas

objetivos específicos • Modelo de interação por fala na web
• Conceito de interface assistiva para fala e de ferramenta multimodal na web • Implementação da interface e ferramenta extensível e reutilizável

A ferramenta

• Tecnologias utilizadas • Arquitetura do ecosistema • Interação •
Interface • Utilização e customização A ferramenta

Tecnologias HTML CSS JS

Tecnologias Web speech API

Tecnologias Web speech API • Nova especificação W3C (dev) •
Reconhecimento de fala • API JavaScript • Agnóstica de implementação

Tecnologias Web speech API • Disponível no Google Chrome •
Serviço web

Serviço web

Permissão do usuário

Arquitetura

Arquitetura CONTEXTO DO NAVEGADOR NAVEGADOR FERRAMENTA DE FALA APLICAÇÃO WEB
CONTEXTO DA APLICAÇÃO USUÁRIO SERVIÇO WEB

Interação

Interação • Comandos vocais • AÇÃO + OBJETO + PARÂMETROS

Gramática de regras • Define ações e objetos • Validação
de comandos • Descreve funcionalidades

Mensagem de sucesso Executa comando Comando válido? Fala Mensagem de
erro SIM NÃO

Interface

Interface • Simples (fácil manuseio) • Intuitiva (fácil entendimento) •
Feedbacks (boa comunicação) • Não obstrusiva (acessível)

Interface

Utilização & Customização

<!doctype html> <html> <head> ...  <link rel="stylesheet" type="text/css" href="ferramenta_fala.css" /> ... </head> <body> ...  <script type="text/javascript" src="ferramenta_fala.js"></script> </body> </html> Utilização

Customização // define comando 'tocar vídeo' ferramentaFala.on('tocar', 'vídeo', function(){ playerVideo.play();
});

Estudo de caso

• Aplicação web existente • Acoplamento da ferramenta • Análise
dos casos de uso • Definição de novos comandos • Customização (comandos) estudo de caso

wiredIn Player de música online

wiredIn

Acoplamento <!doctype html> <html> <head> ... <link rel="stylesheet" type="text/css" href="ferramenta_fala.css"
/> ... </head> <body> ... <script type="text/javascript" src="ferramenta_fala.js"></script> </body> </html>

casos de uso

• Tocar música • Pausar música • Ir para próxima
música • Ir para música anterior • Pular para música X casos de uso

• tocar música • pausar música • avançar música •
voltar música • tocar música X Comandos

Customização dos comandos

ferramentaFala.on('tocar', 'música', function(){ wiredIn.play(); }); ! ferramentaFala.on('pausar', 'música', function(){ wiredIn.pause();
}); ! ferramentaFala.on('avançar', 'música', function(){ wiredIn.next(); }); ! ferramentaFala.on('voltar', 'música', function(){ wiredIn.prev(); });

ferramentaFala.on('pausar', 'música', function(){ if(wiredIn.playing) wiredIn.pause(); else ferramentaFala.error('Nenhuma música tocando'); });
melhorando feedbacks

melhorando feedbacks ferramentaFala.on('pausar', 'música', function(){ if(wiredIn.playing) wiredIn.pause(); else ferramentaFala.error('Nenhuma música
tocando'); });

ferramentaFala.on('tocar', 'música', function(event){ if(event.otherParams.length == 0){ wiredIn.play(); } else {
var musicIndex = event.otherParams[0]; wiredIn.play(musicIndex); } }); detectando parâmetros

detectando parâmetros ferramentaFala.on('tocar', 'música', function(event){ if(event.otherParams.length == 0){ wiredIn.play(); }
else { var musicIndex = event.otherParams[0]; wiredIn.play(musicIndex); } });

demonstração

demonstração 2

Conclusões

Conclusões • Todo o processo mostrou-se de fácil integração na
web • A ferramenta demonstrou ter boa Efetividade de utilização • É possível utilizar-se apenas de padrões abertos para isso

Conclusões • O paradigma da web permite uma reutilização facilitada
da ferramenta em aplicações • O paradigma da web favorece uma adaptação simples de interfaces assistivas à aplicações

Conclusões • O uso da fala como modalidade de interação
nas aplicações atuais é factível

Conclusões • A fala deveria ser considerada como um fator
real que enriqueça as capacidades de uma aplicação web

trabalhos futuros

trabalhos futuros • Evoluir ferramenta como uma extensão de navegador
• Ampliar as funcionalidades relacionadas ao navegador • Suportar o padrão WAI-ARIA

"Tome o controle do seu trabalho, sua vida e sua
arte. As ferramentas estão todas por ai. Agora você só precisa usar as ferramentas de dentro de você mesmo." James Altucher

Obrigado!

Interface Multimodal para Navegação Guiada por ...

Interface Multimodal para Navegação Guiada por Fala na Web

More Decks by Almir Filho

Other Decks in Programming

Featured

Transcript