Prototipando SERP e Document Surrogate

Passei os últimos… Dois dias? Talvez isso, talvez três, me sentindo meio empacada na Página de Resultados. Me sentia andando em círculos, ou desfocada, ou perdida, ou tudo junto. Cheguei a rascunhar:

Acho que… mexer no html direto às vezes faz perder o tempo e me desfoca. É possível que isso seja porque desvio de planejamentos, e fico apenas experimentando, sem metas claras. Os objetivos precisam ser claros, do contrário dá pra passar muito tempo mexendo semi aleatoriamente em interfaces e elementos =x

Ontem ficou evidente que eu precisava mudar alguma coisa na abordagem, pois o tempo está se esgotando e preciso ter alguma versão da Página de Resultados. Uma versão meia-boca me ajuda, pois posso prosseguir com as outras atividades e terminar o TCC em tempo. Nenhuma versão me leva a lugar algum e coloca em risco meu cronograma, de modo perigoso. Então decidi tentar escrever não apenas as correções que queria fazer, mas o meu objetivo pra página, ou tudo o que queria fazer nela, e em que ordem fazer, e quando usaria que ferramenta – para evitar, como comentei acima, ficar vagando pelo HTML.

Isso de algum modo ajudou. Ainda gastei um tempo danado, e me enrosquei um bocado até conseguir perceber que estava avançando. Mas, no processo, me dei conta de outra coisa que também deveria estar influenciando minha dificuldade com essa etapa e essa página – de algum modo, acho que sinto que essa é a culminância da parte prática do projeto.

O que me fez querer trabalhar com a usabilidade do fazDelivery foi justamente a página de resultados da ferramenta. Os itens de resultado espalhados etc, me incomodavam e eu queria mexer naquilo. E então trouxe isso para o TCC e desde o anteprojeto indiquei que o objetivo principal seria melhorar a SERP do FD. Então entrei de fato nas etapas do projeto, fui seguir os passos formais de resolver problemas de interfaces e muitos meses se passaram. rs. Referencial Teórico, Planejamentos, Adaptações, Cronogramas, Reduções de Escopo, Sessões de Avaliação Heurística, de Testes com Usuários, compilar todos os dados que daí surgem, ver os problemas que as pessoas apontaram (ao invés de sair mexendo a partir do que eu gostaria), mais reduções de escopo… E tudo isso “de repente” finalmente me leva para o que eu queria fazer lá atrás.

Ufa, ok, então, que houvesse tanta ansiedade no resultado dessa tarefa específica… Tudo isso só aconteceu porque queria fazer algo legal aqui. rsrs. Bueno, ao menos me sinto aliviada porque consegui ultrapassar as barreiras e entender quais eram, e elas faziam sentido.

Post its, ativar! Como ter uma comparação "rápida e simples" de posições de elementos de vários sites.

Post its, ativar! Como ter uma comparação “rápida e simples” de posições de elementos de vários sites.

E o que saiu daí? Fiz duas versões de Item de Resultado (Document Surrogate), tentando separar as informações do estabelecimento das informações do produto, deixando o item como um todo mais compacto e tentando dar mais destaque para algumas informações (além de tirar algumas coisas que pareceram não estar fazendo muita diferença, nos testes com usuários).

Tenho uma versão semi-pronta da página de resultados, que estava esperando ter resultados para irem nela. Fiz análises do Google, GuiaMais, iFood e TeleListas, para comparar onde posicionavam a opção de refinamento de busca (e como a apresentavam), além de quantos resultados exibiam antes da dobra (above the fold), e como estavam centralizados na tela. Usei isso para basear minhas definições de novo layout da SERP do fazDelivery, sempre colocando como restrição pra mim que eu focaria em trabalhar com os elementos já existentes, evitando criar funcionalidades ou elementos novos, e me guiando pelos resultados das avaliações heurísticas, testes com usuários e priorização de problemas que decidi.

Agora preciso encaixar a Busca Avançada na Página de Resultados, resolver Botão de Voltar ou Breadcrumbs – em suma, oferecer uma solução de Controle de Navegação -, e creio que a SERP estará pronta. Aí fica faltando a Página de Listagem de Categorias, na qual já dei uma pensada, e que será mais simples, uma vez que o item de resultado já está pronto.

