Arquivo da Categoria ‘Planejamento’

Mobile primeiro…

segunda-feira, 19 de julho de 2010

A frase acima é de Luke Wroblewski que nesse talk do LinkeIn nos mostra porque devemos planejar nossos produtos para dispositivos mobile primeiro, mesmo que o objetivo final não seja uma aplicação para celular.

O talk está em inglês mas coloquei os principais pontos (relacionados a user experience e design de interação) discutidos por ele em português logo abaixo :P

Produtos devem ser planejados para mobile primeiro (mesmo se o objetivo não seja mobile).Existem hoje mais de 10 bilhões de celuares no mundo. O crescimento do acesso a internet via mobile cresce 8 vezes mais rapido que o acesso desktop.

Razões concretas para que pensemos em mobile primeiro.

  • O crescimento da tecnologia mobile gera inumeras possibilidades.

Joe Hewitt, o criador da App do Facebook para Iphone, uma das Apps mais baixadas da AppleStore disse que “Inicialmente o objetivo era criar um complemento ao site, mas aos poucos ele se convenceu de que era possível criar uma versão do Facebook que poderia ser melhor que o proprio site.

Pessoas que usam a versão mobile do Facebook são 50% mais ativas que as pessoas que utilizam a versão Desktop.

  • Obstáculos fazem o usuário focar mais

Todas os obstáculos como telas menores, velocidade de conexão baixa e tecnologia ainda em desenvolvimento faz com que o foco na tarefa seja o principal objetivo de uma aplicação mobile.
Em dispositivos desktop a tela padrão disponivel é de 1024×768 enquanto na média o espaço de interação nos dispobitivos mobile é 80% menor (320×480). Isso mostra que o foco deve ser facilmente identificado nos dispositivos mobile em comparação aos desktop.

No Iphone Interface Guidelines diz “Em Iphone Apps, a função principal deve ser identificada imediatamente. Minimizando o número de controles aos quais os usuários devem escolher.Focando a atenção nas tarefas principais.
Em dispositivos como Ipad ou Iphone não existem menus, o proprio conteúdo é a UI do aplicativo. Pensando nesse sentido reduzimos a quantidade de objetos e interações que não fazem parte da tarefa trazendo o foco para o próprio conteúdo.

Design de interação de um jeito simples.

quinta-feira, 10 de junho de 2010

Já falei sobre ergonomia em design aqui e aqui, sobre as relações entre formulários e chaleiras neste outro post, testes de usabilidade, user experience e design de interação de maneira geral no blog. Porém acredito que em nenhuma das vezes chegue na simplicidade de Marcos Nahr ao explicar do que se trata design de interação como nos slides abaixo.

Se você ficou interessado de uma boa olhada, aproveite que está em português ;)

v

Sobre formulários, chaleiras e Christopher Alexander

segunda-feira, 26 de abril de 2010

Se você, assim como eu, é designer, diretor de arte, UI Designer ou qualquer profissional que em algum momento no dia-a-dia em agência web, precisa desenhar um formulário, então você vai se interessar por este post.

Através de um raciocínio bem simples, porém esquecido pela maioria de nós, Ryan Singer mostra como a criação de um formulário deve ser valorizada de forma a atingir seu principal objetivo, ser preenchido, de forma rápida, fácil e não traumática. Utilizando alguns pontos discutidos por Christopher Alexander em seu livro Notes on the Synthesis of Form.

Se você não se dá muito bem com a língua da rainha (Shame on you!) abaixo eu listo o principal ponto da palestra de Ryan. Obviamente a palestra vai muito além disso, portanto dá teu jeito e assiste.

