Do tutorial, temos:

Apesar do software apresentar uma vasta gama de tutoriais aparentemente organizados por níveis, o mesmo deixa a desejar quanto ao tema tratado em cada tutorial. Ao invés de nomeá-los como “tutorial1″, “tutorial2″, “tutorial3″ e “tutorial4″, o software poderia informar de forma clara quais os passos/métodos ensinados em cada um dos tutoriais. Isso tornaria mais fácil o retorno direto do usuário a um ponto específico do aprendizado.

Outro problema encontrado nos tutoriais é a baixa visibilidade dos botões de navegação do tipo “back”, “next” e “exit”. Usualmente, estes botões se encontram na região central da tela de modo a garantir que o usuário irá visualiza-lo e poderá, ocasionalmente, avançar ou retroceder nos passos do tutorial.

O ponto mais crítico da análise do tutorial refere-se justamente a essa funcionalidade de avançar ou retroceder nos passos do tutorial. O sistema exige, obrigatoriamente, que o usuário execute todas as iterações “corretas” com o software para que ele possa avançar nas instruções. Ou seja, no caso do “tutorial1″, por exemplo, se o usuário desejar rever o passo número 39 de 40, ele é obrigado a executar todos os passos corretamente para que tenha acesso liberado ao passo 39. Assim sendo, ele é obrigado a rever todas as animações e passos redundantes em seu aprendizado para que possa atingir seu objetivo. Essa é uma característica bastante grave da interface dos tutoriais.

Alguns outros detalhes, como janelas de instruções aparecendo em lugares aleatórios da tela, fazem com que o tutorial perca o seu padrão e deixe o usuário confuso. Outra questão importante a ser levada em consideração é a falta de feedback ao usuário quando o mesmo executa algum passo errado durante o tutorial. O sistema simplesmente o informa que há um erro, sem, contudo, informar que ação executada (ou não executada porém necessária) gerou a situação.

Além de tudo isso, o sistema não oferece a capacidade de prosseguir no tutorial somente com a utilização do teclado. O mouse é obrigatório.

Da disposição geral das telas e botões:

Um dos grandes pontos a favor do software ‘Alice’ é a sua disposição geral de ícones, botões, telas, ações e etc. A maioria deles atende aos requisitos gerais de funcionalidade e usabilidade. Contudo, como nem tudo é perfeito, até mesmo a melhor de suas características apresenta ressalvas.

A tela que apresenta a pré-visualização do “world” que o usuário está desenvolvendo possui botões um tanto quanto confusos. A navegação disponibilizada ao usuário dentro desta tela é feita a partir de botões com funcionalidades aparentemente ambíguas, como, por exemplo “drive the camera left” e “move the camera left”. Em um contexto diferente, ambas as ações poderiam ser consideradas as mesmas.

Alice é um software promissor. Entretanto, como ocorre com qualquer aplicação em desenvolvimento, ao observá-lo pela óptica do usuário, há sempre como dar um passo além no caminho de tornar seu uso mais eficiente e agradável.

Grupo George e a Rapaziada

“One of the design goals was when you saw it you wanted to lick it.”, Steve Jobs
Pelo visto o projeto foi bem sucedido e o sistema gerado é, mundialmente famoso, pela sua proposta revolucionária de Design.

As principais características, alegadas pela própria Apple, da aplicação de sua nova interface de usuário são:

- Facilidade de aprendizado de novas aplicações

Esta facilidade deriva de uma característica um tanto quanto curiosa e específica do sistema operacional da Apple. Após a inicialização de qualquer aplicação, a barra superior do sistema se modifica à critério da aplicação aberta. Além disso, um determinado padrão de ‘botões/ação’ é seguido à rigor. Ou seja, utiliza-se da memorabilidade do usuário para fazer com que qualquer tipo de aplicação seja facilmente utilizada.

- Rapidez na execução de tarefas

(continua ….)

- Tela de apresentação inicial: A tela de apresentação inicial do site é um ponto de bastante discussão . Muitos acham que o local de apresentação do botão de acesso é inadequado e a página inicial não é atrativa. Alguma alterações simples estão sendo propostas.

- Disposição do contrato: Na tela de aceitação do contrato para uso do sistema , o link para leitura do contrato foi alterado de modo a abrir em uma frame na mesma página , melhorando a forma de apresentação e tirando a necessidade do botão “Voltar” encontrado no formato atual.

