Mouse+Teclado x Toque+Canetaas modalidades de interação em contextos

educacionais

Prof. Dr. André Constantino da Silva

• Minha história• Modalidade

– Teclado– Mouse– Caneta– Toque

• Multimodalidade• Projetos de Pesquisa em Andamento

– Editor Multimodal

Agenda

• Ingresso no NIED em 2005– Projeto TIDIA-Ae– Aluno especial IC/UNICAMP, primeiramentena disciplina de projeto de interfaces de usuário

• Caderno Interativo de Lógica (Néris et al, 2006)• Uso para apoiar as atividades de aprendizagem (da

Silva; da Rocha, 2011)– Acompanhamento dos estudos do grupo

• Uso de palmtop e desenvolvimento de sistemasInterativos

– Multiplataforma

Minha História

• Participação no projeto de investigação do uso de Tablet PCs na Educação Superior– Rodolfo J. Azevedo (coordenador), Heloísa V. da Rocha,

André C. da Silva, Ricardo E. Caceffo e Pedro Almeida– Laboratório com 20 Tablet PCs com suporte interação a

caneta e a multitoque

– Impressionado: muitos alunos preferiram não usar o dispositivo

Minha História

• Popularização dos dispositivos móveis e investigações sobre m-Learning– Equipados com tela Multitoque

- Equipados com tela multitoque e a caneta

Minha História

Minha HistóriaMultiplataforma e multidispositivos

• “Como dar conta da rápida evolução tecnológica? Como garantir que os design ofereçam uma boa IHC ao mesmo tempo que exploram o potencial e funcionalidade da nova tecnologia?” (Preece et al., 1994)

• “As novas tecnologias da informática incluiriam displays do tamanho de uma parede, aplicados para palmtops, minis sensores médicos parecidos com joias e computadores sensíveis ao tato que mudam experiências sensoriais e formas de pensar.” (Shneiderman, 2006, p. 21)

Motivação

• O modo como uma entrada do usuário ou uma saída do sistema são expressas

• O modo de comunicação se refere ao canal usado por duas entidades diferentes que interagem (Alty e McCartney, 1991)

• “um método de interação que um agente pode usar para alcançar uma meta ressaltando que uma modalidade pode ser especificada em termos gerais como ‘usando fala’ ou em termos mais específicos como ‘usando microfone’” (Nigay e Coutaz, 1995).

Modalidade de Interação

• Periférico de entrada utilizado para a entrada manual de dados e comandos

• Formado por um arranjo de teclas representando letras, números, símbolos e outras funções

Teclado

• Utilizado como dispositivo para movimentar o ponteiro em interfaces WIMP

• quatro tipos de operações: movimento, clique, duplo clique e "arrastar e largar“

Mouse

• Dois dos principais dispositivos de entrada de dados no computador desktop

• “O mouse e a interface GUI foram umas das principais razões para a grande penetração dos computadores na sociedade.” (Teiche et al., 2009)

Teclado + Mouse

• Periférico semelhante à caneta,chamado de stylus

– Pen-based computing• As interfaces de usuário para computação baseada em

caneta podem ser implementadas de vários modos, destacam-se:

(i) periférico de apontamento: as ações da caneta são mapeadas para ações das interfaces gráficas, como mover o ponteiro, acionar elemento de interface, selecionar e arrastar; (ii) manipulação direta e reconhecimento de escrita manuscrita ou gestos.

Caneta

• “… a caneta pode remover a exigência de habilidade para digitar quando se opera um computador. Ao invés de digitar, o usuário simplesmente poderia escrever ou desenhar, e o computador poderia reconhecer e agir após receber esta entrada. ”

Kurtenbach (2010, p. 14, tradução nossa)

• “a caneta continuará essencial para algumas tarefas, como rascunhar e entrar com uma ideia livre de forma, e será nessas aplicações que ela encontrará sucesso”

Kurtenbach (2010, p. 20, tradução nossa)

Caneta

• Modalidade do tipo tátil que emprega sensores para identificar uma ou mais regiões de uma superfície na qual um ou mais dedos entraram em contato

