Chat Solar
Autor: João Ramos Filho | Publicado: 2012-09-20T17:20:00-07:00




Documentação - Chat:




Visão geral:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

Procurou-se fugir de estereótipos do
Solar tradicional, visando possibilitar a descoberta de novas oportunidades de
criação e interatividade. Contudo, o projeto do chat do Solar aqui
apresentado busca possuir uma estrutura limpa e que direcione o uso do aluno.
Para tal imaginamos que cada um de nossos ícones possua um nome apropriado na
sua descrição em código para torná-lo acessível tanto para quem não compreendeu
o seu significado quanto para deficientes visuais com leitores de tela
apropriado. 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

Foi inserido
alguns elementos a mais visando caracterizar de forma criativa o projeto. Também
há o oferecimento de mais elementos para serem explorados em termos de
interação e de design. Uma funcionalidade adicionada foi o blocos de
anotação que permitirá ao usuário incluir anotações como lembretes, sendo
possível para ele envia-los para outros membros do chat e acumular
vários blocos criando um pequeno histórico de suas anotações que podem ser
revistos posteriormente. Outra função é a de chamar a atenção do aluno
dada por um despertador que pode ser usado como um recurso de uso bastante
variável, servindo para pedir a atenção, ou pedir maior participação de alguém.
Outro recurso é de escolher um aluno aleatoriamente, o professor pode
marcar todos os alunos que entraram no sorteio ou, se clicar no seu botão ele
escolhe dentre todos os alunos participantes do chat no momento; este recurso é
útil caso o professor queira apontar para algum aluno interaja ou responda sem
privilegiar, ou em detrimento de, ninguém. Por último há o recurso de mostrar a
vez de quem deve dar uma resposta ou falar algo este recurso é
importante quando o conteúdo do chat precise de uma ordem na conversa ou em
perguntas do professor, ou ainda, uma forma mais branda de chamar a atenção de
um participante.

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

Os ícones
utilizados estão intimamente a ligados a ideia de símbolos [3], nota-se
que as funções citadas no parágrafo anterior são respectivamente: Notas Autoadesivas
(para os blocos de anotação), Despertador (chamar atenção), Dado (escolher
aluno aleatoriamente), Bandeira (quem deve dar uma resposta ou falar algo).
Lembrando que os símbolos são signos que estão intimamente ligados a
interpretações já contextualizadas, como, por exemplo, o dado para selecionar
um valor na sorte, no caso um aluno. Outro exemplo é o da bandeira que indica
que é a vez de alguém fazer algo, ligado a ideia de largada (ícone usado no chat
do Taulukko), o despertador para literalmente “despertar” o aluno para que
participe chat, o histórico das notas autoadesivas seria uma lista, uma
vez que seu aspecto é semelhante a este.

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

Já no caso das
notas autoadesivas temos uma particularidade, uma vez que estes seriam mais
próximos de índices uma vez que estes indicam diretamente a função de
que se tratam [3]. No caso que é de fato de armazenar informações e/ou bilhetes
de forma fácil e direta.





1.
O design
gráfico (tipo
de fontes,
ícones, cores
etc.) da
tela de
chat do
SOLAR é atraente
e criativo?



&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Utilizamos
um variação de luminosidade, na busca de se alcançar um degradê, ao longo da
tela, para dar uma ideia de conduzir o aluno à “luz do conhecimento”; tentando
fazer disso uma aparência agradável e confortante. Como ícones*
nós imaginamos uma série de funcionalidades.



&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; São
duas as fontes aplicadas na tela, uma serifada para o texto de conversa do chat que é o Rod; que é uma fonte própria para ler grandes quantidades de texto. A outra, para os títulos e frases, usou-se uma fonte não serifado própria para frases curtas e impactantes, a fonte Tahoma. 



*Ícones estão intimamente ligados aos
conceitos de qualidades subjetivas e diretas ao subconsciente humano [3].



2.
As cores
utilizadas são
adequadas?

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

Trabalhamos com as cores azul (e suas variações) e cinza em maior destaque. O azul é típico do novo ambiente e seu uso mantém a identidade visual do AVA. Além de ser uma cor fria e compenetrante. Devido ao fato de haver uma cor já saturada em destaque, optamos por usar uma cor neutra como fundo do ambiente, a fim de cumprir tal função aplicou-se o cinza. Cor padrão para muitos chats e bate-papos. 



Código hexadecimal das cores utilizadas:



#003366

#0b5196

#0f6bc5

#1383f1

#ffffff

#fdfefe

#f5f6f6

#cdddec

#eef0f1

#e5eaef



3.
Os elementos
gráficos são
úteis para
que você
possa se
situar na
tela (contexto)
e por
ela navegar?

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

A tela é composta especialmente por planos que dividem e organizam a estrutura da leitura de maneira simples e direta. Evitamos o uso excessivo de pontos e retas porque queríamos evitar uma forte expressividade da tela, uma vez que a mesma provocaria uma impressão de força e/ou tensão não desejável para um público abrangente como o público esperado.



&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Os elementos gráficos possuem distribuição de leitura ocidental. Ou seja, a distribuição dos elementos são apresentado do canto da esquerda superior atravessando em diagonal para o canto da direita inferior. Nesta ordem temos o banner, interface de saída, entrada de dados, lista dos parcipantes e, por
fim, mecanismos de interação.



&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Ainda
privilegiando a leitura ocidental, temos uma forma de leitura e distribuição em
“E”. Sendo a mesma de comum utilização em
ambientes virtuais. O que faz com que ocorra o reforço na leitura da conversa
do chat.



4.
Os ícones
e outras
imagens têm
significação clara?

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

Existem muitos espaços de comunicação semelhantes ao do chat convencional. Isso promove a
existência de uma série de ícones aceitos pelos usuários da internet. Gerando
um grupo de representações simbólicas já consolidadas.



No caso desta proposta de tela para o Chat do Solar, foi
apresentado um conjunto de funções&nbsp; que
necessitavam de representações simples e diretas. Para tal foram utilizadas
referências modernas de ambientes virtuais. Dentre eles o Taulokko, um ambiente
de interpretação de jogos de mesa. Acolhendo dele as funções dos ícones
descritos na Visão Geral do projeto. 









5.
O layout
e uso
de cores,
fontes e imagens
é consistente?



O
layout é distribuído
e embasado nas leis
da proximidade, alinhamento,
contraste e repetição, conceitos
importantes para organização visual [2]. As caixas que definem os
conjuntos possuem alinhamento comum. Nota-se também a procimidade dos affordances com suas utilidades e
funções correlacionadas.



&nbsp;Importante notar que
a entrada e saída
de dados da interface
estão próximas entre si, esquerda
da tela, respeitando a
proximidade e que
cada nível de cima
para baixo está separado.
Há o alinhamento
entre duas colunas, uma
de imagem e lista,
e outra, de texto
e entrada dos dados.
O contraste existe
em um campo branco
de entrada e saída
dos dados e o
fundo cinza da coluna
das listas. A repetição
é comum neste AVA
começando pelas cores
que se repetem pelo
chat e formas
não destoantes.



&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; A
fonte usada para mostrar
o texto é o
Rod devido a
sua forma serifada que
facilita sua leitura
em grandes quantidades
de textos. Já os
nomes dos autores possuem
seus títulos com Tahoma
que é uma fonte
não serifada prática e
útil para casos títulos
e textos muito curtos.
Desta forma visamos manter a consistência
das fontes usando apenas
duas das mesmas.



6.&nbsp; Tela que
apresenta a informação
de maneira
clara e em
ordem lógica?

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

A tela é
dividida em apenas duas colunas e temos três níveis de linhas de informação. A
primeira coluna é referente ao banner, a entrada e saída de dados para conversa
do chat, ambos respectivamente na primeira, segunda e terceira linha, de
cima para baixo. Na segunda coluna temos em ordem crescente dos níveis os
comandos para fechar/minimizar a tela, depois um espaço para “respirar”, uma
coluna com os membros do chat, e uma caixa





7.
Reflexão por
escrito, justificando
as decisões
tomadas no
processo de
desenvolvimento do
trabalho.



A equipe optou por trabalhar com um
conceito de simplicidade, objetivando praticidade de&nbsp; funcionamento, visando que o resultado fosse bem recebido tanto pelos alunos da EaD, quanto do presencial. Estabelecemos um público alvo
abrangente, de forma que o uso eficaz e eficiente do mesmo fosse possível e
agradável dentro de uma faixa de 17 a 70 anos&nbsp; A princípio essa definição pode parecer muito geral, mas a ideia é a de que a tela não poderia carregar referências muito específicas, devendo ser simples para que o observador consiga compreendar o máximo possível, mesmo que tenha apenas (ou
nenhuma) experiência no uso de AVAs. O processo de criação
passou por análise, planejamento e prototipação; na busca da melhor tela e de quais elementos deveria carregar. Todas as etapas foram
discutidas e revistas, gerando novas alterações que, finalmente, nos remeteram
ao resultado aqui apresentado.



Referências:



[1]Simone D.
J. Barbosa e Bruno
S. Silva. Interação
Humano Computador.
Editora Campus, SBC
– Sociedade Brasileira
de Computação.



[2] Robin
Williams. Design
para quem
não é designer.
8º edição. Editora Callis.




[3] Lúcia Santaella. O
que é Semiótica. Editora Brasiliense.