Storyboard “medium-fi” # projeto 1

Após a realização de alguns testes de utilizadores reformulamos o nosso storyboard medium-fi, de modo a fornecer uma resposta mais eficaz às necessidades dos utilizadores.

Deste modo, na página inicial, optámos por um background que contivesse o planeta Terra de modo a despertar no utilizador uma sensação de familiaridade (“Earth is our land”) bem como o sentimento de pertença de cada ser humano. Tal como já foi explicado anteriormente no storyboard lo-fi, o menu da aplicação é constituído por várias imagens, sendo que cada uma tem uma barra colorida do lado direito, que representa a sua categoria (verde = informação; laranja = fotografias; amarelo = vídeos); as cores estão sujeitas a alterações pois pretendemos que este detalhe vá também ao encontro do conceito de planeta Terra, de pertença, refinando assim o visceral design. As setas que se encontram lateralmente pretendem transmitir ao utilizador a ideia de que ainda há mais conteúdos para visualizar, levando o a fazer Swype. O título, a descrição e as imagens do menu são meramente ilustrativos, servindo apenas para que os utilizadores tivessem noção do local ondeos iriam encontrar e para que pudéssemos decidir o tamanho que estes elementos deveriam ocupar.

Protótipo com barras coloridas (ipad na posição horizontal)

Protótipo com barras coloridas (ipad na posição horizontal)

Protótipo com barras coloridas (ipad na posição vertical)

Protótipo com barras coloridas (ipad na posição vertical)

Após a realização de novos testes com utilizadores, apercebemo-nos de que a forma como elaborámos o menu dava aos utilizadores uma affordance errada pois estes pensavam que as imagens se tratavam apenas de imagens. Quando questionados, os utilizadores afirmaram que a colocação de ícones representativos da categoria de cada imagem os ajudaria a distinguir, de forma mais eficaz, as diferentes categorias presentes no menu. Deste modo, procedemos à elaboração de ícones e, nos testes seguintes, os utilizadores revelaram que, de facto, a aplicação funcionava melhor com a presença destes elementos. Importa ainda referir que estes são provisórios e que, no protótipo final estarão presentes uns elaborados por nós.

Protótipo com barras coloridas e ícones (ipad posição horizontal)

Protótipo com barras coloridas e ícones (ipad posição horizontal)

menu-vertical+ipad-icones

Protótipo com barras coloridas e ícones (ipad posição vertical)

Os utilizadores sugeriram também que fosse dado destaque, à vez, de cada elemento do menu, através do movimento Swype; quando um elemento estivesse em destaque, os outros deveriam estar colocados de forma hierarquicamente inferior, dando uma noção de perspetiva e profundidade, muito comum no universo das aplicações para iPad. Todos os utilizadores testados posteriormente concordaram que esta alteração tornou o menu mais interativo, dinâmico e apelativo. Além disso, o nosso grupo de trabalho ficou mais satisfeito com esta solução, considerando que o carácter exploratório do projeto se encontrava bem representado graficamente.

Protótipo com menu em perspetiva e com imagem em destaque (ipad na posição horizontal)

Protótipo com menu em perspetiva e com imagem em destaque (ipad na posição horizontal)

medium fi hierarquia

No que diz respeito à página de resultados, esta encontra-se dividida em dois espaços: fotografia ou imagem e texto. A fotografia escolhida é meramente ilustrativa, servindo apenas para atentarmos à escolha da cor dos “+” e para dar representatividade ao espaço. Ao fazer Tap, o utilizador pode ter acesso a informação mais específica, algo a ser explorado por usuários mais curiosos e interessados. No local reservado ao texto, é possível encontrar informações base relativas a cada objeto.

A forma de regressar ao menu foi uma das questões mais abordadas nos testes com utilizadores, porá sua função ser pouco percetível. Concluímos que a seta colocada no lado esquerdo dá uma affordance errada sobre a forma de navegação na aplicação; os utilizadores ficavam confusos com o gesto que deveriam utilizar e tinham dúvidas sobre para onde é que a seta as levaria. Por isso, seguimos a sugestão de alguns utilizadores e esta seta passou a ser curva, forma esta que indica “retroceder”. O gesto indicado para a sua utilização é o Tap e não o Swype como tínhamos pensado anteriormente. O local da seta está ainda em discussão.

Página de Informação que contém uma seta de retorno com affordance correta (versão horizontal)

Página de Informação que contém uma seta de retorno com affordance correta (ipad na posição horizontal)

Página de Informação que contém uma seta de retorno com affordance correta (ipad na posição vertical)

Página de Informação que contém uma seta de retorno com affordance correta (ipad na posição vertical)

No que diz respeito à página gerada assim que se clica num item do menu que corresponda a um fotografia ou vídeo, foi então posta em prática a sugestão dada pelos utilizadores; é assim aberta uma nova página que contém a fotografia ou vídeo em tamanho maior. Esta é acompanhada por uma grelha com fotografias ou vídeos para que o utilizador possa ver, se desejar. Esta página contém ainda, uma seta que indica retorno para que o utilizador possa facilmente voltar ao menu inicial.

O tipo de letra é provisório e o seu tamanho é de 48pt; a  sua cor é #efeded. Na posição horizontal, as dimensões da fotografia principal são de 770x530px e as dimensões de cada fotografia da grelha são de 110x110px. O espaço entre os elementos da grelha é de cerca de 6px. A dimensão da seta de retorno é ainda discutível.

Na posição vertical, as dimensões da fotografia principal são de 380x260px e as dimensões de cada fotografia da grelha são de 110x110px . O espaço entre os elementos da grelha é  também de cerca de 8px.

As dimensões dos itens da galeria de videos, em ambas as posições, são iguais às da galeria de fotografias, respetivamente; a seta de retorno é igualmente discutível.

Galeria de fotos (ipad na posição horizontal)

Galeria de fotografias (ipad na posição horizontal)

Galeria de fotos (ipad na posição vertical)

Galeria de fotografias (ipad na posição vertical)

Galeria de vídeos (ipad na posição horizontal)

Galeria de vídeos (ipad na posição horizontal)

Galeria de vídeos (ipad na posição vertical)

Galeria de vídeos (ipad na posição vertical)

Como foi possível perceber ao longo do desenvolvimento do projeto, os testes com utilizadores foram determinantes para a evolução dos vários storyboards, pelo que mais uma vez comprovamos que esta é uma etapa fundamental no ciclo de desenvolvimento do produto.

Por: Ana Castro, Luisa Gomes & Sara Macedo

Anúncios

About luisasilvagomes

"Nothingness, non-existence, black emptiness."

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s

%d bloggers like this: