Otimizando suas requisições Http com Encode & Decode Data URLs PHP

by with No Comment How ToIdeias

tuning_web_fuscas

Há alguns dias me questionaram sobre técnicas para aumentar a velocidade de um aplicativo web, o objetivo era ter uma solução para otimizar a velocidade de resposta de um grande sistema que possui uma boa base de conteúdos.

Obviamente não existe uma resposta fácil, pois a otimização parte de diversas camadas, como otimização do servidor, das consultas ao banco, refactory e otimização do código, trabalho de conteúdos etc.

Gosto de dizer que “Tuning” é uma cultura (assim como segurança) e não um produto/solução que você compra.

Falando de sistemas web, uma das boas praticas e diminuir o conjunto de requisições Http adicionais ao conteúdo solicitado, deixando o carregamento da página mais veloz.

Converter pequenas imagens para data-URLs pode ser uma ótima maneira de eliminar essas solicitações adicionais e diminuir o tempo de carregamento de suas páginas.

Usando as funções base64_encode () e base64_decode () , temos o poder de converter imagens em data-URLs e vice-versa.

Na prática – Encodando:

Então, vamos começar com uma pequena imagem com o nome, digamos, “feed-icon.gif”:

Em seguida, vamos converte-la com base64_encode (): *

<?php echo base64_encode (file_get_contents (“feed-icon.gif”)); ?>

A saída será a imagem como uma série de caracteres codificados em base64, que não vou listar aqui.
O conteúdo gerado será maior que o tamanho da imagem original.

– Isso não é bom correto? Pois o meu tamanho de página aumenta.
– Errado … mesmo o conteúdo sendo um pouco maior, estamos economizando requisições Http

Mas vamos ter bom senso, uma imagem com mais de 100Kb, já pode passar a ser uma má ideia converter.

Agora que já aprendemos a codificar a imagem, podemos exibi-la em nossa página, assim:

<img src="data:image/gif;base64,<?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>">

Ou no meu arquivo de CSS:

background: url("data:image/gif;base64,<?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>");

* Isso é uma espécie de técnica de suja “quick-n-dirty”, mas funciona.
Aqui está um outro método de codificação usando fopen () em vez de file_get_contents ():

<?php // converte a imagem para dataURL
$img_source = "feed-icon.gif"; // caminho da imagem
$img_binary = fread(fopen($img_source, "r"), filesize($img_source));
$img_string = base64_encode($img_binary);
?>

Na sua página use:
<img src="data:image/gif;base64,<?php echo $img_string; ?>">

Decodando:

A maneira mais fácil de decodificar uma imagem codificada em base64 é apenas para fazer um “Salvar como …” em algum lugar em sua máquina.

Claro, você também pode usar a função base64_decode do PHP para converter algo codificado em sua forma inicial.
Isso funciona muito bem para o conteúdo do texto, mas para imagens precisamos incluir o cabeçalho adequado ao exibir como conteúdo web:

<?php header("Content-type: image/gif");
echo base64_decode($img_string); ?>

Esse tipo de técnica funciona muito bem conteúdos pequenos e estáticos e deve ser usada em conjunto com outras técnicas.

 
Fonte: http://perishablepress.com/php-encode-decode-data-urls/
 

Facebook Vs Myspace – Quem vence com as novas interfaces gráficas?

by with No Comment Arquitetura de informaçãoDesignIdeiasMost ContagiousPrototipaçãoUsabilidadeUsuário

Facebook e MySpace são populares sites de redes sociais. Enquanto o MySpace era originalmente o mais popular, o Facebook ultrapassou o MySpace em termos de adesão em 2008. Os perfis do Facebook estão mais próximos das identidades reais do usuário em comparação com o MySpace, mas será que este é o unico motivo para a migração dos usuários?

História do MySpace vs Facebook

Facebook se tornou popular a partir de comunidades universitárias e realmente foi iniciado por um estudante de Harvard, Mark Zuckerberg, em seu quarto do dormitório. O que começou como um site interno da faculdade por diversão se transformou em site de rede social mais aclamado de todos os tempos. Facebook, inicialmente chamado “thefacebook”, iniciado por estudantes de graduação da inscrição de Harvard, Yale, Stanford e Columbia e mais tarde acrescentou mais assinantes de outras escolas, empresas e, finalmente, aberto ao público em setembro de 2006.

MySpace foi iniciado em agosto de 2003, para imitar o outro site de rede social Friendster por uma equipe de funcionários eUniverse. Os primeiros usuários deste site foram os funcionários de eUniverse e depois se espalhou para as massas. Este empreendimento planejado foi logo escalado para o topo da lista de sites de redes sociais.

Os usuários do Facebook vs usuários do MySpace

No início, o MySpace era mais popular entre os estudantes do ensino médio e Facebook entre estudantes universitários. Um estudo recente realizado pela empresa americana Nielsen Claritas, mostrou que o grupo de renda dos usuários do MySpace é mais baixa em comparação com os usuários do Facebook. Outra diferença observada foi a que mais usuários do Facebook estavam inclinados a usar outros sites de redes profissionais como o LinkedIn do que os usuários do MySpace. Em fevereiro de 2010, o Facebook teve cerca de 400 milhões de membros e MySpace tem cerca de 150 milhões de usuários.

A batalha

De qualquer forma as duas empresas não abrem mão do mercado e usam a inovação como motor, por isso novos protótipos de interfaces estão surgindo, confira abaixo as novidades que as redes lançam em breve e de a sua opnião de quem vence essa guerra por mais usuários.

Nova interface My space

 

Nova interface Facebook

Quer saber mais?

http://en.wikipedia.org/wiki/Facebook
http://en.wikipedia.org/wiki/Myspace
http://www.readwriteweb.com/archives/more_proof_facebook_for_the_rich_myspace_for_the_poor.php
http://www.readwriteweb.com/archives/myspace_mail_now_has_over_15_million_users.php
http://www.diffen.com/difference/Facebook_vs_MySpace

