Continuando ao post anterior sobre a Psicologia do UX Design. Estou escrevendo sobre esse tema porque como disse anteriormente, tenho feito pesquisas sobre o assunto. Algo que tem me chamado bastante a atenção é o fato do Redesign. Não o redesign que deve ser feito quando pegamos uma arte de outro designer, ou mesmo, aquele…
Se tem um tema dentro da estrutura de Arquitetura de Informação que eu gosto, esse tema é sem dúvida o Sketching, quer seja pelo meu passado desenhista, quer seja pela sua praticidade. O Processo de arquitetura de informação de forma simplista consiste na propotipagem, é o desenvolvimento de protótipos que se tornam o que chamamos…
Recentemente percebi que muitos profissionais ainda possuem uma certa dificuldade em entender as tais nomenclaturas do ramo… como UX / UI / IxD / Guideline etc. Mas o que tenho visto de mais comum é o uso do termo Guideline para referenciar a User Interface, UI. É fato que a diferença entre ambos na idéia…
Recentemente um amigo e ex aluno Rafael Daron? me pediu indicações de User Interfaces para inspirá-lo em seu novo projeto para a nuvem, citou-me que estava observando o Windows 8 e aplicações como Prezi para ter referências. E a pergunta dele me chamou bastante atenção, e a resposta me inspirou esse post. O motivo é bem…
Tiago Marciano curtiu este postÉ verdade que eu posso falar sobre a usabilidade dos dispositivos móveis, mas… é sempre importante respeitarmos a bagagem daqueles vieram antes de nós, e certamente Nielsen é um deles. É muito difícil para mim pensar em Usabilidade sem lembrar de Jakob Nielsen e do Nielsen Norman Group. Antes de comentar…
Chegamos a fase final, organizamos o layerComps e exportamos as imagens para apresentação, agora, em uma nova aula, totalmente separada, será a parte de componentização e preparação do arquivo PSD para o Catalyst, sei que muitos aguardam ansiosos por isso… Mas continuem acessando o Blog da DClick e me seguindo no Twitter @eduardohorvath para saber quando lançarei as mesmas.
.
.
Aula que ensina como organizar seus layers através do layerComps, juntamente com detalhes importantes da ferramenta.
.
.
.
Finalização a organização com layerComps e explicação de como exportar as imagens por demanda.
.
.
.
Criação de um player e interferindo no LayerComps.
.
.
_________________________________________
Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design há mais de 15 anos.
@eduardohorvath
.
Nova série de screencasts, por hora estou liberando apenas 1, mas serão 6 por post, semana que vem tem mais e esse post será atualizado com imagens e detalhes.
.
Nessa aula eu mostro como criar um novo smartObject a partir de um existente sem que este fique vinculado.
.
.
_________________________________________
Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath
Nessa quarta aula eu desconstruo nosso último componente, o ScrollPanel com texto, para então inserir um DataList, criando ele desde o zero e mostrando sua interação.
Para alguns são aulas simples, mas para outros são bases fundamentais para que você possa futuramente fazer com tranquilidade interfaces mais complexas. Já vi pessoas pularem essas etapas básicas sem treinar e ficarem perdidas com erros simples, como o demonstrado nesse vídeo, um dos erros mais comuns que acontece na criação de componentes.
Espero que você goste, dúvidas, críticas, sugestões, você já sabe, basta deixar o seu comentário ou me mande uma DM @eduardohorvath
Abaixo segue o arquivo para você fuçar a vontade:
datalist.fxp
What the hell is UX, e IxD – Design de Interação, abordagem direta uma galera tem me perguntado sobre a carreira de UX Specialist, o que é, o que deixa de ser, onde encontra-se material, etc.
Vou resumir, ou tentar.
UX Specialist é o indivíduo especializado em User Experience, a essa altura você deve dizer “você está de brincadeira comigo…”, mas não poderia deixar de enfatizar isso, já que, quando falo especialista, é especialista mesmo, é alguém que entende o assunto, não é apenas um termo.
Portanto, sem entrar no mérito da profissão, já que não existe faculdade para formar especialistas em UX, e muito menos cursos sobre o assunto. Os profissionais vem de diversas áreas do design, mas quando falamos em usuário temos que pensar em algo muito peculiar, INTERFACES, a maioria esmagadora vem do segmento de design de interfaces e do estudo em IxD.
Se em um futuro próximo eu ver de acordo com a perguntas dos leitores que há ainda falta de entendimento em relação a esse tema eu posso postar o que é essa carreira em alguns dos seus detalhes, por hora vou municiar vocês com material, muito material, links e mais links para você encontrar o que quiser a respeito de User Experience, mas já aviso, em português não tem coisa boa, não significativa, mas com esforço você encontra, portanto terá que ser em inglês, e se, teu inglês não está lá aquelas coisas faz um esforcinho e pede ajuda ao titio Google, garanto que vai valer a pena.
De quebra, vou dar um Help com um vídeo de introdução muito interessante… do Don Norman, (@becknovaes gosta muito dos conceitos desse especialista), acho o velhinho simpático e com uma bagagem invejável, o vídeo tem legenda em português, vale a pena.
.
Você vai perceber nos links abaixo que haverá temas relacionados a IxD, IA, etc, entender todos esses assuntos fazem parte do papel de UX Specialist.
Isso não significa que eu concordo com todos os pontos de vistas de todo esse conteúdo, isso é material de investigação, de estudo. Eu tenho minhas próprias convicções sobre essa matéria User Experience, devido a meus anos de trabalho na área, pelas milhares de tentativas de erros e acertos.
Espero que com esse material você encontre o que precisa para largar de vez esse tema ou amar.
.
.
.
by Don Norman
by Steve Krug.
.
by Bill Buxton
by Don Norman
by Alan Cooper.
by Peter Merholz, Todd Wilkens, Brandon Schauer, and David Verba.
.
by Jesse James Garrett
by Alan Cooper, Robert Reimann, and David Cronin.
by Joshua Porter
by Jenifer Tidwell
by Kevin Mullet
by Louis Rosenfeld and Peter Morville.
by Jakob Nielsen.
by Dan Brown.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
_________________________________________
Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath
Esse texto não visa explicar o que é UX, já temos um texto que trata do assunto, este artigo abaixo é a visão de Shane Morris sobre o processo de UX em si.
Entenda do artigo a palavra produto como o aplicativo em si construído pelo desenvolvedor e designer.
Shane Morris, um ex-UX Evangelista da Microsoft e que atualmente é um UX Arquiteto independente, realizou uma palestra chamada “Pimp My App” no TechEd Brasil 2010, apresentando cinco coisas para se saber antes de começar a criar uma UX (como já comentei, no texto What the hell is UX?, é comum arquitetos se apoderarem do termo UX a fim de definir a matéria de usabilidade com um algo a mais, porém aqui no texto vale o nome, só acho que um pouco mal colocado), e 6 dicas de como desenvolver um produto com uma aparência maravilhosa.
Morris considera que o desenvolvimento de uma UX (como já havia citado, UX não é algo concreto mas vamos lá), deve seguir as seguintes etapas:
1. Projeto Conceitual
2. Design de Informação
3. Design de Interação
4. Apresentação do Design
.
.
1. A primeira função de um projeto de UX não é estabelecer as cores e as fontes, mas classificar as informações a serem exibidas e estabelecer o fluxo de informações, ajudando o usuário a encontrar o seu caminho, fazendo com que o mesmo consiga realizar a tarefa predisposta. Em seguida vem a questão “emocional” do produto.
2. Definição dos objetivos do usuário, dos negócios, da usabilidade, da experiência e perspectiva, porque tudo isso irá afetar o design.
O que acontece com o olhar do usuário quando este acessa um produto e uma página? Qual objetivo da organização do produto? O que torna um produto útil? Ele é fácil de usar? Flexível? Adaptável?
Qual é a experiência de se usar o produto desejado?
Esta é a melhor forma de expor as informações aos usuáros potenciais do produto, caso contrário o designer deve se perguntar o que ele gostaria de ver se ele fosse um cliente.
3. “Você não é o usuário”. Enquanto o designer deve tentar imaginar o que o usuário gostaria de ver ao utilizar o produto, ele deve lembrar que ele não entende realmente os gostos do usuário e o que realmente gosta ou sente, então ele não deve assumir que todos os usuários vão gostar de tudo que ele gostaria de ver.
4. Realizar testes de usabilidade a cada dois ou três sprints para certificar-se de que as novas implementações no projeto serão bem recebidas.
5. Adquirir uma boa compreensão do fluxo de informação em todo o produto, pois ele ajuda a imaginar maneiras melhores de apresentar essa informação. Então só depois disso podemos passar a pensar na concepção da Interface para o usuário (UI – User Interface).
.
.
1. Mapear o fluxo de trabalho, determinar a sequencia das ações que o usuário pode vir a realizar, a fim de conseguir fazer as atividades.
2. Liste os seus conteúdos, determine os widgets necessários para tonar o fluxo de trabalho possível. Apropriadamente escolha os check boxes, radio buttons, spin buttons, etc. Escolha a terminologia utilizada, ou seja, palavras que aparecem nos botões (text label), check boxes, etc.
3. Organização dos elementos da página, essa organização visual deve ser considerado a partir do fluxo normal de uma página (visão ocidental), que é na maioria dos países, da esquerda para a direita e de cima para baixo. Essa é o padrão a ser levado em consideração.
4. Verifique o agrupamento. Alguns elementos estão fortemente relacionados entre si, e por isso é natural agrupá-los por página, isso pode exigir alguma reorganização dos elementos (e até mesmo da proposta inicial).
.
.
1. Remova todos os elementos desnecessários, uma abordagem minimalista seria recomendada.Toda a “decoração” deve ser feita com um propósito em mente. Caso se trate de um produto previamente projetado, deve-se remover qualquer elemento que não é relamente necessário ou que tumultua a vista, enganando o usuário em relação ao seu real propósito. Por exemplo, se dois elementos são relacionados, devem estar juntos dentro do mesmo box, em vez de em boxes separados.
2. Minimize as variações. Deve-se ser coerente com as fontes, layout e cores utilizadas. Isso não significa que deve ser usar as mesmas características por toda a página, mas a variação é que deve ser limitada. As pessoas são mais atraídas por GUIs (Guidelines) consistentes e previsíveis.
Por exemplo, a área de compra de um site deve ter um destaque diferente, porém a tal área além de ter um visual mais próprio, mantem um padrão entre si.
3. Alinhamento. É importante que os vários elementos de uma pagina estejam alinhados tanto quanto possíveis, para que isso de fato crie um fluxo visual, tornando mais fácil para o usuário entender a página.
4. Uniformidade e Proporção. Tem de haver equilíbrio na forma como os elementos estão dimensionados e espaçados entre si. O olho prefere elementos do mesmo tamanho e com espaçamento proporcional, fazendo com que pareça natural.
5. Indique agrupamento através de boxes, com similaridade, proximidade, alinhamento, e espaçamentos.
6. Ajuste o peso visual. Atribua diferentes pesos aos elementos visuais, usando cores, tamanho, forma, desalinhamento, contraste, animação, isso ajuda o usuário a navegar em uma página pela ordem correta projetada. Por exemplo, o olho vai notar rapidamente os elementos que são maiores, ou com maior contraste, com cor de funda, ou mesmo com cor quente.
.
.
“O vermelho e o verde não deve serem vistos sem uma cor entre eles” – Tendo cuidado na combinação de cores. Na verdade o Morris foi simplista, já que poderia ter citado que vermelho e verde, ou vermelho e azul são cores opostas, essas cores se não tiverem uma linha branca entre elas (só exemplo) causará confusão no cérebro vulgo ilusão de optica.
Utilizando uma abordagem minimalista para o o número de cores. Ou seja, não faça do seu produto um arco-íris a menos que você saiba o que está fazendo.
Morris pede aos designers escolherem uma escala de 1 a 5, 1 correspondente a não ter uma experiência em UX e 5 se refere a quem já tem uma experiência basta e sabe como utilizar as cores. Assim se um desenvolvedor acha que não tem talento para a arte, mas que ele necessita tomar uma decisão sobre uma determinada interface, que utilize então apenas uma cor. Se alguém pensa que é um bom designer então ele merece usar escala de 3 cores, mas se ele é um especialista já pode usar 5 horas e bem, ele já sabe que pode fazer isso.
A cor de fundo deve ser neutra, branco, cinza, marinho, preto, marrom escuro, porque essas cores trabalham muito bem com a maioria das demais que estarão na página.
Se o indivíduo não sabe quais cores usar deve-se usar tons de uma mesma cor.
Utilize um desses sites para tirar boas combinações para uma aplicação.
http://kuler.adobe.com/
Ambos possuem boas aplicações em Air para utilizar no seu desktop.
Preste anteção aos problemas de visão, mais precisamente dautonismo que afeta 10% dos homens, segundo Morris. O site vischeck.com é útil para garantir que o design é apropriado a esse respeito, e não deve se confiar somente na cor para transmitir informações.
Cores frias, azul, verde – tendem a diminuir quando usadas em relação ao espectador, da mesma forma, cores quentes, o inverso, tal como vermelho, laranja,. Então utilize apropriadamente as cores para o que deseja, como no caso de algo que queira estar próximo do espectador utilize cores quentes.
Bom, essa é a visão do Morris, não há nada novo aí, mas espero que ajudem a agregar mais conhecimento sobre o tema, acontece que, novamente isso não é UX, isso é os passos para se garantir uma boa UX, lembrando que UX é de fato a experiência do usuário, para se atingir a mesma é necessário técnicas e essas são as mais básicas que devem ser respeitadas para o mínimo de sucesso.
_________________________________________
Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath
by S. M. Casey
