Laboratório de Computação Gráfica e Ambientes Virtuais
Conclusão
Durante o estágio de três meses, o foco foi no Design de Interfaces para produtos digitais, reconhecendo a importância da coerência gráfica na experiência do utilizador. A relação emocional entre a marca Boonzi e os utilizadores foi destacada, indo além dos produtos digitais. A aprendizagem de novas técnicas, linguagens de programação e a coordenação eficaz com a equipe contribuíram para o sucesso do projeto, culminando na assinatura de um contrato de um ano com a empresa.
O processo envolveu revisões contínuas, com a equipe realizando testes beta restritos para identificar erros e melhorias de usabilidade. Os feedbacks incluíram sugestões, como tornar contas desativadas cinza para aumentar o contraste e ordenar alfanumericamente as contas na lista. Além disso, foram abordados bugs e ajustes de usabilidade ao longo do desenvolvimento da versão beta. Esse ciclo permitiu refinamentos contínuos, resultando em uma experiência mais polida para os usuários finais, mantendo a familiaridade com o Boonzi Desktop.
2.1.1.6 CONCLUSÕES / RESULTADOS DOS TESTES
O desenvolvimento do Boonzi Mobile enfrentou desafios que impulsionaram melhorias significativas. Ao seguir o esquema de Alan Cooper, percebe-se a complexidade na construção do produto digital. A colaboração e esforço da pequena equipe foram essenciais para o sucesso, permitindo o lançamento eficiente da aplicação em grandes lojas online para diversos dispositivos. Os feedbacks dos testes de usabilidade contribuíram para superar desafios e aprimorar a aplicação. O Boonzi Mobile representa um novo mercado, fortalecendo a marca e originando o lançamento do serviço Boonzi Premium.
2.1.2 BOONZI CLOUD
2.1.2.1 INTRODUÇÃO
O Boonzi Cloud é parte integrante do serviço Boonzi Premium, facilitando a comunicação entre as aplicações Boonzi Desktop e Boonzi Mobile por meio de um sistema de sincronização nativa. Esse sistema envolve o envio de informações do perfil do usuário para a Cloud do Boonzi. Novas interfaces foram criadas na aplicação para computador, destacando as vantagens do serviço ao usuário quando confrontado pela primeira vez com a área de sincronização.
2.1.2.2 OBJECTIVOS
Os objetivos gerais na criação de interfaces para o serviço de sincronização do Boonzi Premium incluíram a diferenciação da área de sincronização em relação ao Boonzi Desktop, mantendo o mesmo ambiente gráfico. As metas abrangiam a criação e gestão de perfis na nuvem, simplificação do processo de criação de perfil no Boonzi Premium e a implementação de um processo de sincronização simples e compreensível.
As interfaces projetadas abrangeram:
Essas interfaces permitiram aos usuários gerir seus perfis via Boonzi Desktop, garantindo coerência gráfica e abordando o desafio adicional de tornar as interfaces de sincronização distintas do Boonzi Desktop.
2.1.2.3 PRÉ-DESENVOLVIMENTO
Antes do desenvolvimento da sincronização nativa do Boonzi, João Saleiro e Alberto Rodrigues iniciaram o processo de discussão de ideias e esboços. Uma reunião de briefing envolveu toda a equipe, contribuindo com ideias para as interfaces dessa nova funcionalidade. Destaca-se a colaboração coletiva no processo de esboços e ideias, enfatizando a abordagem colaborativa na concepção da sincronização nativa.
2.1.2.4 DESENVOLVIMENTO – PROCESSO DE DESIGN
Durante o desenvolvimento das interfaces de sincronização do Boonzi Premium, os wireframes foram cruciais para definir a estrutura final, utilizando grelhas para organizar visualmente o conteúdo, alinhando-se com as interfaces do Boonzi Desktop. Os wireframes destacam o posicionamento e tamanho do conteúdo, sem uso de cor para enfatizar esses aspectos.
As guidelines do Boonzi foram seguidas rigorosamente, aplicando o mesmo tipo de letra e suas variantes para manter a coerência gráfica. A única alteração nas cores foi a adição de um gradiente, criando um ambiente de nuvem, conforme proposto nos objetivos do projeto.
2.1.2.5 DESENVOLVIMENTO — PROCESSO DE PROGRAMAÇÃO
No desenvolvimento da sincronização do Boonzi Premium, o Boonzi Desktop utilizou o Apache Flex como framework base, com códigos em Actionscript e MXML. Destaca-se o primeiro momento, onde João Saleiro e Alberto Rodrigues desenvolveram o sistema de sincronização, enquanto o designer trabalhava nas interfaces gráficas. Num segundo momento, durante a implementação das interfaces, o designer orientou o programador para garantir a melhor experiência do usuário.
Após a conclusão do desenvolvimento e implementação gráfica, a aplicação foi lançada em modo beta no blog do Boonzi, permitindo que os clientes participassem no projeto, identificassem erros e avaliassem a usabilidade. Após a revisão e aprimoramento com base no feedback dos beta testers, a versão beta foi introduzida no sistema de atualizações do Boonzi para todos os clientes, ainda com melhorias planejadas.
2.1.2.6 CONCLUSÕES / RESULTADOS
A funcionalidade de sincronização entre dispositivos, lançada em 2014 em versão beta, foi um passo crucial para o posicionamento da marca Boonzi. Desenvolvida em resposta a pedidos de usuários, essa funcionalidade foi um caso de sucesso, superando a sincronização anterior através de serviços externos como Dropbox ou Google Drive. A coerência gráfica com o restante aplicativo era essencial, mantendo as diretrizes, mas destacando a introdução de um novo serviço no Boonzi Cloud. A abordagem comercial, com imagens e explicações, contribuiu para a maturidade do produto. A versão beta do Boonzi Cloud permanecerá até a conclusão do plano de negócios, especialmente o serviço Boonzi Premium.
2.1.3 RE-DESIGN DO PROCESSO DE COMPRA EM BOONZI.PT
2.1.3.1 INTRODUÇÃO
O re-design da página de compra no site Boonzi é um passo crucial na remodelação do plano de negócios, permitindo aos clientes escolherem entre os planos disponíveis. A revisão da arquitetura de informação e o planejamento do processo de compra visam garantir uma navegação fácil e natural para os usuários, conforme discutido no enquadramento teórico.
2.1.3.2 OBJECTIVOS
O re-design da página de compra do Boonzi (www.boonzi.pt) é crucial para a evolução do produto e a introdução do novo serviço, Boonzi Premium. Os principais objetivos incluem a clara apresentação do novo plano, Boonzi Premium, destacando os benefícios comparativos. Procura-se reduzir e simplificar os passos de compra, com a redefinição do público-alvo por meio de imagens para aumentar a conversão. Além disso, a presença constante de uma frase de venda durante a compra é uma prioridade para melhorar a experiência do usuário.
No pré-desenvolvimento do re-design da página de compra do Boonzi, a discussão de ideias envolveu principalmente três colaboradores: André Gavino, João Saleiro e Alberto Rodrigues. Durante essa troca de ideias, foram estabelecidos objetivos e levantadas questões cruciais relacionadas à usabilidade, como a necessidade de manter os 5 passos na compra e como aumentar a percepção dos planos disponíveis. As anotações e esboços, destacados na figura abaixo , refletem esses objetivos para orientar as alterações necessárias.
2.1.3.5 DESENVOLVIMENTO — PROCESSO DE PROGRAMAÇÃO
A programação da página de compra do Boonzi foi conduzida em equipe, utilizando HTML, CSS e Javascript. O desenvolvimento incluiu a criação de formulários, animações em Javascript e estilização da página. Destaca-se a melhoria na experiência do usuário com transições suaves entre fases e avisos visuais para preenchimento incorreto de formulários.
Testes vs Feedback
Devido aos prazos reduzidos no projeto de re-design da página de compra, a equipa do Boonzi conduziu internamente os testes de usabilidade e experiência do utilizador. A ênfase recaiu sobre essas áreas críticas relacionadas diretamente com o utilizador. Após os testes internos, a página de compra foi lançada com sucesso.
2.1.3.6 CONCLUSÕES / RESULTADOS
O foco principal da equipe do Boonzi no projeto de re-design da página de compra foi oferecer ao utilizador um processo de compra simplificado. A coerência gráfica do site e o re-design da página de compra foram prioridades mantidas durante todo o processo. A página de compra do Boonzi desempenha um papel crucial na decisão do utilizador, e os principais objetivos foram claramente alcançados, incluindo a percepção clara dos benefícios entre os planos e a redução dos passos necessários para a compra. Além dos objetivos relacionados ao Boonzi, o mestrando também atingiu metas pessoais, como aprofundamento de técnicas de conversão em páginas de compra e o aumento de conhecimentos em programação HTML e CSS.
Páginas 76 à 90
Na era digital em constante evolução, as aplicações para smartphones se tornaram populares, especialmente no ramo das finanças pessoais, onde aplicativos concorrentes funcionam como rastreadores de despesas simples em forma de gráficos.
Apesar da maturidade do Boonzi Desktop no gerenciamento financeiro, a empresa reconhece a necessidade de inovar e acompanhar a crescente demanda por soluções móveis. Assim, surge o Boonzi Mobile, uma extensão do Boonzi para smartphones.
Esse novo aplicativo tem como objetivo oferecer a mesma eficiência do Boonzi Desktop no controle financeiro, adaptado para a experiência móvel, permitindo aos usuários gerir suas finanças de forma simples e eficaz em qualquer lugar.
2.1.1.2-Objetivos Principais do Boonzi Mobile:
Objetivos de Comunicação e Posicionamento da Marca:
A ênfase foi em garantir que o Boonzi Mobile oferecesse uma experiência familiar aos usuários do Boonzi Desktop. Elementos como navegação, ícones e conteúdos foram adaptados para a visualização em dispositivos móveis.
Em essência, o foco principal foi tornar o Boonzi acessível em qualquer lugar, simplificando o registro de despesas e enfatizando o controle financeiro preciso e a maximização das economias pessoais.
2.1.1.3 PRÉ-DESENVOLVIMENTO
No pré-desenvolvimento, a discussão de ideias e esboços é crucial para desconstruir conceitos existentes e explorar novas ideias. A evolução dos esboços, discussões com a equipe e pesquisa de tendências financeiras são partes essenciais desse processo. O moodboard resulta da pesquisa, consolidando imagens, cores e formas para definir as interfaces gráficas da aplicação.
2.1.1.4 DESENVOLVIMENTO — PROCESSO DE DESIGN
Durante o desenvolvimento, os wireframes, guias visuais sem uso de cor, desempenham um papel fundamental na estrutura de um produto digital. Constantes discussões com a equipe e o gestor de produto moldaram o layout. Exemplos de alterações incluem a evolução do menu das contas para seguir a coerência gráfica do Boonzi Desktop e a relocalização do saldo total na tela de transações, eliminado após considerações com os programadores sobre a viabilidade de um menu lateral semelhante ao Boonzi Desktop.
3.4 A IMPORTÂNCIA DA COMUNICAÇÃO PARA O BOONZI
A marca não é construída apenas pelos produtos, mas também pela comunicação, ações e interações com os clientes.
A oferta de descontos para desempregados após uma discussão social, mostrando a sensibilidade da empresa para ajudar casos extremos.
A importância do conteúdo acessível nos blogs, respostas simpáticas no suporte e identificação com os clientes, define a personalidade da empresa.
3.4.2 O INVESTIMENTO NO DESIGN
O design é vital na comunicação eficaz entre a empresa e o cliente.
A revisão contínua do design garante a coerência, eficácia e competitividade do produto.
A importância do design na usabilidade do produto digital, simplifica tarefas e gera confiança nos usuários.
Menciona o papel do design na criação de valor para a marca em campanhas de marketing.
4.2 ORGANIZAÇÃO DE TRABALHO NA REDE
Aborda o uso do gestor de tarefas Asana para coordenar tarefas na pequena equipe do Boonzi, permitindo visualizar tarefas e prazos.
A configuração de programas específicos como SmartSVN, phpStorm e Google Drive evita erros de compatibilidade e organiza os arquivos da empresa.
Utilização do Google Drive, serve para armazenamento online, compartilhamento de pastas e backups de formaautomáticos.
Processo de Design
Divide o processo de design em etapas: esboços iniciais, re-design de conceitos, finalização do design e publicação/impressão.
Descreve a responsabilidade de diferentes membros da equipe em cada etapa para criar, reformular e finalizar o projeto.
Páginas 58 á 66
Parte 02
Boonzi
1. Introdução ao Boonzi
1.1. Como o Boonzi Surgiu
1.2. Reconhecimento pela Imprensa em 2013
1.3. Modelo de Negócio
2.2 FUNCIONÁRIOS
A start-up contava no início de 2014 com 6 pessoas entre as quais se
destacam o Gestor de Produto, João Saleiro, o Gestor Comercial,
Rubim Fonseca, os programadores, Alberto Rodrigues e Filipe Freitas,
a assistente de Marketing, Catarina de Sousa e por fim o Designer de
Interfaces, André Gavino.
João Saleiro é co-fundador do Boonzi, onde desempenha as funções de
Gestor de Produto sendo responsável pelo seu planeamento estratégico
e gestão da equipa.
Fundou o Airgile em 2010, uma plataforma de gestão
de projectos, e a Webfuel em 2004, uma empresa de consultoria em IT
orientada às Rich Internet Applications.
Licenciado em Engenharia de Telecomunicações e Informática pelo ISCTE, é também Adobe Certified Expert em Flex&Air, Adobe Community Professional e Formador certificado.
Como Gestor de Produto da aplicação Boonzi, João é quem toma as
decisões mais importantes fazendo parte dos três principais departamentos.
É líder incondicional e organiza o trabalho dos restantes colaboradores. O seu percurso académico e profissional permite que tome decisões fulcrais para a aplicação e para a empresa em termos de Marketing, Design e de Programação.
Esquema da hierarquia das várias funções de cada colaborador na empresa e das suas respectivasligações.
Fonte: Autor –João Saleiro
Gestor de Produto-Rubim Fonseca
Gestor Comercial-Catarina Sousa
Assist. Marketing-André Gavino
Designer interfaces-Filipe Freitas
Developer-Alberto Rodrigues
Developer-Marketing Design Programação
O Boonzi é um software de gestão financeira pessoal voltado para indivíduos, proporcionando soluções para diversas necessidades financeiras específicas de cada cliente. Embora focado principalmente em uso pessoal, também é adotado por empresas para aprimorar a gestão financeira.
A oferta da empresa inclui três elementos principais:
Em termos de planos de venda, a empresa oferece dois tipos:
Esses produtos e serviços representam as ofertas distintas da Boonzi, atendendo tanto a clientes individuais quanto empresariais, visando uma gestão financeira mais eficaz e personalizada.
3.2 PRINCIPAIS E POSSÍVEIS CLIENTES
Os principais clientes da Futurespiral são os indivíduos que adquirem o software Boonzi diretamente pelo seu site, focado na gestão financeira pessoal. Além disso, estabeleceram uma parceria significativa com a Cofidis, que adquiriu um grande número de licenças em 2013, utilizando o Boonzi como um valor adicional para seus próprios clientes.
Em termos de possíveis clientes, a empresa tem como objetivo principal a aquisição de clientes ligados ao setor bancário. Seu intuito é estabelecer colaborações com bancos, visando oferecer o software Boonzi aos usuários bancários. Esta estratégia permitiria aos clientes dos bancos gerir seus gastos mensais através de um software de excelência, contrastando com as soluções oferecidas pela maioria das instituições financeiras.
3.3 PRINCIPAIS CONCORRENTES
Os principais concorrentes da empresa Futurespiral são outras empresas que oferecem produtos semelhantes ao Boonzi, focados na gestão financeira pessoal. Até o momento, existem poucas aplicações que representam uma concorrência direta ao Boonzi, devido à sua capacidade distintiva de importar extratos bancários de forma simples e rápida.
Um exemplo de concorrente é o Be My Wallet, uma aplicação web desenvolvida por uma empresa portuguesa que permite aos usuários registar, organizar e gerir despesas pessoais de maneira simples, além de ser compatível com dispositivos móveis. Apesar de um lançamento promissor, o Be My Wallet não demonstrou atividade desde o final de dezembro de 2013.
3.TECNOLOGIA
O avanço tecnológico impulsionou uma variedade crescente de aplicações digitais, reformulando processos organizacionais. O planeamento de projetos digitais exige decisões estratégicas, e os designers são fundamentais para resolver problemas de comunicação e escolher a tecnologia mais adequada, considerando a qualidade e o alcance desejados.
Os pontos principais sobre a evolução tecnológica, o papel do designer na escolha das tecnologias e as características de algumas delas.
2.3.4.2 BOTÕES
Os botões digitais têm uma gama variada de formas, não se limitando a serem apenas discos redondos, podendo assumir formas gráficas ou serem representados por imagens que sugerem uma ação.
Durante interações em dispositivos móveis, como tablets ou smartphones, o feedback ao usuário pode se dar por mudanças visuais, como alterações de cor, ou através de feedback sonoro ao ativar um botão, como mencionado por Pannafino.
Em telas sensíveis ao toque, os botões têm dois estados: estático e pressionado, enquanto em computadores, existem quatro estados distintos: estático, hover (rato sobre o botão sem pressionar), pressionado e visitado após a ação.
É crucial considerar a diferença entre dispositivos ao desenvolver interfaces, já que a interação precisa se adaptar ao espaço disponível. Enquanto o cursor do computador pode interagir precisamente com objetos pequenos, como um único pixel, os dispositivos touchscreen exigem áreas maiores para interações precisas, necessitando cerca de cinquenta pixels em altura para cliques.
Além dos botões de navegação, existem os botões de “call to action”, cujo objetivo é incentivar o usuário a tomar ações específicas, como se inscrever em um serviço, fazer download ou comprar um produto. Eles geralmente empregam uma linguagem urgente, utilizando expressões como “Registe-se Agora” ou “Experimente Grátis” para capturar a atenção do usuário.
2.3.4.3 TIPOGRAFIA NO ECRÃ
A tipografia digital tornou-se mais acessível para designers com o surgimento de serviços online, como Typekit, Fontdeck e Google Fonts, o que também contribuiu positivamente para resolver problemas de pirataria e direitos autorais das fontes. Além disso, esses serviços melhoraram a renderização das fontes em diferentes navegadores e dispositivos.
Escolher a tipografia adequada para telas pode ser desafiador devido à grande variedade de fontes disponíveis. Ellen Lupton analisou uma seleção de fontes reconhecidas globalmente, populares entre os designers web, usando critérios essenciais:
Além desses critérios, é essencial que o designer teste e experimente as fontes para determinar qual se adapta melhor ao projeto.
2.3.4.4 ALINHAMENTO E GRELHAS
O alinhamento e as grelhas desempenham papéis cruciais no design visual e na organização de elementos em um projeto.
A grelha atua como uma estrutura invisível que sustenta o projeto, estabelecendo alinhamentos e relações entre objetos e componentes. É fundamental para criar uma estrutura coesa e organizada.
O alinhamento, por sua vez, é um elemento chave na comunicação visual, permitindo ao designer criar uma experiência organizada e sistemática para o usuário. A ideia é que todos os elementos na tela devem estar alinhados entre si na medida do possível, e qualquer desalinhamento deve ter uma razão justificável para sua diferenciação.
Conforme mencionado por Lidwell, Holden e Butler em “Universal Principles of Design”, o alinhamento entre objetos gera uma sensação de unidade e coesão, oferecendo estabilidade visual ao projeto como um todo. O alinhamento pode ser uma ferramenta poderosa para guiar o usuário pelo design, como quando linhas e colunas de uma grelha ou tabela indicam relacionamentos entre elementos e orientam o movimento visual do usuário de forma consistente.
2.3.5 USABILIDADE
2.3.5.1 LEGIBILIDADE
A legibilidade do texto em design envolve vários elementos essenciais, conforme discutido por Lidwell e Ellen Lupton:
Esses elementos contribuem significativamente para a clareza e facilidade de leitura do texto em design, garantindo que a escolha do tamanho, tipo de letra, contraste e espaçamento sejam cuidadosamente considerados para uma experiência de leitura agradável e eficaz.
2.3.5.2 ACESSIBILIDADE
A acessibilidade no design tem evoluído para garantir a usabilidade por todas as pessoas, independentemente de suas capacidades. Lidwell destaca quatro características essenciais para um design acessível: perceptibilidade, operacionalidade, simplicidade e perdão.
Essas características destacam a importância da acessibilidade no design, não apenas para reduzir erros na utilização, mas também para minimizar problemas de adaptação para pessoas com deficiência. Um design acessível não apenas amplia o acesso, mas também melhora a experiência do usuário, promovendo a inclusão e a igualdade na utilização de produtos e serviços.
2.3.2 O UTILIZADOR E O FORMATO DIGITAL
Uso de cores complementares saturadas
As cores complementares são o inverso umas das outras nos ecrãs. Essas
cores, quando altamente saturadas e posicionadas ao lado uma da
outra, podem criar situações de difícil percepção ou de concentração.
Saturação excessiva
As cores altamente saturadas tendem a parecer berrantes e a chamar
muita atenção. De uma forma moderada, as cores saturadas podem
ser usadas em pequenas amostras para capturar a atenção do utilizador, mas devem ser sempre usadas com moderação.
Contrastes inadequados
Quando as cores dos objectos diferem das cores do fundo apenas na
tonalidade, mas não na saturação ou brilho, tornam-se difíceis de
perceber. Os objectos e o fundo devem variar em brilho ou saturação.
O autor refere ainda que, o texto de cor em fundos com cor também
devem ser evitados, sempre que possível.
Falta de atenção ao Daltonismo
É necessário ter algum cuidado ao usar tons de vermelho e verde (em
particular), para comunicar informações importantes. As outras cores
usadas devem ser consideradas em saturação ou o brilho para que
este tipo de utilizadores as possam distinguir umas das outras. Se a
conversão para tons de cinza da paleta de cores utilizada for facilmente distinguível, os utilizadores daltónicos devem ser capazes de
distinguir a versão das cores.
2.3.2.1 OBJECTIVOS DO UTILIZADOR
Na contemporaneidade, o foco recai no utilizador, considerado um conjunto de necessidades e deficiências. Sua dinâmica assemelha-se à de um paciente ou criança, demandando proteção, análise e controle, sujeito a investigações e testes.
A evolução digital intensificou a exigência do utilizador, levando-o a especular sobre suas buscas e resultados. Apesar disso, a pergunta de Heller destaca a impaciência dos leitores da web em comparação com os leitores de impressão. Contrariando a suposição de dificuldade na leitura em telas digitais, a HCI demonstra a eficiência da leitura em texto preto nítido em fundo branco, tanto em telas quanto em páginas impressas.
A transformação tecnológica substituiu os formatos tradicionais por versões digitais, como livros e jornais, tornando o utilizador mais seletivo e impaciente devido ao volume de informações. A análise de Bierut, Drentell e Heller revela que a impaciência do leitor digital deriva de hábitos culturais e expectativas distintas em relação à produtividade e pesquisa, contrastando com os leitores de impressão que buscam um modo mais contemplativo.
2.3.3 PROCESSOS DE DESENVOLVIMENTO (WEBSITES, APLICAÇÕES DIGITAIS)
Os objetivos do utilizador desempenham um papel crucial no design de produtos digitais, conforme destaca Alan Cooper. A perfeição tecnológica sozinha não é suficiente; é essencial compreender e atender aos objetivos dos utilizadores para determinar a importância das atividades de design. Cooper ressalta que o design deve se alinhar aos objetivos do utilizador, indo além de simples considerações tecnológicas e tarefas.
Ao analisar produtos digitais no mercado, Cooper identifica falhas comuns, como fazer os utilizadores parecerem estúpidos, permitir erros graves, exigir esforço excessivo para operações eficientes e não proporcionar uma experiência agradável. Muitas vezes, objetivos e expectativas do utilizador são negligenciados por motivos comerciais, resultando em experiências digitais desagradáveis.
Empresas estão reconhecendo a importância de compreender e adaptar-se aos utilizadores, tentando melhorar a amigabilidade de suas aplicações. Contudo, Cooper destaca que, frequentemente, as mudanças são ineficazes devido à abordagem tradicional, onde o design de interfaces ocorre após a programação, perdendo a oportunidade de ajustar o produto conforme as necessidades do utilizador. Cooper compara essa abordagem ao planeamento de um prédio, enfatizando a importância de definir o design desde o início do desenvolvimento do produto digital.
2.3.3.1 ARQUITECTURA DE INFORMAÇÃO E SISTEMA DE NAVEGAÇÃO
A Arquitetura de Informação, segundo Robin Landa, é a organização cuidadosa do conteúdo em websites ou produtos digitais, estabelecendo uma ordem hierárquica para facilitar a navegação do utilizador. Essa organização não é linear, permitindo ao utilizador alcançar rapidamente seu destino de qualquer ponto no website ou produto digital.
Landa destaca a importância da clareza e organização da informação para proporcionar uma experiência positiva, especialmente em websites com excesso de tipografia, como revistas online, arquivos, museus e sites governamentais.
A Arquitetura de Informação guia o designer na composição geral do website ou produto digital, sendo a interface gráfica para acessar a informação parte crucial dessa arquitetura, chamada de Sistema de Navegação. Websites devem ter vários níveis de navegação, incluindo portal navegacional, navegação global, navegação secundária e navegação única de páginas web.
O Sistema de Navegação compreende caminhos visuais e digitais, geralmente representados por tabs e botões. Esses elementos devem ser limpos, simples e consistentes para que o utilizador reconheça links clicáveis e se mova eficientemente pelo website.
Lupton acrescenta a descrição de vários tipos de menus, como o persistente, suspenso, deslizante e separadores, cada um desempenhando funções específicas na navegação.
Embora Landa se refira principalmente a websites, a Arquitetura de Informação é essencial em qualquer produto digital. As regras aplicadas aos websites, incluindo os sistemas de navegação, são igualmente relevantes para garantir uma navegação clara e simples entre as funcionalidades de produtos digitais.
2.3.4 OS ELEMENTOS E OS PRINCÍPIOS DO GRAFISMO NO DESIGN DE INTERFACES
2.3.4.1 COR
A cor desempenha um papel fundamental no design de interfaces, influenciando sentimentos, experiências e significados. A escolha cuidadosa das cores em projetos, conforme Wheeler destaca, exige compreensão da teoria das cores e habilidade em comandar a consistência e o significado na amplitude da multimédia.
A cor é uma ferramenta poderosa de informação e gráficos no design de interfaces digitais, onde os utilizadores atribuem significados ao seu uso, segundo Cooper. Sistemas como Hexadecimal, RGB e RGBA são empregados para identificar cores com precisão no ambiente digital.
Cooper ressalta a importância de usar a cor com moderação, integrando-a bem aos outros elementos da linguagem visual em interfaces. A cor pode chamar a atenção para elementos importantes, indicar relacionamentos e comunicar status ou informações.
Algumas formas incorretas de utilizar a cor no design de interfaces incluem o excesso de cores, que pode tornar a experiência do utilizador lenta e dispersa, e a falta de integração da cor com outros elementos visuais, impedindo uma comunicação eficaz. É crucial para o designer considerar o equilíbrio e a harmonia na escolha e aplicação das cores para garantir uma experiência visual eficiente.
O RELEVO DA COERÊNCIA
GRÁFICA NO DESENVOLVIMENTO
DAS INTERFACES DE UMA MARCA
Resumo das paginas 20 à 31.
1.3.5 POSICIONAMENTO E ESTRATÉGIA DE UMA MARCA
O posicionamento e estratégia de uma marca, segundo Alina Wheeler, são elementos fundamentais para sua sobrevivência e sucesso. O posicionamento envolve a construção de uma identidade alinhada com valores transmitidos aos consumidores, enquanto a estratégia é a união de comportamentos, ações e comunicações consistentes e alinhadas. Esses conceitos são destacados por Andy Mosmans, ressaltando a influência dos valores na relação das pessoas com marcas e produtos.
Uma estratégia de marca eficaz deve ser diferenciada, poderosa e capaz de ultrapassar a concorrência, focando na ligação emocional com os consumidores, tanto em ambientes físicos quanto digitais. Construir uma marca demanda consistência e perseverança na implementação da estratégia escolhida, que não se resume apenas a uma posição, mas se traduz como uma perspectiva intrínseca de compreensão do mundo.
Neste caso, as marcas devem definir seu posicionamento no mercado e manter uma estratégia focada nos usuários para se destacarem da competição, destacando os seus produtos.
1.3.6 A IMPORTÂNCIA DA RELAÇÃO MARCA VS. UTILIZADOR, NA ERA DIGITAL
A relação entre marca e utilizador na era digital é crucial para o sucesso no mercado competitivo. Autores como Don Peppers, Martha Rogers e Bob Dorf destacam a importância de encarar essa relação como uma oportunidade de aprendizado, personalizando produtos para atender às necessidades individuais de cada cliente, aprimorando a capacidade da marca em se ajustar a cada interação.
A evolução tecnológica, especialmente a internet, desempenha um papel significativo nessa relação, permitindo a comunicação eficaz entre marca e consumidor, adaptando o marketing de forma mais personalizada. Autores como Daniel Raposo enfatizam a importância do ambiente virtual na interação marca-consumidor, destacando a relevância de um site customizado, intuitivo e de fácil acesso para garantir a eficácia na comunicação.
Compreender o comportamento dos utilizadores é fundamental na venda online. Joan Costa ressalta a importância de misturar o conteúdo da oferta com serviços de valor agregado para aproximar a marca do cliente, favorecendo o retorno do consumidor ao site.
A segmentação comportamental nas empresas na era digital é crucial para atender às reais necessidades dos clientes. Ferramentas de análise comportamental, conforme Shiva Nandan, são úteis para os gestores de marcas, permitindo a observação do comportamento de consumo online sem serem intrusivos.
Sugere-se, conforme Joan Costa citado por Daniel Raposo, quatro condições fundamentais para as marcas estabelecerem relações duradouras com os utilizadores:
1) Não causar perdas de tempo ao internauta, evitando a sobrecarga de
informação, a inconsistência gráfica e a falta de hierarquia e organização;
2) Garantir a individualidade de cada utilizador, tratando-o de forma
diferenciada e correspondendo às suas expectativas;
3) O serviço não termina no acto da venda, mas deve continuar a
resolver problemas ao cliente, como por exemplo através do serviço de
assistência pós-venda;
4) Criar comunidades ou fóruns de discussão livre entre os clientes.
Estes elementos são essenciais para promover uma relação sólida e duradoura entre marca e consumidor.
O design de interação digital remonta aos anos 1960, quando os engenheiros começaram a se concentrar na interação entre pessoas e computadores, introduzindo painéis de controle para usuários. Iniciativas como o projeto Xanadu de Ted Nelson e os padrões de e-mail por Ray Tomlinson impulsionaram o desenvolvimento do hipertexto e a introdução do mouse por Doug Engelbart em 1968.
O Xerox PARC, fundado em 1970, foi um marco na história da interação, originando produtos como o Xerox Alto e o Xerox Star, que incorporavam recursos de edição de texto, ícones e janelas. Em meados dos anos 80, o termo “interação” começou a se popularizar, mas foi nos anos 90 que o Design de Interação se tornou uma disciplina formal devido à explosão das interfaces gráficas para usuários (GUI) introduzidas pela Apple com o Lisa e o Macintosh.
O início dos anos 90 marcou a época dos computadores pessoais e a ascensão da web, levando à necessidade de melhor interação. O navegador Mosaic, de Marc Andreessen, foi essencial para o Design de Interação, introduzindo paradigmas como o botão de “voltar”. Esse período viu o crescimento da web e o termo “usabilidade” ganhou destaque na concepção de produtos digitais.
Com o crescimento exponencial da web, designers e arquitetos de informação emergiram, focando na criação de produtos centrados no usuário. O reconhecimento do Design de Interação cresceu ao longo do início do século XXI, culminando na formação da Interaction Design Association (IxDA) em 2005, evidenciando a maturidade da interação como disciplina e profissão indispensável para os produtos digitais.
2.2 PROJECTAR A INTERACÇÃO DIGITAL VISANDO A EXPERIÊNCIA DO UTILIZADOR
O design de interação digital está intrinsicamente ligado à experiência do usuário. Segundo Dan Saffer e Alan Cooper, esta disciplina enfoca as necessidades do usuário, garantindo uma harmonia entre o produto e o usuário, preocupando-se com comportamento, forma e conteúdo para proporcionar uma experiência, seja ela funcional ou emocional.
Cooper destaca que, assim como designers gráficos e de móveis criam experiências, os designers de interação influenciam a experiência das pessoas nos produtos digitais, moldando a forma como os usuários interagem com tais produtos. A estrutura do design de interação concentra-se em três conceitos base: forma, comportamento e conteúdo, preocupando-se com a interrelação entre esses elementos.
O processo de criação de produtos interativos, de acordo com a Associação Profissional de Experiência do Usuário (UXPA), envolve quatro fases principais: análise, design, implementação e desenvolvimento, garantindo a usabilidade e relacionando a forma e o conteúdo com o comportamento do usuário.
Saffer ressalta a importância dos fatores humanos na interação com produtos digitais, considerando as limitações do corpo humano, tanto física quanto psicologicamente, para garantir a conformidade dos produtos.
Ao longo do desenvolvimento do design de interação, gestores de projeto facilitaram a ligação entre as necessidades do mercado e os requisitos do produto. Com o crescimento e maturidade do mercado, os testes, designers e a introdução de elementos visuais importantes foram integrados no processo de criação.
A evolução do design de interação culmina na fase de Design Centrado em Objetivos, onde as capacidades, forma e comportamento do produto são testados antes da sua construção. Este processo visa garantir que o produto atenda às necessidades do usuário antes da implementação final.
O RELEVO DA COERÊNCIA GRÁFICA NO DESENVOLVIMENTO DAS INTERFACES DE UMA MARCA
Páginas 12 à 20
Com base na leitura feita, pude resumir os conteúdos do livro com o titulo acima citado da página 12 à págia 20.
O resumo foi feito de tema em tema para melhor compreensão, começando de : 1.1-Definição dos termos‘design’ e ‘gráfico’; 1.2-O designer de comunicação visual; “1.3 A MARCA”1.3.1 Breve enquadramento histórico; 1.3.2 a marca e o significado dos termos
imagem e identidade corporativa; 1.3.3-A importância da marca
e da sua comunicação; 1.3.4-A importância do “Branding”
(marca) para o sucesso comercial
1.1-DEFINIÇÃO DOS TERMOS
‘DESIGN’ E ‘GRÁFICO’
O termo “Design Gráfico” refere-se à prática de planejar, coordenar e organizar diversos elementos com o intuito de criar objetos visuais destinados à comunicação. Enquanto “design” abrange o processo de programação, seleção e organização para produzir comunicações visuais, o termo “gráfico” não se limita a desenhos, gravuras ou ornamentos, mas à produção de objetos visuais para comunicar mensagens específicas. Podendo entender que, o Design Gráfico consiste na criação de elementos visuais com o propósito de comunicação.
1.2-O DESIGNER DE COMUNICAÇÃO VISUAL
O profissional denominado “Designer de Comunicação Visual” desempenha a atividade de comunicação por meio de design, unindo três elementos essenciais: um método (desenho), um objetivo (comunicação) e um campo (o visual). Esse profissional comunica e projeta com foco nas pessoas, seguindo os princípios fundamentais estabelecidos por Donald Norman: fornecer um modelo conceptual eficaz e tornar as coisas visíveis. Assim, através de métodos próprios, o designer constrói mensagens visuais para comunicação, como destacado por Jorge Frascara.
1.3-A MARCA
1.3.1-BREVE ENQUADRAMENTO HISTÓRICO
Em 1907, Emil Rathenau, diretor da AEG (“Allgemeine Elektricitäts-Gesellschaft” uma das pioneiras empresa na indústria elétrica alemã), formou a primeira equipe consultiva para imagem corporativa ao contratar Peter Behrens e Otto Neurath, marcando um avanço nesse campo. Após a Segunda Guerra Mundial, designers individuais, como Giovanni Pintori, contribuíram significativamente para a imagem corporativa, exemplificado pelos pôsteres da Olivetti Corporation, revolucionando não só o design gráfico, mas também o de produto e arquitetônico. Nos Estados Unidos, entre os anos 50 e 60, designers como Paul Rand, Lester Beall e Saul Bass, junto a empresas como Lippincott & Margules e Chermayeff & Geismar, elevaram a identidade corporativa a um patamar profissional. Paul Rand, em particular, teve um papel fundamental na evolução do design de marcas no século XX. Essas contribuições foram essenciais para o desenvolvimento do design de identidade corporativa e marcas.
A compreensão da evolução do termo ‘imagem corporativa’ está profundamente ligada às transformações culturais ao longo do tempo. Além dos exemplos citados, Paul Rand foi responsável pela criação do logo da IBM em 1956, destacando a evolução da identidade corporativa da empresa ao longo dos anos. Outro exemplo significativo foi o trabalho de Lester Beall para a marca Caterpillar, onde ele desenvolveu um símbolo para representar todos os produtos da empresa, desde máquinas pesadas até material de escritório, refletindo a essência dos negócios da Caterpillar. Esses casos ilustram como o design de identidade corporativa evoluiu e se tornou crucial para transmitir a essência e a presença de uma empresa em diversos contextos.
1.3.2-A MARCA E O SIGNIFICADO DOS TERMOS
IMAGEM E IDENTIDADE CORPORATIVA
Os termos ‘Imagem Corporativa’ e ‘Identidade Corporativa’ têm sido interpretados de formas diversas ao longo do tempo e, muitas vezes, são confundidos devido à novidade da disciplina do Design. Enquanto a identidade corporativa representa a organização como um todo, a imagem corporativa reflete as formas de representação desenvolvidas pelos públicos-alvo, sendo o primeiro um aspecto interno e o segundo externo, como referido por Daniel Raposo.
O termo ‘Imagem Corporativa’ parece ter surgido na década de 1950 e foi inicialmente usado por Walter Margulies para descrever programas complexos e coesos de design resultantes de investigação e análise. A evolução do termo ‘Identidade Corporativa’ está relacionada com transformações sociais e culturais, abordando as mudanças funcionais e simbólicas.
A identidade corporativa vai além de um simples símbolo visual, sendo tangível e apelando aos sentidos, unificando elementos em sistemas completos que amplificam a diferenciação e tornam significados acessíveis. É a forma como uma empresa se relaciona com seus clientes, criando emoções e percepções. A marca estabelece uma relação emocional com os consumidores, transmitindo valores e afirmações sociais e psicológicas.
Frederico D’Orey destaca a relevância crescente da marca em um contexto onde produtos se assemelham, ciclos de vida são mais curtos e a fidelidade dos clientes diminui. Uma marca é mais do que um logotipo; é uma proposta para uma experiência e um conjunto de valores associados a uma organização, bens ou serviços na mente dos consumidores.
Além disso, a palavra ‘símbolo’ é frequentemente mal interpretada, confundida com signos, marcas ou sinais de descobertas científicas. Todos esses termos continuam a evoluir conforme a transformação cultural, sociológica e tecnológica, especialmente no contexto do desenvolvimento da internet e outras mudanças sociais, influenciando o campo do Design.
Resumindo, esses conceitos fundamentais – marca, símbolo, imagem corporativa e identidade corporativa – estão em constante evolução, moldados pelas mudanças culturais e sociais, redefinindo-se no contexto dinâmico do Design e da sociedade contemporânea.
1.3.3-A IMPORTÂNCIA DA MARCA
E DA SUA COMUNICAÇÃO
A marca é muito mais do que um símbolo visual; é a promessa, a grande ideia e as expectativas que residem na mente de cada consumidor, representando produtos, serviços ou uma empresa. Assim como a escrita manual, a marca carrega consigo significado e representa algo, embora nem tudo se comunique visualmente.
De acordo com Costa, tudo ao nosso redor comunica, mas nem tudo transmite mensagens explícitas; elementos como signos e símbolos têm a capacidade de comunicar algo que não está claramente expresso na mensagem, sendo interpretado com base no significado ou simbolismo. O significado é uma construção autônoma do indivíduo perante os estímulos do ambiente, sejam naturais ou artificiais, onde os estímulos podem ser interpretados de formas diversas.
Quando uma marca busca comunicar algo, ela estuda vários campos relativos ao assunto para efetivamente transmitir sua mensagem, utilizando significados implícitos no senso comum dos signos que as pessoas reconhecem. Muitos significados não são comunicados diretamente, mas deduzidos pela experiência empírica do ser humano. Estas formas eficazes de comunicação são criadas a partir da capacidade de dedução e interpretação do homem em relação ao ambiente que o rodeia.
Em suma, a marca é um complexo de significados e expectativas que se instauram na mente do consumidor, transmitindo mensagens e promessas, e é interpretada através de uma gama diversificada de signos e símbolos, gerando significados que vão além da comunicação direta.
1.3.4 A IMPORTÂNCIA DO “BRANDING”
(MARCA) PARA O SUCESSO COMERCIAL
Segundo Daniel Raposo, a marca desempenha três funções principais: Distinção, Descrição (que se divide em Categoria e Atributo) e, por conseguinte, pode ver o seu significado modificado ao longo do tempo devido a vários fatores, já que seus públicos consideram a performance da empresa e seus produtos, independentemente da intenção do emissor.
Em uma perspectiva mais comercial e associada ao branding, Alina Wheeler destaca que uma marca forte se destaca em um mercado competitivo, conquistando a confiança e a lealdade das pessoas, independentemente de ser uma startup, organização sem fins lucrativos ou produto. Ela sublinha que uma marca é crucial para o sucesso, afetando diretamente a percepção e a decisão do consumidor.
Wheeler, em linha com a perspectiva de marketing explicada por Raposo, reconhece três funções fundamentais da marca: Navegação (auxilia na escolha entre opções apresentando-se e se distinguindo), Reafirmação (comunica a qualidade do produto ou serviço e reforça a importância da escolha) e Compromisso (usa imagens, linguagem e associações para que os clientes se identifiquem e se comprometam com a marca).
As marcas desempenham papéis essenciais no mercado, influenciando a decisão do consumidor, comunicando qualidade e diferenciando-se para criar identificação e comprometimento com os consumidores.
