O documento discute conceitos e atividades relacionadas a interfaces móveis, incluindo touch events, lei de Fitts e pontos events. Ele explica como esses eventos lidam com entrada de toque e como fornecem uma experiência consistente em diferentes dispositivos. Além disso, discute a importância do tamanho e posicionamento de elementos na interface de acordo com a lei de Fitts para melhorar a usabilidade.

1. mobile - AI
Renato Bongiorno

2. AI - Mobile
Atividades e conceitos da aula:
- Touchevents
- Lei de Fitts

3. AI - Mobile
touch events
Definem um conjunto de elementos que representa
a os pontos de contato em uma superfície sensível
ao toque - dedo ou caneta stylus-pen e as
mudanças que podem ocorrer com a navegação do
usuário.

4. AI - Mobile
touch events
Problema: A maioria das aplicações web estão adaptadas
somente a lidar com eventos de mouse e não com multiplos
toque - touch e mouse.
Problema: Limitações na experiência do navegador e
realizar a entrada de dados simultanea independente do
dispositivo.

5. AI - Mobile
touch events
Solução: Uso da especificação touch-events W3C.
http://www.w3.org/TR/touch-events/

6. AI - Mobile
touch events
Touch Interface
Descreve um ponto de acesso individual para cada ponto de
acesso.

7. AI - Mobile
touch events
TouchList Interface
Lista que define os pontos individuais de contatos touch.
TouchEvent Interface
Define os eventos:
● touchstart
● touchend
● touchmove
● touchcancel

8. AI - Mobile
touch events
TouchList Interface
Lista que define os pontos individuais de contatos touch.

9. AI - Mobile
touch events

10. AI - Mobile
touch events
TouchEvent Interface - Define os eventos:
● touchstart - o usuário coloca um ponto de toque na
superfície sensível ao toque
● touchend - o usuário remove um ponto de contato da
superfície de toque
● touchmove - indicar quando o usuário move um ponto
de contato ao longo da superfície de toque
● touchcancel - um ponto de contato foi interrompido
de uma maneira aplicação específica

11. AI - Mobile
touch events
Interação com eventos do mouse
Caso o user-agent identifique ambas as formas de
interação com o dispositivo - touch e mouse -
automaticamente a ação touchstart é acionada e enviada
antes de qualquer evento de mouse.

12. AI - Mobile
point events
Interação com eventos de Ponteiro
http://www.w3.org/Submission/pointer-events/
Visa solucionar o problema das várias formas de interação
com o site reduzindo o custo de codificação para vários
tipos de entrada e também para ajudar com a ambigüidade
com o que é eventos de mouse e o que não é - definindo
eventos que tratam chamados de ponteiro

13. AI - Mobile
point events
Interação com eventos de Ponteiro
Este modelo torna fácil para escrever sites e aplicativos
que funcionam bem, não importa o hardware do usuário
O objetivo principal é o de proporcionar um único
conjunto de eventos e interfaces que permitem a
criação fácil para cross-device de entrada

14. AI - Mobile
point events
Interação com eventos de Ponteiro

15. AI - Mobile
point events
Interação com eventos de Ponteiro
Os eventos para manipulação de entrada de ponteiro parecem
muito com os de mouse: pointerdown, pointermove,
pointerup, pointerover, pointerout, etc
Eventos de ponteiro fornecem todas as propriedades usuais
presentes em eventos de mouse (coordenadas do cliente,
elemento alvo, estados de botões, etc), além de novas
propriedades para outras formas de entrada: pressão,
geometria de contato, inclinação.

16. AI - Mobile
point events
Interação com eventos de Ponteiro
tiltX - O ângulo do plano (em graus, no intervalo de [-90,90]) entre o plano
YZ e o plano que contém a caneta e a área de touch. Define a posição
positiva ou negativa - Exemplo abaixo - tiltX = Positivo

