Estudo de Caso: Eventio (Web App). Design de Interface para eventos.
O que projectei?
Enquadramento
Este trabalho foi desenvolvido no âmbito da disciplina de Design de Interfaces, por essa razão o foco deste trabalho foi colocado tanto na arquitectura de informação — que vai hierarquizar e distinguir a colocação de conteúdos na interface, como também no design gráfico — que resulta no visual devidamente pensado desta aplicação, e por fim no design de interacção — que ao ser centrado no utilizador, respeita as necessidades em relação ao que esta interface lhes concede. Estes pontos em conjunto servem o objectivo desta disciplina que é o de tornar a experiência do utilizador o mais simples e eficiente possível, sem nunca deixar que o design atrapalhe este propósito.
“Design centrado no utilizador significa entender o que os mesmos precisam, como pensam e como se comportam — e incorporar essa compreensão em todos os aspectos de um processo.” (JESSE, 2002)
Porquê?
Creio ser necessário o desenvolvimento de um projecto deste tipo, dado existir um reduzido número de sites disponíveis para escolha personalizável de eventos, e sobretudo com a inclusão de “features” inovadoras tendo em conta os objectivos finais do utilizador.
Expectativas iniciais
Desde o início deste projecto, pretendi sempre compreender do ponto de vista do utilizador, qual a necessidade e experiência deste, procurando sempre desenvolver criativamente soluções inovadoras de modo a atingir esse fim.
Processo
Metas
- Definir e estruturar hierarquicamente conteúdos e funcionalidades;
- Idealizar e decidir as melhores soluções de design visual;
- Analisar as interacções possíveis dos utilizadores dentro da Eventio, principalmente das quatro páginas abaixo mencionadas;
- Design da Landing Page, onde defino o call-to-action principal, e onde é possível ter um overview geral do tema e do que esta webapp tem para oferecer;
- Design da Homepage, que se divide em duas versões: por default a versão em Lista; e com um clique a versão de visualização em Mapa dos eventos;
- Design da página do Evento, onde é possível ter informações detalhadas sobre o evento seleccionado como categoria, local, data ou local de compra de bilhetes, promotores, etc.
Principais objectivos da aplicação
Funcionalidades
- Inclusão nesta webapp de um mapa interactivo, tanto na Landing Page — que sugere eventos disponíveis num raio de 50km de distância a partir da localização do User, como também na exibição de resultados de pesquisa na Main Page.
- Integração de dados do Facebook — O utilizador ao fazer o registo na Eventio utilizando o seu acesso do Facebook poderá importar a sua informação pessoal (nomeadamente os dados demográficos como idade, género, localização) e os seus “Gostos” de forma a permitir que o machine learning da Eventio possa automaticamente proceder à curadoria de uma “Colecção” personalizada de eventos com base nestas informações. Esta sincronização com o Facebook, permitirá ainda importar os eventos aos quais foi no passado e aos que marcou interesse em ir futuramente.
- Filtros avançados que permitem uma experiência personalizada ao utilizador, na medida em que este pode, consoante as suas necessidades e motivos, basear-se nas suas preferências artísticas ou no budget definido, por exemplo.
- Pesquisa retroactiva de eventos — Em resultados de pesquisa avançada, ter uma checkbox — denominada de “Pesquisa de Histórico”, que serve como opção para visualizar e procurar também eventos antigos que tenham ocorrido no passado.
Público-alvo
A “Eventio” está direccionada a pessoas interessadas em eventos em território nacional, que independentemente do género ou idade, classe social ou profissão, gostem de eventos culturais, tenham pouco tempo para descobrir “o que ver/fazer”, possuam alguma sensibilidade às artes em geral mas também ao preço e à qualidade daquilo a que assistem.
.
Análise de concorrência
Analisando de forma geral a concorrência a esta plataforma, não é visível um número elevado de sites que cumpram exatamente da mesma forma os objectivos da “Eventio”; existem vários sites que servem um propósito semelhante, porém por vezes misturados com outros conceitos e com objetivos diferentes como é o exemplo da “Viral — Agenda Cultural” (viralagenda.com) que apesar de apresentar poucas funcionalidades, apresenta: um design de interface coerente, dinâmico e atraente; uma linguagem textual “catchy”, muito urbana e orientada para o utilizador; muita oferta (apesar de ser densa) e um conteúdo razoavelmente bem categorizado.
Outro exemplo notável de apresentação de eventos é a agenda do conhecido “Facebook” (https://www.facebook.com/events/), que apesar de não ser o seu foco, oferece esta possibilidade. Sendo o Facebook uma das redes sociais mais utilizadas, é inevitável o uso desta ferramenta. Realço como pontos positivos desta plataforma o facto de ter uma grande quantidade de conteúdo aliado às features sociais como o “gosto” ou o “partilhar”, bem como a sua enorme base de utilizadores regulares.
Mapa do Site
Ainda no início deste projecto cheguei à conclusão que este seria o sitemap final, onde está exemplificada a estrutura hierárquica do website. Por não apresentar uma estrutura demasiado complexa, não foi necessário utilizar métodos avançados para o seu desenvolvimento.
Nesta fase de definição de o que seria a Eventio, analisei aquele que seria o conteúdo exibido em cada página, como a denominação dessas páginas, links e botões, secções, títulos, blocos de texto, funcionalidades, call-to-action’s, entre outros.
User Flows
Após o desenvolvimento de dois user flows tive uma percepção aprofundada sobre as dinâmicas de interacção. O facto de estes user flows percorrerem as principais constituintes do site como “Procurar informações de um evento” ou “Procurar recomendações de eventos”, abriu caminho para a criação de wireframes e validar o que já tinha feito no sitemap.
Wireframes
Depois de estar mais esclarecido em relação a possíveis comportamentos e objetivos por parte de utilizadores, listei o que cada página precisava de ter a nível de estrutura, funcionalidades e conteúdo, onde posteriorimente desenhei pequenos sketches em papel.
Ao desenhar estas ideias, com o tempo fui refinando as mesmas até chegar a mockups de média fidelidade, e repentinamente para mim, ficou mais claro e tive mais foco e melhor orientação por se ter tornado menos subjectivo e mais visual.
Style Tiles
Criei dois style tiles que me auxiliaram na comunicação de linguagens visuais concretas, e digo isto por serem elementos tangíveis, no que toca à visualização de elementos de design visual como paleta de cores, fontes utilizadas, estilos de botões, entre outros. Se apenas tivesse utilizado moodboards para o look-and-feel deste site, seria sentido então um efeito mais subjectivo do que se pretendia.
Cheguei mesmo a aplicar como forma de teste, os dois style tiles ao primeiro wireframe, para poder ter um meio de comparação entre qual o mais adequado. Depois de finalizados e validados, tive que optar por escolher um apenas um dos styles, uma vez que ambos se enquadravam no tema jovial e energético, no entanto com aparência clean, minimal e credível.
Design Visual (UI)
A versão com tons de roxo, branco e verde foi a escolhida, e apliquei-a a todos os mid-fidelity wireframes.
Foi minha intenção que esta plataforma ganhasse um uso intuitivo ao ter um look limpo, conciso, consistente, com um desenho assente num sistema sólido de grelhas contínuas que mantivesse a coerência visual. Aliado a estas grelhas, o uso predominante de dois tons de roxo (cor forte da identidade visual) em conjunto tanto com uma paleta de cores neutras como com outra cor complementar (verde) para botões e acções. Foi igualmente minha intenção, que o design fizesse usufruto de white space de modo a que se perceba as divisões de conteúdo, inspirado também num estilo aproximado ao “material design” da Google, em linha com as interfaces mais modernas.
Prototipagem
Criei o design de mais algumas interacções e fiz protótipos minimamente funcionais no InvisionApp com estas interfaces do utilizador já em alta fidelidade.
Reflexão
Antes de realizar este projecto, já tinha algumas noções de design gráfico e de interfaces, contudo este projecto abriu portas para novos conhecimentos no meio do design digital e novos rumos a tomar, profissionalmente falando. Porém, por via deste projecto ao aprofundar temas ligados a UI, como design de interacções, arquitectura de informação e design visual, fiquei surpreso com a quantidade de conhecimento que me faltava.
“Only when the design fails does it draw attention to itself; when it succeeds, it’s invisible” (John D. Berry)
Todo o processo que um designer passa é incrivelmente subjugado aos olhos de quem não está tão por dentro do assunto, porque não se pode ter um visual pronto a mostrar sem que haja um cérebro por trás que analise não só todo o conteúdo que por si só tem que estar estruturado para que hajam interacções que se adeqúem o melhor possível ao utilizador desse produto; mas como a estética que aparentemente é algo superficial, porém cada cor, tipo de letra, posicionamento e alinhamento não pode ser seleccionada ao acaso.
Chegando ao final deste projecto, sinto que poderia ter investido mais em toda a parte de design de interacção por ter adquirido novos saberes, mas aprender é também saber onde poderíamos ter sido melhores e saber aplicar essas melhorias nos projectos futuros. Apesar disso, penso que com este projecto desenvolvi uma ideia de uma plataforma web que poderia ser implementada, distinguindo-se da oferta actual de “agendas culturais digitais” pelas suas características. Procuro agora, em parte por causa deste projecto, aprofundar mais conhecimentos em Design de Interfaces e poder posteriormente dominar melhor esta área.