Trabalhe tendo em mente as forças que nos guiam a realizar (ou não) determinadas tarefas e não na tarefa em si.
Todos sabemos o quanto preencher formulários é chato, e justamente por isso devemos criá-los (já que temos o poder para tal) de forma que os mesmo fiquem o mais simples, objetivos e relevantes possível. Uma das formas de pensar nesta tarefa é ter em mente quais são as principais questões que nos levam a preencher um formulário e quais são as que nos fazem desistir de tal tarefa.
Indo nessa linha de pensamento crítico Ryan, seguindo os ensinamentos de Christopher, nos induz a criar tendo sempre em mente a questão da Forma e Contexto.

  • Forma > Diferentes maneiras de realizar determinadas tarefas.
  • Utilizando o exemplo citado por Ryan no vídeo. Temos diferentes formas de aquecer a água para preparar um café ou chá. Utilizar a chaleira é uma delas, porém ao prototipar uma chaleira eu não preciso me fixar em detalhes como, um medidor da temperatura da água. Eu preciso simplesmente que a chaleira esquente a água. Ou seja, foco no objetivo.
  • Contexto >  Em qual contexto de uso realizamos esta tarefa.
    Utilizando o mesmo exemplo, ao realizar a tarefa de esquentar a água na chaleira eu tenho toda uma gama de distrações e possibilidades que a cozinha oferece. É preciso adequar a tarefa ao ambiente onde a mesma será executada, tornando-a prazerosa, rápida e fácil de ser realizada. No caso da cozinha, a chaleira compete pela atenção com uma série de outros artefatos mais interessantes que podem facilmente desviá-lo da tarefa de ter sua água quente. Então ao projetá-la é preciso ter o cuidado de ter ser uso simplificado o máximo possível, para que o usuário simplesmente não desista de seu uso por achar difícil demais, ou pior, encontrar uma outra distração ou facilidade.

Neste momento você com certeza já entendeu onde eu quero chegar. O formulário é com certeza um dos momentos de interação mais críticos em qualquer sistema. Assim como no caso da chaleira, seu formulário não irá competir com outros formulários e sim com uma série de outras distrações bem mais interessantes que estão a uma janela de distância. Então seja prático, rápido e relevante. Lembre-se Keep it Simple, Stupid!

Artigos, blogs e informações interessantes para UXD, AI e profissionais web em geral

sexta-feira, 16 de abril de 2010
usuario_flickr

usuario_flickr

Olá pessoal, volto a postar depois de um bom tempo  fora de órbita em função do nascimento da Lunna, minha filhotinha :) mas agora espero, aos poucos, voltar a velha rotina.

Enquanto não elaboro alguns artigos mais completos, deixo a vocês algumas dicas do que tenho lido ultimamente. Como já disse inúmeras vezes, tenho focado meu trabalho menos na publicidade e criatividade e mais na experiência do usuário. Logicamente sei que um não sobrevive sem o outro, no entando percebo que existe muita força de vontade criativa, mas grandes falhas na execução de projetos web/mobile e interativos em geral.

Então, se você, assim como eu, tem migrado para as áreas de User Experience Design (UX), Arquitetura de Informação (AI), Design de Interação (IxD) ou User Interface (UI), aconselho dar uma boa lida nos artigos, blogs e links a seguir. Detalhe, a maior parte deles são em inglês. Infelizmente bom conteúdo nessas áreas em português ainda é raro.

Interactions Magazine
Site da Revista de mesmo nome publicada mensalmente na gringa. Traz sempre artigos interessantes de profissionais do design e tecnologia como Donald Norman, Dan Saffer entre vários outros. Alguns são bloqueados para assinantes, mas boa parte do conteúdo é livre.

Donald Norman é unanimidade quando se fala em Design Centrado no Usuário. Seus livros The Design of Everyday Things e Emotional Design são referências mundiais na área, porém no site de seu instituto é possível encontrar material interessante para pesquisa como artigos e posts. Vale a pena.

Falando em gente antiga do design, nunca é demais lembrar de Jacob Nielsen. Todo designer com certeza conhece ou já ouviu falar das Heurísticas de Nielsen. Algumas delas soam antigas no novo mundo da web 2.0, porém seus estudos sobre padrões de interação e comportamento do usuário são estremamente relevantes ainda hoje.
Alguns bons artigos que li recentemente em seu site:
Scrolling and Attention (um estudo sobre a atenção que o usuário dispõe em conteúdos com rolagem e sem);
F-Shaped Pattern For Reading Web Content (post sobre um estudo realizado com mais de 200 usuários detectando padrões de leitura na web)

