Você está na página 1de 128

Design de

Interface em
Dispositivos
Mveis

Caio Salles Manzotti

Pgina intencionalmente deixada em branco

Design de Interface em
Dispositivos Mveis

2013
Caio Salles Manzotti

Sumrio

Sumrio............................................................................................. 2
Introduo......................................................................................... 6
Fundamentao Terica................................................................. 10
Do Teleautograph ao iPad.............................................................. 22
Objetivos.......................................................................................... 30
Briefing............................................................................................. 34
Referncias Projetuais.................................................................... 38
Abertura............................................................................................................ 40
Pgina principal.............................................................................................. 41
Navegao....................................................................................................... 41
Player................................................................................................................ 42

Metodologia para Dispositivos Mveis......................................... 44


Evernote............................................................................................................ 51
Google Drive.................................................................................................... 52
iBooks............................................................................................................... 52
iPad Vdeos...................................................................................................... 53
Paper................................................................................................................. 54
Photoshop Express........................................................................................ 55
Wunderlist........................................................................................................ 56

Conceito........................................................................................... 60
Gameficao................................................................................................... 63

Arquitetura de Informao............................................................. 68
Levantamento de dados............................................................................... 70

Prototipagem................................................................................... 72
Prototipagem de baixa fidelidade................................................................ 73
Prototipagem de alta fidelidade................................................................... 74

Wireframes...................................................................................... 76
Usabilidade & Acessibilidade....................................................................... 78

Interface do Usurio....................................................................... 84
Evoluo Visual dos Aplicativos.................................................................. 85

Desenvolvimento e Performance................................................... 92
Resultado Final................................................................................ 96
cones................................................................................................................ 98
Interface.........................................................................................................100
Grid..................................................................................................................112
Tipografia.......................................................................................................113

Consideraes Finais....................................................................116
Referncias Bibliogrficas............................................................ 120
Referncias: Sites Consultados................................................... 122

Pgina intencionalmente deixada em branco

Introduo

Segundo Bonsiepe1 (2011, p. 88), para se obter uma comunicao eficiente


existe a necessidade de um componente esttico, que deve ser pensado de
forma a reduzir a complexidade da informao bruta recebida pelo designer
no briefing do projeto. A comunicao eficiente ainda mais importante
quando atrelada a dispositivos mveis que, assim como o prprio nome
j sugere, um artifcio mvel, que acompanha o usurio, que acionado
em diferentes contextos dependendo da necessidade. A forma como
essa interao ocorre atravs da interface, palavra que, segundo Steven
Johnson2 (2001, p. 17), se refere a funo de dar forma a uma interao
entre um usurio e um computador. Mas se engana quem encara esta
definio de computador como os de mesa, que estamos acostumados.
A quantidade de pequenos dispositivos mveis que invadiram a rotina das
pessoas redefiniu o conceito de computador. Estes dispositivos possuem
telas sensveis ao toque e muitos sequer possuem teclado fsico.
nesta variedade de tamanhos, formas, tecnologias e funcionalidades
que se abriga a dificuldade, ou seja, sua versatilidade acabou criando
uma srie de obstculos para os que querem desenvolver uma aplicao
mantendo suas caractersticas tanto visuais como de experincias,
objetivos que podem ser afetados por restries tcnicas e de reproduo
de alguns destes dispositivos mveis. A experincia de uso no ser a
mesma, e diversos artifcios devero ser usados para proporcionar uma
boa experincia do usurio.
Este projeto de graduao tem como tema o design de interface em
dispositivos mveis, representado por uma aplicao para tablet,
especificamente para o iPad da Apple. Uma aplicao para entretenimento
chamada Stream, que explora de diferentes maneiras o consumo de
contedo audiovisual atravs do tablet. Seu desenvolvimento tem duas
1BONSIEPE, Gui. Design, cultura e sociedade. So Paulo: Blucher, 2011.
2JOHNSON, Steven. Cultura da interface. Rio de Janeiro: Zahar, 2001.

finalidades, a primeira a elaborao de um aplicativo que proporcione


entretenimento atravs de um servio de transmisso de vdeo via internet,
explorando a vasta quantidade de contedo audiovisual em formato de
srie. Sua outra finalidade est em servir como ferramenta de anlise
sobre a validade de prticas do design impresso e de internet ao serem
aplicados para se projetar para uma interface de dispositivo mvel e, assim
identificar mtodos e processos que melhor se adaptem a esta finalidade.
O projeto baseado em empresas que obtiveram sucesso em criar
ou adaptar suas solues aos dispositivos mveis, designers que
desenvolveram habilidade de lidar com este mercado e autores divididos
entre antigos e contemporneos. Podendo assim ser traado um
comparativo entre ideias sobre o impacto de uma nova tecnologia no
cotidiano dos usurios e como o design se molda para este novo canal.
A prpria metodologia utilizada neste projeto experimental, e sua
concepo resultado de mais de dois anos de pesquisa sobre o tema.
Esta uma rea ainda em desenvolvimento no campo do design, e sua
evoluo est ligada ao entendimento de como os elementos do design
como os conhecemos, se comportam nessa nova gama de interaes e
contextos.
Sua apresentao pode no ser convencional, mas foi planejada de
maneira a explicar o contedo na sequncia em que os acontecimentos
ocorreram e assim proporcionar o acompanhamento quanto a evoluo
no desenvolvimento do projeto. Acredito que a forma como ele foi pensado
e desenvolvido pode ajudar futuros trabalhos na rea, e que o material
demonstrado sirva como ponto de partida.

10

Pgina intencionalmente deixada em branco

Fundamentao
Terica

Antes de iniciar a apresentao do projeto em si, ser feito um


posicionamento do estado atual em relao a convergncia de tecnologias
e seus efeitos. Para isto, foi elaborada uma pesquisa dividida em trs
vieses, sendo eles: filosfico, social e tecnolgico.
No primeiro vis so abordados temas relacionados ao modo como os
homens e a tecnologia evoluram e se relacionam desde ento, tendo
como base os textos de Flusser3 (2010) sobre teorias de comunicao
com cdigos e imagens. Para Flusser vivemos em um mundo codificado,
aprendido com gestos, o que na verdade seria uma segunda natureza,
sendo a primeira aquela que circunda todo este mundo codificado. Este
modo de pensar molda sua teoria sobre como a comunicao humana
feita. Segundo o autor, o objetivo do ato de se comunicar para nos fazer
esquecer de como somos sozinhos no mundo, e condenados a morte,
pensamento que compe o mundo da natureza. A comunicao humana
inatural, pois se prope a armazenar informaes adquiridas, j que o
homem um animal que arrumou formas de armazenar esse contedo.
Para que uma informao seja produzida necessrio uma prvia troca
de informaes disponveis para assim sintetizar uma nova informao.
Necessariamente, este armazenamento se d pelo compartilhamento,
para que assim no se percam, ou pior, que sejam esquecidas.
Para o autor, uma forma de apresentar as informaes por meio das
superfcies, estas que antigamente eram representadas por fotografias,
vitrais e pinturas rupestres e, posteriormente, adicionados estes meios a
TV, as telas de cinema, cartazes e revistas. O autor tambm compara toda
esta informao visual com as linhas escritas: As linhas escritas, apesar
de serem muito mais frequentes do que antes, vm se tornando menos
importantes para as massas do que as superfcies (2010, p. 103).
3FLUSSER, Vilm. O mundo codificado. 2 ed. So Paulo: Cosac Naify, 2010.

13

Estas superfcies representam um mundo, o autor se coloca em dvida se


linhas e superfcies fariam parte de um mesmo mundo. A diferena, por
exemplo, das linhas escritas e pintura, que na primeira precisamos seguir
o texto do comeo ao fim se quisermos entender sua mensagem. J no
segundo, podemos captar esta informao antes mesmo de fazer uma
decomposio de sua imagem.

Textos
Filmes

1 Dimenso

2 Dimenso

Esculturas
3 Dimenso

Dimenses segundo Flusser (2010, p. 107).

Flusser acredita que uma mudana radical na estrutura de nossa civilizao


pode acontecer j que o pensamento em linha est sendo absorvido pelo
pensamento em superfcie.

Fico conceitual

Fico imagtica

Pensamento em linha

Pensamento em superfcie

Elite

Massa
Fices, segundo Flusser (2010, p. 115).

A fico imagtica, tida tambm como pensamento em superfcie, era vista


como um conceito de contedo para a massa. Em uma tentativa de juntar
14

estes dois pensamentos, tanto o linear quanto o de superfcie, se chegou a


um pensamento imagtico, consciente e claro, massificando a informao
antes elitizada. Segundo o autor, os pensamentos imagtico e conceitual
tomariam uma outra forma no futuro, representado por uma espcie de
retroalimentao, que talvez se assemelhe ao que ocorre atualmente nas
redes sociais:

Imagem
de algo

Explica
imagem

Imagem da
explicao

Publicao
compartilhada

Descrio e legenda
da imagem

Comentrios,
interveno na imagem

Fluxo de fico Flusser (2010, p. 118 e comparativo com as redes sociais).

Flusser destaca duas tendncias, a primeira delas a de que a mdia de


superfcie como pinturas e peas publicitrias estaria recorrendo cada vez
mais a linearidade, dando ao pensamento imagtico e ao de superfcie, o
poder de conceber conceitos. A segunda posio a respeito da terceira
dimenso que, segundo o autor, vai alm das esculturas, trata-se de
provocar sensaes corpreas. Sendo assim, o pensamento em superfcie
se destaca para esta tarefa, pois pode cobrir os fatos de uma maneira
mais completa. Isto por sua vez, no quer dizer que devemos deixar de
lado o pensamento linear. Neste ponto, o autor prope uma combinao
destes dois tipos de mdia. Isto abriria as portas para o surgimento de
uma nova mdia, que nos faria ver os fatos de uma maneira diferente. Tal
combinao poderia resultar em uma nova civilizao. Flusser tem uma
viso de sociedade contempornea como algo que no foi concebido de
maneira linear, mas sim por meio de uma espcie de espiral.

15

Primeira posio

Segunda posio

Terceira posio

Mensagens estticas

Conceitos lineares

Imagens que ordenam conceitos

Mitos

Histria

Formalismo

Espiral de Flusser (2010, p. 120).

Nesta terceira posio, o homem usa sua criatividade para criar contedo,
mas de uma forma nunca antes feita. Em suas prprias palavras, ele
explica este conceito:
Vamos ento buscar um espectador de TV num futuro prximo. Ele
ter sua disposio um videocassete com fitas de vrios programas.
Estar apto a mescl-los e a compor, assim, seu prprio programa. Mas
poder fazer ainda mais: filmar seu programa e outros na sequncia,
inclusive filmar a si mesmo, registrar isso numa fita e depois passar o
resultado na tela de sua TV. Ele se ver, portanto, em seu programa.
Isso significa que ter o comeo, o meio e o fim que o espectador
quiser [] (FLUSSER, 2010, p.122)

Nos dias de hoje, isto feito muito mais facilmente com recursos
amplamente disponveis como filmadoras de celular, webcams e cmeras
digitais. o consumidor moldando o contedo filtrado, contemplando
o que lhe conveniente e atrativo, a interao com o contedo, e no
apenas o consumo de forma linear. O autor ainda destaca que, neste
caso, o interesse deixa de ser a histria e passa a ser a possibilidade da
combinao de vrias histrias. Ele ainda alerta para o risco de sofrer
com a imaginao confusa, sendo esse aviso plausvel se comparado ao
excesso de informao que vivemos hoje.
O homem, segundo Flusser (2010, p. 131), sempre se viu obrigado a transpor
o abismo entre ele e o mundo atravs de smbolos ordenados. Este um
recurso para resumir o mundo das circunstncias em cenas, e de forma
16

que outros possam decodific-las. Assim como hoje, as linguagens de


programao o fazem, mas neste caso no so interpretaes humanas,
mas sim das mquinas e softwares. O homem, de certa forma, ainda
programado pelo texto, uma vez que passa parte da vida aprendendo a ler
e escrever.
Para Flusser (2010, p. 135), a nova gerao programada por imagens
eletrnicas, porm levou-se sculos para a escrita ser descoberta como
forma de narrao. O autor ainda vai alm, considerando que, quando a
informao se torna mvel, ela atinge uma nova esfera. Esta, por sua vez,
ao ser somada com a comunicao instantnea, leva o nome de narrao,
diz o autor. A exemplo, existem as patterns4 de sites e softwares, que
so cdigos decifrados por usurios, pois fazem parte de seu universo,
linguagem, cultura e tecnologia. Uma imagem uma mensagem, que pode
ser transportada na forma de um quadro, e em uma tendncia iniciada
por filmes e fotos. Este transporte se transforma cada vez mais fcil e,
segundo o autor (2010, p. 158), este no deve ser feito como na televiso,
que liga um emissor a vrios receptores, mas sim na forma de uma rede,
como a de telefone, onde todos se conectam a todos.
A forma de transporte de imagem computadorizada mostrou uma
nova possibilidade pois, alm de emitir e receber imagens, podem ser
processadas e retransmitidas de volta ao emissor, afirma Flusser (2010,
p. 159). Desta forma, o poder mudar das mos de um emissor, para as
mos dos que interpretam e retornam a mensagem.
Para Flusser, no existem paralelos no passado que nos permitam
aprender o uso de cdigos tecnolgicos, mas ao abordar o vis social,
talvez seja possvel entender como a tecnologia ajuda no dia-a-dia, e quais
as possveis mudanas que isso pode causar na rotina e comunicao
4Componentes visuais comuns entre diferentes sites e softwares.

