Com a colaborao de:

31/08/2010

Estado da arte
Guidelines para Interface tctil
Isabel L. Nunes Mrio Simes-Marques

0/1 Projecto em curso com o apoio de:

Com a colaborao de:

ndice
Principais caractersticas dos ecrs tcteis......................................................................................................... 2 Caractersticas de adequabilidade das aplicaes considerando o uso de ecrs tcteis................................... 3 Caractersticas dos ecrs tcteis operados por dedo e operados por estilete .................................................. 4 Recomendaes de usabilidade para aplicaes de ecr tctil ......................................................................... 6 Recomendaes de usabilidade para aplicaes/websites em iPad ...............................................................10 Referncias .......................................................................................................................................................12

1 Projecto em curso com o apoio de:

Com a colaborao de:

Principais caractersticas dos ecrs tcteis

Velocidade Preciso: Interaco por Dedo Interaco por Estilete Controlo de velocidade Movimento contnuo Directividade Fadiga Pegada Melhores usos

Elevada Baixa Elevada Sim Sim Direco Distncia Velocidade Elevada No Apontar Seleccionar

2 Projecto em curso com o apoio de:

Com a colaborao de:

Caractersticas de adequabilidade das aplicaes considerando o uso de ecrs tcteis

Ecrs Tcteis Mais adequado para aplicaes onde: No adequado para aplicaes onde: A oportunidade de treino seja baixa Sejam requeridos utilizadores em treino / A frequncia de utilizao seja baixa treinados No seja necessrio posicionamento exacto A frequncia de utilizao seja alta Seja necessria pouca ou nenhuma entrada de Seja exigida preciso texto ou numrica Seja exigida muita introduo de dados O espao de secretria reduzido O ambiente seja "agressivo", tanto quimicamente como de outra forma, isto , condies ambientais/atmosfricas onde por exemplo os nveis de humidade, salinidade, poeiras ou a exposio a produtos corrosivos sejam adversos ao dispositivo. A utilizao deste tipo de terminais elimina a necessidade de teclados e ratos/trackballs reduzindo o nmero de componentes electrnicos expostos ou que tenham de satisfazer requisitos tcnicos exigentes. Aplicaes Tpicas: Sistemas de informao pblica: Museus, guias de cidade Sistemas de Quiosque: Publicidade, informaes sobre produto Sistemas que requerem apenas apontar e seleccionar

3 Projecto em curso com o apoio de:

Com a colaborao de:

Caractersticas dos ecrs tcteis operados por dedo e operados por estilete
Caractersticas Interaco por Dedo Clique, como funcionalidade mais geral e disponvel em todos os dispositivos, incluindo os mais bsicos. Funcionalidades mais avanadas tais como: duplo clique, pan, flick, clique com dois dedos, scroll, zoom in, zoom out e rotao. Apontar Seleccionar Elevada Baixa Grande No recomendado Alternativa: - Por seleco Por seleco Por apontar-e-clicar (botes) Interaco por Estilete

Interaco

Clique Drag

Operaes Velocidade Preciso Tamanho dos Controlos Introduo de Texto Introduo de nmeros Incio das aces

Apontar Seleccionar Definir trajectrias: desenhos, gestos, escrita manual Elevada Elevada (comparvel do rato) Pequeno (como para o rato) Usando escrita manual Alternativa: - Por seleco - S a seleco das letras iniciais Usando escrita manual Por seleco Por apontar-e-clicar (botes) Por seleco (p.ex., listas dropdown) Por gestos GUI "Standard" Melhor: interface optimizada para estilete (introduo por gesto) Interface apontar-e-clicar, quando necessrio velocidade

Interface Preferido

Interface apontar-e-clicar Alta velocidade Baixa preciso Ambiente "agressivo" A utilizao do Estilete pode ser difcil de gerir (pegar no estilete, sujidade, possibilidade de perder)

Ambiente

Alta velocidade (no obrigatrio) Alta preciso A utilizao do estilete possvel

4 Projecto em curso com o apoio de:

Com a colaborao de:

Elementos do GUI

Botes Controlos para apresentao de resultados Seleco de dados Grficos

Quase todos os elementos GUI padro podem ser usados (mas nem todos so ptimos) - Evitar: scrollbars, menus pulldown (no mnimo devem ser de mola)

5 Projecto em curso com o apoio de:

Com a colaborao de:

Recomendaes de usabilidade para aplicaes de ecr tctil