A list Apart é um site dedicado a profissionais web (designers, front-end designers e desenvolvedores) com interesse nas áreas de User Experience e Usabilidade na web e sistemas. Traz sempre bastante conteúdo interessante, apesar de alguns posts serem um pouco extensos.
Alguns artigos interessantes que li recentemente:
Contrast is King (sobre o uso do contraste em aplicações web e sistemas afim de facilitar a leitura para usuários com deficiências visuais como o dautonismo)
The Problem with Passwords (artigo tratando sobre novas soluções para campos relacionados com senhas, o novo padrão instituído no IPhone e outros aplicativos móveis)

Touch Usability conheço a pouco tempo, mas é um bom site para interessados em desenvolver aplicativos para interfaces touch.

52 weeks of UX é a iniciativa de dois designers charás, Joshua Porter e Joshua Brewer, que pretendem lançar um post semanal até o fim do ano falando sobre experiência do usuário, usabilidade e afins de uma forma menos técnica, mas nem por isso fútil. Vale a pena.

E por último, mas não menos importante tem o iA, site da Information Architectures, uma empresa Japonesa/Sueca cujo foco de atuação é a criação de experiências de uso interativas através da Arquitetura de Informação e Design de Experiência do usuário.
O último post dos caras Designing for iPad: Reality Check mostra o processo de criação de alguns aplicativos para Ipad que desenvolveram sem realmente ter o produto em mãos. É interessante pois mostra alguns perrengues que passaram com mockups de baixa fidelidade e pressupostos que cairam por terra quando tiveram o produto em mãos.

É isso galera, por enquanto fica a dica desses artigos. Gostaria de ter tempo de escrever sobre cada um deles, pois com certeza vale a pena, mas infelizmente não está rolando. Porém garanto que todos são extremamente úteis se você está começando nessa área, tem curiosidade ou quer realmente criar experiências interativas inovadoras.

Avaliação heurística no site www.redley.com.br

segunda-feira, 25 de janeiro de 2010

Para o trabalho de avaliação heurística da disciplina de ergonomia e usabilidade escolhi o site de comércio eletrônico da marca Redley para avaliar.

Sou um grande admirador da marca, porém nunca havia realizado compras pelo seus site de comércio eletrônico, portanto foi uma experiência duas vezes interessante.

À primeira vista o site me impressionou, pois logo na entrada já oferece duas opções ao usuário: Visitar o site institucional da marca e conhecer a nova coleção ou ir diretamente para a loja virtual. Isso me agradou bastante, pois já conheço a marca e sou um consumidor em potencial do serviço.

A tarefa realizada a seguir é a compra de um item na loja virtual da loja. Fiz a avaliação tendo como base as 10 heurísticas de Nielsen.

Home

home_geral

Pontos positivos.
Escolha entre navegação na loja virtual e site institucional na introdução do site.

Ponto negativo.
O menu produzido em flash pode ser um problema para usuários menos avançados. Sem o complemento instalado, o usuário não consegue visualizar o site institucional ou pelo menos ter acesso a estas duas opções.

Solução Produção de uma versão da página em html

Home Institucional

home_institucional

Pontos positivos. Clean e atrativa. Item compras online em destaque no menu.

Pontos negativos. A escolha da navegação não agrega valor ao usuário, tentendo a confundi-lo. O menu é escondido (é preciso usar a barra de espaço para que o mesmo apareça) e a ajuda fica no rodapé da pagina, inacessível a configurações de tela menores que 768px de altura.
Apesar do item compras online constar no menu, o mesmo não possui over no botão ao se mover o mouse entre as opções masculino e feminino.

Solução Dar mais destaque a estas opções com um over sobre elas durante a seleção.

Home Loja Virtual

home_loja

Pontos positivos.
Bem organizada, limpa e confiável. Os itens no menu da direita possuem over, facilitando a leitura das opções, informações sobre segurança do site, trocas e entregas constam na home dando mais confiança ao usuário.

