Interfaces Pessoa- Máquina

Tamanho: px

Começar a partir da página:

Download "Interfaces Pessoa- Máquina"

Ian Pinto de Oliveira
7 Há anos
Visualizações:

1 Interfaces Pessoa- Máquina Marielba Silva de zacarias Fct I, Gab Desenho visual em disposidvos móveis & touch Referências:

2 Sumário DisposiDvos pessoais de comunicação O princípio carregar Componentes duma aplicação móvel UDlizadores móveis Taxonomia dos disposidvos móveis Mecanismos de E/S Princípios de desenho Desenho visual para disposidvos móveis Desenho visual para disposidvos touchscreen 2

3 DisposiDvos pessoais de comunicação Pessoal ComunicaDvo Handheld (operado na mão) Wakable Facilmente advado pelo udlizador ou pela rede 3

4 O Princípio Carregar - > DisposiDvos DisposiDvos pequenos, funcionam com pilhas, conedvidade wireless, teclados e ecrãs pequenos Qualquer funcionalidade que der jeito ter enquanto longe do PC. Evolução para o modelo da navalha suíça Memória, processador e velocidade de ligação mais limitadas Janela única Proliferação: necessidade de sadsfazer necessidades, desejos, preferências e personalidades diferentes 4

5 Princípio Carregar - > Pessoas Disponibilidade do udlizador Manutenção do foco UDlizador a fazer muitas coisas pode não ter tempo suficiente para manter o foco no disposidvo Comportamento social A conedvidade permanente tem modificado o nosso comportamento em reuniões sociais 5

6 Componentes duma aplicação móvel O disposidvo O udlizador Apps Infraestrutura de servidor complementar Interfaces entre o servidor aplicacional e outras fontes de informação Rede e operador Mecanismos de saída Mecanismos de entrada 6

7 UDlizadores Caracterís0cas individuais Mobilidade Disponibilidade Sociabilidade Contextualidade IdenDficação única Grupos e tribus Mensagens de voz e texto Extensão das comunidades online Hibridos móveis e hsicos Status Diferenças internacionais 7

8 Taxonomia 1. Trabalho (tablets) 2. Entretenimento (controlo jogos) 3. Especializados (gps) 4. Comunicação (tlm) v Smartphones abrangem várias senão todas 8

9 Mecanismos de entrada Controlo do foco Stylus Scroll & select (Dpo BB) Dedo Gestos Voz Comandos Teclas duras Sopkeys Teclas no ecrã Voz Entrada de texto e carateres ParDcularmente dificil Dados ambientais Cámaras, RFID, GPS, termómetros, acelerómetros Captura de informação e contexto Outros computadores bluetooth 9

10 Mecanismos de saída Ecrã com predomínio crescente do touchscreen Ligações bluetooth, infravermelhos speaker, wifi, rede telefonica, id unico 10

11 Princípios de desenho Mobilizar antes que miniaturizar Considerar operação com uma mão Reduzir entrada de dados no máximo Maximizar seleção a pardr de listas Captar localização a pardr do GPS Câmaras podem fotogram códigos de barra ou texto Agendas e calendários podem fornecer informação relevante Auto- compledon Reconhecimento de images de faces ou objectos Data e hora a pardr do disposidvo Usar comandos de voz 11

12 Usar informação dentro do disposi0vo Aproveitando a localização fornecida através do GPS 12

13 Usar informação dentro do disposi0vo Aproveitando a localização fornecida através do GPS 13

14 Princípios de desenho II Desenhar para ecrãs pequenos Selecionar criteriosamente o conteúdo Reduzir o texto no máximo Uma única janela Uma única coluna Páginas curtas 14

15 Mobilizar em vez de miniaturizar Desenho para o desktop vs desenho para disposidvo móvel 15

16 Princípios de desenho III Considerar o contexto Posição geográfica permite determinar o que está a fazer o udlizador ou se vai chegar a horas a uma reunião Localização exacta a pardr duma rede wifi, bluetooth ou um leitor RFID para markedng focalizado ou pardlha de informação local Sensores de movimento e temperatura podem indicar estado de ânimo Calendários indicam advidade provável Cámaras capturam informação ambiental Proximidade com outros disposidvos 16

17 Princípios de desenho IV Simplificar a navegação Lista de links verdcais Reduzir o número de categorias e níveis de navegação, apresentando as mais importantentes primeiro Providenciar atalhos através de teclas Fazer os links obvios, dar feedback uma vez selecionado Colocar os links de navegação nas paginas internas no fundo Oferecer o link para o site principal Breadcrumbs só se forem necessários, não indicar todos os níveis colocar um << para o nível superior senão couber Usar um dropdown link no topo da página 17

18 Navegação 18

19 LINKS ABAIXO 19

20 Navegação Navegação entre páginas através de dropdown lists 20

21 Navegação Navegação entre páginas através de dropdown lists 21

22 Princípios de desenho V Desehar para conedvidade intermitente Páginas pequenas que carreguem rápido Código em excesso, comentários e tags Reduzir tamanho e resolução das images Minimizar o número de images embebidas para acelerar o carregamento 22

23 23

24 Princípios de desenho VI Consistência entre canais e integração Balanço entre forma e função ConDnuidade entre PC e disposidvo móvel Extender a experiência de udlização (ex. permidr a visualização de reviews de produtos) Experiência de udlização consistente 24

25 Desenhar de acordo ao esdlo de interação Stylus Scroll & Select Dedos 25

26 Outros Detetar os browsers mobiles e enviar para o site móvel Evitar tecnologia não universal (Java, Javascript, cookies, Flash, frames, pop- ups & auto- refresh) Evitar tamanhos absolutos (usar em, %) Fazer scroll numa única direção Usar xtulos curtos para as páginas Eliminar o back na página inicial Personalizar!!! 26

27 Princípios de desenho para touchscreen Não há hover 1024 x 768 Dedos gordos Rotação Menús no fundo e/ou à direita Menús à esquerda só bom para cañotos Rotação Considerar Gestos (ex. scroll, min, max) 27

28 Dedos 28

29 Botões Enquanto mais apertados, devem ser maiores 29

30 Controlo no topo A mão não deixa ver o conteúdo 30

31 Controlo no fundo 31

32 Menú no fundo Menú no fundo permite ver o conteúdo do ecrã 32

33 COMO APROVEITAR A ROTAÇÃO DO DISPOSITIVO NA INTERFACE 33

34 Fluído A rotação simplesmente reacomoda os elementos no ecrã 34

35 Extensão Acrescenta- se informação no ecrã horizontal, no ecrã verdcal vê- se esta informação se se clicar no link destacado em verde 35

36 Complementar O ecrã horizontal mostra informação complementar 36

37 ..e Conxnuo Só é preciso rotar para o ecrã complementar aparecer 37

38 A barra do xtulo como guia.. 38

39 Orientação por defeito Interatividade só aparece na orientação horizontal 39

40 Compreendendo o Contexto Ao rotarmos, o formato facilita a leitura da receita, ex. a iluminação não diminui 40

41 Display secundário 41

42 Falta de de pistas sobre a interface secundária 42

Documentos relacionados

Notícias para dispositivos móveis: Aplicações Web e Nativas. Marco Oliveira LabCom/IT Outubro de 2009 [N4MD - News For Mobile Devices]

Notícias para dispositivos móveis: Aplicações Web e Nativas Marco Oliveira LabCom/IT Outubro de 2009 [N4MD - News For Mobile Devices] Sumário Motivação Problemas e relevância, background Aplicações Desktop