DEPARTAMENTO DE CIÊNCIA DA COMPUTAÇÃO - DCCINSTITUDO DE MATEMÁTICA E ESTATÍSTICA – IME

UNIVERSIDADE DE SÃO PAULO – USP

Anderson Carlos Moreira TavaresGilmar Rocha de Oliveira Dias

Reinaldo Pereira de Moraes

Protótipo Final de Baixa FidelidadeUNI - Rede Social de Grupos de Estudo – Fase 3

Trabalho apresentado como avaliação parcial para obtenção de créditos da disciplina MAC – 5786 – Princípios de Interação Humano Computador

Professor: Dr. Carlos Hitoshi Morimoto

São Paulo, 19 de maio de 2012

Sumário1Introdução...........................................................................................................................................32Tela Principal......................................................................................................................................4

2.1Painel de Grupos.........................................................................................................................52.2Criar um novo grupo...................................................................................................................62.3Sugestão de Grupos....................................................................................................................72.4Calendário...................................................................................................................................82.5Amigos/Participantes..................................................................................................................92.6Batepapo Individual e em Grupo..............................................................................................10

3Enviar mensagem Individual e em Grupo........................................................................................114Recados.............................................................................................................................................125Busca Geral......................................................................................................................................136Perfil.................................................................................................................................................147Atividades.........................................................................................................................................158Discussões........................................................................................................................................169Projetos.............................................................................................................................................17

9.1Criar Novo Projeto....................................................................................................................1810Arquivos.........................................................................................................................................19

10.1Enviar Arquivo........................................................................................................................2011Conclusão.......................................................................................................................................21

11.1Metodologia............................................................................................................................2111.2Escolha do layout....................................................................................................................2111.3Aprendizado............................................................................................................................21

1 IntroduçãoUNI é a rede social para grupos de estudo. Um dos elementos chave na rede é o grupo. Dessa

forma, toda a interface foi feita visando o fácil acesso aos grupos e suas atividades diárias. Um dos princípios de usabilidade que influenciou o design do protótipo final é a consistência. Muitos controles foram padronizados visando os conceitos “fácil de usar” e “fácil de lembrar”.

Outro princípio importante é a visibilidade. Boa parte das funcionalidades está em apenas uma tela, disponíveis para o usuário. Quase nenhuma das seções (visualmente falando) é alterada durante o trabalho do usuário, nem a coluna central do conteúdo. Todo o conteúdo é atualizado na tela, nas seções mostradas.

O design do protótipo teve influência nas redes sociais Facebook e Google Plus, além do sistema operacional Ubuntu.

Este documento visa explicar passo a passo o que compõe cada elemento do protótipo. Quando necessário, retângulos de cor vermelha destacarão os elementos explanados na sessão correspondente.

2 Tela Principal

A tela principal é dividida em três áreas. As colunas esquerda e direta não se alteram na sua estrutura.

Na coluna esquerda, o usuário tem acesso aos grupos que ele participa, e além de sugestões de grupos relacionados aos que ele está associado, e ele pode criar novos grupos, caso haja necessidade. No topo é exibida a foto e o nome do usuário. Ao clicar nela, será exibido na área central seu perfil para ser modificado conforme a necessidade.

Na coluna direita, o usuário tem acesso ao calendário de atividades (vide seção 2.4), além do acesso aos contatos, seja amigos ou participantes dos grupos. No final da coluna, há uma área de recados que os contatos deixaram para ele.

Na área central, o usuário pode fazer a pesquisa de novos contatos e novos grupos para associação (vide seção ), além de acessar uma lista de atividades (vide seção 7), discussões (vide seção 8), projetos (vide seção 9) e arquivos (vide seção 10).

2.1 Painel de Grupos

Inspirado no painel do Ubuntu e do Google Plus, o painel de grupos permite interagir com os grupos existentes, além de poder criar um novo grupo clicando no sinal +.

Quando o usuário clica em um grupo desejado, todas as informações exibidas tanto na área central como na coluna direita são filtradas em relação ao grupo selecionado. O usuário pode avaliar um grupo clicando no ícone da estrela, pode iniciar um bate-papo coletivo com os membros do grupo clicando no ícone do balão e pode enviar e-mail para todos os membros do grupo clicando no ícone do envelope.

2.2 Criar um novo grupo

Clicando no sinal + no painel esquerdo, o usuário pode criar um novo grupo através do popup exibido. O usuário pode cancelar a operação, caso ele queira, ou confirmar clicando no botão enviar. Automaticamente, o novo grupo é exibido no painel esquerdo, e o layout é mantido para o usuário criar novas informações referentes ao novo grupo (atividades, discussões, projetos, arquivos, participantes e eventos).

2.3 Sugestão de Grupos

