• Nenhum resultado encontrado

Estágio Curricular Significa

N/A
N/A
Protected

Academic year: 2021

Share "Estágio Curricular Significa"

Copied!
66
0
0

Texto

(1)

Egg

Yolk Folk

Lisa Marrucho Cosme

Relatório de Estágio — MDGPE

Orientador — Miguel Carvalhais

eggyolkfolk.cosme.pt

(2)

2

Agradecimentos

À minha família,

Ao meu orientador,

À Significa,

agradeço aos meus pais, irmãos, pais “emprestados”, avós, tios, primas e Gil por acompanharem o meu percurso académico sempre de perto, por ampararem as minhas quedas e pela confiança transmitida em qualquer ocasião.

ao professor Miguel Carvalhais, estou grata pelos conselhos, ensinamentos, dedicação e disponibilidade desde o início ao fim desta experiência.

obrigada pela confiança que me foi depositada, por acreditarem que eu poderia vir a evoluir e a crescer, tanto a nível profissional, como a nível pessoal. Um agradecimento especial ao Frederico pelas ilustrações.

À Marta, Júlia e Vasconcelos,

o meu muito obrigada pela companhia, amizade, ajuda e acima de tudo paciência. Obrigada por me proporcionarem cinco anos de puras gargalhadas.

(3)

3

Resumo

Este relatório enquadra-se no âmbito do estágio curricular para a conclusão do Mestrado em Design Gráfico

e Projetos Editoriais, pela Faculdade de Belas Artes da Universidade do Porto (FBAUP), que decorreu na Agência Digital Significa durante cinco meses.

A Significa é uma empresa focada no design de interação e no desenvolvimento de produtos através de soluções elegantes e simples.

O estágio teve como principal foco o design de interação, com o objetivo pessoal de tornar percetível a principal diferença entre o mesmo e o design gráfico. O documento pormenoriza a minha aprendizagem e progresso através dos projetos desenvolvidos e das competências adquiridas no percurso. Os projetos realizados permitiram-me

conhecer o processo da empresa, contactar diretamente com diferentes clientes e culturas, munir-me de novas e melhores ferramentas de trabalho, metodologias e soft-skills.

Considerei a realização deste estágio especialmente interessante e enriquecedora, tanto a nível profissional como pessoal, fundamentalmente pela execucação prática das atividades em que me vi envolvida mas, também, pela sua componente transversal, pelo conhecimento

e experienciação do exigente, complexo e cada vez mais volátil mercado de trabalho.

Palavras-Chave

Design de Interação; Produto; Processo; Competências; Significa.

(4)

4

Keywords

Interaction Design; Product; Process; Skills; Significa.

Abstract

This report is part of the curricular internship for the conclusion of the Master’s degree in Graphic Design and Editorial Projects at Faculdade de Belas Artes da Universidade do Porto, which took place at the digital agency Significa for five months. Significa is a digital design-led agency focused on product development through elegant and simple solutions.

The internship focused on interaction design, with the personal goal of making visible the main difference between it and graphic design. The document details my learning process and progress through the projects developed and the skills acquired along the way. The projects carried out allowed me to know the company’s modus operandi, to contact directly with different customers and cultures, to provide me new and better work tools, methodologies and soft skills.

I found this internship especially interesting and enriching, both professionally and personally, primarily for the

practical execution of the activities I was involved in, but also for its cross-sectional component, for the knowledge and experience of the demanding, complex and increasingly volatile labour market.

(5)

5

Índice

Introdução 1. História 2. Competências 2.1 Processo 2.2 Competências Adquiridas 2.2.1 Perceber o Problema 2.2.2 Pesquisa 2.2.3 Wireframes

2.2.4 Testes de Usabilidade Iniciais 2.2.5 Mood-Board

2.2.6 Look and Feel 2.2.7 Styleguide 2.2.8 Sistematização 2.2.9 Design Final 2.2.10 Prototipagem 2.2.11 Novos Testes 2.2.12. Quality Assurance 2.2.13 Entrega Conclusão Bibliografia e Referências 03 07 40 41 42 43 45 46 47 48 49 52 53 55 56 58 61 62 63 65

(6)

6

Introdução

O presente relatório foi realizado no âmbito do Mestrado em Design Gráfico e Projetos Editoriais da Faculdade de Belas Artes da Universidade do Porto. Descrevo o estágio curricular, com a duração de cinco meses, realizado na Agência Digital Significa.

Tanto na Licenciatura em Design e Multimédia

na Faculdade de Ciências e Tecnologias da Universidade de Coimbra, como no corrente Mestrado, o design

de interação foi a vertente menos aprofundada. Tendo isto em mente, o objetivo deste estágio foi compreender e aprender mais sobre o design de interação, a usabilidade e as metodologias de projeto para meios digitais.

Surgiram-me questões como: “Qual a verdadeira diferença entre design gráfico e design de interação?”, “Qual é o programa utilizado para trabalhar?”, “Como funciona o programa?”, “Qual é o objetivo do Design de Interação?”, “Qual a diferença entre Experiência de Utilizador (UX) e Interface do Utilizador (UI)?”.

O livro About Face (Cooper et al., 2014) colocou-me a par de alguns conceitos fundamentais do design de interação, bem como o seu significado: O design de interação, dentro das outras vertentes do design, é o que está mais preocupado em satisfazer as necessidades e desejos das pessoas que irão interagir com o produto ou serviço. De forma a corresponderem às narrativas dos utilizadores, os produtos, para além de comportamentos próprios, devem responder também a um nível mais humano. Ao candidatar-me a um estágio na Significa, esperava encontrar a resposta a todas as questões que surgiram. E encontrei. Felizmente, não apenas para estas, mas muitas outras que surgiram durante o trabalho e fico contente por perceber que existe um longo caminho a percorrer, que ambiciono conhecer.

Este relatório está dividido em duas partes: 1) a história do estágio e a minha evolução através dos projetos; 2) as competências adquiridas através desses projetos.

(7)

7

1.

História

Ao realizar a Licenciatura em Design e Multimédia, e, apesar de ingressar no Mestrado de Design Gráfico e Projetos Editoriais, o meu interesse pela vertente digital nunca deixou de existir. O meu desejo de aprender mais sobre design de interação evoluiu ao longo do tempo e achei que a melhor maneira para poder crescer nessa área seria realizar um estágio curricular.

Efetuei uma lista de empresas onde gostaria de estagiar, que ordenei pela qualidade de trabalho, 1 localização e pelo quão poderia aprender e enviei o meu currículo e portfólio para todas. Confesso que a Significa não foi a minha primeira escolha, talvez também por não se publicitarem da mesma forma que as outras agências digitais, algo que, ao ler um artigo no Medium, atribui imenso valor: “Também se pode dizer que aqueles de que nunca ouvimos falar — esses foram os sortudos. Não foi divertido ser o chefe de estado. Também não foi divertido ser executado por um chefe de estado. Não foi assim tão divertido ser Rockefeller, Kennedy ou Lance Armstrong.” 2 De seguida, a Significa, mais precisamente Rui Sereno (Business Developer), respondeu. Após alguma insistência da minha parte (algo que valorizaram), acabei por

conseguir uma entrevista com Rui Sereno e André Furtado (Diretor Criativo). Foi uma entrevista na qual me senti desde logo à vontade e propus então, um estágio curricular, a tempo integral durante cinco meses. Ficou acordado que tomariam uma decisão e mo comunicariam mais tarde. Saí do escritório e, quando estava à porta do mesmo para ir embora, recebi uma chamada de Rui Sereno a questionar se tinha algo para fazer nesse mesmo dia. Não tinha e, foi então que me deram a ótima notícia de que esse seria o meu primeiro dia de estágio, dia 7 de Janeiro de 2019 com a duração de cinco meses. Foi um voto de confiança e um grande desafio que me estava a ser proposto, pois o meu conhecimento em design de interação era muito limitado.

Nesse primeiro dia fui apresentada a toda a equipa, conheci o espaço e comecei por perceber o processo de trabalho da Significa. Juntei-me a Mário Rodrigues (Designer) para começar o projeto Reguild. O primeiro passo foi ler as guidelines da Apple: “Human Interface Guidelines”, de forma a ambientar-me corretamente aos componentes e medidas usadas no meio digital. De seguida recebemos o briefing do cliente e desenhámos um mapa da app.

