Think- pensando em interfaces e mobilidade by Lais Mastelari

UNIVERSIDADE ESTADUAL PAULISTA “JÚLIO DE MESQUITA FILHO” FACULDADE DE ARQUITETURA, ARTES E COMUNICAÇÃO BACHARELADO EM DESIGN

think

Pensando em interfaces e mobilidade

Lais Munhoz Mastelari Orientador: Profª Draª Mônica Moura

Bauru 2013

Agradecimentos

Gostaria de agradecer primeiramente ao programador Rafael Ra-

belo por ter idealizado o Think e lhe dado vida, mas principalmente por ter me ensinado a amar não só o meu trabalho mas também a mim mesma. Aos meus pais por todo o apoio e incentivo não só nesse projeto, mas em todas as escolhas da vida. Ao Laboratório de tecnologia da informação aplicada por me mostrar um caminho a seguir dentro da minha profissão e todas as pessoas que conheci lá e por tudo que me ensinaram. Aos amigos e colegas da faculdade por todas as experiências maravilhosas e finalmente ás minhas três melhores amigas Genla, Jú e Má por aguentarem minhas bobagens por mais de dez anos.

“O homem é a medida de todas as coisas.” (Protágoras)

Resumo

Esse trabalho visa a criação de uma aplicação mobile de recebi-

mento e compartilhamento de citações chamada “Think” paralelamente ao estudo de interfaces gráficas voltadas para aparelhos mobile conhecidos como smartphones e tablets. Para esse projeto foram estudadas além de diversas definições de interface os aparelhos mobile e sua história. Para o desenvolvimento do produto foi necessário o estudo das guidelines (documentos e diretrizes oficiais que auxiliam no desenvolvimento de softwares indicando normas, regras e elementos a serem utilizados) de três sistemas operacionais vigentes no mercado o IOS, Android e Windows 8, com todas as suas particularidades e elementos próprios como barras, métricas, ícones e navegação, isso para que a aplicação se moldasse a cada uma das plataformas de forma concisa e clara aos usuários. Toda a identidade visual da plataforma também foi parte do estudo a fim de se adaptar e enriquecer cada uma das experiências propostas.

Abstract This work purposes the creation of a mobile application for receiving and sharing quotes called â&#x20AC;&#x153;Thinkâ&#x20AC;? in parallel to the study of graphical interfaces aimed at mobile devices known as smartphones and tablets. For this project several interface settings, mobile devices and their history were studied. The guidelines (documents and official guidelines that assist in software development indicating standards, rules and elements to be used) of three operational systems on the current market; iOS, Android and Windows 8, with all their peculiarities and own elements such as bars, metrics, icons and navigation, were researched for the development of the product so that the application would fit each of the platforms in a concise and clear way for the users. The entire visual identity of the platform was also part of the study in order to adapt and enrich each of the proposed experiments.

Sumário Resumo 9 Abstract 11 Sumário 13 Capítulo 1. Interfaces e Dispositivos Mobile 15 Interface 15 Interfaces Gráficas destinadas ao Usuário (GUI) 16 Capítulo 2. Dispositivos mobile – Smartphones 18 Sistemas Operacionais e sua Guidelines na Construção de Interfaces 21 Sistema Operacional iOS/ Apple 22 Métricas e grids 22 Elementos gráficos: Tipografia, texturas e cores 24 Iconografia 26 Barras de ação 28 Sistema Operacional ANDROID/ Google 32 Métricas e grids 32 48DP 35 Iconografia 37 Navegação 40 Barra de ação 40 Outros Elementos 45 Sistema Operacional Windows 8/ Microsoft 47 Métricas e grids 47 Elementos gráficos: Tipografia , cores e texturas 53 Iconografia 54 Navegação 55 Barras de Ação 57 Quadro comparativo 60 O Designer e as guidelines 60 Capítulo 3. O design do Think 62 Funcionalidades 62 Identidade Visual 63 O projeto de Think 67 Windows 8 67 Android 71 IOS 81 Considerações finais 103 Bibliografia 105

Capítulo 1. Interfaces e Dispositivos Mobile Design de interface Design de interface é uma área complexa dentro do design gráfico e isso se deve a sua importância na função de comunicar o usuário com a tarefa com a qual ele quer interagir. Quando entramos na área de interfaces gráficas digitais, ou seja, interfaces de computadores, a complexidade aumenta porque a tecnologia se atualiza e se transforma em grande velocidade e por isso os estudos não conseguem acompanhar esse ritmo.

Os profissionais dessa área precisam além da

pesquisa extensa e contínua ter conhecimentos ou se relacionar com equipes multidisciplinares e profissionais oriundos de outras áreas, tais como psicologia, arquitetura de informação, usabilidade, design gráfico e programação para desenvolverem interfaces coesas e funcionais. Interface Para iniciar, então, o estudo do design de interfaces é necessário saber o que é uma interface. Segundo o dicionário (BUARQUE, 2004) interface é o limite comum entre dois corpos, sistemas, fases ou espaços, que permite sua ação mútua ou intercomunicação ou trocas entre eles [...] Meio físico ou lógico através do qual um ou mais dispositivos ou sistemas incompatíveis conseguem comunicar-se entre si”. Elas estão em todos os lugares, são um modo mudo de comunicação, são fronteiras e ligações. Etimologicamente significa “entre aparências/formas”, são o que usamos para

nos comunicar com outras entidades não humanas, sen1. Capacidade de semiose refere-se à habilidade de perceber e interpretar o mundo da interface, é um processo de significação. (OLIVEIRA e BARANAUSKAS, 1999)

do que essas devem possuir a capacidade de semiose1 e de emitir signos (OLIVEIRA e BARANAUSKAS, 1999)

Então é possível dizer que a função do designer

de interface “consiste em ajudar o usuário a construir um modelo mental na sua cabeça que reproduziria o conhecimento do programador do programa” (BONSIEPE, 1997), ou seja, é traduzir da melhor maneira o código em componentes gráficos com os quais o usuário aprenderia as funções do software sem nunca ter tido contato com uma só linha de código. Isso é feito comumente pela presença de elementos gráficos de manipulação direta, ou instrumentos metafóricos (BONSIEPE, 1997) que representam objetos com os quais o usuário está acostumado em seu dia a dia como janelas, lixeiras, pastas, teclas, etc. Interfaces Gráficas destinadas ao Usuário (GUI)

As interfaces gráficas são tão essenciais para um

software que, ainda segundo BONSIEPE, elas são consideradas, pelos os usuários, sinônimo de um programa, ou seja, sem elas não se consegue identificar um software. Como é possível observar que, softwares sem interface gráfica (Figura 02 e Figura 03) são dificilmente diferenciados entre si, ao contrário da Figura 01 que se destaca das demais confirmando as palavras do autor. Interfaces gráficas são tão marcantes que, é difícil de aceitar que a Figura 1 é o mesmo sistema operacional que a Figura 02, porém utilizando interface gráfica. O desempenho de velocidade e poder também são, muitas vezes, relacionados com as interfaces, aqueles programas com melhor usabilidade e fácil aprendizado são comumente considerados mais rápidos, eficazes e seguros.

Figura 01 - Interface grรกfica do Windows XP. (2013)

Figura 02 - Interface do sitema operacional Windows XP. (2013)

Figura 03 - Interface do sistema operacional Arch Linux (2013)

Capítulo 2. Dispositivos mobile – Smartphones

Dispositivos mobile são “sistemas computacionais

que podem ser movidos fisicamente, nos quais as capacidades de computação podem ser utilizadas enquanto eles estão sendo movidos” (B’FAR, 2005).

Podemos dizer então que, por essas características,

os dispositivos mobile existem muito antes dos computadores ou celulares. Podemos considerar o ábaco (Figura 04) como um dispositivo computacional móvel por causa de seu tamanho e mobilidade e também por sua capacidade de cálculo, pois até hoje este objeto pode fazer contas complexas. Por outro lado, essas não são as únicas características relativas a esses dispositivos. Hoje, para ser classificado como dispositivo computacional móvel, é preciso ter também capacidade de armazenamento e de troca de informações. Figura 04 - Linha do tempo dos dispositivos mobile. Fonte: Cramming more components onto integrated circuits. (1965)

Desde a década de 60 existiam aparelhos com es-

sas características, porém somente a partir da década de 80 as tecnologias disponíveis, como satélites e chips, tornaram possível a comercialização em massa desses dis-

positivos e desde então essas tecnologias tem aumentado, seguindo a lei de Moore (MOORE, 1965) que diz que a capacidade de processamento e armazenamento dos computadores dobra a cada 18 meses.

Atualmente, dispositivos móveis estão cada vez

mais presentes na vida das pessoas. Fato que foi disseminado com o uso dos smartphones que, além das funcionalidades dos telefones celulares comuns, também permitem acesso à internet 3G2 ou wireless e também possuem funções de outros aparelhos como tocadores de música,

2. Terceira geração de telefonia móvel.

agendas, calendários, máquinas fotográficas, etc. Hoober e Berkman (2011) classificam os smartphones como pequenos aparelhos que podem ser carregados para qualquer lugar, portáveis graças à autonomia de bateria que possibilita a mobilidade, conectados em redes sem cabos, interativos com grande variedade de aplicações diferentes e com ferramentas para ajudar o usuário a realizar as tarefas requeridas. O aumento do uso desses aparelhos cresceu tanto nos últimos anos que só no Brasil 36% dos celulares são smartphones (NIELSEN, 2013) colocando o país em quarto lugar no mercado de mobile do mundo com mais de 260 milhões de linhas ativas (GSMA, 2013).

Smartphones são grandes atrativos para as empre-

sas montadoras de aparelhos, de telefonia móvel e também para os usuários. O primeiro smartphone pode ser datado da década de 90, o Symbian da empresa finlandesa Nokia que possuía, além da função de telefone, funções como agenda, calendário, envio de fax e relógio internacional, porém o acesso dessa primeira geração à internet era limitado e os aparelhos, grandes e pesados.