O painel de sugestão de grupos recomenda grupos com características semelhantes aos grupos que o usuário participa. O usuário pode acessar o grupo sugerido, vendo informações públicas do grupo e se associar a ele.

2.4 Calendário

O calendário exibe mensalmente as atividades (eventos, prazos de projetos, reuniões). O usuário tem acesso à descrição de cada atividade ao passar o mouse na data referida. Ele pode clicar em uma das atividades no popup para ver seus detalhes na área central, filtrando seu conteúdo.

O usuário pode alterar o mês ou ano para visualização de outras atividades.

2.5 Amigos/Participantes

O usuário pode ver todos os contatos dele, estejam associados a algum grupo ou não. Ao clicar na imagem de um contato, seu perfil será exibido.

O usuário pode avaliar um contato clicando no ícone da estrela, pode iniciar um bate-papo individual com o contato clicando no ícone do balão e pode enviar e-mail para ele clicando no ícone do envelope. Além disso, o usuário pode enviar um recado para o contato clicando no ícone do bilhete.

A figura acima ilustra um exemplo de votação de um contato. O usuário clica no ícone da estrela e as cinco estrelas são exibidas para o usuário escolher o grau de importância do contato. O mesmo acontece com a votação dos grupos.

Se houver muitos contatos, o usuário pode buscá-lo consultando pelo nome ou escolhendo a exibição de apenas contatos online.

2.6 Bate-papo Individual e em Grupo

Ao clicar no ícone do balão, a área de chat é exibida. A figura acima mostra duas janelas de chat: a janela do bate-papo do grupo e do bate-papo individual.

No bate-papo do grupo, a lista de membros online do grupo é mostrada. Além disso, o usuário pode digitar sua mensagem e enviá-la através do botão enviar, além de poder anexar imagens e outros arquivos clicando nos ícones da máquina fotográfica e do clip. A mesma interação ocorre no bate-papo individual.

3 Enviar mensagem Individual e em Grupo

Ao clicar no ícone do envelope, a tela de enviar mensagem de e-mail é exibida. O usuário pode mandar mensagens tanto para o grupo como para um contato (sinalizado na barra de título). Assim como o bate-papo, o usuário pode digitar um texto, enviar uma imagem e/ou um arquivo. Para concluir, o usuário clica no botão enviar.

4 Recados

Ao clicar no ícone do bilhete, a janela de enviar recado é mostrada. O usuário conclui a operação ao clicar no botão enviar.

5 Busca Geral

O usuário digita no campo de busca e o sistema gera uma lista de resultados conforme o texto digitado naquele momento. A lista contém uma breve descrição de usuários e de grupos. O usuário pode adicionar um contato para sua lista (através do ícone +) ou enviar um recado (através do ícone do bilhete). Em relação aos grupos, ele pode ser inscrito ao grupo (através do ícone +) ou criar uma associação do grupo selecionado com algum grupo liderado/moderado por ele (através do ícone do elo/corrente).

Se o usuário clicar na imagem representativa do contato ou grupo, seu perfil é exibido na tela.

6 Perfil

Quando o usuário clica na sua imagem na coluna esquerda, seu perfil é exibido como na figura acima. Suas informações, como dados pessoais, formação e interesses são exibidas num formato de formulário para sua atualização. Uma importante observação é o fato do usuário poder indicar seu perfil como público ou privado.

7 Atividades

A coluna central mostra uma lista de atividades, mostrando sua data, quem a criou e o título, além da opção de excluí-lo, através do ícone X no lado direito.

Quando o usuário clica na atividade, seus detalhes são exibidos, como sua descrição, o local e quaisquer outras informações cadastradas (um mapa é exibido mostrando o local da atividade).

As atividades são ordenadas pela data. Se houver muitas atividades, o usuário pode buscá-la utilizando o filtro indicado pelo ícone do funil, aparecendo um campo de texto para a filtragem. O usuário pode adicionar uma atividade clicando no ícone +, adicionando uma nova linha na lista e com os detalhes vazios para o usuário editá-los.

8 Discussões

A coluna central mostra uma lista de discussões, mostrando sua data, quem a criou e o título, além da opção de excluí-lo, através do ícone X no lado direito.

Quando o usuário clica na discussão, seus detalhes são exibidos, como sua descrição, e comentários de outras pessoas.

As discussões são ordenadas por data. Se houver muitas discussões, o usuário pode buscá-la utilizando o filtro indicado pelo ícone do funil, aparecendo um campo de texto para a filtragem. O usuário pode adicionar uma nova discussão clicando no ícone +. Além disso, o usuário pode comentar uma discussão existente clicando no botão Responder.

9 Projetos