Embora, desde então, o meu sentido crítico tenha mudado bastante. Hoje em dia, devido ao estágio realizado, não valorizo apenas a parte visual, mas todas as metodologias por detrás dos projetos e, acima de tudo, a usabilidade).

“The Most Successful People Are The Ones You’ve Never Heard Of”.

Original: “It might also be said that the ones we’ve never heard of — those were the lucky ones. It wasn’t fun to be the head of state. It wasn’t fun the be executed by a head of state either. It wasn’t as fun as you think to be Rockefeller or Kennedy or Lance Armstrong.”

1

(8)

8 Reguild é uma aplicação que junta funções do Instagram, Tinder e Linkedin, dividida em três principais utilizadores: investidores, empresários ou profissionais. Os investidores procuram projetos ideais para investir, os empresários procuram bons investimentos para os seus projetos e os profissionais podem ajudar tanto os investidores, como os empresários, dependendo da sua área de eleição. O objetivo deste projeto era realizar apenas wireframes (informação sobre wireframes na página 46) e foi nessa fase que iniciei a minha aprendizagem no Sketch.

Assimilei alguns pormenores como a distância necessária entre componentes para toque em telemóvel, criação de um ícone e os vários tamanhos possíveis, o valor geralmente utilizado no incremento entre componentes, limites de tamanho de fontes, entrelinhamentos

em formato digital, etc. A parte mais complicada desta fase foi abstrair-me um pouco da parte visual, adquirida durante o meu percurso universitário e focar o meu pensamento apenas na disposição do conteúdo pelas páginas. Nos wireframes idealizamos, obrigatoriamente, como é que o utilizador vai pensar, como vai agir e qual a maneira mais fácil do mesmo perceber como realizar ação A ou B.

(9)

9

1.

Na imagem apresentada, os ecrãs superiores representam as primeiras versões e os ecrãs inferiores as iterações finais. No primeiro ecrã vemos a página principal da aplicação. O utilizador vê os vídeos à medida que aparecem dependendo dos dados que preencheu inicialmente. Pode voltar ao vídeo anterior, não gostando pode carregar no x e passar ao próximo, ver o vídeo e gostar (carregar no coração e abrir uma conversa com o utilizador que colocou o vídeo), ou abrir o perfil do mesmo. No menu principal o utilizador pode regressar à página inicial, pesquisar, adicionar um vídeo novo, ir para as mensagens e suporte técnico. Na barra de navegação o utilizador pode ir para o seu perfil ou aceder às definições. A página principal mudou principalmente a nível de usabilidade. A secção do vídeo, em vez de ter apenas o nome e a função da pessoa, passa a ter também uma breve descrição. Para voltar ao vídeo anterior, ou passar à frente faz-se swipe (deslize horizontal do dedo no ecrã). Ao invés de haver necessidade de carregar no ícone para se dirigirem ao perfil da pessoa, podem apenas carregar no nome. No menu principal, em vez da ação principal ser adicionar um vídeo (ação passa para a página do perfil), passam a ser as mensagens, que é o principal objetivo da aplicação, criar negócios, logo conversas entre parceiros/ futuros parceiros. De seguida o utilizador tem opção de abrir a página das suas conexões e a página de perfil, onde se encontram as definições. No segundo ecrã, dentro do perfil, mais precisamente dentro da página de definições, foram acrescentadas algumas novas definições e, em vez do ícone de suporte na página principal, temos a opção de suporte técnico nesta página.

(10)

10

Na criação de um ícone, começamos por desenhar o mesmo e de seguida colocamo-lo num placer (rectângulo transparente

que define o espaço do ícone), de acordo com o tamanho desejado. No início foi-me aconselhado realizar incrementos de 8px em 8px nas medidas dos componentes, isto, falando de píxeis virtuais. Com ajuda do artigo ”Qual a diferença entre píxeis reais e píxeis virtuais?” percebi que quando falamos de píxeis, é necessário perceber que existem os píxeis reais e píxeis virtuais. Píxeis reais representam o número máximo de píxeis que existem no monitor, tanto horizontalmente como verticalmente (ex: resolução

de 750x1334). Os píxeis virtuais

representam uma configuração diferente e consequentemente valores diferentes. Em termos de web design, os valores calculam-se através da divisão dos píxeis do dispositivo pela taxa de píxeis do mesmo, que é usada como um multiplicador para determinar quantos píxeis reais mapeiam um pixel virtual. Por exemplo, o iPhone 7, assim como maior parte dos smartphones de hoje em dia, tem um ecrã de alta densidade, cuja Apple denomina de ecrã retina. Tem uma taxa de píxeis de 2.0. Dessa forma, o ecrã

de 750x1334 de resolução passa a 375x667 em web. Concluindo, se considerarmos entre píxeis reais ou virtuais, uma coisa é certa, se obter imagens nítidas e limpas for importante para a mensagem que queremos passar, devemos sempre optar por um ecrã com uma resolução alta. No presente relatório refiro-me sempre a píxeis virtuais. De qualquer das formas, podem haver exceções, pois existem styleguides diferentes para cada tipo de sistema operativo. Por exemplo,

em Android é necessária uma biblioteca muito mais flexível, pois existem imensos modelos e não conseguem controlar todos, enquanto iOS controla todos os tamanhos de modelos existentes. Independentemente da unidade de medida que usemos, o importante é existir coerência ao longo do processo de design. Esta normalização vai facilitar imenso a implementação do design estabelecido, porque tudo assenta num sistema métrico definido.

Figura 2

1.

(11)

11 Ao fim de uma semana a familiarizar-me com processos, frameworks, plugins e regras, com ajuda do designer Mário Rodrigues, chegou-nos às mãos o novo projeto da Arda, uma companhia fundada em 2017, que está dividida em vários setores. O objetivo era criar um site, de forma a estar concluído na data da feira Qualifica3 para a Arda Academy, uma nova academia de música situada no Bolhão. Este site deveria dispor de toda a informação necessária para o público em geral mas, principalmente, para os estudantes que procuram competências práticas no mundo da música. Com este projeto voltava de novo aos wireframes, desta vez, sentindo-me um pouco mais à vontade. Neste caso específico o cliente ainda não tinha os conteúdos definidos, por isso precisámos de deduzir o tamanho de alguns títulos e textos. Ao definir

o conteúdo de todas as páginas, adquiri novos conceitos como, CTA (call to action), que são pontos de conversão, ou seja, pontos que convertem o utilizador a realizar uma ação. Podem ser, por exemplo, botões, setas, componentes, etc.

Neste ponto passámos ao look and feel (ver página 49) e o site da Arda já estava realizado e tinha identidade definida, seguindo-nos pelo estilo existente, um estilo simples apenas em escalas de cinzento. Ao realizar o look and feel, criei um styleguide, definindo o estilo do site num documento e aplicando-o assim à página principal, aquela que apresenta mais conteúdo visual, de forma a ter mais componentes para estilizar. Seguidamente, aprendi a criar estilos de texto no Sketch, nomear ícones corretamente, de forma a originar símbolos e a organizar e a nomear corretamente os componentes no ficheiro. À medida que realizava o styleguide e criava símbolos e os estilos de texto lia o artigo “Beyond Tools: How Building a Design System Can Improve How You Work.” (Thibodeau, 2018) que me alertou para a necessidade de possuir documentação clara, a fim que todas as pessoas que fizessem uso do projeto, se

movimentassem na mesma direção, ou seja, utilizassem os estilos certos para todos os componentes.

1.

Feira de educação, formação, juventude e emprego.

(12)

12

Na imagem estão representados wireframes ordenadamente: página dos cursos, página de “quem somos?” e página de contactos. Na página de cursos o utilizador pode filtrar através dos dropdown (permite a escolha um elemento numa lista) que curso/workshop pretende, por formato/duração/língua. Ao pesquisar obtém o nome dos cursos, uma breve descrição e uma fotografia. A página Sobre Nós é meramente informativa, sendo que tem uma breve descrição da Arda Academy, uma fotografia que representa a mesma e um texto sobre a história da empresa. A página de contactos tem as informações essenciais da empresa e o formulário para entrar em contacto. Como não existia conteúdo textual, foi simulado com formas, de forma a entendermos a estrutura do site. Utilizámos uma fonte display, não existindo qualquer influência visual (principalmente da parte do cliente). Figura 3