Bueno! É isso! Vou dormir e voltar pra terminar essa parte. Ainda há um tanto razoável de coisas a fazer e depois precisarei descrever tudo mais formalmente, na mono. E ainda tenho de revisar tudo.

Woooo!

Estamos, meu bem, por um triz para o dia nascer feliz.

Advertisements

44 dias: detalhar problema, solução (e metodologia?)

Ok, eu preciso definir, com mais clareza, qual o problema do fazDelivery que pretendo resolver, no projeto de TCC. E também qual a solução que proponho. O que sei/sabemos no fazDelivery é que pessoas para quem divulgamos o site e que observamos (ou não) usando, com ou sem explicações do que se tratava o sistema, reportaram alguns problemas de compreensão de qual era o propósito do site, ou o que poderiam encontrar lá ou mesmo como buscar – temos as mais sérias desses reclamações guardadas, desconfio, neste momento, que posso – e devo – recuperá-las.

Para saber se poderia citar essas experiências, li o artigo de Nielsen sobre Discount Usability. Na verdade, uma espécie de auto-análise deste movimento, após 20 anos do artigo (que é de 1989) em que ele propõe esta metodologia: http://www.nngroup.com/articles/discount-usability-20-years/.

Em linhas muito gerais, a ideia é que é possível conseguir resultados e melhorias de usabilidade muito boas com recursos simples, como prototipagem de papel; avaliação heurística e estudos qualitativos, com testes de usabilidade iterados com cerca de 5 usuários.

Um trecho que me chamou a atenção – porque posso tentar avaliar se tenho condições de conduzir testes de usabilidade com o limite de tempo que tenho – foi onde ele fala dos resultados que conseguiu, com essa abordagem, à epoca do artigo:

For the bank account project, I tested 8 different versions of the design; in the IRA project, I tested 11 different versions. These extensive iterations were completed in 90 hours in the first case and 60 hours in the second. Both projects had great results and were possible only with discount methods.

Discount usability often gives better results than deluxe usability because its methods drive an emphasis on early and rapid iteration with frequent usability input.

Creio que preciso perguntar aos orientadores se posso usar os feedbacks iniciais de nossos usuários como justificativa para o problema no fazDelivery – com base na sugestão de Discount Usability de Nielsen, por exemplo. E, a partir daí, avançar…

52 dias: Que história eu preciso contar? Ou: será que contar histórias ajuda?

Tudo começa mais ou menos assim…

Eu trabalho (ou trabalhava) no fazDelivery, que é um buscador de deliveries. Ele tem um motor de busca muito bem planejado, mas sua interface, apesar de ter contado com algum nível de cuidado no que diz respeito à usabilidade, não foi de fato construída por especialistas, nem foi completamente desenhada com foco nas necessidades do usuário (o que poderia reduzir a necessidade de um especialista, já que as pessoas naturalmente indicariam “o caminho das pedras” do funciona melhor para elas quando estão buscando por serviços de pronta entrega).

Quero melhorar a usabilidade do fazDelivery, pois tenho a hipótese de que isto aumentaria sua aceitação e uso – porque diminuiria seu bounce rate (i.e., a taxa de pessoas que entram e saem da página logo depois, por acharem que ela não é o que desejam).

(more…)

Inspirações: buscadores verticais, nuvens de termos e muitas cenouras para tod@s

No último encontro com o orientador, olhamos alguns sites de busca. Ficou como tarefa usá-los com mais calma, pesquisar outros e começar a rascunhar um protótipo, a partir do que fosse vendo e experimentando. Essa parte não avançou muito, mas a busca por interfaces inovadoras e relevantes para o usuário trouxe resultados (como vou fugir desses trocadilhos? >.<‘) diferente, bacanas, animadores (se você está com pressa, fique com os tópicos sobre o Quintura e o Carrot²):

  • Quintura – mostrado por EJ. Apresenta-se como um buscador visual. Exibe uma nuvem de termos sugeridos (eles chamam de search cloud), baseados no contexto presumido da consulta feita, que podem ser usado para refazer e melhorar a busca.