Figura 05 - Nokia 9000 primeiro smartphone Nokia com sistema operacional Symbian Fonte: www. theregister.co.uk (2009)

Em meados do começo do século XXI começaram a

aparecer os primeiros smartphones que utilizavam ícones, conexão wireless e telas coloridas. Porém, a grande massificação desses aparelhos se deu a partir de 2007 quando Steve Jobs da empresa americana Apple anunciou: “Um revolucionário e mágico produto que está literalmente 5 anos a frente de qualquer outro celular do mundo” (ARTHUR, 2012). Com isso surgiu o primeiro Iphone. Uma das grandes diferenças entre ele e os demais aparelhos era a ausência do teclado físico e a interação por toque. Após esse lançamento surgiram outros sistemas operacionais como o Android da Google e o Windows Phone da Microsoft que seguiam o mesmo modelo. Figura 06 - Blackberry pearl um dos primeiros smartphones com tela colorida Fonte: www.mundoblackberry.com. (2011)

Esses celulares não só mudaram a maneira como

interagimos com aparelhos móveis, mas também criaram uma nova necessidade por softwares, ou aplicações, como costumam ser chamadas. Essas aplicações são desenvolvidas ao redor do mundo por qualquer pessoa criando assim um mercado diversificado e dinâmico que se baseia na descentralização da produção do software com a centralização das vendas em mercados próprios de cada sistema. Todavia descentralizar a produção de softwares que antes eram produzidos, em sua maioria por grandes empresas, para qualquer pessoa tem seus problemas. Um deles é a não padronização da interação e design de cada um dos sistemas operacionais, e isso é importante para que a experiência do usuário se mantenha sempre uniforme independente da aplicação, para que o usuário não se confunda. E, além disso, para se criar uma interface mobile também são necessários conhecimentos em diversas áreas como psicologia, design gráfico e usabilidade, por isso ter profissionais de design de interface envolvidos em projetos mobile é parte importante do desenvolvimento. Sistemas Operacionais e sua Guidelines na Construção de Interfaces

Para minimizar essa situação as empresas criaram

guias de design detalhados chamados de guidelines onde o desenvolvedor ou designer pode consultar como projetar a interação da aplicação de acordo com o sistema operacional. Nesse trabalho serão analisadas somente três guidelines dos diferentes sistemas operacionais: a do iOS, a do Android e a do Windows 8.

Sistema Operacional iOS/ Apple

iOS (iphone Operational System) é o sistema opera-

cional criado pela Apple em 2007 que revolucionou o modo como interagimos com aparelhos móveis. Primeiramente pela ausência de teclado físico e a tela sensível ao toque permitindo uma manipulação direta com os elementos da interface. Outra grande inovação foi a criação de uma loja online que permite que qualquer pessoa crie aplicações para o sistema e a coloque a venda, fazendo com que seu conteúdo sempre esteja atualizado. Diferente dos outros sistemas operacionais, toda versão do iOS acompanha o lançamento de um novo smartphone produzido para especialmente para ele, fazendo com que os problemas de resolução de tela sejam bem menores do que nos demais sistemas. Métricas e grids

Como dito antes, no iphone os problemas com

resoluções de telas são menores do que nas outras plataformas. Os primeiros aparelhos possuíam uma resolução baixa de 640X320, porém após a versão iOS 5 as telas aumentaram a resolução para 1136X640 pixels com a ret3. Tela com alta densidade de pixels na qual não é possível, a olho nu, ver os pontos da tela.

ina display3 para adequar às aplicações já existentes ao novo tamanho sem ser necessário fazer duas imagens, a solução apresentada foi aumentar o campo visual das imagens (Figura 07).

Porém esse aumento só é permitido na área de

ação da aplicação, é recomendado não aumentar o tamanho dos controles, como botões ou painéis, e sim aumentar o espaço entre eles (Figura 08). Outra métrica usada nesse

sistema é a mínima área de toque para qualquer elemento de controle, ou seja, elementos que possuem algum tipo de interação tátil com o usuário. Essa área é delimitada por 44 pontos, sendo um ponto igual a um pixel na resolução normal e o dobro na retina display Figura 07 - Demonstração da mesma aplicação em duas resoluções diferentes com aumento do campo visual Fonte: http://developer.apple.com/library/ ios/#documentation/ userexperience/conceptual/mobilehig/ TranslateApp/TranslateApp.html. (2013)

Figura 08 - Demonstração do espaçamento entre botões em duas resoluções diferentes Fonte: http:// developer. apple.com/library/ ios/#documentation/ userexperience/ conceptual/mobilehig/TranslateApp/ TranslateApp.html (2012)

Quando se constrói a interface de uma aplicação

para Iphone, é necessário pensar em camadas, ou seja, cada elemento da aplicação com as barras e o conteúdo estão separados e sobrepostos por importância dentro da aplicação. Como na Figura 09, que representa uma aplicação de relógio, onde vemos que o conteúdo é o principal elemento, depois as barras e por último a janela onde aparecem os elementos do próprio sistema como teclado, menus, etc. Cada elemento dentro da tela da aplicação tem um tamanho fixo (Figura 10) pré definido o que facilita o desenvolvimento de aplicações. Figura 09 - Demonstração da aplicação em camadas Fonte:http://developer. apple.com/library/ ios/#documentation/ WindowsViews/ Conceptual/ViewPG_iPhoneOS/ CreatingViews/CreatingViews.html#// apple_ref/doc/uid/ TP40009503-CH5SW1 (2012)

Elementos gráficos: Tipografia-Ccores, texturas e Tipografia

Desde o seu lançamento o principal objetivo do siste-

ma é a total imersão do usuário na tarefa que ele tem que executar sem se distrair. Por este motivo, desde a criação do iOS o sistema é monotarefa, ou seja, executa somente uma aplicação por vez. A aparência da aplicação também contribui para a imersão do usuário, quanto mais realístico

os elementos na interface, mais intuitiva ela será, segundo a guideline oficial. Para atingir este objetivo é preciso que o designer tenha um profundo conhecimento de teoria das cores, aplicação e criação de texturas.

Além da aparência, também é importante manter a

interação o mais real possível por isso além de fazer com que a interface seja uma metáfora dos objetos reais o uso também deve ser o mesmo ou o mais próximo possível da realidade. Figura 10 - Exemplo de três aplicações (Deep Green, Guitar Toolki e Nota.) com interfaces com estilo do skeumorfismo. Fonte: http://answers.oreilly.com/ topic/2099-usinginterface-metaphors-to-improveyour-iphone-appdesign/ (2012) Figura 11 - Aplicação TouchChords, que ensina acordes de guitarra e violão representa a posição das notas no aparelho como se fosse no próprio instrumento. Fonte: http://www. iphoneappsplus. com/music/touchchords/index.htm. (2012)

Figura 12 - App Ibeer representa por texturas e interação uma pessoa bebendo cerveja. Fonte: https:// itunes.apple. com/br/app/ibeerfree/ (2011)

A tipografia mais usada no sistema é a Helvética,

