Esboços e Wireframes 146

Os esboços foram evidentemente a primeira fase da passagem para uma componente visual de todos os dados recolhidos durante a fase de investigação e de definição de requisitos, criação de personas e de cenários de contexto. Foram desenvolvidos com recurso à aplicação Paper

para iPad.

A estrutura geral da plataforma ficou definida nesta fase: Barra de navegação na zona superior do ecrã, zona lateral sempre presente que informa sobre a quantidade de conteúdos presentes nas listas do utilizador, um gráfico a conferir a essas informações um contexto mais visual. Nessa zona lateral estão também presentes informações adicionais para o utilizador como a sua descrição, o seu username, pessoas que segue ou que o seguem na plataforma e o acesso às definições da conta. Para além da navegação no topo e desta zona lateral persistente, existe um segundo nível de navegação no interior de cada página. Esta navegação era igualmente apresentada numa região mais aproximada do topo da interface, estava disposta na horizontal e não estaria sob a forma de botão mas apenas de texto que teria uma tonalidade mais escura se fosse a página ativa, ou mais clara no caso de não estar ativa.

Através dos esboços compreendeu-se qual a importância que teria a cor na identificação de cada conteúdo de entretenimento e qual seria a aproximação realizada em relação à

apresentação, quantidade e disposição de elementos por página. No entanto, as cores aplicadas nesta fase a cada um dos conteúdos de entretenimento, não foram as cores finais uma vez que posteriormente foi identificado que poderiam causar alguns problemas para pessoas daltónicas. Assim, das cores que se mantiveram, estas viram os seus tons ligeiramente alterados e foram acrescentadas mais duas variantes a cada cor (ver secção 6.11.2 Considerações a nível de cor).

Durante esta fase, os esboços foram apresentados a 2 professores da unidade curricular de Interfaces Multimodais (Professor Miguel Carvalhais e Professor Rui Rodrigues), e a alguns colegas tendo sido discutidas algumas incoerências existentes e que deveriam ser resolvidas em esboços/wireframes futuros.

Nas figuras estão apresentados 2 esboços de duas áreas distintas da interface (Figuras 6.6 e 6.7):

Figura 6.6: Esboço de uma página de Dashboard. (A primeira página apresentada ao

utilizador após este efetuar login).

O objetivo com o desenvolvimento dos wireframes passou por corrigir os problemas identificados durante a fase de esboços, aplicar a nova paleta de cores e definir melhor ao nível de conteúdo e posicionamento os elementos presentes na interface.

Em relação à fase anterior, foram realizadas as seguintes alterações:

• No ecrã inicial foram adicionados botões para login através de oAuth nas redes sociais Facebook, Twitter e Google+;

• No ecrã inicial foi alterada a posição de cada um dos elementos e adicionados os campos para a frase promocional da plataforma assim como para pequenas frases explicativas do funcionamento da página;

• Na página inicial foram colocados links no rodapé para aceder às páginas de

About, Privacy, Terms of Service e FAQ;

• Alteração da paleta de cores;

• Alterado o nome da lista de “Not Done” para “To-Do”; • Alteração dos ícones referentes à lista Doing It e To-Do; • Adicionada a seção “Scrobbles to review” no Dashboard;

• Acrescentado um botão na zona lateral para definição de qual a lista que apresenta dados estatísticos no gráfico;

• Adição do ícone para tornar um item privado ou público;

• O título do conteúdo, ano e autor já não são todos apresentados na mesma linha; • Adicionada a funcionalidade de tags;

• Na barra lateral onde era indicado o número de cada tipo de entretenimento em cada lista, foram adicionados ícones representativos de cada entretenimento em detrimento de texto;

• Na página de amigos estes foram separados por Following e Followers ao contrário dos esboços onde a ligação a outros utilizadores estava presente na mesma zona;

• Na página de estatísticas foram associados ícones representativos de cada conteúdo de entretenimento às barras dos gráficos;

• Nas interfaces gerais de cada conteúdo de entretenimento assim como nas páginas individuais de um item, foi adicionado o ícone para editar as informações do conteúdo através do mouse-hover em relação à imagem representativa do entretenimento;

• Foram adicionados 3 botões na região inferior de cada capa representativa do conteúdo de entretenimento. Estes permitiam a adição a uma das 3 listas (Done,

Doing It e To-Do). Nos esboços esta interação era feita através do on-hover sobre a

capa e de um pop-up que apresentaria 3 ícones referentes a cada lista;

• Foram alterados termos como “Delete” para “Remove” e de “Now I’m Done” para “Save”;

• Aos diálogos de adição de detalhe a itens, foram adicionadas as opções: Para alteração de lista, Ownership, Tags e barra para definição de progresso;

• O sistema de notificações foi alterado. Anteriormente era apresentado um diálogo modal que avisava o utilizador do sucesso da sua ação. No entanto este teria de fechar esse diálogo para voltar a interagir com a página em que estava anteriormente. Com as novas notificações aplicadas através de uma barra no topo da interface, o utilizador não tem de quebrar o seu processo de interação;

• Na página de um item de entretenimento, foi adicionada a informação para a quantidade de utilizadores que possui o item na sua lista de To-Do;

• Nesta mesma página foram adicionados links externos para pesquisar por informações sobre o item em outras páginas que não o Pentamer. Por exemplo, no caso das séries são disponibilizados links para o IMDB, TVDB e Wikipedia;

• Foi adicionada a funcionalidade de pop-up através de mouse-hover em relação aos ícones da barra de progresso e em relação aos ícones da barra de conteúdos relacionados. Dependendo do contexto, estes podem apresentar por exemplo, o nome de uma série televisiva e dados relativos a ela, como podem apresentar apenas os dados relativos a uma temporada ou episódio;

• Foram criadas as páginas para as definições: Personal e Privacy.

Existia a possibilidade de realizar os testes de usabilidade com os utilizadores através destas wireframes. No entanto existiu a vontade de apresentar aos utilizadores uma interface de mais alta-fidelidade possível aproximando-se do que se acreditava ser a aparência e funcionalidade de uma interface final. Para além desse facto, Moule (2012), indica que segundo a sua experiência em sessões de teste com utilizadores, uma interface o mais aprimorada possível, cria um maior e melhor impacto nos participantes.

A termo de comparação, são apresentadas nas Figuras 6.8 e 6.9 as imagens sob formato de

Figura 6.8: Wireframe da página de Dashboard.

Figura 6.9: Wireframe de uma página de detalhe de uma série de televisão.