Pontos negativos.
O banner da home é rotativo em flash. A navegação no mesmo é feita através de setas dos lados esquerdo e direito, porém a cor das setas algumas vezes se confunde com a de fundo da imagem, tornando-a imperceptível.
Alguns dos destaques do banner possuem cliques que levam ao item dentro do site, porém o padrão de botão não é seguido em nenhuma outra parte do site.
Em nenhum ponto do site é indicado explicitamente que estou na loja virtual de produtos MASCULINOS. A presença de um link FEMININO sem qualquer identificação abaixo do menu pode confundir a navegação.

Soluções (identificação da página) Consistência na identificação da página mantendo sempre o título da mesma em destaque no topo.

(Banner) Aumentar contraste do elemento seta no banner ou então modificar sua apresentação.

Home da Categoria

home_categoria

Pontos positivos.
A presença de breadcrumb no alto da pagina mais o destaque no banner e o item selecionado no menu e o nome da página ajudam realizar um escaneamento rapido da pagina.

Pontos negativos
A utilização dos filtros deveria facilitar a busca, porém atrapalha pois oferece opções de filtros além do necessário.
A cada modificação no menu dropdown um novo reload é dado na página tornando impossível a aplicação de ao menos 2 filtros de uma única vez.

Soluções Diminuir a quantidade de filtros, deixando-os mais relevantes. Exemplo (menor preço, mais recentes, tamnho M, etc)

Produto em destaque

produto_destaque

Pontos positivos
A pagina possui boa divisão da informação. As visualizações carregam rapido (inclusive o zoom para detalhes da peça)
Botão de ação critica (incluir item na sacola) está com bom destaque e de bom tamanho.
Informações sobre compra casada aparecem na rolagem, aumentando a probalidade de compra de outros itens.

Pontos negativos
Pagina um pouco extensa verticalmente. O botão de compra (incluir na sacola) somente aparece após a rolagem da mesma.

Incluir produto na sacola

produto_destaque2

Ao incluir o produto na sacola, um quadro surge indicando quais os produtos já estão em sua sacola, um subtotal e um link critico para fechar a compra.
Melhoria. Alterar a cor de fundo por uma mais constrastante para dar mais destaque a esta informação.

Solução Aumentar o contraste do box.

Cadastro e validação

cadastro

Antes de efetuar a compra o usuário deve preencher um formulário de cadastro, caso ainda não seja cadastrado no site. Esta tela possui mensagens amigáveis e de fácil entendimento.

Pontos positivos.
Tela de cadastro prioriza o contexto do uso. É bastante rápida e concisa, não pede informações desnecessárias e é bem organizada.
Separa as informações em 3 grupos distintos (Dados de acessso, dados pessoais e endereço de entrega
O label da informação é posicionado acima do campo alinhado a esquerda facilitando o processamento da informação (leitura top-down). Como o cadastro pede simplesmente o necessário, não sendo extenso demais, a probabilidade do usuário completar essa fase e realizar a compra é muito grande.

Carrinho de compras

fechar_compra

Página bem organizada e dinâmica, pode-se alterar a quantidade de itens ou excluir itens facilmente. O botão continuar comprando está bem localizado porém o botão “inciar fechamento” aparece somente após a rolagem.

Pontos negativos.
Botão critico longe da vista do usuário e com label estranho.

Soluções Trazer o botão para mais alto na página e mudar seu label. Exemplo, “ir para o caixa”.

Fechamento

fechar_compra_erro

Ao clicar em iniciar fechamento, novamente meu usuário e senha foram pedidos, (provavelmente porque demorei muito em minha sessão) porém ao tentar utilizar o usário e senha cadastrados tive o desprazer de não conseguir efetuar a compra. Pois o site me redirecionava para uma página de buscas que eu não efetuei.
Em nenhum de meus emails tive algum email resposta de confirmação de cadastro para confirmar meu usuário e senha. Nesse ponto desisti da compra.

Soluções Envio de email ao usuário logo após o cadastro com seus dados de acesso.

Modificar a mensagem de erro de forma a deixá-la coerente com a tarefa que está sendo realizada. Indicar caminhos para recuperação da senha.

De maneira geral o site da marca ofereceu uma boa experiência de uso. Apesar de um problema alta criticidade no momento de finalização da compra que pode ser resolvido de forma simples. Os outros pontos citados por mim na avaliação não são de grande criticidade, mas merecem atenção. Parabéns ao time de designers e programadores que proporcionaram uma boa experiência de uso para um fã da marca, continuem assim :)

