Protótipos de Baixa e Média Fidelidade

Nesta etapa do nosso projeto, o time Now Loading começa a prototipar a interface ideal para o nosso usuário. Com a intenção de criar uma aplicação inovadora, porém sem causar confusão no usuário, decidimos nos basear em interfaces de serviços de streaming já existentes, como Youtube, Spotfy, Netflix e TED. Tendo como base em nossas pesquisas e conhecimento gerado em sala de aula nós desenvolvemos dois protótipos de baixa fidelidade, que podem ser acessados nos links abaixo:

• Protótipo de Baixa Fidelidade 1: https://marvelapp.com/16ah40e6
• Protótipo de Baixa Fidelidade 2: https://marvelapp.com/529b57

Assim como é a intenção de protótipos de baixa fidelidade, nós testamos com várias pessoas para detectarmos erros no layout. Terminados os testes, anotados os erros e confusões geradas pelos mesmos. nós passamos para o desenvolvimento dos Protótipos de Média Fidelidade.

Sempre em escala de cinza, partindo do branco até o preto, protótipos de média fidelidade possuem a intenção de testar o grid e a importância de cada elemento da interface. Com esse intuito, nós desenvolvemos dois protótipos de média fidelidade:

• Protótipo de Média Fidelidade 1:

Este foi o protótipo escolhido para ser trabalhado e desenvolvido como a solução de interface da aplicação, e pode ser visualizado através dos seguintes links:

• Sem grid:https://goo.gl/YRojo5
• Com grid: https://goo.gl/qL2jZV

• Protótipo de Média Fidelidade 2:

O protótipo completo pode ser visualizado através dos seguintes links:

• Sem grid:https://goo.gl/g1GSns
• Com grid: https://goo.gl/ZFcXK2

Sobre o Protótipo Média Fidelidade 1

Arquitetura da Informação



A estrutura de organização/navegação escolhida foi o hierárquico, pois é a que mais se adequa a ideia da solução. Dessa forma, o diagrama também segue essa estrutura, sendo assim, cada uma das páginas da barra de navegação, representadas pelos retângulos brancos da primeira linha do diagrama, se conectam entre si, pois a aplicação começa na tela "inicial", mas o usuário poderá transitar entre as telas de "produtores", "navegar", "sobre", ou ainda efetuar o login/cadastro, e dessa forma também poderá ver as opções referentes ao seu perfil, como as telas de "favoritos", "watchlist", "configurações de conta" e "vídeos enviados". Essa última tela ainda possui uma outra tela para enviar os vídeos do usuário. Na tela de "produtores", é possível ainda ter acesso a uma tela de "portfólio", com os portfólios de cada aluno do curso que optou por ter uma página pessoal. Já na tela de "navegar", o usuário pode ter acesso a tela de "tag escolhida", "gênero escolhido", e de qualquer uma dessas três telas citadas, é possível ir para a tela de "descrição do vídeo". A tela "inicial" conta ainda com duas opções, as telas de "recomendados" e "lançamentos". Este modelo conta com esquemas de organização ambíguos, presentes, por exemplo: na página inicial (por metáfora na seção "em cartaz" e por assunto nas demais seções); na página "navegar" e em todo o sistema (as ferramentas de busca são divididas por tarefa e os vídeos são divididos por assunto) e ainda nas listagens de vídeos no perfil, que encontramos um esquema híbrido (watchlist, favoritos, vídeos enviados). Contudo, o esquema exato também existe de forma bastante sólida, como pode ser visto nas telas de listagem dos produtores (ordem alfabética), nas notificações (ordem cronológica) e na ordenação de algumas listas do perfil. O sistema de navegação pode ser considerado persistente, pois a barra de navegação global na lateral e também no topo com o link ao perfil sempre estão presentes e pouco muda no contexto, que contém mais interações com o conteúdo do que formas de navegação propriamente ditas. Isso pode ser visto como uma boa escolha para a facilitação de comunicação entre usuário e interface. Além disso, no topo também há a ferramenta de busca, que se configura como navegação suplementar. Este último sistema também pode ser encontrado na tela de "navegar", na qual há uma nuvem de tags e, ainda, a roleta de vídeos.

