]]>

Design interativo

Modelo de processo mais simples de pensar no design centrado no usuário. Quanto mais interação (interação = transmitir informações claras) o site tiver com o usuário final, melhor ficará. A medida que o usuário navega e busca por informações, o site responde para o navegante o seu status atual. Por exemplo: informar se encontrou ou não algo, mensagens de validações de formulário, pré-loading, sugestões de informações, dar um feedback para qualquer ação do usuário e etc.

Design paralelo

Esse modo não é tão complexo como se imagina, porém demanda mais tempo de planejamento, pois pode e deve ser feito pelo menos duas opções de wireframes. Depois, basta combinar o que todos os wireframes tem de melhor e produzir um design único para o site. Baseado nesse resultado, começar a pensar na navegação, como serão os feedbacks, interações, etc.

Conclusão

Os dois métodos compartilham uma idéia básica: não há um meio certo para criar a interface perfeita, e você pode não obter uma boa usabilidade comprando a primeira ideia. Você deve testar varias ideias, combinar… o importante é pensar no usuário final.

Quem leu isto também leu:

• Princípios e meios para melhorar a experiência do usuário
• Hierarquia visual de elementos
• Mega sorteio Design Blog e Adobe!

]]>

Fonte: todas as informações contidas nesse artig foram baseadas nos estudos da fundação Nielsen Normam Group.

Feedback: Interfaces devem fornecer feedback sobre o seu estado atual. Por exemplo, se algo está processando e em qual nível do processo está, quantificar o tempo para a execução ou finalização de algo.

Implementação: Interfaces não devem ser organizadas em torno da implementação da tecnologia ou exigir que o usuário tenha acesso a informações adicionais que não são encontradas na própria interface.

Como voltar/desfazer: As ações voltar/desfazer da interface devem estar claras, explicando como voltar para o início ou desfazer a ação. O usuário deve ter acesso aos meios necessários para ter o controle da ação.

Recuperação/entendimento de informações: Uma interface pró-ativa deve ajudar os usuários a recuperar/informar sobre erros de tecnologia, por exemplo, instalar o Shockwave.

Interação: Os usuários devem ser capazes de descobrir funcionalidades e informações explorando a interface naturalmente, ou seja não deve ser forçados a recordar informações da memória.

Eficiência: Interfaces devem ser o mais eficiente possível, minimizando a complexidade das ações e do tempo total para completar uma tarefa. O que puder, deve sim ser simplicado, afim de melhorar a experiência final do usuário.

Além destes itens, existem outros de metodos para se identificar ou previnir erros para proporcionar meios coerentes para uma experiência perfeita. Claro, cada UX Designer acaba por criar metodologias próprias, mas novas dicas são sempres bem vindas ;D

Quem leu isto também leu:

• Como melhorar a usabilidade no seu layout
• Mega sorteio Design Blog e Adobe!
• Código comentado salva vidas!

]]>

Quem leu isto também leu:

• Como melhorar a usabilidade no seu layout
• Hierarquia visual de elementos
• Princípios e meios para melhorar a experiência do usuário

]]>

Como, pode se ver na imagem ao lado, existe um comparativo entre elementos com uma heirarquiva gráfica definida com outros que não seguem um padrão de leitura.

Alguns elementos pesam graficamente (certamente foi a primeira imagem que você olhou) mais do que os outros, como podemos perceber a heirarquia visual tem um forte apelo para o design gráfico, os elementos com maior destaque guia os usuários para o resto das informações de acordo com a sua evolução.

Quando essa heirarquia visual é evidente e direta, o usuário navega pelo site com grande clareza e objetividade, de certa forma, isso é criar meios coerentes para que os usuários tenham uma boa experiencia durante a navegação no seu site.

Informações objetivas os motivam a passar mais tempo no site procurando por outras informações que lhe podem ser uteis.

Peso Visual

