5 th Brazilian Conference of In form ation Design. Fundamentos Pictográficos da Linguagem de Design Metro da Microsoft

Transcrição

1 CIDI TH CIDI 5TH InfoDesign 6TH CONGIC 6 th Inform ation Design International Conference 5 th Brazilian Conference of In form ation Design 6 th Inform ation Design Student Conference Blucher Design Proceedings May 2014, Vol. 1, Num. 2 Fundamentos Pictográficos da Linguagem de Design Metro da Microsoft Fundamentals of Pictographic Language Design "Metro" from Microsoft Cezar de Costa, Marcel Pereira Pauluk Pictogramas, linguagem Metro, Skeumorfismo, Flat design. Pictogramas fazem parte do nosso cotidiano. Através de seu uso em computadores, em embalagens de medicamentos, transporte, etc, eles indicam lugares, orientações, ações ou restrições sobre ações tanto no mundo real (uma cidade, uma rua, etc) ou espaço virtual (computador de mesa, Internet, etc.). Em 2012, a Microsoft, gigante da informática, propôs mudanças na interface gráfica de um dos seus principais produtos,o sistema operacional Windows, baseada em um conjunto de princípios que deram origem a uma linguagem visual plana, intuitiva e até divertida, apelidada de Metro,que está penetrando no portfólio de produtos da empresa, desde o pacote Office até o Bing, Windows Phone e Xbox, criando uma plataforma integrada com unidade e consistência visual. O presente artigo visa apresentar, discutir e compreender como os pictogramas, objeto de estudo desta pesquisa, sofreram alterações e de qual contexto tais alterações emergiram, redefinindo as coordenadas estéticas seguidas pela Microsoft. Pictograms, Metro language, Skeumorphism, Flat design Pictograms are a daily part of our lives. Though their usage in computers, medicine packages, transportation and other means, they represent places, instructions, actions or restrictions regarding situations both in the real world (a city, a street) and a virtual environment (your computer desk, the Internet). In 2012, Microsoft, the giant of informatics, proposed changes in the graphical interface of one of its main products: the Windows operational system. Based in a collection of principles which originated a plain visual language which is intuitive and even fun, nicknamed "Metro", it is penetrating the visual portfolio of many of the company's proucts, from Office to Bing, Windows Phone and XBox, creating an integrated platform which maintains visual unity and consistency. This article aims to present, discuss and understand how pictograms, the object of study in this research, have been changed and in which context such changes emerged, redefining the aesthetical coordinates followed by Microsoft. Introdução O ano de 2012 foi marcado, entre outros, pelo lançamento do sistema operacional Windows 8, nova aposta comercial da empresa de informática Microsoft. Não só a arquitetura de informação e processamento de dados foi remodelada como também o design da interface, concebido segundo os princípios da nova linguagem de design da empresa, chamada Metro. Originalmente pensada para ser utilizada no Windows Phone, ela está presente hoje no design Anais do 6º Congresso Internacional de Design da Informação 5º InfoDesign Brasil 6º Congic Solange G. Coutinho, Monica Moura (orgs.) Sociedade Brasileira de Design da Informação SBDI Recife Brasil 2013 Proceedings of the 6 th Information Design International Conference 5 th InfoDesign Brazil 6 th Congic Solange G. Coutinho, Monica Moura (orgs.) Sociedade Brasileira de Design da Informação SBDI Recife Brazil 2013 Costa, Cezar de; Pauluk, Marcel Pereira Fundamentos Pictográficos da Linguagem de Design Metro da Microsoft. In: Coutinho, Solange G.; Moura, Monica; Campello, Silvio Barreto; Cadena, Renata A.; Almeida, Swanne (orgs.). Proceedings of the 6th Information Design International Conference, 5th InfoDesign, 6th CONGIC [= Blucher Design Proceedings, num.2, vol.1]. São Paulo: Blucher, ISSN , ISBN DOI