17

do homem com outros indivduos. A base desta etapa so os livros


As Leis da Simplicidade, de Maeda (2007), e Cultura da Interface, de
Johnson (2001). Maeda5 (2007, p. 23) explica que economia de tempo
transmite felicidade e que, quando demonstrado por um produto ou
software, traz um elevado grau de satisfao, pois na viso do usurio ele
est economizando tempo. Entretanto, quando se trata de um processo
demorado, precisa-se de sinais de que tudo est bem, isto reforado
pelo autor, quando afirma que gostamos de ver o templo fluir, portanto
os aparelhos e softwares que usamos precisam nos dar este retorno para
nos sentirmos confortveis.
Se um sistema operacional mostrar um contador de tempo restante para
copiar um arquivo, nos sentiremos confortveis, pois saberemos o tempo
estimado para uma tarefa ser concluda. De acordo com Maeda (2007, p.
30), algumas vezes nesta espera podemos ter uma percepo diferente
do que quando se est em uma situao de emergncia pois, neste caso,
o tempo estimado no suficiente. preciso saber o tempo exato para
a concluso de uma tarefa. O autor usa como exemplo a cpia de uma
apresentao, minutos antes da palestra, para um auditrio cheio.
Quando o design de um produto e software desenhado de forma
a proporcionar economia de tempo, automaticamente atribui-se
simplicidade na descrio de uso. Isto muito importante em necessidades
que julgamos ser simples pois, segundo o autor (2007, p. 33), o fato
de gastar tempo para aprender uma certa tarefa, passa a sensao de
estarmos desperdiando tempo. Portanto, importante que, quando o
usurio for obrigado a aprender algo mais complexo no software, ele seja
recompensado de alguma maneira. Desta forma, o fato de o usurio usar
a repetio para aprimorar seu desempenho e facilidade na execuo de
5MAEDA, John. As leis da simplicidade. So Paulo: Novo Conceito, 2007.

18

tarefas, passaro desapercebidos. Alguns dos motivos que causam o


engajamento do usurio com o software, segundo Maeda (2007, p. 38),
so: Sentir-se seguro (abstendo-se do desespero), sentir-se confiante
(dominando o bsico) e sentir-se instintivo (condicionando-se por meio
da repetio).
Outro recurso importante para o bom design, descrito por Maeda (2007, p.
39), o uso de elementos j conhecidos do usurio, causando a sensao
de familiaridade. Um modo de fazer isso com o uso de patterns, tema que
ser retomado a fundo mais adiante, mas que, em um primeiro momento,
pode ser explicado como na obra de Tidwell6 (2010, p. 18), onde a autora
os descreve como estruturas e padres de elementos que melhoram a
usabilidade de uma interface. Um exemplo o uso de menus em sites com
mais de uma pgina, recurso que facilita a navegao do mesmo. O uso
das patterns aliado com as j conhecidas metforas visuais das interfaces
dos sistemas operacionais, criam um ambiente capaz de transferir uma
grande quantidade de informaes ao usurio com pouco tempo.
Com todos estes conceitos aplicados, se tem grandes chances
de desenvolver um aplicativo com relevncia social, devido a sua
preocupao com as necessidades dos usurios, poupando-lhes tempo
e proporcionando facilidade no dia-a-dia. Mas, alm destas preocupaes
de uso, outros elementos no menos importantes, devem ser levados em
considerao, desta vez para o bom funcionamento do hardware e do
software.
Em complemento aos conceitos de Maeda abordados at agora, sero
analisadas metodologias e conceitos sobre experincia do usurio e
design de interface. O vis tecnolgico embasado pelos ttulos Designing

6TIDWELL, Jenifer. Designing Interfaces. 2 ed. Sebastopol: OReilly, 2010.

19

Interfaces de Tidwell (2010) e O Guia Para Projetar UX de Chandler7


(2009). Dois ttulos que, ao serem somados, se tornam de grande utilidade
para projetar uma aplicao, seja ela para um computador de mesa,
internet ou dispositivo mvel.
Conforme Tidwell (2011, p.16), houve um tempo em que os designers de
interface possuam apenas uma pequena caixa de ferramentas, limitadas
a simples controles, cones e um enxuto nmero de cores. As regras de
como estes poucos itens deveriam ser usados eram ditadas pelos manuais
Windows Style Guide8 e Macintosh Human Interface Guidelines9. Alm
disso, normalmente esta funo de desenho da interface era desenvolvida
pelo mesmo profissional responsvel pela programao, e no por um
designer.
O autor Chandler (2009, p. 36) explica que, ao longo dos ltimos anos
o mercado de profissionais nesta rea mudou. Designers assumiram
funes importantes e ocorreu uma segmentao de funes. A medida
que se foram desenvolvendo metodologias de projeto, surgiram funes
como o arquiteto de informao, designer de interao e especialista
em experincia do usurio. Tidwell (2011, p.16) afirma que o panorama
do desenvolvimento de interfaces tambm mudou nos dias de hoje,
trabalhando-se com uma gigantesca paleta de componentes e solues.
Existem ferramentas para desenhar aplicaes para os mais diferentes
canais, kits para desenvolvimento apenas para celulares, e bibliotecas de
componentes desenhados exclusivamente para tablets. Com a melhora
dos aparelhos, obteve-se excelente qualidade de tela e alto desempenho
para processar tarefas. A autora frisa que, mesmo com todas essas
possibilidades, continua no sendo tarefa fcil o desenho de interface,
7CHANDLER, Carolyn e UNGER, Russ. O guia para projetar UX. Rio de Janeiro: Alta Books, 2009.
8Guia de referncia para desenvolvimento de aplicaes para sistemas Windows.
9Guia de referncia para desenvolvimento de aplicaes para sistemas Apple.

20

principalmente em se tratando de uma nova tecnologia como os tablets.


Devido a interface sensvel ao toque, as expectativas dos usurios
costumam ser altas em relao ao modo como ser a interao. Mas por
outro lado, os usurios deste tipo de tecnologia esto mais receptivos a
meios diferentes de interagir, portanto explorar estas novas interaes
algo que o usurio est esperando. Dois outros pontos so importantes
para obter sucesso no desenvolvimento de uma interface: o primeiro
saber as expectativas dos usurios em relao a aplicao e o segundo
escolher cuidadosamente a ferramenta de desenvolvimento da mesma,
considerando seus elementos individuais e suas patterns.
Como complemento a estes vieses est a obra de Tom Chatfield10 (2010,
p. 14), o autor defende que o mundo digital atual no apenas uma ideia
ou um conjunto de ferramentas, e que um dispositivo digital moderno no
apenas algo ativado para nos entreter e nos agradar. Segundo o autor
a natureza tecnolgica to diversificada quando a natureza humana,
representando diferentes papis em nosso dia-a-dia. Esta pode ser
entendida como um espelho do usurio, pois alm de sua rotina tambm
reflete suas necessidades. Os computadores so capazes de simular
qualquer mdia, instalando-se o programa adequado.
As pessoas esto em um momento de transio, migrando do computador
pessoal para o que o autor chama de computador ntimo, pois alm de
estar o tempo todo junto e sempre conectado, tambm supre nossas
necessidades de mdia e de comunicao. O autor ainda vai alm quando
diz que na verdade, todas as tecnologias intelectuais presentes em nossas
vidas podem ser supridas por este nico sistema integrado (2010, p. 18),
e que antes nenhuma outra mdia era capaz de oferecer o mesmo (2010,
p. 24). Chatfield conclui que a primeira lio que se deve aprender com a
10CHATFIELD, Tom. Como viver na era digital. Rio de Janeiro: Objetiva, 2012.

21

tecnologia de que no podemos ter esperana de compreend-la de uma


forma construtiva, falando no da tecnologia de modo abstrato, mas das
experincias que ela proporciona (2010, p. 27).
Com a reflexo do contedo destes vieses, possvel criar uma slida
base de conceitos e diretrizes para obter xito em um projeto de aplicativo
mvel. Alm da obrigao mnima de fazer bem aquilo que ele se prope,
ele tambm deve ser familiar, a ponto de se ligar ao meio em que o usurio
vive, pois so pensados de forma a se assemelhar ao modo original de
realizar uma tarefa, com o diferencial de ser digital. Mesmo que Flusser
tenha dito que no existem paralelos no passado que nos permitam
aprender o uso de cdigos tecnolgicos, talvez seja uma questo de
tempo para que isto mude e as pessoas passem a interpretar o uso de
dispositivos mveis naturalmente, pois a cada dia eles adentram vida
destas pessoas, seja na forma de tablet ou de celular. A tecnologia como
um todo pode ser difcil de entender, mas podemos entender melhor um
aparelho conhecendo sua histria, e com isso saber que a mgica de sua
tecnologia no surgiu ao acaso, mas foi fruto de muitos anos de pesquisa
e desenvolvimento.

22

Pgina intencionalmente deixada em branco

Do Teleautograph
ao iPad

Os tablets como os conhecemos parecem ter sado de um filme de fico


cientfica, mas eles no surgiram da noite para o dia. Estes so resultado de
uma convergncia de tablets perifricos, usados atualmente para desenho
em tela, computadores portteis e PDAs11, tambm conhecidos como
assistente pessoal digital. Sua histria foi moldada por diversos avanos
tecnolgicos que convergiram para sua criao, uma histria que teve incio
h dois sculos. Enquanto o imigrante alemo Ottmar Mergenthaler iniciava
uma revoluo na produo de materiais grficos com sua compositora de
tipos, a Linotype em Baltimore, uma outra revoluo acontecia no muito
longe dali. Em 1888, Elisha Gray desenvolveu nos arredores de Highland
Park, no estado americano de Illinois, uma tecnologia que, segundo Jeremy
Norman, abriria um novo caminho nas comunicaes, Gray responsvel
por seis patentes do chamado Teleautograph. Este aparelho transmitia
mensagens atravs de impulsos magnticos para uma folha de papel
comum, com o uso de uma caneta especialmente desenvolvida para este
fim, ou como o prprio criador descreveu em uma entrevista a um reprter
do The Manufacturer & Builder:
Com minha inveno voc poderia estar em seu escritrio em
Chicago, pegar uma caneta e escrever uma mensagem para mim,
e enquanto sua caneta se move, outra aqui em meu laboratrio se
moveria simultaneamente, e formaria as mesmas letras e palavras

Alm da revoluo proporcionada pelo mesmo, ele ainda foi a base para
que em 1926 os laboratrios Bell desenvolvessem o primeiro prottipo de
fac-simile, ou simplesmente Fax, como amplamente conhecido. Apenas
em 1964 o primeiro tablet reconhecvel por uma interface de computador
foi desenvolvido pela RAND Corporation, e proporcionava ao usurio a
possibilidade de escolher opes em menus e desenhar, mas seu uso foi
limitado devido ao seu alto valor.
11Abreviao de Personal digital assistant, um computador de pequenas propores

25

RAND Tablet de 1964.

Alan Key criou em 1968 um prottipo que chamou de Dynabook, o


conceito era simples, se tratava de um computador porttil semelhante em
tamanho a uma folha de papel e possua um teclado fsico e touchscreen12
integrados. Seu uso, de acordo com o elaborado por Alan, era de que os
jovens pudessem se conectar a servidores remotos para acessar textos
e imagens para trabalhos escolares, conceito semelhante ao que a Apple
adotou, ao lanar no incio de 2012, sua ferramenta de publicao iBooks
Author. Pouco antes da dcada de 80, a prpria Apple se arriscou lanando
o primeiro tablet para o mercado domstico, o Graphics Tablet, para
seu aparelho de computador Apple II. Entretanto, alguns entraves como
12Tela sensvel ao toque.

26

interferncia em aparelhos de TV, alto preo e a no conformidade com


a Federal Communications Commission, o levou a no decolar como
perifrico de interao.

Dynabook de 1968.

Apenas cinco anos depois e a um preo muito mais acessvel chegou ao


