Slides da apresentação realizada para o Seminário do NIED em 14/08/2015. Explorar a rápida evolução tecnológica é um desafio da Interação Humano-Computador; ao desenvolver um sistemas interativos para computador desktop, considera-se o mouse e o teclado os dispositivos de entrada a serem utilizados. Com a variedade de dispositivos computacionais atuais, em especial, dispositivos móveis como celulares inteligentes e tablets, cuja entrada de dados é por meio de toque e/ou caneta, torna-se necessário estudar como a diversidade de dispositivos e de modalidades de interação pode trazer benefícios aos usuários. Cada modalidade tem suas peculiaridades e, portanto, diferentes potenciais de uso, inclusive no contexto educacional. Esta palestra visa expor a investigação de diferentes modalidades, em especial, a caneta e o toque, por meio da exposição do tema considerando os fundamentos de modalidade e multimodalidade definidos na área de Interação Humano-Computador e dos trabalhos realizados pelos palestrantes. Mais informação em: http://www.nied.unicamp.br/?q=content/mouseteclado-x-toquecaneta-modalidades-de-intera%C3%A7%C3%A3o-em-contextos-educacionais

1. Mouse+Teclado x Toque+Caneta
as modalidades de interação em
contextos educacionais
Prof. Dr. André Constantino da Silva

2. • Minha história
• Modalidade
– Teclado
– Mouse
– Caneta
– Toque
• Multimodalidade
• Projetos de Pesquisa em Andamento
– Editor Multimodal
Agenda

3. • Ingresso no NIED em 2005
– Projeto TIDIA-Ae
– Aluno especial IC/UNICAMP, primeiramente
na 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 sistemas
Interativos
– Multiplataforma
Minha História

4. • 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

5. • 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

6. Minha História
Multiplataforma e multidispositivos

7. • “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

8. • 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

9. • 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

10. • Utilizado como dispositivo para movimentar o ponteiro
em interfaces WIMP
• quatro tipos de operações: movimento, clique, duplo
clique e "arrastar e largar“
Mouse

11. • 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

12. • 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

13. • “… 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

14. • 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

15. • É 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

16. • 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

17. • 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

18. • 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

19. • “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

20. • “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

21. 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)

22. Metodologia
Tablet PCDesktop
Celular
Dispositivos sensíveis
A toque
Windows Vista OS

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

24. Problema de Consistência

25. Problemas Identificados
Problema
Identificado
Celular
sensível ao
toque
Tablet PC Desktop
1 Problema do dedo
gordo
Sim Sim Não
2 Uso de Mouseover Sim Sim Não
3 Integração com
gestos
Sim Sim* Não
4 Gap entre as
funcionalidades do
dispositivo
Sim Não Não
5 editor de texto rico Sim Não Não
6 Ativação do Menu Sim Sim Sim
*navegador usado é para desktop

26. Relação entre os Problemas e
Dispositivos
Tablet PCDesktop
Smartphone
1
2
45
6
3

27. Relação entre os Problemas e
Dispositivos
1
2
45
6
3

28. • 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

29. • “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

30. 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

31. 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

32. 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

33. • 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)

34. 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

35. A Ferramenta InkBlog

36. A Ferramenta InkBlog
InkEditor

37. A Ferramenta InkBlog

39. Safari/iPhone
InkBlog
Android

40. A Arquitetura da ferramenta Weblog
id Weblog Architecture
Client
Browser
Server
presentation layer
system layer
IWeblogSystem
POST - HTML

41. A Arquitetura da ferramenta InkBlog
id InkBlog Architecture
Client
Browser
InkEditor
InkRenderer
Server
presentation layer
system layer
InkController
InkML parts
InkML / POST -
HTTP
IWeblogSystem

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

43. Sistemas de Interação
Multimodal
• Possibilita os usuários interagir com computadores
por meio de várias modalidades de entrada e saída

44. 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

45. 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)

46. Arquitetura para Sistemas Multimodais

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

48. • 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...

49. • 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 Pesquisa
Mobilidade e Novas
Tecnologias de Interação

50. 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

51. 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

52. Editor Multimodal
Equipe
André Constantino da Silva
Fernanda Maria Pereira Freire
Flávia Linhalis Arantes
Jan Breuer (Universidade de Siegen, Alemanha)
Renato César Alves de Oliveira (bolsista BAEF)

53. • 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

54.  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

55. 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

56. • 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

57. • 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

58. • 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

59. • 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

60. • 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

61. • 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

62. Obrigado!