2 da interface do Windows 8, nas webpages da Microsoft e no painel de atualizações do console XBOX 360, além do já citado Windows Phone, nas versões 7 e 8. As mudanças apresentadas causaram muitas discussões em fóruns e comunidades de design, com questões referentes à legitimidade dessas mudança. O cenário em que se instaura o debate é propício, já que a versão anterior do Windows havia alcançado o que se poderia chamar de ápice ornamental. Neste momento, a Microsoft se viu frente ao dilema da evolução de seu produto. Ou o Windows retomava o funcionalismo de Louis Sullivan ou mergulhava de vez no Rococó. Visually, at least, Windows 8 is the simplest version of the operating system ever. For years, software has followed the same formula: The user interface mimics a real-life desktop, with documents filed in folders and pictographic icons that act as visual metaphors of a software program's function. (CARR, 2012). Figura 1: Tela Iniciar do Windows 8, desenvolvida a partir dos princípios da linguagem Metro. 2 Cabe aqui esclarecimento quanto às diferenças entre pictogramas objeto de estudo da presente pesquisa e ícones. Para Jenny Gemmell (2012), ambos são representações de determinados objetos e conceitos. Entretanto, enquanto um toma o lugar da coisa representada sem necessariamente assemelhar-se a ela, o outro, pelo contrário, recorre (na maioria das vezes) à detalhes como sombras, texturas, variações de cor e sugestão de tridimensionalidade para se aproximar das características do objeto real. O pictograma está para a metonímia assim como o ícone está para a metáfora. A expressão contemporânea dessa simplificação na abordagem estética se denomina Flat Design e é através dela que a linguagem Metro ganhou voz, se alinhando à simplificação visual característica dos pictogramas. Propósito O foco da presente pesquisa é a análise e discussão acerca da mudança de direção na estética icônica-pictórica evidenciada pela linguagem Metro. Investigou-se as mudanças na concepção dos símbolos gráficos utilizados nas interfaces computacionais durante este período, visando compreender o contexto do qual emergiram as mudanças apresentadas através da linguagem Metro. Outrossim, objetiva-se apontar possíveis rumos para tal investigação, que é recente mas não incipiente. Métodos Através de um recorte cronológico que parte do ano de 1985, adentrando os anos 90 e chegando até a atualidade, analisou-se as distinções apresentadas em um quadro comparativo de ícones de interface de usuário, seguindo o modelo disponibilizado por Marcin Wichary em

3 seu site, um museu on-line de interfaces gráficas. Através deste quadro, foi possível perceber as alterações icônico-pictóricas ao longo dos anos, em grande parte marcadas pela introdução comercial de novas versões do sistema operacional Windows. 3 Figura 2: Quadro comparativo de símbolos gráficos do sistema operacional Windows, de 1985 à Figura 3: Símbolos gráficos desenvolvidos a partir dos princípios da linguagem Metro, para o Windows 8.

4 4 Argumentos Segundo Mike Kruzeniski (2012), designer sênior da Microsoft, a equipe de design do Windows Phone percebeu há alguns anos que o caminho tomado pelo Windows Mobile versão anterior ao Windows Phone não era sustentável. Decidiu-se então mudar de direção. Inspirada nos trabalhos de design de Josef Müller-Brockmann e outros pioneiros do Estilo Internacional, nos sistemas de design para o NY Subway Map de Massimo Vignelli e em marcas como a American Airlines, a equipe repensou a interação com a interface para uma nova linguagem que permitisse um contato direto com o conteúdo, eliminando possíveis barreiras que se interponham durante a experiência do usuário. Elementos gráficos considerados dispensáveis assim como efeitos abundantemente utilizados em versões anteriores foram abandonados com a finalidade de reduzir o inchaço visual, o que explica em parte a forte presença da tipografia e o uso de formas geométricas em cores sólidas em substituição à formas visualmente complexas com áreas de sombreamento e textura. Figura 4: peça gráfica desenvolvida por Josef Müller-Brockmann Tais mudanças evidenciam um aparente retorno ao Swiss Style (Estilo Internacional), movimento que surgiu na Suíça e Alemanha durante os anos As características mais marcantes desse estilo incluem: unidade, obtida através da organização espacial dos elementos gráficos em um grid matematicamente construído; fotografia objetiva e texto que apresentam informações de maneira clara; e uso de tipografia sem serifa alinhada à margem esquerda, não justificada.

5 5 Figura 5: Basic Typography Ruedi Rüegg e Godi Fröhlich (1972), peça que expressa o Swiss Style. Ressonâncias evidentes do Die Neue Typographie (A Nova Tipografia) de Jan Tschichold, que defendia o design funcional, rejeitando a decoração em favor de um design racional para a função comunicativa pelos meios mais diretos e do Movimento Isotype, que teve início nos anos 1920 a partir do esforço do sociólogo Otto Neurath em direção ao desenvolvimento de uma língua universal não dependente de palavras. Autor do International picture language, de 1936, Neurath, juntamente com o designer e gravurista alemão Gerd Arntz, deu forma à sua ideia de sistema de linguagem visual com o propósito de tornar inteligíveis informações complexas sobre economia, política e sociedade.