mercado o KoalaPad que permitiu ao seus usurios criarem desenhos em
seus computadores pessoais utilizando a caneta Stylus13 ou os prprios
dedos. Com exceo ao Dynabook, o foco de uso dos tablets foi sempre
voltado ao auxilio na forma de perifrico e no como uma ferramenta nica.
Foi com esse propsito que em 1989 surgiu o GRiDpad, com sistema
operacional MS-DOS, tela de 10 polegadas, ausncia de teclado fsico e
tela sensvel a caneta Stylus. Foi o primeiro modelo a ser usado na forma
de tablet como o conhecemos atualmente, mesmo que ainda dependendo
da caneta para interao.
13Perifrico em forma de caneta usada em aparelhos eletrnicos com tela sensvel ao toque.

27

Outro conceito em evidncia atualmente a juno de tablet e teclado


fazendo com que se assemelhem a laptops, mas com a vantagem de a
tela sensvel ao toque poder ser removida e utilizada separadamente. Mas
este tipo de aparelho surgiu em 1992, com o nome de Compaq Concerto,
onde todo o hardware era posicionado atrs da tela, sendo possvel o
desencaixe do suporte com teclado fsico.

GRiDpad de 1989.

Aproveitando a tecnologia at ento esquecida de seu tablet da dcada de


80, a Apple se aventurou novamente com um novo dispositivo que definiu
o padro dos PDAs, com o Apple Newton, um aparelho que permitia a seus
usurios adicionar informaes de contato e anotaes com sua prpria
escrita. Infelizmente, a tecnologia ainda no era exemplar, oferecendo
material para cartunistas zombarem de seu uso e funes, com isso o
produto foi descontinuado em 1998. Ainda em 1994 a IBM decidiu juntar
o conceito de PDA telefonia, alm disso ainda foi adicionado uma tela
touchscreen, criando assim o Simon. Este, que considerado o primeiro
28

aparelho smartphone, possua funes como envio de e-mail, contatos


pesquisveis, agenda de eventos e fazia ligaes, mas seu alto preo fez
com que no durasse muito no mercado. Observando as falhas do Apple
Newton e entendendo que a demanda crescente por laptops significava
que as pessoas estavam mais receptivas a possuir um dispositivo mvel,
a empresa Palm lanou em 1996 o PDA Palm Pilot 1000, sendo tambm
um aparelho menor e mais barato que o Newton. Segundo Rob Lammle,
que escreve para o site de tecnologia Mashable, talvez hoje em dia no
tivssemos o iPad, caso Bill Gates no tivesse lanado uma verso para
tablets do Windows XP em 2001.

Windows XP Tablet Edition de 2001.

Ver a empresa referncia em sistemas da poca criar algo para um mercado


que parecia morto, foi o estimulo necessrio para gerar melhorias nas
29

tecnologias mveis. Todos esses avanos mostram que o caminho para o


mercado atual passou por diversas etapas, assim como o prprio conceito
de mvel, para que tanto a indstria quanto os usurios convergissem em
um ponto ideal, fato que ocorreu no ano de 2010. As lies aprendidas
com os problemas de seu PDA Newton, tanto em hardware quanto em
software na dcada de 90, serviram de base para a empresa conhecer
o comportamento e necessidades de seus consumidores. Em meio ao
sucesso do iPhone, e com a abertura de sua plataforma de desenvolvimento
e criao de aplicativos, quebrando recordes de produo e download, a
Apple lanou a primeira gerao de seu tablet iPad.

iPad da primeira gerao lanado em 2010.

30

Pgina intencionalmente deixada em branco

Objetivos

O objetivo deste trabalho redesenhar a maneira como interagimos com o


tempo ao realizar uma tarefa. Isto possvel pois os calendrios codificam
o tempo em dias, semanas, meses e anos, nos posicionando a entender
que estes espaos podem ser preenchidos, e quanto mais eficientemente
este tempo for preenchido, maior ser a satisfao do usurio. Para tal
tarefa ser desenhada uma aplicao para o tablet iPad da Apple, visando
seguir as boas prticas de design de interface e usabilidade, para assim
proporcionar uma boa experincia no consumo de seu contedo que
composto por um servio de transmisso de vdeo, mais precisamente
de sries. Neste caso estas no sero denominadas como sries de TV,
pois atualmente alguns contedos j so produzidos exclusivamente para
servios de streaming de vdeo online.
A escolha de um aplicativo para iPad como proposta embasada por
uma matria publicada no jornal O Estado de So Paulo14. Segundo ela,
lanamentos de aplicativos seguem um ritmo vertiginoso, mas isto no
significa que tudo o que lanado faz sucesso. Para muitos que acham
que uma fbrica de dinheiro, esbarra-se no fato de que, segundo Wilson
Barab Filho, somente fazer o aplicativo no a soluo, preciso criar
servios que agreguem valor. Alguns dados mostram o tamanho atual deste
mercado: em relao a 2010 o mercado de smartphones teve crescimento
de 84% segundo a consultoria IDC; j nos tablets, o crescimento foi ainda
maior, totalizando um aumento de 200% tambm em relao a 2010.
Stream foi o nome adotado para o servio, no s por remeter ao termo
streaming15, amplamente utilizado para descrever o consumo online de
vdeos, mas tambm por seu significado no campo da computao, que
pode ser definido como um fluxo de dados em um sistema computacional.
14Matria publicada no site Estado PME em 20 de julho de 2012.
15Transmisso de dados, na forma de udio e vdeo onde sua reproduo iniciada mesmo que seu
download ainda no esteja finalizado.

33

Ou mais precisamente, quando os dados de um arquivo so abertos e


ficam agarrados memria permitindo alteraes, e quando este arquivo
fechado no mais permitido, o que garante a integridade do mesmo. Esta
escolha visa dar um significado, ao mesmo tempo de um contedo ntegro
e disponvel. A idia por trs do Stream est no fato de que cada pessoa
tem suas preferncias, e quando o assunto mdia, mais precisamente
televisiva ou de internet, este conceito mantido. Com o Stream possvel
criar listas de reproduo com as sries que mais gosta, como ter o seu
prprio canal de TV, com a vantagem de poder escolher a hora, local e
contedo a ser assistido, e ainda poder compartilhar com outros usurios.
uma maneira pessoal e agradvel de interagir com o tempo, o usurio
no o desperdia com a tarefa que precede o entretenimento, o prprio ato
de escolha e montagem da programao j faz parte da experincia como
um todo.

34

Pgina intencionalmente deixada em branco

Briefing

A maneira usada para explicar o que seria o problema foi feita em forma
de briefing. Mesmo que fictcio, ele rene importantes aspectos de design
e tecnologia, que tendem a crescer tanto em quantidade quanto em
importncia, e so mesclados entre necessidades do servio e do design.
Os itens a seguir foram considerados por exigirem conhecimento de todo
o processo de elaborao para um projeto de interface mvel, estes dados
foram obtidos a partir de pesquisas na rea de comentrios da Apple
Store, onde os usurios avaliam uma aplicao indicando seus pontos
fortes e fracos. Este levantamento foi feito visando evitar que os mesmos
problemas ocorram com o Stream, so eles:
Criar uma interface, responsiva e consistente, independente da orientao
do aparelho;
Layout minimalista alinhado identidade da marca;
Desenhar fluxos simplificados de tarefas;
Balancear a performance em detrimento da boa experincia do usurio;
Demonstrar de forma eficiente toda a biblioteca de mdia;
Captar informaes a respeito do consumo e comportamento do
usurio, visando produo de contedo prprio;
Oferecer as diversas opes de udio e legendas quando solicitados;
Considerar que algumas sries j esto completas e outras recebem
novas inseres semanais;
Permitir ao usurio a criao de listas de reproduo e
compartilhamento das mesmas entre usurios do servio;
Permitir o compartilhamento de imagens dos episdios em mdias
sociais;
Permitir a interao entre usurios dentro do servio.
37

Os itens mencionados so para atrair ao servio um usurio cansado de ser


escravo de horrios, aos quais os canais de TV o submetem. Este usurio
est optando pelo aplicativo, pois encontra os seguintes problemas na
programao da TV convencional:
Os horrios das sries mudam constantemente;
Os horrios so fixos e h poucos reprises, dificultando o
acompanhamento;
Poucas operadoras de TV oferecem recursos de gravao ao usurio;
A continuidade ou fim de uma srie dependem da audincia, e esta
medio normalmente no feita com xito na TV comum.
Do ponto de vista do design, esta proposta demonstra ser uma oportunidade
de desenvolver um projeto, visando as boas prticas do design de interface
juntamente com as funes que as tecnologias mveis proporcionam,
tendo como foco a experincia do usurio em obter xito em sua tarefa,
fornecendo a ele uma ferramenta que trar a sensao de controlar com
mais preciso seu tempo dedicado ao entretenimento.

38

Pgina intencionalmente deixada em branco

Referncias
Projetuais

Apesar de ser um mercado novo, os servios de streaming de vdeo online


so disponibilizados por um nmero relativamente grande de servios
como NowTV, Netflix, Hulu Plus, MyTV, Amazon Instant Video, entre
outros. Em uma descrio mais especfica, so servios denominados
OTT16, que o nome dado distribuio de contedo audiovisual atravs
de plataformas IP17. Sua popularizao est ligada s altas velocidades
de internet disponveis e a algoritmos que fazem com que vdeos de alta
qualidade sejam comprimidos e disponibilizados com mais velocidade. As
referncias para este projeto se baseiam nas aplicaes para iPad de dois
desses servios, so elas Netflix e Hulu Plus. Esta restrio se encontra
no fato de que estas duas empresas vm competindo pela liderana no
mercado, e se mostram muito eficientes em oferecer toda sua biblioteca
de contedo.
O Netflix comeou em 1997 como uma empresa que disponibilizava uma
assinatura em que o usurio alugava DVDs e os recebia em casa. Seu
servio de streaming se popularizou tanto que a empresa abandonou o
emprstimo de DVDs. Seu crescimento considerado o responsvel
pela quebra da gigante Blockbuster e suas lojas de locao de filmes
que, mesmo com claros sinais de que este modelo no seria sustentvel,
insistiu em mant-lo. O Hulu Plus a verso paga do Hulu, o servio que
exige assinatura e possui cerca de 3 milhes de usurios18. Seu apelo est
no fato de seus contratos, com emissoras como Fox, permitirem que as
sries cheguem primeiro ao seu servio do que em seu principal rival, o
Netflix. Ao contrrio de seu concorrente que inicia uma expanso mundial,
e h cerca de um ano incluiu o Brasil, o Hulu est disponvel apenas em
poucos pases alm dos Estados Unidos. A anlise leva em considerao
aspectos visuais e interaes, e em suas recentes atualizaes foram
16Abreviao do termo em ingls Over the Top Content.
17 um nmero para identificao de um dispositivo em uma rede.
18Segundo informao publicada no blog da em empresa em 17 de Dezembro de 2012.

41

adicionadas funcionalidades que vo alm do simples consumo de mdia


no aparelho. Agora tambm possvel controlar pelo dispositivo mvel
as verses da aplicao para Smart TVs e consoles de videogame. A
anlise foi dividida em categorias onde as aplicaes so comparadas e
os principais destaques quanto a interao so avaliados.

Abertura

Telas de abertura semelhantes, a velocidade no carregamento s


prejudicada caso o usurio esteja usando um servio de internet 3G, caso
contrrio, seu carregamento rpido. Em uma primeira utilizao so
solicitados os dados de login e senha, ou de cadastro, caso o usurio j
seja assinante do servio. Ambos tambm possuem otimizao para o
uso com o aparelho tanto na horizontal quanto na vertical, redistribuindo
adequadamente seu contedo.

42

Pgina principal

A pgina principal da aplicao segue diferentes objetivos. O Hulu d


destaque s novidades em sua biblioteca de mdia, enquanto o Netflix foca
na continuidade, destacando o contedo j iniciado pelo usurio e em que
ponto ele parou. Ambas as opes se utilizam do histrico de consumo do
usurio para sugerir itens semelhantes.

Navegao

Ao acessar o contedo referente s sries, o usurio direcionado uma


pgina exclusiva destas. Neste caso o Hulu se utiliza de uma grande
quantidade de elementos visuais para indicar ao usurio o contedo de
cada episdio em questo. Em contrapartida o Netflix foca nas informaes
43

como se o episdio foi ou no assistido, e caso tenha sido iniciado, em


que momento o usurio parou, podendo assim continuar a reproduo do
mesmo ponto.

Player

Ambas as aplicaes cumprem os elementos necessrios de reproduo