(13)

13

Evolução do look and feel do hero da página inicial do site da Arda Academy.

Figura 4

O styleguide da Arda Academy está dividido por tipografia, cores, inputs, botões/ dropdowns, grelha e ícones. Figura 5

(14)

14 Ao finalizar o look and feel da versão desktop, passei então para mobile. Ao realizar a mesma fui percebendo como funcionam os estilos de texto no Sketch, ou seja,

o facto de poder criar novos estilos necessários para a versão para telemóvel, ou atualizar os existentes. Instalei alguns plugins de alinhamento de conteúdo e de renomear componentes, como o Paddy, Mate e Rename it, de forma a acelerar o trabalho. Após a finalização do look and feel da página principal, enviámos a proposta ao cliente. A resposta foi bastante satisfatória, pois apreciaram bastante o rumo para o qual caminhávamos.

Posteriormente aplicámos o estilo às restantes páginas, ainda que sem conteúdos definitivos. De modo a crescer e a agilizar o meu processo de trabalho futuramente, fui aconselhada pelo Diretor Criativo André a realizar todo o design do site de novo e segui a sua orientação. Na altura, obviamente que não foi agradável, porém claramente experiências como esta ajudaram a que acelerasse a minha forma de trabalhar, certificando-me, ao mesmo tempo que o documento continuava

organizado e bem executado.

1.

Alguns exemplos de partes ou páginas realizadas sem conteúdos definitivos. Na parte superior da figura vemos o design da página Sobre Nós e a versão para telemóvel. A barra de navegação passa a ser um menu que abre ao carregar no ícone do canto superior direito. Na parte inferior temos a página de cursos, em que os cursos se destacam em cima e os workshops abaixo. Para telemóvel coloquei apenas a disposição em coluna. Figura 6

(15)

15

1.

Enquanto aguardávamos a aprovação por parte

da Arda, Rui Sereno propôs que fizesse uma série

de desafios. Estes, poderiam ser qualquer tipo de página de design de interface e deviam ser realizados,

no máximo, em trinta minutos. A pequena pressão sentida pelo limite de tempo, a rapidez e clareza com que tinham de ser executados, prepararam-me bastante para projetos futuros. O primeiro desafio que realizei foi um bilhete de avião para telemóvel e, confesso que o resultado final foi catastrófico. Provavelmente por não estar habituada à pressão de lidar com prazos tão curtos e também

por não ter à vontade suficiente com o software, na altura, para realizar um desafio assim.

Resultado final do primeiro desafio: bilhete de avião.

(16)

16 O segundo desafio foi uma página de Login que, apesar de um melhor resultado, tinha ainda bastantes problemas de usabilidade, a saber: falta de mensagens de feedback para o utilizador; mensagem informativa de palavra-passe errada (não devendo aparecer no input da mesma, mas sim uma mensagem geral, por forma a que o utilizador não entendesse qual o input errado); algumas das fontes utilizadas eram de tamanho muito inferior ao suposto, principalmente em telemóvel; falta do botão que permitia guardar a palavra-passe e de fazer Sign in pela primeira vez e ao empregar o peso Negrito em maiúsculas, deveria ter aumentado o kerning. [À medida que estes imprevistos surgiam, mais eu evoluia. sentindo-me já um pouco à vontade na correção de pequenos detalhes.]

1.

Primeira versão do segundo desafio: Login. Figura 8

(17)

17

No primeiro ecrã vemos o estado inativo dos inputs. Acrescentei a possibilidade de fazer Sign in pela primeira vez. O segundo, terceiro e quarto ecrã representam o estado de preenchimento do formulário. O quinto mostra o carregamento da página seguinte e o sexto o erro de combinação de mail/ palavra-passe.

Figura 9

1.

(18)

18

1.

Nesta imagem percebemos a quantidade de texto que esperávamos receber e o texto que na verdade recebemos. Ao receber tanto conteúdo textual, tivemos de criar mais quatro secções.

Figura 10

Ao receber feedback por parte da Arda, tivemos uma sensação agridoce, dado que, apesar do cliente ter apreciado bastante o resultado final, aquando do envio do conteúdo, apercebemo-nos de que tínhamos realizado um design calculado para pouco conteúdo textual,

acabando por nos serem devolvidas páginas e páginas de texto. Ao acrescentar o conteúdo ao design já realizado, fui também assimilando alguns detalhes do design de interface, como, por exemplo: caixas de texto que não devem passar dos 600px de largura (tal como em papel, tornando-se complicado obter uma leitura satisfatória) e a fonte San Francisco que é uma fonte favorável a ficar melhor, mais apertada, sendo que

ao utilizar 24px de tamanho de título e 16px de tamanho de descrição, surgia uma discrepância muito grande. No final, foi necessário exportar tanto os ícones como as imagens para o programador poder incorporar no site.

(19)

19

1.

Desafio de página de compra de produto. Do lado esquerdo observamos a primeira versão realizada, do lado direito a versão com correções finais (ainda que incompleto). Na segunda versão foi adicionado o preço, o botão de adicionar como favorito mudou para um lugar mais coerente, foi adicionado o saco de compras e as setas desapareceram, pois pode-se deslizar o dedo para chegar ao produto seguinte. O contorno das cores do produto mudou devido ao facto de que se a cor for a mesma que o contorno, não haverá diferença, dessa forma não se notará o elemento selecionado.

Figura 11

Ao finalizar o projeto da Arda, regressei aos desafios e, desta vez, o objetivo era elaborar uma página de produto para compra. Ao ser o terceiro desafio, correu claramente melhor, contudo, faltaram alguns componentes no design.

(20)

20 Seguidamente, foi-me proposto realizar uma secção

para o site fund.me, um negócio de financiamentos a curto prazo para propriedades e remodelação. A pedido do cliente, a nova secção para a página principal seria uma galeria que representasse o antes e o depois

das casas remodeladas pela empresa. Novamente, sempre com a prestimosa ajuda de Mário Rodrigues, não demorei muito tempo a realizar a mesma. Nas versões iniciais, a ideia seria, ao carregar numa fotografia abrir-se

um modal que mostraria as imagens em tamanho maior. Na versão final decidimos não ser necessário abrir um modal, sendo que a galeria pôde ficar encaixada na página principal.

1.

Modais iniciais que iriam abrir ao carregar numa imagem, de forma a ver-se mais detalhadamente. Foram testadas várias galerias de imagens. Na última imagem existiria um label na imagem principal que diria se demonstrava o antes ou o depois da remodelação.

(21)

21

1.

A secção final contém as imagens todas num tamanho maior, de forma a conseguirmos ver todos os pormenores do antes e depois da remodelação.

(22)

22

1.

Novo desafio: uma página de pagamento visa. Sentia-me

cada vez mais posta à prova, pois para além de ter apenas 30 minutos para realizar, nunca antes havia lidado com os temas de cada exercício. Ao efetuar este desafio, o Business Developer, Rui apontou alguns comentários. Este assemelhava-se muito a um wireframe; quando a pessoa carregava no input, o teclado teria de abrir; nos inputs, a distância do texto à caixa estava exagerada, de 16px deveria passar para 8px; poderia ter colocado literalmente o cartão de multibanco ilustrativo; ao utilizar maiúsculas o tamanho da fonte deveria ser 12px.

Ecrã de pagamento antes e após correções referidas no parágrafo anterior.

(23)

23

1.

De seguida realizei um reprodutor de música, que,

confesso, foi inspirado nas apps da Apple Music e Spotify, sendo que foram poucas as correções.

Como este realizei os próximos: histórico de chamadas, conversão de moeda, testemunhos, aplicação

de exercício físico, receitas, meteorologia e jornal.

No primeiro ecrã temos o álbum, no segundo uma versão melhorada da visualização do mesmo e no terceiro a reprodução de uma música.

(24)

24

1.