As aplicaes devem ser executadas em todo o ecr; Cores de fundo brilhantes (no negros) escondem as impresses digitais e reduzem o brilho; A mistura de cores ou outros padres de fundo ajudam a focar os olhos na imagem do ecr, em vez de reflexos. O layout do ecr deve ser comutvel entre uma verso para utilizadores destros e uma verso para utilizadores canhotos. A inverso do ecr deve afectar principalmente os grandes blocos de construo do layout do ecr. Deve ser utilizada uma grelha que divida o ecr num nmero fixo de clulas que tm um tamanho constante. O ecr deve ser dividido em reas funcionais e os elementos devem ser colocados no ecr, utilizando as reas fixas para apresentao de dados, para introduo de dados, para botes e para apresentao do estado. Devem ser usados os seguintes atributos para agrupar os elementos do ecr: arranjo, quadros, forma, cor de primeiro plano e cor/textura de fundo, tamanho do texto e atributos do texto. Os atributos devem ser utilizados de forma redundante para facilitar a identificao dos grupos. A definio de grupos no deve ser baseada apenas na cor, e devem ser usados suficiente contraste e brilho para utilizadores daltnicos. - Interaco por Dedo: a estrutura global o mais importante e a estrutura local deve ser simples; - Interaco por Estilete: a estrutura global o mais importante e a estrutura local pode ser mais detalhada. Pode ser usado um TabStrip para ampliar virtualmente um ecr fornecendo um mecanismo que permite que os utilizadores alternem entre diferentes pontos de vista. Podem ser usados botes para saltar para elementos em reas fixas. Os ecrs devem ter um layout e um aspecto consistentes. As opes de navegao devem ser claras, por exemplo, o modo como os utilizadores podem avanar e retroceder. O nmero de mudanas de ecr deve ser limitada a um nmero pequeno.

Arranjo do ecr

Gesto do espao de ecr

6 Projecto em curso com o apoio de:

Com a colaborao de:

Introduo de dados

Botes e Menus

Controlos Complexos

Para aplicaes onde sejam inseridos nmeros ou letras com frequncia, no ecr deve ficar permanentemente visvel um teclado virtual. A introduo de dados deve ser limitada a poucos valores, no entanto, quando for necessria, deve ser feita: clicando em valores pr-definidos (seleco), clicando repetidamente em determinados controlos (p.ex., para valores de aumento ou diminuio); arrastando controlos deslizantes ou outros controlos semelhantes; inserindo dgitos ou nmeros atravs de um teclado numrico ou de um teclado. Opes de interface para a seleco de valores: checkboxes, radiobuttons, botes, listas de texto e listas (menus pop-up). Opes de interface para vrios cliques: botes de girar e botes de scroll. Opes de interface para arrastar: sliders e scrollbars. Note-se que, nos sistemas operados por dedo, deve ser evitado o arrastar. Tamanho dos botes: no mnimo de 2 x 2 cm, separados pelo menos 3 mm para ecrs tcteis operados por dedo. Nos ecrs tcteis operados por dedo devem ser utilizados alvos grandes e discretos, espalhados no ecr. Usar trs cones diferentes para indicar o estado dos botes: cone padro, cone "ser ativada" (seleccione o boto todo, no apenas o texto, nmero ou grficos sobre ela, porque o boto fica obstrudo pelo dedo), cone "foi ativado" (realce todo o boto para um melhor reconhecimento dos comentrios). Alm das funes normais, os botes de funo devem, de preferncia, ter rtulos de texto (ou rtulos de texto com grficos). Os botes agrupados devem estar claramente separados de modo a que no possa ocorrer nenhuma activao acidental. A definio de botes agrupados deve considerar: arranjos, frames, forma, cor do primeiro plano e cor/textura do fundo, tamanho e atributos do texto. Normalmente, os links de texto devem ser listados de cima para baixo. Quando os links forem poucos, aceitvel uma distribuio da esquerda para a direita (de preferncia na parte superior ou inferior do ecr). No devem ser usados: - scrollbars convencionais para fazer deslizar listas ou tabelas; - drag & drop para mover itens entre listas ou tabelas (deve ser usado um boto especial de "transferncia"). Devem ser usados: - botes para a navegao - botes de comando apenas para aces importantes, e no todo o conjunto de botes disponveis. Para seleccionar itens numa tabela ou lista: - as linhas ou colunas devem ser ampliadas para facilitar a seleco apontando com um dedo - deve ser fornecida uma linha ou coluna fixa que marca o item
7