Layout e Grid

O layout deste protótipo foi feito no tamanho 1366x768px e apresenta o uso de técnicas como proximidade, previsibilidade e escala, além de trabalhar com a simplicidade quanto à informação visual e à navegação. O grid escolhido possui 24 colunas e é bastante flexível, pois permite boas variações de tamanho, alinhamento e espaçamento entre os elementos, porém mantendo o padrão da interface.

Características do grid da alternativa 1

Colunas do grid da alternativa 1.

Controles e Affordances

• Os vídeos podem ser reproduzidos através do clique no botão de play, representado por um triângulo sobrepondo o vídeo antes de ser iniciado;
• As thumbnails dos vídeos exibidos em listas que estão na última fileira estão cortadas pela tela e indicam que a lista pode ser rolada para baixo a fim de visualizar mais conteúdo;
• Na página "Início", na seção "Em cartaz", as três bolinhas na horizontal indicam que há mais obras em cartaz para serem mostrados;
• Na página "Produtores" a seta apontando para baixo no menu alfabético indicam que a barra pode ser rolada para baixo a fim de exibir as letras que estão escondidas;

Metáforas de Interface

• Watchlist: trata-se de uma representação de uma lista escrita que guarda os vídeos para serem vistos posteriormente;
• Roleta: faz parte do sistema que recomenda vídeos de forma randômica, assim como uma roleta mostra resultados randômicos;
• Rolo de filme: exibe os vídeos recomendados pela roleta da mesma forma que filmes são exibidos quadro a quadro num rolo de filme;
• Carrossel: a combinação do rolo de filme com a roleta compõem o sistema do "carrossel", muito utilizado para exibição de imagens e sugere o movimento de um carrossel;
• Botões: semelhante com sua entidade física, os botões na interface são clicáveis e executam determinada ação;
• Aplausos: a avaliação por aplausos funciona como uma metáfora para quando o público aplaude a exibição de um vídeo.

Sobre o Protótipo Média Fidelidade 2

Arquitetura da Informação



A estrutura de organização/navegação escolhida para esse protótipo também foi o hierárquico. Contudo, a tela "inicial" nesse caso, dá acesso às telas de "perfil", "séries", "autores" (produtores), "busca" e "login". A partir da tela de filmes, é possível ir para a tela de "visão geral do filme". Nela, pode-se acessar as telas de "assistir filmes"ou "detalhes da obra". Já na tela de "séries", o usuário pode ir para a tela de "visão geral da série", e dela, ir ainda para a de "assistir série", "lista de episódio" que também pode ir para a de "assistir série", e uma de "detalhes da obra". Dessa última tela, pode-se ter acesso a tela de "descrição dos autores". Na tela de "autores", se tem acesso a uma tela de "descrição dos autores". A partir dela, é possível chegar numa tela de "visão geral da série". Quando o usuário clicar no botão de buscar, aciona uma tela com várias tags. Através dessa tela, o usuário tem acesso às telas "visão geral do filme", "visão geral da série" e "descrição dos autores". Por último, ainda é possível da tela de início ter acesso a tela de "login" e "cadastro".

Layout e Grid

O layout deste protótipo tem certas similaridades com relação à versão anterior. Também foi feito no tamanho 1366x768px e também apresenta técnicas como proximidade, previsibilidade e escala. A diferença mais visível seria o fato de que ele possui uma única área de  navegação, localizada na parte superior da tela, que dá acesso a todas as telas do sistema, gerando uma arquitetura da informação diferente, e os elementos geralmente são organizados em 2, 3, 4, e 5 colunas, sendo que boa parte da disposição dos mesmos também são colocados em listas horizontais. Além disso, o grid é formado por 12 colunas, sendo a metade da Alternativa 1 e foi construído como descrito nas figuras a seguir:

Características do grid da alternativa 2.

Colunas do grid da alternativa 2.

Controles e Affordances