O peso visual dos elementos reforçam a heirarquia dos mesmos. Criando contrastes de cores, posicionamento e tamanho dos elementos, podemos atribuir mais importância para alguns objetos, como eu já citei em outro artigo, o UX bem feito se parece com uma conversa, flui naturalmente.

No caso da heirarquia visual partimos do mesmo princípio, o conjunto visual é como se fosse uma narativa, se conseguirmos explicar bem os pontos chaves da história, ela é facilmente entendida e passada adiante.

Por exemplo, não deixando espaço suficiente entre as linhas de texto, você pode inadvertidamente criar uma seção que é visualmente densa e muitas vezes mais difícil de ler e distrair heirarquia visual estabelecida.

Ao aplicar o espaçamento adequado, você permite que o texto para respire e as posições ao redor também, imagens e texto para mantém a sua prioridade e equilíbrio em relação ao texto.

Por meio destes elementos podemos melhorar muito a experiência do usuário em busca de uma determinada informação, em meio a milhares de informações perdidas na web, cabe a nós UX designers tornar esse mundo virtual um lugar melhor.

Quem leu isto também leu:

• Como melhorar a usabilidade no seu layout
• Re-desenhando um site (dica)
• Princípios e meios para melhorar a experiência do usuário

]]>

Quem leu isto também leu:

• Como melhorar a usabilidade no seu layout
• Não pense no design baseado em suas preferências
• Hierarquia visual de elementos

]]>

É bem simples, em primeiro momento, o designer de interfaces é responsável pela disposição dos elementos em tela, um exemplo prático disso pode ser visto neste link. Podemos chamar isso de Wire Frame, que nada mais é do que, um mapa onde pode-se ter uma visualização macro da tela desenvolvida.

A partir do Wire Frame, o designer de interface começa a visualizar o que funciona bem na tela ou não. Um Wire Frame bem desenhado, com um fluxo de informações destribuido corretamente faz com que as chances de sucesso da interface seja grande, por que, por meio disso já pode ser eliminado todo o excesso de informação da tela. Como já sabemos, um usuario em web, busca por informações objetivas, ou seja, nada de esconder ou criar varios niveis de interação para se chegar ao objetivo. Quanto mais rapido e evicaz o processo, melhor será. Pois bem, o designer tem uma grande noção disto, logo que concluido o Wire Frame.

Um modo simples para se desenhar um bom fluxo de informação pode levar em consideração aspectos como cultura, relevância dos textos, padrões de leitura em web. Como um designer projeta para um publico especifico, posso dizer que conhecer os costumes do mesmo conta bons pontos.

Nesta imagem, podemos perceber que não existe um template completo, entretanto, o que podemos ver é como funcionará a disposição dos elementos em uma tela. O desenvolvimento do Wire Frame, pode se dizer que já faz parte do processo do design das interfaces. Com esse Wire Frame o desenvolvimento da parte gráfica fica simplificada, pois os elementos já estão previamente posicionados.

Segundo o instituto Nielsen Group um internauta faz a leitura da página da seguinte maneira: o primeiro olhar é vertical, seguido de dois olhares horizontais, formado o que chamamos de leitura em F. Segue um exemplo prático da leitura em F:

*Neste exemplo, o conteúdo textual está em Lorem Ipsum, isto não é recomendado, por que, com ele não pode ser feita uma simulação 100% real da interface. Mas como neste caso é só um exemplo, está bom!

Quem leu isto também leu:

• Design e experiência – parte 1
• Como melhorar a usabilidade no seu layout
• Pequenas grandes diferenças – iOS 5

]]>

Explicar para o meu pai o que é design não é a mesma coisa que explicar o que um advogado faz, realmente, é meio complicado definir o que design em poucas palavras e ainda, para pessoas leigas (como meu pai) no assunto.

Uma definição rápida para explicar o que um designer faz é “Design é o resultado da produção humana pensada e analisada de maneira eficiente”. Frase profunda, mais o meu pai não entendeu nada quando lhe disse.