- Ausência de Confirmação: No modulo especialista do sistema , onde os fitopatologistas colocam as informações no banco de dados , não há confirmação de exclusão dos dados . Tal alteração foi considerada de prioridade 1. É um problema aparentemente simples mas que foge bastante dos padrões utilizados.

- Listagem de Doenças: A listagem das doença não aparece em ordem alfabética , o que dificulta bastante na consulta da desordem desejada.

Os fatores listados acimas são alguns dentre vários problemas apresentados pelo site e que já estão sendo corrigidos . Foram problemas simples , que não demandam muito trabalho para correção , mas que fazem uma grande diferença no sistema final. Além disso , uma análise mais rigorosa da interface na fase de implementação do projeto poderia ter evitado muitos desses erros , mostrando a importância dos conceitos aprendidos na disciplina de MC750.

Já fazem uns 2 anos que venho me envolvendo bastante com o desenvolvimento de web sites e tenho que admitir que nunca levei em consideração a questão da acessibilidade. Somente depois do contato com a matéria IHC que comecei a reparar mais nisso. Neste post não vou falar a respeito de nada que já passei, e sim de um assunto que me interessou eu fui atras. Estruturas de Web Sites acessíveis.

Scrolling:

Não basta apenas ter um site acessível, você deve ter um layout acessível também, para que isso seja possível você deve evitar ao máximo dispor de um scroll muito longo, caso você tenha muito conteúdo em uma pagina só e o scroll é inevitável limite seu scroll a uma dimensão.

So uma observação sobre a usabilidade do scroll, este tópico eh um tanto quanto questionável, pois no vídeo Don’t make me click eh sugerido um sistema de busca que mostra todos os resultados em uma pagina só, porem acredito que como eu existem outras pessoas que preferem o clássico botão de Próximo, parece que você tem mais controle, sei la!

Pular menu lateral:

Para um usuário comum, a distribuição de um site de maneira que exista um menu lateral na esquerda e o conteúdo na direita em termos de usabilidade seria ideal. Porem quando utilizamos um leitor de telas geralmente ele começa por esse menu, o que não seria muito eficiente para quem gostaria de ir direto a uma noticia. Por isso, em um site acessível deve-se colocar um link invisível que pula esse menu e leva o usuário direto ao conteúdo.

Navegação pelo teclado:

Um usuário deve ser capaz de navegar em um site utilizando apenas o teclado, por padrão temos que a tecla TAB nos leva de campo em campo em um web site, porem para deixarmos esse processo mais eficiente pode-se atrelar algumas teclas a algumas opções do site.

Formulários:

Todo campo de um formulário deve ter a TAG label preenchida corretamente para associar um título ao campo apropriado, sendo que todo título deve vir em cima do campo a ser preenchido e não do lado direito , isso faz com o leitor de tela leia o título do campo que o usuário esta corretamente.

No caso de caixas de drop-down, assegure-se de que o usuário pode selecionar um item tanto pelo mouse quanto pelo teclado, e que pelo amor de deus exista um botão de OK ao lado da caixa, e não somente a caixa sensível a clique.

Veja aqui o exemplo do formulário

Estes são alguns requisitos para deixar seu site um pouco mais acessível.

Bruno Milare’

fonte: http://www.at.ufl.edu/_archive/accessibility_cd/AccWeb/structure.html

Uma pessoa que pegasse um controle sabia rapidamente para que serviam o direcional e os botões disponíveis. Essa interface simples tornava os jogos fáceis de serem aprendidos e acessíveis a um amplo público, porém ajudava a limitar as possibilidades de interação entre o usuário e o game (a maior limitação era a de poder de processamento).

Console Hi-Top Game. Possuía apenas 4 botões e um direcional

Com o passar do tempo e o aumento do poder dos processadores, os consoles passaram a ficar mais poderosos. Isso possibilitou que os games se tornassem mais complexos e apresentassem maiores possibilidades de interação com os usuários. Os controles começaram então a apresentar mais botões para fornecer uma interface compatível que fizesse a ligação entre o usuário e os games.