Listagem de resultados do Quintura e sua patenteada visualização de termos relacionados.

Listagem de resultados do Quintura e sua patenteada visualização de termos relacionados.

MyTaptu. Aqui, com notícias do The Guardian. A disposição das listas dá um favoritos legal.

  • Pulse – focado em dispositivos móveis, possibilita que a pessoa cria listas personalizadas de sites para receber atualizações. Veio parar aqui porque achei interessante a questão da visualização das listas, no contexto reduzido da tela do smartphone / tablet. Como tenho interesse em melhorar a UX do fazDelivery, e temos versão mobile, é uma fonte bacana.
  • (My)Taptu – (esse ao lado) eram um buscador mobile, mas preferiram seguir uma linha diferente para evitar a intensa concorrência. Transformaram-se em um feed de notícias personalizado. Por motivos similares aos do Pulse, considerei-os uma referência válida, para agora ou logo mais.
  • Yummly é um buscador para receitas culinárias. Oferece vários filtros relacionados, explorando diferentes interações. Ouvi opiniões de que fica muito carregado, com informações demais, mas para quem gosta de filtros de resultados ou de cozinhar, vale conhecer.
Toooodos os filtros de resultados do Yummly.

Toooodos os filtros de resultados do Yummly.

  • E agora eu chego a la cràme de la cràme. O Carrot² é um motor de busca open source  para agrupar de resultados. Quem me indicou foi o João Rocha, professor da UEFS e consultor na área de Bancos de Dados e Buscas. Como outros, buscadores, este oferece eixos temáticos para contextualizar a consulta. Mas sua mágica de interação está quando os resultados aparecem. Além da listagem, há um menu à esquerda que organiza o conjunto encontrado de acordo com algumas palavras chave comuns ao domínio pesquisado (essa é minha inferência, não o estudei a fundo): pode-se ver uma árvores de pastas, como num explorer convencional; vê-las em um círculo que mostra segmentos de tamanho e cor variados de acordo com o termo; ou ver uma estrutura que eles chamam de foam tree, ao pé da letra, árvore de espuma (a mim lembra um casco de tartaruga, também) – cada conjunto de termos relevante listado por eles vira uma “bolha” no conjunto, com tamanho relacionado à quantidade de resultados agregados sob aquele termo. Coisas que encantaram:
    • essas variações, meio interativas, coloridas e bem feitas, são lúdicas, então levam a pessoa que está pesquisando a passar mais tempo “brincando” com os resultados;
    • além de bonitinhas, elas são úteis, porque de fato são filtros, também, e ajudam a trazer à luz elementos talvez desconhecidos no momento da pesquisa, através dos termos que agrupam. É uma ideia parecida com a do Quintura, mas implementada com muito mais eficiência, baseada na experiência que tive com ambos. Entendo agora, pensando melhor no assunto, que ambos criam filtros dinâmicos, a partir do contexto da busca.
    • O resultado dessa interface diferente é que o Carrot² realmente me ajudou a achar um termo que me parece ter muito a ver com a área do projeto, mas que ainda não tinha encontrado nas outras pesquisas que fiz. E isso porque fiquei mexendo nas bolhas e no círculo e com isso fui, por tabela, explorando termos relacionados ao contexto da consulta que fiz (“innovative human computer interfaces search”). A conclusão é que trouxe algo que evoluiu o entendimento de meu trabalho, e, de quebra, ajudou a comprovar que uma boa forma de visualizar e filtrar a informação pode fazer toda a diferença na hora de encontrar itens relevantes para o usuário.
A visualização em "foam tree" do Carrot².

A foam tree do Carrot². Vou deixá-l@s na curiosidade das outras visualizações, para que o visitem.

Pra fechar: o que encontrei foi a área/ termo “Human-computer Information Retrieval“, que abrange pesquisas e trabalhos que trazem a inteligência humana para o processo de busca. Será que tem a ver? Acompanhem esta emocionante descoberta nas cenas dos próximos capítulos!