O poder dos testes de usabilidade na experiência de uso de produtos e sistemas online

quinta-feira, 14 de janeiro de 2010

Ando estudando bastante sobre as várias disciplinas, etapas e processos que tratam de um bom Design de Interação. Uma delas, que inicialmente achava uma chatisse (e a primeira vista realmente o é), mas que agora estou aprendendo a amar são os testes de usabilidade.

Diversas vezes ouvi designers e diretores de arte web falando mal de testes de usabilidade e Arquitetura de Informação por achar que os mesmos “dificultam” ou “tiram a graça”  do trabalho. Como se criar uma experiência de uso de uma ferramenta na web não devesse passar pelo crivo do personagem principal da história, o usuário. Bobagem!

Ter em mãos resultados que comprovam, ou desaprovam, determinados caminhos no trabalho online é importantíssimo. Nos faz aprender mais sobre nosso público e sobre noss papel dentro deste universo.

O vídeo abaixo é antigo, uma raridade gravada em fita VHS, recentemente “upado” para o Youtube. Se trata de um teste de usabilidade realizado pela Corel (sim, a própria)  afim de testar duas ferramentas de um software destinado a construção de páginas. No teste o objetivo é construir um site com três páginas utilizando o método Wizard (um passo-a-passo) e o método Template.

O áudio é em inglês e não está muito bom, porém no final é possível entender muito bem o objetivo e a importância dos testes de usabilidade. Melhor ainda é perceber o quanto nossas opiniões, como profissionais na área, muitas vezes distorcem a realidade sobre o que é realmente bom para o usuário.

Por que a inovação é tão importante?

quinta-feira, 10 de setembro de 2009

Lendo este post bem bacana do site McKinsey soube que esta empresa possui um indice de pontuação para inovação (denominado por eles como IPS). A empresa, que na verdade é uma consultoria/instituto de pesquisas avalia o quanto do lucro de uma determinada empresa provem de atitudes ou produtos inovadores.

porque_inovar

No post em questão, eles apontam como são feitos alguns cálculos e uma parte dos processos para avaliar o índice de inovação das empresas. Não cabe a mim relatar isso aqui. Porém algumas lições extraídas deste estudo são bem interssantes. Veja abaixo.

1.Empresas que inovam fazem isso de forma consistente. Elas atingem o sucesso em grande parte (70 a 80 porcento de IPS) procurando novas soluções para seu negócio ou mercado ao invés de procurar ou criar novos segmentos.

2. Olhando para outras crises econônmicas, como a da bolha “.com”, percebeu-se que as empresas mais inovadoresas foram aquelas que continuaram estimulando a inovação e soluções diferenciadas mesmo em tempos complicados, ao invés de se manterem conservadores. A agilidade e a capacidade de inovar faz com que essas empresas/pessoas lidem melhor com desafios. Além do mais, muitos produtos importantes foram introduzidos no mercado em tempos de crise. Parafraseando o Presidente Obama em um conselho a Rahm Emanuel “Estas empresas não desperdiçam uma boa crise”.

3. Os variados tipos de inovação - produto, processos e modelos de negócios - são especialmente interessantes. Enquanto a importancia de cada um deles é variável ( por empresa, industria, segmento, etc), foi identificado que um grau significante de inovação dentro do modelo de negócio é comum e necessário para a condução de todo o processo de inovação, seja qual for o ambiente.

4. Existe um nivel ótimo de inovação. Empresas com um baixo nível de inovação, claramente sofrem em um mercado em constante mutação. Enquanto isso, empresas com os maiores níveis de IPS são as mais recompensadas com TRS (Retorno do Stakeholder. Quanto mais a empresa se mostra-se aberta a inovação e a pratica consistentemente, mais colaboradores, fornecedores e clientes com esse perfil são atraídos para a mesma)

Pense nisso!

___________________

Outros posts relacionados

