Relatório - Design de Interfaces

Prévia do material em texto

Relatório - Design de Interfaces
Nome: Gabrielle Macarty Professor: Patrícia Thormann
 1
Introdução
Focado em buscar soluções para todas as áreas, tanto profissional quanto 
na área de entretenimento. O maior foco do design de interfaces é a 
responsividade dos sites e aplicativos.
Neste caso foi optado trabalhar com a Resgatinhos, uma ONG que busca 
resgatar e reabilitar gatos de rua de Porto Alegre. 
A Resgatinhos recebe ajuda de parceiros e doadores com dinheiro, ajuda em 
despesas e com doação de mantimentos como roupas, alimentos, areia, 
remédios , etc. O projeto idealiza poder criar um site informativo e de fácil 
acesso para quem quer adotar os gatinhos ou ajudar a ONG a continuar 
exercer seu trabalho.
Palavras-chave: ONG, gato, interface e adoção.
Briefing
O Briefing foi criado com base nas necessidades da ONG. 
No em tando, como não houve um contato direto com a Resgatinhos, foi feita 
uma análise em cima das redes sociais, interatividade dos seguidores e os 
locais que as pessoas que mais interagem moram e frequentam.
A página utiliza de imagens, textos e pictogramas em conjunto de palavras 
para gravar melhor os significados.
O site possui informações sobre adoção, o que fazer quando se encontra um 
animal de rua, eventos, doações e doações de mantimentos.
Temos no menu suspenso logo em cima onde tem centrado a logo da ONG 
e na lateral direita a cima possui um menu hambúrguer, que, quando 
selecionado dá a opção de poder ser redirecionado para as outras páginas 
dentro do site.
Análise das outras ONGs
Para poder criar uma página interessante e que chame a atenção do 
adotante, foi crucial poder analisar alguns sites de outras ONGs e como eles 
trabalham a questão de adoção e arrecadação de doações para os gatinhos.
Pode-se perceber que os sites possuíam uma linguagem bem informal com 
os usuários, oque facilita a adoção e a empatia na hora de adotar um ou 
mais animais.
 2
A maior parte dos sites teve um diferencial que foram as informações 
rápidas, informações que conseguiram ser captadas com um breve scroll de 
mouse.
As tipografias também são bem legíveis e permitem que o usuário consiga 
entender claramente o que se passa no site.
Possuem uma estética e design minimalista o que muitas vezes é bom em 
questões de informação e de rápida aprendizagem do usuário na hora de se 
guiar nas abas do site.
Personas
A ideia inicial foi trabalhar com dois tipos de usuários, um experiente e um 
inexperiente. Buscando entender as facilidades e principalmente as 
limitações de cada usuário na hora de utilizar a interface.
O usuário inexperiente tem um pouco mais de dificuldade em compreender 
pictogramas e sinais dentro do site, afina não estão familiarizados com tais e 
nem possuem uma grande convivência com esse tipo de comunicação. 
Já o usuário experiente tem plena noção sobre pictogramas e sinais, com 
isso o usuário possui mais afinidade com o sistema e consegue navegar de 
forma mais tranquila pelo site.
Então, foi optador por juntar os dois usuários e transformar em um mediano, 
onde tem noção do que se quer, porém, não sabe se guiar sozinho. 
Pensando nisso, surgiu a ideia de pictogramas com o apoio de texto, ou seja, 
os pictogramas estariam com uma “legenda” oque possibilita o usuário a se 
inteirar melhor sobre, e entender oque aquilo significa.
Conteúdo
O principal conteúdo apresentado ficou divido em 4 páginas, sendo uma 
delas a “home” inicial que levaria para as outras 3 páginas.
Home onde conta a história da ONG, subseguindo em três botões dentro da 
home temos: 
Quero adotar — Temos um formulário onde o adotante conta um pouco 
sobre si e, porque gostaria de adotar, coloca seus dados pessoais e lê um 
pouco sobre o que é necessário ter para adotar um animal.
 3