Projecto em curso com o apoio de:

Com a colaborao de:

Interaco

seleccionado. No devem ser utilizadas rvores para apresentar hierarquias convencionais, mesmo que sejam ampliadas. O modo de visualizao deve ser escolhido de acordo com a tarefa realizada e com consideraes sobre facilidade de uso e velocidade, especialmente nos ecrs tcteis com operao por dedo. Deve ser usada uma interface ponto-e-clique simples, com botes grandes. No deve ser usado: arrastar, mouse-over, duplo clique, scroll bars, menus dropdown, janelas mltiplas. O duplo clique, s deve ser utilizado em funcionalidades mais especificas e avanadas, devendo ser evitada a sua banalizao em contextos mais intuitivos e user-friendly. A marca de cursor deve ser desligada, pois os utilizadores observam todo o ecr e no o cursor. O layout do teclado deve ser comutvel ou mesmo personalizvel. O layout padro deve ser usado quando as pessoas esto acostumadas com ele e encontram os elementos chave mais rapidamente com esse layout. A introduo de texto deve ser reduzida ao mnimo ou totalmente eliminada em ecrs tcteis. Convencionalmente, usado um layout de 3 por 3 para teclados numricos. O layout de telefone deve ser utilizado para utilizadores inexperientes e o layout de teclado quando as pessoas esto acostumadas com ele ou o preferem, ou quando o layout de telefone poder causar conflitos. Os ecrs tcteis no devem ser usados para a introduo intensiva de valores numricos. A introduo de dados atravs da seleco um mtodo de entrada importante para ecrs tcteis: - a seleco pode percorrer os itens usando botes, - a seleco pode ficar fixa, e os itens serem movidos na rea de seleco usando botes. No devem ser usadas scrollbars convencionais, mesmo que sejam ampliadas (podem ser usados botes simples). prefervel que os botes sejam grandes do que demasiado pequenos. No deve ser utilizado scrolling no prprio ecr, apenas para dados (mesmo aqui prefervel no ser utilizado). O scrolling deve ser substitudo por controlos que exibem apenas uma parte dos itens ou funes no ecr. Nos ecrs tcteis que usam estilete podem ser usados gestos simples, que sejam fceis de lembrar, para as funes mais usadas. Os botes devem dar algum tipo de feedback quanto ao seu estado (ligado/desligado, activo/inactivo, activado), por exemplo, feedback visual (realce, efeito 3D) e feedback sonoro. Quando as consequncias de uma seleco forem destrutivas ou difceis de desfazer, deve ser feito um pedido de confirmao aps a seleco

8 Projecto em curso com o apoio de:

Com a colaborao de:

cones

Utilizar cones familiares para que os utilizadores os reconheam facilmente. Sempre que os cones sejam relativamente abstractos, os utilizadores podero ficar frustrados se tiverem dificuldade em identificar as funcionalidades pretendidas. Assegurar uma elevada visibilidade dos cones. Tendo a preocupao que o ecr no fique demasiado congestionado, deve ser considerada a possibilidade de complementar os cones com etiquetas ou outras dicas em forma de texto. Um ecr demasiado preenchido dificulta a seleco pelo utilizador. Proporcionar a possibilidade de os utilizadores personalizarem o ecr - os esquemas de cores, padres, etc

9 Projecto em curso com o apoio de:

Com a colaborao de:

Recomendaes de usabilidade para aplicaes/websites em iPad

Problema Assimetria Leitura-toque (texto suficientemente grande para ser lido demasiado pequeno para tocar) Os conflitos entre os controlos fornecidos pelo site e os controlos previstos no iPad Diferenas de resoluo: tamanhos de letra configurados para visualizao em telemveis so minsculos no iPad, obrigando os utilizadores a ampliar para ler o contedo da pgina Em geral os links Web so demasiado pequenos para tocar de um modo fivel e os tamanhos de letra podem ser inadequados para uma leitura confortvel O modelo mental adoptado nas revistas em papel no adequado para uma fcil utilizao Modelar uma aplicao diferente A existncia de reas-alvo grandes aumenta a possibilidade de ocorrncia de toques acidentais Num iPad fcil tocar acidentalmente em algo e difcil regressar ao que os utilizadores estavam a fazer antes do toque acidental Numa pgina no evidente que um elemento que reage ao toque seja suposto ser tocado Recomendao Criar zonas de toque grandes Conceber duas verses de cada website: um optimizado para desktops e um optimizado para iPad A escolha entre modo de visualizao para telemvel ou pgina completa deve ser deixada ao utilizador. Se o modo de visualizao para telemvel o utilizado por defeito, deve estar disponvel um link para a pgina completa, facilmente identificvel na pgina inicial. Criar sites especficos para iPad Abandonar o modelo de revista em papel e, no final do artigo, criar links explcitos para outros artigos da mesma seco. Introduzir manchetes clicveis. Criar links para regressar descrio da seco ou ao ndice Ao modelar outras aplicaes, as novas aplicaes devem ser coerentes com a interaco existente na aplicao modelo Aumentar a rea de toque sempre que existirem vrios tipos de contedos associados mesma aco (por exemplo, imagens, vdeo, texto ou outros elementos), excepto quando a aco irreversvel Incluir: um boto de retorno em todas as pginas, uma pgina inicial e uma caixa de pesquisa Uma rea-alvo deve ter o aspecto de que reage ao toque

