Seguimos então com a análise deste problema: como escolher entre duas interfaces que dão suporte à mesma tarefa? Para quem não está acompanhando, as interfaces em questão são mostradas nas figuras 1 e 2.
Figura 1, à esquerda. Interface com drag n´drop. O usuário arrasta um conceito para a área ao lado da tree, e o local (y) onde ele largou o conceito define o quanto o material está associado ao conceito.
Figura 2, à direita. Interface com HSlider. O usuário seleciona um item na Tree. Na tela ao lado, há uma HSlider, que o usuário usa para dizer o quanto o conceito se asssocia com o material. Na Tree se podem ser, ao lado dos conceitos que estão associados com o material, o quanto (%) o conceito se associa ao material.
Estas interfaces foram avaliadas utilizando um conjunto de heurísticas e o KLM. Estes são dois métodos que pertencem mais ao design que ao desenvolvimento, e que são usados para informar a escolha. No entanto, eles não consideram a complexidade da implementação, que é um fator determinante na escolha. Por este motivo, pedi para alguns colegas avaliarem as duas interfaces e dizerem o quanto uma interface é mais trabalhosa que a outra. Além disso, pedi que, se possível, comentassem cada uma das propostas.
Pedi que a todos os avaliadores que considerassem a implementação na mesma linguagem de programação (AS3, usando Flex). Todos têm pelo menos 2 anos de experiência com a linguagem, e todos são desenvolvedores reconhecidos (à exceção de um, todos são moderadores de listas com mais de 2000 membros). Eles avaliaram o seguinte cenário:
/*******************************************************
CENÁRIO
O projeto é uma materioteca, usada para auxiliar no processo de seleção de materiais. Será usada por designers, arquitetos e eventualmente, por engenheiros.
A tela em questão é para associar conceitos a um dado material que está sendo criado pelo administrador da materioteca (você :0). Estes conceitos são palavras, e são características abstratas do material. Pense que isso pode ser importante para um designer fazer sua escolha. Exemplos de conceitos podem ser: inovador, sensual, moderno, vibrante, vulgar, barato etc.
Você não irá criar conceitos, apenas usar os que estão disponíveis.
As implementações possíveis estão nos pngs anexos*
*******************************************************/
O resultado até agora é:
- Desenvolvedor 1 -> Interface A(Drag n´ Drop)=2 * Interface B (HSlider)
- Desenvolvedor 2 -> Interface A(Drag n´ Drop)=10 * Interface B (HSlider)
- Desenvolvedor 3 -> Interface A(Drag n´ Drop)=4 * Interface B (HSlider)
- Desenvolvedor 4 -> Interface A(Drag n´ Drop)=3 * Interface B (HSlider)
Além disso, alguns ainda enviaram comentários:
Desenvolvedor 1
- “Preferiria implementar a segunda forma, acho que é bem mais intuitiva para o usuario”.
- “[...] Ok… pode ser até mais dificil de implementar, mas a real importancia não é a dificuldade da implementação mas a experiencia do usuario em usar essa app”.
No email de resposta ainda haviam exemplos de interfaces que suportam a mesma tarefa, referidos pelo Desenvolvedor 1 como sendo de pior qualidade. Os dois exemplos estão mostrados abaixo.
—————————————————–
| Conceito A | <combo box de %> | Selecione o valor percentual de associação
—————————————————–
| Conceito B | <combo box de %> |
—————————————————–
| Conceito G | <combo box de %> |
—————————————————–
Ou pior ainda… :
——————————————————————
| Conceito A | <textInput / NumericStepper> | Digite o valor percentual de associação
——————————————————————
| Conceito B | <textInput / NumericStepper> |
——————————————————————
| Conceito G | <textInput / NumericStepper> |
——————————————————————
Desenvolvedor 3
- “Então, olhando as duas opções, a primeira usando um HSlider me parece muito ‘tradicional’, mais fácil de manipular mas mais difícil de analisar o todo. Gosto mais da segunda opção, apesar de mais complexa para o usuário final manipular”.
- “Obviamente que o usuário final não está tão acostumado com o drag and drop nos softwares como ele usa no sistema operacional, mas dá uma dimensão muito melhor, acredito até que ele acharia ruim essa opção em um primeiro momento, mas depois de começar usar se sentiria mais confortável em poder analisar todos os conceitos de determinado material de uma única vez.”
- Em uma conversa via MSN, este desenvolvedor sugeriu uma “solução intermediária”, na qual ao arrastar o conceito para o Canvas, uma janela é criada, com uma barra deslizante, usada para definir a associação ao conceito.
Desenvolvedor 4
- “Usaria o hslider/vslider em vez do cenário do canvas”.
- “Bem, colocaria os itens em ordem decrescente de %, facilitando assim ao usuário a associação visual.”**
- “Uma sugestão também é em vez de usar um slider, usar um itemRenderer que mostre um NumericStepper. Na minha opinião usaria o NumericStepper, porque daria menos trabalho sem perder a funcionalidade e agregando maior agilidade para o usuário. Usando NumericStepper como itemRenderer acredito que levaria menos tempo ainda que o slider, talvez 0.6x, além que área que deixaria de ser usada pelo slider poderia ser usada para outra coisa.”
Dois desenvolvedores manifestaram preferência pela interface com Drag n´Drop, um pela interface com HSlider e um não manifestou preferência. No entanto, todos afirmaram que a interface com Drag n´Drop é mais demorada.
Assim como as avaliações anteriores, estes pareceres não foram conclusivos em favor de nenhuma das opções, pois, mesmo que dois desenvolvedores tenham manifestado clara preferência pela interface com Drag n´Drop, é preciso avaliar se o tempo de implementação é um fator importante.
Cada vez mais acho que vou precisar de um protótipo para dar o veredicto :0)
Acompanhe!
PS: Se você também quer mandar sua estimativa e seus comentários, comente aqui ou mande por email. Vou incorporar no post.
* As imagens do início deste post, com descrições sobre detalhes da implementação e sugestões para os algoritmos.
** No HSlider
