UX Samurai

Micro Interações (Microinteractions)

Tue, 18 Dec 2012 06:33:09 -0500

Nesse último evento do Interaction South America ’12, tivemos a presença de ninguém menos que Dan Saffer.

Para quem não conhece Saffer também é autor de vários livros, sendo o seu mais recente Microinteractions.

“Cada vez que você altera uma configuração, sincroniza os arquivos ou dispositivos, ajusta um alarme, faz login em um site, muda o status do seu comunicador instantâneo ou curte alguma coisa, você está atuando com uma microinteração. Elas estão em todo lugar: nos dispositivos que carregamos, nos eletrodomésticos da nossa casa, nos aplicativos de celular e desktop, e até embutidas nos ambientes nos quais vivemos e trabalhamos.” Dan Saffer

Só resolvi comentar o assunto porque ontem mesmo o Google liberou uma nova versão de envio de mensagens no Gmail. Ela é mais prática, e está cheia de micro interações que resolvem problemas já conhecidos dos usuários.

Imagine que você está no seu gmail e cria um novo email para ser enviado, e então você se recorda que parte da informação que quer colocar nesse novo email, está adivinha só, em outro email da mesma caixa, o que você faz para resgatar essa informação sem perder o que já estava escrevendo no atual email para ser enviado? Simples, como de praxe da maioria dos usuários do Gmail você clica na caixa de entrada e pede para abrir ela em uma nova tab, e nela você faz a pesquisa que quer para pegar a mensagem que gostaria de inserir no email que está criando.

Mas e se o novo email abrisse por cima como é atualmente o chat? Seria lindo não? E se você pudesse navegar pelos emails abaixo e fazer a pesquisa com esse email ainda por cima?

Verifique você mesmo o que estou falando (caso a explicação tenha ficado complexa).

Abaixo está um email qualquer, no caso do Notable (aliás, app fantástica para avaliações de websites). E então a minha nova mensagem de email por cima, como um chat. (sim, estou simulando o envio de mensagem para mim mesmo)

Agora uma microinteraction, basta arrastar um arquivo para o corpo do email, se for imagem ficará no corpo mesmo, se for outro tipo de arquivo acontecerá a micro ação vista abaixo:

Ah, mas agora você está perguntando onde está a micro interaction. Afinal isso já existia antes não? Sim, existia, mas perceba que o clips está pressionado, selecionado, indicando que você está anexando um arquivo. O Google investe muito nessas micro interações, e não é a toa, esse tipo de feedback para o usuário é extremamente importante, imperceptível, e isso também é um dos fatores que torna a interface usável.

MOOC - Massive Open Online Course

Fri, 30 Nov 2012 11:51:00 -0500

Recentemente tive uma experiência muito gratificante fazendo o curso Human Computer Interaction de Stanford pelo Coursera. E resolvi compartilhar essa experiência citando aqui um pouco sobre a minha visão do assunto.

Mas antes de começar gostaria mesmo que você assistisse esse vídeo para entender um pouco o que está acontecendo atualmente.

Fantástico não?

Isaac Asimov é para mim o Júlio Verne dos tempos “modernos”. Ele inspirou diversos filmes conhecidos da atualidade, como I.A. ou I Robot. Mas, falarei dele em um post que farei especialmente para esse autor.

O interessante é ver que o ensino já está disponível há muito tempo na internet, desde posts como esse que escrevo, até mesmo vídeos inteiros de aulas, como no iTunes U que oferece diversos cursos e aulas das faculdades mais renomadas do mundo, então afinal, o que mudou?

MOOC, é um termo para Massive Open Online Course, isso já existe a algum tempo, são cursos onde milhares de pessoas se inscrevem, é aberto, e alguns emitem certificados para os que concluem os exercícios. Sim, exercícios, é isso que difere de você assistir um tutorial na internet, ler um post como esse, ou estudar por conta. Eu sou um auto didata, sempre fui, e conheço muitas pessoas assim, nunca parei de estudar, e a internet estava sempre lá para me ajudar. Acontece que esse tipo de estudo não emite um certificado, não comprova o seu conhecimento, você será testado a ferro e fogo pelo mercado de trabalho para provar que sabe.

Portanto, emitir um certificado é senão um incentivo maior para aqueles que querem melhorar seus perfis, quer seja para profissionais experientes que queiram mostrar que estão atualizados, ou para aqueles que estão começando.

Muitos me perguntam porque fiz o curso se já sou qualificado e inclusive dou aulas do assunto. Simples, você confiaria em um professor que não estuda? Que não se atualiza? Eu particularmente não.

Mas e o MOOC? Vamos discutir um pouco esse assunto, sabemos que no Brasil existe um grande preconceito com quem faz cursos online, a impressão é de que o sujeito pagou pelo curso e dormiu em casa, recebeu um certificado e pronto. Mas, e quando esse certificado é emitido por faculdades como Stanford, Harvard, ou Berkeley? Creio que muda, infelizmente, isso porque quem ingressa no segmento de E-Learning no Brasil não são as boas faculdades, elas deveriam estar lá, mas não estão, as que estão são aquelas desconhecidas.

O Coursera no meu ponto de vista tem mudado isso, porque para você ter um certificado não basta fazer o curso, você tem que ter um aproveitamento, no caso do curso de HCI, acima de 80%, dos vários exercícios propostos.

Mas, o que achei mais incrível na metodologia é que alunos também participam no sistema de avaliação de outros alunos. Fantástico, explicar aqui no post ficará extenso, por isso trouxe o vídeo maravilhoso e emotivo da Co-fundadora do Coursera, Daphne Koller. Assista e então continue a leitura.

Percebe? Eu também me pergunto sempre se o tradicional sistema de ensino não está arcaico demais. Eu acredito que sim, essa relação professor, lousa e giz versus aluno, caderno e caneta é atrasado demais, perde-se muito tempo lendo e escrevendo, copiando mesmo, e discute-se apenas com poucos, geralmente um grupo mais seleto em uma sala de aula acaba sempre dominando as conversas com o professor. Confesso, eu sempre fui daqueles que respondiam primeiro e interagia com o professor. Mas… também já estive em situações o qual perdi aulas e me vi sem poder fazer uma pergunta sequer, ou ter condições de entender o que estava acontecendo. Com vídeos isso não acontece, você pausa o professor, você pausa o estudo, faz sua própria grade. E muito mais do que isso, você assiste só aquilo que te interessa, não é obrigado a ver uma aula de algo que já sabe ou domina só porque o restante da sala não tem aquele conhecimento. Quantas vezes você já não presenciou a seguinte situação acontecer:

Aluno: “Mas professor, porque você está explicando isso? Esse tema é básico…”

Professor: “Olha, sinto muito, pode ser básico para você mas não é para todo mundo, eu tenho que explicar.”

Isso faz com que aqueles que poderiam estar avançando sejam prejudicados por aqueles que sabem menos (ou pelo menos, que naquele momento não estão tão informados). Por um lado é socialista (sátira é claro), “equilibra” uma sala de aula, mas também, transforma toda uma nação em mediana. Você não está incentivando pessoas que poderiam fazer a diferença para a sociedade, quer seja para o seu país, ou mesmo para o mundo.

Exemplo disso aqui no Brasil é se um aluno eliminar todas as suas matérias do ano, ele não poderá ir para o próximo, ou pular (será necessário uma burocracia absurda junto ao MEC), ele será obrigado a seguir a turma, e fazer a grade do ano.

Se uma pessoa com 12 anos prestar USP e passar, se ela não tiver o ensino médio completo, não poderá ingressar no curso, isso mesmo, está “incapacitada”, mas como? Se ela passou é porque detêm tal conhecimento.

Infelizmente aqui no Brasil ainda é assim, para que você consiga fazer esse aluno de 12 anos cursar a USP será necessário chamar a mídia para facilitar o sistema burocrático.

Isso é ridículo, e digo isso porque fiquei admirado ao ver que nos cursos do Coursera, as melhores universidades do mundo não colocam restrições de idade. E quando terminei o curso de HCI, as estatísticas foram assustadoras.

+26.000 alunos
130 países
700 completaram todas as atividades (não necessariamente atingiram a média)
E o mais surpreendente. Todas as idades.

Eis o certificado como é:

Atualmente estou inscrito também no curso Think Again: How to Reason and Argue, e acabei de receber a surpreendente informação de que o curso tem 130 mil alunos, talvez por ser um tema que qualquer um possa participar, ainda assim se tratando de um curso de 12 semanas fiquei muito surpreso.

Discuti com algumas pessoas a respeito do assunto MOOC, e as opiniões foram as mais diversas, entre elas de que o contato com o professor, o cara a cara é importante. Eu digo, sim é, mas temos que avaliar o valor agregado, o que agrega mais? Como professor também de E-Learning, eu tive alunos de várias partes do país quando ministrei meus cursos de Design, e é gratificante poder fornecer ensino de qualidade a pessoas de lugares afastados, onde o ensino é fraco e pobre. É isso que o Coursera faz, em escala mundial, e de graça. Eu infelizmente tenho que cobrar para dar um curso, não existe outro incentivo para o tempo gasto, no caso do Coursera tiveram o investimento de milhões de dólares, isso é maravilhoso, a idéia deles é depois cobrar um valor somente pelo certificado, todos poderão fazer cursos online e obter o conhecimento, se você precisa do certificado pagará por ele, o valor ainda não sei mas é um sistema justo, afinal, muitos dos cursos que me inscrevi eu não necessito do certificado, pois são cursos de interesse pessoal.