10 Projecto em curso com o apoio de:

Com a colaborao de:

Problema

O toque menos preciso do que o clique do rato

A existncia de hotspots ocultos pode facilmente ser ignorada pela maioria dos utilizadores Utilizao de hiperlinks: porque aumentam a complexidade global da aplicao, bem como a probabilidade de activaes acidentais A tab bar do iPad uma barra estreita na parte inferior do ecr e os utilizadores tm dificuldade em encontr-la Muitas aplicaes tm um aspecto completamente diferente em modo de paisagem e de retrato (orientao horizontal e vertical)

Recomendao Criar tolerncia aos erros: - Para aces repetitivas comuns: permitir que os utilizadores toquem em qualquer parte do lado direito (ou esquerdo) do ecr ao invs de exigir que batam numa seta ou noutro tipo de controlo. Especificamente, para virar a pgina: permitir que os utilizadores toquem nas laterais do ecr e tambm que arrastem (tecnicamente, o flick). A utilizao exclusiva do arrastar uma soluo sub-ptima, porque o arrastar exige mais esforo fsico do que o toque. - Aumentar a rea de toque: se um texto e uma imagem esto associados com um link, ambos devem poder ser usados para seleccionar o link. Para ajudar os utilizadores a descobrir os controlos, considerar exibi-los inicialmente, quando os utilizadores comearem a examinar o contedo, esvanecendo-os depois, progressivamente Se forem usados hiperlinks, absolutamente vital a existncia de um boto de retorno A tab bar deve ser construda dentro da prpria pgina, porque mais provvel de ser notada pelos utilizadores. Todas as funcionalidades devem ser acessveis em qualquer das orientaes, mesmo que o layout varie. A aplicao deve ser to consistente quanto possvel: se em modo retrato for exibido um popover de navegao esquerda, no deve ser deslocado para a direita no modo paisagem, ou vice-versa As aplicaes devem usar os gestos mais familiares para as aces mais frequentes. A operao deve restringir-se a alguns gestos mais familiares (tocar, arrastar, flicking). Deve ser desenvolvida alguma redundncia na interface e permitido que os utilizadores acedam a todos os recursos da aplicao, mesmo que no utilizem gestos especiais. Por defeito utilizar tamanho de letra grande
11

Os gestos so muito complexos, pelo que usar muitos gestos afecta a capacidade do utilizador de os memorizar

Muitas aplicaes iPad dividem o ecr em subseces menores e acabam com um texto pequeno que pouco legvel
Projecto em curso com o apoio de:

Com a colaborao de:

Problema Diviso de informaes relacionadas em diferentes ecrs sobrecarrega a carga de memria de trabalho dos utilizadores, porque eles no podem ver toda a informao necessria ao mesmo tempo Separar a rea de trabalho em vrios painis pode fragmentar o fluxo de trabalho

Recomendao Concentrar no menor nmero de ecrs possvel as informaes que o utilizador precisa num dado instante As aplicaes devem agrupar os campos que esto relacionados

Referncias
Budiu, R. & Nielsen, J, 2010. Usability of iPad Apps and Websites First Research Findings. http://www.nngroup.com/reports/mobile/ipad/ipadusability.pdf Haywood, A. & Reynolds, R., 2008. Serco Experience Lab - Usability guidelines Touchscreens. http:// www.serco.com/experiencelab Waloszek, G., 2000. Interaction Design Guide for Touchscreen Applications. http://www.sapdesignguild.org/resources/tsdesigngl/TSDesignGL.pdf

12 Projecto em curso com o apoio de: