governador valadares mg 2012 · 2019. 7. 10. · 1 sitemap é um mapa do site mostrando os...
TRANSCRIPT
UNIVERSIDADE DO VALE DO RIO DOCE
FACULDADE DE ARTES E COMUNICAÇÃO
CURSO DE DESIGN GRÁFICO
Dalton José Silveira Júnior
Gabriel Lioni Isidoro
UX DESIGN Em Interface Gráfica de Redes Sociais
Governador Valadares – MG
2012
DALTON JOSÉ SILVEIRA JÚNIOR GABRIEL LIONI ISIDORO
UX DESIGN Em Interface Gráfica de Redes Sociais
Trabalho de conclusão de curso para a
obtenção do grau de bacharel em Design
Gráfico, apresentado a Faculdade de Artes e
Comunicação da Universidade Vale do Rio
Doce.
Orientador: Prof.º Alexandre Willian
DALTON JOSÉ SILVEIRA JÚNIOR GABRIEL LIONI ISIDORO
UX DESIGN Em Interface Gráfica de Redes Sociais
Trabalho de conclusão de curso para a obtenção
do grau de bacharel em Design Gráfico,
apresentado a Faculdade de Artes e
Comunicação da Universidade Vale do Rio Doce.
Governador Valadares, ___ de ____________ de _____.
Banca Examinadora:
__________________________________________ Prof. Alexandre Willian Dias Ferreira - Orientador
Universidade Vale do Rio Doce
__________________________________________ Prof. Maykel Cordeiro Nunes
Universidade Vale do Rio Doce
__________________________________________ Prof. Daniela Maria Paula Martins
Universidade Vale do Rio Doce
Tabela de Figuras
Figura 1 - Pesquisa em Gráfico 01 ......................................................................................... 13
Figura 2 - Pesquisa em Gráfico 02 ......................................................................................... 14
Figura 3 - Pesquisa em Gráfico 03 ......................................................................................... 14
Figura 4 - Cabeçalho facebook ............................................................................................... 16
Figura 5 - Caixa de produção de conteúdo do facebook ........................................................ 16
Figura 6 - Sidebars Facebook ................................................................................................. 17
Figura 7 - Tour em 3 passos ................................................................................................... 18
Figura 8 - Passos de cadastro ................................................................................................ 19
Figura 9 - Profile twitter ........................................................................................................... 20
Figura 10 - Caixa de produção de conteúdo do twitter ........................................................... 21
Figura 11 - Campo de cadastro Twitter ................................................................................... 21
Figura 12 - Sitemap ................................................................................................................ 22
Figura 13 - Wireframe sidebars .............................................................................................. 23
Figura 14 - Wireframe lista 1 ................................................................................................... 24
Figura 15 - Wireframe lista 2 ................................................................................................... 24
Figura 16 - Prototipação com sticknotes ................................................................................. 25
Figura 17 - Wireframe final ..................................................................................................... 26
Figura 18 - Grid da rede social ............................................................................................... 27
Figura 19 - Grid do facebook .................................................................................................. 28
Figura 20 - Estrutura twitter .................................................................................................... 28
Figura 21 - Cabeçalho toplist .................................................................................................. 29
Figura 22 - Sidebar toplist ....................................................................................................... 30
Figura 23 - Mapa de calor ....................................................................................................... 31
Figura 24 - Linha do tempo ..................................................................................................... 32
Figura 25 - Nova lista .............................................................................................................. 33
Figura 27 - Fonte Myriad ......................................................................................................... 36
Figura 28 - Fonte Tahoma ....................................................................................................... 37
Figura 29 - Ratings de outras redes sociais ............................................................................ 38
Figura 30 - Toplist Rating ........................................................................................................ 38
Figura 31 - Botões reagindo ao mouse ................................................................................... 39
Figura 32 - Rough icones ........................................................................................................ 40
Figura 33 - Ícones toplist ......................................................................................................... 40
Figura 34 – Feedback ............................................................................................................. 41
Figura 35 - Teste de contraste ................................................................................................ 42
Figura 36 – Homepage ........................................................................................................... 43
Figura 38 - Linha do tempo ..................................................................................................... 45
6
SUMÁRIO
1 APRESENTAÇÃO ......................................................................................................... 7
2 REFERENCIAL TEÓRICO ............................................................................................ 9
2.1 USABILIDADE ................................................................................................................ 9
2.2 UX DESIGN .................................................................................................................... 9
2.3 INTERFACES GRÁFICAS PARA REDES SOCIAIS ................................................... 11
3 DESENVOLVIMENTO DO PROJETO ........................................................................ 13
3.1 PESQUISA ................................................................................................................... 13
3.2 ANÁLISE E SELEÇÃO DE DADOS .............................................................................. 15
3.2.1 FACEBOOK ............................................................................................................. 15
3.2.2 TWITTER ................................................................................................................. 19
3.3 SITEMAP E WIREFRAME ............................................................................................ 22
3.4 PRODUÇÃO ................................................................................................................. 27
3.4.1 GRID E COMPOSIÇÃO ........................................................................................... 27
3.4.2 CORES .................................................................................................................... 34
3.4.3 TIPOGRAFIA ........................................................................................................... 35
3.4.3.1 MYRIAD PRO .......................................................................................................... 35
3.4.3.2 TAHOMA .................................................................................................................. 36
3.4.4 TEXTURA ................................................................................................................ 37
3.4.5 ELEMENTOS GRAFICOS ....................................................................................... 37
3.4.5.1 RATING .................................................................................................................... 38
3.4.5.2 ICONES ................................................................................................................... 39
3.4.6 A EXPERIÊNCIA ...................................................................................................... 41
3.5 PRODUTO FINAL .................................................................................................... 43
4 CONCLUSÃO ............................................................................................................... 46
5 REFERÊNCIAS BIBLIOGRÁFICAS ............................................................................ 47
7
1 APRESENTAÇÃO
Através deste memorial descritivo será apresentado todo processo de criação de uma
interface gráfica para uma rede social. Usando conceitos do UX Design e do UI Design
para a criação da interface gráfica, a fim de proporcionar uma melhor experiência ao
usuário final.
O presente trabalho tem como objetivo geral a criação de uma interface gráfica para uma
rede social e, para alcançar tal objetivo, foram utilizada pesquisas em UX Design e UI
Design voltadas para WEB, assim como enquetes em redes sociais já existentes para
saber a opinião do usuário sobre alguns assuntos pertinentes ao projeto.
A princípio, a escolha do tema foi baseada no campo de interesse do grupo, ou seja,
interfaces gráficas e interação entre homem e máquina, com isso definido, começamos a
pesquisar sobre quais necessidades os usuários teriam de fato. Com a literatura técnica e
pesquisas na internet, foi percebido que as pessoas normalmente se deparam com várias
opiniões, criticas e resenhas a respeito de diversos temas, mas estes estão espalhados
por toda a internet, sejam em redes sociais como facebook, twitter ou orkut, sites ou em
blogs como o “efetividade”, “produzindo.net” entre outros, o que torna essas informações
difíceis de serem encontradas, consumindo bastante tempo do usuário. Então porque não
tentar centralizar e compartilhar tais informações de um modo mais social e bem
organizado, com uma rede social?
Por isso nosso projeto visa à criação de uma interface gráfica para uma rede social
voltada para área de opiniões e criticas sobre assuntos diversos. Nesta rede social o
usuário ira utilizar de um perfil pessoal aonde poderá criar listas com 10 coisas que este
usuário goste ou não e depois poderá compartilhar esta com os amigos.
Utilizando o UX Design e o UI Design, iremos filtrar e organizar essas informações em uma
interface simples e intuitiva para que possamos proporcionar uma agradável experiência aos
usuários, fazendo com que os mesmos encontrem o que procuram de maneira rápida e eficiente.
8
Como metodologia para a criação da interface gráfica, começamos fazendo uma
decupagem das informações adquiridas através de pesquisa de campo e analises de
interfaces. Depois de adquirir estas informações, partimos para a criação do sitemap1 e
wireframe2, que são o ponto de partida para a criação da interface. Com o wireframe final
pronto, começamos a pesquisar cores, tipografias, texturas e alguns elementos gráficos
para a aplicação e finalização do projeto.
1 Sitemap é um mapa do site mostrando os principais links e seus caminhos.
2 Wireframe é um desenho básico, que demonstra de forma direta a arquitetura de como o objeto final será de
acordo com as especificações relatadas.
9
2 REFERENCIAL TEÓRICO
2.1 USABILIDADE
De acordo com Krug (2006), usabilidade é na verdade ter certeza de que algo funcione
bem, e que qualquer pessoa, com ou sem experiência possa usufruir, seja um website,
um caça a jato ou uma porta giratória. Pois o produto sendo fácil de utilizar, o usuário terá
um ganho de produtividade e poderá atingir suas metas com maior facilidade e de forma
mais ágil.
Sempre que houver uma interface, ou seja, um ponto de contato entre um ser
humano e um objeto físico (ex: cafeteira) ou abstrato (ex: software), podemos
observar a usabilidade que esse objeto oferece. Historicamente, o termo
usabilidade surgiu como uma ramificação da ergonomia voltada para as interfaces
computacionais, mas acabou se difundindo para outras aplicações. (VAN AMSTEL,
2005)
Pela definição da International Organization for Standardization (1997), “usabilidade é a
medida pela qual um produto pode ser usado por usuários específicos para alcançar
objetivos específicos com efetividade, eficiência e satisfação em um contexto de uso
específico (ISO 9241-11)”.
Segundo a norma citada acima (parte 11 da norma ISO 9241) a usabilidade pode ser
especificada ou medida segundo outras perspectivas, como por exemplo: Facilidade de
aprendizado, facilidade de memorização e baixa taxa de erros no uso.
2.2 UX DESIGN
No livro A Project Guide to UX Design (2002), a respeito de UX Design, o autor Russ
Unger define UX Design como, “Design de experiência do usuário (UX Design) é a
criação e sincronização dos elementos que afetam a experiência dos usuários com uma
empresa ou produto, com intenção de influenciar suas percepções e comportamentos.”
(UNGER, 2002, Kindle Version, location 409-697, tradução livre).
10
Metaforicamente falando, é como se o UX Designer na criação de um carro fosse o
responsável pelo conforto, prazer, ou seja, pelo que você sente quando esta no carro, já
que todos os componentes tangíveis do carro fazem parte do UI Designer.
De acordo com UNGER (2002), para criar uma experiência satisfatória para o usuário o
UX Designer precisa entender como criar uma estrutura lógica e viável para uma boa
experiência, ele precisa conhecer o que o usuário precisa para criar uma “conexão” entre
usuário e produto.
Para criar um bom UX Design é necessário a utilização de outras áreas do design, como
o UI Design, arquitetura da informação, usabilidade, acessibilidade e design de interação.
2.2.1 UI DESIGN
Segundo UNGER (2002) UI Design é o desenvolvimento de interfaces para programas de
computador ou internet com foco na interação homem máquina. Um bom design de
interface de usuário facilita a conclusão de tarefas manuais sem chamar atenção
desnecessária para si.
De acordo com Jason Beaird (2008) em sua obra Princípios do Web Design Maravilhoso
sobre Web design, os efeitos especiais em uma interface servem “Para que se tenha a
impressão de que possuem diferentes níveis de profundidade, há inúmeras formas de
criar profundidade em uma interface, utilizando apelas luz e sombra”. (BEAIRD, 2008,
P76). O processo de design deve equilibrar funcionalidade técnica e elementos visuais para
criar uma interface que não é apenas operacional, mas também útil as necessidades do
usuário.
Segundo Jeff Johhson (2010) em sua obra Designing with the Mind in Mind sobre design
de cognação em interfaces, as pessoas “Quando estão navegando em softwares ou
websites, eles não examinam atentamente a tela, elas não leem cada palavra”.
(JOHHSON, 2010, P25, tradução livre) É comum pensarmos que as pessoas leem cada
11
palavra que existe no site, mas na realidade é como se o site fosse um “outdoor” e um
usuário estivesse passando a 200km por hora em seu carro, elas simplesmente não leem
tudo.
2.2.2 ARQUITETURA DA INFORMAÇÃO
De acordo com Unger (2002) a arquitetura da informação é o campo que estuda como a
informação e organizada usando disso para categorizar a informação e melhorar a
navegação. Dentro de um projeto de interface o arquiteto da informação é o responsável pela
criação de sitemaps detalhados e na montagem de categorias e subcategorias de um modo
amigável.
2.2.3 DESIGN DE INTERAÇÃO
Segundo Unger (2002), Design de Interação é a área responsável por definir o
comportamento da interface de acordo com as ações que o usuário executa na interface.
Dentro de um projeto de interface é comum que o Designer de Interação monte um fluxo de
tarefas entre as páginas ou componentes da interface para que o mesmo possa ter noção de
como será o comportamento dos componentes antes mesmo que a interface esteja em pleno
funcionamento.
2.3 INTERFACES GRÁFICAS PARA REDES SOCIAIS
Para Unger (2002) Uma rede social é uma aplicação baseada em tarefas, onde o usuário
precisa ser capaz de procurar e adicionar amigos, gerenciar seus perfis, se conectar e
também ser capaz de postar e buscar conteúdo.
12
Para criar uma interface gráfica para uma rede social é preciso ter em mente que o
usuário está ali para oferecer conteúdo e o designer tem a tarefa de facilitar ao máximo
esse processo, começando pela área de registro de um novo usuário, Crumlish (2009) diz
que a área de registro deve ser simples e colher o mínimo de informações possíve is para
que o usuário possa usufruir do serviço.
Após o registro de uma rede social necessitamos conceder meios para o que o usuário
encontre seus amigos de outras redes e que estão presentes nessa, afinal não se pode
esquecer que redes sociais são feitas de pessoas.
Depois de concluída essa fase, é necessário “ensinar” ao usuário como utilizar a
interface, para isso é necessário criar uma página de boas vindas com instruções
concisas e rápidas para que o usuário não perca muito tempo. Esta página funciona mais
ou menos como o manual de instalação rápida que vem com produtos atualmente. Após
isso o usuário estará finalmente apto a consumir e produzir conteúdo em nossa rede
social.
13
3 DESENVOLVIMENTO DO PROJETO
3.1 PESQUISA
Este projeto foi iniciado a partir de uma pesquisa feita com 112 usuários brasileiros que
utilizam das redes sociais facebook e twitter. Tal pesquisa teve como objetivo descobrir a
idade, a quantidade de homens e mulheres e seus gostos. E por isso o único parâmetro era
ser utilizador de rede social. A pesquisa foi feita através de uma enquete (Anexo I)
colocada no facebook.
Analisando a idade das pessoas entrevistados, foi observado que 38% destes usuários se
encontram na faixa etária de entre 21 à 31 anos; 28% entre 15 à 21 anos; 17% entre 31 à
41 anos; 10% tem mais de 41 anos. Sendo que 53% dos usuários entrevistados são do
sexo masculino e 47% do sexo feminino.
Os resultados das pesquisas apontam que, ao começar a utilizar a rede social facebook
40% dos usuários não sabiam qual era seu principal objetivo, enquanto 60% sabiam. Já
na rede social twitter as pesquisas mostram que 52% dos usuários sabiam qual era seu
objetivo, enquanto 48% não sabiam.
Figura 1 - Pesquisa em Gráfico 01
14
A pesquisa também aponta as dificuldades encontradas pelos usuários ao utilizar do
facebook, 45% dos usuários entrevistados encontraram dificuldades ao começar a utilizar
da rede, no twitter o numero é ainda maior 65% dos usuários tinham dificuldades. Entre as
dificuldades apontadas estão o excesso de informações e como sair da rede.
Figura 2 - Pesquisa em Gráfico 02
Outro fator considerado muito importante na pesquisa é a opinião do usuário, se caso ele
gostaria de adicionar algo novo ao facebook e o que ele adicionaria. Em resposta à
pesquisa, 36% dos usuários entrevistados gostariam da adição de um botão “não gostei”,
contrario ao botão “gostei”, 20% pediram modificações em funções já disponíveis como a
opção de ver vídeos pelo próprio facebook, e poder selecionar quem pode ver suas
mensagens.
Figura 3 - Pesquisa em Gráfico 03
15
Analisando os dados obtidos, foi possível perceber que mesmo os usuários não sabendo a
principio quais os objetivos das redes sociais, elas chamam a atenção. Uma grande
quantidade de usuários que usam a rede social, mas não sabem todos os recursos que ela
disponibiliza. Isso mostra a importância da interação oferecida pela interface para que todas
as funções da rede social sejam de fácil acesso ao usuário.
3.2 ANÁLISE E SELEÇÃO DE DADOS
A interface gráfica é o espaço onde acontece a interação entre o homem e a máquina, é
necessário que haja uma harmonia entre os elementos como cores, imagens e textos. É
através desta interface que o usuário produzirá, compartilhará e procurará conteúdo.
Para a criação da interface gráfica foram usadas referência de outras interfaces gráficas de
redes sociais. Analisamos vários elementos destas redes para saber o que poderia ser ou
não viável.
A seguir mostraremos duas analises de interfaces gráficas utilizadas como referência para
criação de nossa interface.
3.2.1 FACEBOOK
O Facebook é uma rede social que foi lançada em 4 de fevereiro de 2004, fundado por Mark
Zuckerberg e por seus colegas de quarto da faculdade. Inicialmente o site era limitado aos
estudantes da Universidade de Harvard mas foi gradativamente se expandindo para outras
universidades até abrir para qualquer pessoa acima de 13 anos. Em 4 de outubro de 2012 o
facebook atingiu a marca de 1 Bilhão de usuários ativos.
Para utilizar o facebook o usuário deve primeiro se registrar para criar seu perfil pessoal,
adicionar amigos e trocar mensagens. Os usuários têm a opção de participar de grupos de
interesses comuns entre eles. Umas das mais importantes contribuições do facebook foram
às notificações, antes, em outras redes sociais, quando alguém marcava uma pessoa em
16
uma foto ou falava da mesma em algum lugar essa pessoa deveria passar o link3 ou a
própria pessoa teria que procurar, as notificações do facebook avisam automaticamente
quando alguém marca uma outra em um post4 ou em alguma foto.
Desmembramos a interface gráfica da rede social facebook em varias partes para
identificarmos possíveis pontos fortes que poderíamos usar de refêrencia a nossa interface.
Percebemos rapidamente a quantidade enorme de informações dispostas na interface.
Notamos no cabeçalho a logo da rede social, um campo de busca, um atalho para seu profile
e uma seta para baixo com opções de configuração, para sair do facebook o usuário tem que
clicar na seta e selecionar a opção sair. Em uma de nossas perguntas aos usuários
perguntamos se tiveram alguma dificuldade ao começar a utilizar o facebook, “não conseguir
sair dele” foi uma das dificuldades, por isso acreditamos ser importante mostrar o botão de
“sair” bem a vista do usuário.
Figura 4 - Cabeçalho facebook
Figura 5 - Caixa de produção de conteúdo do facebook
3 Link é o "endereço" de um documento (ou um recurso) na web.
4 Post é o mesmo que artigo.
17
A “figura 5” mostra a principal ferramenta de criação de conteúdo oferecida pelo facebook,
esta é uma parte bastante importante para nossa rede social, que é voltada principalmente
para a produção de conteúdo. Percebemos rapidamente a aplicação do UX na caixa de texto
com a frase “What’s on your mind?”, falando que aquele lugar é onde deve se escrever o
usuário esta pensando para compartilhar com os amigos. A interface deve se comunicar com
o usuário a fim de direcionar rapidamente o pensamento do usuário para o que fazer,
pulando a parte de onde fazer.
As sidebars5 do facebook são grandes e confusas, principalmente a da esquerda que é
repleta de opções, podendo confundir o usuário. A sidebar da direita tem três campos, sendo
eles: as atividades recentes, os amigos e as fotos.
Figura 6 - Sidebars Facebook
5 Barras laterais
18
O facebook oferece a opção de tour pela sua timeline6 quando o usuário cria uma conta,
mostrando em três passos como adicionar foto, mudar informações pessoais e adicionar
historias. É importante ajudar o usuário a conhecer a interface em seu primeiro, diminuindo o
desgaste mental do usuário.
Figura 7 - Tour em 3 passos
A figura 8 nos mostra os passos de cadastro do facebook. O primeiro passo contém sete
campos para ser preenchido. O segundo passo é de grande importância para uma rede
social, ele possibilita importar amigos de outras redes sociais, diminuindo o fluxo de trabalho,
sendo este um dos conceitos de usabilidade. O terceiro passo pede para que o usuário
coloque algumas informações, que permitirá a rede social sugerir pessoal conhecidas. O
quarto passo serve para adicionar uma foto para seu perfil .
É importante percebermos que a partir do segundo passo, em todos o usuário tem a opção
de pular a etapa, podendo ir direto para a tela de boas vindas e começar a usar a rede social.
6 Área da interface do facebook onde mostra todos os posts do usuário e de seus amigos em ordem
cronológica.
19
Figura 8 - Passos de cadastro
3.2.2 TWITTER
O twitter é uma rede social que foi lançada em março de 2006 por Jack Dorsey, Evan
Williams e Biz Stone. Inicialmente era chamado de “Status”, tinha como ideia o envio de
mensagens curtas através do celular
20
Para utilizar o “twitter”, assim como em outras redes sociais, primeiro o usuário deve criar
seu profile. Depois do profile criado o usuário poderá “seguir” ou ser “seguido” por outros
usuários, enviar e receber atualizações de outros contatos, conhecidas como “tweets”. Essas
atualizações são exibidas no perfil do usuário em tempo real e também enviadas a outros
usuários seguidores que a assinaram para recebê-las.
Figura 9 - Profile twitter
Diferente do facebook o twitter tem uma interface menos carregada e mais simples, ela
contem poucos elementos. Como vemos na Figura 9, o profile do twitter apresenta cinco
campos. O campo numero um é o cabeçalho onde estão localizado alguns botões de
atalhos, o campo de busca, o botão de opção e um botão azul que abre uma caixa de texto
com o titulo “O que esta acontecendo?” onde o usuário escreverá o seu tweet como
podemos ver na Figura 10.
21
Figura 10 - Caixa de produção de conteúdo do twitter
O objetivo do twitter é o de passar mensagens rápidas, semelhantes a uma mensagem de
celular, por este motivo o usuários está limitado a enviar mensagens com no máximo 140
caracteres.
Ainda observando a Figura 9. Onde está localizado o número dois é um resumo do profile,
mostrando quantos tweets foram escritos, quantas pessoas se está seguindo e quantas a
segue, assim como um pequeno campo para criar um rápido tweet. O campo de número três
mostra os assuntos mais tweetados do momento. O campo número quatro sugere algumas
pessoas que talvez o usuário possa querer seguir. O campo número cinco é onde ficam os
tweets.
Figura 11 - Campo de cadastro Twitter
22
A Figura 11 mostra os passos para o cadastro na rede twitter. O twitter exige somente
informações essenciais como nome, e-mail e senha, como no passo numero um. Após clicar
em ‘Inscreva-se’, se o usuário já estiver preenchido o campo de nome de usuário e ainda
quiser mudar algumas das informações anteriores o twitter permite, e ainda fornece
feedback. Concluído essa segunda etapa só é necessário clicar no botão “criar minha conta”.
3.3 SITEMAP E WIREFRAME
Com base nas pesquisas realizadas, juntamente com as análises das outras redes sociais,
foram desenvolvidos o sitemap e o wireframe. Os processos de criação do sitemap e
wireframe são o ponto de partida para a criação da interface final.
Figura 12 - Sitemap
23
O sitemap é o mapa do site. Ele tem a função de nortear o projeto da interface, nele deve
conter cada página padrão que irá compor a interface, mostrando os caminhos que o usuário
poderá percorrer dentro da rede.
Após definir o “mapa” da rede social, é iniciada a criação de wireframes. O wireframe serve
para organizar os elementos que entrará na composição da interface final, no entanto, ela
deve ser feita da maneira mais simples possível, mostrando somente o essencial, elas são
uma espécie de rough da interface.
Utilizando as pesquisas fizemos um wireframe inicial contendo duas sidebars como mostra
na Figura 13, na sidebar da esquerda teria primeiro a foto do perfil, os fãs, as listas criadas e
itens, na sidebar da direita, locais para publicidade e mais dois lugares para conteúdo da
interface.
Figura 13 - Wireframe sidebars
24
No meio destas duas sidebars seria colocado a área de criação de conteúdo, a Figura 14
mostra os wireframes iniciais do processo de criação das listas, queríamos que o processo
que levaria a criação de uma lista pelo usuário não gastasse mais de três etapas. A Figura 15
mostra um wireframe da lista um pouco mais finalizado.
Figura 14 - Wireframe lista 1
Figura 15 - Wireframe lista 2
25
Para facilitar na visualização utilizamos um processo de prototipação que utiliza notas
adesivas coladas em um quadro, onde montamos um protótipo da interface. Buxton (2012)
justifica que como as notas adesivas vem em vários tamanhos, podendo também cortá-lo no
tamanho que precisar, podemos criar botões, caixas de diálogos, menus e ícones. Com este
tipo de prototipação temos a liberdade de mudar a posição dos frames a nosso gosto, isso
ajuda a ter uma visão melhor do protótipo.
Figura 16 - Prototipação com sticknotes
26
Figura 17 - Wireframe final
Depois destes processos de criação levamos os roughs para o computador para serem
finalizados. Nesta etapa retiramos a sidebar direita, e aumentamos a sidebar esquerda,
chegando assim no wireframe final como mostra na Figura 17.
27
3.4 PRODUÇÃO
Utilizando dos sitemap e wireframe apresentados no item anterior, foi iniciada a produção do
mockup7. Nesta etapa são adicionados ao wireframe as cores, tipografia, texturas e
elementos gráficos a fim de obter a interface gráfica final.
3.4.1 GRID E COMPOSIÇÃO
O grid segundo BEAIRD (2009) é um sistema que apresenta linhas proporcionais na
horizontal e vertical que formam uma grade base que tem a função de auxiliar na
composição dos elementos gráficos e textuais de um website.
Utilizando de conceitos propostos por BEAIRD (2009) foi desenvolvido um grid para a
interface da rede social com a finalidade de obter uma melhor composição e alinhamento dos
elementos gráficos e textuais distribuídos na mesma.
Figura 18 - Grid da rede social
7 Mockup é uma maquete em tamanho natural
28
Grandes redes sociais como facebook e twitter atualmente usam em suas composições
grids para organizar seus conteúdos. O facebook usa um grid que apresenta estrutura
tradicional com cabeçalho e sidebars esquerda e direita com a área de conteúdo ao centro.
Figura 19 - Grid do facebook
Já o twitter em sua versão atual, vem com uma proposta de grid que apresentar uma
estrutura mais limpa que o facebook, atualmente ele possui cabeçalho, sidebar a esquerda e
conteúdo a direita. Vale observar que como a linha do tempo nessas redes tende ao infinito
elas não possuem ou mostram seus rodapés
.
Figura 20 - Estrutura twitter
29
Decisões como essa de retirar ou esconder o rodapé, utilizar uma ou duas sidebars fazem
parte dos princípios básicos do design apontados por WILLIAMS (2009) onde ele diz que
nenhum elemento deve ser colocado arbitrariamente em uma página.
Figura 21 - Cabeçalho toplist
Seguindo este conceito, analisamos o posicionamento de cada elemento na interface. No
cabeçalho, alinhada a esquerda apresentamos a logomarca da rede social a mesma foi
colocada nessa posição pois segundo BEAIRD (2009) este é o primeiro lugar onde um
ocidental olha ao navegar pelo site desta forma o uso da marca neste local serve para o
usuário identificar rapidamente em qual site está.
Esta regra não se aplica tanto com a globalização. Redes sociais como facebook e twitter
usam o mesmo posicionamento e tem muita presença no oriente, no caso desse tipo de
leitura aparentemente eles fazem a leitura do site de modo ocidental, justificando deste modo
o uso da marca da rede social neste local.
Abaixo do cabeçalho, no lado esquerdo da interface temos uma sidebar. O primeiro item da
sidebar são os fãs, basicamente eles funcionam como os “amigos” ou seguidores de outras
redes sociais. Além disso, alinhado à direita do titulo, temos a opção de exibir todos os
amigos, que é indicada pela palavra “mais”.
O segundo item da sidebar são as listas populares, contendo a lista de top 10 que os
usuários mais gostaram, o terceiro item da sidebar se trata dos últimos itens adicionados na
listas, inicialmente ele exibe os últimos três conteúdos criados, com um botão “mais” para
exibir todos.
30
Figura 22 - Sidebar toplist
O último item da sidebar são os comentários. Nesse item são mostrados os últimos 3
comentários que você recebeu em suas listas, sendo esta uma opção para acompanhar o
feedback de seus fãs.
31
Cerca de 60% da rede social é composta pela área de conteúdo e por sua importância na
rede social, segundo uma pesquisa encomendada pela empresa norte americana Mashable
a empresa EyeTrackShop os lugares onde as pessoas mais focam sua atenção em uma
rede social é o conteúdo e a foto do profile sendo que no conteúdo elas focam principalmente
nas duas primeiras postagens.
Figura 23 - Mapa de calor
Analisando os mapas de calor do facebook e twitter, percebemos que de fato o conteúdo
deveria ser a área de maior destaque na rede social, O conteúdo é apresentado em dois
modos sendo eles: Perfil e Linha do Tempo."
32
\
Figura 24 - Linha do tempo
No modo perfil clicando no botão “+add item” de qualquer lista você pode facilmente
adicionar novos itens a uma lista existente ou clicar no ícone lápis para editar uma lista
existente, também no rodapé de cada lista existe a possibilidade de verificar quantos itens
ela tem, quantas pessoas visualizaram quem criou e quantas “respostas” a lista teve. O
modo perfil é individual a cada usuário e também possibilita, a qualquer momento, a edição
de informações como nome, biografia e url8.
O outro modo da área de conteúdo é a linha do tempo esta área é um lugar para consumir o
conteúdo criado pelos seus amigos ou fãs, e dispõe das últimas postagens das listas em
ordem decrescente por data de criação, essas listas podem ficar em dois estados abertas ou
fechadas.
8 Endereço de um site.
33
Em uma lista aberta criada por um amigo ou fã ou outro usuário você tem a possibilidade de
gostar ou não de uma ideia usando o recurso da lâmpada acesa ou apagada, é possível
também criar uma lista em resposta a lista do seu amigo ou fã ou outro usuário clicando no
ícone de exclamação ou também compartilhar ou seguir a lista, além de poder comentá-la.
Para essas funções serão utilizados os ícones que estão dispostos na área inferior de
qualquer lista aberta.
As posições de cada item na lista aberta foram criadas usando efeito Gradiente e
representação em perspectiva dando a impressão de profundidade. Podemos observar que o
cabeçalho de uma lista aberta fica ligeiramente mais escuro que uma lista fechada,
justamente para aumentar ainda mais o contraste do topo em relação aos itens da lista.
Figura 25 - Nova lista
Um ponto em comum na região de conteúdo do perfil e linha do tempo é a área de
publicação de conteúdo, que se encontra no centro da área de conteúdo, é por ela que
começamos uma nova lista preenchendo os campos contendo: título da lista e uma breve
descrição do que é a lista. Após preencher basta clicar em criar e começar a adicionar
conteúdo, a mesma também dispõe de um recurso que permite que sua lista seja publica,
onde todos possam ver, ou pessoal, que somente o usuário pode ver.
Esse item segue do padrão gráfico dos demais na rede social pois isso ajuda a conferir a
lista uma unidade visual e organização seguindo o principio básico da repetição apontado por
WILLIAMS (2009) que afirma que algum aspecto do design deve repetir-se no material
inteiro. O elemento repetitivo pode ser um fonte um estilo um efeito visual um item ou
qualquer outro elemento.
34
3.4.2 CORES
Em nossas pesquisas sobre cores nos fundamentamos em combinações de cores análogas
e na combinação de cores monocromáticas em modo RGB segundo BEAIRD (2009) as
cores exibidas em telas baseiam-se em um modelo de cores aditivas, nesse modelo as cores
são exibidas em porcentagens de vermelho, verde e azul. Por isso do inglês R representa
red que significa vermelho, G representa green que em português e verde e B que
representa o blue que em português é o azul.
Como grupo das cores principais foi escolhido cores análogas pois as mesmas segundo
SOUZA (2009) produzem uma sensação de uniformidade na interface contribuindo assim
para uma melhor usabilidade; Sobre cores análogas BEAIRD (2009) fala que é um esquema
de cor que consiste em cores adjacentes umas ás outras na roda de cores, e no caso de
esquemas monocromáticos eles consistem em uma única cor base e suas tonalidades e de
acordo com SOUZA (2009) esse tipo de combinação ajuda a ressaltar e uniformizar o
conteúdo em uma interface. Na rede social trabalhamos com uma tonalidade roxa e outra
vinho como base principal da interface e como apoio um cinza escuro e sua tonalidades mais
claras.
Figura 26 - Paleta de cor
35
Nossa escolha de cores foi feita não somente por estética, mas também por motivos de
acessibilidade, essas cores, ao serem sobrepostas, precisam contrastar para gerar uma
legibilidade e leiturabilidade não somente para quem as enxerga bem, mas também para
pessoas com deficiências na visão. A paleta tem como cor base o roxo que segundo
PEDROSA (2009) esta associada à grandeza, o acaba sendo representado pelo nome da
rede social que é “TopList”, a palavra “Top” significa o ponto mais alto, a melhor, sendo assim
carregando o significado de “melhor lista”.
3.4.3 TIPOGRAFIA
A tipografia é de grande importância em uma interface, contudo quando falamos de uma
interface da web surgem algumas complicações para a escolha de uma “fonte segura”, de
acordo com BEAIRD (2009) fontes seguras são fontes que estão teoricamente presentes em
todos os computadores, a caráter de exemplo ele cita famílias de fontes como a Arial,
Georgia, Impact, Myriad Pro, Tahoma, Trebuchet MS, Verdana entre outras; Se a escolha da
fonte não for uma considerada "segura", e a fonte escolhida não estiver no computador de
quem acessa o seu site, eventualmente não irá aparecer nada no lugar onde deveria ter o
texto. Analisando essas variáveis optamos por duas “fontes seguras”: a Tahoma e Myriad
Pro para a construção de nossa interface gráfica.
3.4.3.1 MYRIAD PRO
A fonte Myriad Pro foi a escolha para ser utilizada em texto corrido, segundo TYPEKIT (2012)
ela foi desenhada por Robert Slimbach & Carol Twomblye e é conhecida pela sua
leiturabilidade, leiturabilidade9 essa que não deve ser confundida com legibilidade10.
BRINGHURST (2005) afirma que uma fonte pode ser legível sem necessariamente ter uma
boa leiturabilidade e o contrario também é valido.
9 Leiturabilidade: diz respeito à facilidade com que o olho absorve a mensagem e se move ao longo da linha.
10 Legibilidade: diz respeito à facilidade com que uma letra pode ser distinguida de outra.
36
De acordo com a TYPEKIT (2012) a Myriad PRO é uma fonte ideal para grandes
quantidades de textos pois possui bons pares de kerning, de acordo com BEAIRD (2009)
kerning é o processo de ajuste do espaço entre letras individuais, onde, a maioria das fontes,
apresentam um conjunto de regras que determinam o espaçamento entre os caracteres.
Figura 27 - Fonte Myriad
3.4.3.2 TAHOMA
Para os menus e títulos, escolhemos a Tahoma, que de acordo com MICROSOFT (2012)
pertence a uma família sem serifa de grande legibilidade que foi desenhada por Mathew
Carter, de acordo com BRINGHURST (2005) fontes sem serifa são fontes sem os traços que
são adicionados no inicio ou nas terminações de um desenho de uma letra. A Tahoma por
ser uma fonte sem serifa criada para monitores de computador, se encaixou muito bem em
nossa proposta para os títulos e menus da rede social pois é um produto que funciona
melhor em meio digital.
37
Figura 28 - Fonte Tahoma
3.4.4 TEXTURA
Foi adicionada uma leve textura de papel para remeter a uma ideia de lista, normalmente
antes dos computadores listas eram feitas em papel, por isso a ideia de textura de papel para
a interface, a textura humaniza a interface e também a deixa mais refinada e elegante.
De acordo com BEAIRD (2009) textura é qualquer elemento capaz de imprimir à superfície
do design ou objeto uma aparência ou aspecto distinto. Com o uso da textura temos a
possibilidade de transmitir ao usuário sensações especificas, como no caso da rede social
descrita neste trabalho: o papel.
3.4.5 ELEMENTOS GRÁFICOS
Os elementos gráficos da rede social são utilizados para transmitir as ideias essenciais das
mensagens de forma clara e direta, facilitando o entendimento das mensagens pelos seus
destinatários.
38
3.4.5.1 RATING
Nas redes sociais os ratings servem para mostrar se seus amigos ou outros usuários da rede
gostaram do seu post, criando maior interação entre usuários e também servindo como
incentivo à criação de mais conteúdo.
O botão de rating é uma peça importante na interface, pois é a principal ferramenta de
incentivo a criação de conteúdo. No facebook usam a imagem do polegar levantado para
cima para dar o “like” no post, no Instagram11 usam a imagem de um coração e no youtube
eles também usam a imagem do polegar para cima para dar o “like”12, mas diferente do
facebook eles tem um “i dont like”13 representado como um polegar para baixo.
Figura 29 - Ratings de outras redes sociais
A rede social criada neste trabalho tem como principal objetivo a criação de listas. Após
pesquisas tivermos a ideia de usar a lâmpada, o símbolo da lâmpada remete a ideia. A
lâmpada acesa indica que o usuário “gostou” da ideia, ou seja, que o usuário gostou da lista,
a lâmpada apagada indica que o usuário “não gostou”.
Figura 30 - Toplist Rating
11
Rede social com tema fotográfico para dispositivos moveis. 12
Significa “gostar” em inglês. 13
Significa “eu não gosto”.
39
3.4.5.2 ICONES
De acordo com BARRY (2009) Design de Interface deve comunicar, não importa o quão
interessante a informação seja, que você está comunicando, se o website não for
visualmente atraente, os usuários não irão começar a ler as informações. Com intuito de
agregar o conceito de diminuir o fluxo de trabalho e leitura, usamos os ícones sem o
acompanhamento de texto.
BARRY (2009) diz que o principal objetivo do uso de ícones deve ser o de ajudar o usuário a
absorver e processar informações de modo mais eficiente dando-lhes mais consistência e
permitindo assim uma comunicação eficaz sem necessariamente usar palavras. Entretanto
não excluímos completamente as palavras elas estão presentes, mas para que elas
apareçam o usuário deve colocar o cursor do mouse em cima do ícone.
Figura 31 - Botões reagindo ao mouse
Com relação à construção gráfica dos ícones, eles foram pensados para serem o mais
simples possível, comunicar sem palavras e ficar em harmonia com a identidade limpa
adotada pela interface, no total foram utilizados seis ícones. Sendo que dois deles são
imutáveis, pois um, o de “compartilhar” pertence à empresa Share This, e o outro, o símbolo
de feed, está muito difundido na web e nas redes sociais é usado para seguir listas de
interesse.
40
Figura 32 - Rough icones
Os demais são os ícones “responder” com a função de criar respostas a uma lista, o
“editar” no caso de listas do próprio usuário, a “lixeira” que representa apagar uma lista,
item ou comentário e o “adicionar comentário" que tem a função de adicionar um
comentário.
Figura 33 - Ícones toplist
41
3.4.6 A EXPERIÊNCIA
Uma interface com um bom “UX Design” deve dar uma feedback14 antes e depois do usuário
executar uma ação, o ideal é que o site converse o tempo inteiro com o usuário, não
deixando o mesmo perdido. O UX também abrange a acessibilidade em nossa interface,
sendo que a mesma passou por alguns testes de contraste para identificarmos possíveis
dificuldades que deficientes cromáticos poderiam enfrentar ao usá-la.
Figura 34 – Feedback
No cadastro resolvemos colher a menor quantidade possível de dados do usuário, dando a
possibilidade do mesmo pular várias etapas do processo, pois usuários normalmente tem
aversão ao preenchimento de grandes formulários e, obrigá-los a isso poderia ocasionar a
desistência do mesmo antes mesmo de entrar em nossa rede social. A ideia é que se usuário
gostar da rede, naturalmente preencherá esses dados mais tarde.
14
Feedback é o retorno de uma ação.
42
Um outro problema que se trata de UX Design é o já discutido botão “sair” os webmasters
tendem a querer manter os usuários o máximo de tempo possível em seus sites, contudo
esconder o botão de sair não é o melhor modo de fazer isso, existem outros meios de
prender os usuários em sua rede, caso contrário estará proporcionando uma experiência
ruim para o usuário em sua interface.
Se o foco da rede se trata de produção de conteúdo, devemos tornar o melhor possível a
experiência de criar uma lista agradável para nossos usuários, deixando todos os itens da
mesma o mais claro possível para que ele possa adicionar e editar listas e itens a qualquer
momento
Figura 35 - Teste de contraste
43
3.5 PRODUTO FINAL
Depois de feito a escolha de todos os elementos visuais que compõe a interface, foi iniciado
a construção de um mookcup de média fidelidade, que seria uma interface concluída em sua
parte visual, mais sem a implementação da programação.
Figura 36 – Homepage
44
Figura 37 - Profile
45
Figura 38 - Linha do tempo
46
4 CONCLUSÃO A produção desse trabalho foi bastante enriquecedora, pois o campo de Interfaces para rede
sociais ainda é muito novo e relativamente desconhecido, contudo tendo como suporte
estudos de UX Design específicos ou não para esse tipo de interface gráfica, pesquisa com
usuários de redes sociais e conceitos gráficos apreendidos durante curso, conseguimos
atingir resultados bastante satisfatórios em nosso projeto, acreditamos que criamos uma
interface limpa e simples que atende perfeitamente a proposta para a qual foi criada.
Buscamos ao máximo trazer os conceitos de usabilidade e acessibilidade, também
mantemos a máxima de que a interface deve dar feedback o tempo inteiro para o usuário
como é acordado em UX Design.
Aplicamos uma metodologia fortemente utilizada em projetos de aplicações para web e a
mesma se mostrou satisfatória e eficaz na produção da interface desde o sitemap até o
protótipo final. Contudo durante o projeto encontramos algumas dificuldades para atingir
nosso objetivo, pois teoricamente precisávamos de um período de testes maior para que a
interface fosse 100% aprovada, durante esse período poderíamos observar por mais tempo o
comportamento dos usuários diante de um protótipo de alta fidelidade para fazer ajustes e
modificações para adaptarmos ainda mais a interface às necessidades dos usuários.
Nada obstante os resultados obtidos no projeto superaram as expectativas, os elementos
gráficos como a lâmpada, os ícones e a função de “resposta” deixam muito claro que o foco
da rede é a produção de conteúdo de um modo simples e eficiente
47
5 REFERÊNCIAS BIBLIOGRÁFICAS
BEAIRD, Jason. Princípios do Web design maravilhoso. Rio de Janeiro: Alta Books, 2008.
BRASIL, Agência. Metade da população possui acesso à internet. Disponível em:
<http://info.abril.com.br/noticias/internet/metade-da-populacao-possui.shl> Acesso em: 12 de
Out. 2012.
BUXTON, Bill. Sketching User Experiences. Massachussets: Elsevier, 2012.
CRUMLISH, Christian. Designing Social Interfaces. Cambridge: O'Reilly Media / Yahoo
Press, 2009.
CUMMINGS, Michael. What is UX?. Disponível em: <http://UXdesign.com/about-user-
experience-design/article/what-is-UX/4> Acesso em: 6 Mai. 2012.
ISO (1997). ISO 9241-11: Ergonomic requirements for office work with visual display
terminals (VDTs). Part 11 — Guidelines for specifying and measuring usability. Gènève:
International Organisation for Standardisation.
JOHHSON, Jeff. Designing with the Mind in Mind. Burlington: Elsevier, 2010.
KRUG, Steve. Não me faça pensar. Rio de Janeiro: Alta Books, 2006.
LEWIS, C., RIEMAN, J. Task-centered user interface design: a practical introduction. 1993-
1994. Disponível em: < http://www.hcibib.org/tcuid/> Acesso em: 1 Jul. 2012.
NIELSEN HOLDING N.V. The Social Media Report 2012. Disponível em <
http://blog.nielsen.com/nielsenwire/social/2012/> Acesso em: 03 Dec. 2012.
NORMAN, Donald. O Design do dia-a-dia. Rio de Janeiro: Rocco, 2006.
48
MASHABLE Inc. Here's How People Look at Your. Disponível em <
http://mashable.com/2011/11/30/social-profile-eye-tracking/#36375YouTube/> Acesso em: 03
Dec. 2012
MCELHEARN, Kirk. The Mac OS X Drawer: A Badly User Interface Element. Disponível
em <http://www.mcelhearn.com/2006/07/29/the-mac-os-x-drawer-a-badly-designed-user-
interface-element/> Acesso em: 02 Dec. 2012
MICROSOFT Corp. Tahoma. Disponível em <
http://www.microsoft.com/typography/fonts/family.aspx?FID=19> Acesso em: 03 Dec. 2012.
MEMÓRIA, Felipe. Design para a Internet: projetando a experiência perfeita. Rio de
Janeiro: Campus/Elsevier, 2005.
PEDROSA, Israel. Da Cor a Cor Inexistente. Rio de Janeiro: Senac, 2009.
SOUZA, Otavio. Materiais para sites da web. Disponível em
<http://www.otaviosouza.com/materiais_sitewebb.html> Acesso em 09 Dec. 2012.
TYPEKIT Inc. Myriad PRO. Disponível em <https://typekit.com/fonts/myriad-pro/> Acesso
em: 03 Dec. 2012.
UNGER, Russ. A Projetct Guide to UX Design. Second Edition. Barkeley: New Readers,
ISBN 978-0-321-81538-5., 2002. Kindle Version, location 409-697.
VAN AMSTEL, Frederick. Afinal o que é usabilidade. Disponível em <
http://usabilidoido.com.br/afinal_o_que_e_usabilidade.html> Acesso em: 18 Ago. 2012.
WILLIAMS, Robin. Design Para Quem Não é Designer: Noções Básicas de Planejamento
Visual. São Paulo: Callis, 2009.
49
6 ANEXOS
Anexo I – Formulário de pesquisa
Anexo II – Referencias de Listas
50
51
52