Aqui estão representados os ecrãs de histórico de chamadas. O da esquerda sem correções, o da direita com correções. Por norma, a seleção de todas as chamadas ou não atendidas vem antes da barra de pesquisa, pois é uma ação mais importante. O primeiro ecrã não dispunha de contraste suficiente em maior parte dos elementos, o que foi corrigido no segundo.

Ao resolver o primeiro conversor (ecrã da esquerda), os labels de Euro e Dólar assemelhavam-se mais a botões e o ecrã em si encontrava-se confuso, também pela amostra de conversão de um euro no meio dos componentes. Com ajuda do André concebi o segundo ecrã. Uma versão muito mais usável e prática, sendo que tem apenas a informação necessária. Ao adicionar o valor, esse é convertido de imediato em dólares, não havendo necessidade de um botão de conversão.

Figura 16

(25)

25

1.

Ecrã de testemunhos para desktop.

Ordenadamente, da esquerda para a direita, ecrãs finais de desafios: sessão de treino; receita; ecrã de meteorologia numa localidade; página principal de jornal.

Figura 18

(26)

26

1.

Numa empresa como a Significa, não são efetuados

apenas websites e aplicações, sendo que me propuseram fazer uma apresentação sobre a empresa e as aplicações efetuadas até ao momento. Foi necessário realizar uma capa para a mesma, uma breve apresentação da empresa e uma página dedicada a cada aplicação realizada.

Cada página dedicada a aplicações, continha uma breve descrição e um mockup das mesmas. Por norma, temos tendência a crer, que por se tratar de uma apresentação, esta seria feita com menos dedicação ou, pelo menos, em menos tempo do que uma aplicação ou outrem. Na Significa, aprendi que a dedicação é a mesma para todo o tipo de trabalho. Não vou, por exemplo, acabar a apresentação, enquanto a capa estiver apenas razoável, vou sim terminar quando estiverem tanto a capa, como as restantes páginas na sua melhor performance.

No primeiro ecrã vemos a capa

da apresentação, que contém toda a equipa da Significa e o slogan. No segundo ecrã temos duas aplicações realizadas pela Significa, e uma breve descrição das mesmas. Figura 20

(27)

27

1.

Quando Robbie (antigo programador da Significa) finalizou

o website da Arda Academy, realizei o QA (Quality Assurance). Por forma a garantir a qualidade do projeto, são colocadas algumas questões aos programadores em relação às diferenças entre a implementação e o design realizado. Por vezes os erros são técnicos, ou faltas de atenção, contudo, por outras, são

condicionamentos do lado do programador, pois há animações que são idealizadas pelos designers, que nem sempre são possíveis de executar, ou pelo menos, não pelo budget do cliente.

Desta vez, e dando continuidade aos desafios, realizei uma página do dia atual no calendário. Ao realizá-la, apesar de pequenos erros e ajuda a polir, comparando com o primeiro, foi onde notei uma maior evolução da minha parte. Como acabou por ser um bom resultado sugeriram que experimentasse animar no Principle (ferramenta de animação de design de interação). Com ajuda de Filipe Almeida (Lead Designer) e André Furtado, consegui realizar uma animação e coloquei o meu primeiro shot no Dribbble (rede social de partilha de trabalhos de design).

A animação realizada passa do ecrã da esquerda para o da direita. Ou seja, ao carregar no evento num dia específico, dentro do mês, abre a pré-visualização do mesmo, podendo voltar atrás, para o mês atual.

(28)

28

1.

Nesta fase, já me sentia mais confiante, sentia que tinha

evoluído bastante desde a minha chegada e, que, acima de tudo, era a fazer design de interfaces que me sentia feliz. Nesta mesma fase, começou o segundo projeto. Juntei-me a Pedro Teixeira (designer na Significa), que havia antes realizado o design do Push (empresa que organiza a venda, compra e aluguer de casas,

através da ajuda de um agente imobiliário especializado), para fazer algumas atualizações pedidas por Khalief Brown (cliente).

Tal como na Arda, começámos com uma reunião, percebendo quais seriam as alterações necessárias e em que sites da concorrência se tinham inspirado (muito usual nos clientes dos E.U.A). Sem necessidade de wireframes, Pedro Teixeira efetuou um mapa do site, de forma a eu entender o formato do projeto, realizei então esboços que me levaram à estrutura das novas páginas e dos novos componentes. A página principal era a que iria sofrer mais alterações, desde mudanças na barra de navegação a mudanças de conteúdo textual.

A página de venda e compra foi feita de novo, a do detalhe da propriedade iria ser melhorada e ter novos conteúdos e as restantes páginas teriam apenas pequenas alterações. A minha maior dificuldade aqui, na Significa, neste projeto e, provavelmente, nos outros, foi a comunicação. O facto de ainda não conseguir justificar as minhas escolhas, fez com que muitas vezes as minhas opções não fossem aceites. Talvez até acontecesse mais tarde, ser a escolha do cliente, mas, amiúde eram descartadas por não as saber defender. Na parte final do projeto, finalizei a página da propriedade, criando os ícones. Desenhar ícones no Sketch, quando estava habituada a fazê-lo sem regras no Illustrator, foi um desafio. Neste novo software os ícones são mais organizados, são criados rectângulos de tamanhos que variam por norma entre 16px/24px/32px/40px/48px que definem o container do ícone, sendo que acabam por ficar automaticamente, mais consistentes. Recebemos feedback positivo da parte do cliente, realizámos apenas algumas correções

(29)

29

1.

Páginas totalmente realizadas por mim, apenas com alguns acertos. A primeira página contém o formulário de quem procura comprar casa, ao carregar no botão “mostrar resultados” serão mostrados todos os resultados coincidentes com a pesquisa. No segundo ecrã temos a mensagem de sucesso ao fazer oferta para uma casa.

Figura 22

Página de pré-visualização de casa. Houve a necessidade de, tanto nesta página como na da figura anterior, criar ícones coesos entre eles visualmente. À medida que o utilizador faz scroll na página, o componente que contém o preço/ botão de fazer oferta/ questões/ agendar visita, acompanha.

(30)

30

1.

Na reunião com o professor Miguel Carvalhais dia 23

de Março, ficou decidido que, para além de realizar

este relatório, iria efetuar um site que demonstrasse todos os projetos e competências adquiridas durante o estágio, de forma a aplicar as mesmas na realização do referido site. Assim, aproveitaria também, para relembrar

a parte de front-end, que já não realizava desde a minha licenciatura. Nos dias seguintes, na empresa, como não havia uma grande quantidade de trabalho, comecei por realizar os wireframes do site. Este está dividido em quatro páginas fulcrais: página principal, projetos, competências e agradecimentos. A página principal tem uma secção sobre cada página, que nos reencaminha para as mesmas. A página de projetos apresenta a descrição completa de cada projeto efetuado, a página de competências explica pormenorizadamente cada competência adquirida, e a página de agradecimentos contém todos

os agradecimentos, obviamente.

Alguns exemplos de wireframes da página principal. Como se trata de um trabalho meu, acrescentei, desde logo, alguns elementos visuais para testar.

Acesso em eggyolkfolk.cosme.pt. Figura 24

(31)

31

1.

Exemplos de wireframes da página de competências.

Acesso em eggyolkfolk.cosme.pt. Figura 25

(32)

32

1.

Entretanto foi-me proposto ajudar a Ana Moreno

(Designer na Significa) num novo projeto para Khalief Brown (o cliente do Push). Este novo projeto era bastante semelhante ao Push, apesar deste ter como principal objetivo converter o utilizador a fazer investimento imobiliário. Enquanto a Designer Ana Moreno avançava no look and feel das páginas do website, eu realizei o logótipo da marca, que teve um ótimo feedback por parte de Brown. Ao passar da identidade para o look and feel do site, no hero4 da página principal, considerei em colocar uma ilustração. Ao mostrar o design que tinha idealizado, Filipe Almeida alertou-me para o facto

de o público-alvo ser da faixa etária comprendida entre os 30 e 40 anos , daí que deveria evitar ilustração e optar por uma alternativa mais madura, como uma fotografia. Entretanto Ana conseguiu uma boa solução e avancei para outras páginas. O cliente ficou bastante satisfeito com o resultado final.

