Pular navegação

Layout Conecta

Ajuda

Layout Conecta

Comecei a desenhar o layout para dar seguimento no Projeto.

Por enquanto somente a HOME, aceito sugestões :)

Estamos focando em 3 tarefas para apresentar a Banca, por isso será criado somente as telas dessas tarefas:

- Programa de TV em grupo
- Lembretes (Remedios)
- Selecionar Amigo (pra usar o dial do controle
)

A resolução de TV foi com base em uma  TV LCD com 32 polegadas, resolução de 1.366 x 768.

Segue a imagem em alta resolução

conecta-home-v2.jpg

Comentários

#1

Seguem 2 variações de como ficará a navegação do usuário:

- Utilizando o dial a primeira tela simula onde tiver parado (amigo em destaque).

- Se o usuario clica em "selecionar" no controle irá aparecer as opções daquele amigo (isto depende do estado dele - online, offline).

  • conecta-home-amigo-sel.jpg
  • conecta-home-opcoes-amigo.jpg

#2

- Programa de TV em grupo (acessar atraves do item CONVERSAR na Home)

Criei as telas dessa tarefa. Aguardo a opinião de vocês, mas mesmo se tiver alteracoes acredito que com essas telas dá para trabalharmos na animacao para testar o controle tbm....

  • 1.1-vertvamigos.jpg
  • 1.2-aguardando.jpg
  • 1.3-conversaroutv.jpg
  • 1.4-opcaotv.jpg
  • 1.5-tvemgrupo.jpg

#3

Acho que o layout tá bem legal Simone! Suave e elegante. Não vejo necessidade de evoluir muito mais do que isso em termos visuais.

Algumas observações sobre o layout:

  • Melhor usar o tamanho widescreen 16 x 9 que é a proporção usada nas televisões dos últimos anos
  • Os ícones poderiam seguir uma linguagem visual similar, como por exemplo, compartilhar cores ou estilo do traço. Vejam esse post do Usabilidoido.
  • A barra no topo me parece pequena demais pra ler à distância
  • Tomar cuidado ao usar cores saturadas demais, tipo o vermelho do X. TVs de plasma tendem a exagerar na cor
  • O X na cara das pessoas ausentes me parece meio ofensivo. Parece que a pessoa foi bloqueada. Tenta pensar um outro jeito de dizer a mesma coisa...

Agora sobre a interação. Eu já havia feito essa observação nos wireframes: não me parece claro como essa interface será manipulada pelo controle remoto que vocês criaram. Ela parece propociar muito melhor um mouse do que um controle como o que vocês estão bolando. Pra que funcione com o controle de vocês, terá que haver um vínculo muito forte entre as opções do controle e o que é mostrado na tela. Quanto mais graus de abstração vocês utilizarem, mais difícil vai ser perceber a relação. 

Exemplo: 

O mouse se move num plano horizontal, enquanto a tela do computador está num plano vertical. Entender que mover o mouse pra frente faz o cursor do mouse ir pra cima é bastante complicado pela primeira vez. Quem ensinou uma criança ou um idoso a usar um computador pela primeira vez sabe disso. A dificuldade é perceber o acoplamento entre ação e resultado. Na interação via teclado ou mouse, o acoplamento é fraco, enquanto num touchscreen, o acoplamento é forte. 

acoplamento_interacao.png

Um exemplo no próprio Conecta: o uso de ícones iguais aos botões no assistente de configuração cria um acoplamento mais forte entre ação e resultado do que se você usar a palavra "Próximo passo" enquanto o botão diz "Confirmar". Uma interface circular para um controle circular (dial) também fica mais forte do que uma interface horizontal com controle circular.

A gente já discutiu esses pontos, mas acredito que vocês só vão perceber isso quando fizerem o protótipo e confrontarem-se com essas contradições na hora em que forem tentar usar. O protótipo cria um acoplamento mais forte entre o design e o uso, ajudando a superar essa dificuldade de abstração de imaginar a interação, que no fundo, no fundo, é a mesma tanto para o usuário quanto para o designer. A diferença é que vocês tem o poder de mudar isso.

#4

Minha sugestão para o excluir seria a propria lixeira, o que para um idoso fará mais sentido que um 'X'.

Quanto ao passo-a-passo sugiro utilizar o botão: Cancelar (voltar) e o Confirmar (avançar).

Quanto a interação Controle vs. Interface concordo que seria melhor se a mesma fosse circular Fred, porém para modificarmos isso agora teriamos que repensar todas as interfaces e também o controle. Pois logo de primeira já entraria mais um botão no controle que é para trocar de círculos (exemplo: Sair de Amigos e ir para Funcionalidades).

Vamos começar a fazer alguns testes no formato atual, caso a experiência não agradar vamos modificar para o formato circular.

#5

O problema é que vocês demoraram pra começar a pensar no controle e se concentraram muito no wireframe. Aí agora estão presos nas suas definições, o que eu acho uma pena, pois não há nada de inovador nos wireframes. Basicamente, é a transposição de vários padrões de interação web para a televisão, o que eu acho inclusive que vai trazer mais problemas do que soluções porque a pessoa vai querer interagir como interage na web e não vai poder. Vocês deveriam é trazer mais padrões de interação já estabelecidos nas próprias interfaces de TV (como por exemplo, os 4 botões coloridos que a gente viu lá atrás). Esse deveria ser o ponto fixo do projeto, se era pra ter um. 

Operar a interface acima com o controle circular não vai dar certo por causa do fenômeno de desaceleração do movimento. Aquele movimento suave que as interfaces circulares do iPod e iPhone continuam a fazer depois do giro ou slide é importantíssima pra compensar a falta de precisão causada pela desaceleração. Quando a gente pára o nosso dedo, a gente não pára exatamente. Existe uma desaceleração e o movimento de suavização faz o acoplamento forte com a interface. 

