Protótipo Interativo 152

Após a evolução obtida através de esboços e wireframes foi criada a interface que serviu para realizar as sessões de teste de usabilidade com os utilizadores. Esta interface foi elaborada em Adobe Photoshop e tal como os esboços e wireframes, estava separada por ecrãs. Ou seja, não era possível fazer “scroll” com o rato para subir ou descer na vertical numa página. A camada de interação foi adicionada através do software Apple Keynote, para onde foi importada a interface e ligados os vários ecrãs entre si através de áreas clicáveis invisíveis que alteravam o ícone do rato para apresentar a existência de interação.

Existem algumas limitações em relação a protótipos interativos criados em Keynote. No caso do projeto desta Dissertação foram identificadas as seguintes como sendo importantes:

• Não é possível fazer scroll na interface;

• Não é possível introduzir texto em caixas de texto e obter resultados dessa inserção (por exemplo, pesquisar por algo);

• Não é possível simular o efeito Mouse-Hover.

De modo a reduzir o impacto destas limitações, foram desenvolvidas soluções alternativas. Para a primeira limitação, foi decidido criar uma interface que apenas preenchesse um ecrã com a informação mais importante above-the-fold, sem ser necessário realizar scroll para poder concluir um cenário.

A segunda limitação foi resolvida através do emprego de uma área clicável sobre a caixa de pesquisa que de acordo com a interação dos utilizadores, apresentava o texto a pesquisar e a barra de resultados baseada naquela pesquisa.

A terceira limitação, foi a mais complicada de resolver. Em relação a esta foram colocados ícones sob a forma de cursor de rato em zonas aproximadas a elementos que possuíam a funcionalidade de mouse-hover. Ao clicar nesse ícone, era simulado o que aconteceria em contexto real no caso do utilizador passar com o rato por cima do elemento. Acredita-se que esta limitação poderá ter tido implicação nos resultados das sessões dos testes de usabilidade (ver secção 6.12.3).

Nesta fase do protótipo era desejado que este possuísse o maior nível de fidelidade possível por forma a providenciar aos participantes do teste uma experiência mais aproximada daquela que estaria presente no produto final. Tendo sido abandonado o caráter mais transitório e de constante evolução das fases anteriores, tornou-se evidente quais os padrões de design (referidos em 4.11.13) que foram aplicados nesta interface. Referir novamente que foram elaboradas apenas as interfaces dos ecrãs relativos aos cenários que pretendiam ser testados nas sessões de teste.

De seguida serão igualmente apresentadas as alterações existentes em relação às

wireframes:

• No ecrã de settings os botões para ativar ou desativar uma opção agora contêm o texto “on” e “off”. Deste modo torna-se mais evidente o seu estado não dependendo apenas da cor ou posição;

• Foi alterado o ícone referente à lista “Doing It”;

• No Dashboard foram alteradas as posições das Settings, do botão referente à lista representada no gráfico e dos ícones público/privado, editar e favorito;

• Foi alterado o formato do gráfico. Este agora permite acomodar melhor as informações adicionais sobre quantidade de conteúdos por lista;

• Foi alterado o título “Scrobbles to Review” para “Activity to Review”. Foi usado um termo mais amigável e comum;

• Foram removidos das listas laterais as informações acerca da quantidade existente de cada conteúdo de entretenimento em cada lista uma vez que esta informação já existe explicita no gráfico;

• Os resultados da pesquisa indicam no final de cada conteúdo, qual o conteúdo que se irá pesquisar por mais. Anteriormente surgia apenas “More”, foi alterado para

“More Books”, “More Games”, “More Movies”, “More Music”, “More TV Shows”. Desta forma é reforçado qual o tipo de conteúdo de cada zona dos

resultados de pesquisa;

• No ecrã das listas foi removido o pop-up para escolha de lista que surgia aquando do clique no link “Lists”. Agora o utilizador é automaticamente reencaminhado para a página das listas. A lista Done surge como predefinição. Através desta alteração remove-se um clique extra desnecessário e a criação de mais um pop-up; • Foi removido o ícone junto à lista ativa na página de listas e que permitia alterar

qual a lista visível. Este foi substituído por uma terceira barra de navegação com os links para cada uma das listas. Desta forma estas tornaram-se mais percetíveis e a sua aplicação relaciona-se com o restante design aplicado ao longo da interface; • Na página de listas foram alteradas as posições do ano, dos ícones de

público/privado, editar e favorito e a informação relativa ao tempo despendido e restante para conclusão. Foi igualmente removida a identificação a preto para o filtro “all”;

• Nos diálogos modais de adição/edição de conteúdo foi alterado o link “List” para um ícone representativo de listas;

• Foi alterada a iconografia referente à gestão de progresso. No caso das séries televisivas, as temporadas deixaram de ser representadas por um triângulo passando a ser representadas por uma circunferência com um circulo no interior.

Foi criado um indicador de progresso adicional que adquire a funcionalidade de caráter geral. Por exemplo, nas séries televisivas corresponde à série inteira ao invés de apenas a uma temporada. Nos jogos corresponde ao jogo inteiro e nos álbuns de música ao álbum inteiro. Este novo ícone é constituído por uma circunferência com o ícone representativo de cada conteúdo de entretenimento no seu interior;

• Nas páginas gerais de todos os conteúdos de entretenimento, foram colocados o nome, ano e criador abaixo das capas representativas de cada item. Esta adição permite uma melhor identificação do conteúdo uma vez que este pode não estar percetível através das capas;

• Os botões para adicionar o item a uma lista, deixaram de ter os nomes das listas e passaram apenas a ter os ícones representativos das listas;

• Em caso de on-hover sobre uma capa, a supremacia visual do ícone de favoritos foi reduzida, todos os três ícones (público/privado, editar e favorito), encontram-se agora com as mesmas dimensões;

Após estas alterações e todo o processo iterativo que tinha acontecido até ao momento, existiu a confiança que a interface estava preparada para ser testada por utilizadores através de sessões de testes de usabilidade. De seguida nas figuras são apresentadas imagens relativas à página de introdução/login (Figura 6.10), página de Dashboard com pesquisa (Figura 6.11), página de definições de privacidade (Figura 6.12), página geral dos jogos com um mouse-hover (Figura 6.13) e a página de uma série televisiva especifica (Figura 6.14).

Figura 6.11: Dashboard com a barra de pesquisa ativa.

Figura 6.12: Página de Settings.

Figura 6.14: Página individual de uma série televisiva.