O logótipo inicial foi enviado pelo cliente, que pretendia uma melhor versão. A figura representa o processo da criação do logótipo, em que de início ao fim mudou cor, fonte e forma. Conceptualmente, a casa simboliza uma porta a abrir, ou seja, a girar (flip), sugerindo a possibilidade da entrada num bom negócio de investimento.

Figura 26

Primeira secção de um site que contém os primeiros elementos visuais que o utilizador encontra.

(33)

33

1.

Versões finais do logótipo. Figura 27

Página de filtros de pesquisa adaptada a partir do Push. Ao invés de mudar apenas o contorno ao selecionar características desejadas na casa, acrescenta-se o dourado, de forma a haver mais contraste na seleção

do elemento. Figura 28

(34)

34

1.

Página também adaptada do projeto Push. Figura 29

(35)

35

1.

Sem demora, regressei ao look and feel do site que estava

a desenvolver no âmbito do mestrado. A identidade da Significa gira à volta do ovo, cada trabalhador tem a sua própria personagem, a ilustração do seu ovo

(realizada por Frederico Jesus, ilustrador), de acordo com a sua personalidade. Decidi nomear o projeto

de Egg Yolk Folk, ou seja, gema de ovo. Em Portugal, uma “pessoa de gema” é genuína, pura. Desta forma, penso que foi a denominação mais acertada, visto que sinto que fui “criada” aqui na Significa, onde aprendi tudo o que sei sobre Design de Interação, e, isto tudo, rodeada por “pessoas de gema”. Consequentemente, encaixei e adaptei algumas ilustrações dos ovos, juntando manchas que, de alguma forma, remetem para o interior do ovo. À medida que ia fazendo o look and feel, continuava

a reforçar as minhas aprendizagens, lendo o livro Desenhar para a emoção3. Este, ajudou-me bastante na estratégia

e mensagem que eu queria passar. No capítulo Emotional Engagement, apresentam-nos o exemplo de, quando a nossa música favorita toca na rádio, ser muito mais empolgante, do que quando somos nós a colocá-la. No design é semelhante, a surpresa amplifica a nossa resposta emocional. Conseguimos, desta forma, redirecionar a atenção do utilizador, podemos cortar o comportamento padrão e forçar o cérebro do utilizador a reagir à situação. Apliquei esta estratégia,

nomeadamente, na secção de competências da página principal. O utilizador apenas consegue ver a ilustração de cada competência, ao fazer hover na mesma, aplicando assim o fator surpresa. Após a ajuda dos designers

da Significa e correções do professor Miguel Carvalhais, dei por concluído o design do site.

Walter, A. (2011). Designing for Emotion.

(36)

36

1.

Esta figura reflete o processo do hero

da página principal. No início ponderei colocar fotografias da equipa e destacar a minha, mas para a frente, devido ao nome do projeto, decidi usar o ovo como principal elemento e formas que remetem para ovos estrelados. Acesso em eggyolkfolk.cosme.pt.

(37)

37

1.

Evolução da página de competências. Como na página inicial a secção de competências contém fundo azul, decidi fazer a página com o mesmo fundo.

Acesso em eggyolkfolk.cosme.pt. Figura 31

(38)

38

1.

Ao passar para o código do site, a minha maior dificuldade

foi a responsividade. Na licenciatura, aprendi a fazê-lo apenas em boostrap, framework para desenvolvimento de front-end através de HTML, CSS e JavaScript, que melhora a experiência do utilizador, facilitando a criação de um site responsivo. Hoje em dia, esta opção não é a mais adequada, tanto aqui na empresa, como para mim. Para além de ter imenso código que acaba por não ser utilizado, a framework em si, já tem estilos definidos, sendo que ao criarmos o nosso se torna difícil de contrariar o estilo existente.

Foi nesta etapa que comecei a ler e a pesquisar sobre Flexbox e maneiras de programar o site de forma a que ele fosse responsivo. A Flexbox permite que elementos responsivos sejam organizados automaticamente

em caixas, dependendo do tamanho da janela, facilitando assim o processo de responsividade e criando um layout completamente personalizado. Ao terminar a leitura, coloquei mãos à obra e comecei a programar. Houve dois sites que me ajudaram especialmente, a perceber as propriedades do flexbox, pois tinha exemplos bastante concretos do funcionamento e alinhamento dos items entre si e dentro

de componentes.5

https://codepen.io/enxaneta/full/adLPwv/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/

5

Exemplo da utilização da Flexbox num componente. Concretamente:

“display: flex” define um componente flexível; “flex-wrap: wrap” a framework dispõe

os itens todos numa linha, ou seja “nowrap” e ao colocar “wrap” os itens vão partir-se em várias linhas, de cima para baixo;

“justify--content: space-between” define o alinhamento

ao longo da linha. Distribui o espaço livre entre itens e, neste caso, esses são distribuídos uniformemente, sendo que o primeiro item fica alinhado ao início da linha e o último ao fim; “align-content: space-between” esta propriedade é muito semelhante à

“justify--content”, sendo que esta alinha as linhas

numa coluna de um componente flexível, quando há espaço extra.

Acesso em eggyolkfolk.cosme.pt. Figura 32

(39)

39

1.

Site em funcionamento. Na primeira figura percebemos o funcionamento do hover na página principal e na segunda figura o funcionamento da página de projetos. Acesso em eggyolkfolk.cosme.pt. Figura 33

(40)

40

2.

Competências

Ao realizar um estágio curricular na Significa, adquiri uma série de novas competências. Ao iniciar o estágio o meu conhecimento sobre design de interação era reduzido, sendo assim necessária uma profunda aprendizagem, conseguida através de todos os projetos desenvolvidos ao longo do estágio.

Trabalhar num Open Space traz imensas vantagens, principalmente para alguém que está a aprender. Para além de criar um bom relacionamento profissional e pessoal, o facto de estar rodeada pela equipa de designers da Significa, facilitou bastante a comunicação e, consequentemente, a minha evolução constante.

Fotografia de: Beatriz Barros (CEO da empresa mishmash). Figura 34

(41)

41

2.1.

Processo

No estágio aprendi o processo que a Significa desenvolve ao longo dos seus projetos. O processo difere de empresa para empresa, sendo que realizei o estágio usando

as metodologias adquiridas na Significa. Esse dispõe das seguintes fases:

1. Perceber o Problema 2. Pesquisa

3. Wireframes

4. Testes de Usabilidade Iniciais 5. Mood-board

6. Look and Feel 7. Styleguide 8. Sistematização 9. Design Final 10. Prototipagem 11. Novos Testes 12. Entrega 13. Quality Assurance

Esquema realizado por Rui Sereno, no meu primeiro dia na empresa. O mesmo representa o processo empregue pela Significa, em forma de esquisso.

(42)

42

2.2.

Competências

Adquiridas

(43)

43

2.2.1

Perceber

o Problema

Numa primeira fase, tem sempre lugar uma reunião com o cliente. Nesta reunião, entende-se o projeto, tendo em conta os problemas, restrições, público-alvo e modelo de negócio. O briefing é dado pelo cliente, ou seja,

o conteúdo e as problemáticas existentes (na sua perspectiva, pois posteriormente, existirão outras,

detetadas pela equipa de design). Normalmente, o briefing é dado através de documentos e/ou video-chamada, também podendo ser presencial, sendo que nestes dois últimos é essencial tirar notas, para que o documento não fique incompleto. Para finalizar, organiza-se toda a informação adquirida na reunião e ou nos documentos.

Briefing entregue pelo cliente da aplicação

ReGuild. Este documento continha, para além de conteúdo, as várias ações

e páginas necessárias para o funcionamento da aplicação. Neste projeto foram apenas efetuados os wireframes, pois o cliente, ao ver o fluxo final que a aplicação ia

percorrer, apercebeu-se de que a mesma tinha demasiadas funções para uma só aplicação, algo que só se apercebeu através

dos wireframes. Este é um exemplo que prova que os wireframes são extremamente importantes no processo de um projeto.

(44)

44

2.2.1.

Apontamentos escritos durante uma reunião por vídeo-chamada com Khalief Brown. Este cliente, como já referido anteriormente, desejava melhorar e acrescentar componentes ao projeto já realizado anteriormente: Push Real Estate. Durante a reunião foi-nos dado o briefing (a mim e ao Pedro Teixeira). Khalief referiu quais seriam as maiores mudanças no projeto e alguns sites de inspiração. Figura 36