6 6 Figura 6: página do livro The Transformer: Principles of Making Isotype Charts, de Marie Neurath, esposa de Otto Neurath. As mudanças mencionadas indicam que a necessidade é, numa era pós-industrial em que a informação se transformou no ator principal e o conhecimento passou a ser mais valorizado que o trabalho operacional, a de colocar o usuário, que está em busca dessa informação, frente a ela. Eliminar o desnecessário seguindo o princípio do Fierce Reduction, aproximando ponto de partida e ponto de chegada no processo de interação é, certamente, a característica mais evidente d No entanto existem distinções do que se convencionou chamar de princípio e de linguagem. Segundo Arturo e Alejandro Toledo (2012), princípios são usualmente abstratos enquanto linguagens são manifestações tangíveis desses conceitos abstratos. A exemplo, temse o conceito de amor (um princípio), que pode ser expresso através da representação de um coração. Isso posto, diz-se que um mesmo princípio pode ganhar expressão através de inúmeras linguagens. Jeff Fong, principal UX Lead responsável pelas fases iniciais de exploração daquilo que evoluiu para o que se conhece hoje como Metro afirma que os princípios que guiaram o desenvolvimento da nova abordagem gráfica da Microsoft são: Leveza, Clareza, Abertura e Agilidade (Fierce Reduction); Foco no conteúdo; Tipografia; Movimento; Autenticamente digital;

7 7 Figura 7: esquema-exemplo do Fierce Reduction, princípio fortemente empregado na linguagem Metro. Partindo desses princípios, a análise dos elementos gráficos e, em especial, da linguagem pictórica da Metro se tornou mais fácil, pois estes passaram à parâmetro de comparação para as diferentes abordagens gráficas historicamente apresentadas pela Microsoft. Observou-se que, além do anteriormente citado, conta-se também com a necessidade de reinvenção, própria do universo corporativo, que visa agregar valor ao produto e à empresa e explorar o caráter de novidade para alçar voo e se fazer notável em meio a tantas outras empresas do setor. A linguagem Metro é a expressão visual que emergiu de princípios bem definidos, abarcando todo e qualquer elemento que compõe as interfaces do sistema operacional Windows. Assim, os pictogramas, como uma pequena parte que compõe o todo a interface gráfica tendem ao alinhamento gráfico, para um produto final que apresente consistência e unidade gráfica, principalmente devido os benefícios multiplataforma que essa abordagem permite. Conclusões Todas essas mudanças apontam um rompimento com a estética vigente. Os pictogramas quando compreendidos como qualquer outro elemento gráfico que compõe a interface se alinham aos princípios que guiam o desenvolvimento da peça gráfica. A partir das informações apresentadas, presume-se um gradual declínio do realismo nas interfaces nos próximos anos. Recentemente, a principal concorrente da Microsoft, a Apple Inc., apresentou seu novo sistema operacional denominado ios 7, corroborando tal tese. Não puramente em favor da funcionalidade mas também pela flexibilidade que o design oferece, possibilitando reprodução em diversos dispositivos e se estabelecendo em sistemas de maior complexidade de forma integrada, agilizando o trabalho dos projetistas. Em face destas medidas, o usuário é o principal beneficiado. O conteúdo se faz presente e a interação é direta, dispensando o uso de elementos que se interponham à experiência. O conteúdo se faz interface.

8 Entretanto, é importante enfatizar que a adoção de uma perspectiva maniqueísta em nada contribui para a discussão. Ambas as abordagens realista e minimalista-funcionalista contam com boas justificativas para existir. Cabe saber contextualizá-las. 8 Referências CENTIGRADE. Pictograms, the new sliced bread in icon. In: home: blog: article: < 17/04/2013. DANIEL PARENTE. 24 Weeks of Windows Phone Design. In: < Acesso em: 30 junho DARING RIREBALL. The Trend Against Skeuomorphic Textures and Effects in User Interface Design. In: home: archive: < 30/06/2013 FASTCO DESIGN. Windows 8: The Boldest, Biggest Redesign In Microsoft s History. In: < 06/07/2013. GUIDE BOOK GALLERY. Graphical User Interface Gallery. In: home: icons: components: < 23/05/2013. KRUZENISKI, How Print Design is the Future of Interaction. In: < 23/04/2013. LAYER VAULT, The Flat Design Era. In: home: post: < 23/04/2013. MATTHEW MOORE, Almost Flat design. In: home: < 23/04/2013. MEGGS, Philip B. História do Design Gráfico: Philip B. Meggs e Alston W. Purvis. Tradução de Cid Knipel. São Paulo: Cosac Naify, NEURATH, Otto. International picture language. The first rules of Isotype. London, SMASHING MAGAZINE,. Lessons From Swiss Style Graphic Design. In: < 23/05/2013 PIXEL RESORT, How and when to use pictograms. In: blog < 28/06/2013 THE VERGE, years of icons, the evolution of the modern computer interface. In: < 17/05/2013. Sobre os autores Cezar de Costa, graduando, UFPR, Brasil <cezardecosta@gmail.com> Marcel Pereira Pauluk, doutorando, UniKASSEL, Alemanha <marcelpauluk@gmail.com>