Se você gostou da informação, divulgue, eu espalhei essa informação para todos os meus amigos, alguns gostaram, outros apenas entenderam como mais um curso online. Não estamos só falando disso, MOOC é algo que está revolucionando o aprendizado, a forma como aprendemos.

Para exemplificar, saiba que do curso de HCI eu assisti apenas 20% das aulas, não fiz todas porque a maioria dos temas ali eu já conhecia, não foi necessário para fazer os exercícios que estavam muito bem explicados. Meu tempo foi otimizado, poderei assistir depois sem qualquer compromisso as aulas restantes, e isso é fascinante. ;)

Segue aqui um link que tem diversos MOOCs

Deixo aqui uma frase que repito sempre para aqueles que me dizem “Não tenho tempo…”

“O tempo é igual para todo mundo, 24h, o que você decide fazer com ele é que determina a sua prioridade, se você diz que não tem tempo, é porque isso não é a sua prioridade, mas sim a minha.”

Don Norman - Interaction South America '12

Wed, 07 Nov 2012 19:58:00 -0500

Don Norman começou a sua palestra com uma simples ação. Pedindo para desligarem as luzes que ficavam em volta do painel de projeção.

Sábia decisão, eu estava me perguntando se ele faria isso, levando em conta quem ele é, porque se estava me incomodando aquelas luzes ligadas e as vezes piscando, sendo que o painel ao centro projetava a apresentação dos palestrantes, que dirá a esse homem que não deixa quase nada passar despercebido.

Com luzes apagadas é hora de começar o show. Norman disse que seu livro “The Design of Everyday Things” está a 25 anos no mercado, cita que teve a sorte de não ter comentado sobre computadores, mas que ainda assim seu livro já está ultrapassado, e ele espera poder escrever um novo livro que dure por mais 25 anos, e a partir disso começa sua palestra. Ele questiona sobre o futuro, se tudo (dentro do ponto de vista do Design) está melhorando, piorando ou está como sempre foi. Sábias questões, ele demonstra com clareza que a opinião da platéia vai mudando de acordo com as perspectivas que ele mostra sobre isso.

Não quero aqui trazer toda a palestra em um post, Norman é Norman, por isso resolvi gravar a mesma, sentei na primeira fileira, onde deu, próximo aos palestrantes a fim de fazer uma gravação sem cabeças a frente =]

#DonNorman Interaction South America ‘12

Sat, 03 Nov 2012 20:03:32 -0400

#DonNorman Interaction South America ‘12

Me and Don Norman #DonNorman #EmotionalDesign #Design #isa2012...

Sat, 03 Nov 2012 18:50:09 -0400

Me and Don Norman #DonNorman #EmotionalDesign #Design #isa2012 #IxDSA’12 #Interaction

Inspiração para User Interface?

Mon, 29 Oct 2012 16:33:00 -0400

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 simples, é normal procuramos referências para nossas aplicações, para criarmos nossas Interfaces e claro, pensar na Usabilidade.

Não é errado procurar referências, mas é complicado fazer isso se você não estiver ciente das suas necessidades, do que quer da aplicação e onde realmente quer chegar.

O problema acontece porque quando pegamos referências a nossa tendência é copiar.. tipo, você pode olhar o Windows 8 e falar “UAU, muito bom, era isso que eu estava procurando…” ou ainda.. olhar o Windows Phone (eu curti demais a usabilidade e interface dele) e dizer: “Fantástico” mas se não estudar a motivação por detrás dessas user interfaces nao vai conseguir criar a sua com a mesma inovação.

É importante o especialista de UI / UX procurar fazer uma reflexão sobre o que quer com a aplicação, o que ela é afinal? Qual foco vamos dar a mesma? Entre outras coisas. Porque se não fizer isso, será influenciado facilmente pelas usabilidades fantásticas vistas em diversas aplicações, e não será incomum querer usar muitos efeitos ou idéias descobertas nas mesmas misturando-as. Se não tomar cuidado poderá estar criando um verdadeiro frankstein.

Tanto o Windows 8, Windows phone, etc, tiveram suas premissas a serem respeitadas, onde afinal queriam chegar. A exemplo disso é o Prezi, eu posso dizer com clareza que a premissa básica deles era de que Apresentações de Palestras são massantes e cansativas, causam sono. Seria necessário maior fluídez nas transições e algum dinamismo a fim de causar impacto no cérebro dos telespectadores, para motivar e dar maior ênfase a própria palestra em si. O Prezi se bem utilizado acaba sincronizando seus efeitos com o tom do palestrante, dando importância e relevância de acordo com o que o palestrante fala. Tal premissa é que levou os criadores do Prezi a inovarem, a criar a ferramenta fantástica que já conquistou milhares de pessoas pelo mundo.

Agora, será que a usabilidade do Prezi é interessante para a nossa aplicação? Aí que está, se você a utilizá-la pode ser que tenha que adaptar alguns recursos antes necessários da sua app para que a usabilidade em questão tenha resultado satisfatório, ou seja, muitos acabam se apegando demais a usabilidade a um recurso ou efeito em questão sem respeitar suas próprias premissas. E não que, suas premissas não possam ser quebradas, mas…. elas devem existir.

Para isso eu tenho uma regrinha básica, simples, porém funcional e que é resultado de anos de experiência.

1. Conheça suas limitações, e quebre-as

Explico, se você se limitar pelo quesito técnico “ah, não dá para fazer isso, aborta”, não vai inovar, a inovação vem primeiro, o desenvolvimento depois, quando os problemas aparecerem é que você vai se virar para resolver, nao crie problemas e limitações antes deles existirem.

Quando se tratar de UI esse é o caminho, mas descobri que também é o caminho na área de desenvolvimento, e aprendi isso com Beck Novaes.É possível ainda que durante o processo de desenvolvimento você descubra novas soluções, mas, se não se aventurar a fazer, se não tentar, não encontrará tais soluções. Então reforço, os limites existem, mas se você os conhece, então sabe onde e como deverão serem quebrados.

2. Conheça as suas restrições, e então inove.

A restrição é o fator da inovação, se alguém dissesse a você “Você pode fazer tudo o que quiser, vamos executar..” você vai pensar tantas coisas que no final nao vai pensar é em nada… por ter muitas opções. Logo, ter restrições descritas como premissas básicas da sua app, é essencial para inovar… é quando estamos amarrados que criamos, é quando estamos presos que procuramos a liberdade pelos meios mais diferentes e inovadores possíveis… não esqueça disso.

3. Hierarquize a informação

E com a informação hierarquizada você será capaz de fazer uma boa app, com uma boa User Interface, pense naquilo que é mais relevante, o que realmente voce quer passar ao usuário, e então dê destaque a isso, nao tente deixar tudo relevante, pois quando você tenta fazer isso tudo passa a nao ser relevante no final das contas, tudo perde o valor… Escolha no máximo 3 coisas com relevância, se possível apenas uma… é nuvem? Mas o que é que vai fazer na nuvem? Então dê relevancia a isso.

Essa regra não tem ordem, o que é importante é pegar a idéia do assunto, absorver que inspiração não vem da visualização de muitas apps famosas, ou mesmo de usabilidades fantásticas, etc. É importante fazer uso das mesmas? Sim, você terá influência, e isso é positivo, mas, isso deve estar em background no seu cérebro, ou seja, o uso constante de boas apps fará com que você assimile e interprete o que é bom e porque o é. Mas, não adianta ir atrás destas apps quando você tem que desenvolver algo, quando quer criar, pois se o fizer, estará sujeito a cópia. Mas óbvio, não recrimino a boa cópia, ou seja, o aperfeiçoamento de uma idéia, mas sim quando você copia uma usabilidade ou interface pela mera falta de objetivo, por não ter nada melhor para por ali.

As referências devem existir mas é importante procurar entender e respirar UX antes de começar a buscar inspiração.

Espero que esse post ajude os especialistas da área a terem o que chamo de inspiração consciente, onde munido de bastante informação e repertório é capaz de criar boas soluções. E então aí sim, buscar referências passa a ter um sentido.

Made with Paper

Sat, 27 Oct 2012 11:25:04 -0400

Made with Paper

Visualização de Dados – Many Eyes – 3

Fri, 26 Oct 2012 10:00:27 -0400

Comentei já no meu primeiro post sobre o assunto a respeito do projeto da IBM chamado Many Eyes.
O Many Eyes é uma plataforma pública, é um projeto para que todos possam usar e explorar os benefícios da Visualização de Dados, porém é claro, milhares de dados entram diariamente e estes ficam a disposição da IBM, muito inteligente por sinal…

No mais, o nosso foco é entender o projeto e como ele funciona, vou ensinar nesse post a como utilizar o Many Eyes, apesar de simples, quero comentar algumas coisas interessantes do ponto de vista conceitual.

Primeiro ponto, vou colocar aqui o link para o projeto Many Eyes

Agora que você está vendo o sistema, vai entender que já existem diversos dados compartilhados pelos demais usuários, sim, você mesmo poderá subir informações e compartilha-las na comunidade do Many Eyes.

Nosso objetivo é subir como dados a palestra dada por Steve Jobs em Stanford, quero coletar de maneira visual como informação o que mais foi relevante dito por ele durante toda a palestra.
Vamos ao experimento.

1. Tela inicial do Many Eyes, perceba que já existem vários estilos de gráficos com dados dos mais diversos.

2. Clique em Upload a Data Set, claro que, vai te pedir login e senha, faça seu cadastro, estou assumindo que você sabe com fazer isso