• Várias tecnologias para possibilitar a interação por toque, com características de tempo de resposta diferentes ou possibilidade de entrada de apenas um ou vários toques simultâneos (multitoque)

Toque

• É possível empregar a movimentação da caneta ou do dedo na tela e atribuir-lhe um significado: a interação por gestos

• “um expressivo, significante movimento do corpo, isto é, movimento físico dos dedos, mãos, braços, cabeça, face ou corpo que possui a intenção de passar informação ou interagir com o ambiente” (Karpov et al., 2008, p. 156, tradução nossa)

Gestos

• Gestos podem ser gerados a partir de qualquer movimento do corpo, embora comumente relacionados com as mãos e a face.– pen-based gestures: a partir de movimentos da caneta– touch gestures: a partir de movimentos de um dedo– multi touch gesture: a partir do movimento de mais de um

dedo

Gestos

• Bernsen (2008) afirma que duas modalidades não são equivalentes, pois as modalidades diferem uma da outra em relação aos pontos fortes e fracos de expressividade e também em sua relação aos sistemas perceptual, cognitivo e emocional do ser humano.

Não Equivalência de Modalidades

• O teclado possibilita rápida digitação e possibilita a elaboração de textos estruturados em tópicos, por outro lado:

“o uso da caneta eletrônica é importante pois permite registrar e organizar pensamentos, ideias, problemas e soluções de forma clara e precisa, tornando o ensino e o aprendizado mais flexíveis. Além disso, a caneta eletrônica possibilita o registro natural do processo de desenvolvimento do pensamento e raciocínio em todas as suas etapas. Por exemplo, na resolução de cálculos grandes e complexos, é possível que sejam registrados os passos feitos e também desenhados diagramas que explicam a resolução do problema.” (Backon, 2006, p. 10, tradução nossa)

Caneta x Teclado

• “Pesquisadores e projetistas têm realizado a observação chave que as interações usando a caneta são distintamente diferentes das interações a toque e podem ser exploradas em diferentes e interessantes formas”(Kurtenbach, 2010, p. 20, tradução nossa)

Caneta x Toque

• “Entretanto a técnica de interação [com o mouse] é indireta e baseada em reconhecimento. A Interface de Usuário Natural com as telas multitoque é intuitiva, contextualizada e evocativa. A mudança da GUI para interface baseada em Gestos continuará a tornar os computadores parte integrante, mas discreta, do nosso estilo de vida.” (Teiche et al., 2009, p. 30, tradução nossa)

Interface de Usuário Natural

Problemas de Interação

• Mudança de plataforma pode causar problemas de interação chamados problemas mudança de plataforma

• Mudança de modalidade pode causar problemas de interação chamados problemas mudança de modalidade

(da Silva et al, 2013)

Metodologia

Tablet PCDesktop

CelularDispositivos sensíveisA toque

Windows Vista OS

Problema do Fat Finger na Seleção de um Item do Menu

Problema de Consistência

Problemas Identificados  Problema

IdentificadoCelular

sensível ao toque

Tablet PC Desktop

1 Problema do dedo gordo

Sim Sim Não

2 Uso de Mouseover Sim Sim Não3 Integração com

gestosSim Sim* Não

4 Gap entre as funcionalidades do

dispositivo

Sim Não Não

5 editor de texto rico Sim Não Não6 Ativação do Menu Sim Sim Sim

*navegador usado é para desktop

Relação entre os Problemas e Dispositivos

Tablet PCDesktop

Smartphone

1

2

45

6

3

Relação entre os Problemas e Dispositivos

12

45

6

3

• Visa projetar e implementar interfaces de usuário para a Web de forma a ter uma ótima experiência de visualização a partir de adaptações para o dispositivo que irá renderizar a página (Marcotte, 2011)

• Acredito que as técnicas do DR não solucionam todos os problemas de mudança de modalidade– Projeto de Iniciação Científica fomento pelo IFSP

Design Responsivo

• “O software não deveria ser projetado de forma que os usuários pudessem operar o mesmo programa de calendário em um palmtop, laptop ou computador do tamanho de uma parede?” (Shneiderman, 2006, p. 58)