Pra controlar essa interface, teria que ser com teclas direcionais, porém existe um grande risco do usuário ficar perdido na interface de vocês porque vocês estão separando em várias áreas. Vejam:

conecta_navegacao.png

A navegação por teclas direcionais é um dos principais motivos pelos quais as pessoas não usam a Internet no televisor, apesar de ter esse recurso. É muito lento ficar passando de opção em opção e de ter que lidar com esses saltos inesperados de seção. Esse tipo de navegação só funciona no caso de menus com poucas opções, como os de configuração da televisão, que aliás, nunca mostram mais de duas seções por modo de interação. Se fosse pra seguir esse padrão de interação da televisão, a lista de amigos e a lista de funcionalidade teriam que ser modos ou telas diferentes. 

Eu tou fazendo essa crítica não pq eu ache que a interface circular é melhor do que o grid, mas pq acho que vocês não estão pensando na interação o suficiente, como já havia mencionado anteriormente. O propósito destes documentos seria justamente ajudar vocês a pensar essa interação, descartar as idéias que não funcionam e repensar. Porém, vocês estão pensando esses documentos como entregáveis, o que não se aplica. Vocês definitivamente não precisam entregar wireframe algum nesse projeto. O que vocês precisam entregar é inovação. Esse é o requisito dos nossos TCCs.

O Conecta já apresenta várias inovações em termos de conceito e funcionalidades, porém, ainda não me convence do ponto de vista da interação. Como disse, acredito que vocês vão chegar lá quando fizerem o protótipo, mas se vocês forem com a mente muito fechada, pode não acontecer.

#6

Em anexo criei um PDF navegavel onde segue a sugestão de como funcionaria a interface (basta clicar em Minhas Funcionalidades ou Meus Amigos).

Em anexo também encontra-se a sugestão do controle com o novo botão para "Trocar" para outra seleção.

OBS: Retirei a opção Sair e inclui um recurso para saber como é que a pessoa esta se sentindo hoje, conforme o humor da pessoa o tom da interface pode ficar mais claro ou escuro.

O que acham das propostas?

Aguardo sugestões para novos andamentos.

Pré-visualizarAnexoTamanho
conecta-tv_home.pdf105.35 KB
  • controle.png

#7

Bom detalhe de dar "zoom" na opcao selecionada, assim fica com mais destaque.
Poderiamos simular mais algumas telas que vamos utilizar como tarefas para a Banca..  assim temos uma visao geral, mas gostei dessa opcao tbm pq se adequa bem à idéia do controle!!!
 
Como o Conecta irá captar a sensacao de humor?
 

#8

O humor seria setado pela propria pessoa. Via selecionar/falar smiley ou sad .

Vou fazer um experimento da interface circular para as atividades de ver TV em Grupo e Adicionar Lembrete.

Quanto ao controle, vou incluí-lo no post do controle para discutirmos ele por lá.

#9

Porque o Conecta pergunta o humor da pessoa? Como iremos usar esses dados? Achei extremamente interessante essa possibilidade de criar o vínculo emocional, mas se o sistema não reagir apropriadamente, pode ficar meio sem sentido. 

Não estou curtindo esse botão Trocar. Ele acaba sendo um botão que não terá função na maior parte das telas. Acredito que talvez seja possível usar o botão Cancelar/Voltar para trocar de modo (amigo ou funcionalidades). Eu diria que tem um terceiro modo aí que é o de configurações. 

Uma idéia que pode ser mais explorada, é a idéia de círculos concêntricos. Na medida em que você seleciona um objeto, abre um novo círculo com as opções desse objeto. Fiz uma modificação rápida do seu protótipo Daron, mais pra instigar a criatividade de vocês porque não é necessariamente funcional.

O sistema começaria com o usuário no foco e as opções do que ele pode fazer sozinho: lembretes, bíblia, remédios, etc. Quando seleciona um amigo, aí mostra as opções do que pode fazer junto com o amigo. Fazendo isso surgiu a idéia de poder enviar uma passagem da bíblia para um contato, enviar um lembrete e até mesmo mandar a previsão do tempo. Vejam aí se vale à pena continuar essa idéia ou deixar de lado. 

É só uma das opções para tornar essa interface mais consistente. 

  • conecta-tv_circular2.png

#10

E agora olhando pra interface circular, noto que tem alguns pontos em comum com os círculos sociais do Google+. Anexo uma imagem da patente que eles registraram antes de lançar o produto, sobre essa funcionalidade de organizar os amigos em círculos.

Na época do lançamento, eu escrevi uma crítica ao Google+ dizendo que ele de fato ajudava a organizar os amigos, mas não mostrava grandes possibilidades de coisas pra fazer com esses amigos, daí não fazia sentido ficar organizando-os em milhares de círculos. O grande problema é que o círculo não era compartilhável (não sei se é ainda assim). No post tem também o conceito alternativo de ciclos, que não saberia dizer como aplicar no projeto de vocês, mas talvez vcs tenham algum insight!

  • google-plus-circles.jpg

#11

Quanto ao Humor foi apenas uma tentativa para ver se era interessante, mas é uma funcionalidade a mais que poderá ser colocada como implementações futuras e não para agora.

#Controle, coloquei minha sugestão lá nas infos do controle.

Quanto a colocar as opções de lembretes, biblia, tempo e permitir enviar para a pessoa selecionada é interessante,  mas será que não vamos complicar mais o uso do Conecta?

# Interface Home

E se existisse somente 1 circulo na interface home do Conecta?

Neste círculo os "Meus Amigos" seriam também uma funcionalidade ("funcionalidades" é um termo que será revisto).