3. Eu criei o box amarelo, ele não existe, é somente para você ver onde vai inserir os dados.

4. Uma vez que os dados foram carregados irá aparecer essa tela.

5. Agora a parte mais interessante, o Many Eyes te fornece diversos estilos para ver esses dados, no nosso caso eu subi um texto, mas você poderá também subir planilhas, e fazer comparativos de valores, e muita, mas muita coisa.

O caminho eu já dei, espero que explore os recursos dele, chegando nessa tela, basta descer para ver as 23 opções. Eu vou escolher o Word Cloud, onde vai me mostrar a palavra com maior relevância, vamos ao resultado.

6. Eis o nosso resultado, foi gerado pelo Many Eyes em segundos.

Agora o que você pode dizer rapidamente (olhando para essa imagem) o que tem de maior relevância nessa palestra dada por Steve Jobs? Evidentemente LIFE.
Em segundo vemos College que é Universidade, e é onde ele estava, a hierarquia informativa está aí, esse um tipo de Visualização de Dados que escolhi, temos outros estilos.

Segue aqui agora o link público do nosso teste.

Espero que vocês tenham gostado.

Visualização de Dados – Uma abordagem sobre UI – 2

Thu, 25 Oct 2012 10:00:51 -0400

Ainda continua o assunto sobre Visualização de Dados voltado a User Interface que comecei aqui, vamos agora abordar o tema de uma maneira mais simplificada e interessante.

É muito comum algumas pessoas ficarem perdidas nesse assunto e ainda por cima não conseguirem avançar no tema sem pensar nos gráficos tradicionais, pizza e bastões.

Quero lembrar que os gráficos de pizza e bastões são úteis, mas eles são métodos quantitativos, ao passo que quando você precisa analisar dados mais complexos em uma escala maior, tais gráficos não suprem a nossa necessidade.

O entendimento desse tema é tão interessante que vai fazer com que você tenha uma visão diferente para absorver a informação de hoje. Isso porque estamos acostumados a buscar as informações também pelos meios tradicionais, pesquisar se torna algo absurdamente cansativo, mas existem métodos mais práticos para se fazer isso, e um deles é a Visualização de Dados, ela está presente em diversos formatos, não só nós é trazida através de softwares desenvolvidos para isso. A exemplo típico está uma área urbana por onde passamos, se vemos muitas mansões e poucas casas simples, supomos claramente que ali vivem pessoas ricas, não é simples? Claro, mas será que fazemos isso de maneira consciente ou inconsciente? Certamente fazemos isso de maneira inconsciente, seria muito mais interessante se racionalizarmos a esse respeito, desta forma conseguimos absorver a informação de vários outros meios, e com isso repassar as idéias para as nossas interfaces.

Sei que seu olho já está sendo chamado para a imagem abaixo, mas… vamos fazer um exercício simples, se eu te perguntasse que preciso saber quais são as áreas mais urbanas e populosas do mundo, de maneira rápida, como e de que forma você pesquisaria?
Vamos, seja sincero com você mesmo, certamente você começaria a fazer pesquisas na internet para ver se alguém já nao se encarregou desses dados, e não só isso, iria até a Wikipedia, procuraria nos diversos meios de comunicação existentes… a pergunta é, quanto tempo você levaria até ter tais informações.

Agora, respire, e veja o poder da Visualização de Dados.

Simples não? Eu apenas pesquisei por imagem de satélite do mundo que fosse noturna, com isso eu teria as áreas mais claras sendo as áreas mais populosas.
A diferença está em como você pensa e como alguém que enxerga dados pensa, se você não for capaz de mudar a maneira como lida e enxerga a informação não será capaz de criar soluções inteligentes para a Visualização de Dados.

Desta forma você consegue claramente dizer quais regiões no mundo são mais populosas e urbanas, no mais, tal informação não foi gerada por um software, tais dados estavam ali, disponíveis para todos e gratuitamente.

Você saberia dizer rapidamente qual área dos EUA é mais urbana e populosa? Lado Leste? Oeste? Sul? Norte?
Vamos ver:

Bom, com isso acho que podemos concluir que a área Leste dos EUA é a mais populosa.
Percebe que se trata da forma como você busca a informação?

Espero que com esse post simples e objetivo eu possa ter aberto uma porta interessante na forma como você antes visualizava as interfaces para como poderá enxergar agora a informação.

E para continuar nossa sequência de softwares e aplicações que atuam no mercado de Visualização de Dados, segue:

Fidg’t é um aplicativo desktop que usa tags do Flickr e do Last.fm para que você visualize a rede e suas atividades através de marcações.

Last.Forward é uma ferramenta open-source para visualizar qualquer rede social de usuário da Last.fm, incluindo as relações entre os outros usuários.

Stack É um visualizador de dados para o Digg, ele trabalha de forma dinâmica e em tempo real.

Swarm É outro visualizador para o Digg, porém mais pobre, no entanto ele tem uma versão ScreenSaver…

Research Chronology mostra as relações entre os caminhos de um aluno de pesquisa utlizando o seu favoritos do Del.ici.ous ao longo de um semestre. É um projeto bem interessante e inclui marcadores para mais de 270 websites.

Visualização de Dados – Uma abordagem sobre UI

Wed, 24 Oct 2012 15:59:58 -0400

A visualização de dados é um tema que gosto muito, na verdade, sou apaixonado por ele. Posso dizer que você leitor encontrará facilmente um material vasto na internet sobre o assunto, mas, aqui quero trazer a minha visão sobre o tema e claro, o material que selecionei ao longo do tempo.

Muitos confundem a visualização de dados com infográfico, é importante salientar que não é a mesma coisa, porém, o infográfico é sim uma forma simplificada de visualizar dados e informação, porém, muito mais informação que dados propriamente dito, daí o nome info-gráfico (hífen para enfatizar).

A visualização de dados tem por objetivo pegar aquela quantidade absurda de dados, exemplo típico, uma planilha em excel, e transformar em gráficos que facilitem a compreensão desta informação.

Para a galera que sempre trabalhou com RIA, isso não é novidade alguma, já que a maior parte das aplicações enterprise que fazemos tem como objetivo exatamente isso, dar possibilidade a entrada de dados, e no final o retorno dele em forma de gráfico.

Tudo bem fazer isso em uma aplicação desktop ou web, para uma empresa específica etc, ou seja, um sistema encomendado, mas… será que o público geral pode fazer uso da visualização de dados? Sim, existem ferramentas diversas que possibilitam você pegar dados e inserir nessas aplicações para fazer uma visualização deles em forma de gráfico. Quando pensamos em dados pensamos unicamente em planilhas não é mesmo? Mas podemos fazer uso até mesmo de um livro, sim, um livro com informação é dados, e você pode subir um livro inteiro em um sistema para coletar o tipo de informação desejada através dos gráficos.

Ah, ainda estou falando grego? Calma, com o tempo e os demais posts que virão tudo irá se esclarecer.
A princípio quero citar que uma das grandes autoridades no assunto é senão uma brasileira, isso mesmo… conhecida internacionalmente, Fernanda Viégas estudou linguística, engenharia química e educação no Brasil e nos Estados Unidos antes de finalmente se dedicar ao design gráfico. A mesma teve um merecido reconhecimento ao ser incluída na lista de mulheres mais influentes do mundo da tecnologia da revista FastCompany.
Em parceria com a IBM ela criou o ManyEyes, nome sugestivo inclusive, cuja função é dar acesso ao público geral uma ferramenta poderosíssima para leitura de dados que os transformam em gráficos, ou seja, para a visualização de dados.
Segue palestra da mesma no TED São Paulo, nela Fernanda aborda sobre a aplicação e mostra como ela funciona, vale uma espiada… garanto.

Agora, porque eu dei o nome do post como Visualização de Dados – Uma abordagem sobre User Interface? Simples, queria comentar o quanto o estudo dessa matéria poderá melhorar o desempenho de Designers e Desenvolvedores que trabalham com apps.

Toda e qualquer aplicação hoje lida com um dilema que é; como passar a informação de forma correta e legível ao usuário.
A visualização de dados é o que chamo de Usabilidade Visual, é parte do processo de usabilidade tradicional, ela trás e simplifica dados que muitas vezes arquitetos e outros tentam trazer a tona de forma tradicional, ou seja, em colunas, lists, com o formato planilha.

Quero com esse post inspirar você que atua na área a respirar a idéia da visualização de dados, ela mexe com o psicológico do usuário, ela simplifica a informação para o nosso cérebro, deixando ele livre para compreender o restante de uma aplicação.

Como farei uma série de posts sobre esse tema, trazendo a cada um deles mais curiosidades, neste vou mostrar alguns bons exemplos da Visualização de Dados.
O meu objetivo não é falar da história e como surgiu isso, tal informação você pode pegar aqui mesmo, na Wikipedia.

Vamos agora a algumas aplicações interessantes:

Narrativas 2,0 visualiza música. Diferentes faixas de música são segmentadas em canais únicos que são mostrados em uma estrutura tipo ventilador.

Liveplasma é um aplicativo de visualização de música e filme que tem como objetivo ajudar você a descobrir outras músicas ou filmes que possa ser do seu interesse. Digite o nome de uma banda, artista, cineasta, ator e o Liveplasma irá mostrar a relação deste com outras pessoas, bandas ou filmes. Experimente pesquisar por Coldplay.

