Bruno Nobre bruno.nobre@iade.pt
GRAPHICAL USER
INTERFACE DESIGN
Cláudia Pernencar claudia.pernencar@iade.ptProjecto Integrador -‐ 2012 / 2013
vh=p://bjork.com/#
v
h=p://www.sound.philips.com/ows/
USER EXPERIENCE – DA INTERFACE GRÁFICA À EXPERIÊNCIA
EXPERIÊNCIA PASSADA:
→ Favorece a compreensão da forma;
→ Através da associação, certas formas só podem ser compreendidas se já as conhecermos.
v
h=p://vimeo.com/11886557
USER EXPERIENCE – PENSAR A INTERFACE GRÁFICA A PARTIR DA EXPERIÊNCIA
Interfaces
digitais INTERAÇÃODESIGN DE INTERFACESDESIGN DE
UFlizadores DESIGNER
DEVELOPER DESIGNER
GUI – ELEMENTOS QUE DEFINEM O DESIGN DE INTERAÇÃO
→ Movimento – Uma interação é um hpo de comunicação que pressupõem movimentos; → Espaço – Os objetos no espaço 2D podem movem-‐
se para o espaço 3D, pois a perspechva cria, no lado X a altura, no Y a largura e no eixo Z a profundidade contudo;
→ Tempo – Todas as interações ocorrem durante um período. Podem ser instantâneas ou ser mais demorosas, dependo do hpo de comunicação. O tempo digital por vezes, não é o tempo humano;
Saffer, D. "
Designing for interactions. "
New Riders, Berkeley, 2007, p: 44-52" "
GUI – ELEMENTOS QUE DEFINEM O DESIGN DE INTERAÇÃO
→ Aparência – Está relacionado com contextos culturais e variáveis como a proporção, a estrutura, o tamanho, a forma, o peso e a cor;
→ Textura – Pode ser considerada como parte da aparência mas, a sensação que o objecto transmite é uma pista para o Uhlizador para o modo como deve ser manipulado.
→ Som – Possui muitas variáveis. É uma pequena parte dos projetos e é importante, especialmente quando falamos em determinados hpos de alertas nos disposihvos.
Saffer, D. "
Designing for interactions. "
GUI – DESIGN DE INTERFACES
Preocupações ao nível do layout que o Designer não pode descurar:
→ A imagem mantêm-‐se a mesma? → O formato é fixo ou móvel?
→ Uhliza-‐se a grelha com uma coluna ou com duas?
GUI – DESIGN DE INTERFACES
Alguns dados imprescindíveis que o Designer deve ter em conta relaFvamente ao target a que se desFna a
aplicação?
→ Quem são os Uhlizadores e qual a informação que o Designer tem sobre eles?
→ Que hpo de comportamento assumem?
→ Quando é que interagem? Se é num espaço público ou privado Qual a intensidade da interação? Mais à noite ou de dia?
→ Qual a razão da uhlização de determinada aplicação? → Que valor acrescentado traz o conteúdo da mesma para
Ao criar a forma ou aparência de um objecto está a dar início ao Processo do Design.
GUI – DESIGN DE INTERFACES
Bernard, C. & Summers, S.
Dynamic Prototyping with Sketchflow in Expression Blend.
Person Educahon, Inc., 2010, p: 51-‐57.
GUI – DESIGN DE INTERFACES – ELEMENTOS DO FLUXO DE UMA INTERFACE
→ Sistema de grelhas; → Tipografia;
→ Cor (Psicologia da cor);
→ Forma dos objetos (Psicologia da forma); → A representação dos sistemas pictóricos; → Animações;
GUI – DESIGN DE INTERFACES – SISTEMA DE GRELHAS
Ajuda os Designers na organização da informação: → Divide a área de ecrã em colunas e linhas incluindo o
espaço em branco que as separa. São sugestões de trabalho, não devem ser interpretadas como guidelines rígidas com excepção do Design para aplicações mobile e tablet;
→ Podem deixar elementos visuais tais como imagens, barras de ferramentas e espaços de trabalho, para criar grandes blocos que combinam com estruturas de colunas e linhas;
→ Torna-‐se padrão no Design de Interfaces.
v
www.bbc.com
Em 2009 ganhou 2 prémidos:
* Melhor site informahvo -‐ People's Voice Award;
* Melhor uhlização de vídeo -‐ TED (Technology Entertainment Design ) Conference.
iPad Screenshots – Revista Ipsilon e Wired
GUI – DESIGN DE INTERFACES – SISTEMA DE GRELHAS
PROXIMIDADE:
→ Os elementos tendem a agrupar-‐se de acordo com a distância a que se encontram uns dos outros.
→ Elementos que estão mais perto tendem a ser percebidos como um grupo.
SEMELHANÇA:
→ Eventos semelhantes agrupam-‐se entre si. → Pode ocorrer por: intensidade, cor, tamanho,
forma, etc.
CLAUSURA:
→ O princípio de que uma forma se completa e se “fecha” sobre si mesma, formando uma figura delimitada.
→ Este conceito relaciona-‐se a um “fechamento” visual. Necessidade de completar visualmente um objecto incompleto.
CONTINUIDADE:
→ Há uma tendência na nossa percepção de seguir uma direcção e ligar os elementos de modo a que pareçam con„nuos ou a fluir para uma direcção específica.
GUI – DESIGN DE INTERFACES – PSICOLOGIA DA FORMA
PREGNÂNCIA:
→ Todas as formas tendem a ser percebidas pelo seu carácter mais simples.
→ É o princípio da simplificação natural da percepção. Quanto mais simples, mais facilmente é assimilada.
alta pregnância
baixa pregnância
SIMETRIA:
→ Em termos uma composição, as simétricas transmitem formalismo, enquanto que as assimétricas transmitem informalidade e dinamismo.
CONTRASTE:
→ É o factor mais primário da percepção de um objecto: Delimita do fundo;
→ O contraste pode criar dishnção e ênfase.
GUI – DESIGN DE INTERFACES – PSICOLOGIA DA FORMA
iPad Screenshot – Revista Ipsilon
GUI – DESIGN DE INTERFACES – PSICOLOGIA DA COR
GUI – DESIGN DE INTERFACES – COR
v
Algumas considerações: → Hierarquia percep„vel;
→ Preferência por fontes sem serifas. → Ler o texto (não fazer só Copy/Paste).
GUI – DESIGN DE INTERFACES – TIPOGRAFIA
v
GUI – DESIGN DE INTERFACES – TIPOGRAFIA
GUI – DESIGN DE INTERFACES – SISTEMAS PICTÓRICOS
ACROBAT CONNECT
v
h=p://www.youtube.com/watch?v=-‐qmmdGonQW4
GUI – DESIGN DE INTERFACES – ANIMAÇÕES
v
h=p://www.jimcarrey.com/
iPad Screenshots – Revista Wired
GUI – DESIGN DE INTERFACES -‐ AUDIO
v
h=p://lights.elliegoulding.com/
DO SKETCH AO DESIGN
Buxton, B. "
Skecthing user experience. "
Morgan Kaufmann, San Francisco, 2007, p: 229-395"
GUI – DESIGN DE INTERFACES – PROCESSO DO DESIGN
Mood board
→ Método uhlizado pelos Designers que ajuda a projetar uma ideia . Pode ser um conjunto de colagens de
fotografias, desenhos, recortes e ou amostras de tecido. Por norma não verbaliza o conceito;
Concept board
→ Fase posterior ao Mood board, onde o conceito deve estar definido aos níveis da cor, elementos gráficos e aspectos formais;
Story board
→ Um dra‰ só com imagem e sem cor, que permite perceber o desenrolar da ação.
http://www.youtube.com/watch?v=mL-jWBFRxoE"
DESENHAR A IDEIA INTERATIVA -‐ METODOLOGIA
Figure 143: A Simple Finger Exercise One can create and experience an interactive paper interface in two min-utes with nothing more than Post-it notes and a pen. Push a button to go to a particular page. Push the wrong button and return to the first page.
372 Program Label Current Program Create Program Change Program Override Program Set Time/Date Clock Date
Figure 145: Paper Interface to a Programmable Climate Control System The basic interface is made up of buttons and circular dials, and displays. The concept is that the user would interact directly on the screen by means of a touch screen.
GUI – DESIGN DE INTERFACES – PROCESSO DO DESIGN
Buxton, B. "
Skecthing user experience. "
Morgan Kaufmann, San Francisco, 2007, p: 229-395"
GUI – DESIGN DE INTERFACES – PROCESSO DO DESIGN
DESENHAR A IDEIA INTERATIVA -‐ METODOLOGIA
Buxton, B. "
GUI – DESIGN DE INTERFACES – DO SKETCHING AO PROTÓTIPO
→ Sketching inicial -‐ Através de simples esboços é possivel ao Designer transmihr as ideias e ou conceitos do projecto. Nesta fase pode incluir pequenos detalhes que permitem caracterizar as possíveis tarefas do Uhlizador;
→ Sketching dinâmico -‐ Depois do Sketching inicial, experimentar algumas funcionalidades de navegação acompanhadas por animações básicas. Começam os primeiros testes de viabilidade das ideias e se algo não funcionar, o melhor é redesenhar;
Bernard, C. & Summers, S. "
Dynamic Prototyping with Sketchflow in Expression Blend. "
Person Education, Inc., 2010, p: 24-25." "
GUI – DESIGN DE INTERFACES – DO SKETCHING AO PROTÓTIPO
→ ProtóFpo do Sketching -‐ A construção dos cenários das tarefas, consiste na fase final. O Designer deve
subshtuir os elementos com eshlo de esboço por algo mais trabalhado ao pormenor (Processo Digital), definindo igualmente o sistema de interacção entre os conteúdos de forma a compreender o fluxos das tarefas que o Uhlizador tem de fazer.
Bernard, C. & Summers, S. "
Dynamic Prototyping with Sketchflow in Expression Blend. "
GUI – DESIGN DE INTERFACES – DO SKETCHING AO PROTÓTIPO
WIREFRAME
WIREFRAME não é Design!
→ Deve-‐se estabelecer um sistema de grelha e eshlos para o texto e gráficos;
→ Dessa forma consegue-‐se ritmo e unidade ao longo de todas as páginas;
→ A consistência gráfica reforça o senhdo de “síAo” e ajuda à rápida idenhficação dos diversos elementos;
GUI – DESIGN DE INTERFACES – NÃO ESQUECER – CONSISTÊNCIA E UNIDADE.
GUI – DESIGN DE INTERFACES – NÃO ESQUECER – HIERARQUIA VISUAL
→ Estrutura uma hierarquia visual forte e consistente.
v
h=p://www.mplusma=ers.hk/inkart/
GUI – DESIGN DE INTERFACES
→ Layout h=p://tutorialblog.org/grid-‐systems-‐in-‐web-‐design/ h=p://grid.mindplay.dk h=p://www.designbygrid.com/ h=p://www.thegridsystem.org/ → Tipgrafia h=p://hpografos.net/indice.html h=p://ilovetypography.com/
→ Tendências h=p://designmodo.com/responsive-‐design-‐examples/ h=p://www.computerarts.com.pt/tendenciaswebdesign2011/ h=p://webdesignledger.com/hps/web-‐design-‐trends-‐in-‐2011 h=p://www.creahveapplicahons.net h=p://www.fubiz.net/ h=p://factorymagazine.com/ h=p://www.smashingmagazine.com/
GUI – DESIGN DE INTERFACES -‐ REFERÊNCIAS
Bernard, C. & Summers, S. Dynamic Prototyping with Sketchflow in
Expression Blend. Person Educahon, Inc., 2010, p: 24-‐25;
Buxton, B. Skecthing user experience. Morgan Kaufmann, San Francisco, 2007;
Heller, E. A psicologia das cores. Barcelona, Editorial Gustavo;
Plaisant, C. & Shneiderman, B. Designing the user interface. Person Higher Educahon, 5th Edihon, Boston, 2010;
Saffer, D. Designing for interacAon: CreaAng smart applicaAons and
clever devices. Berkeley CA: New Riders & Aiga. 2007.