Desta forma posso entrar em "Meus Amigos", sair utilizando o "Cancelar / Voltar", posso entrrar em "Ver TV em Grupo", sair utilizando o "Cancelar / Voltar", entrar novamente em "Meus Amigos" e assim por diante...

O que acham?

#12

É, acho que é por aí. Um círculo só via funcionar melhor. Mas acho que vocês devem pensar em ter sub-opções no círculo, abrindo outros círculos. 

Um exemplo chapadão:

Ou esse:

#13

Fred,

Estou tentando adicionar um anexo mas nao consigo.. aparece esse erro..

Ocorreu um erro HTTP 0.
/anovainteracao/commment-upload/js
  • home-amigoonline.jpg

#14

Ué Simone, a imagem anexa tá aparecendo. Eu testei aqui no Opera e Firefox e consegui anexar sem problemas.

Eu acredito que essa mensagem de erro possa ser ignorada se aparecer de novo.

  • 1e3.gif

#20

opaaa eu estava no Chrome, la nao aparecia...

#15

Estamos analisando essa opcao dos circulos agora... para facilitar simulei os wires com o usuario do conecta selecionado, depois um amigo online e um amigo offline....

Ficaram algumas duvidas...
 
- O usuario terá sua fotinha para chegar nas suas opcoes? senao terá que cancelar no controle para voltar ao 1º estado (que nao acho mto intuitivo)
- Como faremos com o circulo caso a quantidade de amigo cresca consideravelmente?
- Como o usuario chegara no seu humor, configuracaoes e sair? sendo que continuaremos dentro do circulo?
 
Achei essa opcao do circulos muitoooo boa, o wire esta ficando bem legal... mas sera que nao estamos complicando ao inves de facilitar?? nao podemos esquecer do publico alvo..... nao adianta pensarmos em algo tao diferente mas complicado de usar...
  • Uma opção para as "configurações e sair" seria adicionar tudo no circulo... assim some a barrinha do topo
  • Outra questão são s tarefas que o usuário precisa ir para o PROXIMO PASSO... como ele vai chegar a esse botao??? tem outras telas dessa forma tbm... dos lembretes e enviar video mensagem...
  • A opcao "enviar video mensagem" que coloquei qdo o EU esta selecionado sairia tbm... seria mais facil ele ir em um amigo offline e escolher essa opcao...
  • home-eu.jpg
  • home-amigoonline.jpg
  • home-amigooffline.jpg

#17

Bacana a sugestão Simo, para isso temos 3 caminhos:
 
1
. Podemos pensar que toda a interface será um único círculo e partiria do principio que TUDO parte dos meus amigos - leia-se Pessoas (onde o EU é considerado um amigo, como na sugestão da Simone).
. Acho que pode ser utilizado desta forma, mas será que ficará fácil para ele encontrar ELE mesmo?
 
 
2
. Podemos pensar que toda a interface será um único círculo onde tería os "Meus Amigos" como "Funcionalidade" em um círculo de opções.
. Caso ele optasse por entrar em "Meus Amigos" e la dentro resolvesse "Ver a Previsão do Tempo" ele teria que Cancelar  Voltar por meio do controle [passo 1 - com cancela/voltar], Selecionar o item: Previsao do Tempo [passo 2 - com dial], Confirmar que ele quer ir para a previsão do tempo com a tecla Confirmar/Avançar [passo 3].
Será que isso não vai ficar dificil para ensinarmos e eles utilizarmos?
 
 
3
. Podemos pensar na interface na linha do protótipo que inclui esta semana, onde tinhamos 2 círculos e a barra de opções no menu, mas no Controle teríamos mais um botão "Trocar", para alternar entre as opções do sistema (Meus Amigos, Funcionalidades e Cabeçalho-barra).
Desta forma teríamos que pensar em controles com mais teclas disponíveis e ver se é possível bloquearmos estas teclas quando formos utilizar o Flex para desenvolvimento.
E outra, será que isso ficaria prático? 

#17

Acho que dá para levar em consideração essa tela do "Conversar" para essas decisoes, pq precisamos pensar nas outras interacoes tbm...

 
Na tela conversar ele escolhe quantas pessoas deseja, e precisa ir para o proximo passo...  la ele precisao escolher se desejar somente "Conversa" OU "Ver TV com meus Amigos", se for tv precisa selecionar o programa e confirmar (aguardando amigos aceitarem...)
  • conversar-circulo.jpg

#18

Neste exemplo da Simone vejo que o botão "Proximo Passo" deveria ser um item que estava no circulo, como no exemplo anexo.

#19

Finalmente vocês estão lidando com as incongruências de interação que eu estava preocupado. Devido à natureza fluida dessa interface, vocês precisam prototipar ela numa ferramenta que permita movimento.

O Flash seria uma boa, mas caso vocês não tenham proficiência na ferramenta pra esse tipo de coisa, dá pra fazer com papelão. Imaginei aqui dois círculos de papelão concêntricos, um para as funcionalidades, outro para os amigos. Primeiro gira o círculo de funcionalidades, depois que a funcionalidade é selecionada, seleciona os amigos pra participar dela. Quando clica no segundo círculo, o ícone do segundo vai para o primeiro.

Complicado? Claro!!! Por isso a importância de prototipar. Só depois que vcs fizeram a caixa de papelão na sonda cultural é que a gente começou a considerar a possibilidade de colocar funções direto no set-top-box, tipo botões e alarmes. O mesmo aconteceu com o controle. A gente não tava considerando ele tão bem antes do Daron brincar com massinha. Agora precisamos de algo assim pra interface!

Dêem uma olhada no conceito de Animatic. Talvez seja uma!

#21

Criado um protótipo para entendimento do Caminho 2 sugerido no comentário #17 deste post.