Mapeamento das próximas três décadas em Tecnologia da Saúde

by with No Comment Arquitetura de informaçãoDesignIdeiasUsuário

Saiba quando a criogenia, robôs que cuidam da saúde, impressão de órgãos sintéticos (3D) ficam disponíveis no consultório do seu médico.

Quando filmes de ficção científica retratam o futuro, os melhores roteiristas e diretores são o menos preocupados com a precisão em prever como tecnologias específicas podem mudar o mundo do que com confrontar os dilemas morais ou filosóficos de hoje.

É o que faz essas histórias convincentes e relacionáveis. Quando futuristas tentam dizer como (e quando) os saltos de tecnologia irão ocorrer, eles não estão apenas especulando sobre o que somos capazes de alcançar nas próximas décadas, mas também implorando-nos a preparar (cientificamente e psicologicamente) para tais eventos.

Envisioning Technology, empresa por trás de enormes explorações do futuro da tecnologia emergente e no futuro da tecnologia da educação, e claro como você pode imaginar, dirigida pelo futurista: Michell Zappa.
Seus mais recentes mapas de visualização das próximas três décadas de tecnologia da saúde, traçando o aumento de regeneração, diagnósticos, tratamentos, biogerontology e telemedicina vai mudar ao longo do tempo.
De acordo com a ET, a coisa de ficção científica – de criogenia a total extensão da vida, a partir de cuidados de saúde robô para 3-D-impressos órgãos sintéticos – será muito real antes de muito tempo.

“Eu sou um futurista de tecnologia, porque eu me importo muito sobre e para onde a humanidade está indo”, disse Zappa. “Eu tenho uma firme crença em que a tecnologia é inseparável da evolução humana, mas ao contrário de biologia, nós temos um grau de controle de onde ela está indo … A forma mais segura de garantir um futuro desejável é criá-lo.”

Então, como se faz para prever o que o futuro nos reserva?

Zappa reconhece que “a previsão real de certas tecnologias em atingir maturidade [ou] mainstream é muito subjetivo”. Ele explica que ele e sua empresa derivam suas visões do futuro, dos seguintes fatores:

A dependência das tecnologias “indicadores gerais para acelerar a mudança” e dependências relativas (“as tecnologias anteriores estão sendo trabalhadas, então existe a maior probabilidade de uma tecnologia em se tornar mainstream”), que ele compara a uma versão qualitativa de PageRank do Google, sintetizar e avaliar o que está na culturais revistas de tecnologias gadgets, blogs, revistas científicas, e os escritos de outros futuristas.

O infográfico de saúde, projetado por Zappa e Schläfer Patrick, com a ajuda de Colin Popell, é construído sobre a crença de que “a tecnologia é a força fundamental de democratização da sociedade” e destaca a tendência de “repositórios anteriormente silos de informação e caros métodos de diagnóstico … se encontrem rapidamente e um alcance global permitindo que os pacientes e os profissionais façam melhor uso da informação.”

Dê uma olhada na versão em tamanho real do infográfico (clique na imagem)

Por: Patrick James
Em: http://www.fastcoexist.com/1680532/mapping-the-next-three-decades-of-health-technology

Soluções para o monitoramento de interfaces

by with No Comment Arquitetura de informaçãoDesignIdeiasInteratividadePrototipaçãoROIUsabilidade

A fase em que uma interface está em operação é, em boa parte dos casos, a mais longa de seu ciclo de vida. Contraditoriamente, ela tem recebido pouca atenção dos pesquisadores e dos profissionais trabalhando na área. Até pouco tempo, havia pouca oferta em termos de técnicas e de ferramentas para o monitoramento de uma interface em produção.

Mais recentemente, essa lacuna começou a ser preenchida, em minha opinião, devido a três fatores principais:

  1. a preocupação com a experiência do usuário, um fenômeno que vai muito além do uso
    momentâneo do sistema;
  2. as interfaces de uma maneira geral estão muito mais evolutivas, em uma busca constante por satisfazer e criar necessidades;
  3. o desenvolvimento de facilidades de comunicação e de coleta de dados de uso em larga escala e a partir de qualquer lugar no planeta.

Hoje as soluções para o monitoramento de interfaces são mais variadas e numerosas. Os principais tipos de técnicas
são os testes de usabilidade à distância, os diários e os painéis, as pesquisas de satisfação e a web analítica. Já escrevi um artigo sobre a Web analítica orientada à usabilidade. Apresento aqui o que identifiquei de novo, em  relação às outras técnicas.

Um teste de usabilidade à distância nada mais é do que uma observação crítica do uso de um sistema que é apoiada por recursos de comunicação e de captura remota de dados. Os resultados se referem ao desempenho e à satisfação dos usuários.

É importante observar que em um contexto de monitoramento esses resultados têm um perfil diferenciado: eles têm de ser mais objetivos e mais representativos. Eles não precisam ser tão detalhados, uma vez que a interface está “pronta”, ela está sendo apenas monitorada. Mas, para produzir resultados representativos, eles têm de envolver um número maior de usuários, operando os sistemas em seus
ambientes naturais. Em algumas soluções, o moderador está “on-line” e se comunica com o participante, orientando-lhe sobre as tarefas do teste,
puxando conversa sobre suas estratégias e dificuldades e aplicando questionários pré e pós-teste. As conversas e as telas do usuário são capturadas à distância (ex. Morae – Remote participant). Alguns ambientes implementam uma moderação automática, na forma de uma interface do tipo passo a passo, que conduz os participantes nas tarefas e aplica questionários pré e/ou pós testes (ex. UserZoom, Ethnio,  Loop11,  Morae/AutoPilot, Capteria/ZOOMA).