O aumento da complexidade dos games e dos controles aumentou a curva de aprendizado do usuário, fazendo com que fosse necessário dedicar um tempo maior em um jogo para aprender como jogá-lo. Isso afastou o público mais casual, que desejava uma interface mais simples e direta.

Controles do Playstation3 e Xbox360. Ambos possuem 8 botões e 3 direcionais.

A atual geração de consoles de videogames apresenta exemplos fortes do quão complexo se tornaram os controles. Ambos os controles do Playstation 3 e do Xbox360 apresentam 8 botões e 3 direcionais(!!!). Tamanha complexidade assusta e afasta muitos jogadores desses consoles.

Percebendo essa fuga de público dos videogames, a Nintendo resolveu adotar uma abordagem diferente da dos concorrentes (Sony e Microsoft).

O Nintendo Wii oferece uma interface muito mais simples e intuitiva ao público através de um controle com sensor de movimento. Essa simplificação do controle atraiu mais jogadores casuais e fez com que o Nintendo Wii assumisse a liderança nas vendas de consoles na atual geração.

WiiMote, o controle com sensor de movimentos do Nintendo Wii

Percebendo que estavam perdendo nas vendas para a Nintendo, Sony e Microsoft correram atrás para apresentarem seus controles com sensores de movimentos.

A Sony adotou uma abordagem parecida com a da Nintendo, e apresentou um controle (ainda sem nome) que é rastreado com o uso de uma câmera de vídeo conectada ao console. O controle promete oferecer uma precisão de movimentos maior que a do Wii.

A Microsoft apresentou um controle com uma interface ainda mais simplificada que a de seus concorrentes. Temporariamente chamado de Project Natal, trata-se de uma interface que aboliu totalmente o uso do controle. Mais simples do que isso, acredito ser impossível.

Essa tendência dos desenvolvedores de adotarem controles mais simplificados vai de acordo com os estudos desenvolvidos em Interfaces Homem-Computador.  As interfaces devem ser simples e intuitivas, de forma que o usuário saiba utilizá-las sem que precise de muito tempo para aprendê-las. Porém é preciso tomar cuidado para não simplificá-las demais, de forma que não se possa fornecer feedback eficientemente aos usuários ou que as tornem pouco atrativas aos usuários mais experientes.

Acho  interessante observar que a matéria aprendida na sala de aula não é somente aplicada na área de Computação, mas em muitos aspectos do cotidiano que nem percebemos. Mesmo porque, quanto mais eficiente é a interface, menos ela é notada.

Abraços,

Otávio “Tito” Becker

]]> http://grupogeorge.wordpress.com/2009/07/02/evolucao-dos-controles-de-videogames/feed/ 1 tyttus Console Hi-Top Game Controles PS3 e Xbox360 WiiMote http://grupogeorge.wordpress.com/2009/06/30/a-boa-forma/ http://grupogeorge.wordpress.com/2009/06/30/a-boa-forma/#comments Tue, 30 Jun 2009 06:00:05 +0000 Diego Cardoso http://grupogeorge.wordpress.com/?p=52 ]]> Meu primeiro contato com IHC foi um pouco anterior ao curso de MC750 deste semestre. Ele surgiu a partir de uma oportunidade que recebi para participar de um projeto relacionado à programação de celulares e PDAs. Em 2006, apenas no terceiro semestre de Engenharia de Computação, meus conhecimentos (ou a falta deles) sobre as tecnologias “top” me impediriam de participar como desenvolvedor. Coube a mim uma atividade, de certa forma, paralela.

IHC – ou HCI, como me foi apresentado a partir do acrônimo inglês – aplicada à dispositivos móveis foi o foco. Meu objetivo era pesquisar e formular “regras”, ou as famosas guidelines, para os programadores da equipe.

Fui guiado pela professora Cecília Baranauskas nessa incursão e, aos poucos, percebi que interação ia muito além da interface gráfica. Vi que havia uma infinidade de outros aspectos a serem analisados além da simples disposição de objetos e cores. Também, me atraiu a intensa interdisciplinaridade da área, sobretudo, nos pontos de convergência com a Psicologia.

E exatamente na intersecção destes elementos citados que eu encontrei uma área bastante interessante, sobre a qual tenho muito pouco conhecimento, mas que gostaria de compartilhar aqui: a disposição de objetos e sua percepção.