No protótipo tem os links que podem ser clicados.

O que acham?

Pré-visualizarAnexoTamanho
conecta_daron.pdf555.7 KB

#22

Muito bacana Daron! Evoluiu bastante! Gostei do uso de palavras curtas e ícones bem simples. As instruções de como usar também estão ótimas. Eu só fico preocupado em usar a cor verde para o botão confirmar sem nenhum ícone. Se a pessoa for daltônica ou tiver catarata vai dar confusão. Eu gostei daquele ícone da mão pra cima que vocês estavam usando antes. Ou poderia ser outra coisa. 

Faz sentido começar pelas funcionalidades para quem chega no produto com um objetivo definido, mas pode não ser tão interessante para quem deseja abrir o Conecta por curiosidade, por exemplo, pra ver quem está online e, a partir disso, decidir o que fazer. Não sei até que ponto esse cenário é realista. 

O que eu não gostei é o lance de pedir confirmação o tempo todo, inclusive quando vai voltar. Acho que é meio contraditório confirmar a volta...

Seria legal se vocês fizessem um protótipo com outro modelo de navegação pra comparar. Daria pra utilizar esse mesmo arquivo e fazer modificações. Que tal anexar os códigos fontes?

#23

O problema de ter que confirmar a volta é para que caso a pessoa sem querer clicou no cancelar OU clicou várias vezes no cancelar (meio que poderia ser utilizado para voltar).

Discutimos isso com a Simone ontem, no próprio vídeo com o João ele pressionou várias vezes um botão.

Em anexo compartilho os fontes (fontes_conecta_daron.zip)

Quanto ao outro modelo, a Simone preparou um ontem, estou anexando também (telas.zip)

Pré-visualizarAnexoTamanho
fontes_conecta_daron.zip11.89 KB
telas.zip240.5 KB

#24

Fred onde tem o botao de confirmar??

Daron me corrige se eu entendi errado.... mas pelo que vi o que tem no circulo do centro sao instrucoes do que o usuário deve fazer...

Por exemplo na tela "Interagir01" o usuario  entro no item CONVERSAR e quando gira no controle  selecionando as demais opcoes > Ver Video > Voltar ao Painel Principal (aparece a instrucao para apertar o botao)... dai ele aperta  botao no controle e volta, seria isso? nao encontrei o botao de confirmar ...

Eu e o Daron conversamos antes de fazer as 2 opcoes, e achei mais clara e facil a opcao com todas as funcionalidades na Página Inicial (que o Daron fez), assim ele fica mais livre para fazer o que deseja, e tem todas as "opcoes" logo de início.... 

#25

Finalizei os wires com ideia de se basear nas atividades do usuario, continuando o wire que o Daron postou.

Mas adicionei no post que estavamos discutindo sobre WIREFRAMES.

#26

Pessoal,

Consegui finalizar algumas telas hoje... ainda faltam algumas, mas acredito que com essas já conseguimos testar o prototipo.

Veja o que acham...

  • 1-home.jpg
  • 2-conversar.jpg
  • 3-conversaropcoes.jpg
  • 4-conversarvariosamigos.jpg
  • 5-aguardando.jpg
  • 6-conversaramigos.jpg
  • conversar1amigo.jpg
  • conversargrupo.jpg

#27

Show Simo! Gostei da proposta! =D

Quanto ao cancelar para estas interfaces, será que  poderíamos ter algum informativo na tela dizendo que o botão vermelho do controle (voltar/cancelar) pode ser utilizando para retornar ao nível anterior?

Vou tentar falar com Maehler para iniciarmos algo de desenvolvimento esta semana.

Semana passada também comentamos da possibilidade de utilizar Ginga para desenvolvimento da nossa proposta, porém estudando um pouco a tecnologia, se torna inviável por 2 pontos:

1) A interface deve ser respeitada certos padrões da TV Digital e o Controle também não pode ser alterado alguns padrões de navegação.

2) O tempo para aprender e desenvolver nesta tecnologia não é suficiente para a data do projeto final.

#28

Nossa gente, tá ficando demais! 

Alguns detalhes no projeto gráfico que eu sugeriria pensar: 

  • Padronizar os ícones, usar menos cores diferentes
  • Usar uma textura suave no fundo, dar a opção de colocar um background customizado (papel de parede) acho que isso até deveria vir no assistente de configuração
  • Indicar o contexto na hierarquia de navegação (vejam uma idéia em anexo - senti falta do código-fonte do layout pra fazer isso)
  • O círculo em torno da opção selecionada poderia ser mais grosso e talvez até expandir um pouco o tamanho porque é um detalhe crucial do layout: se a pessoa não conseguir enxergar isso, não navega (e tem gente com baixa visão no público-alvo)

Algumas dúvidas que não são do layout mas que surgiram ao vê-lo

  • Como é que se adiciona amigos?
  • Como é que o Conecta reage se a pessoa estiver dentro de casa, mas com a televisão desligada? Acredito que o set-top-box poderia disparar um alarme sonoro, tipo toque do telefone. Isso permitira um acesso quase que 24 hs por dia.
  • Como é que eu indico ao Conecta para ficar offline? Eu acredito que deveria ser um botão no set-top-box.

Aliás, isso me fez pensar que vocês precisam começar a pensar logo no set-top-box, o que vai ter nele. Abre um post sobre e vamos guardando as idéias que já tivemos (ex: botão de socorro).

  • conversar_circulos_breadcrumb.png

#29

Fred

Acabei esquecendo do "Adicionar Amigo"... bem lembrado. Vou adicionar um circulo na tela "Meus Amigos" (como primeiro item), e fazer mais alguns ajustes no layout e compartilho o fonte com vcs, não estou com ele aqui agora.