O ziriguidum da cultura de Mashup

Crianças não tem medo de errar…

Onde está a inovação

“A indústria precisa dos músicos, mas os músicos não precisam da indústria.”

Volkswagen Eos | The Open Cage

quinta-feira, 20 de agosto de 2009

Navegando por aí muitas vezes encontro alguns sites que vão muito além da concepção tradicional de site. São trabalhos que agregam ao ato de navegar uma experiência nova, de diversão. Esse é o caso do novo site desenvolvido para o lançamento Eos da Volkswagen aqui no Brasil.
Com criação da Almap (pra variar) o site é um advergame onde o seu objetivo é desviar dos pássaros que tentam atrapalhar a sua viagem. Na viagem você passa por belas paisagens do interior de São Paulo do do Rio de Janeiro.

vw_eos

A produção e pós produção do vídeo ficou a cargo da Spray Filmes enquanto o design e programação do site, nas mãos da Grafikonstruct.
Um trabalho de nível gringo que cumpre seu papel de entreter o usuário sem esconder ou expor demasiadamente o produto. vale o clique.

Abaixo confira o making of da produção

Toyota IQ Font

terça-feira, 21 de julho de 2009

Simplesmente fantástica a execução desse trabalho para a promoção do novo modelo Toyota IQ na Belgica.

Para mostrar toda a flexibilidade, agilidade, desempenho e tempo de resposta de seu novo modelo compacto IQ, a equipe da fabricante japonesa chamou um tipo bem incomum de profissionais para trabalhar com seu piloto de testes Stef van Campenhoudt. Os tipógrafos Pierre & Damien e o desenvolvedor de software Zachary Lieberman. Já deu para imaginar o que vem por aí? Confira no vídeo abaixo.

Você pode baixar a fonte nesse link.

Vi no ADvertido

O crescimento da classe C no Brasil vira notícia na AdAge

terça-feira, 26 de maio de 2009

Não sei se os leitores do Mormasso tiveram a oportunidade de ler este artigo publicado na AdAge sobre o crescimento da classe C no Brasil e como as pesquisas de novos produtos relacionadas a essa classe tem atuado para tornar esse segmento atrativo para os grandes anunciantes.
Todo mundo sabe, pelo menos aqueles que trabalham, já trabalharam em agências ou convivem de perto com o mercado publicitário, que criar para classe C não é algo extremamente agradável. As idéias são diferentes, o approach também e infelizmente o público consumidor não é exatamente o mais letrado. Porém, é interessantíssimo quando se observa que esse forte crescimento (46% da população aproximadamente 86 milhões de pessoas) estimula a criação e desenvolvimento de produtos de qualidade voltados exclusivamente para essa faixa da população.

crescimento_classe_c
Um dado interessantíssimo que confirma essa afirmação é uma pesquisa encomendada pela Unilever a Latin Panel onde se constatou que 57% das maquinas de lavar no Brasil são “tanquinhos”. Ao observar isto e o crescimento das vendas desse tipo específico de lavadora semi-automática, a Unilever desenvolveu dois segmentos de seus produtos de limpeza Omo e Comfort focados exclusivamente para esse tipo de máquina. OMO Multiação Tanquinho e Comfort Concentrado Tanquinho dão acesso a produtos de uma marca premium e uma vez atingido esse nível de conforto, dificilmente o usuário volta a consumir um produto inferior.
Na verdade não sei muito bem quais os métodos de pesquisa utilizados para se detectar este crescimento, afinal estipular crescimento tendo como base o crescimento do consumo de marcas premium entre a massa não é o suficiente para saber se estamos bem o mal economicamente. Porém, recomendo a leitura de todo o artigo (em inglês). Tem um “Q” de jabá para essa nova empresa M&C Saatchi que desembarca no Brasil este mês, mas tras alguns dados bem interessantes e uma perspectiva de Brasil vinda do exterior bem diferente das tradicionais praias com macacos e cidades no meio da selva.

__________________

Leia outros posts relacionados à Unilever e Classe C

Guerra de Sorvete em novo comercial para Cornetto na Oceania

Publicidade e Social Media (blog Futuracom)]