Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Introdução

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

IHC HUMANO COMPUTADOR

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Fatores decisivos • Usabilidade • Aplicabilidade • Comunicabilidade • Acessibilidade

Slide 8

Slide 8 text

Multimodalidade USUÁRIO COMPUTADOR INTERAÇÃO

Slide 9

Slide 9 text

Multimodalidade USUÁRIO COMPUTADOR FALA MOUSE & TECLADO GESTOS

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Multimodalidade • Correspondência entre dispositivos e sentidos humanos

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Multimodalidade Computação pervasiva

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Reconhecimento de fala USUÁRIO COMPUTADOR FALA

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

?

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Fala como modalidade de interação

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

É 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 …

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Objetivos

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

A ferramenta

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Tecnologias HTML CSS JS

Slide 32

Slide 32 text

Tecnologias Web speech API

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Serviço web

Slide 36

Slide 36 text

Permissão do usuário

Slide 37

Slide 37 text

Arquitetura

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Interação

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Interface

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Interface

Slide 46

Slide 46 text

Utilização & Customização

Slide 47

Slide 47 text

... ... ... Utilização

Slide 48

Slide 48 text

... ... ... Utilização

Slide 49

Slide 49 text

... ... ... Utilização

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Estudo de caso

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

wiredIn Player de música online

Slide 54

Slide 54 text

wiredIn

Slide 55

Slide 55 text

wiredIn

Slide 56

Slide 56 text

Acoplamento ... ... ...

Slide 57

Slide 57 text

casos de uso

Slide 58

Slide 58 text

• 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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

Customização dos comandos

Slide 61

Slide 61 text

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(); });

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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); } });

Slide 67

Slide 67 text

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); } });

Slide 68

Slide 68 text

demonstração

Slide 69

Slide 69 text

demonstração 2

Slide 70

Slide 70 text

Conclusões

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

trabalhos futuros

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

"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

Slide 78

Slide 78 text

Obrigado!