Transformando a frase bonita em algo mais simples de se entender eu defino o termo assim, design é transformar necessidades reais do ser humano em soluções de fácil entendimento.

Pode-se dizer que ser um designer é como ser um artista, lógico, com algumas diferenças básicas. Imagino que você já se perguntou o porquê algumas coisas funcionam e outras não, por exemplo, um site/lugar que permite encontrar todas as informações de modo eficiente e outros não.

Esse é o ponto, por meio de códigos cromáticos, signos, objetos de comunicação (setas, pictogramas e etc), referências passadas, ou até experiências já vividas, o designer traça métodos de processo, com isso, cria um significado para o que já pode se chamar de projeto. O planejamento para se chegar ao objetivo final denomina-se design.

O designer foca o planejamento em cima dos métodos de interação e percepção do futuro usuário/espectador, neste ponto, o lado artístico entra em ação. Criar e dar novos significados para o que já existe faz parte do dia-dia de cada designer.

Ser designer é projetar boas experiências que estimulam a sensoriedade de cada um, seja por meio de, propiciar novas interações, métodos de utilização, guiar usuários de forma eficaz para o objetivo final.

A capacidade de explicar ou simplificar métodos de certa forma pode ser chamado de UX. Apesar desta explicação não ter tanta relevância com o mundo virtual, como por exemplo, 10 maneiras de melhorar a usabilidade do seu site. O importante é entender como o ato de melhorar os meios para se chegar o objetivo final é importante.

Quem leu isto também leu:

• Primeiros passos para criar um site
• Curso online Web para Designers
• Novo visual 2012 do Twitter

]]>

Quem leu isto também leu:

• jQuery: o básico que todo designer precisa saber – parte I
• Design de mensagens de erros
• Re-desenhando um site (dica)

]]>

Seguindo a discussão proposta na coluna anterior, pretendo explicar de forma menos teórica e mais prática sobre o tema UX design / acessibilidade. Vamos lá, existem varios niveis quando falamos de acessibilidade, por hora, irei abordar sobre o modo de desenvolver um site para pessoas com deficiências visuais.

1. Antes de começar o projeto, é necessário que todos os textos estejam objetivos.

2. Adaptação do código. pequenas mudanças pode melhorar bastante o resultado final. Por exemplo, existem dois meios para se deixar uma palavra em negrito, seja com a tag <b> ou <strong>, visualmente ambos tem o mesmo resultado, entretanto, para um cego não. O problema é o seguinte, para quem não sabe o navegador para cegos funciona por meio de som, ou seja, ele vai ler o que está escrito na página. E o negrito para esse navegador é feito por meio da tag <strong>. Na hora da leitura terá um tom de voz mais bruto, para marcar o que é importante. A mesma lógica é usada para as tags <em> e <i>, em resumo, a tag <em> é indicada para o navegador para cegos interpretar de fato o itálico.

3. É essencial existir um botão para ir direto para o conteúdo, por que, imagine um menu gigante com varios sub-itens, a espera para o conteúdo passa a ser beeem mais demorada.

Voltando ao ponto das tags, como já citei o browser precisa realmente entender o que é título, parágrafo, negrito, itálico e etc. Segue dois exemplos sobre as diferenças:

Este é o modo correto para um cego entender o que é cada elemento:

<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h1>

<p>Vivamus sed tellus quam, ac aliquet <strong>sem</strong>. Sed ac ante a ligula adipiscing pharetra vitae <em>at ligula</em>. Aliquam erat volutpat.</p>

Deste modo, não funcionará como deveria

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
<p>Vivamus sed tellus quam, ac aliquet <b>sem</b>. Sed ac ante a ligula adipiscing pharetra vitae <i>at ligula</i>. Aliquam erat volutpat.</p>

Como eu disse, pequenas mudanças geram grandes resultados!

Quem leu isto também leu:

• Salve a Web, por favor

]]>

