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

Tirando Screenshots Mostrando o Cursor do Mouse

Nessa etapa de prototipação estou tirando um monte de screenshots. Eles servem tanto de registro de como é a interface atual do fazDelivery, para eu comparar depois, como de base para as mudanças que estou pensando – já que, como comentei, não estou refazendo as telas do sistema do zero.

No geral, uso o plugin do Awesome Screenshot no Chrome para screenshots de sites, mas o fato de não ter como capturar o cursor começou a atrapalhar, pois eu queria capturar alguns resultados de interação com o mouse…

Pesquisei um pouco e encontrei o Shutter. O programa tem configurações para mostrar o cursor do mouse, e também para definir o atraso entre pedir pra tirar o screenshot e de fato tirá-lo. Assim, depois que você escolhe qual janela a registrar, dá tempo de ir até ela e executar alguma ação, pra capturar o que aparece com a interação do mouse. Neat! Do that again!

[Prototipação] Etapa 1: executando soluções para as violações de heurísticas. Reflexões sobre processo de prototipação

/*

Primeiro, um comentário: muitas vezes me perco, no processo do TCC, porque, ao invés de ver os passos de uma determinada tarefa ou etapa e segui-los à risca, sem pensar muito, começo a inventar firulas, ou tergiversar, ou, ou… e de repente me perco, ou faço mais do que preciso e menos do que devia, ou gastei um tempo danado fazendo coisas complicadas, sem alcançar o objetivo simples. Tudo isso atrapalha um bocado, mas ainda tenho dificuldade de evitar. É um pouco como o processo de leitura, quando de repente se está procurando um monte de artigos que já não estão realmente ligados ao que devíamos fazer, porque vamos saltando daqui pra lá e depois acolá, e não nos damos conta de como estamos nos afastando do objetivo inicial…

*/

Para prototipar, estou usando:

  • experimentações no HTML e CSS da página, através da ferramenta para desenvolvedor do navegador (no Chrome, o atalho pra ela é F12);
  • retoques ou ajustes mais livres utilizando o GIMP, uma ferramenta para edição e manipulação de imagens, de código livre.

Essa abordagem é porque não quero redesenhar a interface do zero, mas sim corrigir ou melhorar aspectos específicos. Se fosse fazer do zero, poderia utilizar ferramentas para criar primeiro protótipos em wire-frame e ir evoluindo a partir daí. Uma limitação que tenho é que não sei trabalhar com front end, ou seja, não tenho domínio de HTML e CSS, de modo que não consigo simplesmente abrir o código-fonte ou algum framework e sair editando tudo daí.

O que estou observando que deveria ter feito diferente, para essa fase de correção e prototipação – o ideal, parece-me agora, é:

  • pensar no conceito que se quer seguir;
  • ter a visão geral do todo – o que é preciso corrigir e onde, todas as correções para cada tela;
  • observar elementos que se repetirão em diferentes telas;
  • utilizar uma ferramenta que permita reaproveitar elementos – com camadas e elementos agrupados, por exemplo -, acredito que não terei problemas com isso no GIMP;
  • corrigir e prototipar a partir das peças menores, componentes, que se repetem em variados pontos do sistema;
  • executar a correção completa dos erros, por telas;
  • e, assim, ir realizando um trabalho de composição.

No momento isso parece um processo mais seguro para evitar retrabalho – por exemplo, eu não segui esses passos, até aqui, e estou mexendo em telas que listam itens de produtos, mas ainda não mexi nos produtos. Se e quando vier a mexer neles, precisarei alterar as telas novamente… O mesmo vale para a barra de busca, que aparece em várias telas (espero que essa seja mais simples de encaixar)… Mais grave ainda do que isso é que executei as correções para as violações de heurísticas e depois terei de fazer mudanças para as correções de testes de usuários, passando por telas em que já trabalhei.

Ah, amanhoje é: pensar e executar soluções para os problemas levantados nos testes de usuários. Ver se consigo seguir as etapas que falei acima. Daí precisarei gerar versões finais, fechadas, de cada tela, que agreguem as soluções das avaliações heurísticas e dos testes… Sim, idealmente, tudo no domingo.

