h=p://bjork.com/# v Projecto Integrador / 2013 USER EXPERIENCE DA INTERFACE GRÁFICA À EXPERIÊNCIA Bruno Nobre - PDF
h=p://bjork.com/# v Projecto Integrador / 2013 USER EXPERIENCE DA INTERFACE GRÁFICA À EXPERIÊNCIA Bruno Nobre
Download "h=p://bjork.com/# v Projecto Integrador - 2012 / 2013 USER EXPERIENCE DA INTERFACE GRÁFICA À EXPERIÊNCIA Bruno Nobre bruno.nobre@iade."
Manuella da Conceição Madureira
1 Projecto Integrador / 2013 Bruno Nobre Cláudia Pernencar USER EXPERIENCE DA INTERFACE GRÁFICA À EXPERIÊNCIA h=p://bjork.com/# v 1
2 USER EXPERIENCE DA INTERFACE GRÁFICA À EXPERIÊNCIA v h=p:// USER EXPERIENCE PENSAR A INTERFACE GRÁFICA A PARTIR DA 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. 2
3 USER EXPERIENCE PENSAR A INTERFACE GRÁFICA A PARTIR DA EXPERIÊNCIA h=p://vimeo.com/ v GUI DESIGN DE INTERAÇÃO E DESIGN DE INTERFACES Interfaces digitais DESIGN DE INTERAÇÃO DESIGN DE INTERFACES UFlizadores DESIGNER DEVELOPER DESIGNER 3
4 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. " New Riders, Berkeley, 2007, p: 44-52" " 4
5 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 o Uhlizador? 5
6 GUI DESIGN DE INTERFACES Ao criar a forma ou aparência de um objecto está a dar início ao Processo do Design. Bernard, C. & Summers, S. Dynamic Prototyping with Sketchflow in Expression Blend. Person Educahon, Inc., 2010, p: 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; Audio. 6
7 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. GUI DESIGN DE INTERFACES SISTEMA DE GRELHAS v Em 2009 ganhou 2 prémidos: * Melhor site informahvo - People's Voice Award; * Melhor uhlização de vídeo - TED (Technology Entertainment Design ) Conference. 7
8 GUI DESIGN DE INTERFACES SISTEMA DE GRELHAS ipad Screenshots Revista Ipsilon e Wired GUI DESIGN DE INTERFACES PSICOLOGIA DA FORMA 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. 8
9 GUI DESIGN DE INTERFACES PSICOLOGIA DA FORMA 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. baixa pregnância alta pregnância 9
10 GUI DESIGN DE INTERFACES PSICOLOGIA DA FORMA 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 10
11 GUI DESIGN DE INTERFACES PSICOLOGIA DA COR GUI DESIGN DE INTERFACES COR h=p://colorschemedesigner.com/ v 11
12 GUI DESIGN DE INTERFACES TIPOGRAFIA 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 alistapart.com v 12
13 GUI DESIGN DE INTERFACES SISTEMAS PICTÓRICOS ACROBAT CONNECT GUI DESIGN DE INTERFACES SISTEMAS PICTÓRICOS h=p:// qmmdgonqw4 v 13
14 GUI DESIGN DE INTERFACES ANIMAÇÕES v h=p:// GUI DESIGN DE INTERFACES - AUDIO ipad Screenshots Revista Wired 14
15 GUI DESIGN DE INTERFACES - AUDIO h=p://lights.elliegoulding.com/ v GUI DESIGN DE INTERFACES PROCESSO DO DESIGN DO SKETCH AO DESIGN 15
16 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. Buxton, B. " Skecthing user experience. " Morgan Kaufmann, San Francisco, 2007, p: " GUI DESIGN DE INTERFACES PROCESSO DO DESIGN 16
17 GUI DESIGN DE INTERFACES PROCESSO DO DESIGN DESENHAR A IDEIA INTERATIVA - METODOLOGIA 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. Figure 143: A Simple Finger Exercise One can create and experience an interactive paper interface in two minutes 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 Buxton, B. " Skecthing user experience. " Morgan Kaufmann, San Francisco, 2007, p: " GUI DESIGN DE INTERFACES PROCESSO DO DESIGN DESENHAR A IDEIA INTERATIVA - METODOLOGIA Buxton, B. " Skecthing user experience. " Morgan Kaufmann, San Francisco, 2007, p: " 17
18 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: " " 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. " Person Education, Inc., 2010, p: " " 18
19 GUI DESIGN DE INTERFACES DO SKETCHING AO PROTÓTIPO WIREFRAME GUI DESIGN DE INTERFACES DO SKETCHING AO PROTÓTIPO WIREFRAME não é Design! 19
20 GUI DESIGN DE INTERFACES NÃO ESQUECER CONSISTÊNCIA E UNIDADE. 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 HIERARQUIA VISUAL Estrutura uma hierarquia visual forte e consistente. 20
21 GUI DESIGN DE INTERFACES v h=p:// GUI DESIGN DE INTERFACES - REFERÊNCIAS Layout h=p://tutorialblog.org/grid- systems- in- web- design/ h=p://grid.mindplay.dk h=p:// h=p:// Tipgrafia h=p://hpografos.net/indice.html h=p://ilovetypography.com/ 21
22 GUI DESIGN DE INTERFACES - REFERÊNCIAS Tendências h=p://designmodo.com/responsive- design- examples/ h=p:// h=p://webdesignledger.com/hps/web- design- trends- in h=p:// h=p:// h=p://factorymagazine.com/ h=p:// 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