Tuneglue é outro serviço de visualização musical. Basta digitar qualquer artista ou banda na caixa de pesquisa e tecle enter. Um círculo aparece representando aquela banda. Você pode em seguida expandir e o resto vamos dizer, é intuitivo. Ao clicar em “releases” você pode encomendar seus álbuns da Amazon, aí sim hein.

Looks Del.icio.us é uma coleção de diferentes visualizações de favoritos do Delicious

Arc é um produto da Digg Labs que mostra os últimas Diggs, e as relações entre os usuários que os enviaram. Existem dois modos de velocidade diferente.

Existe ainda algumas dezenas de aplicações de visualização de dados na minha coleção, a cada postagem tratando do tema trarei mais para serem exploradas.

Espero mesmo que o assunto desperte o prazer pelo tema que é de suma importância para nós que lidamos com grande volumes de informação que devem ser trabalhamos nas User Interfaces das apps.

Usabilidade Mobile – Uma visão de Jakob Nielsen

Fri, 19 Oct 2012 16:14:00 -0400

É 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 sobre o que Nielsen pensa a respeito vou tecer comentários sobre a Usabilidade Mobile, ou melhor, sobre o próprio Mobile.

A Usabilidade nos dispositivos móveis não tem o mesmo peso que a usabilidade desktop, seu peso é muito, mas muito maior. Quando pensamos em desktop geralmente pensamos em aplicações e websites, a usabilidade do sistema operacional etc. É importante enfatitzar que em frente ao desktop o usuário tem foco total, ele senta em frente ao seu computador, abre a aplicação e começar a mexer, ou mesmo começa a navegar na internet, ele pode minimizar, fazer outra atividade e então voltar. Ja no mobile não é a mesma coisa, o foco do usuário está prejudicado. Ele geralmente está fazendo outra atividade principal, assistindo tv, comendo com os amigos em algum restaurante, almoço, etc, em algum transporte público, e por aí vai. O seu celular é foco secundário, ele mexe, dá um checkin aqui, vê um Facebook ali, um Tweet… que seja, mexe, para e volta a atividade principal.
Portanto, a importância de se ter uma boa usabilidade para prender o foco do usuário não é algo importante, é algo vital para a sua aplicação.
Fazer com o que o usuário a baixe já é o primeiro esforço que o desenvolvedor vai passar, porém, o segundo será realmente ter a atenção do usuário, ter a sua motivação para o uso, eu posso dizer que 50% disso está na Usabilidade, o restante é o valor agregado, em aspectos bem generalistas estou falando.

Alguns desenvolvedores acabam apelando para o push, assim de tempos em tempos o usuário lembra daquela aplicação que baixou, usou uma vez e nunca mais usou…. porém, o push se usado de maneira exaustiva passa a forçar o usuário a deletar a app. Mas o assunto é Nielsen, e vamos ver o que ele diz a respeito desse assunto:

Quais são os maiores erros cometidos ao desenvolver sites e aplicativos para dispositivos móveis?

Nielsen aponta que o maior erro é o touch, muitos desenvolvedores não se preocupam com o tamanho dos botões e não entendem que a Guideline aponta o tamanho mínimo possível, e não exatamente o tamanho mais indicado, o correto. Ele aponta que os olhos são mais rápidos que o dedo, e portanto além do tamanho do botão ter que ser grande o suficiente para ser visto, o mesmo tamanho ajuda a seleção rápida pelos dedos.

Outro erro é a briga e disputa dos setores de uma empresa, todos disputam por atenção, e quando tudo se destaca, no final, nada acaba se destacando, então é importante hierarquizar a informação e definir quais as prioridades da app ou site, e entender o que se quer passar ao usuário.

Outro ponto importante, é o quanto de informação o usuário consegue armazenar no seu cérebro ao usar um site ou app mobile, e é pouca coisa. Porque apesar de nosso cérebro ser capaz de armazenar grande quantidade de dados, ele falha ao guardar pequenas informações dispersas, portanto é necessário ponderar nesse contexto, ainda que, sabemos que devemos inserir pouca informação para que o usuário se lembre delas, não podemos apenas distribuí-las por diversos cantos, informação fragmentada raramente é lembrada, mais vale toda informação em um único local para validar o contexto.

Ele também cita o fato de avaliar o objetivo da app, para não seguir a maioria, se sua app tem como conteúdo algo objetivo e direto, faça ela objetiva e direta, não tente faze-la divertida, só porque todos fazem apps divertidas, observe porém que divertido não é o mesmo que lúdico…

Agora, cuidado para não deixar a app ser avaliada pelo usuário final, passe a mesma por especialistas em usabilidade, teste exaustivamente, porque senão você terá o desprazer da mesma ser desqualificada pelos usuários na AppStore por exemplo, e isso não terá volta, e o que geralmente os usuários desqualificam a princípio é sempre a Usabilidade, ela é o fator fundamental da primeira avaliação crua da app. O usuário tenta usar, não consegue, e então faz questão de dar poucas estrelas para a mesma e irá reclamar dela.
Ao passo que se o valor agregado for baixo, para ele é irrelevante, apenas vai achar que a app não serve para ele, ou se o design não for bonito, irrelevante, apenas vai achar que não é talvez o gosto dele, mas usabilidade é universal, o usuário nunca vai se achar burro, portanto reflita a usabilidade mais uma vez.

Quando o Design é contra o Design

Tue, 07 Aug 2012 08:20:00 -0400

Sei que o título do artigo é no mínimo curioso, mas a idéia dele é exatamente essa, tratar de como e quando o Design pode ser contra o Design.

Eu atuo na área de Design há muito, muito tempo, digamos, desde os meus 15 anos, em diversos segmentos do Design até chegar ao Design Digital que tanto amo, focado hoje exclusivamente em UX/UI Design. No entanto, algo se repete sempre indiferente da área do Design, e é quando o Design pode ir contra o Design, sem mistério, estou falando do Benchmark.

Benchmark de Design é quando você busca diversas referências sobre aquilo que quer criar, para inspirar e facilitar a criação, é discutido sobre o Benchmark na fase de Braimstorm.. quando você procura olhar todas aquelas referencias visuais e procura ver o que pode tirar delas.

O Benchmark é fator fundamental na criação de algo na área de Design, e falando de User Interface não é diferente. Você só consegue criar uma User Interface do zero, sem qualquer referência quando já fez milhares delas, logo, o seu Benchmark já está no seu cérebro, de tudo que já viu e já fez ao longo dos anos…

Esse Benchmark não é perigoso, perigoso é o Benchmark que é trazido a você Designer, é quando todos os envolvidos em um projeto lhe traz referências visuais, para inspirá-lo.
É óbvio que isso irá facilitar o seu trabalho, isso é incontestável, mas há um fator psicológico que deve ser trabalhado, do contrário, o Design que foi trazido a você irá ser contra o Design que será feito.

O problema existe porque as pessoas que lhe trazem as referências muitas vezes se prendem totalmente a ela, e quando o Designer é novato, o que ele faz é ceder a pressão, e isso significa copiar totalmente o estilo daquilo que lhe foi trazido como referência… e nada se cria.. tudo se copia, eis a desculpa.

Diria que, a arte da cópia não está em espelhar um layout, e sim em se inspirar e melhorar o que já foi feito. Fizeram um layout bonito? Você gostou? O estilo é bacana? Há um ótimo contraste e as cores foram bem escolhidas? Ótimo, utilize como referência alguns desses fatores e faça algo melhor… sempre.

Quando eu estava começando a desenhar (tinha lá meus 10 anos) meu pai (ex-publicitário e pintor de quadros) me disse uma frase que me ajuda até hoje “Não utilize a borracha, ela não te ajuda a criar algo novo e melhor, ela apenas esconde o defeito, mas não te inspira….” Parte do conselho é esse, e termina me dizendo que o ideal era quando errasse um desenho, pegar e amassar o papel, começar um outro do zero, e ele sairia melhor, e sempre melhor. Isso seria utilizar o seu próprio desenho como Benchmark.

Hoje eu faço isso com layouts, utilizo minhas próprias criações como Benchmark, a técnica utilizada é a seguinte, eu começo a criar do nada qualquer User Interface, e geralmente as pessoas passam pela minha mesa e dizem ”Nossa Edu, isso não está legal…” é normal, e é assim que tem que ser, o que estou fazendo é criando um processo cerebral para inspiração, é quando então jogo fora aquela arte, e começo a criar outra, e melhoro algo que não havia pensado.

Mas afinal, quando então o Design está contra o Design? É quando você está preso ao Benchmark, e ísso mesmo se esse Benchmark for seu, se o layout de referência tiver sido criado por você. Acredite, o desapego a arte é fator fundamental de inspiração. Saber amassar o papel e jogar fora o seu desenho só irá fazer com que você se torne um expert… mas… se apegar a um detalhe do desenho que você fez e achou que ficou bom, e então refinar aquilo ao máximo, só irá te limitar.

Quando alguém lhe trouxer os Benchmarks, entenda o que tais pessoas viram naquelas referências e não a referência em si, eu analiso porque uma determinada pessoa gostou de tal e tal layout, percebo como o Designer daquele layout utilizou o contraste, as cores, como ele posicionou os elementos, o tamanho desses elementos, os agrupamentos, etc.. analiso tudo isso e claro, o contexto daquela aplicação, site, etc. Só então a partir disso procuro refletir e começar a minha criação.

Errar é normal, mas, insistir no erro… Portanto, não ceda a pressão, eu chamo isso de “agradar gregos e troianos” Uns gostam daquela referência ali, clean, com aquele pattern X, etc, o outro prefere aquele layout cujos botões estão em destaque, e então se refere a disposição dos elementos e assim sucessivamente. Não se prenda a isso, se você é o Designer você sabe o que está fazendo, como e porque vai conseguir não agradar gregos e troianos, mas o reino inteiro…

