Como uma interface gráfica pode ser poderosa
Existe muitos exemplos de empresas e projetos livres que prestigiaram-se pelo seu auto grau de qualidade nos softwares ou jogos que produziram, mas que ao mesmo tempo deram uma importância ímpar para a interface gráfica dos mesmos.
É preciso pouco para produzir uma interface boa. Vamos analizar a interface mais conhecida do planeta, a da Google. Muitos conservadores gritaram, esperniaram e criticaram silenciosamente (eu mesmo ouvi muito) que a interface do Google é feia. Sim, ela é(ra).
Tal popularidade do software fez com que as pessoas se acostumassem com uma nova geração de interface que eles intencionalmente ou não, criaram. Na época do surgimento da Google, tudo era trevas, digo, carnaval. Sites carregadíssimo de imagens, propagandas, dezenas de links. O conceito de "Portal" para ser o ponto de entrada de uma empresa era muito comum, e a Google veio para quebrar esse paradigma, exibindo em seu portal 15 links, uma textbox, dois botões e uma logomarca.
Sua simplicidade simpatizou o planeta que muitas empresas alteraram seus mecanismos de busca, o antigo site Cadê que era nossa Estrela Pop para procurar coisas aqui no Brasil também se adaptou e hoje exibe só uma texbox também.
Anualmente as empresas costumam fazer alterações em seu layout, algumas mais pesadas como o Terra já fez esse começo de ano. Mas empresas como a Google não podem se dar ao luxo de alterar sua interface radicalmente, o público que acessa o portal é distinto demais para haver uma aceitação grande, mas para uma interface tão poderosa como a dela uma simples alteração causa alarde e admiração.
A Google mudou ontem, dia 09/01/2009 por volta das 18:00 o favicon dela (aquele ícone que aparece do lado do endereço) para um "g" branco estilizado com as cores da empresa mixando-se ao fundo.
O que antes era um "G" azul no fundo branco passou para esse "g" branco no fundo colorido. A mudança foi tanta que o blog Undergoogle.com já anunciou sua mudança minutos depois da publicação do novo ícone.
Notem como uma empresa conquistou seu lugar ao Sol com sua interface altamente prestigiada onde uma alteração de um ícone de 16x16 gerou centenas de posts em blogs (incluindo esse), notícias na Folha e na Abril.
Apenas por curiosidade, esse novo ícone foi criado por André Resende do curso de Ciência da Computação da Unicamp. Sim! Foi um brasileiro que criou em um projeto juntamente com vários estudantes. (Eu queria ter visto e participado...)
Visualizações: 295
URL curta (Snick.me)Promoção de uma GUI
Quem não se lembra do massivo comercial do Microsoft Windows 95 quando eles introduziram o Botão Iniciar (que hoje é um dos mais famosos elementos de GUI), podendo ser até mais famoso que o próprio Windows. O investimento de marketing em cima do Windows 95 tornou a "Barra de Tarefas" com seu "Botão Iniciar" a marca registrada do Windows.
Tão famoso ficou, que as pessoas acostumaram-se com o termo e a idéia, que se tornou prático e essencial em um sistema operacional (SO) ter esse tal botão. Tanto é que a Microsoft patenteou essa "marca" dando ela o direito único a explorar a idéia do botão iniciar, apesar que algumas outras empresas usarem essa mesma idéia mas com tênues mudanças para não render processos jurídicos. (Atenção freetards, não estou discutindo linux, Mac ou quem veio primeiro: o ovo ou a galinha).
No Brasil, promover um novo software não é tão rentável, pois o consumidor final não é o foco principal de empresas como a Microsoft (sim, apesar de quase todos os habitantes do Brasil, terem um (PC) com o Windows instalado, a Microsoft foca mais os produtos dela em empresas. Uma justificativa talvez seria o baixo poder aquisitivo da população, não sendo viável vender uma cópia do Windows XP Professional por R$ 749,00 (mais ou menos, mas peraí, estamos no Windows Vista já, mas ainda dá para comprar o XP OEM) para o João da padaria da Penha, comerciais de softwares ocorrem com uma certa frequência, e pode-se dizer que o foco dos comerciais em GUI chama muito a atenção de consumidores finais. No vídeo abaixo você pode conferir um vídeo promocional sobre o Windows 95, na época de seu lançamento, note o foco no botão iniciar.
(esses vídeos vieram dos extras do CD do Windows 95)
O foco desse post tem mais caráter curioso do que prático. Mas é interessante ver como interfaces tem sim sua importância em produtos. Agora, se quiser vender software no Brasil para usuário doméstico, não faça propaganda na TV, mas cative eles. O que você, leitor perdido que caiu nesse blog acha? (comente! não precisa de registro)
Visualizações: 807Como usar cores em layouts
Para quem não é designer, começa aí um pesadelo na hora de montar uma interface: As cores. Elas são suas aliadas na passagem da informação, tanto para um site, quanto para um software ou jogo. Mas como fogo, se você não souber manipula-la, você se "queima".
Cores são as propriedades mais ricas em um website, software ou jogo. A cor ajudará na definição da identidade visual, padrão de navegação e relacionar áreas. De acordo com Farina (2002), as cores transmitem estados e sensações, induzem uma pessoa. Tons de laranja e vermelho (cores quentes) atraem jovens de 10 a 17 anos, tons claros de azul e cinza atraem a atenção de profissionais adultos entre 20 e 40 anos. Ao projetar um software, website ou jogo, deve-se levar em consideração as cores e usar elementos com cores certas. Tons de verde remetem a um ambiente hospitalar. Um software de automação hospitalar que siga estes padrões se adapta bem ao ambiente e provavelmente ao logotipo da empresa que certamente seguirá o mesmo padrão de cores.
A combinação de cores é muito importante, uma boa combinação causa harmonia, tranqüilidade e conforto visual no produto. Como um remédio, dosar para mais ou para menos o fator "cor" fará com que o produto melhore ou fique mais doente ainda. Por exemplo, usar a cor azul e vermelha combinadas causa um desconforto visual, pesando muito o produto e conseqüentemente a opinião subjetiva de um usuário para com o produto. Veja abaixo a imagem e note como as junção nas fronteiras das cores criam linhas claras e escuras entre elas. Isso não existe, é um desconforto visual.
A cor de um website está intimamente ligada às cores usadas no logotipo da empresa, uma tendência comum é seguir as cores do logotipo para construir a identidade visual. Mas deve-se tomar cuidado com o tom das cores, pois um logotipo por ser pequeno e objetivo, pode carregar corres fortes que em grande quantidade (em um Layout) podem ficar cansativas. Aconselha-se o uso de cores contrastantes e pastéis para uma definição forte de identidade visual e ao mesmo tempo conforto visual.
Existem livros que falam só disso! Acoselho a leitura do livro "Psicodinâmica das Cores em Comunicação" (ISBN: 8521203993), de Modesto Farina. É uma pós-graduação em cores que eu tenho certeza que vale a pena a leitura, pois mesmo quem não é da área, vai achar super interessante.
Abaixo, alguns exemplos e contra-exemplos de combinações de cores:
Deu para perceber né? Mas não é só isso, nossa históra vai continuar, falando sobre Backgrounds em websites e tipografia ideal para websites.
Visualizações: 6314Técnicas de Layout
Tanto um website, software ou game, passam por um processo de criação de layout. Deve-se levar em consideração que o Layout deve ser fácil de aprender e usar, ele será uma peça importante na hora da comunicação do seu produto. Compilei aqui 3 aspectos importantes ao montar um layout para seu site:
No ocidente, é um costume ler-se da esquerda para a direita, de cima para baixo, basta pegar uma revista em quadrinhos feita no Brasil para conferir a ordem de leitura dos balões. Um Layout leva em consideração esses fatores, pois a comunicação feita em balões em um quadrinho é feita com elementos (e widgets no caso de um software) em uma GUI.
A figura abaixo mostra a ordem de leitura de uma interface gráfica:
Note como a maioria dos websites carregam seu logotipo no canto superior esquerdo, é o local que se inicia a leitura. Ao construir uma interface, é importante fazer com que esta ordem seja seguida, pesando corretamente os elementos da interface. A Região Quatro mostrada acima, não deve pesar mais que a Região 1.
A Região 1 é o ponto inicial que o usuário observa seu site, muitos desenvolvedores de sites não sabem porque todos colocam o logotipo nesta região, acreditando que é um chavão, ele coloca também. Uma Região nunca deve ser mais pesada que a Região anterior.
A Região Dois é um ponto estratégico para a inserção de logotipos, ou um menu superior, pois o trajeto que os olhos fazem entre a Região Um e a Dois ainda é a mais importante. Dependendo do ramo do website, inserir um menu de serviços, um campo de senha ou publicidade, é uma prática bastante adotada por designers e webmasters.
Um outro fator importante na construção de um Layout, é atentar-se na Hierarquia da Informação, que consiste em organizar a disposição das informações em seu website em relação a outros elementos visuais da GUI. Essa disposição determina que informação o usuário vê, e o que ele é encorajado a fazer primeiro, muito utilizado em websites de comércio eletrônico (e-commerce). Para ajudar a decidir a hierarquia, deve fazer a si mesmo perguntas como: "Qual informação é mais importante para o usuário?" e "O que o usuário deseja ver primeiramente? E em segundo, terceiro, quarto lugar?". Para um usuário que procura websites de confecção de etiquetas comerciais, ver como elas são e preços é a prioridade, no caso de um software de edição de imagens, por exemplo, a primeira coisa que um usuário quer fazer é: Criar uma nova imagem.
Dar foco e ênfase nas informações relevantes e centrais do produto auxilia o usuário a se localizar no Layout. Se um usuário procura um website de um estúdio de gravação para treinar com sua banda, dê ênfase nas salas, preços e imagens do local, deixe mais relevante do que outros serviços como gravação de CDs, empréstimos de equipamentos, etc.
Estrutura e equilíbrio dos elementos e informações do site são vitais para que haja compreensão do layout. Misturar assuntos ou não deixar claro onde termina o menu, e onde começa o conteúdo, dificulta a leitura do usuário, e o mesmo acaba se perdendo. Sites pessoais sofrem pesadamente com este problema. Por falta de estudo, muitos criadores acabam pecando nas noções mais básicas de estrutura e equilíbrio. Um erro grave e imperdoável é misturar anúncio com conteúdo do site. Isso faz com que o usuário se sinta enganado por estar sendo persuadido a clicar nos anúncios de publicidade.
A figura abaixo ilustra uma tradicional quebra de equilíbrio e estrutura, misturando anúncios textuais da empresa Google Inc com itens de seu menu de navegação e elementos de notícias do site. O usuário que clicar erroneamente em um anúncio, se sentira enganado pela pegadinha, além de ter dificuldades em separar o que é anúncio de conteúdo.
Relação de Elementos é um fator que complementa a Estrutura e Equilíbrio. Criar relações entre elementos de mesma categoria, ou conduzir um fluxo de navegação é importante. Na figura abaixo temos um bom exemplo de manter relações usando cores. Note como o website do e-commerce Submarino utilizou cores para relacionar suas seções.
Agora, para fazer o enlace deste padrão de cores, note a figura abaixo e veja como o Submarino fechou a relação entre Beleza e Saúde com azul-bebê e Brinquedos com Vermelho, no mapa de navegação:
Por fim, quando temos um website, software ou game muito grande, é importante prestar atenção na unidade de integração. Isso faz com que uma seção de seu website, ou uma janela de seu software carregue elementos chaves que permitem o usuário saber que ainda está em seu website ou software. Isso exige que se construa uma identidade visual que permite saber em qualquer momento que mude o título de seu website por estar em uma sub-seção, ou caso abra muitas janelas em seu software, o usuário ainda saiba que ainda está dentro do produto, para não causar a sensação de que ele deixou o website, ou abriu outro programa. O Website da Microsoft Corporation possui um padrão visual onde mesmo mudando o título, nos permite deduzir que ainda estamos no website da Microsoft, basta olhar a figura abaixo e ver por alto a relação visual entre os dois sites.
A identidade visual do topo se mantém em todos os hotsites. A disposição do menu e elementos centrais (região 1, 2 e 3) sempre seguem o mesmo padrão. Então, não importa se mudar as cores ou até o logo, você ainda saberá que está dentro da rede de sites da Microsoft, ou ainda estará vendo um produto da Microsoft.
Então, resumindo a ópera, para começar a fazer uma interface de sucesso, os três itens abaixo devem ser obedecidos:
- Ter uma disposição dos elementos de forma correta;
- Tornar a navegação e leitura simples, sem poluição; e
- Criar uma identidade visual
Dá para começar a trabalhar com isso? Dá sim! Mas ainda tem mais coisas que vai gostar de saber, que estarei publicando nos próximos posts!
Visualizações: 1817Usabilidade
Usabilidade tem muito o que falar, mas vou seguimentar em vários posts, começando com este, que introduz o assunto, conta um pouco da história e seus criadores e objetivos.
Para Hix e Hartson (apud Heemamm, 1997), conceituaram usabilidade como a combinação da fácil aprendizagem, alta velocidade de execução de tarefas, baixa taxa de erros, subjetiva satisfação e retenção do conhecimento da interface, ou seja, o usuário mesmo depois de um bom tempo sem interagir com a interface, ainda se lembra de como usa-la. Já para Bevan (apud Dias, 2003) aponta "usabilidade" como sendo um termo técnico para referenciar a qualidade de uso de uma interface. De acordo com as normas ISO 9241, "usabilidade" é definida como "Efectividade", Eficiência e Satisfação com que os usuários atingem os seus objetos em um determinado sistema.
Quando falamos de usabilidade, estamos nos referindo o quão bem os usuários podem utilizar os recursos do website ou software. "User Friend" (amigo do usuário) é um termo mundialmente conhecido para definir se uma interface ajuda o usuário, seja um website, software ou game. Porém, user friend é diferente de usabilidade, além de não ser uma definição baseada em termos científicos, ou seja, dizer que uma interface é user friend, não lhe dá substrato e métricas. É um termo vago, e muito abrangente.
Porém, Nielsen associou o termo usabilidade a cinco atributos de uma interface passiveis de mensuração, que seguem:
- Facilidade de aprendizado;
- Eficiência de uso;
- Facilidade de memorização;
- Baixa taxa de erros e
- Satisfação subjetiva
Com esses atributos, torna-se possível medir o grau de usabilidade, além de se tornar um termo mais concreto. Dizer se uma interface tem alta ou baixa usabilidade é verdadeiro.
Visualizações: 401A Xerox não é só para copiar papel
No post anterior contei a história da interface gráfica, mas sem dúvidas, um dos saltos no mundo das interfaces gráficas foi dada pela empresa Xerox, acredite, na construção de um sistema desktop chamado 8010 Star Information System em 1981. Este foi seu primeiro sistema comercial que reuniu várias tecnologias que hoje podemos chamar de "Computador Pessoal", incluindo um display de bitmaps, e sem dúvidas, a primeira interface a usar o conceito de janelas, ícones, pastas e menus.
A filosofia chave para a construção desta interface, é de que ela deveria ser intuitiva para o usuário final, para ser usada em escritórios e empresas. E para isso, o carro chefe foi o conceito de What You See Is What You Get (WYSIWYG).
No final, podemos observar uma tela onde há ícones e pastas, cada qual representando seu tipo de arquivo (imagem, texto, etc), onde ao clicar neste ícone, abre-se uma janela. Note que no Star da Xerox, não há programas como editores de imagem e processadores de textos, mas cada tipo de documento abre em seu aplicativo apropriado, e nada mais.
A interface do Star da Xerox segue o conceito de objetos, por exemplo, em um editor de textos, você tem objeto página, objeto parágrafo, objeto palavra, objeto letra, e se você clicar neste objeto, você invoca uma série de opções como copiar, recortar, remover. Em outros casos aparece uma "janela de opções" onde você pode configurar propriedades diferenciadas para cada tipo de objeto, como tamanho da fonte e estilo.
A interface do Star da Xerox segue o conceito de objetos, por exemplo, em um editor de textos, você tem objeto página, objeto parágrafo, objeto palavra, objeto letra, e se você clicar neste objeto, você invoca uma série de opções como copiar, recortar, remover. Em outros casos aparece uma "janela de opções" onde você pode configurar propriedades diferenciadas para cada tipo de objeto, como tamanho da fonte e estilo.
Uma das inovações também inclui a alta compatibilidade entre os aplicativos, por exemplo, se você cria um objeto gráfico em um programa de imagens, você pode inseri-lo dentro do editor de textos, juntamente com sua documentação. Esta capacidade de incluir diferentes objetos em um mesmo lugar não existia no Microsoft Windows antes de ser criada a tecnologia Object Linking and Empedding (OLE) que foi inclusa no Windows nove anos depois, em 1990.
Podemos ver o resultado desta incrível criação na imagem abaixo, onde é possível observar os diferentes objetos interagindo. Note os widgets, ícones e janelas:
Pena que hoje a Xerox é vista como copiadora de papel, ou melhor, a ação de fotocopiar uma folha!
Visualizações: 392O surgimento da GUI
Historicamente, nos anos 60 não existia uma interface gráfica, até então, tudo era a base de cartões perfurados, quando não, papéis perfurados com algoritmos e alfabetos, o output (saída de dados) era feita através de impressoras. Não existia uma interação com o usuário.
Sketchpad sendo usado
Em 1962, Ivan Sutherland nascido em 1938 e até a data deste post, ainda vivo, criou em sua tese de PhD no Massachusetts Institute of Technology (MIT) o que podia se dizer a primeira GUI já desenvolvida. O software Sketchpad, que podemos considerar o antecessor do Caomputer-Aided Drafting (CAD) abriu alas para o mundo das interfaces gráficas. Com o uso de um light pen (uma caneta sensível conectada ao terminal) e um Cathod Ray Tube (CRT) que conhecemos como Monitores CRT usados até hoje
O Sketchpad segundo a Wikipédia, através de uma interface simples, porém intuitiva proporcionou ao usuário uma nova experiência ao operar um computador. Com o monitor sensível aos toques da light pen, o usuário pode "clicar" nas regiões onde estariam desenhadas opções. As áreas clicáveis eram reconhecidas ao toque, e o terminal determinava se a área x-y do toque executava alguma ação. Adicionalmente, o usuário podia desenhar na tela com a Light Pen.
Visualizações: 256Metáforas
Você sabe o que é metáfora? Imagino que sim, usamos elas muitas vezes no nosso dia-a-dia, vide o "morrer de rir" como algo bem corriqueiro. Mas quando falamos de Interfaces Gráficas, metáforas tem um significado parecido porem com outra roupagem.
Metáforas, em nosso campo de estudo (Interfaces) são formas de realizar mapeamentos entre sistemas informatizados e o mundo real. Paul Heckel, consultor de várias empresas americanas, foi o pioneiro no uso de metáforas em sistemas informáticos, que consistia em abstrair elementos do mundo real e representa-los na interface.¹
A metáfora é uma figura de linguagem que consiste na alteração do sentido de uma palavra ou expressão, pelo acréscimo de um segundo significado, quando entre o sentido de base e o acrescentado há uma relação de semelhança, de intersecção, isto é, quando apresentam traços semânticos comuns.
Abstrair elementos do mundo real para o mundo virtual é o estado da arte da comunicação, uma vez que os elementos que compõe a interface são mnemônicos para os usuários. E comunicação é que queremos. Isso permitiu filtrar a cerne dos problemas, mas ainda restam pequenos problemas, que são os maiores de todos, que é justamente abstrair do mundo real ações que teoricamente só existem no mundo virtual. Interessante não é? Vamos para alguns exemplos:
Um botão é um clássico exemplo, o que temos no mundo real, foi facilmente desenhado no computador, e magicamente, toda a funcionalidade foi transportada junta. Note que não precisa pedir que o usuário entenda que aquilo é um botão, e que portanto foi feito para ser apertado.
Menus suspensos já são diferente, não temos esse tipo de organização no mundo real, eu mesmo não me lembro de ter visto um menu suspenso sendo usado fisicamente, mas engraçado que com apenas um clique você entende o que é para ser feito, pois um menu parte de um botão.
Um botão gera uma lista de itens. O que é Item é para ser escolhido, logo ao perceber que esses "itens" são clicáveis, você imediatamente deduz que aquilo é um comando. É a magia da metáfora, você aprendeu isso no mundo real, e sabe o que fazer no mundo virtual. Pode no máximo precisar de um professor de informática para dar os primeiros passos para entender essas metáforas, mas depois aprendido, qualquer situação diferente fica fácil de entender. Por exemplo, uma vez entendo o menu, qualquer um soube operar sem dúvidas e com apenas alguns segundos de observação, o XROSS (o menu patenteado pela Sony).
Interfaces exigem metáforas, se você não sabe criar metáforas, você não sabe criar interfaces.
Visualizações: 707