Quero ajudar — Nessa página vemos 4 opções que uma pessoa pode ter na 
hora de escolher ajudar a ONG. Temos a opção de depósito em questão de 
ajuda financeira. Opção de doações de mantimentos, onde você pode doar 
remédios, comida , etc. Temos a opção de ser um voluntário e a opção de 
ser uma empresa apoiadora, onde ma porcentagem do que se vende é 
destinado para a ONG.
Sobre resgate — Nessa tela possui informações para pessoas que 
encontraram um animal de rua e não sabem como ajudar ou qual o próximo 
passo na hora de ajudar. Lá também consta informações sobre maus tratos, 
telefones para ligar caso veja algum animal sofrendo.
Seguindo no meu suspenso temos as opções de “adoção especial, adoção, 
janela de confirmação de inscrição, contatos, eventos e newsletter”.
Mapeamento
Foi pensado de forma que atingisse o máximo de cliques do usuário, para 
mantê-lo inserido no site. A característica principal do site é fazer o usuário 
chegar nas adoções e doações.
 4
Layout
Com os dois conceitos principais estabelecidos, que são o amor pelos 
gatinhos e o tratamento mais humanitário dentro do ambiente virtual. A 
linguagem utilizada em quase todo o site foi informal, para deixar os usuários 
mais a vontade. 
Já nas cores, foi utilizado o rosa que é uma cor chamativa e também uma cor 
quente. Em conjunto com essa cor foi utilizado o bege para dar contraste e 
harmonizar. Outra cor como o cinza foi utilizado para dar balanceamento de 
uma tríade.
A tipografia utilizada para títulos e alguns subtítulos foi a “Kavoon” uma 
tipografia serifada. Tendo variações de tamanho dentro das letras, o que dá 
o aspecto de algo menos formal.
A segunda tipografia utilizada para todos os textos foram a “Roboto” simples. 
Ela deu uma harmonizada e trouxe mais seriedade para os textos, o que 
trouxe equilíbrio. Às duas fontes em conjunto funcionam muito bem, a 
“Kavoon” chama a atenção do leitor para o título e a “Roboto” traz facilidade 
na hora da leitura.
Foi utilizado um menu “sanduíche” em overlay nas páginas. Podendo ser 
aberto e ocultado no momento que quiser. O menu é bem simples, não 
possui pictogramas, apenas o nome de cada sessão. Os títulos das sessões 
estão em cinza o que contrasta na hora que o usuário for abrir. Como o site é 
bem informativo, e procura conscientizar o adotante e as pessoas que fazem 
doações para a ONG, não foi possível utilizar pouco texto. Porém, temos a 
noção de que o usuário que entrar no site estará lá para se informar e ajudar. 
A maior parte dos textos são em cinza com o fundo em bege transparente, 
para ter uma boa visibilidade. Porém, o texto da página “home” possui o 
fundo rosa com as letras em bege. Para dar contraste e ser chamativo na 
hora que o usuário entrar na página.
Na aba de adoção e adoções especiais, foi optado por trabalhar com 
pictogramas que indicam se o animal é mais “amável, sociável e brincalhão.” 
Em conjunto com os pictogramas tem em baixo uma legenda, que diz 
exatamente o que cada um significa. Então, temos a foto de um gatinho e do 
lado ele possui um coração e um novelo de lã, isso significa que ele é 
amável e brincalhão. 
Logo abaixo da foto existe o botão de “adotar” que redireciona para a página 
de formulário a ser preenchida para a adoção do gatinho.
O site conta com uma página de eventos da ONG ou eventos em que a ONG 
participará.
 5
Considerações Finais
Analisar a ONG e seus usuários foram essencial para desenvolver um lugar 
acolhedor e informativo ao mesmo tempo.
A experiência dousuário tem banho cada vez mais enfase no mundo digital, 
afinal o cliente tende a voltar mais vezes quando é bem atendido.
Referências
Eva Heller — Psicologia das cores
Think With Google — UX, Experiencia do usuário
Think With Google — Usabilidade