de vdeo, oferecendo os itens bsicos como mudana de idioma, legenda e
trecho do vdeo. O diferencial est em que o Netflix oferece a possibilidade
de navegar entre outros episdios de uma mesma srie, sem a necessidade
de sair da reproduo atual de vdeo e ter que voltar a tela anterior de
seleo de episdios.
Aps analisar estes pontos principais, pode-se notar que a aplicao
proposta pode oferecer mais interaes que seus principais concorrentes.
Nenhum deles, por exemplo, permite criar uma lista de reproduo com
contedo de diferentes sries, e tambm no permitem o compartilhamento
de trechos do que est sendo assistido no momento.

44

Pgina intencionalmente deixada em branco

Metodologia
para Dispositivos
Mveis

Em seis anos de profisso, acompanhei de perto a velocidade das


mudanas no que se diz respeito tecnologia. Nos ltimos trs anos, este
contato cresceu ainda mais, pois passei a trabalhar em uma empresa que
desenvolve softwares para diversas plataformas. Este trabalho aproximoume de experientes profissionais das reas de programao, arquitetura de
informao, gerncia de projeto e inovao.
Os primeiros passos do projeto em si foram dados com a escrita de um
texto no fim de 2010. Nele descrevi minhas observaes sobre a tendncia
das pessoas optarem por acessar o aplicativo de algum servio, ao invs
de navegar na internet para o site do mesmo, o que aparentemente
mostrava que, por mais que o dispositivo mvel possibilite o uso de
diversas ferramentas simultaneamente, as pessoas preferiam acessar
uma por vez, segmentando suas tarefas e necessidades em pequenos
cones na tela.

Rascunho que deu origem ao tema escolhido.

O que ainda faltava era uma forma de fazer a juno deste comportamento
em relao a tecnologia mvel com o design, a descoberta foi feita aps a
47

leitura de um artigo no blog da agncia D-click, no qual Eduardo Horvath


explica o conceito de experincia do usurio, sua abrangncia e como o
usurio afetado pelo uso dos aplicativos. Para completar, veio o interesse
por como estas aplicaes eram feitas, parecia curioso como pequenos
sistemas muitas vezes com apenas algumas poucas telas e interaes
eram capazes de despertar tanta admirao. Este conjunto de fatores
levaram escolha do tema deste trabalho de concluso.

Artigo que apontou a direo do tema alm do design visual.

No menos importante foi a busca por outros profissionais da rea, o que


levou a participao nos encontros do UX Book Club, uma comunidade
internacional que atravs da leitura e discusso em grupo de livros
sobre User Experience, tem como objetivo desenvolver as habilidades
e conhecimentos nas reas de Design de Interao, Arquitetos de
Informao, e Design de Interface. Alm de importantes observaes
feitas durante participaes nos eventos Interaction South America
2011 realizado em Belo Horizonte, sobre design de interao e no World
Information Architecture Day 2012, realizado em So Paulo e mais catorze
cidades simultaneamente, para discutir sobre estudos relacionados
arquitetura de informao.

48

Ainda na primeira etapa, o tema escolhido para o TGI1 foi o planejamento


e desenvolvimento de uma aplicao para o tablet iPad da Apple, que se
encaixa em uma categoria denominada como de referncia. A proposta
do projeto foi de otimizar o acesso de alunos de graduao a informaes
relevantes para seus estudos. Boa parte da bibliografia do projeto foi
definida nesta primeira etapa, autores antigos e contemporneos foram
descobertos e a ligao entre a leitura de suas obras abriu caminho para
a consistncia do tema.

Volume impresso do TGI1.

Utilizar os dispositivos mveis como base, demonstrou que a unio do


design com a tecnologia no significa se prender apenas a computao,
pelo contrrio, este pode ser um ambiente harmonioso entre pessoas
e sistemas. Esta ligao feita atravs da interface, que une os dois
mundos e d vida s telas e suas interaes. Aps a apresentao, o que
49

era um tema afunilado a um objetivo se abriu novamente possibilitando


a incluso de novos contedos, reflexes e testes. Mesmo com um novo
tema adotado, o objetivo foi mantido, desenhar uma interface que, no s
aproveite a capacidade dos dispositivos mveis, mas que tambm seja
capaz de demonstrar como o design se molda e se comporta neste tipo de
dispositivo. Como principal lio, est o fato de que o projeto em si uma
descoberta, uma curva de aprendizado que vai evoluindo a medida que o
cronograma chega ao fim, e que a bagagem adquirida durante o processo
passar a servir de base para os projetos futuros.
A mudana de proposta para o TGI2 se deu pela possibilidade de criar uma
ferramenta que chegasse a uma fase funcional. O objetivo era encurtar o
tempo e esforo necessrios para se obter informaes sobre locais de
descarte de materiais eletrnicos, atravs de um aplicativo mvel para
tablet. Embora o projeto tenha sido abandonado como proposta de projeto
de concluso, ele continua sendo desenvolvido paralelamente e sua fase
de testes online se inicia no segundo semestre de 2013. Seu andamento
proporcionou grande enriquecimento de informao quanto ao processo
de concepo e desenvolvimento de uma aplicao. Neste projeto foi
possvel colocar em prtica alguns modelos tericos de desenvolvimento
para temas como prototipagem, arquitetura de informao, design de
interao e experincia do usurio.

50

Prototipagem da primeira proposta de TGI2.

O tema foi alterado devido ao aprendizado obtido com o desenvolvimento


no decorrer do projeto. Ao abordar de maneira prtica a dimenso das
questes que envolvem a experincia do usurio, o tema se mostrou
muito maior do que parecia. Minha interpretao do termo se tornou mais
completa e melhor compreendida com a descoberta do diagrama As
disciplinas de User Experience Design, de Dan Saffer que tambm o autor
de Designing Gestural Interfaces. Ele explora atravs de sobreposies
as diversas reas que se relacionam e que interagem diretamente e
indiretamente com o usurio.

51

Diagrama As disciplinas de User Experience Design, de Dan Saffer.

Com esta visualizao em mos, o projeto foi repensado e direcionado


para a rea em que a ao propriamente dita ocorre, onde as interao so
feitas e o usurio foca sua ateno: a interface. Sendo assim, o trabalho
foi renomeado para Design de Interface em Dispositivos Mveis, e seu
objetivo traado ao entendimento da importncia do design de interface
neste relacionamento da aplicao com o usurio.
Para reforar a tarefa de desenvolver uma pesquisa voltada experincia
do usurio em dispositivos mveis, boa parte deste projeto foi feita neste
tipo de aparelho. Alm disso, esta atitude proporcionou a concentrao
de material em um nico dispositivo, sem a necessidade de se carregar
uma srie de elementos como computador, cadernos e livros. Estas
52

aplicaes de iPad cobriram necessidades como gerenciamento de


tarefas, edio de texto e imagens, reproduo de vdeos, entre outros, e
foram proporcionadas pelos seguintes aplicativos especificamente:

Evernote
As anotaes so de suma importncia para uma pesquisa, mas a
dificuldade de manuteno e a localizao de uma informao em meio
a uma pilha de papis faz com que o tempo seja desperdiado. Este
aplicativo funciona como se fosse um bloco de anotaes, em que podem
ser inseridos textos, fotos tiradas pelo prprio iPad, gravaes de udio
e captura de artigos da internet. Conforme o nmero de anotaes vai
crescendo, pode-se pesquisar facilmente seu contedo atravs de palavras
chave, mesmo que estas estejam em uma imagem e no em texto editvel,
alm disso todas as anotaes ficam disponveis para serem acessadas
de qualquer local, via internet.

Tela principal do aplicativo Evernote.

53

Google Drive
Todos os arquivos relacionados ao projeto foram mantidos em uma pasta
de um sistema chamado Google Drive. Esta ferramenta disponibiliza o
contedo de uma pasta no computador para acesso de qualquer local, via
internet. Ao utilizar seu aplicativo para iPad, foi possvel acessar e editar
os documentos diretamente do prprio tablet, e eles automaticamente
se encontravam atualizados quando acessados de qualquer computador
posteriormente. Sua navegao semelhante a uma pasta no computador,
com a vantagem das interaes touch para ampliar imagens, arrastar
elementos e da funo de compartilhamento com outros usurios, para
conferncia e edio por parte dos mesmos.

Listagem do contedo de uma pasta no Google Drive.

iBooks
Todo o contedo que necessitava de consulta com relativa periodicidade
foi convertido em PDF e adicionado ao iBooks. Desta forma, todos os
54

manuais, apostilas e livros podiam ser acessados a qualquer momento,


com possibilidade de pesquisa e de marcao das principais pginas.

Controles de navegao e marcaes de pgina de um PDF no iBooks.

iPad Vdeos
As vdeo-aulas na internet so uma tima opo para complementar o
aprendizado, mas seu acesso com a internet mvel de maior velocidade
disponvel no Brasil, que o 3G, ainda exige certa pacincia para aguardar
o download de contedo. Desta forma, o contedo foi previamente baixado
da internet e adicionado ao tablet, e a visualizao desta aulas foi feita
posteriormente, com o controle de quais vdeos j haviam sido assistidos.

55

Controles de reproduo de vdeo do apliativo.

Paper
Este aplicativo uma ferramenta para desenho, demonstrou ser
uma ferramenta rpida para esboar esquemas e diagramas durante
participao em eventos e durante leituras. Outro ponto importante est
no fato de que aps finalizada, a imagem j podia ser adicionada a um
documento de texto, ou a um layout sendo diagramado, e os desenhos
pode ser compartilhados em redes sociais.

Ao de retroceder.

56

Seu uso explora diferentes conceitos de usabilidade touch, quando


comparado com outros aplicativos da mesma categoria, por exemplo, a
funo de reverter uma ao no exige acesso ao menu ou a qualquer
outra tela que sobreponha o desenho. Para ser utilizada, basta usar dois
dedos girando em sentido anti-horrio sobre a tela at o ponto que deseja
voltar.

Navegao entre pginas, simulando a paginao de um caderno.

Photoshop Express
Tanto os rascunhos desenhados no aplicativo Paper, quanto as fotos tiradas
com o prprio iPad e as imagens tiradas da internet, s vezes precisam ser
editadas para se adequar a pesquisa. Para adiantar o trabalho de edio
que seria realizado posteriormente, esta tarefa j realizada no tablet.

57

Ambiente de edio de imagens.

Wunderlist
Seguir um cronograma para elaborao de um projeto importante, mas
a repetida consulta do mesmo, afim de localizar o que j foi concludo
ou as pendncias que restam, pode no ser muito prtico. Com o uso
deste aplicativo, o cronograma pode ser seguido facilmente, alm de ser
constantemente lembrado, caso alguma tarefa esteja pendente e sua
data j tenha passado do limite estipulado. Assim como o Evernote e o
Google Drive, as tarefas podem ser acessadas via internet de qualquer
dispositivo mvel ou computador, seu design de interface simples e de
fcil manuseio, os itens podem ser reordenados apenas com um toque e
arrastando para a posio desejada.

58

Lista de tarefas a serem cumpridas.

O uso destas ferramentas apenas complementar o desenvolvimento de


um mtodo de trabalho slido, e deve ser aprimorado e estudado. Bruno
Munari19 (2008, p. 10) descreve o mtodo de projeto como uma srie de
operaes necessrias, em uma ordem coerente e ditada pela experincia.
Este ltimo item o que melhor descreve esta etapa. H dois anos quando
iniciei os estudos sobre dispositivos mveis, o mercado dava sinais de
crescimento com previses altssimas de vendas tanto de aplicativos
quanto de aparelhos que os suportam. Mas as promessas vinham
acompanhadas por um cenrio de escassez de profissionais e de mtodos
de projeto dos mesmos, em meio a busca por contedo que me orientasse
a conduzir o projeto notei um cenrio semelhante em que Munari (2008, p.
11) faz uma comparao com os livros de culinria, nos quais as indicaes
so resumidas quando se destinam a pessoas mais experientes. A maior
parte da informao disponvel era de como desenvolver uma aplicao,
em seu sentido mais literal, o de programao. Sequncias extremamente
19MUNARI, Bruno. Das coisas nascem as coisas. So Paulo: Martins Fontes, 2008.

59

lgicas e bem elaboradas de como fazer determinado tipo de cdigo, no


que esta no fosse uma informao importante, mas no era nem de perto
o que eu estava procurando.
Munari (2008, p. 13) cita que, algumas pessoas sentem a criatividade
bloqueada ao terem que observar regras para fazer um projeto, mas estas
regras se mostraram ferramentas e no limitadores. Este mtodo no
precisa ser necessariamente seguido a risca, ele se incorpora ao mtodo de
trabalho de cada um, trazendo agilidade, ou como o prprio autor descreve
como atingir o objetivo com o menor esforo. A seguir ser apresentado
o mtodo que tomou forma no decorrer do projeto, estimulado pela leitura
de obras de Munari, e de artigos em diversos sites de tecnologia e de
design que descrevem mtodos e etapas importantes para este processo
de desenvolvimento. Destes sites nem tudo foi aproveitado, pois as etapas
eram muito breves em sua descrio, cabendo a mim ao execut-las
complementar as informaes textuais e de documentao a respeito da
mesma.

