Princípios de design de interface Fábio Fernandes Forma acompanha a função A forma ou aparência de um objeto surge de seu propósito, de sua razão de ser. As formas baseadas em suas funções são visualmente agradáveis porque contêm integridade. Visibilidade Refere-se à facilidade do usuário em localizar funções no aplicativo ou web site. Apresentar simultaneamente muitos elementos ao usuário pode resultar em uma visibilidade fraca. Mapeamento Refere-se ao relacionamento entre um controle, o item afetado por ele e o resultado final, quando o controle é acionado. Mapeamento natural é a forte associação do controle com o resultado da ação. Feedback Refere-se à informação que o sistema proporciona ao usuário, indicando o status da ação aplicada. Pode ser auditivo ou visual: Affordance - Alteração do ícone que representa o cursor é um exemplo de feedback visual. - O som emitido ao clicar com o mouse é um exemplo de feedback auditivo. Refere-se à percepção da funcionalidade de um objeto, baseada em seu conhecimento cultural. Lei de Fitt A lei de Fitt define que o tempo para alcançar um certo objeto depende do tamanho e da distância até ele. Botões maiores são localizados mais facilmente do que botões menores. Whisenand e Emurian, da Universidade Maryland, sugerem que a posição do objeto em relação a atual posição do cursor também é importante. 1
Consistência Refere-se à habilidade da interface em permitir que o usuário faça algo sempre da mesma forma. Ajuda os usuários novatos a sentirem-se mais confortáveis. Programador e designer devem concordar em look antes de começar a fase de desenvolvimento (programação). Capte a atenção de seu usuário! Um bom design de interface aplica diversas técnicas, já comprovadas como efetivas, para atrair a atenção do usuário. Como por exemplo, diferentes parâmetros de objetos: 2 Tamanho Forma Tonalidade Cor Grande para pequeno Irregular para regular Escuro para claro Cor para preto & branco
Processo de desenvolvimento do projeto Fases: 1. Planejamento do projeto 2. Definição de requerimentos 3
3. Design do sistema 4. Implementação 4
5. Integração e teste Clique no link abaixo para assistir ao vídeo no formato QuickTime. O seu objetivo ao assistir o vídeo é contar quantas vezes o time de camisa branca lançará a bola ao chão antes de fazer um passe. http://viscog.beckman.uiuc.edu/grafs/demos/25.html Observação à equipe de criação: Eu gostaria que após o vídeo, os alunos vissem uma página em que a seguinte pergunta será feita: Você reparou a pessoa com um guarda chuvas? Abaixo da pergunta terão dois links: Assistir ao vídeo novamente, Ver conclusão. Conclusão: Mesmo quando as coisas são óbvias em uma interface, se o usuário não estiver esperando por isso, ele não notará. 5
Interface: Ambiente de interação entre homem e máquina, em qualquer sistema de informática ou automação. O projeto de uma interface eficiente, fácil de manusear e amigável (userfriendly) é um fator importante no planejamento de qualquer sistema de comunicação não presencial. Interativo: Muitos tipos diferentes de materiais didáticos são chamados de interativos. Alguns deles são interativos apenas no sentido de oferecerem pistas alternativas de navegação. Outros são interativos no sentido de corrigir os erros do aluno e oferecerem novas explicações e oportunidades de prática. Há também os que são interativos no sentido de adaptação ao comportamento do aluno ou usuário. Interatividade: É a característica resultante da interligação de dois ou mais sistemas, de forma que as ações de um resultam em reações do outro, que por sua vez, resultam em novas ações do primeiro e assim por diante. O grau ou profundidade desse processo de interação pode ser bastante diferente em sistemas diferentes. Conecte-se Bruce Tognazzini - um dos primeiros designers de interfaces na Apple oferece, nesse site, uma séries de artigos sobre design de interface: http://www.asktog.com/menus/designmenu.html Guia official da Microsoft para desenvolvedores e designers de interface: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/welcome.asp Guia de Interface Interativa da Apple: http://developer.apple.com/documentation/userexperience/conceptual/osxhiguidelines/ 6 Palavras-chaves Design interativo Interatividade Desenvolvimento de projeto Interface Internet
- Guia official da Microsoft para desenvolvedores e designers de interface. http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ welcome.asp - Guia de Interface Interativa da Apple http://developer.apple.com/documentation/userexperience/conceptual/ OSXHIGuidelines/ - Silver, Marc & Proano, Julio (2004). Exploring Interface Design. Delmar Learning. 7
8