O contexto na hierarquia de navegação seria em todas as telas? pq em algumas telas o circulo preenche todo o circulo maior... Mas achei boa a ideia de mostrar que ele tem o botao voltar no controle.

Também faltou indicar que tal usuario deixou um "video mensagem".....

#30

Em anexo uma proposta para a hierarquia.

Se possível, colaborem com sugestões no Controle.

Pré-visualizarAnexoTamanho
conecta_hierarquia.psd6.17 MB
  • conecta_hierarquia.png

#31

Segue as telas com algumas alterações que o Fred e daron sugeriram (de borda, background e hierarquia)

Um detalhe nessa tela de aceitar ou recusar amigo onde tive que colocar o botao VERMELHO como "nao aceitar o amigo", pois nao temos outra opcao de botao, o que vcs acham??

Gostariam que vcs validassem o layout pois ainda tenho que desenhar algumas telas, mas espero a aprovacao de voces dessas para continuar. Acredito tbm que com essas que ja temos dá para prosseguir o protótipo....

  • amigoquerteadd.jpg
  • addnovoamigo.jpg
  • addnovoamigofalar.jpg
  • addnovoamigoencontrado.jpg
  • conversar1amigo.jpg
  • meusamigosvideo.jpg

#32

Gostei da proposta Simone!
 

Acho válida fazer uma interface que funcionará de qualquer lugar do sistema que é a de aguardando o comando de voz. Podemos fazer um evento para abrir esta interface quando pressionar o botão FALAR.

#33

O layout está evoluindo, ficando mais polido em termos visuais.

Breadcrumb

Não gostei desse breadcrumb que o Rafael propões. Acho que ele vai confundir mais do que ajudar. É um elemento visual desconectado da metáfora principal, competindo pela atenção. Quando ele me diz: "Você está em" o que isso significa? Que eu abri uma página? Mas isso não é uma página, é um menu, não tem a mesma sensação de lugar que tem uma página web. Vale lembrar que a origem do "Você está aqui" são os mapas geográficos. 

Além disso, o breadcrumb induz ao erro pois as setas indicam o caminho inverso. O coerente seria começar no topo com Home e terminar com Adicionar amigo. O botão voltar também está numa posição estranha, parece que não tem nada a ver com o breadcrumb. 

Tem outro ponto: criou um desequilíbrio visual e o círculo teve que sair do centro da tela para compensar. Se tivesse algum elemento pra colocar do lado esquerdo, poderia voltar ao centro. Isso vale também para a tela conversar1amigo.jpg O layout ficaria mais forte se a bolinha do amigo a conversar estivesse alinhado com o círculo maior.

Uma sugestão que dei no terceiro parágrafo do comentário 30 sobre os wireframes, seria do elemento selecionado estar do lado direito. Ao seu lado poderia vir uma descrição do que a pessoa encontra nesse círculo, compensando o peso do breadcrumb do lado esquerdo. 

A importância da animação

Eu acredito que essas questões só poderão ser definidas quando vocês fizerem as animações de transição entre os menus. Isso vai ser muito importante. Vejam os exemplos que coloquei no comentário 12. Neles os breadcrumbs são criados pela própria animação, pelo movimento dos elementos. Acredito que isso seja muito mais simples de entender do que o conceito de "Você está aqui".

Na hora de fazer a animação tem que testar e ver o que funciona melhor, que transição fica mais suave.

  • Quando seleciona um bolinha, ele cresce e ocupa o espaço do círculo original?
  • Quando seleciona uma bolinha, os elementos é que são substituídos? E o que fazer quando os círculos tiverem número diferentes de bolinhas (penso que no círculo amigos podem haver dezenas)?

Adicionar amigos

Sobre a questão do adicionar amigos, só mencionar que a sugestão de family code não haveria a necessidade de confirmar adicionar amigo. 

Reconhecer o nome de uma pessoa pela primeira vez é extremamente difícil para os softwares de reconhecimento de voz atuais. No celular você primeiro digita o nome da pessoa e depois ele consegue reconhecer se você diz o nome. Muitos problemas de grafia podem ocorrer aí se for começar pela voz. E se por acaso estiver escrito errado, o que eu faço? Tenho que ficar falando de novo até acertar? Acho difícil haver algum progresso nisso. Acho que valeria à pena ter uma opção para digitar. Vejam os exemplos de teclado do comentário 22 sobre wireframes.

#34

Tentei simular com os icones embaixo para nao confundir o usuário, mas para deixar em um tamanho menor eles ficaram bem ruins e dificil de entender.

Dai simulei o Breadcrumb normal, sem imagens para ficar algo bem discreto..... na verdade seria só uma referencia mesmo para o usuario.

Veja o que vcs acham.

Fred vc tem razao sobre o reconhecimento do nome, nao tinha pensado nisso, mas teriamos que mudar novamente o controle??

  • addnovoamigo.jpg

#35

Não acho que vale a pena pensarmos em outro controle nessa altura.... pois vamos precisar de tempo para fazer o prototipo funcional.

Talvez o nome e sobrenome junto deve ser complicado mesmo...
Penso que poderiamos dividir em duas etapas, onde primeiro ele diz o NOME.. o sistema lista os nomes semelhantes e ele seleciona, depois ele diz  SOBRENOME.. o sistema lista os nomes semelhantes e ele seleciona.

Outra coisa que nao conversamos foi sobre o usuario... O conecta se restringe a 1 usuario por casa, pq nao colocamos usuario nem senha para entrar...

#36

Acho que o layout agora já está mais do que suficiente para o que vocês precisam entregar. 

Quanto ao controle concordo que não deve ser mexido. 