Sequncia de etapas que compem a metodologia.

Cada etapa ser abordada separadamente e o contedo composto pela


documentao produzida durante o projeto e pela leitura de bibliografias
complementares. Esta separao foi definida por ser as delimitaes
exatas das etapas, dificilmente ela poder ser executada sem a concluso
da anterior.

60

Pgina intencionalmente deixada em branco

Conceito

O termo conceito utilizado para definir a juno de elementos que


caracterizam o projeto, so componentes que juntos definem e transmitem
a idia do que a aplicao. Um aplicativo possui duas maneiras de ser
criado, na primeira ele desenvolvido a partir de uma idia, muitas vezes
sem um vnculo com uma empresa. Apenas para suprir a necessidade de
um nicho, como um cronmetro com funes especficas. J na segunda
maneira, ele surge da demanda de uma empresa em adentrar ao mercado
de aplicaes mveis para tambm oferecer seus servios por este
canal. Independente do cenrio, os passos seguintes so os mesmos, o
levantamento de dados necessrio para se ter um panorama de todos
os dados disponveis, assim como os demais passos, ser usado como
exemplo o prprio projeto de graduao. Um dos pilares por trs do Stream
ser centrado no usurio, ou em outras palavras, entender primeiramente
como o ser humano interage com este tipo de plataforma e a projetar da
maneira mais natural possvel.
Em seu livro sobre Design Thinking, Tim Brown20 levanta alguns pontos
que so relevantes para se entender o estado atual do design em relao
s novas tecnologias, ao mesmo tempo que d dicas e mostra como as
pessoas podem ser melhor entendidas. Parafraseando Peter Drucker,
tornar necessidade em demanda, parece simples: basta descobrir o que
as pessoas querem e dar isso a elas, mas no o que acontece, ou ento
teramos mais histrias de sucesso como o iPod. A resposta, segundo o
autor, que necessrio voltar ao centro da histria. Precisamos aprender
a colocar as pessoas em primeiro lugar, design centrado no usurio (2010,
p. 37). Isto pode ser iniciado com o aprendizado de que comportamentos
nunca so certos ou errados, mas so sempre significativos (2010, p. 37).
Muitas vezes se torna difcil saber o que errado, pois segundo o autor as
20BROWN,Tim. Design Thinking: uma metodologia poderosa para detectar o fim das velhas ideias. 1.
ed. Rio de Janeiro: Elsevier, 2010.

63

pessoas so to engenhosas em se adaptar a situaes inconvenientes


que muitas vezes nem chegam a perceber que esto fazendo isso (2010,
p. 38). O trabalho do designer neste ponto de vista ajudar as pessoas a
articular as necessidades latentes que podem nem saber que tm, e no
apenas tornar algo mais rpido (2010, p. 38).
Ainda em 1980 os softwares eram de domnio dos geeks em laboratrios
de computador e no de designers, muito menos de alunos em sala de
aula, trabalhadores em escritrios ou consumidores em casa (2010, p.
124). Em 1988 inspirado pelo Mac, Bill Moggridge21 decidiu que o designer
deveria ter participao tambm no software e no apenas no exterior dos
computadores. E assim surgiu o design de interao, que deveria pensar
tanto sobre as aes no software quanto no objeto que imputava essas
aes, projetar uma interao permitir que uma histria se desenvolva
com o tempo. E diferente deste inicio, hoje em dia ao invs de ditar todos
os caminhos que o usurio deve seguir nesta narrativa, o designer abre
mo deste controle e o prprio usurio desenvolve a narrativa a seu gosto
e ritmo (2010, p. 126). O Storytelling, ou como a histria do funcionamento
do servio vai ser contada ao cliente, no precisa ser um anncio de TV.
Muitos sites utilizam simples recursos para contar uma histria, com
personagens e animaes que ilustram como o servio ou aplicao
funciona, de forma humana e entendvel. A prpria gigante fabricante de
processadores Intel se utilizou de pequenas histrias produzidas a um
custo mdico de um anncio de TV para divulgar sua srie Viso Futura
(2010, p. 131). Na verdade muitos clientes em pases emergentes vo ter
o primeiro contato com a internet atravs de um dispositivo mvel, por ser
mais barato que um computador (2010, p. 145). O design com o tempo
significa pensar nas pessoas como organismos que vivem, crescem e
pensam, e que podem ajudar a escrever as prprias histrias (2010, p.
21Cofundador da agncia IDEO, e responsvel pelo primeiro laptop ainda em 1981.

64

127). Alm de centrar a aplicao no usurio, ele tambm incorporado


ao processo atravs da gameficao.

Gameficao
O conceito neste projeto visa estimular a curadoria do contedo pelo
prprio usurio, este que pode tornar seus canais pblicos e competir por
visualizaes para ganhar destaque e notoriedade. O ato de repassar esse
trabalho de seleo de contedo para o usurio no significa transferir
a responsabilidade para eles, gui-los por um caminho previamente
definido pela aplicao. Segundo Kevin Werbach , na Universidade da
Pensilvnia, gameficao significa usar elementos encontrados em jogos
em um outro contexto e, por mais que se assemelhe a eles, o propsito
e o objetivo so fatores que tm validade, uma inteno, e no apenas
entretenimento. A principal motivao no uso da gameficao por parte de
estrategistas de negcio, est na possibilidade de obter o mesmo sucesso
que os jogos conseguem, como uma ferramenta poderosa de fidelizao
e engajamento. um tema tratado como um modelo de negcios
emergente, isto se deve ao fato de que as pessoas que, nos anos 90 eram
jovens e se divertiam com jogos e outros meios eletrnicos, esto hoje em
dia alcanando cargos de alto nvel, ou empreendendo em seus prprios
negcios.

65

Ferramenta criada pela empresa Sansung para estimular a competitividade na gerao de


idias para a prpria empresa.

Estes novos lderes tem dificuldade de aceitar, s vezes, os modelos de


negcio utilizados at os anos noventa, e passam a adaptar os mesmos
suas experincias culturais, sociais e visuais. Eles associam a gameficao
ao estimulo da criatividade, ao engajamento com determinado assunto ou
tema e, principalmente, com a competitividade.
De repente, gameficao a maior novidade em termos de modelo
de negcio, sendo usado por muitas das mais admiradas empresas.

Revista Fortune 17/10/2011

Para entender como o conceito chegou nos dias de hoje, necessrio


observar um breve resumo de sua histria e analisar os pontos que o
transformaram.
1978: Multi-User Dungeon, considerado o mundo virtual mais antigo.
Foi originalmente desenvolvido em 1978 na Essex University, Inglaterra.
Esta foi a primeira experincia de um mundo online, compartilhando uma
plataforma de colaborao. Tudo isto ocorria em uma interface semelhante
ao DOS, apenas atravs de linhas de comando.
66

Tela de uma jornada de Multi-User Dungeon em andamento.

1980: Estudos j mostravam que crianas poderiam aprender com jogos,


pois j exigiam que elas entendessem sistemas aparentemente complexos
de objetivos e sistematizao para obter progresso nos jogos e estender o
tempo de entretenimento.

Capa de um estudo do Xerox Palo Alto Research Center sobre a aprendizagem com jogos.

2002: Empresas do setor privado, universidades e at o exrcito americano


desenvolveram jogos para simular e treinar em diversos objetivos.
67

Pulse! desenvolvido pela Universidade Texas A&M para simular salvamentos.

2007 em diante: O mercado foi absorvendo este conceito e o explorando


de diversas maneiras, e j mostra sinais de amadurecimento, pois cada
vez mais grandes empresas passaram a adotar a gameficao em suas
aplicaes.

Empresas que j possuem aplicaes com o conceito de gameficao aplicado.

68

Kevin Werbach refora que, gameficao no transformar tudo em jogo


ou em uma experincia imersiva em 3D. O conceito deve se adaptar ao
produto, servio ou ideia. Sua aplicao no algo trivial, deve ocorrer um
balanceamento dos elementos que os compem, de acordo com o objetivo
almejado. Exige conhecimentos multidisciplinares, por reunir contedos de
psicologia, design, negcios e tecnologia. uma representao de como a
mente funciona, motivao que leva os usurios a pensarem em tcnicas
para atingir o objetivo, com visual e organizao da informao. Mas antes
de organizar a informao, ela deve ser colhida de diversas maneiras, estes
dados colhidos so denominados como dados brutos.

69

Arquitetura de
Informao

Este conceito est ligado ao estudo, disposio e organizao da


informao bruta (protocolos, banco de dados, nveis de mapeamento,
alternativas de navegao, etc.). Considerando-se as potencialidades
de uso de uma tecnologia e os caminhos que elas sugerem para o fluxo
de informao no espao digital, sendo que o resultado final fornea ao
usurio a informao que ele necessita.
Segundo Peter Morville, co-fundador do Information Architecture Institute,
no incio dos anos 90, com a ascenso da internet, veio tambm um
problema: muitos sites foram criados sem planejamento, ocasionando
problemas de usabilidade, gerando grandes dificuldades de se obter o
contedo desejado, e as alteraes de layout eram muito caras. nesse
aparente caos que, segundo o autor, as pessoas passaram a entender
a importncia do planejamento de sites, e ento foi adotado o nome
de arquitetura de informao por uma questo de metfora, mas ao
invs de prdios, estes profissionais projetam sites, softwares e servios
interativos.
A arquitetura da informao se adaptou aos dispositivos mveis,
assumindo um importante papel, no s na estrutura de contedo , mas
tambm ao planejamento e mapeamento de toda a experincia. Sua
funo no s criar links entre pginas de maneira bem estruturada, mas
tambm criar relaes para ajudar o usurio a saber onde ele est, o que
ele est vendo e o que esperar do que est a sua volta. A resoluo parte
crucial do projeto, o esqueleto da soluo, pois ela explica o projeto e
guia a etapa seguinte a evitar trabalho desnecessrio. Os dados brutos
colhidos no levantamento de dados so estruturados e organizados para
que a prototipagem seja iniciada.

71

Levantamento de dados
Os dados relativos ao contedo audiovisual foram colhidos de bases de
dados na internet, mais precisamente nos sites IMDB (Internet Movie
Database) e TV.COM. Estas duas bases possuem seus dados influenciados
por usurios, sendo assim sua contribuio garante informaes
atualizadas de sries, elencos e demais informaes que envolvem este
contedo audiovisual, alm de serem abertas gratuitamente para consulta.
Outra importante forma para obteno de dados o retorno de crticas
e sugestes dos consumidores de softwares. Estes so colhidos das
pginas virtuais dos aplicativos, nas quais os usurios fazem avaliaes
que se tornam pblicas e podem ser levadas em considerao para
alteraes de dados, caso no agradem os usurios. Neste ponto, onde
todas as informaes estavam reunidas e estruturadas, foi necessrio
encontrar uma maneira que se adequasse com meu modo de trabalho, e
ao que estava sendo projetado.

Hierarquia de dados tcnicos.

Com a arquitetura de informao j definida dado o primeiro passo para


o layout, neste ponto j se sabe o que cada tela deve conter, e nesta etapa
72

estudado qual a melhor maneira deste contedo ser apresentado ao


usurio. A prototipagem a parte mais extensa do projeto e diferente do
design impresso. O design digital sofre alteraes constantes para atender
requisitos de acesso e adequao ao interesse do usurio, mas mesmo
assim necessrio se fixar um ponto para uma primeira verso.

Fluxo de navegao da aplicao.

Com o contedo j definido para cada tela preciso descobrir a melhor


maneira deles serem dispostos. Em cada caso so feitos uma srie de
estudos, trocando-se elementos de posio, interao, sequncia de
aes, para que se monte o melhor caminho para o usurio.

73

Prototipagem

Segundo Scott Klemmer, a prototipagem a maneira mais rpida, efetiva


e menos custosa de se obter um retorno real sobre o funcionamento, ou
no, de uma ideia. Alm disso, ao construir um modelo de um produto ou
servio, muito provavelmente outras ideias iro surgir e futuros problemas
de funcionamento e desenvolvimento sero pensados muito antes de
aparecerem em uma futura fase de desenvolvimento. Scott deixa claro de
que prottipos no so e nem devem ser completos. Eles na verdade, no
precisam sequer funcionar, a exemplo do prottipo de uma cmera digital
desenvolvida em 2003 pelo escritrio de design IDEO, onde o objetivo era
criar um aparelho, no qual fosse possvel alm de tirar uma foto, editar a
mesma. Este prottipo sequer tirava fotos, mas foi de extrema importncia
para sua forma final e interface de edio de imagem, mostrando as
dimenses mnimas necessrias, e as dificuldades de usabilidade que
os usurios tinham ao editar uma foto em uma cmera. Uma coerente
definio para prototipagem parece ser a do prprio Scott Klemmer, onde
ele diz que um prottipo a estratgia mais eficiente para lidar com coisas
que so difceis de prever.
No se deve desperdiar muito tempo em um nico prottipo, eles devem
proporcionar o aprendizado no menor tempo possvel. Ao se prototipar
por exemplo, para dispositivos mveis, a maior barreira a ser vencida
proporcionar aos usurios de diversos sistemas e modelos, a mesma
experincia. Em alguns casos isto no possvel devido as restries
tcnicas entre aparelhos diferentes. O processo usado neste trabalho
consiste de duas etapas, so elas:

Prototipagem de baixa fidelidade


No nesta etapa que o software ter a forma final pensada, o foco da
prototipao o objetivo final, a ao de fazer algo, e para isto sua forma
e aparncia podem mudar drasticamente no decorrer do processo para
75

alcanar o objetivo desejado. Nesta fase diferentes rascunhos so feitos


sem se preocupar com detalhamento, o objetivo conseguir o maior
nmero de diferenciaes a fim de encontrar de maneira rpida a que mais
se adapta a necessidade em questo.

Diferentes rascunhos da tela das listas de reproduo, e o rascunho escolhido em destaque.

Prototipagem de alta fidelidade


Aps o exerccio de desenho para se chegar a uma tela que atenda s
necessidades levantadas pela arquitetura de informao, ela redesenhada
com mais detalhes e uma preocupao maior com os elementos. Este
desenho ser a base para a prxima etapa, em que os rascunhos ainda
no possuem o visual final, mas vo ganhar vida com interaes que vo
adicionar navegabilidade s telas at ento estticas.

76

Mesma tela feita com mais detalhes.

No decorrer do processo, as adaptaes no ocorrem somente com o


desenho, o prprio processo passa se moldar e artifcios podem, e devem
ser criados para complementar e facilitar o desenvolvimento de cada etapa.
Nesta em questo, foi criado um artificio para que mesmo neste estgio
inicial de desenvolvimento fosse possvel ter uma viso mais avanada
da tela em seu dispositivo final, e para isso um artefato de papelo foi
construdo para simular o desenho da tela em seu suporte final.

Artificio criado para estudo de coerncia visual de telas.


77

Wireframes

Esta etapa visa juntar as duas primeiras em uma espcie de esqueleto


da aplicao, que contenha todas as informaes sobre conexes de
funcionamento. Chandler, (2009 p. 63), argumenta que o primeiro passo
antes de se produzir wireframes so os mapas de site, estes que so uma
forma de demonstrar graficamente a estrutura de uma aplicao. Neste
conceito de diagrama ficam claras as hierarquias e conexes presentes no
projeto, fornecendo uma rpida compreenso da distribuio e localizao
do contedo. A criao do wireframe um exerccio de compreenso
da necessidade do cliente, as telas desenhadas so transformadas em
wireframes, onde sua funo bsica identificar os elementos necessrios
para serem exibidos em tela. Como forte caracterstica est a ausncia
ou o pouco uso de cor, substituintes para imagens e fontes bsicas de
sistema.
Logo
Voltar

Categoria

Categoria

Categoria

Wireframe de uma das pginas da aplicao.

79

Mas sua funo vai alm de indicar ao designer de interface o que


deve ser criado, ele tambm usado para demonstrar a aplicao para
clientes e equipe envolvida no projeto. Ao navegar por um wireframe
comum se deparar com cones que, quando clicados, exibem uma breve
explicao sobre a funcionalidade daquele elemento. Isso acontece, pois
alguns recursos complexos no se adequam a proposta de agilidade de
desenvolvimento dos wireframes. Alm disso, estas anotaes indicam
riscos no uso do determinado objeto. O autor argumenta que a navegao
via wireframe responsvel por identificar graves falhas de usabilidade,
pois simula o uso real da ferramenta. Quando um wireframe considerado
completo, ele pode ser usado para testes de usabilidade, a fim de identificar
o nvel de facilidade e empatia dos usurios com o sistema.

Usabilidade & Acessibilidade


Por se tratar de uma etapa interativa, deve-se aplicar os conhecimentos
de usabilidade, a fim de evitar desconforto no uso da aplicao. Segundo
Antony T.22, as reas touch pequenas geram dificuldades de uso. Ao se
desenhar interfaces para dispositivos mveis, as reas de ao ao toque
devem ser grandes. Nestas horas, recomendvel recorrer aos manuais de
recomendaes para cada plataforma de desenvolvimento, porm essas
informaes se divergem entre os principais guias. O problema destas
medidas, segundo o autor, o de que todas elas representam um tamanho
menor do que o de um dedo humano, o que pode causar frustrao e
irritao aos usurios pela dificuldade de acertar seu alvo.

22Escritor do site referncia em usabilidade Smash Magazine.

80

Dificuldades implcitas por uma rea de toque pequena.

Os pequenos alvos exigem preciso para acertar, os usurios tem de


se preocupar com a maneira e posio do dedo. Isso acaba por gerar
a sensao de uma aplicao lenta, pois parece que, por mais que seja
pouco, essa necessidade de ateno com o toque est requerendo tempo.
A situao se torna ainda pior quando existem grupos de itens, pois o
usurio pode acidentalmente acionar uma funo no desejada, apenas
por ter aplicado uma presso maior em uma das extremidades do dedo,
ao invs do centro. Em uma pesquisa desenvolvida pelo MIT Touch Lab,
pesquisadores da instituio chegaram medida de 16 20 mm, ou
convertendo para medidas digitais 45 57 pixels como sendo de tamanho
recomendvel para a maioria dos adultos.

Comparativo de rea com 57 pixel e o dedo de um adulto.

Em um tablet, isso pode ser facilmente aplicado, pois possui uma rea
de tela relativamente grande, mas o mesmo no acontece com os
smartphones e suas telas de tamanho menor. Em ambos os tamanhos de
tela uma alternativa pode ser usada para contornar este tamanho mnimo,
81

pode-se usar outros gestos. De acordo com o iOS Human Interface


Guidelines, os tipos de interao aceitos pelo iPad so:
Toque

Pressionar ou selecionar um controle


ou elemento em tela, em uma rpida
analogia semelhante ao clique do
mouse.

Arrastar

Arrastar um contedo ou mover um


elemento.

Flick

Arrastar um contedo rapidamente.

Deslizar

Normalmente usado para revelar um


contedo oculto, como os botes
para deletar itens.

Toque duplo

Ao tambm usada para aumentar


o nvel de zoom em um contedo ou
imagem.

82

Comprimir e

Comprimir para aumentar o zoom e

expandir

expandir para diminuir o zoom.

Segurar

Em um contedo selecionvel usado


para mostrar detalhes.

Chacoalhar

Balanar o aparelho para iniciar uma


interao.

A mtrica para botes parece simples de ser medida, mas o fator humano
da diferenciao no tamanho dos dedos implica em testes diferenciados
para a aplicao. Steven Hoober, coautor de Designing Mobile Interfaces:
Patterns for Interaction Design, criou uma ferramenta muito til para esta
medio, se trata de uma rgua chamada 4ourth Mobile Touch Template,
que pode ser aplicada desde os primeiros rascunhos e que possibilita um
retorno fsico sobre a usabilidade da aplicao, desta forma possvel
identificar dificuldades de uso baseado nas medidas da ferramenta.

4ourth Mobile Touch Template e sua utilizao.

83

As mos respondem por toda a interao com os aplicativos, mas o


corpo sofre os efeitos do uso como um todo. A obra Curious Rituals23
aborda o que os autores denominam como os gestos do sculo XXI,
uma leitura que ajuda o designer de interao a entender qual a provvel
posio do usurio ao executar determinada tarefa em seu dispositivo
mvel e demais aparelhos eletrnicos. As ilustraes apresentadas abaixo
so basicamente monocromticas, apenas os membros que exigem
movimentos para o uso dos aparelhos so destacados com cores:

Ilustraes do livro Curious Rituals.

O fato do dispositivo possuir tecnologia touch proporciona uma nova gama


de interaes para as tarefas que at ento eram executadas somente com
o mouse, e estas interaes podem encurtar fluxos e otimizar interfaces.
Em todas as etapas os testes so importantes, no s por prevenirem
futuros erros, s vezes uma interao se comporta da maneira que
imaginada e construda, e pode no ser to interessante quanto parecia.

23Curious Rituals: Gestural Interaction in the Digital Everyday

84

Pgina intencionalmente deixada em branco

Interface do
Usurio

Design de interface o responsvel por realizar a comunicao eficiente do


contedo digital atravs do uso de recursos que contm necessariamente
um componente esttico. Sua contribuio consiste em reduzir a
complexidade cognitiva e produzir clareza para uma melhor compreenso
da informao, atravs de uma aplicao equilibrada dos diferentes canais
de percepo (visual, auditivo e ttil). O que inclui o estudo detalhado da
adequao ao formato do dispositivo a ser utilizado, tipografia(s), paleta
cromtica, tamanhos, propores e posicionamento dos elementos em
cada tela, botes, informaes de segurana e alerta, e informaes de
ajuda ao usurio. O visual no somente onde ocorre o contato com
o usurio, onde todo o trabalho posto a prova, mostrando de forma
agradvel e simplificada toda a estrutura do sistema.

Evoluo Visual dos Aplicativos


A evoluo no desenho das aplicaes mostra que o branding pode ser
mantido. No porque os dispositivos so de tamanhos diferentes que a
essncia da marca vai se perder. Fazendo uma rpida analogia, como se
uma marca no pudesse manter a sua identidade ao mesmo tempo em
um outdoor e em um carto de visita. No um exemplo to divergente
pois se trata da aplicao da marca em um substrato de impresso.
Por conta da dificuldade de aprendizagem da linguagem por trs do
desenvolvimento de soluo da Apple, o que acabou ocorrendo foi que os
prprios programadores deram conta do layout, utilizando apenas recursos
do prprio sistema a algumas alteraes de cores e elementos para criar
suas aplicaes. Outro fato que colaborou para esta homogeneizao
visual e estrutural dos aplicativos foram os bons padres desenvolvidos
pela Apple e a sua dificuldade de serem alterados. Segundo Matthew
Panzarino, escritor do site de tecnologia The Next Web, provvel que um
consumidor saiba quando est olhando para algo feito pelo Google, seu
uso de cores primrias, espao branco e texto proeminente so elementos
j bastante conhecidos.
87

Os primeiros aplicativos foram criados pela Apple, e utilizados para


configurao de seu prprio sistema operacional e para consumo de
mdia, como o iTunes.

Aplicao do sistema iOS para configuraes de uso do iPad.

Ao disponibilizar para o pblico sua plataforma de desenvolvimento, o


SDK24, a Apple o fez prevendo no apenas a possibilidade de criar uma
aplicao do zero. Ela tambm forneceu os templates de suas prprias
aplicaes, facilitando assim a criao seguindo seus conceitos de design.
Com isso, uma enxurrada de aplicaes com layout semelhante, tanto na
disposio dos elementos quanto em outros elementos visuais, como
botes e barras delimitadoras, foram criados.

24 a sigla para Software Development Kit.

88

Template do modelo Master Detail sendo usado em aplicaes.

Os desenvolvedores se sentiam confortveis pois bastavam algumas


poucas alteraes de imagens para se ter uma aplicao concluda. Mas
com esse comportamento, o que surgiram foram aplicaes de empresas
famosas, sem sua essncia. Os elementos visuais destas empresas se
encontravam presentes, mas de maneira no comum. A aplicao para
iPad do Skype um exemplo, a imagem abaixo compara a verso antiga
com a nova. possvel notar que na anterior, cores e tipografia no seguiam
com eficincia o que a identidade da marca propunha.

89

Verso antiga e nova respectivamente do aplicativo Skype para iPad.

Assim como o Skype, o Google em sua recente reestilizao da aplicao


do Gmail para iOS, tambm se ateve a essa necessidade de transportar
sua identidade fielmente para a aplicao.

90

Nova identidade do Gmail para iPad.

Mesmo com essa evoluo, os templates antigos continuavam a ser


seguidos, mas uma nova tendncia pode ser notada. Algumas aplicaes
passaram a se desprender de sua plataforma, isto se deve em partes
pela influncia de plataformas concorrentes, e tambm pela maior
maleabilidade no desenvolvimento.

91

Aplicao Rise para iPad.

Isto significa que o caminho para se chegar a uma homogeneizao de


experincias entre plataformas de dispositivos mveis est mais prxima.
Apesar do caminho apontar para uma identidade prpria para as aplicaes,
isso no significa que seja preciso alterar todo o padro do sistema para
se ter sucesso. Este mesmo cenrio ocorre nas aplicaes de desktop
nos computadores, muitos programas possuem elementos em comum,
j que so recursos disponibilizados pelo prprio sistema operacional. A
situao atual mostra que os designers no mais se preocupam com os
elementos de sistema, a maleabilidade tanto dos sistemas, quanto dos
desenvolvedores, permite mais liberdade de criao para os aplicativos.