• Como operar da mesma forma e utilizando modalidades diferentes?

Problemática

Ambientes de EaD e Dispositivos Móveis

• Aplicação específica para dispositivo: – Interface de usuário própria para o

dispositivo– Obter vantagens das características

do dispositivo móvel– Uma aplicação para cada plataforma

• Time de desenvolvimento com conhecimento específico

• Aumento do número de linhas de código a manter

Ambientes de EaD e Dispositivos Móveis

• Um Web site específico para dispositivos móveis: – Interface de usuário própria para o

dispositivo– Não obtém todas as vantagens das

características do dispositivo móvel

– Uma aplicação para os dispositivos móveis e outra para desktops• Aumento do número de linhas de

código a manter

Ambientes de EaD e Dispositivos Móveis

• A mesma interface para qualquer dispositivo: – Número de linhas de código não

aumenta significadamente– Não obtém todas as vantagens das

características do dispositivo móvel

– Dificuldade em considerar tantos estilos de interação

– Necessidade de realizar testes de usabilidade para identificar barreiras

• Como o usuário utiliza o dispositivo e suas modalidades?

“O desafio dos projetistas é compreender com mais profundidade o que o usuário deseja.” (Shneiderman,

2006)

Adicionando Nova Modalidade

• InkBlog: permite escrever mensagens manuscritas e desenhar esboços– Incrementamos a ferramenta Weblog do ambiente

Ae com componentes para gerar e manipular tinta eletrônica

– Tecnologias usadas na implementação: InkML da W3C, HTML5, JavaScript, jQuery

A Ferramenta InkBlog

A Ferramenta InkBlogInkEditor

A Ferramenta InkBlog

Safari/iPhone

InkBlog

Android

A Arquitetura da ferramenta Weblog

id Weblog Architecture

Client

Browser

Serv er

presentation layer

system layer

IWeblogSystem

POST - HTML

A Arquitetura da ferramenta InkBlog

id InkBlog Architecture

Client

Browser

InkEditor

InkRenderer

Serv er

presentation layer

system layer

InkController

InkML parts

InkML / POST -HTTP

IWeblogSystem

Muitas modalidades de interação... Como fazer para usá-las juntas?

Sistemas de Interação Multimodal

• Possibilita os usuários interagir com computadores por meio de várias modalidades de entrada e saída

Sistemas de Interação Multimodal

• Interação mais natural e transparente• Aumento da acessibilidade• Aumento da flexibilidade• Aumento da conveniência• Usuários preferem a interação multimodal

– Oviatt (1997) descreve que cerca de 95% dos usuários

Modalidades

• Fala e gestos (Bolt, 1980)• Fala e movimento de lábios (Petajan, 1984)• Fala e gestos (Neal e Shapiro, 1991)• Fala e rastreamento de olho (Koons et al., 1993)• Fala e mouse (Cohen et al., 1997)• Fala e tinta eletrônica + reconhecimento de

gestos (Bangalore e Johnston, 2006)

Arquitetura para Sistemas Multimodais

• Os dados das modalidades podem (Nigay & Coutaz, 1993) ser:– Equivalentes– Complementares– Divergentes

Multimodalidade

• pensando na tecnologia dos computadores desktop e na dos dispositivos móveis, acredito em uma complementação de uso dessas tecnologias

• Dependendo da tarefa a ser realizada, utilizar um determinado hardware será mais rápido, eficiente e/ou oferecerá uma experiência mais gratificante aos usuários

Minha Experiência...

• Membros: André Constantino da Silva (Coordenador) e Daniela Marques

• Investigar o potencial da mobilidade de dispositivos computacionais portáteis e das novas tecnologias de interação em diferentes contextos (como educacional e entretenimento) aplicando conceitos das disciplinas de Engenharia de Software, Interação Humano-Computador e Informática Aplicada a Educação.

Grupo de PesquisaMobilidade e Novas Tecnologias de Interação

Projetos em 2015• Título: Montagem de Laboratório de Investigação de Modalidade

Multitoque em Contextos Educacionais• Fomento: IFSP (Edital Pró-Equipamentos)• Duração: 1 ano• Objetivo geral: Aquirir equipamentos para investigar a modalidade