Gestalt é o nome de uma escola teórica da Psicologia. Á grosso modo, ela contraria a lógica matemática da soma e defende que o todo é mais que a soma das partes. Ou, também, defende que o significado do conjunto é mais rico que a soma dos significados das partes. É uma teoria interessante – e o leitor está convidado a buscar mais sobre – mas não é essencialmente este o tema.

A filosofia Gestalt tem aplicação no universo do design, constituindo uma teoria sobre a percepção visual. Ela possui definições formais e sólidas que fogem ao escopo deste post. Ater-me-ei somente a poucos aspectos, mostrando alguns exemplos práticos.

A propósito, Gestalt é uma palavra do alemão que não possui tradução exata para o nosso idioma tupiniquim. Entre as muitas possibilidades, ela pode ser entendida como “a forma do todo” ou “forma global”.

Você vê o quadrado abaixo?

E estas colunas abaixo?

Pois é.

Aquilo não é um quadrado…e nem são 4 colunas!. São apenas um conjunto de bolinhas que o seu cérebro agrupou.

Levando um grau além, nem mesmo essas letras são letras. Elas são um conjunto de pixels que a sua percepção transforma em letras.

Esse é o Princípio da Proximidade. Nosso cérebro automaticamente ordena e organiza objetos próximos de modo a formar um conjunto.

Essa ordenação também se dá no plano das semelhanças entre objetos.

Na figura acima, as chances são grandes de você ter identificado 3 linhas (e não 4 colunas), experimentando, assim, o Princípio da Semelhança.

E esta estrela abaixo?

Como você já deve estar atento, também não é uma estrela: é apenas um conjunto de linhas desconexas. Nosso cérebro completa as linhas que faltam, atendendo ao Princípio de Fechamento.

Outro exemplo bastante conhecido é a figura abaixo:

O que você vê? Uma taça ou duas pessoas?

Isso vai depender das cores que o seu cérebro atribuir ao plano de fundo e ao objeto. Este é o Princípio do Objeto vs. Plano de Fundo. Nosso cérebro colocará em primeiro plano certos objetos de acordo com suas distribuições e cores.

Existem ainda outros princípios. Mas, de modo geral, o que se observa são os fenômenos da Tendência à Estruturação e da Pregnância, ou Boa Forma. Nossa percepção tenta organizar ou estruturar os muitos elementos em conjuntos e, também, buscar a simplicidade, regularidade e equilíbrio nestes conjuntos – em outras palavras, a boa forma.

Na Web esses conceitos são aplicados com freqüência.

Na página principal do site de notícias G1, por exemplo, é possível distinguir imediatamente os conjuntos de palavras próximas que compõe cada grupo constituindo uma notícia.

Nota-se também como a simetria e alinhamento entre os conjuntos são fatores determinantes para a imediata distinção dos macro-elementos da página.

Na página do Gmail, repare como a alteração na cor do fundo da caixa de login permite distinguir rapidamente o objeto, trazendo-o para o plano frontal.

Outro exemplo, da página Web Major, sobre a utilização dos Princípios da Proximidade e Objeto vs. Plano de Fundo.

Gestalt tem um enorme campo de aplicação no design, não só para web, mas para qualquer item voltado à interação. Está em grande sintonia com o conceito de Usabilidade e seus derivados.

Deixo como sugestão uma busca no Google ou até algo mais aprofundado sobre a Gestalt e sua Teoria de Percepção.

Abraços!

Alguns dos exemplos foram retirados dos sites abaixo. Deixo meu agradecimento aos autores de cada um.
http://www.desenvolvimentoparaweb.com/design/gestalt-aplicado-ao-design-web-parte-1-origem-do-termo-significado-e-utilidade/
http://www.helium.com/items/561057-introduction-to-gestalt-psychology
http://webspace.ship.edu/cgboer/gestalt.html

A nuvem de tag é um item que pode melhorar muito o acesso do usuário, pois combina eficiência de acesso com frequência (itens mais populares aparecem em maior tamanho).

Não devemos vincular o tamanho/frequência de uma tag com a importância dos tópicos relacionados a ela, a nuvem trata  apenas de destacar o foco dos tópicos deste blog. Assim a chance de você encontrar mais rapidamente o que busca é maior.

