Importância da Interface Gráfica

Por Thais Maia Campos

A importância de um bom código na qualidade final de um software é indiscutível, mas a qualidade de um programa também se baseia em outro aspecto da programação que nem sempre tem a atenção merecida: a interface gráfica, ou interface de usuário.

Assim como o algoritmo, que fica por debaixo dos panos, a interface gráfica tem uma importância fundamental para o sucesso de seu sistema. São inúmeras as técnicas existentes para auxiliar a construção de excelentes softwares, como Design Patterns, POO e POA. Mas quais técnicas auxiliam na elaboração dos desenhos de interfaces gráficas? O que deve ter em mente o programador ou projetista de interface para construir uma boa interface de usuário?

A palavra chave quando falamos em interface de usuário é USABILIDADE. Interfaces gráficas não foram feitas apenas para serem visualmente agradáveis, mas também para facilitarem o trabalho de quem as utiliza. Beleza sem usabilidade pode-se comparar a uma Ferrari sem volante. É linda, porém não vai servir para o propósito ao qual foi feita.

A tarefa do projetista de interface gráfica não é fácil. São cometidos vários equívocos ao desenhar uma nova janela ou página apenas porque não se pensa como um usuário. Se colocar no lugar do usuário é uma tarefa difícil e é o segredo para o sucesso de qualquer projetista de interface. É preciso pensar com qual freqüência o recurso será utilizado, se é crítico, se a velocidade faz diferença, se é acessível via teclado ou exige o uso do mouse… São muitas perguntas, mas o objetivo é apenas um: uma boa interface gráfica é aquela que se comporta da forma como o usuário espera que ela se comporte.

Se você coloca um botão lindo com ícones em 3D, mas não deixa claro para o que ele serve, não está construindo uma interface boa para o usuário. É preciso colocar legendas claras e, se possível, hints explicativos e teclas de atalho explicitas, pois nem todo mundo gosta ou pode ficar utilizando mouse. Se o padrão do sistema operacional é que em caixas de mensagens o botão OK venha antes do Cancelar, o sistema também deve seguir desta forma. Se existe um recurso que ainda não foi implementado, não coloque o botão na janela apenas para que o usuário tenha que clicar e ver que nada acontece. Recursos incompletos são piores que a ausência total deles.

Outra característica interessante relacionada ao usuário: eles não gostam de ler. Portanto, não adianta fazer um manual extenso, explicando minuciosamente como utilizar a nova janela, pois eles não o lerão de forma alguma. Da mesma forma, não adianta escrever caixas de diálogos com textos explicativos muito grandes. Textos curtos e claros são ideais. Usuários também costumam pensar que recursos parecidos devem se comportar da mesma forma. Então, se vai construir uma janela nova, pergunte-se se não existe um padrão a ser seguido. Não inove sem critério, um aplicativo cujas interfaces gráficas têm aspectos funcionais diferentes umas das outras são difíceis de usar.

Caso tenha dúvida sobre qual melhor abordagem para um recurso, não invente. Pergunte ao usuário, faça um teste de interface com ele, observe como ele interage com os botões, menus e mensagens. É a melhor forma de descobrir.

Interface visual para desenvolvedores mobile

Por Suelen Goularte Carvalho

Para construir a interface visual do meu app de Cálculo de Tributos PJ, me baseei na aplicação BoaLista, pois na minha opinião ela tem uma interface muito agradável além de uma usabilidade muito boa.

Basicamente eu segui as seguintes ideias:

Usar poucas bordas e que elas sejam finas.
Cores claras é uma boa ideia.
Cantos arredondados, mas nem tanto.
Campos de entrada de informações devem visualmente estar na mesma separação visual label e valor digitado, e ainda há aquela possibilidade de ao começar a digitação, sumir com o label, o tal do android:hint.
Não criar muitas separações visuais pois quando se divide um espaço e vários sub-espaços, dá a impressão que o espaço é menor do que ele realmente é. Tem também a questão de que criar divisões, por si só só já ocupa espaço == as bordas.