Metáforas Visuais e Usabilidade; um Mapa Conceitual, Problema de Pesquisa e Título (!!)

29/04 -> Repassei uma das listas de referências da pasta indicada pelo orientador, baixei alguns dos artigos listados.

Ele é muito convincente.

Jack dá seu apoio moral.

30/04 – Estudei sobre metáforas visuais, para ter um conceito mais concreto. Encontrei um post que dava uma explicação curta, mas talvez suficiente. Li também um trecho de uma dissertação que destacava a importância da interface gráfica (e das metáforas visuais utilizadas em sua construção) no nível de interatividade alcançado entre sistema e  usuário.

O que entendi: uma Metáfora Visual é uma tradução de conceitos, ou uma transposição destes de um contexto para outro, para facilitar o entendimento do usuário, por aproximação de símbolos ou significados já comuns a seu cotidiano. Assim se enquadra por exemplo o uso de um ícone com uma tesoura para representar a ação de recortar.

01/05 – Comecei lendo dois textos curtos sobre usabilidade:

  • Uma matéria que sobre a importância de entender que a experiência de usuário vai além do designe.g., o conteúdo oferecido por um site também faz parte de sua UX, e, nesse sentido, o vocabulário utilizado também deve ser pensado.
  • Uma lista com 10 heurísticas para usabilidade, de Nielsen. Cita desde garantir a autonomia do usuário e reduzir o potencial para erros (exibindo mensagens de confirmação e dando suporte a desfazer refazer) até manter uma seção de ajuda ou exibir feedback claro sobre o status do sistema. Nielsen é um dos caras quando se trata de usabilidade, e tem trabalhos publicados na área desde 1990 (lá se vão 23 anos). Não pude deixar de fazer a correlação com aspectos importantes de gamificação: feedback, autonomia, que também se preocupa em construir sistemas centrados no usuário e em sua satisfação.

Dúvida surge: o que é maior: Usabilidade ou IHC? Encontrei um capítulo sobre Usabilidade e IHC, da dissertação de Breno Gentil, que estuda a Usabilidade de ambientes virtuais tridimensionais. Gostei do trecho abaixo, porque me faz pensar em valores que desejo que os usuários extraiam do fazDelivery:

Jordan (1999)* descreve satisfação como o nível de conforto que o usuário sente ao utilizar um produto e o quanto esse produto é aceitável para o usuário como veículo para atingir seus objetivos. Para Jordan existe atualmente bastante esforço em melhorar a usabilidade através da facilidade de uso, entretanto um usuário pode decidir usar um produto, apesar de sua dificuldade, por ele ser atrativo, divertido, surpreendente, memorável ou recompensador, ou seja, proporcionar prazer na experiência de uso. *(JORDAN, P.W. Pleasure with Products: Beyond Usability. London: Taylor & Francis, 1999)

Finalmente construí um mapa conceitual satisfatório para me ajudar a chegar a um problema de pesquisa. A partir disso me senti mais capaz de extrair um título para o projeto.

=> Surge um problema de pesquisa? Como a interação com o usuário pode melhorar os resultados apresentados por um buscador cujos itens pesquisados não são fortemente textuais?

02/05 – Briga para achar um título pra esse negócio (pois é, no title yet). Retrabalhei um pouco o problema de pesquisa: Como técnicas de IHC podem ajudar a melhorar os resultados apresentados por um buscador cujos itens pesquisados não são fortemente textuais?

Para ilustrar o potencial da interatividade, gosto do site do Burger King: eles oferecem um cardápio com uma interação para recomendações que é muito legal.

Título v.1: Avaliação de Técnicas de IHC para Melhorar a Classificação dos Resultados Oferecidos por um Sistema de Busca Baseado em Palavras-Chave

A ideia seria melhorar o rankeamento dos resultados do buscador do fazDelivery, abrindo assim a possibilidade de convergir trabalho e estudo.

Situação atual:

  • apresentar título ao orientador;
  • entregar Declaração de Orientação – 99%;
  • Anteprojeto (20%) – pending!
    • problema de pesquisa – ok;
    • título – ok;
    • bibliografia inicial – ok;
    • leitura e escrita – pending!!