DESIGN E MODERNIDADE
4.7. PROCESSOS DE DESENVOLVIMENTO DE INTERFACES
Como já referido anteriormente, o designer aplica o desenvolvimento do seu trabalho, sempre em prol do utilizador. No entanto e apesar de todo o processo ser realizado em função das espectativas e necessidades do utilizador, também o trabalho do designer de interação, passa por tornar o serviço/interface apelativo e convidativo à sua utilização. De forma simples, segundo Alan Cooper et al. (2014), o design de interfaces é orientado para o tratamento e disposição dos elementos visuais que iram comunicar o comportamento e as informações.
“Every element in a visual composition has a number of properties, such as shape and color, that work together to create meaning.” 29 (Cooper et
al. 2014, p. 406)
A forma pela qual as propriedades são aplicadas a cada elemento e como estas se alteram ao longo da sua interação, permite ao utilizador criar um sentido lógico do conteúdo e da própria identidade gráfica da interface, como por exemplo, a utilização da mesma cor em dois objetos, levando o utilizador a relacioná-los, enquanto que, quando distinguidos por cores diferenciadas, o utilizador automaticamente irá assumi-los como distintos. Desta forma, o designer consegue tornar a sua mensagem nítida, abdicando da utilização de apenas palavras. No desenvolvimento da interface, Alan Cooper et al. (2014), consideram essenciais alguns pontos como a forma, a composição, a tipografia e a cor. A partir destes elementos, o designer deve tirar o máximo partido destes e saber como transmitir comportamentos e informações de forma simples e eficazmente. Para a conceção de interfaces são necessárias diversas fases de desenvolvimento, tanto ao nível do design propriamente dito, como na implementação deste. Para a implementação deste tipo de identidade visual, são utilizados meios de prototipagem pelos quais possibilitaram ao designer criar e testar os níveis de usabilidade desse mesmo serviço.
Segundo Robin Landa (2011), existem 10 fases essenciais no processo de desenvolvimento de uma interface:
1. Plano do projeto - análise e orientação para orientar e definir objetivos e formar a equipa de profissionais necessária.
2. Briefing31- delinear a estratégia criativa, relativamente à marca ou identidade visual dessa, posicionamento e público-alvo, e todos os outros objetivos dados no briefing.
3. Estrutura do site - planear, mapear e preparar a arquitetura de conteúdos e informações (Landa 2011). Para projetar estruturalmente este tipo 30T.L. "Cada elemento numa
composição visual tem um número de propriedades, tal como a forma e a cor, que funcionam juntas de forma a criar um significado."
31 Ato ou instância de
fornecer instruções precisas ou informações essenciais (Merriam-Webster 2020)
de interfaces, é utilizado um método de nome Wireframes (fig. 11 pág. 78). Um wireframe 32 é utilizado para dispor conteúdos e funcionalidades numa página, levando em conta as necessidades e ações de um utilizador. Este tipo de método é utilizado no início do processo de desenvolvimento, de forma a estabelecer a estrutura básica (layout) de uma página antes da execução do design visual e do próprio conteúdo da página. O objetivo deste é fornecer uma compreensão visual de uma página no início de um projeto para obtenção da aprovação das partes interessadas e da equipa do projeto, antes de qualquer iniciação à parte criativa. Tal modelo, pode também ser utilizado de forma a criar uma navegação global do serviço, garantindo assim a terminologia e estrutura utilizadas de forma a atender às expectativas do utilizador e do cliente, permitindo apresentá-lo e receber um feedback inicial para testes de usabilidade (Neil 2019). Toda a estrutura deste wireframe passa pela conjunção de guias visuais para demonstrar a estrutura da página e de alguns elementos gráficos como caixas, para identificar os diversos elementos estruturais que podem existir ao longo da página.
“The key to making good wireframes is to leave out all visual elements. Use boxes and lines to represent pictures and text.” 33 (Kyrnin 2019)
Segundo Kyrnin (2019), os elementos que devem ser incluídos num wireframe são caixas para elementos gráficos, colocação de elementos representativos dos títulos e subtítulos, uma estrutura de layout simples, botões de ação e Blocos de texto.
4. Delinear conteúdos.
5. Design concetual - criar um conceito baseado na estratégia, identidade da marca e briefing fornecido.
6. Desenvolvimento do design visual, através da criação de grelhas base, disposição de elementos e modos de visualização; definir paletas de cor, tipografia, tipos de navegação na interface (botões), tipo de imagens e outros elementos gráficos, etc.
7. Especificações técnicas. 8. Protótipo.
9. Tecnologia - soluções técnicas.
10. Implementação - Lançamento, promoção, atualizações e testes de usabilidade.
32 Também conhecido como
esquema de página, é um modelo visual que inclui apenas linhas e vétices e que representa a estrutura esquelética de um site (Techterms 2020).
33 T.L.A chave para fazer bons
wireframes é deixar de fora todos os elementos visuais. Utilize caixas e linhas para representar imagens e texto.
A arquitetura da informação é a organização cuidada do conteúdo da interface em ordem hierárquica. Para um utilizador ter a capacidade de se movimentar facilmente numa interface, o conteúdo desta, deve ser organizado e estruturado de forma lógica e simples (fig. 12).
No entanto, a arquitetura da informação não é linear, devendo então a interface permitir que a navegação nesta, seja também ela de forma não linear, nem sequencial. Segundo Landa (2011), uma arquitetura de informações clara e organizada é fundamental para proporcionar ao utilizador uma experiência positiva, livre e prática ao longo da sua experiência na interface.
Esta arquitetura de informação, é então considerada o guia do designer para a composição geral da interface.
“Once clear and user-intuitive information architecture has been established” 34 (Landa 2011, p. 373)
Posteriormente, o designer começa a criar o design visual da interface, para este poder aceder à informação. “The visual design of information architecture is the navigation system.” 35 (Landa 2011, p.373).
Segundo Landa (2011), uma estrutura visual consistente é igualmente essencial para facilitar a utilização e experiência de um utilizador. Contudo, esta autora refere também que, muitas destas interfaces online são compostas por diversos níveis de navegação, dos quais incluem:
Figura 11 | Exemplo de wireframe do site da CNN International (Wirify 2017) [Disponível em: https://www. wirify.com/about/example- wireframes/ (Acedido a 19 de junho de 2019)]
34 T.L. Uma vez clara, a
arquitetura de informação intuitiva do utilizador é estabelecida. 35 T.L. O design visual da arquitetura de informações é o sistema de navegação.
1. Portal de navegação que conduz para outros sites; 2. Navegação global ou primária;
3. Navegação secundária ou sub-navegação (navegações de segundo plano/ segunda linha);
4. Navegação única de páginas online.
Para além destes níveis de navegação, Landa (2011), considera que uma interface online, é composta por uma página inicial, de nome splash screen, composta pela identidade visual da marca ou produto, mantendo-se no entanto sem qualquer tipo de informação. Posteriormente, é apresentado ao utilizador uma segunda página, representando esta uma das mais essenciais para a ligação com o utilizador, sendo que é nesta onde a informação mais importante é transmitida e onde o utilizador tem o primeiro contato com o layout da interface. A esta página dá-se o nome de home page ou ecrã inicial, e é onde se encontra o sistema de navegação central. Estes sistemas de navegação central, constituem-se por caminhos visuais e digitais ligados á mesma interface online ou a outras. No entanto, estas áreas visuais estão representadas por tabs e botões (elementos interativos que direcionam o utilizar a algum outro local da interface) (Landa 2011).
No desenvolvimento da interface, Alan Cooper et al. (2014), consideram essenciais alguns pontos, dos quais, o principal é o contexto da sua utilização. Ao desenvolver um serviço digital, deve-se antever onde este será utilizado,
Figura 12 | Exemplo de arquitetura de informação básica (Adaptado de Pedro 2014).
como por exemplo, se será num computador ou num telemóvel, se os
utilizadores estarão em movimento enquanto utilizam este serviço ou sentados numa secretária. Os restantes pontos essenciais, seguem-se pela forma, onde o Ser humano tem a tendência de reconhecer objetos a partir dos seus contornos. No entanto para a utilização desta, o utilizador terá de manter uma maior atenção para distinguir algo, equiparando com a distinção que possa ser feita a partir da cor ou tamanho do elemento.
A utilização do tamanho e da cor, deve ser estudada pelo designer, tendo em conta a mensagem que este pretende transmitir. Por exemplo, a utilização de diversas cores irá chamar mais a atenção do utilizador. No entanto, para a criação de um serviço eficaz que permita ao utilizador manter o foco nos significados implícitos, a utilização da cor deve ser limitada.
“For most applications, color should be used sparingly and integrate well into the other elements of the visual language: symbols and icons, text, and the spatial relationships they maintain in the interface. As discussed earlier in this chapter, when used appropriately, color can draw attention to important items, indicate relationships, and communicate status or other information.” 36 (Cooper et al. 2007, p.311)
Outros dos elementos essenciais para Alan Cooper et al. (2014), é a orientação, a textura e a posição. Estes elementos tornam-se úteis quando a necessidade de transmitir a informação, passa pela forma de hierarquias. A partir da apropriação do ecrã de um dispositivo, pode-se localizar elementos de forma sequencial, adequando-os à ordem de leitura de uma dada cultura. Como exemplo, para um leitor ocidental, ao se colocar alguns elementos no canto superior esquerdo, estes iram ter uma importância maior, pois é o ponto em que o leitor ocidental irá iniciar e manter mais foco na sua leitura.
Depois de todos estes elementos, e seguindo esta lógica da leitura, Alan Cooper et al. (2014) referem que o texto e tipografia tornam-se um componente critico para qualquer tipo de serviço. Isto é, a tipografia tanto pode ajudar o designer a passar a mensagem adequada ao utilizador, como pode muitas vezes prejudicar essa mesma transmissão da mensagem, tornando-a confusa e complicada. Neste caso, como referido acima, a forma dos elementos (tipografia) torna-se indispensável. Deve-se não só ter em conta o tamanho e forma, mas também o corpo e desenho da própria tipografia, de forma a mantê-la o mais simples e legível possível, mas também, em minimizar ao máximo, a quantidade de informação em texto, que se pretende apresentar, tornando a interface simples, concisa e de fácil leitura, aumentando assim a taxa de sucesso de leitura e compreensão do utilizador.
36T.L. Para a maioria das
aplicações, a cor deve ser usada com moderação e integrar bem nos outros elementos da linguagem visual: símbolos e ícones, texto e as relações espaciais que estes mantêm na interface. Como discutido anteriormente neste capítulo, quando usado apropriadamente, a cor pode chamar a atenção para itens importantes, indicar relacionamentos e comunicar status ou outras informações.
Segundo Cooper (2007), toda a interface, deve respeitar um alinhamento. Para este autor, o alinhamento é um dos elementos chave para o sucesso da boa comunicação visual do projeto. Como referido anteriormente, quando um indivíduo ocidental for iniciar a sua leitura, estas linhas de orientação e grelhas, irão possibilitar ao utilizador uma leitura facilitada, conduzindo o olhar do utilizador da esquerda para a direita e de cima para baixo. Como tal, o alinhamento entre vários elementos do layout deve ser mantido, e quando exista algum tipo de desalinhamento, este deve ter uma razão logica para a sua diferenciação.
Neste tópico acerca do design visual das interfaces, os autores Mullet e Sano (1995) fornecem uma análise detalhada e acessível de princípios fundamentais para a criação visual destes serviços.
Esses princípios são organizados numa lista de 9 pontos:
1. Comunicar a marca - é importante a presença da marca, para que o utilizador possa ligar o serviço à marca e aos objetivos dessa.
2. Hierarquia visual - deve-se garantir que a interface forneça ao utilizador, informações acerca da importância e relação entre informações existentes no serviço. Isto é, conseguido a partir da criação de hierarquias e estabelecer relações entre elas.
3. Estrutura visual forte e fluida para cada nível de organização de
informação, mantendo semelhanças e um agrupamento sequencial entre elementos referentes ao mesmo grupo. Quando estes são de grupos diferentes, manter a maior diferenciação possível, para que exista uma distinção imediata por parte do utilizador.
4. Sinalização das ações possíveis a realizar pelos utilizadores
5. Responder a comandos - o serviço deve responder de forma rápida às ações pedidas pelo utilizador, e se não o for possível, deve enviar um aviso relatando esse mesmo processo demorado., mantendo então sempre uma resposta ativa ao longo da sua utilização.
6. Chamada de atenção para elementos importantes, a partir da apropriação de elementos como a cor, tamanho e forma
7. Construção de um sistema visual coeso, mantendo a consistência ao longo da experiência
8. Minimizar a quantidade de elementos visuais
9. Manter simples, fazer uso de um conjunto mínimo de elementos visuais e funcionais.
4.9. REFERÊNCIAS BIBLIOGRÁFICAS
Bainbridge, W. (2004) “Berkshire Encyclopedia of
Human-Comuter Interaction: When science fiction becomes science fact”, Berkshire Publishing Group L.L.C,
United States of America
Basili,V.,& Turner,A. (1975) “Iterative enhancement:
A practical technique for software development”,
IEEE Transactions on Software Engineering, Vol. SE- 1, Nº4, pp. 390–396 (https://www.researchgate.net/ publication/260648834_Iterative_Enhancement_A_Practical_ Technique_for_Software_Development)
Bonsiepe, G. (1997) “Design do material ao digital”, FIESC/IEL
Budde, R.,Kautz, K.,Kuhlenkamp, K., & Züllighoven, H. (1992) ”What is prototyping?”, Information Technology & People, Vol.6, pp. 89–95, Northwind Publications, Ltd., United States (https://www.researchgate.net/ publication/242023364_What_is_Prototyping)
Cardoso, R. (2012) “Design para um mundo complexo”, Cosac Naify, São Paulo
Cooper, A., Reimann, R. e Cronin, D. (2007) “About
Face 3: The Essentials of Interaction Design”, Wiley
Publishing, Inc., Indiana
Cooper, A., Reiman, R., Cronin, D. e Noessel, C. (2014)
“About Face: The Essentials of Interaction Design”, 4º
edição, John Wiley & Sons, Inc, Indiana
Dede, C. (2005) “Planning for Neomillennial Learning
Styles: Shifts in students’ learning style will prompt a shift to active construction of knowledge through mediated immersion”, Current Issues (https://www.wou.
edu/~girodm/.../Dede_on_neo-millenials.pdf) Esteves, R. (2017) “Design de Informação e Meios
digitais: O jornalismo online através da interação”,
Projeto final de Mestrado em Design de Comunicação, Faculdade de Arquitetura da Universidade Lisboa, Lisboa Frascara, J. (2004) “Communication design: principles,
methods, and practice”, Allworth Press, New York
Gibson, J. (1986) "The Ecological Approach toVisual
Perception", Psychology Press, Taylor & Francis Group,
New York
Gould, J. D., & Lewis, C. (1985) “Designing for usability: Key
principles and what designers think” Communications of
the ACM, Vol. 28, Nº3, pp. 300–311 (http://citeseerx.ist.psu.edu/ viewdoc/download?doi=10.1.1.84.8860&rep=rep1&type=pdf) Kyrnin, J. (2019) “What is a website wireframe?”, Acedido a 17 de Junho de 2019 (https://www.lifewire.com/ what-is-website-wireframe-3470020)
Lambropoulos, N. & Zaphiris, P. (2007) “User-Centered
Design of Online Learning Communities”, Information
Science Publishing, America
Landa, R. (2011) “Graphic Design Solutions”, 4º edição, Clark Baxter, United States of America
4.8. SÍNTESE DO CAPÍTULO
Ao longo deste quarto capítulo, foi interessante estudar o aparecimento de algumas vertentes do design, como o design de interação, o design centrado no utilizador e a usabilidade, pois foi a partir deste estudo que se pode compreender quais os principais problemas e necessidades que o utilizador sentiu neste tipo de serviços e interfaces, para que assim fosse necessário o aparecimento destas disciplinas. Posteriormente a isso, foi realizada uma análise sobre todos os parâmetros e ferramentas utilizadas para a realização de produtos por meio destas vertentes, onde a utilização correta e sustentada destes pontos possibilitaram ditar o sucesso na execução do projeto a desenvolver nesta dissertação.
Moggridge, B. (2007),” Designing interactions”, The MIT Press, Cambridge and London.
Mullet, K. e Sano, D. (1995) “Designing Visual
Interfaces”, Sun Microsystems, Inc., California
Neil (2019) ”What is wireframing?”, Acedido a 17 de
Junho de 2019 (https://www.experienceux.co.uk/faqs/ what-is-wireframing/)
Neves, M. (2012) “Design Gráfico e Utilizador:
estratégias de interactividade e participação nos objectos impressos”, Tese de Doutoramento, Faculdade de
Arquitetura da Universidade Lisboa, Lisboa. Norman, D. (1999) “Affordances, conventions and
design”, pp. 38-42 (https://www.researchgate.net/
publication/202165710_Affordance_conventions_and_design) Norman, D. (2013) “The Design of Everyday Things”, Basic Books, New York
Preece, J., Rogers, Y. e Sharp, H. (2005) “Design de
interação: além da interação homem computador", John
Wiley & Sons Ltd., Porto Alegre
Quintão, F. & Triska, R. (2013) “Design de informação:
origens, definições e fundamentos”, Revista Brasileira
de Design de Informação, Vol. 10, Nº2, pp.105-118, São Paulo (https://www.infodesign.org.br/infodesign/article/ download/243/168)
Savi, R. & Souza, C. (2015) “Design centrado no Usuário
e o Projeto de soluções Educacionais”, Tecnologias para
Competitividade Industrial, Florianópolis, n. Especial Design (etech.sc.senai.br/index.php/edicao01/article/ download/615/386/)
Stickdorn, M. & Schneider J. (2010) “Isto é Design Thinking de Serviços”, Bookman
Winogrand, T. (1997), “From Computing Machinery to
Interaction Design”, Standford University, Amsterdam, pp.