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
.
Essa notícia é bem interessante, e no sentido real da palavra, de que nos interessa e muito, o Rafael Martinelli trouxe diretamente da MAX essa informação. Fiquei bastante impressionado com o MoleHill, motivo que me fez escrever esse post dando uma introdução sobre o assunto.
Estarei acompanhando com muito interesse o que estiver acontecendo nesse segmento e sempre que possível vou procurar trazer novidades sobre essa engine.
Mas afinal, o que é MoleHill?
“Molehill” é o nome de código para um novo conjunto de baixo nível, com APIs de aceleração GPU 3D que permitirá avançadas experiências em 3D nas telas através do Adobe ® Flash ® Platform runtimes.
Existem diversas comunidades, frameworks para desenvolvedores poderem ampliar seus horizontes na criação de aplicações 3D, como Alternativa3D, Away3D, Flare3D, Sophie3D ou Yogurt3D.
Durante a AdobeMAX um vídeo muito interessante foi apresentado para os participantes, ele mostra um jogo em 3D com gráficos mais apurados, algo que não deixa nada a desejar a consoles físicos para games, e que, talvez não fosse nada fantástico o vídeo abaixo se o game não estivesse rodando em um FlashPlayer.
Impressionante ver o que a Adobe fez, e contrariando muitos que dizem que o flashplayer requer processamento da máquina, a Adobe fez um game com uma estrutura potente e que requer ZERO, isso mesmo, ZERO de processamento da CPU, utilizando somente a placa aceleradora.
Confira o vídeo antes de continuar o artigo.
.
De acordo com o anúncio feito pela Adobe, no primeiro semestre de 2011, (quando em versão pública beta) a versão do Flash Player irá suportar essas novas APIs, bem como também acontecerá uma atualização do Adobe Flex SDK. Para obter mais informações leia atentamente o Molehill faq:
http://labs.adobe.com/technologies/flash/molehill/#faq
Para a maior parte das suas dúvidas você com certeza encontrará as respostas aí nesse link, portanto vou me fixar a falar das possibilidades de algo assim.
Não será novidade pensar que milhares de desenvolvedores começarão a criar seus games, mas não é só de game que vive o homem, apesar de ser muito bom é claro. Essa engine nos dará possibilidades de experimentar de fato uma nova era da web em 3D. Lembramos que o shockwave não deu certo, não emplacou, mas pelo visto a Adobe aprendeu com o erro e fez uma engine de qualidade, a cada dia mais e mais computadores saem de fábrica com placa aceleradora 3D, ao ponto que isso está se tornando comum, se essa engine é a primeira fase, podemos esperar muito pelo que esta por vir.
Pense nas aplicações 3Ds que poderão ser desenvolvidas, pensem em um showroom virtual, hotsites etc, tudo aquilo que era feito antigamente com as piores gambiarras possíveis, hoje poderá ser realizado com qualidade.
Sou suspeito para tecer elogios a Adobe visto que sou um entusiasta, fiz minha carreira em cima de todos os seus sofwares, e claro, da Macromedia, que hoje é Adobe… portanto fico feliz em saber que ela nunca abandonou o Flash, e mais que isso, se empenhou em criar inclusive um conversor de SWF para HTML5, fazendo com que os desenvolvedores Flash (vulgo flasheiros) não percam seu mercado, afinal, se Flash fará HTML5, certo é dizer que HTML5 nunca fará um SWF e nem chegará perto da qualidade, visto que essa tecnologia com todo respeito ainda está engatinhando.
Mas o assunto é MoleHill, vamos continuar falando de quem vai se dar bem nessa história toda na minha opinião.
.
.
Evidente, ela já se deu bem, e depois e todo o alvoroço e discussão sobre o Flash rodar ou não no Iphone fica aí um susto que a Adobe está dando a Apple, ou não, pois talvez a mesma já previa tal situação e portanto procurou evitar os games em Flash para poder alavancar a AppStore, sem entrar muito no tema, nem são os games 3Ds os mais vendidos na mesma (portanto nem sei porque da preocupação do Steve, talvez parcerias , enfim) mas… certamente essa é uma tecnologia fantástica que faz a Adobe novamente ficar a frente dos demais, como sempre esteve. Afinal, uma plataforma para desenvolvimento de games mais sérios, com suporte a joysticks, volantes etc, (nada pronunciado a respeito mas isso vemos nos vídeos, o volante do XBox sendo utilizado), combinado com um Flash Media Server, um ambiente de multiusuário, online, pode ser realmente devastador (no bom sentido) para o mercado como um todo.
Então não poderíamos deixar de falar quem é que mais ganha com isso.
.
.
O Android tem sido um parceiro do Flash simplesmente porque a Apple não quis ser no seu iOS, e a Adobe já se pronunciou a respeito dizendo que haverá acesso as APis 3D também para as plataformas móveis… fantástico, não só para games, mas como falei, para outros recursos de aplicativos.
A web sempre procurou introduzir o 3D, é uma tendência natural, também sou suspeito para falar do assunto pois sempre apostei no 3D e sou um 3Ddesigner também e obviamente amo o assunto e sempre acreditei que a experiência 3D é muito poderosa, pois ela trata quase todas as sensações visuais que o cérebro pode comportar, dando é claro maior realismo ainda que não haja muitos detalhes gráficos.
Posso dizer que consigo passar horas desenvolvendo algo em 3D sem me cansar, pois me sinto imerso no ambiente, mas não é a mesma coisa para desenvolver algo em 2D.
Enfim, o Android de fato vai se dar bem nessa história, vai abocanhar todo um mercado de 3D para mobile, com milhares de desenvolvedores famintos para migrar diversas aplicações e games prontos para essa engine, para rodar em Flash.
.
Os diversos frameworks que já citei.
.
Dentre eles eu aposto mais no AlternativaPlatform, me pareceu mais robusto, mais acabado inclusive, a maioria dos vídeos que trago aqui são desse framework, no mais, outras como Frare3D e Away3D também me parecem boas, mas como ainda não botei a mão em nenhuma delas fica suspeito comentar, em um futuro próximo farei alguns testes (como designer) e darei a minha visão. Mesmo assim, tanto designer como desenvolvedor terá uma gama de possibilidades bastando ver as suas necessidades, e ter várias opções nesse caso é muito bom.
Vou dar um foco maior a AlternativaPlatform, portanto veja o anúncio feito no blog da própria empresa sobre a Adobe Max.
http://blog.alternativaplatform.com/en/2010/10/16/alternativa-3d-is-free-see-you-at-adobe-max
Confira a qualidade do site:
http://alternativaplatform.com/en/
Uma breve introdução visual:
.
Confira outro vídeo, agora de uma visão externa mostrando o “jogador” do MaxRacer :
.
.
Outro vídeo da Alternativa3D:
.
.
Agora da Frima Studio (http://www.frimastudio.com/), que utilizou a engine usada para PSP do jogo Zombie Tycoon (http://www.zombietycoon.com/EN/index.htm) migrando para Molehill (sim fantático, não o jogo mas a possibilidade) :
.
.
Away3D :
.
.
O primeiro é a sessão de Sebastian (engenheiro-chefe na Molehill):
.
.
O segundo vídeo é da equipe Flare3D, apresentando o Molehill e suas vantagens:
.
.
Away3D e Alternativa3D teams (equipes), ainda sobre seus respectivos frameworks e vantagens:
.
.
E então a Pixel Bender 3D:
.
.
Bom galera, espero que esse post tenha sido uma boa introdução para conhecer o assunto, fiz uma pesquisa vasta para trazer as melhores informações sobre o tema e espero que tenham gostado.
Assim que tiver novas informações interessantes estarei postando, até lá se você também tiver algo a acrescentar não deixe de comentar aqui nesse post.
E que venha o mundo 3D na web.
_________________________________________
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