Os demais apps que estou desenvolvendo, costumo dar uma olhada antes no site AndroidNiceties.tumblr.com que lista os melhores design mobile do momento!! Lá é possível observar os apps e achar padrões de design e se você não é expert no assunto como eu e também é desenvolvedor, pelo menos de “pattern” você entende :)

Abaixo mostro um comparativo do design de telas das primeiras versões da Calculadora de Tributos PJ e da última, que está hoje na PlayStore. Exatamente a esquerda temos a versão 2 e a direita temos a versão 6.



Ambas as imagens foram extraídas do app sendo executado no mesmo device, um Samsung Galaxy Note. É possível observar que:

A versão 6 usa cores mais claras;
Não possui bordas explícitas como a borda amarela da versão 2;
A fonte é um pouco menor;
A tabela que contém o cálculo usa intercalação de cores para melhor guiar os olhos do usuário para ver o valor algum imposto e possui bordas arredondadas
O design do botão está mais dentro da paleta de cores do app;
Introduzido o patter layout de menu do Android;
O label do campo e a parte de digitação estão no mesmo espaço visual.

Por fim, ainda há muito o que melhorar, no entanto, para a versão 6 foram feitas uma série de mudanças que aos meus olhos soam melhores do que as versões anteriores. O feedback dos usuários quanto a nova versão foi muito positivo, é possível ver nos comentários do app na PlayStore.

Usabilidade na Web: 11 Dicas para Sites

por João da Fonseca para SEOmaster

Um dos conceitos mais importantes em marketing online e geralmente ignorado, até mesmo por desconhecimento, é a usabilidade na web.

Muitas empresas, que têm consciência da importância de um bom ambiente virtual e querem fazer um bom trabalho, investem pesado para criar seus sites. Encomendam templates sob medida, colocam toda a identidade visual da empresa e o site torna-se o novo queridinho.

O problema é que é comum acabar esquecendo a experiência do usuário, uma vez que o site foi feito somente seguindo as vontades e gostos de quem planejou. Pode acontecer de o visitante entrar no site mas não conseguir chegar ao pedido de orçamento, ou não ter uma estrutura que tenha lógica de navegação.

Agora que já tivemos uma boa quantidade de teorias e definições sobre o tema, veja abaixo a lista com algumas dicas para melhorar a usabilidade.

Dicas de Usabilidade

1 - Diálogos simples e naturais

O site ideal deve apresentar exatamente a informação que o usuário precisa no momento, nem mais nem menos.

Não adianta encher a sua tela de informações para que ele efetue a compra do seu produto, se naquele momento só é importante perguntar qual a forma de envio que ele quer escolher.

Isso também vale para blogs: não encha a página de anúncios, principalmente na parte acima do texto. Isso passa uma grande insegurança para o visitante, diminuindo a credibilidade do site. Além de existir uma grande probabilidade do visitante sair sem ver seu conteúdo, porque ele não rolou a página. Seja consistente

Uma mesma interação ou comando tem que ter sempre o mesmo resultado. Se for incluir um botão de ação dentro das páginas de produtos, ele tem que ter sempre a mesma ação, como “incluir no carrinho” ou “pedir orçamento”.

Se, ao invés disso, exibir diversos botões de ação diferente para cada produto, vai confundir o visitante.

Caso seja necessário, utilize cores, formatos ou posições diferentes para comandos diferentes.

2 - Fale a linguagem do usuário

O conteúdo das páginas deve ser produzido para uma pessoa entender, e não para os robôs do Google. O visitante em primeiro lugar, sempre.

Isso já foi dito diversas vezes pela empresa, então as informações têm que ser organizadas seguindo a lógica do pensamento humano.

Organize o texto seguindo uma ordem natural, com o primeiro parágrafo introduzindo a idéia, o corpo desenvolvendo, e o último fazendo a conclusão. Utilize boas palavras-chave dentro do texto, em lugares que agregue valor ao leitor.

Esse tempo investido para aumentar a qualidade é refletida nas principais métricas de experiência do usuário, como tempo na página e taxa de rejeição.