É importante ter isso em mente, porque a maioria dos novatos cedem a pressão, alguns até copiam como disse, o layout inteiro que foi inserido no Benchmark, já que, o contexto é outro mesmo, justifica ele. Porém, o que acontece é, em certo tempo ele resolve a demanda, mas não se inspirou e não melhorou seu próprio expertise. E fazer arte por demanda, não é arte, é artifício!

Esses são desafios constantes da vida do Designer, quer seja ele da área que for, ele está lidando com o fator inspiração, e criar não é algo fácil, eu costumo dizer que “Minha profissão torna o mundo um lugar melhor para se viver” do ponto de vista estético e funcional é claro, já que, para onde você olha, há design, o computador que você utiliza para ler esse artigo (espero que seja um Mac) foi feito por um Designer, desde o produto físico até o sistema operacional, terminando na Interface do browser, sem falar é claro, no local que você está sentado nesse momento, se está ruim, culpe o Designer de produtos, ele não pensou na ergonomia, se está confortável.. bom… Design é isso, mas não deixe o Design ser contra o Design, Inspire-se…

Usabilidade Mobile – Introdução

Tue, 15 May 2012 12:02:07 -0400

É isso aí galera, estou de volta.

Depois de uma certa experiência com usabilidade mobile, tanto Android quanto iOS (em breve vou abordar também sobre Windows Phone), resolvi criar alguns posts para tratar do tema.

Nessa introdução vou comentar sobre o que é a Usabilidade Mobile e abordar um dos primeiros problemas enfretados pelos arquitetos de informação na área.

Para entender o assunto tratado é necessário que você seja arquiteto, desenvolver ou designer voltado ao mundo mobile.

Usabilidade Desktop X Usabilidade Mobile

Vou começar tratando desse tema, afinal, sabemos que a maioria dos arquitetos iniciaram suas atividades com websites, aplicações desktop, etc, no geral, estão acostumados a pensar no contexto do Desktop. E o que seria isso?
Quando pensamos em uma aplicação desktop pensamos em todo o espaço que o mesmo nos oferece, temos a tal área quente que sabemos que fica na esquerda superior, temos o percorrer dos olhos que corta a página da direita superior a esquerda inferior e todo aquele processo já conhecido pelos profissionais da área de AI. Logo a Usabilidade é dentro desse contexto, e o que acontece é que muitos arquitetos acabam tentando utilizar esse processo na área Mobile, o que obviamente não funciona.

Resta dizer, para aqueles arquitetos que possuem uma experiência com aplicações web RIA, ou aplicações que rodem no Desktop, diferente dos arquitetos puramente Web, garantem uma vantagem quando se trata da navegação fluída, que é também experimentada no mobile.

A Usabilidade Mobile é totalmente diferente da usabilidade web no desktop, ou da usabilidade de apps para desktop. Eu chamo de Usabilidade de Imersão.

A Usabilidade de Imersão tem confundido diversos arquitetos nos últimos tempos, e não é incomum pegarmos aplicações cuja navegação está comprometida, exatamente porque foi pensada de maneira errada, foi pensada através da visão desktop e não da visão mobile.

Quando falamos em imersão estamos falando em como o usuário enxerga as apps no mobile e como ele navega no mesmo. Ele está imerso naquele mundo o contexto é bem específico, podemos separar da seguinte forma, topo com navegação, conteúdo, e base as vezes com navegação.

Mas afinal, porque estou chamando de imersão? Porque é raro você clicar em alguma ação de algum botão e não sair da tela em que está para outra, 90% das vezes a sua tela é trocada, você não tem apenas um detalhe que é carregado, ou apenas uma pequena informação que é alterada, geralmente ao se clicar em ações o usuário se depara com a próxima tela que vem até ele, pelas diversas formas de transições que podem ser utilizadas (vou abordar o assunto transições na usabilidade mobile em um outro post). Os outros 10% ficam com alerts que aparecem, lists que são utilizadas, etc.

Portanto, vamos agora falar de como funciona o Fluxo Mobile, ele na maioria das vezes percorre da esquerda para a direita, conforme o usuário vai clicando para navegar uma próxima página aparece vindo da direita. Essa é a navegação mais tradicional e por onde começam a atuar os arquitetos, e logo, onde acontecem os primeiros problemas de fluxo que podem ser encontrados.

Nesse post vou tratar do maior problema que percebi ocorrer na maioria das apps desenvolvidas pelos novatos. Para isso vou fazer uso da imagem abaixo que nos ajudará a entender esse fluxo e seu problema com o usuário.

A idéia é bem simples, vamos supor que temos uma navegação tradicional, o usuário tem que fazer algumas ações e finalizar a mesma na tela 3, onde temos o botão [finalizar atividade]. Estou apenas supondo 3 telas, mas geralmente os fluxos nas apps acabam abordando 5 ou mais telas.

A navegação ocorre conforme a seta verde, observe, você clica em avançar (indiferente do que faz a sua app, é apenas um exemplo prático), passa para a segunda tela, e então a terceira, que poderá finalizar ou avançar, indifere. Supondo que o usuário vai finalizar ação, o que acontece então? Geralmente os arquitetos respondem a esse problema voltando a tela inicial, mas, e quando o usuário tem como disponibilidade voltar para a tela 2, ou a tela 1? O que ocorre é que os arquitetos acabam preferindo jogá-lo para a tela 2, já que, assume a premissa de que se o usuário quiser, poderá ir para a tela 1 clicando em voltar, uma etapa a mais não é problema, só que, se temos 5 telas a coisa começa a complicar. Esse fluxo de retorno da seta vermelha pode ser quebrado da seguinte forma, a tela 4 é apenas um alert que inseri para demonstrar a solução.

Solução.

O Alert sobe, dando a opção ao usuário para voltar para a tela 1, ou a tela 2. Mas, não acaba aí, o que não pode ocorrer é o arquiteto utilizar apenas os botões e inserí-los em uma quarta tela que também viria da direita. Não mesmo, isso porque ao fazer o retorno você sairia da tela 4 diretamente para 1 utilizando a transição que viria da esquerda para a direita. O que acontece é que você confunde o usuário, ele passa a não entender mais o fluxo da sua aplicação, pois ele assume a idéia de que a tela anterior é a 3 e não a 1, só porque apertou o botão para voltar a aquela tela, esse conflito acontece no cérebro do usuário, já que, ele sabe que clicou no botão para voltar a tela 1, mas as transições indicam um fluxo reverso.. e aí mora o perigo. O Fluxo é a forma como trabalhamos a usabilidade no ambiente Mobile, se utilizado de maneira errada, o problema passa a aparecer, e o usuário passa a se confundir.

Nessa solução eu apenas inseri um Alert, ele virá de uma transição da base para o topo, assim mostrando que é uma ação diferenciado do fluxo tradicional, o usuário irá clicar no botão para voltar a tela 1 (tela inicial), e a mesma será carregada atrás desse alert, ao mesmo tempo o Alert desce, do topo para a base, sumindo, e a tela inicial se mostrará. Esse fluxo trabalha a mente do usuário de forma que ele passa a compreender o fluxo da sua aplicação.

Transições não são meros enfeitos que você usa para enfeitar a sua aplicação, elas respeitam e demonstram como é o fluxo da sua informação, a relevância, e claro, a sua hierarquia.

Espero com esse post despertar o interesse pelo estudo sério do segmento, sabemos que, iOS, Android e demais sistemas operacionais Mobile possuem suas próprias Guidelines, que inclusive já abordei nesse blog, as Guidelines existem exatamente para engessar parte da arquitetura a fim de que não sejam criadas aberrações, mas… não impede a inovação. Exemplo disso é a nova interface feita pela app do Facebook, bem como o menu principal da aplicação Path.. ou ainda, a fantástica usabilidade das app Flipboard, tanto para iPhone quanto para iPad.

"To design is much more than simply to assemble, to order, or even to edit; it is to add value and..."

Mon, 14 May 2012 16:43:21 -0400

““To design is much more than simply to assemble, to order, or even to edit; it is to add value and meaning, to illuminate, to simplify, to clarify, to modify, to dignify, to dramatize, to persuade, and perhaps even to amuse.””

- Paul Rand

UX Specialist – Links para “entrar na profissão”

Mon, 14 May 2012 16:40:59 -0400

Vamos a mais um post, porém esse um tanto quanto particular, com repercussão dos artigos 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.

Don Norman: 3 maneiras pelas quais o design te faz feliz

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.

UX BOOKS

UX Primer

The Design of Everyday Things by Don Norman
Dont Make Me Think by Steve Krug
Não me faça pensar, Steve Krug o mesmo de cima só que em português

Design Thinking

Sketching User Experiences by Bill Buxton
Emotional Design: Why We Love (or Hate) Everyday Things by Don Norman
The Inmates Are Running the Asylum by Alan Cooper

.

Strategy

Subject To Change by Peter Merholz, Todd Wilkens, Brandon Schauer, and David Verba

Process

The Elements of User Experience by Jesse James Garrett
About Face 3 by Alan Cooper, Robert Reimann, and David Cronin
A Project Guide to UX Design by Russ Unger and Carolyn Chandler

.

Principles