Porém o que eu estou sugerindo é ter um teclado na tela, tipo aquele teclado circular que mostrei no comentário #22 sobre wireframes. Cada rodinha do círculo da imagem acima seria uma letra. 

Os teclados baseado em setas direcionais são uma desgraça na televisão porque quando você quer selecionar uma letra que está longe tem que pressionar a tecla várias vezes. Mas no caso de vocês isso não é problema porque vocês tem um controle com aceleração (a rodinha). Outro problema dos teclados de televisão é que quando chega no final de uma linha de letras, se você pressiona pro lado, cai do lado oposto. É bem confuso isso. No caso de vocês isso também não é problema, pois o círculo é infinito, não tem como sair dele! 

Só tem que pensar uma coisa: como sair do teclado e como deletar letras. Será que vale à pena usar o botão voltar pra deletar?

A idéia das listas para ajudar a selecionar o nome é boa, mas ainda acho muito difícil de implementar com o estado atual do reconhecimento de voz. A grafia varia muito para a mesma pronúncia:

  1. Felipe
  2. Filipe
  3. Philipe
  4. Phillip

Para o nosso TCC, o produto não precisa necessariamente ser viável para as tecnologias atuais, mas vocês escolheram até aqui projetar o Conecta para ser viável hoje. Portanto, seria coerente manter esse foco. O reconhecimento de voz só vai funcionar com a tecnologia atual para comandos pré-derminados e ainda teria que haver um treinamento para isso, pedindo que o usuário fale algumas vezes o comando no setup inicial. 

Se vocês forem apresentar o projeto de vocês para um investidor e tiver um furo desses, isso vai ser notado. 

#37

Realmente essa variacao de nomes ficaria complicada...

Simulei o wireframe do teclado no formato circular, mas ao inves de usar o botao voltar para apagar adicionei 3 circulos:

_  para dar espaço
<  para apagar uma letra
OK para pesquisar amigo

Veja o que vcs acham..

Pré-visualizarAnexoTamanho
conecta-teclado.pdf502.2 KB

#38

Acho que ficou ok a interação!

Ficaria melhor o nome no lado esquerdo e teclado no lado direito, assim segue a ordem de escrita. Ou então escrever o nome dentro pra manter o layout balanceado. Mudar a posição do círculo vai ser bem desorientador. Melhor mantê-lo sempre fixo no centro da tela.

Só ficou pequena as letras. Será que não é o caso de usar o efeito de aumentar ícones do Dock do OSX?

Só fico um pouco preocupado que esse efeito não é usado nas outras partes do sistema. Talvez possa ser usado também, para enfatizar a seleção. Pode ser que deixe o usuário confuso. Tem que pensar...

A propósito, o conceito desse efeito é originário dos anos 80 e se chama Display Bifocal.

Como é que faz maiúscula/minúscula? Eu acho que pra simplificar o sistema poderia adicionar maíscula no começo de cada nome por padrão, apesar de que no meu nome iria sair errado: "Frederick Van Amstel" ou errado tb "Caroline De Souza". Talvez usar CAIXA ALTA sempre para nomes.

Acredito que se não for usado algum escopo de busca (cidade ou família), o sistema vai retornar centenas de Marcos Albertos. É um nome bem comum. Como o sistema só mostra a foto e o nome, vai ser bem difícil ter certeza que é o Marcos certo.

Quanto detalhe né? Mas é justamente a atenção a esses detalhes que promoveu a disciplina de design de interação, pq na área de tecnologia ninguém se preocupava com isso. É um dos grandes diferenciais da Apple!

#39

Fred a questão da letra eu tinha pensado em usar tudo CAIXA ALTA mesmo...

As letras ficaram pequenas, por isso eu tinha destacado no centro do circulo... agora alterei tudo no padrao centralizado, junto com o nome...
Nao sei se vamos conseguir fazer esse efeito de aumentar o ícone, entao vamos deixar como está por enquanto. Se no desenvolvimento ficar fácil dai podemos adicionar...

A questão da cidade é uma boa, adicionei uma tela para isso tbm...

Estou fazendo a tela do lembrete de remédios, acho que poderiamos continuar com a opcao de FALAR... (que serve para todos os lembretes), o que acham??

Das 3 tarefas para apresentar a Banca, só falta o layout do lembrete de remédio, que finalizo essa semana.

Segue abaixo as telas

- Programa de TV em grupo
- Lembretes (Remedios) - ainda falta
- Selecionar Amigo (pra usar o dial do controle)

Pré-visualizarAnexoTamanho
conecta-teclado.pdf547.26 KB
adicionar_novo_amigo.zip3 MB
conversar_em_grupo.zip6.63 MB
ver_tv_em_grupo.zip14.5 MB
outras_telas.zip4.86 MB

#40

O adicionar amigo fechou. Quanto aos remédios reconhecer o nome seria mais fácil, pois dá pra ter um catálogo de nomes. O mais viável mesmo seria usar a foto como indicador do remédio nos menus e na hora em q toca o alarme e a pessoa vem pra desligar, imediatamente dá play na gravação da voz do remédio. Acho q isso pode até ajudar a incentivar o uso pois é a voz da própria pessoa e não um robô chato. Nesse caso não haveria necessidade de reconhecimento de voz.

#41

Tem um detalhe no item VER TV EM GRUPO, quando tiver em conferencia acho que poderia ter um botão (circulo) na tela chamado MUTE, onde será cortado o audio somente no programa de TV e as pessoas podem continuar conversando... seria uma boa para usar em comerciais.... que tal?

#42

Boa! O tipo do detalhe que só vem à mente se pensar muito bem na situação de uso. 

#43

#Reconhecer Remédios

Para isso sugiro utilizarmos alguma tecnologia de reconhecimento de código de barras.

Existem serviços de busca de produtos por meio de código de barras.