Foi se o tempo em que o web designer era responsável somente pelo desenvolvimento criativo de uma interface, pela produção das páginas e por fim, pela codificação. E, pra quem tem dúvidas do que eu falo é só fazer uma pesquisa básica sobre o que as agências digitais esperam de um web designer.

Criatividade não é um pré-requisito

Para realmente atingir o máximo do potencial de um site, o criador, precisa ter sensibilidade o suficiente para entender a harmonia dos objetos e deixar o lado humano em grande evidencia. Quanto mais humano o canal de comunicação é, melhor será o resultado. Como todos devem saber, percebemos o mundo por meio dos nossos sentidos (visão, olfato, paladar, audição e tato), explorar os sentidos do usuário final é o que chamo de design pensado para interfaces ou UX design.

Erros comuns em design para web é transformarmos uma interface/site em complexos painéis de controle. Aí que entra o X da questão, será que realmente é tanta interação ou informação?

Um design bem feito é o que guia o usuário as informações que procura, ou seja, a interface deve agir no inconsciente do internauta. Normalmente nada é mais importante que o conteúdo, lembrando que cada caso é diferente, entretanto, em principio é assim mesmo.

Antes de começar o projeto uma pergunta deve ser respondida, será que o internauta visitará o site atrás de informações ou para apreciar o funcionamento do mesmo, questionar por que não foi feito em Ajax ao invés de Ruby on Rails!?

• 1. Dê ênfase ao conteúdo de alta qualidade (sem medo de fazer de maneira marcante)
• 2. Trace a navegação de com base no próprio conteúdo do site
• 3. Aproveite o vazio do site de modo eficiente, use bloco de informações
• 4. O que é desnecessário deve pular fora da interface

Neste ponto devemos pensar no seguinte: sempre lidamos com terceiros, por isso que um projeto bem pensado em cima do objetivo e usuário final contribui para o sucesso do projeto. O design pensado constitui no modo/porque dos elementos usados, nada deve ser por acaso, sem caprichos pessoais. Nem sempre o usuário entra em um site simplesmente para aprecia-lo, em quase todas as situações existe um motivo. Em cima desta metodologia, o simples passa a ser o difícil.

De fato, é o que realmente importa um projeto de interface é ênfase nas informações a serem comunicadas. É nosso dever como designers de interface para web analisar todos os pontos a fim de criar uma experiência perfeita (ou quase) para o usuário. O design pensado constitui em não usar elementos simplesmente para agradar visualmente, vai muito mais além disto, devemos não só agradar os olhos levar e sim levar em consideração todos os meios de percepção que o ser humano tem (lembra quando falei dos sentidos?). Ninguém percebe o mundo simplesmente com o olhar não é!? Tenho convicção que isso não é tarefa simples, entretanto cabe a nos designers desvenda-las.

E desvenda-las como? O estudo do comportamento virtual do usuário realmente é necessário, não digo que um designer de interface deve ser psicólogo ou coisa do tipo, mas é obvio que é importante conhecer o comportamento de quem irá usar o seu produto. No nosso caso o site!

Atualmente, simplificar é a palavra chave. Nessa onda de simplicidade é importante analisar todos os passos que são necessários para se chegar ao objetivo, com isso podemos eliminar ou incluir novos passos, sempre objetivando o usuário.

Esse check list básico pode ser de grande ajuda

• Listar as qualidades da interface, focando ainda mais em melhorá-la;
• Corrigir os erros identificados pelos usuários já adeptos;
• Vivenciar a necessidade real da mudança;
• Nunca levar em conta a primeira idéia, a partir da idéia inicial desenvolva outras;
• Antes de concluir, solicitar opinião de pessoas leigas (não envolvidas diretamente ou indiretamente na criação). Você pode colher informações importantes.

Quem leu isto também leu:

• Como melhorar a usabilidade no seu layout
• Princípios e meios para melhorar a experiência do usuário
• O que clientes esperam que web designers saibam