• Nos reprodutores de vídeo, existem ícones que indicam que esses blocos podem ser clicados para dar início ao vídeo;
• Nas páginas de filmes, séries, autores, existem setas apontando para as laterais, indicando que existem itens para cada lado dos itens já apresentados na tela. Tais setas podem ser clicadas para que esses itens laterais sejam apresentados;
• As select boxes apresentam uma seta para baixo, demonstrando que tal campo de input é um menu drop-down e apresenta outros itens que podem ser selecionados;
• Na página de perfil de produtor, dentro da seção de produções, existe um card com um ícone de adicionar que indica que é possível adicionar uma nova produção;

Metáforas de Interface

• Rolo na tela de filmes, séries e autores: é uma metáfora a uma “roda” que deverá apresentar o comportamento da mesma;
• Botões: semelhante com sua entidade física, os botões na interface são clicáveis e executam determinada ação.

Perspectivas de Interação

A perspectiva de interação predominante em ambas propostas de protótipo é a perspectiva de mídia, devido ao cunho comunicacional da plataforma. Nas duas propostas, a aplicação servirá como uma mediadora entre os colaboradores e os usuários, propagando o conteúdo produzido dentro do curso de Cinema e Audiovisual da UFC para pessoas que antes nem sequer estavam cientes da existência de tal curso. A linguagem predominante da aplicação será a audiovisual, partindo do grupo de colaboradores, muito embora exista o suporte para a comunicação textual mútua, dando oportunidade para que os usuários comentem, façam perguntas e dêem feedback. Num segundo plano, também existe a possibilidade de comunicação usuário-designer. A aplicação em diversos momentos dará suporte na tomada de decisão dos usuários, apresentando vídeos de forma aleatória que estão dentro de uma determinada categoria desejada pelo usuário ou sugerindo filmes mais recentes, que serão controlados por parâmetros definidos pelos designers da aplicação. Portanto, pode-se concluir que, muito embora possa haver determinadas partes da aplicação que apresentem outras perspectiva de interação, a que se domina e se faz presente de forma consistente por todo serviço de stream é a perspectiva de mídia, já que o propósito de tal serviço é ser um mediador de comunicação.

Critérios de Qualidade Uso

Serão três os critérios usados para a medição de qualidade de uso na aplicação: Eficiência, Segurança e Satisfação. No primeiro critério, deseja-se que os colaboradores da aplicação consigam hospedar seus trabalhos e as respectivas informações na aplicação com o menor esforço possível, evitando longos formulários que podem atrapalhar a eficiência dessas tarefas. Tal critério de qualidade foi aplicado no formulário de cadastro, que requer apenas informações cruciais para tal tarefa, evitando que o usuário digite um extenso formulário com informações que não serão usadas.

Quanto aos critérios de segurança, é necessário um ambiente no qual o usuário possa explorar sem correr o risco de cometer erros graves. Para tal, o sistema deverá sempre informar ao usuário sobre seu estado atual com mensagens de feedback que irão evitar o uso de termos técnicos e jargões da tecnologia. Além disso, para evitar ambiguidade e deixar claro para os usuários quais são as possibilidades de ações que este pode tomar e quais as respectivas consequências, a aplicação irá fazer uso de uma iconografia já estabelecida dentro dos serviços de streaming de vídeo.

Por fim, é necessário que se crie uma aplicação que atenda as necessidades tanto dos colaboradores quanto dos demais usuários da plataforma, fornecendo um ambiente no qual os primeiros possam divulgar seus trabalhos de uma forma eficaz e que os usuários possam encontrar conteúdos que os agradem e agregue valor cultural. Para que a aplicação seja agradável aos nossos colaboradores, ela dará todo suporte para o gerenciamento e publicação dos conteúdos produzidos pelos mesmos, de maneira centralizada, evitando que eles necessitem do apoio de diversas ferramentas simultaneamente para atingir seus objetivos. Quanto aos usuários gerais, a aplicação agregará valor cultural através da apresentação de um conteúdo, antes inacessível, de uma forma objetiva para aqueles que desejarem assistir algum filme de forma mais imediata, ou de forma mais livre para aqueles que desejarem explorar todo o conteúdo produzido pelos alunos.