3 -Ofereça saídas claras

É necessário que o usuário consiga sair do seu sistema ou fazer o logout a qualquer momento, de forma fácil e sem barreiras.

Não faça como muitas empresas que dificultam uma pessoa a sair ou a apagar o seu cadastro. Isso vai contra todas as boas práticas de experiência do usuário. Se ele quiser sair, mostre-o como e pergunte o porquê. Dessa forma você pode ter um feedback e melhorar. Você não coloca obstáculos para seus clientes saírem da sua loja, então também não faça isso no seu site.

4 - Não sobrecarregue a memória do usuário

O sistema tem que ser o mais intuitivo possível, para que seja fácil aprender a executar as etapas necessárias, e consiga facilmente criar um mapa mental, que irá ajudá-lo a navegar pelo site.

O melhor método para isso é deixar bem claro o caminho, o ideal seria deixar poucas e claras opções de ação.

Um bom caso de sucesso é o Twitter. É muito fácil aprender que pode digitar no máximo 144 caracteres (tem até um contador regressivo), e postar. Simples!

No entanto, na maioria das vezes isso não é possível, aí é importante que mesmo oferecendo diversas opções de atalhos, a principal deve ter um destaque para facilitar a construção do mapa mental para o usuário.

5 - Diminua os erros

Identifique quais são as principais situações de erro dentro do seu site. Vou dar a dica de uma técnica simples: faça uma lista dos 10 problemas mais comuns, começando pelo que mais se repete. Com a lista pronta, pegue os dois primeiros problemas e os resolva. Dessa forma, é provável que 80% da quantidade de problemas irá diminuir, somente por resolver os mais recorrentes. Vale sempre a pena investir nesse salto de qualidade do site.

6 - Mostre os benefícios

Seu site deve mostrar claramente quais são os benefícios que oferece ao usuário. Crie uma lista dos principais benefícios que seu site oferece, pois chama muito mais atenção do que um texto descritivo.

É melhor deixar explícito para o visitante sobre o que é o seu site, para fazê-lo ficar curioso, e querer explorar o site.

Dica: Faça o Teste dos 5 Segundos. Peça para alguém acessar o site durante 5 segundos, e responder sobre o que era o conteúdo, o que era oferecido, etc. Se ele tiver dificuldade, é hora de melhorar!

7 - Tenha atalhos de navegação

Os usuários que já conhecem seu site devem conseguir executar suas funções com rapidez. Disponibilizar atalhos, menu detalhado ou links para páginas mais visitadas são algumas sugestões. Pense no que seu site oferece e como seu usuário interage com ele, então imagine o que irá facilitar que seu usuário chegue ao seu objetivo.

8 - Dê feedback

O site é uma mídia digital com grande capacidade de interação. O usuário espera uma resposta do sistema quando passa o mouse em cima de um link, por exemplo.

É ótimo que o mouse e a cor do botão mude, pois fica claro que se clicar ali uma outra parte do site será apresentada. Destaque as funções do seu site, indicando de alguma forma onde existe interação. Só a mãozinha de link não basta. O site deve informar a todo momento ao usuário o que está acontecendo.

Diferente de um livro, que só se pode ler, seu site pode ter incontáveis interações. Aproveite essa vantagem!

9 - Crie boas mensagens de erro

Apesar de trabalhar para diminuir a quantidade de erros, infelizmente você não conseguirá eliminar todos. Então crie uma mensagem de aviso para cada erro que ocorrer, e é muito importante que cada um deva ser identificado claramente, explicando para o usuário o que aconteceu.

Não basta colocar “Erro 3″, como o Google faz no Hangout, sua ferramenta de videochat. Sua linguagem deve ser clara e sem códigos sem explicação, justamente porque devem ajudar o usuário a entender e resolver o problema. E principalmente, NUNCA culpe o usuário.

10- Página de Ajuda

Seu sistema tem que ser planejado para que seja operado de forma tão fácil que não necessita de ajuda. No entanto, essa é uma situação ideal, e por melhor que ele fique, sempre alguém vai ficar com dúvidas.