Designing for the Social Web by Joshua Porter
Designing Interfaces by Jenifer Tidwell
Designing Visual Interfaces by Kevin Mullet
Information Architecture for the World Wide Web (the Polar Bear book) by Louis Rosenfeld and Peter Morville
Information Architecture: Blueprints for the Web by Christina Wodtke and Austin Govella
Designing Web Navigation by James Kalbach
Web Form Design by Luke Wroblewski

.

Activities

Usability Engineering by Jakob Nielsen
Handbook of Usability Testing by Jeffrey Rubin and Dana Chisnell
Observing the User Experience by Mike Kuniavsky

.

Documentation

Communicating Design by Dan Brown

.

Extra Credit

Set Phasers on Stun: And Other True Tales of Design, Technology, and Human Error by S. M. Casey

.

UX BLOGS

Konigi by Michael AngelesTips, tools and techniques for being a better user experience designer
Disambiguity by Leisa ReicheltThe ins and outs of designing a product with an existing, and passionate, community
EverydayUX by Alex RainertA fresh look at the world around us through UX-tinted glasses
Graphpaper by Christopher FaheyCritical analysis of some of the toughest issues facing UX designers today
inspireUX by Catriona CornettCubical-wall worthy quotations from a variety of practitioners on how and why to create positive user experiences
Bokardo Social Design by Joshua PorterFor everything you need to consider when designing socially-focused stuff
Logic + Emotion by David ArmanoReusable visualizations and valuable synthesis at the intersection of user experience design, marketing and business
Putting People First by ExperientiaA great resource for all things UX from around the globe
Brain Sparks by User Interface Engineering (UIE)Inside the brilliant minds of user research pioneer Jared Spool and his team
Design for Service by Jeff HowardInsights into all the ways companies need to be communicating with their customers, outside of their websites
UX Booth by Redd Horrocks, Matthew Kammerer, David Leggett, and Andrew Maier

.

UX PUBLICATIONS

Boxes and ArrowsJournal dedicated to discussing, improving and promoting the work of the information architecture community
interactionsMagazine including timely articles, stories, and content related to the interactions between experiences, people, and technology, published by the Association for Computing Machinery
UXmattersInsights and inspiration for the user experience community written by many distinguished practitioners
Core77Industrial Design content and community site articles, discussions, interviews and resources

.

LOCAL EVENTS

.

ORGANIZATIONS

.

MAILING LISTS

.

WEBINARS

UIEs Virtual SeminarsA monthly series of online seminars giving you the chance to hear the latest perspectives in the world of design from the fields premier experts.
$129 each. 90 minutes.
Rosenfeld Medias Future Practice WebinarsThe cutting edge of contemporary user experience research and design methods and practices.
$99 each. 60 minutes.
Adaptive Paths Virtual Seminars$129 each. 75 minutes.
Smart Experience online material

.

WORKSHOPS

UIE RoadshowIn this full-day, in-depth seminar youll discover the key experience-design factors, analyze your teams strengths and weaknesses, create an experience vision, and learn the role of delight.
AdaptivePaths UX IntensiveThis four-day workshop series is for experienced professionals wanting to take their practice to the next level.
Cooper U A practical collection of courses that help product team members improve their effectiveness from early planning all the way through implementation.

.

CONFERENCES

Inspirational

Good Experience Live (GEL)A conference and community exploring good experience in all its forms in business, art, society, technology, and life.
IDEA ConferenceThe worlds foremost thinkers and practitioners sharing the big ideas that inspire, along with practical solutions for the ways peoples lives and systems are converging to affect society.
Adaptive Paths Managing Experience (Mx)Thought leaders from major corporations show you how smart and visionary management will help you successfully compete in a difficult economy.

.

Practical

UIEs User Interface Conference Examining the biggest issues in the world of web design, information architecture, and usability.
NN/gs Usability Week A three-day usability camp, a three-day intensive session on interaction design, and several specialized, day-long tutorials on core usability topics. Come for as few or as many days as you want.
UPA Tutorials, workshops, Experienced Practitioners program, then two and a half days packed with presentations, Idea Markets, and opportunities to network with other user experience professionals.

.

Mixed

IxDA Interaction Conference Three days of inspirational and tactical sessions geared at anyone who practices Interaction Design, as well as a day of pre-conference workshops.
IA Summit The premier gathering place for information architects and other user experience professionals. Two days of pre-conference sessions, two keynotes and over 50 presentations.
Adaptive Paths UX Week A mix of inspiring talks from recognized thought leaders and hands-on workshops delivering takeaway skills, this event delivers for user experience professionals at all levels directors, managers, and practitioners.
UIEs Web App Summit The four-day Summit includes two days of intensive full-day workshops and two more days of featured presentations from world-renown experts, to give you fresh perspectives and new insights on todays web app design challenges.
UX Australia 3-day user experience design conference, with inspiring and practical presentations, covering a range of topics about how to design great experiences for people.
UX London A unique three-day event combining inspirational talks with in-depth workshops presented by some of the industrys biggest names.

.

Academic

ACMs CHI The premier international conference for the field of human-computer interaction.

.

SCHOOLING

Human Computer Interaction

Human Computer Interaction Institute at Carnegie Mellon University
(where I received a bachelors and masters degree)
Master of Science in Information HCI Specialization at University of Michigan
Full list of HCI degree programs

.

Interaction Design

Master of Design in Interaction Design at Carnegie Mellon University
Master of Fine Arts in Interaction Design at School of Visual Arts
(starting fall 2009)
Undergraduate minor in Interaction Design at Savannah College of Art and Design
http://www.designdeinteracao.com.br/ Puc de Minas
Pós na FIT de Design de Interação Curso recente criado na Faculdade Impacta de Tecnologia – SP capital

.

Misc

Interactive Telecommunications Program at NYUs Tisch School of the Arts
Institute of Design at Illinois Institute of Technology

IxD - Design de Interação

Sat, 12 May 2012 00:14:00 -0400

Talvez você já tenha visto a sigla IxD e ficou sem entender do que se trata, pois bem, ela significa Interaction Design, ou Design de Interação (DxI), não gosto da sigla em português, seria o mesmo que utilizar uma sigla EU ou XU (Experiência do Usuário) para definir UX (User Experience), portanto vamos utilizar a sigla correta, IxD.

Mas afinal, o que é IxD? Design de Interação é a mesma coisa que UX? Certamente não.
Ao passo que a UX é a experiência final sentida pelo usuário, o IxD é a matéria que trabalha os melhores aspectos do desenvolvimento de uma boa UX, pois visa entender e compreender o usuário para criar os bons métodos na criação de um produto, no nosso caso, de uma aplicação usável, funcional e satisfatória.

Certamente são muitas as matérias da área de design, mas faço questão de trazer a vocês as mais significativas, as que mais estão agregando valor aos projetos voltados a aplicações, temas que de fato estão no auge e que constroem a melhor UX possível. Temas que foram ignorados a tempos e hoje se está dando o real valor pelas grandes empresas. E um desses temas certamente é IxD.

Como IxD é uma abordagem também conceitual, ainda há divergências sobre sua definição, você encontrará muitas idéias diferentes a respeito do mesmo tema, e se por um lado isso pode ser ruim por outro a discussão é boa, já que começa a definir um pouco mais algo que no meu ponto de vista sequer pode estar engessado, ficou confuso? Você vai entender.
Acredito que IxD estará sempre em mutação, e o motivo é simples, tudo está em mutação, vejamos abaixo o que é IxD.

Design de Interação, o nome praticamente diz tudo, ou não, depende muito do seu repertório. Interação para algumas pessoas pode ser a relação entre uma pessoa e outra, mas também é no caso do nosso tema a relação entre um usuário e um produto.
O que temos de interativo quando pensamos em relação a interfaces?
Games talvez seja a sua primeira opção, e é um dos melhores exemplos, foi lá que essa matéria se desenvolveu bastante, pois era necessário entender a relação entre o usuário e o game, seu grau de satisfação.
Quem é que nunca jogou um game e teve altos graus de felicidade mas também altos graus de fúria… essa fúria (sentida pelo usuário) foi amplamente estudada e amenizada ao longo dos anos da história dos games, podemos dizer que a cada ano diminui a quantidade de gamers que destroem seus consoles, é fato. Isso porque houve o estudo da interação entre a relação do gamer com o jogo em si, para minizar a sensação de frustração e aumentar a sensação de satisfação.
Até aí simples, mas não é só o game que é interativo, existem diversas aplicações que são interativas e a cada dia mais e mais produtos estão se tornando interativos, em breve sua TV será interativa se já não for, interativa totalmente, com uso de recursos como Google TV ou Apple TV. Mas em breve sua geladeira ora tão pacata será interativa, e quem sabe até mesmo o seu sofá. Portanto, essa não é uma matéria que deve ser ignorada por um designer, e muito menos por alguém que desenvolve aplicações.

Lembra-se que falei que essa é uma matéria mutável? Porque? Porque a cada dia surgem novas mídias ou áreas físicas onde possa existir uma aplicação interativa, portanto a cada dia o IxD ganhará novo estudo conforme o próprio desenvolvimento da humanidade.

Mas o que de fato é interação nesse tema?
Entende-se interação a relação com o usuário, e que deve ser funcional a fim de proporcionar uma boa UX.

Portanto eu entendo (devido a minha experiência como designer) o IxD como principal intermediário entre a idéia (Conceito inicial do projeto) e a UX, ele é praticamente a ferramenta de trabalho que leva o conceito a realidade, fazendo a ponte desde a concepção da idéia do projeto até a sua realização e o contato com o usuário.