Vão existir duas categorias, a de Posts Individuais e a do Post em Grupo, assim é possível criar uma distinção clara entre as duas atividades requisitadas, e obviamente facilitando o acesso.

O conteúdo do site também pode ser acessado de acordo com os autores, o motivo desse item é o de facilitar o acesso para avaliação do professor.

Acho que é isso !

Bruno Milare’

Uma coisa que me irrita profundamente é abrir um site em busca de conteúdo rápido e este site estar desenvolvido somente em Flash. Digamos que Flash é o rei da interatividade, tudo se move a cada passada de mouse, tudo muito bacana, muito bonito, mas as coisas acabam ficando não tão legais quando você tem o objetivo de ir diretamente a um conteúdo. Eu acho que a opção de se usar somente flash em um website deve ser considerada somente se tiver pouco conteúdo e/ou o público alvo levar bastante em consideração esta interatividade, por exemplo o ramo artístico, caso contrario não vejo nenhum ganho.

De acordo com uma fonte¹, o site da Disney antigamente tinha disponível uma versão em Flash e outra em HTML. Foi feito um teste onde era distribuída uma tarefa simples para um grupo de usuários. No site em Flash somente 16,7% dos usuários conseguiram realizar a tarefa, já no HTML 75% dos participantes chegaram no objetivo proposto.

Flash x HTML

Mesmo assim o Flash se mostrou ser uma tecnologia de destaque, por isso está sendo tão utilizada hoje em dia, é suportada por diversos browsers, tem uma comunidade de desenvolvedores bastante ativa, suporte, etc. Porém deve se pensar antes de usá-lo, no caso do projeto Conteúdos Digitais, cujo faço parte desde o meio do ano passado, o Flash tem sido um salvador, pois podemos desenvolver jogos, que exigem muita interatividade e que rodam apenas necessitando de um browser com suporte a flash, porém nem tudo é perfeito.

Pode-se ver que algumas heurísticas são facilmente feridas em Flash, se não tiverem tratamento especial, por exemplo:

Reconhecimento ao invés de relembrança: links de site em Flash levam o usuário a outro frame, quando o mesmo retornar para a tela anterior não haverá nenhuma indicação de que aquele link já foi visitado, como acontece em HTML (isto pode ser feito com tratamento por código).

Flexibilidade e eficiência de uso: o usuário novato pode muitas vezes tentar utilizar a seta do navegador para tentar voltar a tela anterior de um site Flash, e descobrirá de uma maneira ingrata que isso não funciona.

Já foi discutido entre os desenvolvedores do projeto recentemente e também nos workshops do ano passado a dificuldade de se implementar uma acessibilidade eficiente em Flash, existem algumas maneiras, porém a maioria ainda funciona de maneira precária, como por exemplo o uso de um leitor de telas, onde e possível fazer ele funcionar porém você tem que especificar o que vai ser dito, diferente de uma página HTML. Outro caso discutido ultimamente foi o gerenciador de foco do Flash, para disponibilizar a manipulação pelo teclado, este se mostrou bastante ineficiente, porém quebrando um pouco a cabeça há de funcionar =P.

Bruno Milaré.

Fontes:

¹ – http://fatorw.com/internet/usabilidade/flash-inimigo-da-usabilidade/

A idéia central do Fences, como o nome sugere, é criar áreas no Desktop específicas para certos tipos de ícones. Por exemplo, “Últimos downloads” ou “Textos pra ler”. E cada uma dessas “mini-áreas” se comporta como um desktop separado, com ordenação por nome entre outras funcionalidades.

Além disso, o que apresentou mais utilidade para mim foi a possibilidade de esconder ou minimizar cada uma das fences, deixando o Desktop com uma cara muito mais limpa. Na verdade, isso só joga a bagunça pra debaixo do tapete, mas o faz de uma maneira em que você sempre sabe em que borda do tapete deve buscar aquele mp3 que você baixou anteontem.

Enfim, se uma imagem vale mais que mil palavras, um vídeo deve valer mais que mil imagens. Dêem uma olhada no Fences em ação!

À propósito, o software é produzido pela já conhecida Stardock e você pode conferir aqui.

Tentamos fazer algumas analogias aos conceitos importantes vistos até então na disciplina, como a importância do feedback e learnability, adaptando-os de forma curiosa às situações diárias.

Link para o vídeo