DESIGN DE INTERFACES GRÁFICAS CORPORATE TV / DIGITAL SIGNAGE Bruno Nobre bruno.nobre@iade.pt
O que é? Digital Signage é um tipo de painel informativo tipicamente colocado em espaços públicos, usados normalmente para informar ou publicitar.
DESIGN DE INTERFACES GRÁFICAS CORPORATE TV / DIGITAL SIGNAGE
Tendência: Interactividade e Multiplataforma Expo UrbanTv: Milano 2015 Multi - platform TV channel
DESIGN DE INTERFACES GRÁFICAS CORPORATE TV / DIGITAL SIGNAGE
DESIGN DE INTERFACES GRÁFICAS CORPORATE TV / DIGITAL SIGNAGE
Tendência: Perversiva e Direccionada Minority Report Steven Spielberg (2002)
Tendência: Perversiva e Direccionada
Formatos:
Formatos:
Formatos:
Formatos:
DESIGN DE INTERFACES GRÁFICAS CORPORATE TV / DIGITAL SIGNAGE Formatos:
Como desenhar uma Interface Gráfica para Digital Signage ou Canal Corporativo?
Através de disciplinas que estudam: - Psicologia da Cor - Psicologia da Forma - Princípios de Usabilidade - Experiência do Utilizador - Design de Interacção - Design Gráfico - (entre outras)
Proposta de método: 1. Análise da Problemática; 2. Definição de Objectivos; 3. Criação de Personas; 4. Arquitectura de Informação; 5. Design de Wireframes; 6. Design da Interface; 7. Prototipagem; 8. Testar, testar, testar!
1. Análise da problemática Pesquisa e faz a identificação de: Oportunidades; Diferenciação; Contexto de uso; Ecossistema; Público-alvo; Tecnologia; Limitações; e todos os restantes factores que possam influenciar o projecto!
1. Análise da problemática Esboçar a ideia
2. Definição de Objectivos Devem ser respondidas as perguntas de base ao conceito geral do projecto: Qual o propósito (statement)? Quais os objectivos principais? Qual o público-alvo? Que informações disponibilizar? De que forma disponibilizar?
2. Definição de Objectivos Mensuráveis (measurable) Específicos (specific) SMART Alcançáveis (attainable) Temporizável (time-bound) Realistas (realistic)
3. Criação de Personas
3. Criação de Personas Identificar as necessidades/tarefas dos utilizadores:
DESIGN DE INTERFACES GRÁFICAS CORPORATE TV / DIGITAL SIGNAGE
3. Criação de Personas
DESIGN DE INTERFACES GRÁFICAS CORPORATE TV / DIGITAL SIGNAGE
4. Arquitectura de Informação Identificar e organizar os conteúdos: Organizar e dividir por áreas lógicas os conteúdos a incluir no website; Fazer uma catalogação geral dos conteúdos mais relevantes para o tema que se está a abordar; Hierarquizar os conteúdos a incluir, mediante os objectivos iniciais;
4. Arquitectura de Informação Saber o que disponibilizar e quando disponibilizar! Tornar claro o que é complexo Richard Wurman (1997) in Information Architects
4. Arquitectura de Informação Antes da AI Depois da AI
4. Arquitectura de Informação Contexto Conteúdo Utilizador Peter Morville (2004) In Semiantic Studios
5. Wireframing Identificar blocos; Determinar dimensões; Escolher posições; Manter separações; Escolher contrastes;
5. Wireframing
5. Wireframing
5. Wireframing
5. Wireframing
5. Wireframing
6. Design da Interface Gráfica Algumas considerações sobre: Formatos; Psicologia da Cor Psicologia da Forma Tipografia; Uniformidade; Branding; Exemplos;
6. Design da Interface Gráfica Formatos e tamanhos (em pixéis): 1920x1200 1680x1050 1280x1024 1440x900 640x480 1280 x800 1024x768 800x600 640x480 800x600 1024x768 1280x800 1280x1024 1440x900 1680x1050 1920x1200
6. Design da Interface Gráfica Áreas de Segurança:
6. Design da Interface Gráfica Cor - Psicologia da Cor:
6. Design da Interface Gráfica Cor - Psicologia da Cor:
6. Design da Interface Gráfica
http://colorschemedesigner.com/
6. Design da Interface Gráfica Forma - Psicologia da Forma:
6. Design da Interface Gráfica Forma - Psicologia da Forma: ASSOCIAÇÃO PROXIMIDADE SEMELHANÇA CLAUSURA CONTINUIDADE PREGNÂNCIA CONTRASTE SIMETRIA
6. Design da Interface Gráfica Sistema de Grelha:
6. Design da Interface Gráfica Sistema de Grelha:
6. Design da Interface Gráfica Sistema de Grelha: http://www.thegridsystem.org/ http://grid.mindplay.dk http://www.designbygrid.com/ http://tutorialblog.org/gridsystems-in-web-design/
6. Design da Interface Gráfica Sistema de Grelha: Wireframing Um esboço desenhado à mão é suficiente para ter uma ideia geral e já bem definida do pretendido.
6. Design da Interface Gráfica Sistema de Grelha: Wireframing
6. Design da Interface Gráfica Sistema de Grelha: Wireframing
6. Design da Interface Gráfica Sistema de Grelha: Wireframing
6. Design da Interface Gráfica Sistema de Grelha: Wireframing
6. Design da Interface Gráfica Sistema de Grelha: Wireframing
6. Design da Interface Gráfica Algumas considerações: Efeitos 3D, usados (muito) pontualmente; (e aplicar sempre cores neutras como fundo) Tendência para flat design;
6. Design da Interface Gráfica Algumas considerações: Cores fortes, usadas só pontualmente; Atenção aos ícones giros (devem ser usados com bastante contenção)
6. Design da Interface Gráfica Algumas considerações: Espaço negativo em abundância;
6. Design da Interface Gráfica Algumas considerações: Texto não deve ser centrado;
6. Design da Interface Gráfica Algumas considerações: Colocar sempre o texto mais IMPORTANTE com maior destaque que o texto dito normal
6. Design da Interface Gráfica A tipografia é tão importante como qualquer outro media, mas tem limitações:
6. Design da Interface Gráfica Tipografia:
6. Design da Interface Gráfica Tipografia: Leitura (16%) vs. Reconhecimento (79%); Ler em ecrã é cansativo (25% mais lento que papel); Impulso para seguir apontadores; Utilizadores não querem perder tempo ; Destacar as palavras-chave do texto; Apenas uma ideia por parágrafo; Pirâmide invertida: começar pelas conclusões;
6. Design da Interface Gráfica Tipografia: http://tipografos.net/indice.html http://ilovetypography.com/
6. Design da Interface Gráfica Exemplos:
6. Design da Interface Gráfica Exemplos:
6. Design da Interface Gráfica Exemplos:
6. Design da Interface Gráfica Exemplos:
DESIGN DE INTERFACES GRÁFICAS CORPORATE TV / DIGITAL SIGNAGE 6. Design da Interface Gráfica Exemplos:
6. Design da Interface Gráfica Exemplos:
6. Design da Interface Gráfica Exemplos:
6. Design da Interface Gráfica Exemplos:
6. Design da Interface Gráfica Exemplos:
6. Design da Interface Gráfica Exemplos:
6. Design da Interface Gráfica Branding:
6. Prototipagem Prototipagem é uma forma de reproduzir representações mais baratas (mas menos precisas) de uma interface; A prototipagem é essencial num processo de design em espiral, tanto nas primeiras iterações, como nas iterações posteriores; É uma forma de: Obter feedback mais cedo e mais barato; Experimentar alternativas; Fazer mudanças mais facilmente;
6. Prototipagem
6. Prototipagem BAIXA-FIDELIDADE Omite detalhes, usa técnicas mais baratas e experimenta diversas técnicas de interação; (e.g. esboço; desenho à mão) ALTA-FIDELIDADE Mais próximo do resultado final; (e.g. maquete executada no computador que recria as mesmas funcionalidade, contudo ainda não implementadas)
6. Prototipagem Protótipo interactivo em papel: Esboço em papel da aparência do ecrã; Os pedaços de papel representam as janelas, os menus e as caixas de diálogo; A interação é natural; aponta-se com o dedo; escrita = digitação; Uma pessoa simula as operações do computador; organiza as várias peças de papel conforme solicitado; descreve o que está a acontecer ao utilizador; pode-se escrever as respostas no ecrã ; Baixa fidelidade no aspecto e no interagir Alta-fidelidade em profundidade (funcionalidades); pessoa a simular o backend;
6. Prototipagem Porquê fazer Prototipagem em Papel: Mais rápido de construir; (sketching é mais rápido que programar) Mais rápido de fazer mudanças; (entre testes ou mesmo durante um teste) Não há investimento na programação; (tudo pode ser deitado fora à excepção do design) Dá uma perspectiva geral do sistema; (o designer não tem que se preocupar com detalhes e os clientes dão sugestões mais criativas são menos picuinhas) Não programadores podem ajudar; (não são necessárias competências aprofundadas)
6. Prototipagem Papéis para a equipa de design: Computador Simula o protótipo; Não dá nenhum feedback que o computador não desse; Facilitador Apresenta a interface e as tarefas ao utilizador; Encoraja o utilizador a pensar alto fazendo questões; Delimita o teste para não sair do caminho estipulado; Observador Não pode esboçar opiniões; Tira notas da interacção;
6. Prototipagem O que é que se pode aprender com um Protótipo em Papel? Modelo Conceptual Os utilizadores entenderam o modelo estabelecido? Funcionalidade O sistema faz o que é preciso? Faltam recursos? Navegação e Fluxo de Tarefas Os utilizadores encontram o seu caminho para chegar onde querem? Terminologia Os utilizadores perceberam os rótulos empregues? Conteúdo O que é que precisa estar no ecrã?
6. Prototipagem O que é que NÃO se pode aprender com um Protótipo em Papel? Aspecto (cor, fonte, etc ); Tempo de resposta do sistema; Pequenas mudanças podem não ser percepcionadas; Utilizadores tendem a não explorar a interface;
6. Prototipagem Exemplo:
6. Prototipagem Protótipo em Computador Simulação interactiva através de software; Alta-fidelidade no aspecto e no sentir; Baixa-fidelidade em profundidade; (a prototipagem em papel tinha uma pessoa a simular o backend; o computador não)
6. Prototipagem O que é que se pode aprender com um Protótipo em Computador? Tudo o mesmo que num protótipo em papel, mais: Layout do ecrã; Cores, fontes, icones; Feedback interactivo; Percepção de problemas relacionados com a Lei de Fitts;
6. Prototipagem Exemplo:
6. Prototipagem Feiticeiro de Oz Simulação de software com intervenção directa de um ser humano; Feiticeiro de Oz = pessoa atrás da cortina ; O feiticeiro está geralmente, mas nem sempre, escondido; É uma técnica usada com frequência para testar tecnologia futura;
DESIGN DE INTERFACES GRÁFICAS CORPORATE TV / DIGITAL SIGNAGE