Um bom IxD tem por objetivo conseguir comunicar com eficácia a informação de uma aplicação até seu usuário, definindo o comportamento da aplicação, e claro, as interações que essa tem com o mesmo.

Você se recorda do texto que eu postei sobre a visão de UX de Shane Morris? Pré-processo de UX?

Vamos concluir a idéia, Morris fala que para se conseguir uma boa UX é necessário seguir 4 etapas:
1. Projeto Conceitual (aquilo que chamei nesse artigo de ‘idéia’)
2. Design de Informação (não confundir como arquitetura da informação)
3. Design de Interação
4. Apresentação do Design (Criação do projeto em si)

Perceba que essas matérias se misturam um pouco no seu conceito mas são distintas pode acreditar, acontece que a fronteira entre uma e outra se mistura, ou seja, quando você estuda Design de informação perceberá que esse tema é parte de Design de Interação, e quando estuda Design de Interação perceberá que ele é a estrutura de desenvolvimento da UX.

Essa é uma parte que discordo do Morris, as estruturas por ele apresentadas tratam da relação de interação com o usuário, portanto é o próprio IxD.

O IxD estuda muita coisa, desde o ambiente onde a aplicação será apresentada (computador, totem, telão, se é dia, noite, espaço aberto, fechado, etc) até o tipo de usuário que estará utilizando.

Se eu fosse abordar o IxD em todo o seu aspecto seria muito mais que um post, aqui me reservo a tratar do tema naquilo que mais nos interessa, aplicações.

Vou ao melhor exemplo que conheço de IxD, o Agon.

O Agon é uma rede social corporativa, no qual as pessoas de uma empresa fazem pontos ao compartilhar conhecimento, tal como faço nesse momento ao escrever esse post, portanto o que foi estudado para se chegar na sua criação?

Objetivo:
- Como motivar o compartilhamento de conhecimento

Estudo:
- Relação das pessoas com os games
- Relação do funcionário com a empresa e entre si
- Relação dos usuários com redes sociais
- Interatividade com a aplicação sem alterar a rotina (curva de aprendizado) dos seus participantes

A solução você já conhece, uma rede social corporativa que utiliza a rede social Twitter para alterar sua interface (através de tweets com hashtags específicas), que atingiu o seu objetivo de incentivar as pessoas a compartilhar conhecimento. (Perceba que antes do Agon eu sequer tinha postado nada nesse blog e você talvez nem soubesse o nome do atual designer da DClick).

Então é muito simples, não é somente o estudo típico de transições em uma aplicação (consistência e inconsistência), cores, tipografia, etc, ainda que isso seja parte e é muito significativo, o IxD vê a relação entre pessoa e aplicação, analisa o aspecto humano, social e histórico.

E o que seria isso? Como no caso do Agon foi avaliado a idade do usuário, quais ferramentas ele já utilizava, foi visto o que não deu certo nas corporações para estimular o compartilhamento do conhecimento, e como fazer de uma disputa algo lúdico.
Então a criação de um tipo de game foi algo natural, afinal, estamos todos acostumados a disputar nos games com nossos amigos, parentes etc e nem por isso ao término do mesmo ficamos rancorosos com os adversários virtuais (pelo menos não a maioria de nós). A relação de disputa no bom estilo dos games foi explendidamente bem aplicada no Agon, ainda com pontuações e interatividade via rede social, eu disse interatividade? Pois bem, é essa interação o estudo de IxD, prever como o usuário irá se comportar, procurando com isso atingir uma boa UX.

Então percebemos que para se saber aplicar o IxD é necessário um conhecimento vasto da área de sua atuação, da aplicação em si, o bom designer de interação é aquele que está profundamente alimentado de informações antigas (conhecimento histórico) e novas, dos diversos segmentos possíveis, ou seja, é alguém de fato muito, mas muito bem informado e com poder de comunicação. Sem isso ele não conseguirá facilmente aplicar um IxD.

Ainda que existam IxD mais modestos, ou seja, estudos mais simples, IxD é o estudo amplo e vasto de tudo que envolve a interação com o usuário por parte de uma aplicação.

O IxD acima de tudo se preocupa com o aspecto emocional de uma aplicação, se ela é útil ou inútil isso não diz nada, um game é inútil, mas tem valor emocional muito amplo, portanto Design de Interação visa entender a relação da aplicação (ou produto) na vida do usuário, como isso se reflete e repercute no dia a dia do mesmo.

Se através desse texto você se sentiu atraído a saber mais sobre esse tema pouco explorado ainda no Brasil, resta dizer que existem algumas poucas faculdades voltadas ao assunto, existindo inclusive uma pós-graduação, já no exterior diversas universidades abordam o tema, e existem mestrados inclusive. Porém lhe aconselho a visitar a associação IxDA (Interaction Design Association, da qual sou membro atualmente, uma boa oportunidade para você ficar antenado sobre o assunto.

Eu poderia colocar os passos do que é a profissão de Design de Interação, o que faz ou deixa de fazer, ou como se tornar um designer de interação e quais passos exatos tem essa matéria, existem diversos autores do assunto, mas meu objetivo aqui era passar toda a idéia conceitual para que você se municie de informação interativa, sim, aquela que se liga a outras áreas do seu cérebro, pois garanto, que tópicos e passos determinados não serão facilmente lembrados, mas um texto que interage com demais informações, ou seja, com seu repertório, ficará enraizado e você se lembrará do que é IxD com facilidade. Portanto espero com isso ter interagido com demais conhecimentos que você possui fazendo que tenha tido uma boa UX ao término da leitura…

Pré-processo de UX

Sat, 12 May 2012 00:10:00 -0400

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

Ele fala de cinco coisas que deve-se saber antes de começar a “UX”:

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).

Morris continua com 4 etapas desse esquema:

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).

Em seguida, ele apresenta 6 dicas para melhorar a forma como o produto se apresenta:

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.

Morris também ofereceu conselhos sobre o uso de cores:

“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/

http://colourlovers.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.

10 piores mitos de UX

Sat, 12 May 2012 00:02:00 -0400

Abaixo seguem os piores mitos sobre User Experience mais populares que separamos para comentá-los.

Você talvez se pergunte a respeito de alguns deles questionando o fato de serem mitos, acontece que os mesmos são frases ditas pelas pessoas dos 3 segmentos abaixo e que representam um grau de importância significativo para a User Experience, por isso consideramos como mitos de UX.

- Mitos entre os Desenvolvedores

#1 O cliente não repara se o campo está 1px para a direita ou se está muito amarelo, o cliente quer saber se o aplicativo funciona.

Comentário:
Iniciamos com um dos mais clássicos mitos, o desalinhamento, o campo, box, imagem, ou outro objeto que está desalinhado ou mesmo em cor diferente dos demais objetos da cena.
É fato, como comentado no texto sobre UX (What the Hell is UX?) o ser humano gosta do belo, e gosta do simétrico.
Você certamente nunca se perguntou porque uma pessoa é bonita, e porque há gostos diferentes. Mas algo é importante comentar, uma pessoa bonita é algo inquestionável, ela pode não ser atrativa para você, ela pode não ter nenhuma característica que você ache interessante, mas você não pode negar que aquela pessoa é ou não é bonita. Mas afinal, o que torna uma pessoa bonita? São as proporções e a simetria, existem gordos bonitos, magros, altos, baixos, das diversas cores, então não se trata puramente de gosto, e sim de algo a mais que existe ali, e isso é exatamente o simétrico e o proporcional.

Simetria, é tudo aquilo que é igual de ambos os lados, um rosto simétrico bem conhecido, Tom Cruise, ele vai ficar velho, e cada vez mais velho, mas vai continuar (acredita-se se nada lhe acontecer) simétrico, e continuará a ser o galã dos cinemas. A culpa é só da simetria? Não, ele também é proporcional, de nada adiantaria ele ter simetria se fosse barrigudo e tivesse as pernas finas, ele é esteticamente proporcional, isso lhe daria o status de beleza mesmo se ele não fosse famoso, afinal fama é outra história.
O que estamos dizendo com isso é que a simetria e a proporção são importantes, você não se interessaria (talvez não) por alguém cujo nariz estivesse uns pixels a direita, e que tivesse um olho com a cor diferente do outro… certamente não, e se lhe interessar alguém assim com certeza serão outros fatores que não somente os já citados.
As primeiras coisas que são observadas por nós seres humanos é a simetria e proporção, as demais qualidades são observadas depois.

Mas e quando falamos em aplicativos? A princípio só lhe resta simetria, proporção,constraste e cores, o aplicativo pode ser bonito, pode ser funcional, pode ser fantástico, mas se tiver campos desalinhados certamente não irá agradar, e não pense que o usuário irá saber o que lhe incomoda, ou mesmo seu cliente, ele não vai saber, ele só vai olhar e dizer… Hummmm, não sei… algo não está legal.

E logo mais começam as alterações, e tudo isso porque você desenvolvedor muitas vezes não se preocupou com o pixel de diferença ou mesmo com uma cor, tudo porque pensou que poderia acertar depois.

#2 Não faz diferença se o canto é arredondado ou se não é, ninguém vai reparar nisto.

Comentário:
Será mesmo? Mas é claro que não, cantos arrendados tem os seus motivos, e os cantos duros também.
Se a aplicação possui uma identidade visual arredondada, certamente os campos, boxes ou imagens que tiverem cantos duros vão se sobressair de todo o resto, as vezes será bom e as vezes não. E isso deve ser feito de forma consciente e não desproposital.

#3 A aplicação está lenta mas está funcionando, é isso que importa.