92

Identidade visual para a empresa The Pool.

O visual das aplicaes no esttico, ele deve se adaptar s dimenses


da tela, assim como nos sites se torna cada vez mais difcil manter uma
identidade coerente com os meios. A diferena est no fato de que os
usurios de computador esto acostumados a sites que no preenchem
todo o espao da tela, os das aplicaes mveis no. Alm disso, o layout
em grande parte das aplicaes deve ser pensado literalmente em dois
sentidos, na vertical e na horizontal, e isto no significa apenas girar os
elementos em noventa graus. Suas posies, tamanho, disposio e
visibilidade devem ser repensadas.

93

Desenvolvimento
e Performance

A tecnologia dita boa parte do visual, a velocidade com a qual os novos


recursos, plataformas de desenvolvimento e tipos de interaes surgem,
chega a ser assustador. Nesta etapa do projeto sero apresentados
assuntos que podem fugir ao conhecimento do designer, por estarem
relacionados a etapa de desenvolvimento de softwares. necessrio
acompanhar mais de perto os recursos que os desenvolvedores possuem
para dar vida s aplicaes, afim no s de saber um pouco mais sobre
todo o processo, mas tambm para evitar que uma soluo aparentemente
perfeita, se perca em meio a inviabilidade tcnica.
O Xcode a aplicao usada para o desenvolvimento de aplicaes para
os dispositvos Apple, onde todos os elementos do projeto so agrupados,
ganham suas funes atravs de cdigos de programao e fechados em
forma de aplicao para serem disponibilizados na Apple Store25.

Xcode, aplicao usada para desenvolver aplicativos do sistema iOS.

No comum fazer o desenvolvimento de uma aplicao partindo do zero,


normalmente se utiliza bibliotecas como auxilio e cdigos j escritos. Estes
que podem ser alterados, em uma rpida analogia, podemos comparar a
25Site onde as aplicaes para o sistema iOS so disponibilizados.

95

uma pesquisa semntica feita pelo designer. Os desenvolvedores tambm


buscam referncias de cdigos para desenvolvimento. Isto ocorre, no
apenas para otimizao, mas se trata de um modelo que em programao
conhecido como MVC26, que separa a aplicao em trs distintas reas,
e desta forma contribui para o bom funcionamento da aplicao. Com este
processo se evita por exemplo que o programa se feche abruptamente,
pelo aparelho no possuir memria disponvel. Este conhecimento pode
no ser de interesse do designer no momento em que a interface est
sendo desenhada, mas vai influenciar na experincia que o usurio ter.
A ordem com que as informaes so carregadas pode na verdade ser
usada como camuflagem para o que mais pesado, o fato do usurio
saber quanto tempo uma ao vai levar e saber que no precisa esperar
o carregamento completo para iniciar a interao de grande ajuda para
uma boa experincia.

As categorias so carregadas rapidamente, e enquanto o usurios decide qual a de seu


interesse as imagens referentes a cada uma vo sendo carregadas.

26Sigla para Model, View e Controller, uma arquitetura dividir as funcionalidades de um software.

96

Pgina intencionalmente deixada em branco

Resultado Final

At este momento foi descrito o processo de desenvolvimento do projeto,


nesta ltima etapa ser apresentado o resultado final da aplicao.
Elementos de design como tipografia e grid sero usados como
separadores para explicar cada etapa do layout, alm de haver uma
comparao de sua concepo quando feita no meio digital em relao a
mdia tradicional impressa.
O logo do servio uma juno de elementos que caracterizam seu
significado, um elemento grfico composto respectivamente por uma
tela, e pictogramas utilizados para controle de reproduo de vdeo. Este
elemento visual seguido pelo nome do servio criado com a mesma
tipografia usada na aplicao.

Explicao sobre a conceitualizao do logo.

As cores tem um papel muito importante nesta identidade, pois com a


ausncia de elementos auxiliares como sombras, texturas, degrads e
outros elementos a hierarquizao dos elementos fica a cargo das cores
e da tipografia. Ao se trabalhar em um dispositivo como o iPad se leva
vantagem na reproduo de cores, pois se trata de um mesmo dispositivo
99

para todos os usurios. No como um monitor que pode descalibrar, ou


uma pea impressa que pode ter o range de cor alterado dependendo do
mtodo de impresso. A variao s ocorre com o lanamento de uma
nova gerao do aparelho. Com isto foi possvel explorar o uso de sutis
variaes de uma mesma cor e mesmo assim sua diferena ser visivel,
para complementar os elementos deste tom so utilizados tons de cinza
como auxiliares.

cones
O cone de uma aplicao o primeiro contato do usurio com a mesma.
Seu visual simplificado reflexo da necessidade da sntese visual devido
ao pequeno tamanho em tela, onde divide espao com as mais diversas
aplicaes. Devido a isso, este cone perdeu a sua parte textual, pois seu
nome j apresentado abaixo do cone, de forma padronizada para todas
as outras aplicaes no iPad.

cone da aplicao no iPad.

Alm do cone que representa a aplicao, existem os cones da interface do


usurio. Estes simbolizam uma ao atravs de pictogramas, oferecendo
ao usurio a possibilidade clara de interao com o sistema. Isto acontece
100

pois os pictogramas utilizados so de comum conhecimento maioria dos


usurios deste dispositivo, dispensando assim a necessidade de reflexo
sobre o contedo da interao caso o boto seja acionado. Devido s suas
pequenas dimenses, foram utilizados pictogramas a base de formas
geomtricas extremamente redutivas e um range cromtico limitado a
monocromia.

Elementos de controle da interface de reproduo.

Como possvel notar na imagem anterior, no s os cones apresentam


visual simplificado e plano. Toda a aplicao segue essa estratgia visual,
esta a principal caracterstica do sistema, a apresentao de uma
interface simplificada e fcil de se utilizar.

101

Interface
De acordo com Meggs, o minimalismo como conceito grfico teve incio
na Holanda com o movimento artstico De Stijl, iniciado em 1917 por Theo
van Doesburg. Seus trabalhos geomtricos tinham o propsito de buscar
para a arte, as leis universais de equilbrio e harmonia, e a inspirao para
o movimento veio do pintor Holands Piet Mondrian e sua arte cubista. O
autor argumenta que a adoo das cores primrias por Mondrian se deu
pela influncia de M. H. J. Schoenmakers, quando o mesmo definiu que
vermelho, amarelo e azul so as trs cores essenciais, alm de tambm
citar a horizontal e a vertical como os dois opostos quem fundamentaram
a formao do nosso mundo.

Piet Mondrian, Composio III.

Tanto Mondrian quanto Van der Leck e Van Doesburg adotaram, alm dos
princpios j citados, o uso de cores neutras como preto, cinza e branco e
planos chapados limitados a retngulos e quadrados. Meggs argumenta
que os autores acreditavam que os novos acontecimentos polticos trariam
102

uma nova era de objetividade e coletivismo. Com o passar dos anos, seus
princpios foram levados adiante atravs de arquitetos como Ludwig Mies
van der Rohe, e designers industriais como Dieter Rams, responsvel pelos
icnicos aparelhos da Braun chegarem aos dias de hoje.
Segundo Kenna27, o estado atual do racionalismo est em uma
reinterpretao do mesmo, a autora afirma que esta disseminada adoo
do estilo de design minimalista pode ter comeado superficialmente, mas
coincidiu com uma retomada do interesse histrico e terico a respeito
dos designers modernistas. Esta afirmao pode ser feita pelo aumento
do nmero de publicaes ligadas ao tema nos ltimos anos. Segundo a
autora, a metodologia publicada pelo tipgrafo suo Emil Ruder em sua
obra Typographye: A Manual for Design (1967), consiste em um apanhado
de conceitos para avaliao do uso de tipografia e baseado em princpios
de design como contraste, forma e contra forma, tons de cinza e ritmo. A
autora defende que este mtodo no especfico para uma nica tecnologia
e que tambm semelhante aos mtodos de avaliao contemporneos
utilizados nos campos de HCI28.
Este resgate ao conceito minimalista tem recebido o nome de design
planificado, seu uso pode ser notado tanto em aplicaes mveis quanto em
websites. Seu resgate se faz necessrio em uma poca em que a quantidade
de informao gerada inversamente proporcional capacidade humana
de consumo da mesma. uma forma de que quem produz o contedo, o
sintetize e o simplifique em prol do usurio. O conceito ganhou ainda mais
fora com o lanamento do sistema operacional Windows 8 da Microsoft,
por ser um software amplamente utilizado, logo sua nova interface passou
a influenciar outras aplicaes. Isto ocorreu pois, para muitos, se tornou
uma maneira de promover facilidade e simplicidade por meio de uma
27KENNA, Hilary: Design Issues: Volume 27. NUmber 1 Winter 2011.
28Abreviao em ingls para o campo de Human Computer Interaction.

103

interface minimalista.

Tela inicial personalizvel do Windows 8.

O design planificado uma tcnica que no inclui atributos tridimensionais,


efeitos como sombras, bordas, relevos, gradientes ou outras ferramentas
que possam transmitir um efeito de elevao ou criar profundidade, e que
normalmente utilizados para indicar ao usurio que ali existe uma interao.
Seu visual tende a ser simples e de fcil utilizao, fato que contribui para
sua popularizao, principalmente em interfaces de dispositivos mveis.
A ausncia dos elementos citados, em contrapartida, exige mais ateno
do designer, pois ele deve compensar a falta destes elementos de outras
maneiras. Seu foco deve se voltar ao uso de cores vivas, tipografia sem
serifa e elementos geomtricos simplificados.

Nesta ltima etapa, sero apresentadas as interfaces desenhadas para a


aplicao e que seguem este conceito de planificao como recurso para
visar a objetividade e simplicidade na transmisso da informao. Sua
104

apresentao segue o fluxo do que seria o primeiro contato do usurio


com o servio. Partindo da abertura da aplicao, passando pelo cadastro,
criao de Streams (listas de reproduo), reproduo do contedo, entre
outros.

Tela de abertura

A tela de abertura um artificio dos sistemas operacionais para indicar


ao usurio que sua ao foi iniciada, e que a aplicao solicitada est
sendo aberta. Sua durao de poucos segundos e por isso a informao
contida deve ser eficiente e simples.

105

Tela de login

Esta tela o primeiro contado de interao do usurio com a aplicao,


so solicitados apenas os campos usurio e senha para o acesso ao
servio. A imagem na esquerda aleatria, e trs cenas das diversas
sries disponveis no servio.

106

Tela de configurao social

Neste primeiro acesso solicitado ao usurio a configurao de alguns


itens. Os dados de mdia social so solicitados, a fim de que o usurio
possa compartilhar as cenas que desejar nas redes sociais.

107

Tela de tutorial

Continuado a configurao inicial, o usurio convidado a criar o seu


primeiro Stream, para assim se familiarizar com o funcionamento do
servio.
108

Tela principal

Esta tela principal, atravs dela possvel acessar todas as funes da


aplicao. No menu lateral existem conexes para as outras funes da
aplicao e na rea central as sries que compe o Stream selecionado. E
na barra superior existe um menu para acessar as informaes de usurio
e senha para possveis alteraes, assim tambm como os dados de
mdias sociais.

109

Tela Popular

Todos os Streams criados ficam disponveis para outros usurios, podendo


assim ser adicionados por eles, mas a edio do mesmo s possvel por
quem o criou. Eles aparecem por ordem de popularidade, indicada pelo
nmero de Streamers (usurios) que adicionaram em suas contas.

110

Tela Status

Esta uma forma de gameficao aplicada ao servio, motivando o usurio


a alcanar objetivos especficos. Mas isto s ser possvel mantendo a
utilizao do servio a fim de alcanar a meta proposta.

111

Tela Social

Nesta tela so mostrados os compartilhamentos de imagens realizados


por usurios do Stream, que tambm so um contato nas redes sociais.

112

Player

O player acionado quando um Stream selecionado, sendo assim


ele inicia a reproduo do episdio em que o usurio parou na ltima
reproduo. Esta foi a apresentao do resultado final das telas da
aplicao, em seguida outros conceitos de design aplicados a estas telas
sero abordados.

113

Imagens
Os formatos de imagem usados em uma aplicao de iPad so os mesmo
usados no desenvolvimento de websites. Arquivos com extenso JPG
e PNG podem ser utilizados para elementos grficos compostos, como
fotos, mas para cones e outros elementos grficos de caracterstica
vetorial, aconselhado o uso do formato SVG. Este tipo de arquivo pode
ser expandindo para diversos tamanhos sem perder a qualidade, alm de
ser um formato relativamente leve de arquivo evitando assim que se perca
performance no uso da aplicao.