(45)

45

2.2.2.

Pesquisa

Ao perceber completamente o projeto que temos em mãos, passa-se à pesquisa. Esta fase pode parecer desnecessária, mas é bastante importante na continuação da perceção do projeto. É feita uma pesquisa do mercado, procurando o comportamento da concorrência, como comunicam, quais os seus erros, aprendendo

(46)

46

2.2.3. Wireframes

Os Wireframes representam o conteúdo, estrutura e uma descrição básica de interação ou navegação de um projeto, ou seja, uma primeira fase do design, em baixa fidelidade. Apenas em escalas de cinzento, sem imagens e com fontes que não influenciam o estilo do projeto, contendo formas representativas de conteúdo e texto, conseguimos focar-nos unicamente na experiência do utilizador. Se não fossem realizados wireframes, inevitavelmente, a tendência do cliente seria focar-se no aspeto visual, esquecendo-se do mais importante, a usabilidade. Provavelmente teria muito mais apontamentos, pois não existiria uma meta intermédia que colocasse o designer e o cliente no mesmo patamar. Desta forma, ao realizar wireframes estamos a poupar tempo e a manter o cliente a par da evolução do projeto. Ao ler o artigo “Qual a diferença entre wireframes,

protótipos e mockups?”, encontrei uma metáfora

que descreve extremamente bem o que é um wireframe: “Na verdade, estás a criar um mapa de uma cidade. Cada rua está representada no mapa, mas de uma forma muito simplificada. Consegues ver a arquitetura da cidade se olhares para um mapa, mas não consegues perceber a sua beleza.”

(47)

47

2.2.4.

Testes

de Usabilidade

Iniciais

Criar um produto, não faz sentido sem a entrada

dos utilizadores o mais brevemente possível no projeto, pois este está a ser criado para os mesmos. Nesta fase, reunem-se cinco pessoas pertencentes ao público-alvo, ou utilizadores atuais. No caso do produto já existir, de preferência no escritório da Significa, para testar os wireframes. Fazem-se algumas perguntas pré e pós teste, e solicita-se que efetuem ações, verificando

a usabilidade do projeto. Estas perguntas e ações variam de projeto para projeto. A Significa segue-se pelo

Nielsen Norman Group, grupo considerado o líder em pesquisa baseada na experiência do utilizador. Citando o artigo “Testes de Usabilidade, mesmo quando sabe a resposta”, lido no grupo: “Estudos de usabilidade servem múltiplos propósitos. O benefício mais óbvio é descobrir como responder melhor às necessidades do utilizador, identificando os elementos de design que funcionam ou não.”. 6 Esta é a melhor fase para realizar testes, pois é aquela em que o projeto é completamente flexível, apto a mudanças que não impliquem grandes

constrangimentos, evoluindo mais rapidamente. No fim do teste juntam-se os apontamentos mais significativos para o projeto e realizam-se as alterações necessárias.

Original: “Usability studies serve multiple purposes. The most obvious benefit is to figure out how to best address user needs, by identifying those design elements that do or do not work.”

(48)

48

2.2.5.

Mood-Board

Para além de uma pesquisa mais relacionada com comportamento, também realizamos uma pesquisa de estilo, como guia para o caminho que devemos tomar. Ao compilar essa pesquisa, é criado um mood-board onde compilamos fotografias, ilustrações, cores, tipografias, e outros elementos que nos inspiraram para o projeto, ou bons exemplos de produtos. Este ajuda-nos a definir a direção da interface do produto. Além dos designers envolvidos no projeto, o cliente também tem acesso à página que nos leva na direção visual a seguir, pois o mood-board é partilhado com o Cliente no início do processo. Os clientes são sempre incentivados a adicionar os seus próprios elementos de inspiração e casos de estudo, através do link que enviamos do Invision.

Mood-board do site realizado para o presente

relatório que contém cores, fotografias e sites que me inspiraram. Fui adicionando à medida que encontrava componentes que se encaixassem no estilo que desejava para o site.

(49)

49

2.2.6.

Look and Feel

O look and feel tem como principal objetivo definir a direção visual da interface. Deve definir-se

a personalidade do produto, passando assim

a mensagem e os valores da empresa corretamente. Selecionamos o wireframe com mais conteúdo e começamos a dar cor, a acrescentar imagens ou ilustrações, a experimentar tipografia, ícones, ou qualquer outro elemento que possa fazer sentido, ou seja, introduzimos linguagem visual ao projeto. Esta é provavelmente, a fase mais criativa do designer, visto que é a de experiências, aquela em que podemos explorar e dar azo à nossa imaginação.

Foi ao realizar o look and feel dos projetos que me fui adaptando ao Sketch. O Sketch é um programa editor de vetores e de prototipagem, bastante utilizado

por designers de interface. Na Significa optaram por esta ferramenta por ser intuitiva, intemporal (os anos passam e as atualizações permitem que acompanhe os outros programas), por conter imensos plugins poderosos que aceleram o processo de design e pelo facto de ser rápida e leve. O Sketch permite-nos ter o ficheiro completamente organizado, na medida

em que ao criarmos grupos de componentes corretamente nomeados, se outra pessoa fizer uso do ficheiro terá