Comentário:
Realmente, importa que esteja funcionando, mas e a experiência será boa? Quem de nós gosta de esperar? Quem de nós está disposto a aguardar um carregamento?
Muitas vezes a demora de uma aplicação não está associada ao tipo de linguagem usada, servidor, vídeos etc, muitas vezes é o próprio código que tem um algorítimo não muito inteligente, fazendo que haja demora na resposta de uma determinada requisição.
Certamente não importando de onde vem a demora, ela oferece uma péssima experiência a qualquer usuário, e muitos de nós (como usuários) por vezes fechamos uma aplicação e desistimos por conta da impaciência.

- Mitos entre os Designers

#4 O Cliente deve ser ouvido

Comentário:
Ele deve, sim deve, mas não é ao pé da letra. O cliente não é responsável por saber do seu próprio problema, e na maioria das vezes ele não sabe. Acredite, o cliente vem até nós para procurar uma solução de um problema, mas se você estudar o seu cliente por vezes vai encontrar que o problema demonstrado por ele não é exatamente um problema, e que o que realmente está causando transtorno é outra coisa, portanto ouça o cliente, mas tente entender toda a mecânica do processo do projeto para que descubra o real problema e possa oferecer uma boa solução.

#5 O Cliente é quem define as cores

Comentário:

O cliente não pode definir por exemplo como cores devem ser aplicadas, ele pode sim oferecer uma paleta de cores que corresponde a uma identidade visual da empresa, mas definir onde essas cores serão aplicadas é algo para um profissional que estudou semiótica, teoria das cores e afins… que sabe como e porque aplicar determinada cor e que resultado isso irá trazer.
Portanto é obrigação do designer conversar com o cliente e demonstrar o que é melhor e mais viável para determinado tipo de aplicação e interação com o usuário.

#6 O usuário deve ser ouvido

Comentário:
Não, esse é o último que deve ser ouvido, se ele for ouvido você realmente irá criar um monstro. Existem técnicas para se ouvir um usuário e é através de feedback de algo já realizado, mas nunca antes do layout estar feito, você deve sondar gostos, estilos e tudo o mais para o público que irá utilizar a aplicação mas nunca chegar em um usuário e perguntar qual cor acha que deveria ser a aplicação? ele lhe dirá uma, e certamente outro usuário lhe dirá outra, e gosto pessoal de cor não é sequer a cor que ele de fato gostaria de ver na aplicação.
Estou dando o exemplo de cor pois é o mais fácil de ser entendido mas você pode imaginar um usuário pedindo que seja inserido milhares de ferramentas, no qual talvez um dia, quem sabe, sejam utilizadas…

#7 O layout é que faz vender o produto

Comentário:
Mito, é claro que é mito, o layout é que faz vender o projeto muitas vezes mas não o produto, ninguém compra um aplicativo unicamente porque seu layout é bonito, ele ajuda e muito a fazer a publicidade de um produto, ele faz parte do conjunto. Mas não se deixe enganar por designers que se auto valorizam ao extremo dizendo que tal e tal aplicação só vendeu por conta do design. Isso não acontece, o design ajuda, ele faz parte da Experiência do Usuário, mas não é por si só toda a experiência, não sendo portanto unicamente o responsável pela venda de um produto, é sim, o carro chefe, o cartão de visitas, mas não pode se atribuir toda a glória a ele.
.

- Mitos entre os Arquitetos de Informação

#8 Site acessível tem que ser feio

Comentário:

É comum, mais do que deveria, vermos arquitetos de informação dizer que site acessível e funcional geralmente é feio, porque é difícil adequar funcionalidade com beleza, que ter um site funcional é mais importante que ter um site bonitinho, é verdade, mas é mito achar que beleza e funcionalidade não possam andarem juntas.

#9 Todas as páginas devem ser acessíveis em 3 Cliques

Comentário:
Esse é sem dúvida o maior mito entre os arquitetos, há discussões, brigas absurdas entre arquitetos e designers por conta desse tema. 3 cliques é bom, mas não pode ser a regra, 3 cliques para se chegar a qualquer lugar em uma aplicação é importante, mas nem sempre deve ser assim, a Amazon que o diga, com uma interface wizard para as compras, bem como outros e-commerces, porque deve então haver imposição em todas as demais aplicações com sistema em Hub?
Todas as páginas no sistema em Hub deve ser acessada em 3 cliques? Infelizmente isso as vezes causa é uma experiência ruim, uma determinada informação que poderia estar separada em uma outra página está jogada nas mesma página juntamente com outra que não lhe tem qualquer parentesco somente porque o arquiteto queria ter 3 cliques.
É importante organizar a informação o máximo possível, sem se prender a esse tipo de mito, a informação deve estar associada a seus parentes, a sua hierarquia, entre outras técnicas da arquitetura de informação, mas se você se limitar as regras sem pensar no benefício do usuário, sem pensar na experiência que ele vai ter, certamente você não estará fazendo da arquitetura uma parte do processo de UX.

#10 Seu usuário é como você

Comentário:
E deixamos o melhor mito para o final, seu usuário é como você.
Esse mito é mais comum entre os arquitetos, mas é também bastante difundido entre os designers.. Todos querem impor seus gostos na hora de fazer uma aplicação, achando que se é bom para mim então será bom para o usuário… Esse é o pior erro que alguém que está em um projeto de uma aplicação pode cometer, você deve pensar no usuário de forma diferente, você deve se imaginar como ele, mas não pensar que ele deve ser como você.
Criar uma aplicação para o segmento infantil é um bom exemplo, você não é criança, mas consegue imaginar o que agrada uma criança, consegue através de pesquisas e pela sua própria experiência que teve pois um dia já foi uma, enfim, há sem dúvida inúmeras formas para você se colocar na posição do usuário, mas nunca, nunca mesmo coloque o usuário na sua posição, acreditando que ele gosta das mesmas coisas que você.

Por fim, como conclusão desses mitos, não se iluda, se um número X de pessoas viu a sua aplicação e não tiveram uma boa experiência, não pense que elas estão erradas e você é que está certo, se aquelas pessoas são do mesmo segmento que seu público, então algo está errado na sua aplicação, não insista no erro, se preciso, jogue tudo fora e volte a ponta do lápis, não se satisfaça com o bom se você pode ter o ótimo.

What I Learned From Steve Jobs 01. Experts are clueless. 02....

Mon, 30 Apr 2012 01:41:21 -0400

What I Learned From Steve Jobs

01. Experts are clueless.

02. Customers cannot tell you what they need.

03. Jump to the next curve.

04. The biggest challenges beget best work.

05. Design counts.

06. You can’t go wrong with big graphics and big fonts.

07. Changing your mind is a sign of intelligence.

08. “Value” is different from “price.

09. ”A players hire A+ players.

10. Real CEOs demo.

11. Real CEOs ship.

12. Marketing boils down to providing unique value.

"The perception of system output must be greater than the perceived user input, and within that range..."

Sun, 29 Apr 2012 23:34:36 -0400

“The perception of system output must be greater than the perceived user input, and within that range there is a sweet spot where [user experience] is delightful and magical.”

- August de los Reyes via teehanlax

UX Samurai

Micro Interações (Microinteractions)

MOOC - Massive Open Online Course

Don Norman - Interaction South America '12

#DonNorman Interaction South America ‘12

Me and Don Norman #DonNorman #EmotionalDesign #Design #isa2012...

Inspiração para User Interface?

Made with Paper

Visualização de Dados – Many Eyes – 3

Visualização de Dados – Uma abordagem sobre UI – 2

Visualização de Dados – Uma abordagem sobre UI

Usabilidade Mobile – Uma visão de Jakob Nielsen

Quando o Design é contra o Design

Usabilidade Mobile – Introdução

Usabilidade Desktop X Usabilidade Mobile

"To design is much more than simply to assemble, to order, or even to edit; it is to add value and..."

UX Specialist – Links para “entrar na profissão”

Don Norman: 3 maneiras pelas quais o design te faz feliz

UX BOOKS

UX Primer

Design Thinking

.

Strategy

Process

.

Principles

.

Activities

.

Documentation

.

Extra Credit

.

UX BLOGS

.

UX PUBLICATIONS

.

LOCAL EVENTS

.

ORGANIZATIONS

.

MAILING LISTS

.

WEBINARS

.

WORKSHOPS

.

CONFERENCES

Inspirational

.

Practical

.

Mixed

.

Academic

.

SCHOOLING

Human Computer Interaction

.

Interaction Design

.

Misc

IxD - Design de Interação

Pré-processo de UX

Ele fala de cinco coisas que deve-se saber antes de começar a “UX”:

Morris continua com 4 etapas desse esquema:

Em seguida, ele apresenta 6 dicas para melhorar a forma como o produto se apresenta:

Morris também ofereceu conselhos sobre o uso de cores:

10 piores mitos de UX

- Mitos entre os Desenvolvedores

#1 O cliente não repara se o campo está 1px para a direita ou se está muito amarelo, o cliente quer saber se o aplicativo funciona.

#2 Não faz diferença se o canto é arredondado ou se não é, ninguém vai reparar nisto.

#3 A aplicação está lenta mas está funcionando, é isso que importa.

- Mitos entre os Designers

#4 O Cliente deve ser ouvido

#5 O Cliente é quem define as cores

#6 O usuário deve ser ouvido

#7 O layout é que faz vender o produto

- Mitos entre os Arquitetos de Informação

#8 Site acessível tem que ser feio

#8 Site acessível tem que ser feio