Estou com sono e não revisei esse post. Um dia o releio e descubro barbaridades de escrita. Falta menos de uma semana para entregar a versão completa da monografia para a banca. /suspiro Eu vou sobreviver…

Roboto vs. Helvetica

Roboto vs. Helvetica

Estava procurando as diferenças entre as fontes Helvetica e Roboto, e encontrei essa imagem. Cool. =)

Serviu bem para o propósito – pude observar a face no fazDelivery e saber que definitivamente não é a Helvetica. Possível que seja realmente a Roboto, como algumas partes do CSS querem indicar…

Reflexões: escrever aos poucos, ao longo do processo

O fato de eu ir escrevendo na medida em que vou decidindo o que fazer, mesmo que por vezes me faça pensar que estou evitando entrar em algumas tarefas, geralmente me ajuda a refletir muito mais sobre o que estou fazendo, de modo que consigo entender mais o que estou planejando, e tenho mais chances, assim, de avaliar se estou fazendo a coisa certa, tomando as decisões certas, seguindo o caminho certo…

Ou, mesmo que eu não consiga seguir o melhor caminho, ao menos eu posso tentar entender por que não estou seguindo. Se a justificativa for razoável, então eu sigo (:

Exemplo desse processo, hoje: mais cedo, comentei que começaria a prototipar hoje. Entretanto, no processo de analisar como iFood, GuiaMais e TeleListas resolviam as coisas que estava com problemas no fazDelivery, gerei umas tabelas que queria passar logo pro LaTeX. Quando fiz isso, percebi que precisava reestruturar o capítulo sobre prototipação, para encaixar cada coisa em seu devido lugar e dar uma noção da ordem lógica que segui. E, quando fiz isso, percebi que eu não podia já ter proposto soluções antes de ter olhado os concorrentes – mas foi o que aconteceu. Então, amanhã vou revisar as soluções que tinha proposto, comparando com as das outras ferramentas.

[Andamento] Soluções para os Problemas Identificados

Primeiro, uma observação: a palavra que passei os últimos dias tentando lembrar (até ontem, anyways), para descrever o que sinto que faltou na condução da etapa prática do TCC é… rigor. Sinto que fui pouco rigorosa, principalmente na etapa de testes de usuários como um todo. Tinha pouca (quase nenhuma) experiência prática nesse quesito, e ainda assim planejei e conduzi tudo muito sozinha, o que também não ajudou. =/
No último capítulo, comentei que estava em dúvida entre prototipar ou implementar as soluções pensadas para os problemas. Pedi orientação sobre isso para orientadores e alguns amigos. João Rocha disse que preferia que eu implementasse e fizesse os testes com usuários; EJ sugere que eu faça apenas prototipação e comparação das duas interfaces (porque implementar em si pode trazer complicações extras, erros etc, que tirariam o foco no projeto). Entendo e consigo concordar com os dois pontos de vista. Fazer a implementação mais testes deixaria o projeto mais completo, porque teria seguido todas as etapas previstas pela metodologia que eu mesma apresentei. Mas isso reduz meu tempo de trabalho na prototipação em si, o que também tira qualidade do projeto. Então estava meio “dilemética”.
Ontem então pensei em um meio termo assim:
  • v-1.0: corrigir coisas em protótipo. Possível abordagem mista: selecionar os 10 problemas mais prioritários das avaliações heurísticas, mais os problemas dos testes de usuários. Corrigir.
  • v-1.1: Tendo tempo, implementar e testar;
  • v-2.0: sobrando tempo: corrigir em protótipo demais violações de heurísticas.

Está se encaminhando para eu conseguir fazer a v-1.0. Hoje terminei de descrever como três ferramentas correlatas abordam aspectos considerados problemáticos no fazDelivery. A tabela abaixo mostra uma parte dessa listagem (os Ids servem para identificar a que problema cada linha da tabela se refere – ok, sei que está ruim visualizá-la). Hoje, então, parto pra selecionar as soluções que de fato usarei e prototipá-las…

Excerto do levantamento de soluções correlatas.

Excerto do levantamento de soluções correlatas.