Quais são os erros a evitar quando se está a desenhar interfaces de aplicações? Tiago Simões, OutSystems Expert Developer partilha com os leitores do TeK as melhores práticas num artigo que, pela sua extensão, dividimos em três partes.
Depois de publicarmos os passos 1 e 2 do texto de Tiago Simões, e os passos 3 e 4, dedicados aos protótipos e à metodologia Agile, publicamos agora os últimos dois pontos deste artigo, assim como a conclusão.
Design e Usabilidade de aplicações
6 passos para criar melhores interfaces de utilizadores nas aplicações web(Parte II)
(Continuação...)
Por Tiago Simões (*)
5: Testar, testar, testar
Assistir a um teste de usabilidade é a melhor forma de aumentar os seus conhecimentos sobre usabilidade. A maioria dos especialistas afirma que os testes de usabilidade são uma óptima forma de compreender quais são os piores problemas de usabilidade da sua aplicação. O que tenho descoberto é que estes testes são especialmente úteis para o ajudar a chegar a pequenas alterações "mágicas" que corrigem os problemas identificados. Vamos olhar agora para as diferentes formas de realizar testes de usabilidade:
Testes de "corredor"
Um teste de "corredor" acontece quando agarra em alguém que está a passar no corredor e lhe pede para testar a interface que acabou de criar. Atribui-lhes uma tarefa e observa-os a tentar realizar essa tarefa. Pergunta-lhes sobre o que estão a pensar e limita-se a acenar ou a murmurar hum-hums como se fosse um psicólogo. Não pode ajudá-los (seja paciente, podem demorar mais tempo ou fazer de forma diferente daquela que faria), explicar ou pedir desculpa. Só precisa de ver o que fazem e tentar que digam aquilo em que pensam enquanto desenvolvem a tarefa que lhes atribuiu.
Testes de usabilidade baratos e ao vivo
Já participou num teste de usabilidade ao vivo? São testes onde algumas pessoas estão sentadas numa sala e podem ver outra pessoa, numa sala diferente, a tentar completar uma tarefa num computador. Se alguma vez criou uma interface, um teste de usabilidade ao vivo é uma das coisas mais espectaculares a que pode assistir. Acresce que são simples e a sua realização tem custos baixos. Aqui fica uma receita:
Antes do dia do testeAnote algumas tarefas para os utilizadores completarem;Convide três utilizadores para uma manhã (50 minutos cada com 10 minutos de intervalo entre eles);Reserve duas salas no seu escritório;Convide programadores e responsáveis da empresa para assistirem aos testes.Durante o testeSente-se ao lado dos utilizadores enquanto estes tentam completar as tarefas;Ajude-os a pensar em voz alta;Os testes devem ser transmitidos em directo para uma sala com os programadores e responsáveis da empresa.Depois do testeFaça uma reunião de wrap-up logo a seguir, com todos os que assistiram ao teste;Seleccione os 5 problemas principais;Conclua qual o mínimo que poderia ter sido feito para ultrapassá-los;Repita este processo um mês depois.Os testes de usabilidade apenas lhe tomam um dia por mês. Se quiser a receita completa sobre como realizar estes testes, a bíblia para testes de usabilidade de baixo custo, chama-se Rocket Surgery Made Easy - The DIY Guide to Finding and Fixing Usability Problems de Steve Krug (autor de outro livro, Don't Make Me Think, igualmente bom).
Laboratório de usabilidade CodeSyntax. Os testes de usabilidade permitem que descubra os problemas de usabilidade mais graves das suas aplicações.
Um dos efeitos colaterais que gosto nestes testes é que a equipa inteira irá concordar com os problemas, evitando as reuniões longas e as discussões acaloradas permitindo-nos concentrar no mais importante: as soluções - são normalmente correcções de baixo custo - serão óbvias para todos, a equipa ficará alinhada e a correr na mesma direcção para criar melhores aplicações.
6: Melhorar a aparência
Com todas estas dicas, será agora certamente capaz de criar interfaces com melhor usabilidade. E que tal dar-lhes uma boa aparência? Se acha que não tem habilidades de designer, tenho uma boa notícia: não precisa delas. A única coisa de que precisa é de seguir as CRAP design rules: Contraste, Repetição, Alinhamento e Proximidade.
(E aqui vai uma dica para principiantes quanto ao alinhamento: evitar alinhar ao centro a menos que seja um designer experiente).
Se pensar bem, essas regras estão relacionadas com os custos de localização que referi anteriormente: o contraste é o que faz saltar os olhos dos utilizadores entre focos de atenção, proximidade e alinhamento é o que vai utilizar para agrupar a informação. Quanto à repetição, o melhor é usar um guia de estilos para manter a consistência - Vou falar mais sobre este assunto na próxima secção.
Se quer saber mais sobre como aplicar as CRAP design rules, leia The Non-Designer's Design Book, de Robin Williams (a escritora, não o actor de Hollywood).
Usabilidade em Aplicações Empresariais
Na OutSystems, temos vindo a ajudar os programadores a criar aplicações web empresariais nos últimos 10 anos. Por isso, temos consciência de que a importância da usabilidade é subestimada no meio empresarial. No entanto, a Agile Platform da OutSystems tem sido frequentemente usada para criar aplicações que substituem ou ampliam grandes e onerosos projectos já existentes mas que não estavam a ser usados porque os seus interfaces eram demasiado complexos.
Qual é o segredo dentro da Agile Platform, que ajudou a criar aplicações com melhores interfaces de utilizador?
Fornece uma linguagem de alto nível, permitindo aos programadores concentrarem-se mais nos Interfaces dos Utilizadores e nos problemas do negócio que necessitam ser resolvidos, e menos em coisas técnicas de mais baixo nível. Monitorização, segurança, escalabilidade e desempenho são todos já contemplados na plataforma de modo a que não seja necessário nenhum esforço extra. Um cenário comum é utilizar a Agile Platform para criar um protótipo de trabalho para obter feedback e mais user stories em apenas alguns dias. Depois, os utilizadores vão perceber que este protótipo não é realmente um protótipo, mas uma aplicação empresarial totalmente funcional, sólida, que pode crescer sem problemas.É um bom complemento para metodologias ágeis. Como as aplicações criadas com a Agile Platform da OutSystems permanecem fáceis de mudar, sprints de uma ou duas semanas são muito adequados para obter feedback e reprioritizar o trabalho. A Embedded Change Technology existente na plataforma permite aos utilizadores dar feedback na aplicação web em execução, para que os programadores mais tarde sejam capazes de ver o feedback, bem como um screenshot da exacta página e conteúdo onde o utilizador relatou o problema.Inclui um guia de estilo que segue as CRAP design rules e ajuda a reduzir os custos do "caminho do utilizador". Por exemplo, quando um programador cria uma página com uma lista, a filtragem e ordenação são feitas com o AJAX para reduzir os custos de espera. Nestas páginas de listagem, os campos estão alinhados consoante o tipo de dados. Os títulos das páginas usam os dados do utilizador para fazer melhores focos de atenção. A existência de um menu de navegação padrão assegura a consistência e o reconhecimento. Widgets de calendários e campos de auto-preenchimento reduzem os custos de entrada de dados, e uma maneira de dar feedback para utilizadores está também incluída. Como as aplicações têm bom aspecto de raiz, os programadores não necessitam de se preocupar com o estilo e estas vão ter uma aparência consistente em toda a empresa.
O guia de estilos da Agile Platform da OutSystems ajuda a criar melhores interfaces de utilizador para as aplicações web da empresa.
Como estas aplicações são fáceis de usar, os investimentos em documentação e formação do pessoal são muito reduzidos. Um bom interface numa aplicação faz com que esta seja adoptada de forma mais rápida e ampla pelos utilizadores, resultando num maior ROI (Return on Investment). E como os utilizadores vão passar menos tempo a "lutar" contra a interface, terão mais tempo para se concentrar no que é importante para que suas empresas.
Conclusão
Se não estiver desde já a seguir todas as recomendações acima descritas, tudo isto pode parecer demasiado, mas de facto não é. Estas técnicas são bastante simples e a parte melhor é que pode começar a aplicá-las de forma faseada:
Se estiver a iniciar o desenvolvimento de uma aplicação, recolha em primeiro lugar as user stories;Se estiver a criar uma interface, pense sobre os custos dos "caminhos do utilizador" e faça os testes de usabilidade;Se precisa de uma abordagem de projecto, use as metodologias ágeis;Ao discutir com os utilizadores, comece a desenhar protótipos;Sempre que olhar para uma interface, pense nas regras CRAP;Se estiver a criar aplicações web empresariais, experimente a Agile Platform.
Mas não protele a adopção destas medidas. Verá que quando ficar viciado nestes hábitos saudáveis, irá levar a vida de forma mais tranquila.
E os seus utilizadores também.
(*)OutSystems Expert Developer
Nota da Redacção: Esta é a última parte do artigo de Tiago Simões sobre desenvolvimento de interfaces para a Web. Se quiser pode rever a primeira e a segunda parte.
In:tek.sapo.pt
Depois de publicarmos os passos 1 e 2 do texto de Tiago Simões, e os passos 3 e 4, dedicados aos protótipos e à metodologia Agile, publicamos agora os últimos dois pontos deste artigo, assim como a conclusão.
Design e Usabilidade de aplicações
6 passos para criar melhores interfaces de utilizadores nas aplicações web(Parte II)
(Continuação...)
Por Tiago Simões (*)
5: Testar, testar, testar
Assistir a um teste de usabilidade é a melhor forma de aumentar os seus conhecimentos sobre usabilidade. A maioria dos especialistas afirma que os testes de usabilidade são uma óptima forma de compreender quais são os piores problemas de usabilidade da sua aplicação. O que tenho descoberto é que estes testes são especialmente úteis para o ajudar a chegar a pequenas alterações "mágicas" que corrigem os problemas identificados. Vamos olhar agora para as diferentes formas de realizar testes de usabilidade:
Testes de "corredor"
Um teste de "corredor" acontece quando agarra em alguém que está a passar no corredor e lhe pede para testar a interface que acabou de criar. Atribui-lhes uma tarefa e observa-os a tentar realizar essa tarefa. Pergunta-lhes sobre o que estão a pensar e limita-se a acenar ou a murmurar hum-hums como se fosse um psicólogo. Não pode ajudá-los (seja paciente, podem demorar mais tempo ou fazer de forma diferente daquela que faria), explicar ou pedir desculpa. Só precisa de ver o que fazem e tentar que digam aquilo em que pensam enquanto desenvolvem a tarefa que lhes atribuiu.
Testes de usabilidade baratos e ao vivo
Já participou num teste de usabilidade ao vivo? São testes onde algumas pessoas estão sentadas numa sala e podem ver outra pessoa, numa sala diferente, a tentar completar uma tarefa num computador. Se alguma vez criou uma interface, um teste de usabilidade ao vivo é uma das coisas mais espectaculares a que pode assistir. Acresce que são simples e a sua realização tem custos baixos. Aqui fica uma receita:
Antes do dia do testeAnote algumas tarefas para os utilizadores completarem;Convide três utilizadores para uma manhã (50 minutos cada com 10 minutos de intervalo entre eles);Reserve duas salas no seu escritório;Convide programadores e responsáveis da empresa para assistirem aos testes.Durante o testeSente-se ao lado dos utilizadores enquanto estes tentam completar as tarefas;Ajude-os a pensar em voz alta;Os testes devem ser transmitidos em directo para uma sala com os programadores e responsáveis da empresa.Depois do testeFaça uma reunião de wrap-up logo a seguir, com todos os que assistiram ao teste;Seleccione os 5 problemas principais;Conclua qual o mínimo que poderia ter sido feito para ultrapassá-los;Repita este processo um mês depois.Os testes de usabilidade apenas lhe tomam um dia por mês. Se quiser a receita completa sobre como realizar estes testes, a bíblia para testes de usabilidade de baixo custo, chama-se Rocket Surgery Made Easy - The DIY Guide to Finding and Fixing Usability Problems de Steve Krug (autor de outro livro, Don't Make Me Think, igualmente bom).
Laboratório de usabilidade CodeSyntax. Os testes de usabilidade permitem que descubra os problemas de usabilidade mais graves das suas aplicações.
Um dos efeitos colaterais que gosto nestes testes é que a equipa inteira irá concordar com os problemas, evitando as reuniões longas e as discussões acaloradas permitindo-nos concentrar no mais importante: as soluções - são normalmente correcções de baixo custo - serão óbvias para todos, a equipa ficará alinhada e a correr na mesma direcção para criar melhores aplicações.
6: Melhorar a aparência
Com todas estas dicas, será agora certamente capaz de criar interfaces com melhor usabilidade. E que tal dar-lhes uma boa aparência? Se acha que não tem habilidades de designer, tenho uma boa notícia: não precisa delas. A única coisa de que precisa é de seguir as CRAP design rules: Contraste, Repetição, Alinhamento e Proximidade.
(E aqui vai uma dica para principiantes quanto ao alinhamento: evitar alinhar ao centro a menos que seja um designer experiente).
Se pensar bem, essas regras estão relacionadas com os custos de localização que referi anteriormente: o contraste é o que faz saltar os olhos dos utilizadores entre focos de atenção, proximidade e alinhamento é o que vai utilizar para agrupar a informação. Quanto à repetição, o melhor é usar um guia de estilos para manter a consistência - Vou falar mais sobre este assunto na próxima secção.
Se quer saber mais sobre como aplicar as CRAP design rules, leia The Non-Designer's Design Book, de Robin Williams (a escritora, não o actor de Hollywood).
Usabilidade em Aplicações Empresariais
Na OutSystems, temos vindo a ajudar os programadores a criar aplicações web empresariais nos últimos 10 anos. Por isso, temos consciência de que a importância da usabilidade é subestimada no meio empresarial. No entanto, a Agile Platform da OutSystems tem sido frequentemente usada para criar aplicações que substituem ou ampliam grandes e onerosos projectos já existentes mas que não estavam a ser usados porque os seus interfaces eram demasiado complexos.
Qual é o segredo dentro da Agile Platform, que ajudou a criar aplicações com melhores interfaces de utilizador?
Fornece uma linguagem de alto nível, permitindo aos programadores concentrarem-se mais nos Interfaces dos Utilizadores e nos problemas do negócio que necessitam ser resolvidos, e menos em coisas técnicas de mais baixo nível. Monitorização, segurança, escalabilidade e desempenho são todos já contemplados na plataforma de modo a que não seja necessário nenhum esforço extra. Um cenário comum é utilizar a Agile Platform para criar um protótipo de trabalho para obter feedback e mais user stories em apenas alguns dias. Depois, os utilizadores vão perceber que este protótipo não é realmente um protótipo, mas uma aplicação empresarial totalmente funcional, sólida, que pode crescer sem problemas.É um bom complemento para metodologias ágeis. Como as aplicações criadas com a Agile Platform da OutSystems permanecem fáceis de mudar, sprints de uma ou duas semanas são muito adequados para obter feedback e reprioritizar o trabalho. A Embedded Change Technology existente na plataforma permite aos utilizadores dar feedback na aplicação web em execução, para que os programadores mais tarde sejam capazes de ver o feedback, bem como um screenshot da exacta página e conteúdo onde o utilizador relatou o problema.Inclui um guia de estilo que segue as CRAP design rules e ajuda a reduzir os custos do "caminho do utilizador". Por exemplo, quando um programador cria uma página com uma lista, a filtragem e ordenação são feitas com o AJAX para reduzir os custos de espera. Nestas páginas de listagem, os campos estão alinhados consoante o tipo de dados. Os títulos das páginas usam os dados do utilizador para fazer melhores focos de atenção. A existência de um menu de navegação padrão assegura a consistência e o reconhecimento. Widgets de calendários e campos de auto-preenchimento reduzem os custos de entrada de dados, e uma maneira de dar feedback para utilizadores está também incluída. Como as aplicações têm bom aspecto de raiz, os programadores não necessitam de se preocupar com o estilo e estas vão ter uma aparência consistente em toda a empresa.
O guia de estilos da Agile Platform da OutSystems ajuda a criar melhores interfaces de utilizador para as aplicações web da empresa.
Como estas aplicações são fáceis de usar, os investimentos em documentação e formação do pessoal são muito reduzidos. Um bom interface numa aplicação faz com que esta seja adoptada de forma mais rápida e ampla pelos utilizadores, resultando num maior ROI (Return on Investment). E como os utilizadores vão passar menos tempo a "lutar" contra a interface, terão mais tempo para se concentrar no que é importante para que suas empresas.
Conclusão
Se não estiver desde já a seguir todas as recomendações acima descritas, tudo isto pode parecer demasiado, mas de facto não é. Estas técnicas são bastante simples e a parte melhor é que pode começar a aplicá-las de forma faseada:
Se estiver a iniciar o desenvolvimento de uma aplicação, recolha em primeiro lugar as user stories;Se estiver a criar uma interface, pense sobre os custos dos "caminhos do utilizador" e faça os testes de usabilidade;Se precisa de uma abordagem de projecto, use as metodologias ágeis;Ao discutir com os utilizadores, comece a desenhar protótipos;Sempre que olhar para uma interface, pense nas regras CRAP;Se estiver a criar aplicações web empresariais, experimente a Agile Platform.
Mas não protele a adopção destas medidas. Verá que quando ficar viciado nestes hábitos saudáveis, irá levar a vida de forma mais tranquila.
E os seus utilizadores também.
(*)OutSystems Expert Developer
Nota da Redacção: Esta é a última parte do artigo de Tiago Simões sobre desenvolvimento de interfaces para a Web. Se quiser pode rever a primeira e a segunda parte.
In:tek.sapo.pt