Achei um exemplo rápido aqui: https://www.gs1br.org/main.jsp?lumPageId=402881762CC229EF012CF0781D095DE9

Não implementaremos este conceito, mas ele poderia ser um fake na apresentação.

Para as pessoas que possuem um remédio caseiro sugiro utilizar o teclado E OU o comando de voz..

#44

Achei legal essa ideia do codigo de barras, mas dai temos que adicionar um leitor de código de barras no conecta, isso é viavel (falando tecnicamente)?  Esse leitor ira identificar qualquer remedio?

Mas de qualquer forma temos que pensar como sera o cadastro das opcoes LEMBRETES (mesmo que nao vamos apresentar tudo para a banca), deixaremos as duas formas teclado E OU o comando de voz?

Para avisar o usuário sugiro a gente mostrar o lembrete ou nome do remedio na tela se a TV estiver ligada e enviar a MSG para o celular (como haviamos fechado no comentário #24)
 
Ou ainda podemos dar a opcao para ele escolher se quer receber na Tv , celular ou ambos....
 

#45

Essa conexão com o celular, quem é que vai pagar? SMS não é gratuito.

O leitor de cod de barras não me parece viável, ele pode descalibrar e cegar uma pessoa se olhar no feixe. É um objeto estranho ao cotidiano. Hoje em dia já é possível reconhecer cod de barras por imagens da webcam direto. 

Sobre os lembretes acho que vcs deveriam ter algumas opções padronizadas baseadas nas pesquisas que vcs fizeram. Talvez uma série de ícones genéricos, mais a opção de gravar uma mensagem em áudio já seja suficiente. Não é reconhecimento de voz, é gravar mensagem que pode ser tocada quando tocar o alarme. Opções de som de alarme pode também ser uma forma de significar alguma coisa. Pesquisem sobre Earcons. Digitar um lembrete vai ser muito chato, melhor nem dar essa opção.

#46

Eu curti essa ideia de gravar as mensagens e dos Earcons, nesse site eles publicaram até uma trilha sonora produzida apenas com sons do Windows XP e 98.

Sem SMS ele recebe apenas o aviso de remedio ou mensagem atraves de um som (earcons) e clica para ouvir... No flex tem como simular esses EARCONS? se nao der podemos apenas citar na documentação?

Vejam se poderia ser dessa forma...? dai ja desenho essa tela no fds (só falta essa para fechar o layout)

Adicionar Lembrete: (utiliza gravação de voz)

  • usuário escolhe a opção de adicionar lembrete;
  • grava mensagem desejada;
  • seleciona o dia da semana que deseja acionar o lembrete (pode adicionar mais de um);
  • seleciona o horário que deseja ser lembrado;
  • o lembrete é criado;
  • o usuário é direcionado para uma tela com os lembretes criados com a opção de “ouvir” e “apagar”.

Como será avisado (TV ligada): irá tocar um aviso sonoro (earcon) e aparecerá na tela uma mensagem “Você tem um lembrete, aperte CONFIRMAR no controle para ouvir”. Se o usuário apertar no confirmar automaticamente a TV ficará no Mudo e ele irá ouvir a mensagem que gravou. Se cancelar o aviso irá desaparecer.

Como será avisado (TV desligada): somente irá tocar um aviso sonoro (earcon) e fica a critério do usuário ligar a TV para visualizar ou não. Após ligar a TV a mensagem descrita acima irá aparecer para ele. Podemos adicionar uma luzinha amarela no aparelho Conecta para identificar que ele tem uma mensagem ou lembrete (caso ele tenha saido de casa e chegue em outro horario).

Lembrando que: os earcons deverão ser diferentes para os seguintes itens (assim o usuário já irá se familiarizar com cada tipo de som):

  • Remédios;
  • Lembretes;
  • Vídeos enviados por amigos.

Adicionar Remédio: (utiliza webcan para tirar foto)

  • usuário escolhe a opção de adicionar remedio;
  • tira a foto da caixa do remédio;
  • seleciona o intervalo de horas que deseja ser lembrado;
  • o lembrete de remédio é criado;
  • o usuário é direcionado para uma tela com os lembretes de remédios gravados com a opção de “alterar” e “apagar”.

Como será avisado (TV ligada): irá tocar um aviso sonoro (earcon) e aparecerá na tela uma a fotinha do remédio e a mensagem “Está na hora de tomar seu remédio. Aperte CONFIRMAR se tomou seu remédio”. Se o usuário apertar no confirmar quer dizer que ele tomou o remédio, senão ele pode cancelar. Aquela questao de controlar se ele tomou ou não o remédio nós nao vamos adicionar no projeto agora, mas ja foi adicionado em "Implementacoes futuras".

Como será avisado (TV desligada): somente irá tocar um aviso sonoro (earcon) e fica a critério do usuário ligar a TV para visualizar ou não. Após ligar a TV a mensagem descrita acima irá aparecer para ele. Podemos adicionar uma luzinha amarela no aparelho Conecta para identificar que ele tem uma mensagem ou lembrete (caso ele tenha saido de casa e chegue em outro horario).

#47

Muito bom Simone! Fechou com classe! Agora é começar a pensar como exportar ou converter o layout para o protótipo em Flex.

#48

Daron acho que seria bom ver com seu amigo como ele irá utilizar essas imagens, pra gente poder exportar tudo.... pq tem bastante tela. Acho que vamos precisar exportar cada circulo individual....

#49

Fiz o wire do Adicionar Remédio, no fds eu faço o layout e posto aqui Daron.

Pré-visualizarAnexoTamanho
lembretesremedio.zip398.01 KB

#50

Só faltava essas telas para finalizar os layouts. Daron ja postei todas as imagens e PSD aqui, o restante está no comentario #39.

- Lembretes (Remedios)
 

Pré-visualizarAnexoTamanho
lembrete_remedios.zip4.33 MB

#52

Olá pessoal, fiz um esboço da Home, para vocês terem uma ideia de como pode ficar funcionando.

Eu mantive os tamanhos originais que a Simone usou no psd, talvez no monitor de vocês corte um pedaço. Esta questão de tamanhos temos que ver melhor como vai ficar.

A fonte que você utilizou Simone, não tenho na minha máquina, tem como você me passar o nome dela, que aí eu procuro para baixar. Neste caso ficou fonte Arial, provisoriamente.

Descompactem o arquivo, que dentro haverá um instalador, do Adobe AIR, caso alguém não tenha o Adobe AIR instalado, este é o link para download.

http://get.adobe.com/br/air/

Pré-visualizarAnexoTamanho
conecta.air_.zip511.6 KB

#53

Ficou mtooooooooooo legal, que emoçao ver o Conecta ganhando vida rsrsrs

É complicado fazer com que os outros circulos fiquem parado ao selecionar o proximo ??

A fonte é a Berlin Sans FB, segue em anexo.

Corrigindo, a minha TV LCD é de 42'..  Posso testar direto na TV também... é apenas através do cabo HDMI que vamos simular na banca??


 

Pré-visualizarAnexoTamanho
berlin_sans_fb.zip391.98 KB

#54

:D

Ele está sofrendo esta pequena variação por conta dos tamanhos das imagens, que têm tamanhos variados. Irei fixar este tamanho, para que isto não ocorra mais.

Preciso saber caso seja necessário o redimensionamento da tela, aumentando ou diminuíndo os círculos. Nestes casos, geralmente as fontes não ficam coerentes com o resto da interface, já que elas não sofrem este redimensionamento. Por isto, seria bom até fazer os testes baseados no ambiente que vocês irão utilizar posteriormente, para que possamos otimizar.

#55

Que bacana Daniel! Funcionou bem o uso da rodinha do mouse. 

Não sei se vocês pretendem implementar o teclado circular no protótipo funcional. Caso sim, valeria à pena fazer essa tela em seguida para verificar se o esquema de rodinha do mouse funciona bem quando o número de opções no círculo é maior. Eu desconfio que será necessário um algoritmo de aceleração/desaceleração para evitar que um leve movimento deselecione a opção desejada. Tô pensando nos idosos que tem mal de Parkinson!

#56

(Diego ~hehe)

Era justamente isto que eu havia comentado com o Daron, a sensibilidade da rotação.

Eu vejo que a rotação só deveria ser realizada quando houvesse um comprimento maior da circunferência. O wheel do mouse é relativamente sensível, e eu acredito que no controle essa sensibilidade poderia ser próxima a um botão de velocidade dos liquidificadores antigos.

#57

Diego consegui testar na TV de casa e ficou ótimo, só cortou bem pouquinho o "OLÁ" no canto esquerdo e a temperatura no canto direito, mas a altura ficou perfeita e a resolução tbm!!! :)