facilidade em orientar-se no documento. Nesta ferramenta temos a possibilidade de criar grelhas completamente personalizadas, escolher fontes e criar estilos para as mesmas, realizar formas vetoriais e criar símbolos através dos mesmos, basicamente, podemos realizar quase tudo o que é necessário nesta área. Existem imensos plugins que nos permitem realizar ações que no InDesign ou Illustrator seriam impensáveis, por exemplo: Replace Layer (copiar um grupo de componentes e substituir outro por esse); Rename it (selecionar vários elementos e mudar o nome dos mesmos); Sketch Palettes (importar/exportar/eliminar palettes de cores do ficheiro); Paddy (definir o padding entre dois elementos, não permitindo que este mude ao movimentar os elementos) e Runner (corre, aplica, cria ou instala plugins, sendo, este último, provavelmente, o plugin mais importante.

Quanto à tipografia, lidar com a mesma em web é bastante diferente de manipular em papel. O primeiro passo

é perceber se a marca do cliente tem fontes definidas e, se sim, opta-se por essas. No caso de não ter, procura--se uma fonte que encaixe no branding da marca,

(50)

50

2.2.6.

que funcione bem em diferentes tamanhos e que esteja preparada para web, que tenha uma altura x maior, por exemplo. Ao escolher uma ou algumas fontes adequadas, testa-se na página com mais conteúdo, ou seja, aplica-se a tipografia ao conteúdo existente e mostra-se ao cliente. Percebe-se se o cliente tem budget e está disposto

a pagar por uma fonte, ou não. Se estiver disposto a pagar, a fonte é comprada depois de ser aprovada pelo mesmo. Se o cliente não tem interesse em pagar o tipo, ou não tem budget, geralmente utiliza-se a biblioteca da Google fonts (não que não possa ser utilizada nos casos anteriores, se uma tipografia se enquadrar ao projeto), que contem imensas fontes adaptadas a web. Podemos também aplicar fontes de sistema, ou seja, diferem consoante o browser em que o site for aberto, uma opção que facilita bastante o trabalho dos programadores, que acaba por perder um pouco a identidade, mas ganha versatilidade. O principal objetivo em web é que o utilizador leia sem se aperceber de que está realmente a ler, ou seja, que valorize o conteúdo em si, principalmente em sites que exijam foco, devido a grandes quantidades de texto. Nesta fase em particular, espera-se um feedback rápido por parte do cliente, mantendo assim o projeto

em movimento e a um ritmo constante.

Na figura podemos observar as pastas dos componentes do projeto Push no Sketch. Ao estarem corretamente nomeadas, as pastas que contêm os componentes, facilitam o trabalho do designer,

na facilidade de encontrar mais rapidamente cada elemento existente. Podemos observar a pasta da barra inicial, uma secção, uma secção de vídeo, a secção inicial, uma secção de características, o footer, testemunhos e background.

(51)

51

2.2.6.

Exemplo do plugin Rename it, onde podemos observar a facilidade de mudar os nomes dos componentes. Selecionamos aqueles que tencionamos renomear, corremos o plugin, onde referimos o nome final. Este plugin permite também redimensionar o objeto, tanto horizontalmente como verticalmente, ordenar os componentes por ordem ascendente, decrescente ou alfabética, mudar o nome da página ou o nome do grupo onde se insere o mesmo componente.

(52)

52

2.2.7.

Styleguide

À medida que são criados estilos, realiza-se um styleguide, ou seja, um documento que contém todos os componentes do projeto. Normalmente, o documento é constituído por: Introdução; Tipografia; Cores; Sombras e Bordas; Inputs; Dropdowns; Botões; Constrangimentos; Grelha; Ícones. Na Introdução existe uma breve descrição da ordem do documento; na página da tipografia coloca--se a fonte, os tamanhos, os pesos e as cores utilizadas; na página das cores colocam-se os códigos das cores utilizadas; nas sombras e bordas os códigos,

a percentagem de opacidade e o número de píxeis das bordas; nos inputs aplica-se os vários estados que o input pode ter; nos dropdowns o mesmo; nos botões, os vários estados dos mesmos e também as variantes de cor de fundo; os constrangimentos deixam esclarecido aquilo que não pode acontecer com certos componentes do projeto; a página da grelha contém a medida das margens e a medida de cada linha da grelha e finalmente na página dos ícones, colocamos os mesmos nos vários tamanhos que existem no projeto. Pode-se associar o styleguide a um manual de instruções, a partir do momento em que uma pessoa vê o documento, tem acesso a toda a informação necessária sobre o conteúdo, neste caso, visual, garantindo a coerência de todo o projeto.

Página de cores do Styleguide do projeto Push (tipografia, cores e sombras e bordas). Figura 40

(53)

53

2.2.8.

Sistematização

Estando o Styleguide finalizado, chegamos à fase de sistematização, ou seja, passamos os elementos existentes no documento para o Sketch, de forma

a que estejam acessíveis à utilização e não haja hipótese de existirem estilos diferentes dos definidos anteriormente. Ao criar os estilos de texto, ordenamos por fonte, estilo, tamanho, peso e cor e ao criar símbolos (ícones, botões, componentes) organizamos por nome, tamanho e cor. Estes serão os únicos estilos utilizados no ficheiro, sendo que, cada vez que é necessário existir um elemento novo, deve ser adicionado ao sistema, garantindo um design totalmente coerente.

Estilos de texto que facilitaram o processo do projeto da Arda Academy.

(54)

54

2.2.8.

Símbolos existentes no projeto da Arda Academy. Podemos selecionar e usar apenas os elementos criados. Para criar um símbolo novo basta carregar no botão situado ao lado direito dos símbolos existentes.

(55)

55

2.2.9.

Design Final

Estando o look and feel aprovado pelo cliente, deve aplicar-se o estilo definido a todas as páginas existentes, juntando os wireframes ao styleguide, inserindo nas páginas os componentes criados na sistematização. Esta é a fase mais longa do processo de Design. O nível de detalhe colocado em cada elemento da interface reflete-se na qualidade que pretendemos alcançar.

Realizamos o design para desktop ou para qualquer versão responsiva ou adaptada, abordando todas as interações, todas as ilustrações e todos os ícones.

Páginas finais de projetos. Em cima temos a página de compra da Flipmate e em baixo a página principal do site realizado para o relatório.

(56)

56

2.2.10.

Prototipagem

Como criar uma interface não se rege apenas

a desenhá-la, é necessário representar as interações futuras, ajudando o cliente a visualizar e a contextualizar as animações e ações da interface. A Significa opta por dois métodos de criação de protótipos: O Invision - Plataforma de criação de protótipos que transforma ficheiros de Sketch ou Photoshop em protótipos clicáveis; O Principle - ferramenta que permite realizar animações e interações de interfaces e prototipagem.

De forma a representar o fluxo do projeto, fazemos upload da interface do site ou aplicação no Invision. Estando o projeto no Invision, podemos criar um protótipo clicável. O fluxo pode ser representado através de clique ou hover nos hotspots (componentes que terão algum tipo

de interatividade), que serão ligados a outros componentes na mesma página, externos, pontos específicos, etc. Estas ligações podem ser criadas numa página e aplicadas em todas as outras, de forma a simplificar e acelerar a criação do protótipo. A criação destes protótipos interativos/ animados leva os programadores e o cliente a perceberem o fluxo do produto.

Neste ecrã podemos visualizar um hotspot, que irá efetuar a ligação entre este botão da secção de espaço na página inicial e a página de espaço, através de clique. Como se pode ver, podemos escolher qual a página externa a que o botão irá fazer ligação, se será através de clique ou hover, se após a transição queremos ficar no mesmo nível da página atual, e se queremos incluir esse hotspot, em várias, todas ou só nesta página.

(57)

57

2.2.10.

Para realizar interações no Principle, começamos por criar um ficheiro novo e importamos os ecrãs efetuados

no Sketch. De seguida, podemos animar o elemento através de clique, clique durante algum tempo, quando o scroll começa e quando acaba, quando deslizamos ou no fim da ação, ao arrastar e quando fazemos hover do objeto ou fora dele. Ao selecionar o método

de animação, aparece uma seta, que levamos do ecrã inicial ao final. Podemos realizar exatamente a mesma animação, ou diferente, de regresso para o ecrã inicial, ao colocar uma nova seta no sentido oposto, de elemento inicial para elemento final. É necessário ser cuidadoso e ter os ficheiros bem organizados, pois apenas conseguimos animar um elemento de uma página para outra se tiver o mesmo nome em ambas. Se houver necessidade de editar a animação, clica-se na seta que a representa, em que, ao clicar, abre uma linha de tempo que nos permite mudar tanto o tempo da animação, como a forma como acontece. Existem muitas mais possibilidades no Principle, que pretendo aprender, contudo, até hoje, são os conhecimentos que consegui adquirir.

Na imagem superior podemos observar o primeiro ecrã selecionado e na imagem abaixo, a linha de tempo que contém as animações da primeira para a segunda página.

(58)

58

2.2.11.

Novos Testes

Os protótipos não só permitem que os programadores percebam as interações, mas também nos permitem obter a validação do utilizador na navegação e na aparência final. Dessa forma, são realizados novos testes que não focam o utilizador apenas na navegação, mas também na aparência. Durante a minha passagem na Significa, nenhum dos projetos onde estive envolvida necessitaram de testes do utilizador. Optámos sempre por testar

in-house tendo em conta que estive mais envolvida em sites de marketing e/ou plataformas que já possuiam regras definidas anteriormente. Acrescentando a isso ficou claro que grande parte dos clientes não percebem

os benefícios dos testes e, por isso, optam por não aumentar o budget para tal. Ainda assim, tive a oportunidade de acompanhar de perto um teste realizado por Filipe Almeida para uma aplicação

de comunicação chamada Airtime (aplicação que permite aos utilizadores fazerem chamadas de vídeo enquanto assistem o mesmo vídeo, ao mesmo tempo). A Airtime é um projeto que chegou à Significa pouco depois da minha entrada. A grande particularidade destes testes é que foram testadas interfaces que não foram elaboradas pela Significa. Filipe Almeida ia trabalhar na Airtime

e re-desenhar/ re-pensar toda a aplicação e por isso precisava de saber quais os pontos positivos e negativos relativos à usabilidade da aplicação já existente, fora, claro, a sua opinião pessoal. Ainda que para todos nós fossem óbvios grande parte dos defeitos na aplicação atual, era importante garantir e perceber se os problemas eram unânimes quando se tratam de pessoas não relacionadas com a nossa área. E assim foi. O público alvo já estava definido (porque realmente já existia um público). Esses eram jovens/ adolescentes, com idades compreendidas entre os 14 e os 17 anos, estudantes que usassem

regularmente o telemóvel. Foi feito um anúncio

no Instagram da Significa onde foram colocados todos os requisitos dos participantes bem como a informações acerca da data e local, e claro, a recompensa. Todos os testes foram realizados no dia 18 de Abril no escritório da Significa. Na mesa apenas estava o telemóvel que iria ser usado para o teste, uma câmara apontada para o mesmo e um microfone de forma a registar todo

o processo que o participante ia desenvolvendo e as suas opiniões. Todos eles testaram a aplicação disponível na App Store e tiveram de responder às mesmas questões. Foi criada uma lista onde foram definidos todos os fluxos que eram necessários testar, desde o onboarding, criação de conta à chamada de vídeo propriamente dita. Desde o início que foram tratados com toda a tranquilidade, de modo a que não ficassem intimidados durante e após

(59)

59

2.2.11.

o teste que se realizou de forma super informal. Em cada ação feita pelo participante era-lhe perguntado se

o processo tinha ou não sido intuitivo e expectável. Depois, observava-se o que o participante faria naquele momento, de modo a entender o que chamava mais a sua atenção e também tentar perceber se havia rotinas semelhantes entre os mesmos. Sempre que era necessário testar alguma funcionalidade que os participantes

ignoraram, Filipe Almeida criava um cenário fictício onde pedia aos participantes, que se imaginassem numa situação, onde era preciso executar essa ação. Por fim, algumas questões mais gerais foram-lhes colocadas: - O que achaste relativamente ao que acabaste de “ver”? - Quais foram os 3 maiores problemas que encontraste? - Usarias a aplicação?

- Incluirias alguma(s) feature(s) nova(s)?

- E por fim, como descreverias a Airtime a um amigo? Depois de recolhido o feedback dos 5 participantes foi criada uma apresentação onde foi mencionado tudo o que foi “recolhido” entre os mesmos para apresentar, em pessoa, ao cliente.

Se o tempo e o orçamento nos permitirem, em vez de testar com protótipos do Principle de alguma forma limitados e interativos, poderemos criar código. Ao implantar um protótipo rapidamente criado para os utilizadores, podemos obter resultados muito mais perspicazes e realistas. Acrescenta alguns dólares/ euros ao orçamento, mas os resultados são muito mais

(60)

60

2.2.11.

Utilizador a interagir com a aplicação Airtime. Figura 46

(61)

61

2.2.12.

Quality

Assurance

Nesta fase procuramos incoerências entre o que foi desenhado e o que foi implementado, procurando problemas, tanto do ponto de vista criativo, como técnico. A experiência do utilizador é trabalhada nesta fase também. Ao encontrar um erro, como por exemplo um botão que não funcione, impedindo que o utilizador regresse à página anterior, será um constrangimento para o mesmo, podendo não ser uma boa experiência, não regressando ao site. A Quality Assurance, tal como o nome indica, verifica se o projeto está a funcionar corretamente, garantindo a qualidade do mesmo. De forma prática, o designer tira prints de erros que encontra, escreve uma descrição e envia ao programador, a fim de ser corrigido pelo mesmo. No caso de não entenderem, dialogam diretamente, facilitando a comunicação e perceção das falhas existentes. Tudo o que o cliente recebe, é visto e revisto por mais do que uma pessoa.

Os programadores terão acesso a várias imagens como esta, que representam problemas, tanto a nível técnico como de incoerência com o design. Neste caso, ao fazer hover, não deve mover-se o texto, mas sim apenas a seta, pois essa é a animação pretendida.

(62)

62

2.2.13.

Entrega

Uma entrega feita corretamente desempenha um papel fundamental no que o produto final vai ser. Quanto mais materiais desnecessários pudermos reduzir para

os programadores, seja da nossa equipa interna ou do cliente, melhor. Garantir que eles recebem tudo e da maneira que precisam, acelerará o trabalho e diminuirá o risco de erros. Para isso, normalmente, criamos pastas no Google Drive, sempre atualizadas que contêm um link com protótipo do Invision, arquivos editáveis, ilustrações, o styleguide e os protótipos de vídeo e clicáveis. Certificamo-nos sempre de que todos os arquivos têm o nome apropriado, prontos para serem assumidos pela equipa de desenvolvimento.

Organização do projeto da Arda Academy em pastas.

(63)

63

Conclusão

A partir do momento em que comecei a fazer design de interface, apercebi-me de bastantes diferenças em relação ao design gráfico. Apesar do objetivo do design gráfico ser semelhante ao de interação, comunicar com o público, notava que havia um maior investimento na parte artística e menor na parte comunicativa, principalmente da minha parte.

“Um termo que ganhou alguma popularidade na última década é ‘design de experiência do utilizador’. Muitas pessoas defenderam o uso deste termo como um guarda--chuva sob o qual várias disciplinas diferentes de design e usabilidade colaboram para criar produtos, sistemas e serviços. Esta é uma meta louvável com grande apelo, mas não aborda diretamente a preocupação central do design de interação.”5 (Cooper, A, 2014, p. xxii).

Hoje em dia muitos designers, cometem o erro de separar User Experience de User Interface, quando, estão de facto interligados. Na verdade, todas as competências

de que falei anteriormente, fazem parte da experiência do utilizador, pois todas elas podem contribuir para uma melhor ou pior experiência do mesmo. “‘Design de experiência do utilizador’ (UX) tem três preocupações sobrepostas: forma, comportamento e conteúdo.

O design de interação concentra-se no design do comportamento, mas também se preocupa com o modo como esse comportamento se relaciona com a forma e o conteúdo.” 6 (Cooper, A, 2014, p. xxiii). Tal como o autor revela, o design de experiência do utilizador, é a junção da forma, comportamento e conteúdo, logo, ao usarmos o termo UI/UX estamos a separar a forma e o conteúdo, do comportamento. Se pensarmos bem, o que seria um site apenas com forma e conteúdo? Seria basicamente ver um cartaz,

em ecrã, sendo que não haveria qualquer tipo

de interação, apenas conteúdo visual. “Design industrial e gráfico estão preocupados com a forma de produtos e serviços, mas também devem garantir que sua forma suporte o uso, o que requer atenção ao comportamento e conteúdo.”7 (Cooper, A, 2014, p. xxiii). Como já referi anteriormente, muitos designers gráficos (incluíndo eu, antes de vir estagiar para a Significa) valorizam muito mais a forma, muitas das vezes, não garantindo o seu uso. Por exemplo, na faculdade, tenho noção de que realizei imensos trabalhos, como cartazes, que estavam

extremamente apelativos e bonitos, todavia a maior parte desses, ou não eram legíveis, ou não transmitiam

a mensagem certa (pelo menos para público de vertente não artística).

Original: “A term that has gained particular popularity in the last decade is “user experience design”. Many people have advocated for the use of this term as an umbrella under which several different design and usability disciplines collaborate to create products, systems, and services. This is a laudable goal with great appeal, but it does not in itself directly address the core concern of interaction design.” Original: “User Experience (UX) design has three overlapping concerns: form, behavior, and content. Interaction Design focuses on the design of behavior but also is concerned with how that behavior relates to form and content.”

Original: “Industrial and Graphic Design are concerned with the form of products and services but also must ensure that their form supports use, which requires attention to behavior and content.”

7

8

Referências

Documentos relacionados

Turing é bastante conhecido pela teoria de computação que desenvolveu e conhecida como máquina de Turing, e que consistia na definição pela qual uma máquina poderia simular

Os dados obtidos nessa dissertação diferem dos demais pela análise da variação temporal, que mostrou que, após dose única e subletal de MCYST, o dano oxidativo no fígado

Consultar a Secção 11 para obter informações pormenorizadas sobre sintomas e efeitos na saúde.. Classificação de acordo com o Regulamento (CE)

Em termos de atividades humanas importa fazer a distinção entre a área marinha e a área terrestre da área de intervenção e, ainda as áreas abrangidas pela Reserva Natural

Ao comando de iniciar, o candidato com o corpo completamente na posição vertical, deverá executar uma flexão dos braços na barra até que o

Esse conjunto de temas é abordado neste catálogo de fontes, cujo conteúdo agrupa referências de fontes primárias e secundárias, e constitui-se como o principal

O valor da reputação dos pseudônimos é igual a 0,8 devido aos fal- sos positivos do mecanismo auxiliar, que acabam por fazer com que a reputação mesmo dos usuários que enviam

Ezequiel Rodrigues da Rosa FT2 desce para FT1 ABP/DF Claudio Daniel de Lima Rosa FT2 desce para FT1 MOVAC Deivid Vinicius Soares da Silva FT3 sobre para NE MOVAC. Welison