17. AI - Mobile
point events
Interação com eventos de Ponteiro
tiltY- O ângulo do plano (em graus, no intervalo de [-90,90]) entre o plano
XZ e o plano que contém a caneta e a área de touch. Define a posição
positiva ou negativa - Exemplo abaixo - tiltY = Negativo

18. AI - Mobile
point events
Interação com eventos de Ponteiro
touch-action CSS - Define como será o
comportamento da página em relação a regiao e
ao comportamento do toque - exemplo - nível de
zoom

19. AI - Mobile
point events
Interação com eventos de Ponteiro
Exemplo W3C - Reconhecendo tipo de dispositivo:
window.addEventListener("pointerdown", detectInputType, false);
function detectInputType(event) {
switch(event.pointerType) {
case event.POINTER_TYPE_MOUSE:
alert("You used a mouse!");
break;
case event.POINTER_TYPE_PEN:
alert("You used a pen stylus!");
break;
case event.POINTER_TYPE_TOUCH:
alert("You used touch!");
break;
case event.POINTER_TYPE_UNAVAILABLE:
alert("Not sure what device was used!");
break;
}
}

20. AI - Mobile
lei de fitts
Lei de Fitts
"A dificuldade para atingir um alvo está relacionado em
função da distância do alvo e de seu tamanho"
Na ergonomia, a Lei de Fitts (“Fitts’ law“) é um modelo de
movimento humano que prevê o tempo necessário para
rapidamente mover a uma área designada com base na
distância e tamanho desta área - Publicado por Paul Fitts em
1954

21. AI - Mobile
lei de fitts
Lei de Fitts
Se um botão (ou qualquer elemento clicável) tiver um tamanho
maior e uma distância maior de qualquer outro elemento da
tela, a probabilidade de clicar em um elemento errado é menor.

22. AI - Mobile
lei de fitts
Lei de Fitts
Dica - a área de ação do botão tenha, pelo menos, 12px de
largura e 24px de altura, que é o tamanho do cursor padrão do
mouse
Assim não resta dúvida se o cursor está dentro ou fora do botão

23. AI - Mobile
lei de fitts
Lei de Fitts
Dica - Posicione menus de acesso nas extremidades da tela
Para um destro, o canto inferior direito é o mais rápido de acessar,
seguidos do canto superior esquerdo, superior direito e inferior esquerdo.

24. AI - Mobile
lei de fitts
Lei de Fitts
Cálculo da Lei de Fitts
T = Tempo de movimento.
a, b = Variáveis. Neste caso, a representa o tempo de
início/término da ação e b representa a velocidade do mouse ou
mão.
A = distância do movimento do início ao centro do alvo (ou botão).
W = largura do alvo/botão ao longo do eixo do movimento.

25. AI - Mobile
lei de fitts
É comum encontrar botões grandes nas
interfaces?
A navegação secundária está sempre o mais
perto possível da navegação principal?
Os cantos do monitor são usados como alvo?

26. AI - Mobile
lei de fitts
Exemplos Lei Fitts
http://lachy.id.au/dev/css/examples/2004/08/fittslaw.html

27. AI - Mobile
lei de fitts
Exemplos Lei Fitts
http://www.ibrau.com.br/artigoleidefitts.htm

28. AI - Mobile
atividade
Reunir as Agências
Apresentação em Plenária:
Realizar pesquisa e apresentar as características que consideram
essenciais para o desenvolvimento de um dispositivo móvel para as
UI Guidelines dos fabricantes:

29. AI - Mobile
atividade
Grupo 01:

30. AI - Mobile
atividade
Grupo 02:

31. AI - Mobile
atividade
Grupo 03:

32. AI - Mobile
atividade
Grupo 04:

33. AI - Mobile
atividade
Grupo 05:

34. AI - Mobile
atividade
Reunir as Agências
Apresentação em Plenária:
Cada equipe escolhe um site de sua preferência e realiza a navegação de
forma completa e cria um relatório detalhando as diferenças e
experiencias entre a navegação desktop e mobile.
Além disso, especifica os pontos fortes e fracos na experiencia de
interação de interfaces touchscreen vs mouse.