Então disponibilize uma Ajuda ao Usuário, podendo ser na página ou em um endereço independente, que deve estar facilmente acessível.

Pode até mesmo ser um chat online, com uma janelinha que fica no canto com alguém sempre à disposição para tirar dúvidas.

11 - Pós-Leitura
Utilize os Goals e Eventos do Analytics

Antes que você implemente os pontos abordadas acima, é muito importante que defina claramente o que está mudando, e quais seriam as métricas para ter um controle e saber se realmente essa alteração teve benefícios para o seu site ou não. Utilize o sistema de Goals que o Google Analytics oferece, que não é muito difícil de configurar.

Teste A/B

Se depois de ler todas as dicas, ficou confuso e várias ideias diferentes surgiram, isso é ótimo! Mas aí você se pergunta como juntar elas, ou qual seria a melhor.

Não podemos saber como nosso visitante vai reagir, pois o comportamento pode variar muito de acordo com o tipo de site, com o mercado e até mesmo com a cultura individual. Para isso é indispensável que faça um Teste A/B, para validar as suas alterações e ver se realmente melhoram a experiência do seu site.

É muito importante que sempre teste as mudanças que fizer no seu site, para ir tornando-o melhor para seu usuário. Cada investimento vale muito, pois com certeza seu visitante irá sentir diferença!

Interface e Usabilidade: Como levar o usuário onde queremos!

Por Marcelo Prudente

Interface e Usabilidade: Como levar o usuário onde queremos! from Marcelo Prudente

Organização Física: Layout

Layout é um sistema de homens-móveis-equipamentos-atividades. Tudo está interligado.

Para Lacombe (2004), layout é definido como a arrumação do espaço em um escritório de forma racional, arrumação das máquinas, dos equipamentos e materiais de uma fábrica com o objetivo de obter a maior produtividade possível, esboço de um anúncio ou trabalho artístico, ainda sob a forma de rascunho, embora permitindo uma visão precisa do que se pretende.

Faria (1997) conceitua layout como a procura de produtividade por meio da adequação do meio físico, da facilidade de comunicações, e movimentação interna e da satisfação do homem no seu ambiente de trabalho. O layout não pode ser objeto de estudo isolado, uma vez que está inserido no contexto de toda a racionalização administrativa, isto é homem, métodos de trabalho, condições ambientais etc.

Layout é um meio e não um objetivo.

Objetivos de Layouts
• Reduzir custos e aumentar a produtividade;
• Racionalizar a utilização do espaço;
• Reduzir a movimentação de material, produtos e pessoas;
• Racionalizar o fluxo de trabalho;
• Minimizar o tempo de produção;
• Propiciar melhores condições de trabalho;
• Aumentar a flexibilidade para as variações necessárias.


Indicadores de Problemas nos Layouts
• Demora excessiva;
• Fluxo confuso do trabalho;
• Excessiva acumulação;
• Má projeção de locais de trabalho;
• Perda de tempo no deslocamento de uma unidade a outra.

Elementos do Layout
• Espaço;
• Instrumentos auxiliadores do layout: planta baixa da área a ser reestruturada e modelos dos itens físicos;
• Tipos de layout: neste item veremos a seguir detalhadamento:
• Posto de trabalho: é o espaço que cada colaborador ocupa, inclusive co o seu material de trabalho;
• Implantação;
• Condições ambientais;
• Métodos dos Elos: proporciona maiores ligações e relações entre si, colocando mais próximos possíveis, possibilitando um mínimo de movimentação.

Tipos de Layouts
Basicamente encontramos dois tipos de layout: o burocrático e o industrial.

Burocrático
É o tipo mais simples e sua aplicação refere-se a escritórios e áreas de trabalhos burocráticos.

Industrial
Este é um tipo bastante complexo. Refere-se a áreas industriais.

O arranjo físico, ou layout, preocupa-se com a localização física dos recursos de transformação, classificados em quatro tipos:

Por Processo
Quando os produtos, informações ou clientes fluírem mediante a operação, eles percorreram um roteiro de processo a processo de acordo com as suas necessidades. Se houverem diferentes produtos, percorrerão diferentes roteiros por meio da operação, logo, o fluxo na operação pode ser bastante complexo.

Por Produto
Cada produto ou elemento de informação segue um roteiro predefinido no qual a sequência de atividades requerida coincide com a sequência na qual os processos foram arranjados fisicamente. Por isso, ele pode ser chamado também de arranjo físico em linha.

Como o fluxo dos produtos é muito previsível no layout por produto, o arranjo acaba ficando mais fácil. É a uniformidade dos requisitos dos produtos que leva à operação escolher um arranjo físico por produto. Um exemplo desse modelo seria a montagem de automóveis, pois quase todas as variantes do mesmo modelo requerem a mesma sequência de processos.

Celular
Os recursos transformados entrando na operação são selecionados para movimentar-se para uma parte específica da operação, onde todos os recursos transformadores necessários a atender suas necessidades imediatas estarão presentes. Após serem processados na célula, os recursos transformados partem para uma outra célula.

Posicional
Em vez dos materiais, informações ou clientes fluírem por meio de uma operação, quem sofre o processamento fica parado, enquanto o equipamento, maquinário e pessoas locomovem-se em volta da do processamento de acordo com o necessário. Isso deve-se ao fato de que o produto poder ser muito grande e pesado para de locomover, ou então são muito delicados para serem movidos de um lugar para outro. Um exemplo desse modelo seria a construção de uma rodovia, ou seja, um produto muito grande para ser movido.

Fonte: Portal Educação

Como avaliar a qualidade de uma interface?

por Luis Rocha para Revista Wide

Neste bate-papo, Felipe Memória, diretor de design da agência e autor do livro “Design para a Internet: Projetando a Experiência Perfeita”, ressalta algumas questões úteis na avaliação de interfaces e os erros mais comuns cometidos no processo de criação.

Wd :: Quais são os principais parâmetros utilizados para se avaliar a qualidade de uma interface?

Memória :: Gosto quando a interface tem um ponto de vista marcante. Quando ela entrega de cara o seu objetivo, aquilo que se propõe a fazer, mesmo que o usuário esteja olhando-a de longe. Existe uma infinidade de parâmetros possíveis, dependendo dos objetivos do projeto.

Quanto aos mais gerais, prováveis de funcionar para a maioria das telas, eu diria que, além do destaque absoluto para o conteúdo que interessa, viriam simplicidade e clareza na oferta de opções. Ela precisa ser facilmente escaneável pelo olhar. Estes são meus critérios prediletos para uma interface objetiva e com grandes chances de funcionar na prática.

Wd :: Pela sua experiência, quais seriam os erros mais comuns cometidos na concepção de projetos digitais e interativos, que evidenciam o uso gratuito de elementos e soluções em uma interface?

Memória :: No Brasil, pelo que vejo, o abuso no uso do Flash. Infelizmente, porque se fosse aqui nos EUA, eu não faria o mesmo comentário. Parece que o pessoal parou no tempo.

O Flash não é apropriado para a grande maioria dos projetos que vejo por aí. Hoje em dia, serve para poucas coisas, entre elas vídeo. É ótimo para vídeo. Tirando isso, dá para contar nos dedos as oportunidades em que o Flash é realmente adequado. Não é a toa que o iPhone e o iPad não dão suporte ao Flash.

As únicas pessoas que realmente curtem a lentidão, as piruetas e os efeitos desnecessários são os designers “criativos” e clientes mal orientados.

Princípios gerais de usabilidade em web sites

Por Eduardo Manchón

Embora estes princípios podem parecer muito gerais, são a base da disciplina e de sua extrapolação e perfeita compreensão permite resolver qualquer casuística concreta.

1. Antecipação, o web site deve antecipar-se às necessidades do usuário.