A coluna central mostra uma lista de projetos, mostrando sua data, quem a criou e o título, além da opção de excluí-lo, através do ícone X no lado direito, e a opção de torná-la pública (para pessoas não inscritas no grupo), privada (apenas os membros do grupo poderão acessá-la) ou personalizado (escolhendo individualmente os contatos com permissão para acessá-lo).

Quando o usuário clica no projeto, seus detalhes são exibidos, como sua descrição, nome, duração e suas tarefas.

Os projetos são ordenados por data. Se houver muitos projetos na lista, o usuário pode buscá-lo utilizando o filtro indicado pelo ícone do funil, aparecendo um campo de texto para a filtragem. O usuário pode adicionar um novo projeto clicando no ícone +.

As tarefas podem ser adicionadas (pelo botão “Inserir atividade”), excluídas (através do ícone X da atividade), ou editadas clicando na atividade. As durações das atividades serão exibidas como um gráfico de Gantt.

9.1 Criar Novo Projeto

Ao clicar no ícone do + na lista de projetos, a tela de criar novo projeto é exibida. O usuário informa os dados referentes ao projeto e indica se ele deve ser público, privado ou personalizado.

Ele encerra as atividades clicando no botão de enviar.

10 Arquivos

A coluna central mostra uma lista de arquivos, mostrando sua data, quem a criou, o tipo de arquivo e o título, além da opção de excluí-lo, através do ícone X no lado direito, e a opção de torná-lo público (para pessoas não inscritas no grupo), privado (apenas os membros do grupo poderão acessá-lo) ou personalizado (escolhendo individualmente os contatos com permissão para acessá-lo).

Quando o usuário clica no arquivo, o usuário faz o download do arquivo para uso posterior. Se houver muitos arquivos na lista, o usuário pode buscá-lo utilizando o filtro indicado pelo ícone do funil, aparecendo um campo de texto para a filtragem. O usuário pode adicionar um novo arquivo clicando no ícone +.

10.1Enviar Arquivo

Ao clicar no ícone + na área de arquivos, a tela de enviar arquivo é mostrada. O usuário pode escolher o arquivo do seu computador, escrever seu nome e sua privacidade (público, privado ou personalizado).

Caso o usuário tenha selecionado uma atividade, discussão ou projeto, o arquivo automaticamente estará associado ao item selecionado. No exemplo, o novo arquivo será associado à discussão “Sentido da Vida”. O usuário pode concluir a operação clicando no botão Enviar.

11 Conclusão

11.1 Metodologia

Os integrantes do grupo criaram individualmente suas alternativas baseadas no conceito do produto e nos requisitos descritos no relatório das necessidades do usuário.

Sessões de brainstorming, usando metodologia ágil (liderança alternada para cada sessão), foram criadas e discutidas.

O material utilizado foi papel sulfite, tamanho A4, folhas de post-it, caneta esferográfica, fita adesiva e tesoura.

11.2 Escolha do layout

Nas sessões de brainstorming, foram discutidos os pontos relevantes de cada alternativa, como as vantagens e desvantagens do mesmo, itens faltando e elementos desnecessários.

Foram discutidos os modos de integração dos elementos importantes para a realização protótipo final e optou-se escolher como base o layout desenvolvido pelo Anderson, incluindo alguns elementos desenvolvidos nos protótipos dos outros membros.

Do protótipo de Gilmar, foi aproveitado o recurso de associação de grupos e popups de criação dos novos grupos, além da associação das atividades compartilhadas.

Do protótipo de Reinaldo, foi aproveitado o recurso de sugestão de grupos, além da tela de edição do perfil do usuário e os ícones de interação com o grupo e o usuário (favoritos, e-mail, recado e bate-papo). Também foi aproveitada o recurso de recados.

O protótipo de Anderson serviu de base para o protótipo final, principalmente a interação com as informações da área central. Além disso, manteve-se o calendário, a barra de grupos na coluna esquerda, a imagem de grupo ou usuário identificando o criados do elemento (tarefa, projeto, atividade ou arquivo). O bate-papo individual, em grupo e a opção de adicionar grupo foram obtidos com a combinação dos três protótipos.

11.3 Aprendizado

A atividade treinou a habilidade de perceber as relações entre as necessidades do usuário e como as funcionalidades podem ser disponibilizadas no layout. É possível transmitir ao usuário aspectos da interação com o sistema e receber dele o feedback para realizar os refinamentos do protótipo.

A atividade proporcionou uma abordagem diferente da tradicional experiência em desenvolver sistemas utilizando metodologias de engenharia de software. O sistema se torna muito mais aparente para o cliente e para os desenvolvedores.

O trabalho em equipe com várias alternativas provocou insights sobre novas possibilidades não vistas em apenas uma alternativa

O desejo de desenvolver se torna maior. Isso é importante, pois muitos projetos fracassam antes de serem lançados ao mercado.