de interação multitoque em contextos educacionais, e como esses equipamentos, que se diferem dos computadores desktops, pode (i) tornar a aula mais interessante aos alunos, motivando-os a participarem da aula, e (ii) identificar aplicações que apoiem as atividades de ensino-aprendizagem.

• Equipamentos em aquisição:• 3 comp. híbridos HP Split 13-M100 • 1 comp. híbrido Dell XPS 12• 2 smartphones Samsung Galaxy Note III

Projetos em 2015• Título: Investigação da Interação Multimodal e de

Mobilidade em Contextos Educacionais em Cursos Técnicos e Tecnológicos

• Fomento: CNPq (chamada 14/2014)• Duração: 3 anos• Objetivo: Investigar e desenvolver aplicações que explorem

as modalidades de interação multitoque, caneta e gestos em contextos educacionais.

• Equipamentos adquiridos:• 2 computadores híbridos Inspiron 13” Dell• 2 smatphones Samsung Note 4

Editor MultimodalEquipe

André Constantino da SilvaFernanda Maria Pereira Freire

Flávia Linhalis ArantesJan Breuer (Universidade de Siegen,

Alemanha)Renato César Alves de Oliveira (bolsista BAEF)

• Espaço para escrever, desenhar, colar fotos, acrescentar links– registrar e produzir informações com diferentes tipos de mídias

• Multimodal:– Texto– Imagem– Desenho com caneta– Links (áudio, vídeo)

• Multiplataforma:– Celular toque– Tablet caneta– Desktop / laptop mouse e teclado

Editor multimodal

Textos produzidos atualmente são semelhantes aos que circulam em redes sociais com diferentes tipos de mídias

• Ampliar o alcance das atividades em sala de aula e dar suporte para a elaboração de textos multimodais, compatíveis com práticas atuais

• Alunos poderão enviar textos multimodais feitos em sala de aula para o TelEduc e vice-versa

Motivação

Desenvolver um editor multimodal (com suporte à escrita, desenho, imagem, links) em HTML5 para elaboração de textos multimodais, visando integrar funcionalidades de dispositivos móveis ao ambiente TelEduc, tendo em vista o desenvolvimento de uma nova aplicação educacional.

Objetivo geral do projeto

• Permitir múltiplas possibilidades de registro e contribuir:– com a inserção contextualizada de dispositivos móveis nas

práticas educacionais;

– com a integração de uma ferramenta inovadora, compatível com as demandas atuais de utilização da web, na plataforma TelEduc;

– para estreitar as maneiras como alunos e professores interagem com conteúdos educacionais.

Contribuições esperadas

• Decisões de implementação– Canvas com XML vs. SVG (Scalable Vector Graphics)

• Dinâmica para levantamento de requisitos e avaliação de viabilidade

Ações realizadas

• Participantes: 13 estudantes de ensino médio, graduação e pós-graduação

• Cada participante tinha um dispositivo móvel em mãos: 3 laptops, 4 tablets, 3 celulares.

• Fase 1: apresentação de uma aula com lousa, projetor e voz. – Participantes assistiram à aula e tomaram nota com seus dispositivos– Discussão e questionário sobre as anotações realizadas

• Fase 2: Elaboração de um documento no Power Point usando os dados capturados– Grupos formados por um estudante de cada dispositivo– Discussão e questionário sobre e elaboração de um texto multimodal

Dinâmica

• Avaliação de viabilidade– Análise dos dados da dinâmica

• Documento de requisitos– Análise dos dados da dinâmica

• Implementação multiplataforma– SVG– HTML 5

Estado atual

• Acessar o editor multimodal– Logar no teleduc e ter uma ferramenta

• Limitações no tamanho da tela

– Criar um app• Dependente de plataforma

• Como integrar o editor multimodal no TelEduc– Criar uma ferramenta– Usar como um editor comum (como CK Editor)

Desafios

• Pesquisa sobre os dispositivos móveis em sala de aula, na visão do professor

• Estudo sobre os tipos de dispositivos e editores disponíveis

Desdobramentos / Demandas

Obrigado!