2. Autonomia, os usuários devem ter o controle sobre o web site. Os usuários sentem que controlam um web site se conhecem sua situação em um meio abrangente, mas não infinito.

3. Há que utilizar as cores com precaução para não dificultar o acesso aos usuários com problemas de distinção de cores (aprox. um 15% do total).

4. Consistência, as aplicações devem ser consistentes com as expectativas dos usuários, ou seja, com sua aprendizagem prévia.

5. Eficiência do usuário, os web sites devem centrar-se na produtividade do usuário, não no próprio web site. Por exemplo, às vezes as tarefas com maior número de passos são mais rápidas de realizar para uma pessoa que outras tarefas com menos passos mas mais complexas.

6. Reversibilidade, um web site há de permitir desfazer as ações realizadas

7. Lei de Fitts indica que o tempo para alcançar um objetivo com o mouse está em função da distância e do tamanho do objetivo. A menor distância e maior tamanho mais facilidade para usar um mecanismo de interação.

8. Redução de tempo de latência. Torna possível otimizar o tempo de espera do usuário, permitindo a realização de outras tarefas enquanto se completa a prévia e informando ao usuário do tempo pendente para a finalização da tarefa.

9. Aprendizagem, os web sites devem requerer um mínimo processo de aprendizagem e devem poder ser utilizados desde o primeiro momento.

10. O uso adequado de metáforas facilita a aprendizagem de um web site, mas um uso inadequado destas pode dificultar enormemente a aprendizagem.

11. A proteção do trabalho dos usuários é algo prioritário, deve-se assegurar que os usuários nunca percam seu trabalho por conseqüência de um erro.

12. Legibilidade, a cor dos textos deve contrastar com a do fundo, e o tamanho de fonte deve ser suficientemente grande.

13. Continuação das ações do usuário. Conhecendo e armazenando informação sobre seu comportamento prévio deve-se permitir ao usuário realizar operações freqüentes de maneira mais rápida.

14. Interface visível. Deve-se evitar elementos invisíveis de navegação que há de ser inferidos pelos usuários, menus desdobráveis, indicações ocultas, etc.

Outros princípios para o design de web sites são:

a) Os usuários devem ser capazes de alcançar seus objetivos com um mínimo esforço e com resultados máximos.

b) Um web site não pode tratar o usuário de forma hostil. Quando o usuário comete um erro o sistema deve solucionar o problema, ou por padrão sugerir varias soluções possíveis, mas não emitir respostas que meramente informem do erro culpando o usuário.

c) Em nenhum caso um web site pode ir abaixo ou produzir um resultado inesperado. Por exemplo, não devem existir links quebrados.

d) Um web site deve se ajustar aos usuários. A liberdade no uso de uma web site é um termo perigoso, quanto maior for o número de ações que um usuário possa realizar, maior será a probabilidade que cometa um erro. Limitando o número de ações ao público objetivo facilita-se o uso de um web site.

e) Os usuários não devem sofrer sobrecarga de informação. Quando um usuário visita um web site e não sabe por onde começar a ler, existe sobrecarga de informação.

f) Um web site deve ser consistente em todos os passos do processo. Embora possa parecer apropriado que diferentes áreas tenham designs diferentes, a consistência entre os designs facilita ao usuário o uso de um site.

g) Um web site deve prover de um feedback aos usuários, de maneira que estes sempre conheçam e compreendam o que acontece em todos os passos do processo.

Fonte: Criar Web

Martha Gabriel: Qual é a receita para a inovação?

A consultora, palestrante e escritora em Marketing Martha Gabriel defende que para inovar é preciso ter metodologia. Nesta entrevista, afirma que o Brasil é muito criativo porém pouco inovador. "A gente não vai até o fim, a gente não desenvolve métodos". Observação, desenvolvimento de ideia, patrocínio, prototipação, validação de protótipo e aprofundamento são algumas das dicas da especialista.

Interface, interação e usabilidade

Confira a apresentação ded Guilherme Menga e Lucas Húngaro sobre interface, interação e usabilidade.

Interface Interação E Usabilidade from guimenga