O tamanho da TV é 42' e a resolução está com 16:9, segue foto.

Ai que lindooooooooooo rsrsrs

  • 20120821_214913.jpg

#58

Olá Galera! Nova versão quentinha do Conecta saíndo! Com lembretes de remédios, conversar em grupo, e assistir TV em grupo. Gente, sumiu a opção de fazer upload de arquivos?! Estou enviando por email pro Daron.

#59

Maehler, a opção para enviar anexos só aparece depois que o usuário está logado, por questões de segurança. Você pode editar esse comentário e anexar os arquivos pra ficar aqui guardado.

#60

Havia deixado com login automático, e pensando que estava logado, nem tinha percebido que não estava.

Então agora vai o arquivo.

Pré-visualizarAnexoTamanho
conecta.air_.zip7.45 MB

#61

O protótipo está ficando muito bom, Maehler! Bom trabalho. Já dá pra ter o feeling da navegação. Percebe-se que mesmo usando a rodinha do mouse já é mais interessante do que se fosse usar o tradicional apontar e clicar. 

É muito complicado inserir algum tipo de animação de transição a cada vez que passa de um menu pro outro? Eu acredito que isso iria suavizar bastante a interação. Acredito que o Rafael e a Simone ainda não tenham pensado nisso ainda, mas acho um ponto importante pra experiência. Foi discutido no comentário #33.

Dá pra abrir a webcam do computador lá na tela de conversar com amigos? Dá pra abrir duas webcams? Fiquei pensando aqui de fazer uma gambiarra pra dar a impressão de que tem um servidor de conferências funcionando. Colocar uma segunda câmera conectada no laptop, e usar um cabo extensor USB pra filmar uma segunda pessoa. 

Outro ponto importante para demonstrar a experiência é ter um arquivo de vídeo incorporado no protótipo para a opção assistir TV com os amigos. E minha sugestão é que o primeiro canal seja Novela das 8. É um cenário muito mais factível do que jogo de futebol.

#62

Nós havíamos comentado com o Daron sobre a transição de telas, vamos implementar alguma coisa bacana pra isto.

Dá pra abrir a webcam sim, uma câmera é muito tranquilo, eu só não tenho certeza como fica a questão de ter 2 webcams no pc, nunca passei por esta situação.

O vídeo também já combinamos com o Daron, no lugar daquela imagem colocaremos um vídeo laugh

#63

Mais uma versão do Conecta!

Testem a conversação com uma webcam.

Pré-visualizarAnexoTamanho
conecta.air_.zip48.54 MB
Precisa de ajuda?

Blog

O blog permite que os membros de um projeto se comuniquem, discutindo e publicando novidades. É um ótimo lugar para compartilhar processos, desafios e explorar ideias.