Grid
Segundo SAMARA, Timothy (2012, p. 22) o grid uma maneira de agrupar
os diversos elementos que compem uma pea, o uso desta tcnica traz
como vantagens: clareza, eficincia, economia de tempo e identidade. Isto
possvel pois o grid hierarquiza a informao e a organiza de maneira
coerente ao objetivo do designer. Para o projeto do Stream foram utilizados
dois grids, onde o primeiro leva em considerao a rea mnima sensvel ao
toque e o outro baseado na usabilidade. Este segundo ajuda a posicionar
os elementos em uma regio de fcil interao por parte do usurio, um
local que seja possvel de se alcanar com um toque.

Difcil

Mdio
Fcil

O grid da esquerda visa a usabilidade, indicando o tamanho mnimo de interao, j o da


direita indica as reas de maior dificuldade para toque em tela.
114

Alguns elementos do grid para um dispositivo digital, como o iPad,


possuem algumas diferenciaes para impressos. No existem margens,
pois diferente da preocupao com o refile no acabamento de um
impresso, as telas destes dispositivos podem ser aproveitadas at o limite
de sua borda. Outro item que os diferencia o fato do aparelho suportar
duas orientaes, o que exige a criao de um grid para distribuio de
elementos na horizontal e outro para vertical.

Tipografia
At alguns anos atrs, as fontes eram projetadas para impressos,
mesmo sendo estas desenhadas e finalizadas em um computador e
posteriormente impressas por diversas tecnologias de impresso. Antes
dos dispositivos mveis, as fontes j comearam a se adaptar ao contedo
digital para monitores. Isto ocorreu, pois os sites trouxeram consigo muitos
elementos do design impresso, como grid, espao de respiro e tipografia.
Mas com aparelhos to pequenos e com telas de alta definio, novas
fontes tiveram que ser desenhadas, com caractersticas de adaptabilidade
em diferentes tamanhos de tela. Em 2011, pensando neste propsito, o
sistema Android do Google adotou na verso Ice Cream Sandwich de
seu sistema operacional uma nova fonte, chamada Roboto, criada por
um funcionrio da empresa chamado Christian Robertson e descrita pelo
mesmo como uma fonte desenhada para dispositivo de alta resoluo e
alinhada com a interface do novo sistema.

115

Famlia de fontes Roboto em suas diferentes variaes.

Seu lanamento foi seguido de uma srie de anlises e comparaes.


Alguns especialistas em tipografia afirmaram que ela possui traos da
Helvetica, to utilizada por sua rival Apple no sistema operacional iOS, que
incorpora tanto a Helvetica quanto a Helvetica Neue como fontes padro
de sistema. Stephen Colen, do site Typographica, foi mais alm e fez um
comparativo de seu desenho com outras fontes pois, segundo ele, ela
uma mistura de Helvetica, Myriad, Univers, DIN e Ronnia. Esta foi a fonte
escolhida para o projeto, pois alm de ser projetada para se adaptar as
telas dos dispositivos mveis, uma fonte aberta para uso livre.

116

Comparativo da fonte Roboto com suas semelhantes.

Ela foi selecionada, no s por sua adaptao s telas dos dispositivos


mveis, mas tambm por atender a caractersticas dos layouts minimalistas
e planos. O que significa que a mesma no deve possuir serifa e deve
proporcionar uma boa variedade de pesos, visando a hierarquizao de
elementos textuais.

117

Consideraes
Finais

Se aventurar em uma rea ainda pouco evoluda pode parecer algo


intimidador de comeo, mas o processo que se decorre da pesquisa torna
o trabalho motivador. A rea de design de interface em dispositivos mveis
est em uma fase de formao de conhecimento, sua evoluo est ligada
no s a adoo no uso destes aparelhos, mas tambm pelo entendimento
de como esta tecnologia afeta a todos. O iPad, dispositivo mvel abordado
neste trabalho, por mais que seja o mais difundido, apenas um dos
diversos modelos, isto claro, sem contar os smartphones e recentemente
lanados tablets de menores propores.
A fundamentao terica mostrou que a tecnologia usada hoje deriva de
pensamentos e ideias que j vinham sendo testadas h muitos anos, mas
que s com o correto alinhamento de tecnologias foi possvel produzir
um aparelho com estas funcionalidades. O estudo deste caminho traado
at o momento em que estamos hoje pode ajudar a compreender, no
s o porqu de estarmos utilizando as tecnologias mveis para os mais
diferentes fins, mas tambm para ajudar a orientar o que pode vir a seguir.
O uso da interface como comunicador no se resume apenas em ser
eficiente ou apresentar boa caracterstica visual, ela pode ser comparada
a pele, ou seja, ela a parte visvel de algo muito mais complexo, e de
muitas dependncias para o bom funcionamento. Somente a experincia
do usurio no uso da aplicao que vai revelar se todo o esforo de seu
projeto foi bem executado, pois frustraes de uso podem acontecer em
qualquer situao. Em um aplicativo mvel podemos imagin-las como
a distncia entre o usurio e a informao que deseja. Quanto maior for
esta distncia, menor ser a qualidade de uso do aplicativo. Ele ser visto
apenas como uma ferramenta e nada mais, ou seja, uma experincia sem
impacto.

119

Por outro lado, quando os objetivos so atingidos facilmente, ou o sistema


consegue anteceder uma necessidade que ainda desconhecemos, nos
sentimos no mnimo satisfeitos. Quando isto acontece, se sabe que a
experincia do usurio foi completa, e por mais que esta satisfao parea
subjetiva, a misso da interface como comunicador foi cumprida.
A tarefa de conseguir criar essa empatia com o usurio no realizada
por sorte, ela fruto do trabalho e pesquisa de profissionais das mais
diferentes reas que projetaram, estruturaram e prototiparam diversas
verses de uma soluo. Realizando diversos testes de suas formas, fluxos,
hierarquias e demais aspectos para proporcionar ao usurio a resoluo
de sua necessidade. Unindo design e tecnologia, para criar uma soluo
centrada no prprio usurio final e suas mais deferentes caractersticas
pessoais.
Criar essa empatia com o usurio no uma questo de sorte, ela fruto
do trabalho e pesquisa de profissionais das mais diferentes reas que
projetaram, estruturaram e prototiparam diversas verses de uma soluo.
Realizando diversos testes de suas formas, fluxos, hierarquias e demais
aspectos para proporcionar ao usurio a resoluo de sua necessidade.
Unindo design e tecnologia, para criar uma soluo centrada no prprio
usurio final e suas mais deferentes caractersticas pessoais.

120

Pgina intencionalmente deixada em branco

121

Referncias
Bibliogrficas

BONSIEPE, Gui. Design, cultura e sociedade. So Paulo: Blucher, 2011.


CHANDLER, Carolyn; UNGER, Russ. O guia para projetar UX. Rio de Janeiro:
Alta Books, 2009.
FLUSSER, Vilm. O mundo codificado. 2 ed. So Paulo: Cosac Naify, 2010.
JOHNSON, Steven. Cultura da interface. Rio de Janeiro: Zahar, 2001.
MAEDA, John. As leis da simplicidade: vida, negcios, tecnologia, design.
So Paulo: Novo Conceito, 2007.
PREECE, Jenny; ROGERS, Yvonne; SHARP, Helen. Design de Interao:
alm da interao homem-computador. Porto Alegre: Bookman, 2005.
TIDWELL, Jenifer. Designing Interfaces. 2 ed. Sebastopol: OReilly, 2010.
MEGGS, Philip B. Histria do design grfico. So Paulo: Cosac Naify, 2009.
CHATFIELD, Tom. Como viver na era digital. Rio de Janeiro: Objetiva, 2012.

123

Referncias: Sites
Consultados

Arquitetura de Informao
Sites relacionados a estruturao de informao:
User Experience Design: http://semanticstudios.com/publications/
semantics/000029.php
Understanding Information Architecture: http://prezi.com/aafmvya6bk7t/
understanding-information-architecture/

Cores
Seleo de cores para aplicaes:
Flat design colors: http://designmodo.com/flat-design-colors/

cones
Bibliotecas de pictogramas para cones:
Create Web Fonts: http://www.webdesignerdepot.com/2012/01/how-tomake-your-own-icon-Webfont/
Biblioteca cones: http://fontello.com/
Biblioteca cones: http://www.guidebookgallery.org/icons

Interface
Referncias de criao e da histria das interfaces:
Interface Insults: http://www.flickr.com/groups/insults/
Interface Presentations: http://www.lukew.com/presos/
Windows Phone Patterns: http://chocoladesign.com/padroes-deinterface-do-windows-phone-parte-1
Windows Phone Patterns: http://chocoladesign.com/padroes-deinterface-do-windows-phone-parte-2
Windows Phone Patterns: http://chocoladesign.com/padroes-deinterface-do-windows-phone-parte-3
125

Artigos: http://www.alistapart.com/topics/userscience/accessibility/
Linha do tempo de interaes: https://www.facebook.com/LIAUFSCar
Linha do tempo de GUIs: http://www.guidebookgallery.org/timelines
Interface Xerox Alto: http://toastytech.com/guis/alto.html
Telas de abertura de softwares: http://www.guidebookgallery.org/
splashes
UI Guidelines for mobile: http://www.mobilexweb.com/blog/ui-guidelinesmobile-tablet-design

Prototipagem
Informaes sobre como prototipar aplicaes:
Sketchs para iPad: http://sneakpeekit.com/pad-sketchsheets/
Wireframing Web Apps: http://insideintercom.io/wireframing-for-webapps/
UX and UI Chicken and Egg: http://www.wireframewednesday.com/uxand-ui-chicken-and-egg
How we wireframe projects: http://www.wireframewednesday.com/
Planejando wireframes: http://www.slideshare.net/bradhaynes/strategyand-wireframes-plan-or-die

Patterns
Bibliotecas de referncias sobre padres em aplicativos e websites:
Aplicaes: http://www.makebetterapps.com/
Android 1: http://www.androiduipatterns.com/
Android 2: http://androidpttrns.com/
Android 3: http://developer.android.com/design/patterns/index.html
Dispositivos Mveis 1: http://4ourth.com/wiki/Index
Dispositivos Mveis 2: http://www.mobile-patterns.com/
Dispositivos Mveis 3: http://inspired-ui.com/
126

Dispositivos Mveis 4: http://www.lovelyui.com/


Dispositivos Mveis 5: http://www.mobiledesignpatterngallery.com/
mobile-patterns.php
Dispositivos Mveis 6: http://pttrns.com/ (Bom)
Dispositivos Mveis 5: http://www.patternsofdesign.co.uk/
Dispositivos Mveis 8: http://www.tappgala.com/
Dispositivos Mveis 9: http://creattica.com/mobile/latest-designs/
Dispositivos Mveis 10: http://dribbble.com/tags/iphone
Dispositivos Mveis 11: http://tapfancy.com/
Nokia: http://www.developer.nokia.com/Community/Wiki/
Category:Mobile_Design_Patterns
iOS 1: http://www.iospirations.com/
iOS 2: http://cssiphone.com/
iOS 3: http://developer.apple.com/library/ios/#documentation/
UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html
iPad 1: http://www.makebetterapps.com/cat/ipad/
iPad 2: http://landingpad.org/
Patterns diversas 1: http://www.flickr.com/photos/factoryjoe/
collections/72157600001823120/
Patterns diversas 2: http://patterntap.com/
Patterns diversas 3: http://www.welie.com/patterns/index.php
Patterns diversas 4: http://ui-patterns.com/
Patterns diversas 5: http://developer.yahoo.com/ypatterns/
Patterns diversas 6: http://developer.yahoo.com/ypatterns/
Wireframes: http://wireframes.tumblr.com/

Usabilidade
Referncias sobre a preocupao com a usabilidade do usurio:
Teste AB: http://www.smashingmagazine.com/2011/04/04/multivariate127

testing-101-a-scientific-method-of-optimizing-design/
Artigos sobre usabilidade 1: http://www.usableweb.com/
Artigos sobre usabilidade 2: http://www.useit.com/
Artigos sobre usabilidade 3: http://www.usabilityfirst.com/
Artigos sobre usabilidade 4: http://www.usability.gov/
Medidores: http://www.clicktale.com/
Eye tracking: http://www.crazyegg.com/

UX - Experincia do Usurio
Artigos e ferramentas ligadas a experincia do usurio:
Ferramentas: https://www.makesets.com/ux-tools-1/
Agrupamento de sites sobre UX: http://www.theuxbookmark.com/
Ferramentas para medio: http://www.measuringusability.com/blog/uxbenchmarks.php
Artigos sobre UX Mobile: http://www.inspireux.com/
Artigos sobre UX: http://uxmag.com/browse-topics

128