Os estudos de caso disponíveis no site de UserZoom, em particular, se referem a testes à distância envolvendo entre 200 e 1.200 participantes espalhados por diversos países. Outras ferramentas apenas capturam a imagem e o som dos testes (ex. Userfly, Webnograph e OpenHallway).
Os usuários recebem instruções por e-mail sobre as tarefas a executar, e a ferramenta captura as interações por meio de scrips instalados nos sites sendo testados. Nenhuma facilidade de moderação ou de análise de dados é fornecida. Já os “click-tests” são versões bastante simplificadas de
testes à distância nas quais o usuário é convidado apenas a clicar sobre a opção que lhe parece a mais indicada para alcançar o objetivo que lhe é
proposto (ex. Usabila e Chalkmark).

As técnicas de diários e painéis destinam-se especificamente à coleta de dados sobre a utilização dos sistemas (quantas vezes, quando e durante quanto tempo) e de comentários com as explicações e as emoções experimentadas por um grupo de usuários pré-cadastrados. Essa coleta pode ser feita apenas uma vez, em um determinado instante no tempo, ou repetida várias vezes, durante um período de tempo. FiveSecondTest é uma solução de “painel instantâneo”, na qual os usuários visualizam uma página durante 5 segundos e em seguida respondem perguntas formuladas pelos projetistas, apresentadas automaticamente pelo sistema.

O OpenDiary e o Diary.com são exemplos de ferramentas podendo apoiar a técnica de diários, na qual os participantes são instruídos a
registrar seus comentários imediatamente após a realização de suas tarefas, ou a intervalos regulares, ou ainda no final do dia.

Os painéis mais abrangentes vão exigir alguma instrumentação nos ambientes dos próprios panelistas, de modo que passem a coletar dados sobre a sua configuração e informações sobre o uso dos sistemas. Já os painéis de curta duração estão focados na realização de tarefas e
coletam informações sobre dificuldades e problemas ocorridos. Os de longa duração (semanas ou meses) são menos focados em tarefas específicas e mais na forma como os participantes usam um sistema (duração de uma sessão de uso, duração dos intervalos intra e entre sessões, existência de trabalho em paralelo). Eles permitem identificar, em particular, as variações no estilo de uso dos sistemas que ocorrem naturalmente com o tempo, ou devido a alguma mudança no ambiente do usuário. Uma extensão interessante de diários e painéis é a técnica de “living labs” (The PlaceLab), que se refere ao monitoramento de comunidades de uso e não apenas de usuários individuais.

As pesquisas de satisfação dos usuários estão em geral a serviço de testes de usabilidade, diários e painéis, mas elas podem também ser realizadas isoladamente. Por meio desse tipo de técnica busca-se identificar, de maneira padronizada e sistemática, a
satisfação dos usuários em relação a uma interface ou sistema. O desenvolvimento dos instrumentos de pesquisa caracterizou-se inicialmente pela
busca das melhores perguntas a colocar aos usuários e, mais recentemente, pela busca da melhor forma e do melhor momento para obter suas respostas.

Em sua evolução, surgiram questionários com questões sobre aspectos gerais (SUS) e específicos (SUMI e QUIS)
para interfaces em geral e para tipos específicos de interfaces (MUMMS – multimídia e WAMMI – Web). As pesquisas de satisfação já
foram enviadas pelo correio normal, depois pelo correio eletrônico e hoje elas estão disponíveis em páginas Web específicas (SurveyMonkey).
Elas também estão incorporadas às interfaces dos sistemas sendo monitorados (KeySurvey,  OpinionLab). Kampile é uma solução que convida o usuário a dar sua opinião sobre uma interface em momentos críticos, quando ele completa uma tarefa ou ao contrário, quando parece
tê-la abandonado. 4QSurvey.com implementa um tipo de pesquisa em dois momentos, num primeiro, para identificar o propósito do usuário e, no segundo, para obter a sua satisfação em relação a esse propósito. É interessante notar que essa ferramenta produz também um tipo especial de medida da eficácia dos usuários.

Para concluir e para justificar este artigo, recorro a uma evidência. Cada vez mais, tudo está em evolução. Não só as interfaces, mas também os contextos, os ambientes, os usuários e as comunidades. É mais do que evidente a necessidade de monitoramento de todos esses
aspectos. Apresentei aqui cerca de 20 soluções que podem apoiar iniciativas de monitoramento de interfaces. Imagino que muitas outras existam e
espero ansioso pelas contribuições de vocês.

Por: Walter de Abreu Cybis
Fonte: Imasters

 

O que podemos entregar além da arquitetura da informação

by with No Comment How ToIdeiasInteratividadePrototipaçãoUsabilidadeUsuário

A medida que os projetos aumentam, a inserção de profissionais que desenham a experiência do usuário e os desafios se tornam mais dramáticos, nada melhor do que uma boa dose de entregáveis, para que o design do projeto fique muito bem alinhado e entendido por todos da equipe, incluindo o cliente!

  • Análise heurística:

É uma análise que trata de um conjunto de “boas praticas” de usabilidade que um site deve conter. Jakob Nielsen criou um conjunto bastante robusto e realista, no qual observamos alguns pontos que podem definir se o site está acessível, ou não:

  1. Visibilidade do estado do sistema;
  2. Correspondência entre o sistema e o mundo real;
  3. Controle e liberdade do usuário;
  4. Consistência e padronização;
  5. Prevenção de erros;
  6. Reconhecimento, em vez de lembrança;
  7. Flexibilidade e eficiência de uso;
  8. Projeto estético e minimalista;
  9. Recuperação de erros;
  10. Ajuda e documentação;
  11. Controle e liberdade do usuário.

  • Análise de requisitos:

Consiste em conversas com o cliente/usuário sobre as diretrizes do projeto e com o objetivo de conhecer as funcionalidades do sistema no qual será desenvolvido. É nesta fase, também, que ocorre a maior parte dos erros, pois a falta de experiência dos clientes, ou usuários, faz com que eles nem sempre tenham saibam quais as funcionalidades que o software terá.

  • Analise de acessibilidade:

Consiste, basicamente, em uma análise para verificar o nível de acessos facilitados do site/portal. Se ele está disponível e acessível via web a qualquer hora, local, ambiente, dispositivo de acesso e por qualquer tipo de visitante/usuário. Também pode apontar se os usuários podem acessá-lo de diferentes sistemas operacionais e, principalmente, se podem ser acessadas por todos, independentemente de capacidade motora, visual, auditiva, mental, econômico, social ou cultural.

  • Análise de métricas:

É o olhar do arquiteto de informação sobre as métricas do projeto. Analisar os números de acesso, navegação e interação e encontrar soluções para melhora. Se a taxa de rejeição de determinada tela está alta, talvez ela seja o seu próximo alvo de melhorias de design e usabilidade.

É uma lista do que vai ser usado para medir se o seu projeto/design/redesign atingiu os objetivos do cliente. Número de visitas? Número de seguidores no Twitter? Porcentagem de pessoas que compartilham seu conteúdo? Nessa hora, vale uma boa conversa com o pessoal de Data Intelligence para definir quais métricas são importantes e possíveis de serem mensuradas. Sem essas métricas, fica difícil calcular o retorno sobre investimento (ROI) do projeto.

  • Análise hierárquica dos objetivos:

Avaliar a importância relativa de diferentes alternativas, no que diz respeito a múltiplos atributos (quantitativos ou qualitativos:

  1. Identificar os elementos do problema;
  2. Determinar objetivos;
  3. Estabelecer a hierarquia;
  4. Determinar prioridades.

  • Análise qualitativa e quantitativa:

Análise de interface qualitativa descobre o comportamento do usuário durante a navegação. Por exemplo: descobrir que todo usuário clica no logo quando quer voltar para a home, ou que os usuários de uma determinada seção do site são predominantemente mulheres. Já as análises quantitativas permitem, como no focus group, mensurar opiniões de grupos sobre o produto.

Os resultados não são apenas “este produto agrada” ou “este produto não me agrada”; mas sim os motivos dessas opiniões. Pode ser informação valiosa no desenvolvimento do projeto e depois de sua implantação.

Esses dados permitem redefinir as seções privilegiando as informações de acordo com o público, ou definir premissas para um determinado projeto. Onde antes só considerávamos os browsers e as resoluções de tela, hoje podemos ir muito além, considerando também o perfil do usuário.

  • Testes de usabilidade:

São roteiros criados a partir dos fluxos existentes no protótipo, ou site, e testados a partir de usuários, para que possamos enxergar os pontos fortes e melhorar o site. É possível ajustar para que a entrega esteja bem alinhada e com usabilidade eficiente.

Observar as pessoas interagirem com o resultado do projeto permite um olhar bastante claro e realista sobre as telas e sua forma de interação com o usuário. O resultado desses testes ajuda na defesa de alguns conceitos envolvidos no projeto (quer seja pelo cliente, ou equipe), desalinhados com o entendimento e necessidade do usuário.

  • Eye tracking:

Último grito da modernidade, o mapeamento do olhar do usuário sobre a interface auxilia na definição de pontos de interesse sobre conceito, layout, navegação e modelo de interação, com dados realistas para ajustar as informações da tela, para que sejam mais atraentes ou fáceis de encontrar.

O entregável é um relatório que mostra quais pontos da tela foram mais olhados pelos usuários, em um heatmap, que mostra em cores quentes as áreas mais visualizadas da interface. O custo de realização dos testes de eyetracking é mais alto do que os testes de usabilidade, pois são necessários equipamentos especiais para monitorar o movimento do olho do usuário.

  • Teste de stress de navegação:

É uma técnica de simulação usada para determinar o comportamento de um produto digital em diferentes cenários.

  • Design participativo:

A proposta do Design participativo é valorizar a participação de usuários durante o processo de desenvolvimento de produtos e serviços. Através de oficinas e ferramentas colaborativas, os usuários participam ativamente da definição das características do que está sendo projetado.

  • Documento URL:

Sugestão de URLs amigáveis para as telas.

  • Grids:

São linhas que demarcam a diagramação do conteúdo. Eles são parentes bem próximos das réguas e das métricas e sua principal função é sustentar a padronização da diagramação, facilita a leitura e torna a navegação híbrida e intuitiva.

  • Wireframe:

É a planta baixa do site; o seu esqueleto. O resultado de pesquisas onde pode ser encontrados todos os elementos em cada tela e suas disposições e orientações. O intuito é mostrar a hierarquia das informações, das telas e o fluxo de navegação que irá existir.

Importante relembrar para os desavisados que o wireframe deve ser apresentado em tons de cinza, não há neste momento níveis de escalas ou posicionamento de elementos gráficos, o que significa que o designer tem toda a liberdade de criar um layout diferente do wireframe, desde que sejam respeitadas as organizações textuais e hierárquicas das telas.

  • Mashups:

São reproduções de uma ideia que mais se aproximam da realidade. Em tamanho real, ou aproximado, mas que não precisam reproduzir, necessariamente, suas funções.

  • Fluxograma:

É um sitemap com QI acima da média, onde são organizadas hierarquias das informações e seus fluxos. Dessa forma, é mais fácil compreender a transição das informações em cada tela. Fluxogramas são fundamentais para o olhar realista do projeto, pois além de se compreender os caminhos, ainda permitem encontrar fluxos mais objetivos para a visualização de determinadas seções ou telas.

  • Protótipo:

É uma variação dos wireframes, mas com links e interações entre as telas. Você pode clicar e navegar entre elas, como se estivesse navegando no produto final. Pode ser usado com diversos objetivos: desde ser exibido em um teste de usabilidade, até fazer com que o público interno do projeto (desenvolvedores, gerentes de projeto, designers, cliente) visualizem mais facilmente como determinada peça vai funcionar.

  • Sitemap:

É um organograma que agrega todas as páginas que o site/portal irá conter. Este documento especifica as várias telas e geralmente é produzido no início do projeto – e refinado durante todas as etapas, conforme as demandas posteriores.

  • Vocabulário controlado:

É um instrumento de controle terminológico que estabelece a forma de representar os assuntos que compõem um conjunto de áreas do conhecimento, tornando possível maior coerência entre os termos indexados.

  • Documento de taxonomia:

De forma mais genérica, podemos dizer que taxonomia é uma classificação. Porém, a taxonomia trata de uma estrutura de organização baseada na hierarquia – vai do geral para o específico, do maior para o menor, do menos complexo para o mais complexo. Meios de Transporte > Terrestres > Automóveis > Carros.

  • Inventário de conteúdo:

Quando o projeto, seja ele novo ou já existente, e o conteúdo informativo são grandes, se faz necessário ter um controle global destes textos que serão gerados para o site. Consiste em um mapeamento de todas as páginas (previstas ou existentes) e todos os conteúdos de cada uma.

Assim, conseguimos ver holisticamente todo o conteúdo, o que trará uma facilidade em organizar as informações (taxonomias, vocabulário controlado, etc). Assim, ficará mais fácil retirar o conteúdo duplicado, que é muito comum em sites com grande volume de informações.

  • Definições de conteúdo (globais/ locais):

Definições de posicionamento e ocorrência de informações dentro do site/sistema.

  • Modelo conceitual:

Normalmente é usado para representar uma visão macro de como um produto funciona (do ponto de vista conceitual) – sem a necessidade de entrar em detalhes sobre cada funcionalidade. Pode ser um gráfico, um parágrafo de texto ou um fluxograma – o importante é mostrar de forma simples como o produto irá funcionar. Geralmente é apresentado nas fases iniciais do projeto, para garantir o alinhamento entre as áreas.

  • Definições de objetivos:

É o resultado gerado da analise de métricas.

  • Benchmark:

É a observação e o estudo de projetos que tenham semelhança, quer seja em comportamento ou conteúdo, com o projeto que vamos desenvolver. É a analise dos pontos positivos e negativos para que sejam considerados no momento em que iremos criar o “jeitão” das telas e seus comportamentos.

Benefícios bacanas de um benchmark:

  1. Novo olhar sobre conceitos e padrões – o que pode trazer novidades bem focadas e pertinentes com a proposta;
  2. Permite que o conhecimento sobre o mercado e sobre o cliente seja amplificado e consequentemente, do projeto também;
  3. Facilita a identificação das áreas críticas;
  4. Permite um olhar realista ao traçar objetivos.

  • Card sorting:

Esta é um técnica interessante, com a qual podemos entender um pouco do fluxo mental do público do projeto. Pequenos cartões com as categorias de determinada tela são entregues para um número de pessoas. O objetivo é que o usuário organize um fluxo que considere prático e simples, de acordo com seu entendimento.

Nesse momento, onde pode acontecer (e deve!) uma conversa entre ele e o arquiteto de informação, é possível entender os motivos deste modelo de classificação e depois de todas as escolhas é feito uma análise onde os fluxos mais indicados pelos usuários serão aplicados na tela.

  • Focus group:

É uma discussão entre um grupo, geralmente pequeno, sobre o “produto” que está sendo desenvolvido. O custo geralmente é baixo, é rápido de organizar e pode trazer resultados interessantes focados diretamente no consumidor final.

  • Mapas mentais:

É o nome dado para um tipo de diagrama voltado para a gestão de informações, de conhecimento e de capital intelectual. Auxilia a compreensão dos problemas e é utilizado como ferramenta de brainstorm.

  • Cenários:

São descrições de situações hipotéticas, em que são colocadas pessoas que interessam ao projeto. Essa técnica é usada de várias maneiras. Alguns utilizam para auxiliar numa decisão crucial de projeto, ou para avaliar as características, outros para demonstrar as características do artefato projetado em uso e etc.

O cenário pode ser escrito formalmente, servindo como documentação de projeto, ou ser criado enquanto se discute questões a respeito do projeto. O que se segue a essa frase é um cenário: “suponha que o usuário faça isso, então…”.

Em um projeto simples, os cenários não precisam ser necessariamente oficializados. Eles podem surgir no meio de conversas da equipe, ou apenas na mente do designer. O mais importante é estar colocando à prova o jogo de cintura da aplicação. Isso se torna especialmente importante nos momentos tensos da aplicação: formulários complexos, negociações financeiras, tratamento de erros e etc.

  • Orientações de design:

Verificar com o DA o desenvolvimento das telas, no que se refere às diretrizes de AI e possíveis ajustes necessários durante o projeto.

  • Orientações de funcionalidade:

Verificar com a equipe de modelagem o desenvolvimento das telas, no que se refere às diretrizes de AI e possíveis ajustes necessários durante o projeto.

  • Orientações de acessibilidade:

Verificar com a equipe de implantação e modelagem o desenvolvimento das telas, no que se refere às diretrizes de AI e possíveis ajustes necessários durante o projeto.

  • Ecossistema:

Quando um projeto é formado por diversas peças (um site, um aplicativo mobile, uma página no Facebook, um banner, um hotsite etc.), é um mapa detalhado de como esses diversos ambientes conversam entre si. Para onde você quer levar cada usuário e por quê? Qual o caminho que você espera que ele percorra?

  • Roadmap:

É um plano de ação; um roteiro; um passo a passo para o desenvolvimento de um projeto que precise de fases nas entregas, ajudando a coordenar e planejar os avanços. Além de deixar claras as datas, ajuda também a enxergar o conjunto de tecnologias que podem ser aplicadas para o projeto.

  • Personas:

Se a premissa é cada projeto tem um público alvo a atingir, as personas são formatos para entender e enxergar melhor o usuário da solução web. É uma descrição que pode ser detalhadíssima ou mais simples, com o intuito de personificar um usuário do publico alvo. Esta pessoa de “mentirinha” ajuda o alinhamento das expectativas tanto do cliente, quanto da equipe, sobre recursos e funcionalidades que devem estar contidas no projeto e na avaliação do produto. Criando sua pessoa, é bacana conter:

  1. Nome para facilitar a associação com pessoas reais;
  2. Características e razões para que o site seja importante para ele. Um histórico da persona, em relação às suas expectativas com o projeto;
  3. Cenários para ambientar as condições em que a persona vai interagir com o site;
  4. Características de comportamento quer sejam emocionais ou sociais, que sejam comuns ao publico representado pela persona, hábitos, linguagem e motivações.

  • Mood Board:

Geralmente é um documento elaborado com ajuda do time de cultural insights, planejamento e/ou design, e procura reunir referências visuais do que se espera do site. Ajuda os designers a definirem qual linha visual devem seguir no projeto, baseado no universo de referências dos usuários.

  • Caso de uso/Documento de especificação e mensagem de sistema:

É o detalhamento de todos os cenários de uso e regras de funcionamento do sistema. Utilizados em projetos que possuem muitas variações de uso, esses documentos normalmente são escritos por um tecnólogo, que conta com a ajuda e validação do arquiteto de informação para levantar todas as situações possíveis.

É importante prever soluções e mensagens (de sucesso ou de erro) para cada uma delas, para garantir que a conversa com o usuário seja consistente e eficaz, independente do cenário em que ele se encontra.

  • Teste A/B:

São testes comparativos entre duas ou mais soluções para uma mesma tela, ou tarefa. O modelo clássico funciona da seguinte forma: metade dos visitantes vêem a versão A da tela, metade vêem a versão B, durante certo período de tempo. No final, mede-se e compara-se a desempenho de cada uma das versões – e a melhor delas é implementada para 100% dos visitantes. Testes A/B podem acontecer de forma sucessiva e constante, para que o produto evolua sempre.

Agora é estudar o cliente e seguir criando sets de entregáveis muito personalizados. Bons projetos!

Por: Iris Ferrera disponível em:
http://imasters.com.br/artigo/23529/usabilidade/o-que-podemos-entregar-alem-da-arquitetura-da-informacao

Road Show Belo Horizonte

by with No Comment EventosROIUsuário


No dia 13 de Setembro tive a oportunidade de participar do Roadshow BH, que é um programa composto por diversos eventos gratuitos organizados pelo HDI (instituto com foco em serviços de suporte ao cliente) e que tem como palco as cidades-sede da Copa do Mundo de 2014.

Os eventos do Roadshow duram meio período e sua agenda é composta por uma palestra e um painel de discussões com especialistas do setor de Gerenciamento de Serviços de TI e de atendimento ao cliente.

O público foi majoritariamente composto por diretores, gerentes e coordenadores das áreas de TI e RH.

Tive a oportunidade de assistir a palestra:

Como ITSM pode ajudar sua empresa a reduzir custos sem perder eficiência.

Oferecida pela Alexandra Hutner  responsável pela Hutner Consult e Prof. da Faculdade Dom Cabral.

Já no painel de debates o tema foi:
Como os serviços de TI podem impactar no resultado financeiro do negócio.

O clima foi agradável e a produção foi bem receptiva, com destaque a uma coordenadora (que não me lembro o nome) da Algar, empresa que patrocinou o evento junto ao Banco do Brasil.

Tive a oportunidade de conhecer pessoas interessantes e representantes de vários seguimentos, além do network no coffe break, muitos assuntos relevantes e cases foram apresentados.

Confesso que achei diferente o modelo de perguntas pré estabelicidas pela mesa, mas de qualquer forma isso deu uma direção, visto que o evento foi curto.

Neste caso especifico, acredito que o clima estava favorável para realizar perguntas o que não atrapalhou quem quis se manifestar

Acho essas conduções muito importantes e o condutor deve ser experiente.

Meu querido amigo Omar Brito contribui com suas perguntas sobre abertura de mercado em analise da segurança da informação e prevenção de perdas, talvez uma das perguntas mais relevantes.

O resultado foi bom e o evento ainda acontece em outras cidades, se você tem disponibilidade vale a pena participar.

Agradeço novamente a todos pela receptividade e parabéns pelo trabalho.

Design Thinking indo além, faça acontecer

by with No Comment Arquitetura de informaçãoDesignIdeiasUsabilidadeUsuário

Navegando o cmd+d (adicionar aos favoritos) acontece quase naturalmente, sempre deixo para ler algo mais tarde e muitas vezes isso se perde. Ontem fui procurar um favorito e não o encontrei, já que existiam mais de 450 páginas competindo entre si.
Foi então  que decidi absorver os conhecimentos em meu HD mental e apaga-los do meu histórico (e tentar na sorte encontrar meu favorito precioso).

O desafio do dia então foi não clicar em nenhum link novo, antes de absorver outros conhecimentos que acredito valerem a pena.
Acho que estou com alguns sintomas da navegação compulsiva (foco de discussão posterior).

Então nada como publicar para mentalizar e aprender mais.

“Mestre é aquele que também aprende a cada lição.” 

Li um artigo da Continuum na fastcodesign:
http://www.fastcodesign.com/1663487/how-design-thinking-can-help-prevent-another-mortgage-bubble (Disponível em inglês)

Em resumo ele fala sobre como o Design Thinking pode ajudar no entendimento de processos aparentemente complexos (como no caso da crise das hipotecas Americanas) e destaca alguns pontos de atenção na hora de desenvolver uma solução.

O artigo é muito bom e vale a leitura completa.

Abaixo um resumo traduzido das partes que considero importantes:

Três anos após a crise financeira, os preços da habitação ainda estão em queda livre …
Muitos proprietários de imóveis americanos, frustados e prejudicados pelo sistema de aquisição de imóveis, dão calote em suas hipotecas, levando o hit ao seu rating máximo de crédito e depois se afastando das casas que podem ter perdido mais de dois terços de seu valor em pouco tempo …

Então, como nós chegamos aqui? Não importa em quem você vai colocar a culpa ….  estamos falando sobre bancos, corretores de hipotecas, ou compradores?  …. parte do problema esta no processo de compra.
Ele é complexo, confuso e emocionalmente desgastante.

Mas comprar uma casa não precisa ser tão difícil. Em dezembro passado, o recém-formado Gabinete de Protecção do Consumidor Financeiro (CFPB) e seu novo chefe, Elizabeth Warren, decidiu que iria tentar fazer as coisas mais fáceis.

Reunindo especialistas de economia comportamental, política pública, lingüística e de design, o CFPB realizou um simpósio focado em redesenhar a forma de divulgação de hipoteca (MDF).

Junto com outras empresas de inovação, eles convidaram Continuum , para assumir o desafio de fazer uma versão mais fácil de usar do documento que os bancos usam para se comunicar com os compradores potenciais os termos de suas hipotecas.


[Redesign proposto Continuum]

Para aqueles de nós que eram designers… este era um sonho:

Aqui esta uma oportunidade para refazer uma ferramenta que desempenha um papel vital na vida de centenas de milhares de pessoas todos os anos.

Mas o que aconteceu naquele dia acabou por ser muito mais do que racionalizar uma forma crítica no processo de compra de casa.

Muito mais do que o redesenho de um “ponto de vista” dentro da “experiência do usuário.”

O que aconteceu foi que os participantes o simpósio descobrirão o quão radical uma solução de Design Thinking pode impactar no processo e na vida das pessoas …

Não demorou muito para se identificar um conjunto de princípios de design que tornam o processo em resolver o problema significativamente mais fácil:

– Fale a língua que as pessoas entendam:
Traduzir unidades financeiras e conceitos em termos que clicar com o modelo mental do consumidor.

– Mantenha vocabulário claro e consistente:
Certifique-se de suas palavras significam a mesma coisa em cada lugar que aparecer.

– Foque nos dados que importam:
Corte as informações irrelevantes e deixe apenas as informações de cosumo.

– Torne mais fácil de entender:
Procure envolver pistas visuais que podem ajudar a criar atalhos no processo de compreensão.

“Esta nova visão nos afastou da situação que nos rodeava…”

O que descobrimos foi que as pessoas só podem tomar uma decisão sábia sobre hipotecas, mantendo seu empréstimo oferecendo a elas uma visão clara do seu orçamento. Então, nós incorporamos essa perspectiva side-by-side no formulário
com a adição de uma calculadora simplificada com insumos para a renda mensal e despesas e uma saída que comparou o empréstimo ofertas diferentes em um índice de acessibilidade fácil de ler …. Corrigindo o maior problema …

Este tipo de reformulação, o hábito de pisar atrás e ver o contexto humano de um problema, precisa se tornar um hábito regular  …

Se vamos ganhar o futuro e assumir o desafio … nós precisamos ir além de uma utilização do design para lidar com problemas estéticos e explorar o poder do projeto para resolver significado.

 

 

Agora é só aplicar …

sfCon 2012 – Conferência brasileira sobre Symfony – Fotos

by with No Comment EventosSymfony

No dia 23 de junho de 2012, tive a oportunidade de participar e palestrar no primeiro evento Brasileiro sobre Symfony2.
Além, claro, de ficar feliz em participar do primeiro evento sobre assunto (já que venho trabalhando duro com Symfony desde sua versão 0.9 ), pude dividir o palco com profissionais que admiro, e ainda falei para pessoas considero fantásticas.

Quem pode participar com certeza gostou e fez bons amigos.

A interação entre as palestras foi muito legal e o evento se completou de uma forma muito interessante.

Todas as palestras logo ficaram disponíveis na web e avaliação do evento correu solta.
Você pode encontrar a avaliação e ver as palestras neste link (clicando no icone de slide) http://joind.in/event/view/931

Pudemos acompanhar desde de tópicos iniciais sobre Symfony2 e seus caminhos e desafios, falamos sobre migração, pontos de atenção e vários tricks, claro, outras áreas como injeção de dependência e testes estavam presentes e deram um grande charme para tudo.

Então assim aconteceu sfCon muito bem representado por todos os amigos da comunidade livre
(Se você esta por fora veja esta matéria).

Não tive a oportunidade de escrever sobre o evento, apesar de ficar inquieto e ter muita coisa em mente.
Também não tinha publicado as fotos que tiramos com minha câmera, mas hoje tive resolvi matar esse dragão.

Apesar de não falar muito neste momento deixo vocês na vontade para os artigos que pretendo publicar em breve, além disso vêm ai uma tradução para quem esta começando agora.

Nossa equipe aqui na TotLab vêm pegando pesado e dedicou um bom tempo para contribuir.

Fica então o meu abraço e todas as fotos.

 

 

Mais engajamento, Menos bla bla blá…

by with No Comment IdeiasMost ContagiousROI

Blá blá blá… isso é o que eu mais escuto nas Redes Sociais, principalmente no Facebook. E o que eu quero dizer com blá blá blá são todas aquelas informações inúteis, não pensadas, não planejadas que não levam você a absolutamente nada. Nem divertir, nem informar, nem evoluir… o mais puro e puríssimo blá blá blá.

Para piorar, tem quem curta todo esse blá blá blá e isso engana muuuuito mais gente. E para cortar logo essa onda e tirar você desse buraco, basta prestar atenção nos seguintes números da mega sena: 25-1-5.

O 25 é para você lembrar que 0,25% deve ser a média de interação do seu público nos conteúdos da sua fan page. O 1 representa o 1% que deve ser seu record de participação quando o conteúdo é realmente fantástico. E o 5… são os 5% de engajamento para ações que envolvem mimos, brindes ou presentes.

 

Entendeu? Então ache agora que Fan page com 100 mil fãs, consegue manter 250 likes / comentários em média por post, 1 mil para os conteúdos super bacanas e 5 mil quando o assunto é promos ou brindes. E pode tentar Coca Cola, Red Bull e até as Casas Bahia. Procure e depois vai ver como nessa mar de conteúdo, o que tem mesmo é muito blá blá blá.

E para ajudar a mudar esse papinho… aqui vão 5 dicas práticas do que fazer para engajar e começar a transformar audiência em público, público em pessoas, pessoas em alguém que queira comprar:


Aprenda o básico do Facebook… Use sempre linguagem proativa, como se fosse uma conversa. Atualizações com 80 caracteres (ou menos) possuem taxas de engajamento 27% vezes MAIORES que atualizações maiores. Atualizações que terminam com uma simples perguntam recebem 15% mais engajamento. Imagens são o conteúdo com maior interação. Anotou?

  1. Lançamento bacanas e novidades da marca para o público cativo é sempre um dos melhores presentes. Antes de todos, que tal eles serem sempre os primeiros a saber? Invista em perguntas, segredinhos, making off…  valorize seu público e faça ele se mexer.
  2.  Humor… Ah o humor… Iônico, amargo, escrachado ou o que preferir… vincular sua marca com sacadinhas de humor torna seu conteúdo mais leve e viral. Saiba qual o mote da sua marca ou produto e use. Crie, recrie e ache seu lugar ao sol.
  3. Quer mais? Promos, promos e mais promos. Promoções é um mantra para gerar buzz. Lembre que promoções constantes acostumam o público a voltar, interagir e compartilhar. Por exemplo, mini concursos, com pequenas competições diárias, são super bacanas. Que tal quem enviar a melhor foto com seu produto ganha um brinde promocional? Mas lembre, você quer vender, seja inteligente em como fazer tudo isso levar a interação e mais vendas.
  4. Por fim, estamos aqui para beber ou para conversar? Então onde estão os links para seus produtos com opção de comprar? Onde estão os descontos, cupons de 10%-30% para fãs, ou quem sabe o outlet da marca? Lembre de ser leve nas postagens, com benefício claro, direto e real.

Parece tão óbvio e simples fazer tudo acontecer. Será? Olhe de perto o conteúdo da sua fan page…  Se 80% do seu conteúdo não está em uma das 5 dicas acima, pare com esse blá blá bla que meu like tem mais o que fazer.

 

Artigo por:

Iuri Brito. O @GoUp no Twitter, é publicitário, mestre em planejamento, fundador da agência digital prumos.com e prêmio Talento Empreendedor. Hiperativo, vive hoje em New York e São Paulo.

Palestra Inovação centrada no usuário em BH IxDA

by with No Comment Arquitetura de informaçãoDesignEventosIdeiasInteratividadeMost ContagiousPrototipaçãoUsabilidadeUsuário

Neste mês de Julho teremos a 23ª edição do Encontro IxDA em Belo Horizonte, desta vez receberemos a visita do Paulo Melo, User Experience Business Mananger no C.E.S.A.R em São Paulo.

Teremos uma palestra e logo em seguida um bate papo informal com todos os participantes.

Inovação centrada no usuário
Criando os produtos que a sua vovó vai usar e você vai ficar feliz em comprar.
Com a necessidade de inovar se tornando cada vez mais urgente nas agendas das organizações, investir apenas na inovação de base tecnológica mostrou-se uma estratégia com limitações claras.
Neste cenário, um paradigma de inovação cada vez mais popular é a chamada Inovação Centrada no Usuário. Nesta perspectiva, o processo de inovação se dá a partir da inspiração nos hábitos e contextos do consumidor. A Inovação Centrada no Usuário parte da premissa de que inovações devem ser geradas de forma a serem baseadas no entendimento do usuário, solucionar problemas e atender demandas identificadas em um contexto social específico.

Sobre Paulo Melo
Psicólogo e mestre em Psicologia Cognitiva pela UFPE.
Em 2010, ele concluiu o doutorado profissional em User-system Interaction na University of
Technology Eindhoven (Holanda).
Profissionalmente, Paulo atuou como Designer de Interação e Especialista em Usabilidade no CESAR e CSIRO
(Austrália). Nos últimos anos, ele tem atuado na área de Experiência do Usuário (UX), onde trabalhou pelo CESAR Sul, Philips e In/situm. Ao longo de sua experiência profissional, Paulo participou de projetos ligados a jogos para aparelhos celulares, acessibilidade, aplicações médicas, TV digital, sistemas de informação e design de produtos. Atualmente Paulo é gerente de negócios para projetos em UX no CESAR em São Paulo. Além disso, Paulo tem dado aula sobre design, usabilidade e inovação na Faculdade Anhanguera, Universidade Positivo e CESAR.Edu.

Data: 11 de Julho
Horário: 19 às 22h
Local: Restaurante Take http://www.takebh.com.br/
Mapa Aqui
Programação: 40 minutos de palestra e na sequência um bate papo informal aberto a perguntas.

O evento é gratuito sendo obrigatório somente a consumação mínima de R$ 15,00 por pessoa, lembrando que na quarta-feira é dia de rodada dupla de chopp.
A quantidade de lugares disponível no espaço é limitada, então confirme sua participação no evento criado no grupo IxDA-BH no Facebook:
Facebook ou envie um e-mail para contato@ixdabh.org.
Abraço e esperamos todos de BH por lá 🙂