porém a guideline não especifica seu uso. Diferentemente das outras plataformas que possuem tipografia própria, para o iOS, foi criado um site (http://iosfonts.com) que oferece diversas fontes que podem ser usadas em cada uma das versões do sistema, auxiliando designers na escolha da melhor tipografia que para a identidade visual da aplicação. Iconografia

Ícones são elementos pequenos que precisam pos-

suir muita informação ou passar a identidade da aplicação de modo rápido e simples. No iOS existem dois tipos de ícones os app icons (ícones da aplicação) e os system icons (ícones do sistema). Os primeiros são parte importante no desenvolvimento da aplicação, pois exigem um nível grande de detalhamento, diferentemente das outras plataformas. Segundo a guideline os app icons precisam representar em uma imagem todo o conteúdo da sua aplicação.

Um app icon precisa ter 57x57 pontos com bordas arredondadas e sombreado redondo na parte superior, porém o trabalho do designer se restringe a fazer somente

Figura 13 - Exemplo de dois ícones: configurações e agenda Fonte: https://developer.apple.com/library/ ios/#documentation/ UserExperience/ Conceptual/MobileHIG/IconsImages/ IconsImages.html#// apple_ref/doc/uid/ TP40006556-CH14SW1 (2012)

a arte do ícone porque o próprio sistema reconhece o arquivo e adiciona tanto a borda quanto o brilho, isso para que todos eles tenham sempre as mesmas configurações. Figura 14 - Exemplo de ícone antes e depois. Fonte: https://developer.apple.com/library/ ios/#documentation/ UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages. html#//apple_ref/doc/uid/ TP40006556-CH14-SW1 (2012)

Os systems icons são menos detalhados que os app icons e são utilizados nas barras de nvegação, toolbars e tab bars. A Apple disponibiliza um pacote com vinte e sete ícones básicos que representam as ações mais comuns, tais como procurar, compartilhar, câmera, play, etc. Além disso, é possível criar ícones próprios se necessário e, se for esse o caso, porém ícones precisam ter formatos simples e não podem ter sombra. Para a barra de ferramentas e navegação o ícone terá 20 pontos e para a as abas 30 pontos.

Figura 15 - Exemplo de ícones da barra de navegação e ferramentas Fonte: https://developer.apple.com/ library/ios/#documentation/UserExperience/Conceptual/MobileHIG/ IconsImages/IconsImages.html#// apple_ref/doc/uid/TP40006556CH14-SW1 (2012)

Figura 16 - Exemplo de ícones da barra de abas Fonte: https://developer.apple.com/ library/ios/#documentation/UserExperience/Conceptual/MobileHIG/ IconsImages/IconsImages.html#// apple_ref/doc/uid/TP40006556CH14-SW1 (2012)

Barras de ação

As barras de ação no iPhone não são de uso ob-

rigatório, porém se utilizados, devem seguir o uso correto descrito na guideline, pois caso esses elementos não estejam de acordo com o guia a aplicação não será publicada na App Store. Existem quatro barras: status bar (barra de status), navigation bar (barra de navegação), tab bar (barra de abas) e tool bar (barra de ferramentas). Status Bar (Figura 18) se encontra sempre na parte superior da tela e mostra as informações gerais do aparelho, como hora, sinal, conexões de internet e bateria. Ela é opcional, porém, deve ser retirada em ocasiões nas quais o conteúdo precise de toda a tela, como uma exibição de imagens, vídeo ou jogos, todavia é recomentado mantê-la no caso de uma aplicação comum já que contém informações úteis para o usuário. Diferente de outras plataformas a status bar do Iphone per-

mite algumas alterações. Desta forma, o designer pode estipular quais elementos serão exibidos durante a aplicação, por exemplo, é possível tirar as horas da barra se houver um relógio em sua aplicação. É possível também modificar o estilo, entre cinza, preto e opaco, desde que acompanhe a identidade da aplicação.

A Navigation bar aparece sempre no topo da aplica-

Figura 17 - Status Bar nos três estilos possíveis Fonte: http:// developer. apple.com/library/ ios/#documentation/ userexperience/ conceptual/mobilehig/UIElementGuidelines/UIElementGuidelines. html(2012)

ção, imediatamente abaixo da status bar (se houver). Contém o nome da tela, controles de navegação e de controle de conteúdo. Sua maior função se dá em aplicações que seguem uma linha de conteúdo extensa, na qual o usuário precisa passar por uma tela para chegar à outra (Figura 18), nesse caso o fluxo aparecerá na forma de ícones nos quais o usuário pode pular da página atual para a home, por exemplo. É nessa barra que se encontram as ferramentas de interação direta com o conteúdo como salvar, editar, cancelar, etc. Todavia por regra essas ferramentas não são utilizadas juntamente com os botões de navegação ou só podem aparecer uma de cada lado, por falta de espaço físico e hierarquia. O nome da página aparece sempre ao centro e é possível alterar as cores e opacidade dos controles, fundo e tipografia à vontade, somente o seu tamanho não pode ser al-

terado, ela deve ocupar 100% da largura e ter uma altura de 44 pontos.

Tab bar é uma barra que funciona como um menu

geral do aplicativo, cada botão redireciona o usuário para uma página com conteúdo específico possibilitando o acesso a qualquer parte da app. Sempre se encontra na parte inferior da aplicação e pode possuir até cinco ícones que devem estar acima do nome da página. A tab bar vem, por padrão, na cor preta, porém diferente das outras barras pode ser mais customizada, podendo ter outras cores ou até formatos. Figura 18 - Botões de navegação Fonte: http:// developer. apple.com/library/ ios/#documentation/ userexperience/ conceptual/mobilehig/UIElementGuidelines/UIElementGuidelines. html(2012) Figura 19 - Exemplo de tab bar Fonte: http://developer.apple.com/library/ ios/#documentation/ userexperience/conceptual/mobilehig/ UIElementGuidelines/ UIElementGuidelines. html(2012)

Figura 20 - Exemplo de tab bar com estilo diferenciado na app Social Wine ,Fonte: http://www. designresourcebox. com/user-interfacedesign-inspiration40-ui-design-examples(2011)

Figura 21 - Exemplo de tool bar com cinco Ăcones Fonte: http:// developer. apple.com/library/ ios/#documentation/ userexperience/ conceptual/mobilehig/UIElementGuidelines/UIElementGuidelines. html(2012)

Figura 22 - Exemplo de tab bar com estilo diferenciado na app Fight Track pro Fonte: http://www. topdesignmag. com/30-superb-examples-of-iphoneinterface-design/ (2011)

Sistema Operacional ANDROID/ Google

Android é o sistema operacional desenvolvido pelo

Google em 2008. A grande diferença entre o iOS e o Android é a quantidade de aparelhos disponíveis, enquanto a Apple lança sempre um sistema operacional novo acompanhado de um dispositivo, o SO do Google por ser open 4. Código livre, trata-se de softwares que são distribuídos gratuitamente, com seu código fonte aberto para customização.

source4 pode ser usado por muitos fabricantes. Hoje, no mercado, os maiores fabricantes são a Samsung, LG, Sony, HTC entre outros acarretando uma grande diversidade de aparelhos e resoluções. Com isso, o designer precisa fazer com que a aplicação desenvolvida por ele possa ser vista nos mais diversos tamanhos e resoluções. Para isto, é preciso pensar no tamanho das imagens e fontes com muito cuidado. Nas primeiras versões do sistema não haviam guidelines para ser seguidas, acarretando uma falta de identidade a plataforma. A partir da versão 4.0, lançada em 2011, a empresa lançou sua própria guideline fixa, essa foi feita pelo Diretor de experiência do Android, Matias Duarte,

5. Design responsivo é uma abordagem para criar websites onde a experiência do usuário é otimizada independente da forma a qual o usuário acessa o website, seja por desktop ou smartphone, facilitando a navegação e o acesso as informações em qualquer caso.

criando assim uma identidade para sua plataforma. Métricas e grids

Existem dezenas de aparelhos que rodam Android,

portanto deve-se tomar muito cuidado ao se projetar sua interface. Durante a criação é preciso lembrar-se da variedade de tamanhos de suas telas e resoluções, por isso o Designer precisa criar uma interface flexível, aplicando conceitos de design responsivo5 à aplicação. Para acompanhar as mudanças de tamanhos de cada imagem não se usa a medida em Pixels, mas sim em DPI (Pon-

tos por polegada), ou seja, ao invés de medir uma imagem por seu tamanho real medimos por sua densidade. Figura 23 - Representação de diversos aparelhos e o tamanho de suas telas. Fonte: http:// developer. android.com/ design/style/ devices-displays. html(2011)

Figura 24 - Exemplo do tamanho de ícones em cada uma das densidadesFonte: http:// developer.android. com/design/style/ devices-displays. html(2012)

A base são os aparelhos de densidade média, há

um cálculo que facilita na hora de gerá-las. Na densidade média a imagem terá 100% do tamanho assim na densidade menor o tamanho da imagem deve ser de 75%, na maior 150% e na de alta definição 200% do tamanho. Assim 1dp=1px na densidade média. O mesmo ocorre com o tamanho das fontes, normalmente tomamos o tamanho dos tipos por pontos (pt), porém como

falamos de diferentes resoluções tomamos uma outra unidade de medida a escala independente de pixels (sp=Scaleindependent Pixels). O cálculo de porcentagem usado é o mesmo, portanto 1sp=1pt na densidade média.

Com tantas mudanças de resoluções é preciso limi-

tar cada aparelho dentro de resoluções mínimas e máximas e delimitar as diferenças entre um smartphone e uma tablet. Segundo a guideline do próprio Google o primeiro está entre 320dp e 360dp já as tablets possuem 962dp x 600dp e 1280dp x 800dp, em média. Podemos observar aqui que, no caso da resolução dos celulares, não temos o valor da altura, isso ocorre porque as aplicações feitas para celulares não precisam ter uma altura fixa, já que o seu conteúdo se expandirá no sentido vertical, diferentemente das tablets, nas quais as aplicações, por possuírem mais espaço horizontal, expandem seu conteúdo nesse sentido, porém só é possível afirmar isso se levarmos em conta o uso mais comum e ergonômico das tablets (paisagem), como ilustrado na Figura 25, caso a orientação mude o conteúdo pode ser mostrado de forma contrária.

Figura 25 - Representação das resoluções mais comuns em smartphones e tablets android. Fonte: http:// developer.android. com/design/style/ metrics-grids. html(2011)

48DP

Uma das medidas mais importantes para a plata-

forma android são os 48dp. Essa é a medida, dentro da resolução média, usada para determinar as áreas clicáveis na tela. Ela vale a equivalentes 9mm (com variações entre 7~~10mm). A figura a baixo ilustra muito bem como devemos metrificar áreas com links e ações:

A área de 48dp deve ser dividida em 3 partes de

Figura 26 - Representação da demarcação das áreas clicáveis. Fonte: http:// developer.android. com/design/style/ metrics-grids. html(2011)

16dp, na horizontal, que serão a base para os textos e elementos. Ícones devem possuir uma margem de 8dp de cada lado e botões uma margem de 4dp. O tamanho dos textos pode variar, porém é recomendado que esteja centralizado com uma altura de 16sp. Existem dezenas de outros elementos que compõe a biblioteca de ações do Android, porém todos costumam seguir os múltiplos de 48, para criar um layout conciso e equilibrado, no qual não ocorrerão problemas com cliques em elementos errados. Elementos gráficos: Tipografia , cores e texturas

A partir da versão 4.0, o designer Christian Rob-

ertson designer de interface do Android, atrás de uma identidade para a plataforma desenvolveu uma família tipográfica não serifada própria, chamada de Roboto. Ela foi pensada para telas e para diferentes resoluções,

principalmente nas mais altas. Existe também uma escala tipográfica a ser seguida. Isso ocorre porque em dispositivos móveis o usuário pode escolher o tamanho do texto a ser exibido na tela. Se o designer pudesse colocar qualquer tamanho de fonte não haveria uma uniformidade e, no caso, de o usuário aumentar ao máximo a fonte, o texto ficaria grande demais. A escala a ser seguida conta com 4 tamanhos micro (12sp), pequeno(14sp), médio(18sp) e grande(22sp). Figura 27 - Amostra da tipografia Roboto. Fonte: http://developer.android.com/ design/style/typography.html(2011)

Figura 28 - Exemplo dos tamanhos da fonte. Fonte: http:// developer.android. com/design/ style/typography. html(2012)

Quanto as cores da plataforma, a partir da versão

4.0, alguns elementos como tabs, scrollbar e ícones foram melhorados e se tornaram padrão nas aplicações. O padrão estabelece que estes elementos são todos na cor azul claro, porém como algumas identidades não combinam com o azul, foram propostas mais 4 cores para esta finalidade. Figura 29 - Exemplo da palheta de cores do sistema. Fonte: http://developer.android.com/ design/style/color. html(2012)

Iconografia

No caso da plataforma Android existem dois tipos

de ícones, os ícones padrão (action bar icons), com funções de status e ações, e os ícones da própria app (launcher icon).

Os ícones padrão são botões que representam as

ações que o usuário pode fazer dentro da aplicação. Todos possuem uma metáfora para a identificação da ação, isso porque é necessário que a maioria das pessoas possa interagir com a plataforma independente de sua cultura, língua ou região. O tamanho segue os 48dp da plataforma, os ícones devem possuir 32dp de área de ação (full asset), porém somente 75% da área (24dp) é preenchida com a imagem (optical square), isso se deve a interação com clique, costumamos clicar no centro das imagens e pensando nis-

so foi preciso deixar um espaço de 8dp para evitar erro na hora da ação (Figura 30). As cores dos ícones também possuem regras, nos fundos claros usa-se a cor #333333 com 60% de opacidade, para o item ativo, e 30% para o inativo. Já nos fundos escuros a cor #ffffff (branco) com 80% de opacidade, para o item ativo, e 30% para o inativo (Figura 31). Figura 30 - Representação das áreas de ação e de imagem em um action icon. Fonte: http:// developer.android. com/design/style/ iconography. html(2012)

Figura 31 - Representação as cores dos action icons. Fonte: http:// developer.android. com/design/style/ iconography. html(2012)

Os launcher icons, são aqueles que aparecem no menu de aplicações e na home do aparelho. Na maioria das vezes as aplicações são representadas pelo próprio logo da aplicação, porém alguns, principalmente os nativos do próprio sistema operacional possuem uma imagem metafórica da função da aplicação, um bom exemplo seria o ícone da câmera fotográfica representado pela imagem de uma câmera.

Na plataforma Android os ícones precisam ter uma

silhueta bem definida, ou seja, diferentemente do iOS, no

qual os ícones possuem uma moldura específica, no Android a forma dos ícones tende a ser o mais próximo da realidade, com perspectiva, luz e sombra e formato qualquer, a única exigência do sistema é que o tamanho do ícone deve ser de 48dp, sem margem (Figura 33). Figura 32 - Representação de laucher icon. Fonte: http://developer.android.com/ design/style/iconography.html(2012)

Figura 33 - Representação de silhueta em ícone da aplicação Gmail. Fonte: http:// developer.android. com/design/style/ iconography. html(2012)

Podemos ainda citar um terceiro tipo de ícone ex-

istente na plataforma, o ícone de notificação (notification icon), esse aparece na status bar toda vez que a aplicação sofre uma atualização. Esse ícone deve ser simples somente com uma forma vetorial sem cores, sombras ou opacidade que represente a aplicação rapidamente e seu tamanho também é reduzido: 24dp de área de ação e 22dp

de área do desenho. A cor deve ser branco puro (#ffffff) para destacar no fundo preto. Figura 34 - Representação do notification icon. Fonte: http:// developer.android. com/design/style/ iconography. html(2012)

Navegação

A navegação de cada aplicação muda conforme a

necessidade, algumas aplicações possuem poucas informações e telas, outras muitas telas, porém independente do número, a guideline especifica algumas barras inerentes ao sistema Android e que, se usadas erroneamente, podem frustrar ou confundir o usuário. Barra de ação

A barra de ação é parte fundamental de qualquer

aplicação Android, é nela que são adicionados os elementos de navegação interna da aplicação, ações mais importantes como pesquisa ou configurações e um espaço dedicado á identidade da aplicação.

A organização da barra se dá da seguinte forma:

primeiramente o logo da aplicação que pode vir acompanhado com uma seta para esquerda usada para navegação,

conhecido como botão de cima (up button), sua função é voltar sempre para a página imediatamente anterior dentro da app. Logo depois um menu flutuante (drop-down menu) que contém as demais páginas da aplicação, por ele o usuário tem um feedback visual da página que se encontra e um modo mais fácil e rápido de navegar pela aplicação. Em seguida os botões com as ações mais importantes e frequentes da app. Como vimos no exemplo da figura Figura 35 um dos ícones é o botão de twittar (representado por um balão de fala) essa função é a mais importante para a aplicação do Twitter e, no caso do Gmail (Figura 36), vemos que, na visualização vertical, os ícones principais aparecem na parte de baixo, isso acontece porque a aplicação possui muitas funções que não cabem na barra de status. Já na posição paisagem (Figura 37) os ícones retornam á parte de cima ocupando o espaço extra. Figura 35 - Barra de ação da aplicação do Twitter. Ícones com ações mais importantes (pesquisa, “twittar” e atualizar) mais o logo exemplificando o uso desse tipo de barra.(2013)

Figura 36 - Exemplo da barra de status da aplicação do Gmail no modo retrato, com a continuação da barra de status na parte de baixo da aplicação. Fonte: https:// play.google. com/store/apps/ details?id=com. google.android(2012)

Figura 37 - Exemplo da barra de status da aplicação do Gmail no modo paisagem com a barra de status completa na parte de cima. Fonte: http:// lifehacker. com/5965319/ gmail-for-androidgets-pinch-tozoom-swipeto-delete-andmore(2011)

A barra de navegação do sistema Android é inerente

do sistema operacional, ou seja, ela faz parte do sistema como um todo e auxilia na navegação de quaisquer aplicações e do próprio SO. Nessa barra existem três botões o voltar, home e histórico, eles são a base de toda a navegação. O primeiro volta para a página que o usuário estava vendo anteriormente, independente se for a home, outra página da mesma aplicação ou uma página de outra aplicação. O segundo retorna sempre a home de seu aparelho e a terceiro mostra uma lista com o histórico das últimas aplicações abertas para que o usuário possa rapidamente voltar a executar uma tarefa anterior. Porém na versão 4.0 em diante, foi adicionado um botão a barra de ação que permite que o usuário possa navegar dentro da aplicação. Este botão é chamado de botão de cima (up button). Apesar de a sua função ser bem parecida com o botão voltar, da barra de navegação, esse botão é nativo e não permite que o usuário possa voltar para a home ou outra aplicação como podemos observar na Figura 38. Agora analisando dentro das próprias aplicações, existem Figura 38 - Fluxograma da navegação usando a navigation bar e o up button.Fonte: http://developer. android.com/design/patterns/navigation.html(2012)

inúmeras maneiras de fazer a interação das telas. Primeira6. Gesto de arrastar o dedo pela tela em qualquer direção.

mente temos o swipe6 que permite ao usuário percorrê-las com o movimento horizontal dos dedos (Figura 39), usa-se muito essa técnica em leitores de notícia, livros e e-mails, por ser um método rápido de leitura.

Outra maneira é dividir a tela em um menu inferior

à barra de ação dividindo visualmente a home da aplicação em mais telas. Isto, é muito utilizado em aplicações sociais que possuem uma linha do tempo com notícias, o perfil do usuário e outras páginas relevantes que precisam ter acesso rápido a todas essas informações. Figura 39 - Fluxograma da navegação usando a o movimento de swipe.Fonte: http://developer. android.com/ design/patterns/ swipe-views. html(2012)

Figura 40 - Fluxograma da navegação usando menu inferior. Fonte: http://developer.android. com/design/ patterns/swipeviews.html(2012)

Outros Elementos Widgets7 são elementos opcionais das telas da home. São formas de se obter informação de forma mais rápida, sem precisar entrar nas aplicações. Existem quatro tipos de widgets: informacional (Figura 41), que só apresentam informações e não possui nenhuma ação, bons ex-

7. Pequenos aplicativos que flutuam pela área de trabalho e fornecem funcionalidade específicas ao usuário.

emplos são relógios, painéis de clima e placares de jogos. Coleções (Figura 42) apresentam múltiplos elementos de uma só vez como e-mail, favoritos ou galerias. Controladores (Figura 43), painéis com opções que o usuário pode acionar sem precisar entrar na aplicação ou nas configurações, por exemplo, tocadores de música ou painel de redes sem fio. E, por último, os híbridos (Figura 44), esses combinam diferentes elementos em um mesmo espaço, usados por redes sociais, principalmente. Figura 41 - Exemplo de widget informacional Fonte: http://developer.android.com/ design/patterns/ widgets.html(2012) Figura 42 - Exemplo de widget de coleção Fonte: http:// developer.android. com/design/patterns/widgets. html(2012)

Figura 43 - Exemplo de widget de controle Fonte: http://developer.android.com/ design/patterns/ widgets.html(2012) Figura 44 - Exemplo de widget híbrida, com funções de curtir, informações sobre a música e controladores. Fonte: http:// developer.android. com/design/patterns/widgets. html(2012)

A partir da versão 4.0 é possível agrupar ícones de

um mesmo assunto na home do aparelho, isso resolveu o problema de espaço que há na tela principal. Como as widgets ocupam muito espaço físico não sobra muito para os ícones, para resolver essa situação foi implementada essa opção de unir até 16 ícones em um só como mostra a Figura 48.

Figura 45 - Exemplo de ícone agrupado e a exibição dos ícones. (2013)

Sistema Operacional Windows 8/ Microsoft

A plataforma Windows 8 foi lançada em 2012 pela

Microsoft e mudou muito o modo de interagir não só com dispositivos móveis, mas também com computadores de mesa. Juntamente com o sistema operacional foi lançado o estilo nomeado “Modern UI” que é próprio dessas plataformas. Ele consiste em formas quadradas e retangulares interativas, com cores sólidas e navegação horizontal. O Windows 8 mudou o modo como se navega e interage com aplicações desktop e por isso tem tido muitas opiniões negativas por parte de estudiosos de experiência do usuário como Jacob Nilsen que disse:

“Recursos ocultos, descoberta reduzida, sobrecarga cognitiva de ambientes duplos, e potência reduzida a partir de uma interface de janela única e densidade de informação baixa. Muito ruim.” (NIELSEN, 2012) Mesmo com a interface confusa esse sistema operacional também tem melhorias como a rapidez e a beleza dos gráficos do estilo “Modern UI”. Métricas e grids

O Windows 8, assim como o Android, são platafor-

mas que precisam funcionar em muitas resoluções diferentes não só pela variedade de aparelhos, mas porque também funciona em tablets e computadores comuns, os quais normalmente possuem resoluções e tamanhos de telas muito altos. Seu diferencial é que, diferentemente das plataformas acima, o Windows 8 da suporte para que o usuário

possa trabalhar com até duas aplicações ao mesmo tempo nos modos tela cheia, preencher e ajustar(Figura 47). Isso faz com que toda aplicação precise de, no mínimo, três layouts a serem projetados mais a visualização vertical (retrato)(Figura 47)

Para que essas visualizações sejam possíveis o re-

comendado pela guideline oficial é usar layouts flexíveis, ou seja, que se ajustem as mudanças de orientação, exibição e resolução, ao invés de layouts estáticos como na Figura 48. Figura 46 - demonstração dos 3 tipos de visualização de aplicações no Windows 8 tela inteira, ajustado e preencher (da esquerda para a direita)Fonte: http:// msdn.microsoft.com/ pt-br/library/windows/ apps/hh465304. aspx(2012) Figura 47 - Figuras demonstram 2 tipos de orientação de tablets e teclados Fonte: http://msdn. microsoft.com/ptbr/library/windows/ apps/hh465304. aspx(2012)

Figura 48 - Representação de uma aplicação com layout estático. Podemos ver que a aplicação perde sua forma, não redimensiona seu tamanho ou perde informações caso não haja um bom planejamento. Fonte: http://msdn. microsoft.com/pt-br/ library/windows/apps/ hh465304.aspx(2012)

Há também a necessidade de outro modo de visual-

Figura 49 - Á cima vemos o zoom reduzido mostrando todas as opções dentro de cada bloco. Á baixo o zoom aumentado temos somente a visão dos blocos. Fonte: http://msdn. microsoft.com/ptbr/library/windows/ apps/hh761500. aspx(2012)

ização: o zoom semântico. Existem dois níveis de zoons que uma aplicação pode ter: o zoom aumentado, que apresenta as informações de forma mais ampla e completa (é a home da aplicação) e o zoom reduzido que exibe as informações da aplicação de modo compacto permitindo que o usuário navegue por blocos de conteúdo facilitando a busca. Para realizar essa tarefa o usuário usa o movimento de pinça (abrindo os dedos aumenta o zoom, fechando diminui) ou, no caso dos computadores, Crtl+ e Crtl-.

Como podemos observar pelas imagens a naveg-

ação dos Windows 8 é diferente das demais plataformas, ao invés da navegação ser toda na vertical, na orientação de paisagem, a navegação é horizontal (Figura 49). Isso faz com que toda organização da informação precise ser repensada, principalmente se houver grandes blocos de texto, por isso foi criada uma guideline bem específica para os grids das telas. Essa grade é dividida em unidades e subunidades sendo uma subunidade valendo 5x5 pixels e uma unidade com o valor de 20x20 pixels sendo que essa unidade é o conjunto de 16 subunidades quadradas (Figura 50). Nesse grid então nós encaixamos o título com 5 Figura 50 - Exemplo do grid básico das aplicações windows 8 Fonte: http:// msdn.microsoft. com/pt-br/library/windows/ apps/hh872191. aspx(2012)

Figura 51 - Exemplo do grid do título e conteúdo das aplicações. Fonte: http://msdn. microsoft.com/ptbr/library/windows/ apps/hh872191. aspx(2012)

unidades (100pixels) do topo e 6 (120 pixels) da margem esquerda e o conteúdo com 7 unidades do topo, 6 da margem esquerda e a inferior é flexível (Figura 51). Também há as divisões para o conteúdo das aplicações, como toda app é dividida em blocos de conteúdo é preciso calcular a distância entre eles dentro de um mesmo assunto e entre assuntos diferentes. Dentro de um mesmo assunto temos três tipos de divisão: para dividir imagem e conteúdo duas subunidades, para dividir as listas, duas unidades e itens com bordas fixas duas subunidades. E para a divisão entre blocos de conteúdo com assuntos diferentes usa-se quatro unidades.

O modo de visualização das informações também

é muito diferente dos outros no Windows 8. Enquanto o IOS só possui os ícones na sua home e o Android possui além dos ícones os widgets que trazem na própria home funcionalidades das apps, no Windows 8 temos os Tiles. Eles são representações do aplicativo na tela inicial, sem as funcionalidades, como nos widgets, porém trazem informações atualizadas sem que o usuário precise entrar na aplicação (Figura 52). Além disso, funcionam como links para a própria app. Existem três tipos de tiles: quadrado Figura 52 - Exemplo da tela inicial com Tiles Fonte:http:// msdn.microsoft. com/en-us/library/windows/ apps/hh76141. aspx#live_ tiles(2012)

(square Tile), comprido (wide Tile) e animado (live Tile). Os squares tiles trazem somente a cor da aplicação, o nome no canto inferior esquerdo e o ícone. Os wide tiles, tem o dobro da largura dos tiles quadrados e por isso permitem uma densidade de informação maior, mas mesmo assim trazem os mesmos elementos do tile anterior, porém com o ícone maior. Os live tiles podem ter as dimensões quadradas ou compridas, porém a grande diferença é que além da identidade da app eles também trazem informações atualizadas sobre a aplicação com animações alternando do modo da identidade para o modo da informação. Live tiles podem conter inúmeros tipos de informação como fotos, gráficos e textos podendo ser usados para os mais variados tipos de apps. Figura 53 - Exemplo de Live tile comprido e quadrado. Fonte: http:// msdn.microsoft. com/en-us/ library/windows/ apps/hh761491. aspx#live_ tiles(2012) Figura 54 - Exemplo de live tile com gráfico e texto Fonte: http:// msdn.microsoft. com/en-us/ library/windows/ apps/hh761491. aspx#live_ tiles(2012)

Figura 55 - Exemplo de live tiles com fotos e texto mais demonstração das duas visualizações. Fonte: http:// msdn.microsoft. com/en-us/ library/windows/ apps/hh761491. aspx#live_ tiles(2012)

Elementos gráficos: Tipografia , cores e texturas

A parte visual do Windows 8 é a que mais se dife-

rencia das demais plataformas. Como esse sistema operacional surgiu muito depois dos principais concorrentes, foi preciso se diferenciar ainda mais para conseguir atrair o público que já estava acostumado com os formatos anteriores. As principais mudanças são as texturas, enquanto no iOS as texturas são a base para a aplicação, no Windows 8 elas foram praticamente banidas, assim como os degrades e opacidade. Isso não é uma regra, existem muitas apps que utilizam desses recursos para se diferenciarem das demais, porém isso só acontece em elementos que permitem maior flexibilidade como o background da aplicação. O banimento ocorre principalmente nos tiles, barras de ação e ícones. As cores dentro das aplicações e no próprio sistema são sempre cores com grande vivacidade, mas que não atrapalhem a leitura, nunca tendo opacidade. Quanto ás tipografias a guideline especifica o uso da tipografia Calibri para textos curtos como notificações ou chat e Cambria para grandes blocos de texto como leitores de rss8 ou revistas. Mas a principal é a fonte Segoe UI (Figura 60),

8. RSS (Really Simple Syndication) é um serviço de exibição de conteúdo formatado.

criada pelo designer Steve Matteson, ela é a identidade do sistema e é utilizada nos botões, títulos e todos os demais componentes do sistema. A fonte Segoe UI foi criada antes dos aparelhos móveis, mas hoje se tornou sinônimo de produtos da marca Microsoft. Figura 56 - Exemplo da tipografia Segoe UI Fonte: http:// pt.wikipedia. org/wiki/(2009)

Iconografia Existem dois tipos de ícones no Windows 8: os ícones de ação (action icons) que representam as ações que o usuário pode realizar dentro do sistema e das aplicações e os ícones dos tiles (tile icon) que representam a identidade da aplicação. Os ícones de ação tem todos a mesma aparência um círculo com o símbolo no meio, eles sempre tem que vir ou na cor preta ou na cor branca, não podendo variar, também não podem ter nenhum tipo de textura, dregrade ou opacidade. A ferramenta de desenvolvimento possui um

Figura 57 - exemplo de ícones da app bar(2013) Figura 58 - Exemplo de construção de ícone(2013)

Figura 59 - Exemplo de tile icon(2013)

pacote com os ícones de ação mais comuns como voltar, tirar foto, adicionar, pesquisa etc, porém se você quiser criar algum tem que seguir algumas medidas: o cíirculo precisa ter 48px de raio com espessura de 4px e o símbolo tem 26px quadrados. Os tile icons não possuem nenhuma textura ou cor sendo sempre brancos com o fundo da cor do tile (Figura 60). Navegação

Como dito anteriormente, a navegação no Windows

8, diferentemente dos outros sistemas, é horizontal (na visualização paisagem) e isso porque utilizam o padrão de navegação de Hub9 , ou seja, todo conteúdo é dividido em seções e níveis de detalhes então a informação não é revelada toda de uma vez ao usuário.

9. Distribuidor de conteúdo

As camadas de hierarquia no Design Hub são divididas em três partes: páginas Hub, são as primeiras páginas a serem mostradas para o usuário, nelas são aplicados o zoom semântico, permitindo que todo conteúdo da tela seja visto de relance ou de forma agrupada. Nessas páginas o usuário recebe o conteúdo de toda aplicação de uma só vez, porém em partes menores, assim ele pode conhecer melhor a aplicação e filtrar o que é interessante ou não. Páginas de seção são o segundo nível na hierarquia e já não possuem tanta informação junta, sua função é exibir somente o conteúdo de determinada seção em separado, essa página também segue a visualização no estilo panorama. Figura 61 - Exemplo da navegação horizontal com destaque para o cabeçalho e botão voltar (1), página Hub (2) e seções de conteúdo (3) Fonte: http://msdn. microsoft.com/ptbr/library/windows/ apps/hh761500. aspx(2012)

Por último, temos as páginas de detalhes, elas contêm as informações específicas de determinada seção como textos, imagens ou vídeos fazendo com que o formato da página varie. O Windows 8 possui uma navegação linear isso porque só possui um botão de voltar no cabeçalho da aplicação e que só volta para a página imediatamente anterior, isso dificulta um pouco a navegação pois a torna intrincada, o quanto mais o usuário navega mais longe ele fica da pri-

meira informação que absorveu o que pode ser frustrante em apps com muito conteúdo. Figura 62 - Exemplo de navegação Hub. Página Hub, de seção e de detalhe apresentadas de cima para baixo nessa ordem. Fonte: http:// msdn.microsoft. com/pt-br/library/windows/ apps/hh761500. aspx(2012)

Barras de Ação

Existem duas barras de ação nessa plataforma a

app Bar e o Contrato. Na app bar são colocados comandos que variam conforme o conteúdo ou a seleção atual. Por padrão se encontra oculta e aparece fazendo o gesto de baixo para cima (Figura 63) em tablets ou clicando com o botão direito do mouse em computadores. Ela também pode ser programada para aparecer no momento que um usuário executa uma ação, por exemplo, quando queremos excluir uma foto de uma galeria. O contrato é uma barra que pertence ao sistema do Windows 8 independente das aplicações, ele se encontra na

Figura 63 - Demonstração do gesto baixo para cima Fonte: http://msdn. microsoft.com/ptbr/library/windows/ apps/hh761499. aspx(2012)

lateral direita e é aberto com um gesto da direita para a esquerda em tablets (Figura 68) ou com o atalho Windows+C no computador. Por ele o usuário pode fazer pesquisas dentro da aplicação ou outros aplicativos, pode compartilhar o conteúdo da app com outros apps, e-mail ou redes sociais ou então compartilhá-lo com outros dispositivos como televisão ou rádios ou então adicionar conteúdo do próprio computador na aplicação e é onde se encontram as configurações da aplicação e a página de “sobre”.

Figura 64 - Seleção da imagem ativa a App bar que mostra as possíveis opções a serem escolhidas Fonte: http://msdn. microsoft.com/ptbr/library/windows/ apps/hh761499. aspx(2012)

Figura 65 - Opções da barra Comando. Fonte: http:// msdn.microsoft. com/pt-br/library/windows/ apps/jj659082. aspx(2012)

Figura 66 - Exemplo de Comando executando a função de busca Fonte: http:// msdn.microsoft. com/pt-br/ library/windows/apps/ hh868270(2012)

Quadro comparativo

Usabilidade

Customização

Navegação

iOS

Android

Windows 8

O mais fácil de usar porque possui a navegação simples. Trabalha com somente uma aplicação por vez sendo uma plataforma menos confusa.

Por causa da alta customização e do uso de mais de uma aplicação por vez a plataforma é mais confusa de usar que o iOS. As roms customizadas pelas fabricantes também dificultam uma mais padronização.

Em desktops não possui boa navegação, porém em tablets a usabilidade com o toque aumenta e torna a plataforma muito melhor e fácil de usar.

Baixa customização Toda a navegação se concentra na barra de navigação fazendo com que a plataforma seja menos confusa que as demais.

Quant. de Infor- Grande mação Tabela 1 Quadro comparativo dos três sistemas operacionais . Fonte: Lais Mastelari (2013)

Aparência

Uso de skeumorfismo marca a plataforma da Apple, todos os elementos tem muita textura e informações.

Alta customiza- Baixa customção ização Possui além de um menu do sistema comandos de navegação dentro das aplicações fazendo com que a navegação se torne mais completa porém confusa.

Navegação vertical possui somente um botão voltar fazendo com que o acesso ás informações se dificulte

Grande

Pequena

Formas mais chapadas são mais frequentes uso de flatdesign, porém com mais liberdade de criação, podendo existir também aplicações realistas.

Todo baseado no Modern UI a aparência do Windows 8 se resume em tiles com cores chamadas ausência de sombras e degradês.

O Designer e as guidelines

As linhas guia de cada um dos sistemas tem o papel

de um manual de desenvolvimento, ou seja, manter a usabilidade dos aparelhos o mais uniforme possível, isso porque, diferentemente da web, em que existem os mais diversos tipos de navegação, no mobile temos telas menores com menos conteúdo e a interação com os objetos através do tato. Porém ao contrário do que possamos pensar isso não faz com que os designers fiquem presos a essas regras, hoje temos muitos que trabalham na área de interfaces móbile cada vez mais criativos até mesmo mudando o modo como vemos e interagimos com coisas do dia a dia, porém sem precisar sair das regras básicas de navegação e usabilidade agregando valor ás aplicações sem confundir o usuário.

Capítulo 3. O design do Think

A concepção inicial do Think surgiu em uma mara-

tona de programação, em maio de 2012 e foi desenvolvida pela primeira vez para a plataforma Windows Phone 7, a primeira aplicação foi feita as pressas e não possuía iden10. Projeto feito em conjunto com o aluno do curso de Ciência da Computação da Unesp Bauru Rafael Rabelo.

tidade visual definida. Apenas tínhamos10 a ideia de levar uma palavra de sabedoria para pessoas das mais variadas classes, países e culturas e, assim, difundir e conhecer outros autores, de outros lugares e com ideias diversas. Depois da maratona abandonamos o projeto por alguns meses até que surgiu uma oportunidade de colocá-lo novamente em prática. Novamente desenvolvemos nossa ideia em uma maratona de programação, porém em outra plataforma, o Windows 8, dessa vez, com o conceito e os objetivos mais definidos. A primeira versão da app conseguiu passar na loja de aplicativos do Windows 8 e ganhou o primeiro lugar

11. Hackaton Windows 8 realizado no Laboratório de tecnologia da informação aplicada da Unesp Bauru em junho de 2012 – Prêmio para os primeiros colocados foi um teclado e mouse wireless da Microsoft.

como melhor aplicação da maratona.11 Após o reconhecimento de profissionais da área sobre a nossa aplicação resolvemos seguir com a ela e transportá-la para outras plataformas. Funcionalidades

A principal função do Think é o recebimento diário

de citações sobre literatura, música e televisão (inclui-se filmes e seriados) como um meio de informação e, talvez, também de reflexão. Como nos dias atuais as pessoas passam cada vez mais tempo ligadas em redes sociais interagindo entre si, decidimos colocar a função de compartil-

hamento de citações nas redes sociais como um modo de compartilhamento de informações, mas também como um método de publicidade pelo uso.

Durante o desenvolvimento da aplicação fez-se ne-

cessário adicionar funções para pegar uma nova citação (trás uma citação nova do banco de dados) e atualizar (trás do banco de dados citações que já foram alocadas, mas por falta de rede wireless não foram atualizadas na aplicação), isso porque aplicação deveria ficar mais dinâmica para despertar mais interesse do usuário já que a primeira versão era muito parada e dependia do tempo para se atualizar. Para uma melhor organização das informações fornecidas dividimos cada citação em dois, primeiro os grupos por tema (Amor, Amizade, Guerra, Paz, etc.) e segundo pelo nome de autores, desse modo facilitamos a busca por citações ou autores específicos. Identidade Visual

Figura 67 - Logo da aplicação (2013)

A identidade visual do Think foi pensada a partir da

própria palavra pensar. A nossa proposta era de que fosse algo leve e relaxante por isso a escolha do azul-esverdeado (#00a69c) como cor principal, o verde-folha (#3cb549) como secundário e cores neutras para o fundo e textos. Foi usada também uma palheta secundária para que a custom-

ização da aplicação tivesse mais opções e se ajustasse a preferência de cada usuário. Utilizando os conceitos do círculo cromático de Goethe (PEDROSA, 1977) foram escolhidas então quatro cores que são opostas entre si porque precisávamos de cores contrastantes, mas que funcionassem em fundos neutros e tivessem boa leitura em telas tanto com letras claras quanto em escuras. Para a marca Figura 70 - Roda de cores de Goethe Fonte: http://www. brainpickings. org/wp-content/ uploads/2012/08/ goethe_colorwheel.jpg (2000)

Figura 68 - Palheta de cores principal da aplicação(2013)

Figura 69 - Palheta secundária de cores inspirada na roda de Goethe

da aplicação foram feitos um símbolo e um logotipo, isso porque como o projeto lida com diversas plataformas, com diferentes resoluções e regras, não seria possível mostrar sempre o logo juntamente com o logotipo. Por isso o esforço foi dobrado, pois o objetivo era criar duas marcas que conversassem entre si, porém pudessem, sem nenhuma perda, serem usadas em separado. Para fazer o logo escolhemos como símbolo as nuvens que segundo o dicionário de símbolos significa:

“A nuvem possui diversos aspectos diferentes que simbolicamente revelam a sua natureza confusa e mal definida [...] A nuvem indica a transformação que o sábio deve sofrer para aniquilar a si mesmo para conquistar a eternidade.” (CHEVALIER e CHEERBRANT, 1998)

Como o objetivo da aplicação é reflexão do usuário

sobre si mesmo e o espaço ao seu redor a partir de citações, o símbolo escolhido conseguiria exemplificar o nosso objetivo. Outra referência seria o uso das nuvens, nos quadrinhos ocidentais, como uma analogia ao pensar, ao interior, além de ser um símbolo universal, ou seja, ele é reconhecido independente da língua, religião ou cultura do usuário. A construção foi feita a partir de três esferas com o valor do diâmetro sempre 0.7 vezes do tamanho de sua correspondente maior e alinhados horizontalmente pela tangente a 180º, além disso, os centros das duas esferas menores se encontram no limite da maior. Isso dá á imagem um equilíbrio e simetria. Para o logotipo foi escolhida a fonte, brasileira e não serifada Giro Light (MAGALHÃES:

Figura 71 - Construção do logo(2013)

Figura 72 - Character set da fonte Giro light (2013)

2012), na qual todos os caracteres são minúsculos. Possui contornos bem arredondados e leves e, como o nome indica, parece sempre estar girando ou em movimento contínuo.

Para os textos das citações foi usado Segoe UI Reg-

ular no Windows 8, Roboto light no Android e Helvética no IOS e para o nome dos autores Segoe Script Regular. Elas foram escolhidas, porque foram criadas com o propósito de serem usadas em aparelhos móbile. São confortáveis de ler e seguem os padrões das guidelines.

O projeto de Think

Nessa parte apresentarei as fases, em ordem cro-

nológica, que envolveram o desenvolvimento das aplicações: primeiro o Windows 8, depois Android e por último IOS. Na primeira parte dos projetos foram feitos os primeiros desenhos com as ideias iniciais para as interfaces e interação para depois desenvolver os exemplos propostos, que são os primeiros wireframes feitos no computador, esses seguem exatamente a proposta das guidelines e, apesar da identidade visual estar presente nessas primeiras versões, ela não havia sido explorada no seu máximo e sim somente encaixada de modo grosseiro na proposta. Após essa fase foi desenvolvido um protótipo funcional nos software de prototipagem, tal como o Pencil ou Axure, para estudar a interação e fazer os testes de interface. E, por último, foram apresentados para o desenvolvedor Rafael Rabelo os protótipos com as interfaces prontas para serem programadas. Windows 8

Esse foi o meu primeiro contato com a plataforma

e o estilo Modern Ui, por isso foi difícil saber o que poderia ou não ser feito. Nessa época tive constante contato com as guidelines do sistema, porém não havia muita coisa somente o básico já que o próprio sistema nem havia sido lançado oficialmente no mercado. Como estávamos em uma maratona de programação não houve tempo de fazer os primeiros sketches então já passei direto para o Illustrator para fazer as telas. A navegação era muito simples, basicamente uma tela principal com as

citações recentes e divididas em grupos e a tela da citação em si. Figura 73 - Primeiro exemplo proposto, modo de visualização paisagem. 2013

Só havia duas cores de tiles e não tinha modo claro

e escuro, o exemplo proposto foi dado como protótipo final e apresentado para o programador Rafael Rabelo. Com a primeira app já estava funcionando há 5 meses a usamos como protótipo para verificar se a navegação e as informações estavam bem planejadas antes de partir para a segunda versão. Aplicamos uma pesquisa junto aos usuários. Para isso usamos dois tipos de usuários: os que já estavam

Figura 74 - Primeiro exemplo proposto, modo retrato(2013)

familiarizados com o sistema operacional e aqueles que nunca haviam utilizado. Foram, no total, cinco pessoas sendo que três já eram usuários e dois não, sendo todos jovens (18 – 25 anos) universitários da Unesp.

O resultado não foi muito diferente do que esperá-

vamos, aqueles que já utilizavam o Windows 8 não tiveram dificuldades na hora do uso, conseguiam entrar na aplicação, visualizar as citações com facilidade, fazer buscas e trocar a cor dos tiles, todavia os dois não usuários tiveram

muitas dificuldades na hora de acessar a aplicação, as configurações e a busca, não conseguindo realizar essas tarefas sem a nossa ajuda, porém conseguiram entender o propósito da aplicação com rapidez conseguindo interagir com as citações sem problemas. Mesmo havendo poucas pessoas para fazer os testes concluímos que não haveria problema em continuar a segunda versão sem modificar a navegação, porém nós queríamos fazer algo que destacasse a aplicação, que a fizesse ser diferente das demais. A solução foi aumentar a customização dando ao usuário a chance de modifica-la segundo sua personalidade. Seria possível então, mudar o modo de claro para escuro (o que mudaria a cor do fundo da aplicação) e o número de cores dos tiles aumentaria, também adicionamos as funções de “favoritar” e “pegar uma nova citação”.

Após resolvermos o que gostaríamos que fosse im-

plementado começamos a fazer testes com as cores dos tiles e utilizamos conceitos de teoria das cores para conseguir combinar diferentes tons que possibilitariam a leitura tanto em um fundo claro quanto escuro. Chegamos a uma tabela de cores secundária (Figura 69) mais os fundos azulescuro (#0d1125) e cinza claro (#f1f1f1). Figura 75 - Wireframe com a demonstração do teste das cores dos tiles nos modos claro e escuro (2013)

Com isso já poderíamos passar para a fase de de-

senvolvimento, após passar as telas (Figura 75) para desenvolvimento, comecei a me concentrar nas imagens da aplicação para o Windows 8 precisaríamos de cinco tipos de imagens e ícones diferentes três para os tiles da home, uma para a entrada da aplicação e outra para a loja.

Todo o desenvolvimento durou em torno de quatro

meses entre o começo até a aplicação ser publicada. A segunda versão possuía todos os elementos que gostaríamos mais a função multi linguagem (português e inglês) e imagens decorativas que foram adicionadas tardiamente posteriormente e não estavam no briefing inicial. A linguagem usada no desenvolvimento da aplicação foi C# e para a interface XAML e toda a programação foi feita no software Visual Studio 2012, na e a parte do para o design foi usado o software Illustrator. A aplicação de Windows 8 ja possui aproximadamente trinta mil usuários brasileiros e internacionais e já recebeu mais de quarenta feedbacks12, a maioria com classificação positiva fazendo com que a aplicação tenha nota quatro e meio de cinco ficando entre as vinte melhores nacionais e cinquenta melhores internacionais. Android

12. Feedback é uma palavra inglesa que significa realimentar ou dar resposta a uma determinado pedido ou acontecimento.

Após o lançamento da aplicação de Windows 8 a ideia já estava bem mais madura e desenvolvida e por isso decidimos passá-la para outra plataforma. O Android foi nossa melhor escolha porque tanto eu quanto o desenvolvedor já havíamos trabalhado com essa tecnologia e já éramos usuários. Como já conhecia a plataforma de perto e as guidelines do

sistema já estavam amadurecidas e disponíveis comecei a estuda-las mais de perto e logo de início, comparando as duas plataformas, o Android se mostrava mais complexo, porém menos rígido que o Windows 8, permitindo uma criação mais ampla e criativa.

Logo após os primeiros desenhos eu parti para o

Axure, software de prototipagem, que simula a navegação e interação da aplicação para saber se ela era usável do jeito que havia sido planejada (Figura 76). Após, feitas as interfaces, essas foram passadas para o celular e testadas por 7 pessoas, três delas já eram usuários da plataforma e as outras cinco não. As três que já utilizavam esse sistema utilizaram a aplicação com tranquilidade e somente uma Figura 76 Protótipo da Home e da página de grupos feitas no software Axure.(2013)

delas notou que as letras eram muito pequenas e que não conseguia ter uma boa leitura. Dentre as demais, outras 3 disseram que as letras do primeiro protótipo estavam muito pequenas, porém todos conseguiram acessar as citações

com facilidade, fazer buscas, acessar os grupos e favoritos.

Após os testes continuei com o mesmo design

e fiz os primeiros protótipos da aplicação já utilizando as cores da identidade principal (Figura 77), porém não gostei do resultado final que apesar de seguir as guidelines corretamente e ter funcionado nos testes ainda não estava esteticamente agradável. Foram feitos mais dois testes de interfaces com algumas diferenças, primeiro a inserção de

Figura 77 - Primeira interface idealizada(2013)

Figura 78 - Segunda versão com a inserção de imagens no topo. (2013)

imagens no topo para dar mais leveza a quantidade de informações. Porém, percebi que estava me distanciando da 13. Flat Design é um estilo de interfaces mobile e web minimalistas com pouco texto, cores chapadas e muitas imagens.

Figura 79 - Última versão modos claro e escuro. (2013)

Figura 80 - Última versão da interface modo paisagem.(2013)

identidade principal da aplicação e, ainda assim, não havia resolvido o problema principal que era a carga excessiva de conteúdo.

Após mais alguns testes cheguei a versão final da

interface, decidi usar os conceitos de Flat design13 apoiado

nas telas que já haviam sido feitas e testadas. Assim como no Windows 8 também adicionamos as opções de cores de fundo da aplicação e das citações, mantendo a mesma palheta de cores utilizada mas adicionando a opção transparente, ou seja, sem cor alguma nas citações.

Após decidir como seria o estilo da aplicação foi

necessário pensar em como ela se comportaria em modo Figura 81 - Representação de todas as cores das citações nas versões claro e escuro

paisagem e em tablets. Como o layout foi baseado em retângulos não faria sentido (em smartphones) que em modo paisagem a navegação continuasse a ser na vertical, então ela foi modificada para ser na horizontal quando o celular se encontra nessa posição (Figura 80). No caso das tablets usamos fragments que são containers de objetos que podem se ajustar na tela de acordo determinadas configurações como tamanho da tela e orientação, ou seja, cada página aparece dentro de um determinado fragment podendo apresentar em uma tela maior duas páginas que interagem entre si (Figura 82). O uso desses containers torna desnecessário ao designer ter que fazer um projeto individual para tablets e em consequência não é preciso Figura 82 - Demonstração da tela em uma tablet com dois fragments um para a home e outro para a página de citação. (2013)

programar duas aplicações diferenciadas, fato que diminui em muito o tempo de desenvolvimento, porém quando projetamos com fragments é necessário pensar que uma mesma página precisa funcionar tanto em smartphones como em tablets.

No Android também foi necessário projetar quatro

páginas que não haviam sido projetada e necessárias no

Windows 8. São elas: a página de autores, de grupos, de favoritos e de configurações. Na de autores e de grupos usamos um elemento que já é comumente usado nessa plataFigura 83 - Prototipo da páginade autores(2013)

forma, a lista de elementos, usada na aplicação de ligação para os contatos do telefone. Escolhemos essa ferramenta porque esperamos ter infinitos números de autores e grupos que precisam estar organizados em ordem alfabética de uma maneira prática.

A página de favoritos foi projetada para ser dife-

renciada da página da home, seu foco foi a quantidade de conteúdo aparente, isso porque as citações aqui presentes já são conhecidas do usuário, porém não queríamos modificar demais a aparência das citações a ponto de não parecerem mais a mesma aplicação, então diminuí pela metade o tamanho dos retângulos transformando-os em quadrados, assim é possível visualizar duas vezes mais citações e retirei a barra com os ícones de favoritos e compartilhar, mudando essas duas ações para um clique longo acima da

citação que abre uma popup com ambas as opções.

Por último, a página de configurações foi projetada

para ser acessada do ícone de configurações na home, é por ela que o usuário escolhe o tema da aplicação e as cores das citações, muda o idioma, acessa as informações Figura 84 - Página de favoritos com as citações dispostas em quadrados(2013)

Figura 85 - Página de configurações com todas suas opções

sobre os desenvolvedores e configura o tempo de recebimento das citações. Essa página é muito característica da plataforma Android e decidimos usar os elementos de base para não confundir e deixa-la mais simples e acessível para o usuário.

As últimas coisas que foram projetadas foram as

widgets e os ícones da aplicação. Desenhei dois tipos de widgets uma seria interativa e a outra seria estática. Ambas teriam somente duas cores, branca e preta, para se adaptarem ao background do aparelho e não prejudicarem a leitura. A widget interativa permitiria a visualização de várias citações novas direto da home do aparelho pelo movimento de swipe, a outra só mostraria a última citação recebida e seu tamanho seria maior que a primeira. O ícone da aplicação (laucher icon) foi um desafio, já que não há um elemento que diretamente indique e faça lem-

Figura 86 - Protótipos dos dois tipos de widgets possíveis para a aplicação

Figura 87 - Exemplo do laucher icone funcionando em um background qualquer

brar citações e somente o logo não chamava devida atenção no meio de tantos outros, então repliquei o logo e os arranjei de forma que parecessem em perspectiva tudo dentro de um círculo o que trouxe leveza e destaque dentre os demais ícones.

O desenvolvimento dessa aplicação, Think, durou

seis meses com grandes interrupções o que permitiu que eu pudesse experimentar muitos tipos de designs e ferramentas até chegar na versão final. Nenhuma alteração de brief-

ing ocorreu durante o processo mantendo todas as funções como recebimento de citações, pegar uma nova e atualizar.

A linguagem usada no desenvolvimento da aplica-

ção foi o Java e para a interface XML tudo programado no software open source Eclipse. Para o design foram usados o Axure e Illustrator. A aplicação tem previsão de lançamento para o mês de junho de 2013. IOS

O desenvolvimento das interfaces para IOS ocorre-

ram em paralelo com as telas feitas para o Android, porém como não tínhamos um desenvolvedor que soubesse a linFigura 88 - Primeiro protótipo feito para iOS (2013)

guagem do aparelho a aplicação não foi finalizada e publicada. As primeiras telas (Figura 88) foram feitas seguindo as guidelines, pois nunca tinha tido contato com a plataforma. A ideia era fazer uma interação diferenciada a qual se baseava em uma lupa, haveria um retângulo que poderia ser movido para cima e para baixo ampliando o tamanho das citações e as deixando legíveis, todas as outras páginas seriam acessíveis pela tab bar e os ícones só apareceriam quando a citação estivesse em cima da citação.

Todavia, depois de consultar um desenvolvedor

iOS, fui informada de que, diferentemente do Android, os usuários de Iphone já tem o costume de favoritar ou compartilhar usando um clique longo no objeto até aparecer um menu do sistema com essas opções. Por este motivo precisei mudar a interface, aproveitei para também mudar seu layout e o visual da app. Dessa vez o visual foi inteiramente Figura 89 - Segundo protótipo de home do sistema iOS (2013)

Figura 90 - Opções de compartilhar e favoritar que abrem após um clique longo na citação. (2013)

Figura 91 - Exemplo da página de citações (2013)

alterado e resolvi usar a identidade visual das nuvens e representar a aplicação como um céu, excluindo a interação da lupa, porém o fundo da tela mudaria conforme o usuário fosse descendo as citações, como se estivesse caindo. A página das citações seria o ponto mais alto e toda vez que

o usuário fosse acessar a página da citação ele subiria até chegar ao céu mais escuro. Também haveria um feedback visual das citações que eram favoritadas, nesse caso a aspas da citação apareceria na cor vermelha.

Como não conseguimos achar alguém que desen-

volvesse a aplicação para Iphones não houve a programação. A parte do design durou um mês para ser feita e foram utilizados os software Photoshop e o Illustrator para fazer as telas.

O Produto

Navegação horizontal

Citações categorizadas pelos grupos

Todas as cores de tiles disponĂveis

Na posição vertical a navegação muda de horizontal para vertical.

Comando que abre as configuraĂ§Ăľes

Ícones para o painel de configurações

Tab bar com os botões da demais páginas. Tem movimentação da direita para a esquerda

Ícones de compartilhamento.

Ícones para favoritar

CitaĂ§ĂŁo completa

Nome do autor / grupo/ fonte

Cores invertidas no tema escuro

Ligar as atualizações automáticas

Tempo entre as atualizações ( 10 min - 30min 1h - h - 1dia) Muda os temas

Seleciona a cor das citações

Termos de uso Sobre da aplicação

Lista das categorias

Todas as cores de tiles disponĂveis no Android.

Para favoritar uma citação é so clicar sobre as aspas.

Tab bar em formato circular dá o acesso ás páginas de favoritos, categorias, recentes e autores

3 Ăcones para pegar uma nova citaĂ§ĂŁo , favoritar e compartilhar .

Após um longo clique em cima das citações abre-se uma aba de ações com as opções de compartilhar e favoritar.

100

Considerações finais O projeto todo completou um ano em maio de 2013, pouco antes da entrega desse trabalho e mesmo assim ainda não conseguimos concluir a aplicação para iOS por falta de programadores, todavia pretendemos concluí-la até o final desse ano acompanhada de uma aplicação para Windows phone 8 e aprimorar as que já estão feitas adicionando mais funções como a troca de citações pelos próprios usuários da app e a possibilidade de se unir uma citação com uma foto tirada pelo próprio smartphone. Durante o processo de projeto e a produção da aplicação, aprendi muito sobre as guidelines de cada uma das plataformas e principalmente a importância dos designers de interface móbile a conhecerem também. Vejo, hoje, no mercado de aplicações diversas delas que, por não seguirem as especificações básicas, acabam não se mantendo nas lojas ou simplesmente não se encaixam no sistema operacional com a qual deveriam ter sido projetadas causando um desconforto desnecessário nos usuários da plataforma. Também observei durante o projeto a importância do designer trabalhar diretamente com o desenvolvedor, como um time e não somente como o projetista como a maioria das empresas fazem. A distância entre os dois causa discrepância no resultado final e tanto o designer quanto o desenvolvedor acabam aprendendo pouco no processo se tornando apenas ferramentas de fazer softwares e não dois profissionais que se completam um por sua criatividade e o outro pela lógica.

102

Bibliografia APPLE. Guideline oficial sistema IOS. Disponivel em: <http://developer.apple. com/library/ios/#documentation/WindowsViews/Conceptual/ViewPG_iPhoneOS/ Introduction/Introduction.html>. Acesso em: 28 março 2013. ARTHUR, C., 24 janeiro 2012. Disponivel em: <http://www.guardian.co.uk/technology/2012/jan/24/smartphones-timeline>. Acesso em: 2013 abril 2. B’FAR, R. Mobile Computing Principles: Design and developing mobile applications with UML and XML. Cambridge: Cambridge University Press, 2005. BONSIEPE, G. Design: do material ao Digital. Florianópolis: FIESC: IEL, 1997. BUARQUE, A. D. H. F. Novo dicionário Aurélio da Língua portuguesa. Curitiba: Editora positivo, 2004. CHEVALIER, J.; CHEERBRANT, A. Dicionário de símbolos. Rio de Janeiro: José Olympio, 1998. GOOGLE. Guideline Oficial Sistema Android, 2011. Disponivel em: <http://developer.android.com/design>. Acesso em: 29 janeiro 29. GSMA, 14 janeiro 2013. Disponivel em: <http://www.gsma.com/spectrum/brazilis-the-fourth-largest-mobile-market-in-the-world>. Acesso em: 2 abril 2013. HOOBER, S.; BERKMAN, E. Designing mobile interfaces. Sebastopol: O’Reilly, 2011. MAGALHÃES, M. Portifólio do Tipógrafo Marcelo Magalhães. Disponivel em: <http://www.marcelomagalhaes.net/59830/74429/-typography/giro-typefacedesign>. Acesso em: 2013 janeiro 29. MICROSOFT. Guideline oficial para Apps Windows 8. Disponivel em: <http:// msdn.microsoft.com/en-us/library/windows/apps/hh779072.aspx>. Acesso em: 25 março 2013. MICROSOFT. Princípios de design da Microsoft. Disponivel em: <http://msdn. microsoft.com/pt-br/library/windows/apps/hh770552.aspx>. Acesso em: 25 fevereiro 2013. MOORE, G. E. Cramming more components onto integrated circuits. New York: McGraw-Hill, 1965. NIELSEN, 18 janeiro 2013. Disponivel em: <http://tecnologia.ig.com.br/2013-0118/entre-os-celulares-usados-no-brasil-36-sao-smartphones-diz-nielsen.html>. Acesso em: 2 abril 2013. NIELSEN, J., 19 novembro 2012. Disponivel em: <http://www.nngroup.com/articles/windows-8-disappointing-usability>. Acesso em: 3 março 2013.

104

OLIVEIRA, O. L. D.; BARANAUSKAS, M. C. C. Interface Entendida Como um Espaço de Comunicação, 1999. PEDROSA, I. Da cor a cor inexistente. 10. ed. São Paulo: Senac, 2009. PREECE, J.; ROGERS, Y.; SHARP, H. Design de interação - além da interação homem-computador. Porto Alegre: Bookmman, 2005.

105

106