Design de Interface em Dispositivos Móveis

Design de Interface em Dispositivos M贸veis

Caio Salles Manzotti

Design de Interface em Dispositivos M贸veis

2013 Caio Salles Manzotti

Sumรกrio

Sumário ............................................................................................ 2 Introdução ........................................................................................ 6 Fundamentação Teórica ................................................................ 10 Do Teleautograph ao iPad ............................................................. 22 Objetivos ......................................................................................... 30 %ULHͤQJ............................................................................................ 34 Referências Projetuais ................................................................... 38 Abertura ........................................................................................................... 40 Página principal ............................................................................................. 41 Navegação ...................................................................................................... 41 Player ............................................................................................................... 42

Metodologia para Dispositivos Móveis ........................................ 44 Evernote ........................................................................................................... 51 Google Drive ................................................................................................... 52 iBooks .............................................................................................................. 52 iPad Vídeos ..................................................................................................... 53 Paper ................................................................................................................ 54 Photoshop Express ....................................................................................... 55 Wunderlist ....................................................................................................... 56

Conceito .......................................................................................... 60 *DPHͤFD©¥R .................................................................................................. 63

Arquitetura de Informação............................................................. 68 Levantamento de dados .............................................................................. 70

Prototipagem .................................................................................. 72 3URWRWLSDJHP GH EDL[D ͤGHOLGDGH ............................................................... 73 3URWRWLSDJHP GH DOWD ͤGHOLGDGH .................................................................. 74

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

Interface do Usuário ...................................................................... 84 Evolução Visual dos Aplicativos ................................................................. 85

Desenvolvimento e Performance .................................................. 92 Resultado Final............................................................................... 96 Ícones............................................................................................................... 98 Interface.........................................................................................................100 Grid .................................................................................................................112 7LSRJUDͤD ......................................................................................................113

Considerações Finais...................................................................116 5HIHU¬QFLDV %LEOLRJU£ͤFDV ........................................................... 120 Referências: Sites Consultados .................................................. 122

4

Introdução

Segundo Bonsiepe1 S SDUD VH REWHU XPD FRPXQLFDŠ¼R HͤFLHQWH existe a necessidade de um componente estÊtico, que deve ser pensado de forma a reduzir a complexidade da informação bruta recebida pelo designer QR EULHͤQJ GR SURMHWR $ FRPXQLFDŠ¼R HͤFLHQWH  DLQGD PDLV LPSRUWDQWH quando atrelada a dispositivos móveis que, assim como o próprio nome M£ VXJHUH  XP DUWLI¯FLR P¾YHO TXH DFRPSDQKD R XVX£ULR TXH  DFLRQDGR em diferentes contextos dependendo da necessidade. A forma como essa interação ocorre Ê atravÊs da interface, palavra que, segundo Steven Johnson2 (2001, p. 17), se refere a função de dar forma a uma interação entre um usuårio e um computador. Mas se engana quem encara esta GHͤQLŠ¼R GH FRPSXWDGRU FRPR RV GH PHVD TXH HVWDPRV DFRVWXPDGRV A quantidade de pequenos dispositivos móveis que invadiram a rotina das SHVVRDV UHGHͤQLX R FRQFHLWR GH FRPSXWDGRU (VWHV GLVSRVLWLYRV SRVVXHP telas sensíveis ao toque e muitos sequer possuem teclado físico. É nesta variedade de tamanhos, formas, tecnologias e funcionalidades TXH VH DEULJD D GLͤFXOGDGH RX VHMD VXD YHUVDWLOLGDGH DFDERX FULDQGR uma sÊrie de obståculos para os que querem desenvolver uma aplicação mantendo suas características tanto visuais como de experiências, REMHWLYRV TXH SRGHP VHU DIHWDGRV SRU UHVWULŠ¡HV WFQLFDV H GH UHSURGXŠ¼R de alguns destes dispositivos móveis. A experiência de uso não serå a mesma, e diversos artifícios deverão ser usados para proporcionar uma boa experiência do usuårio.

(VWH SURMHWR GH JUDGXDŠ¼R WHP FRPR WHPD R GHVLJQ GH LQWHUIDFH HP dispositivos móveis, representado por uma aplicação para tablet, HVSHFLͤFDPHQWH SDUD R L3DG GD $SSOH 8PD DSOLFDŠ¼R SDUD HQWUHWHQLPHQWR chamada Stream, que explora de diferentes maneiras o consumo de conteúdo audiovisual atravÊs do tablet. Seu desenvolvimento tem duas ̧%216,(3( *XL 'HVLJQ FXOWXUD H VRFLHGDGH 6¼R 3DXOR %OXFKHU ̧-2+1621 6WHYHQ &XOWXUD GD LQWHUIDFH 5LR GH -DQHLUR =DKDU

7

ͤQDOLGDGHV D SULPHLUD  D HODERUDŠ¼R GH XP DSOLFDWLYR TXH SURSRUFLRQH entretenimento atravÊs de um serviço de transmissão de vídeo via internet, explorando a vasta quantidade de conteúdo audiovisual em formato de VULH 6XD RXWUD ͤQDOLGDGH HVW£ HP VHUYLU FRPR IHUUDPHQWD GH DQ£OLVH sobre a validade de pråticas do design impresso e de internet ao serem DSOLFDGRV SDUD VH SURMHWDU SDUD XPD LQWHUIDFH GH GLVSRVLWLYR P¾YHO H DVVLP LGHQWLͤFDU PWRGRV H SURFHVVRV TXH PHOKRU VH DGDSWHP D HVWD ͤQDOLGDGH 2 SURMHWR  EDVHDGR HP HPSUHVDV TXH REWLYHUDP VXFHVVR HP FULDU RX DGDSWDU VXDV VROXŠ¡HV DRV GLVSRVLWLYRV P¾YHLV GHVLJQHUV TXH desenvolveram habilidade de lidar com este mercado e autores divididos entre antigos e contemporâneos. Podendo assim ser traçado um comparativo entre ideias sobre o impacto de uma nova tecnologia no cotidiano dos usuårios e como o design se molda para este novo canal. $ SU¾SULD PHWRGRORJLD XWLOL]DGD QHVWH SURMHWR  H[SHULPHQWDO H VXD concepção Ê resultado de mais de dois anos de pesquisa sobre o tema.

Esta Ê uma årea ainda em desenvolvimento no campo do design, e sua evolução estå ligada ao entendimento de como os elementos do design FRPR RV FRQKHFHPRV VH FRPSRUWDP QHVVD QRYD JDPD GH LQWHUDŠ¡HV H contextos.

6XD DSUHVHQWDŠ¼R SRGH Q¼R VHU FRQYHQFLRQDO PDV IRL SODQHMDGD GH maneira a explicar o conteúdo na sequência em que os acontecimentos ocorreram e assim proporcionar o acompanhamento quanto a evolução QR GHVHQYROYLPHQWR GR SURMHWR $FUHGLWR TXH D IRUPD FRPR HOH IRL SHQVDGR H GHVHQYROYLGR SRGH DMXGDU IXWXURV WUDEDOKRV QD £UHD H TXH R PDWHULDO demonstrado sirva como ponto de partida.

8

Fundamentação Teórica

$QWHV GH LQLFLDU D DSUHVHQWDŠ¼R GR SURMHWR HP VL VHU£ IHLWR XP posicionamento do estado atual em relação a convergência de tecnologias e seus efeitos. Para isto, foi elaborada uma pesquisa dividida em três YLHVHV VHQGR HOHV ͤORV¾ͤFR VRFLDO H WHFQRO¾JLFR No primeiro viÊs são abordados temas relacionados ao modo como os homens e a tecnologia evoluíram e se relacionam desde então, tendo como base os textos de Flusser3 (2010) sobre teorias de comunicação FRP F¾GLJRV H LPDJHQV 3DUD )OXVVHU YLYHPRV HP XP PXQGR FRGLͤFDGR aprendido com gestos, o que na verdade seria uma segunda natureza, VHQGR D SULPHLUD DTXHOD TXH FLUFXQGD WRGR HVWH PXQGR FRGLͤFDGR (VWH modo de pensar molda sua teoria sobre como a comunicação humana Ê IHLWD 6HJXQGR R DXWRU R REMHWLYR GR DWR GH VH FRPXQLFDU  SDUD QRV ID]HU esquecer de como somos sozinhos no mundo, e condenados a morte, SHQVDPHQWR TXH FRPS¡H R PXQGR GD ̸QDWXUH]D̚ $ FRPXQLFDŠ¼R KXPDQD  LQDWXUDO SRLV VH SURS¡H D DUPD]HQDU LQIRUPDŠ¡HV DGTXLULGDV M£ TXH R homem Ê um animal que arrumou formas de armazenar esse conteúdo.

3DUD TXH XPD LQIRUPDŠ¼R VHMD SURGX]LGD  QHFHVV£ULR XPD SUYLD WURFD GH LQIRUPDŠ¡HV GLVSRQ¯YHLV SDUD DVVLP VLQWHWL]DU XPD QRYD LQIRUPDŠ¼R Necessariamente, este armazenamento se då pelo compartilhamento, SDUD TXH DVVLP Q¼R VH SHUFDP RX SLRU TXH VHMDP HVTXHFLGDV 3DUD R DXWRU XPD IRUPD GH DSUHVHQWDU DV LQIRUPDŠ¡HV  SRU PHLR GDV VXSHUI¯FLHV HVWDV TXH DQWLJDPHQWH HUDP UHSUHVHQWDGDV SRU IRWRJUDͤDV vitrais e pinturas rupestres e, posteriormente, adicionados estes meios a 79 DV WHODV GH FLQHPD FDUWD]HV H UHYLVWDV 2 DXWRU WDPEP FRPSDUD WRGD HVWD LQIRUPDŠ¼R YLVXDO FRP DV OLQKDV HVFULWDV ̸$V OLQKDV HVFULWDV DSHVDU de serem muito mais frequentes do que antes, vêm se tornando menos LPSRUWDQWHV SDUD DV PDVVDV GR TXH DV VXSHUI¯FLHV̚ S

̧)/866(5 9LOP 2 PXQGR FRGLͤFDGR l HG 6¼R 3DXOR &RVDF 1DLI\

11

Estas superfícies representam um mundo, o autor se coloca em dúvida se linhas e superfícies fariam parte de um mesmo mundo. A diferença, por exemplo, das linhas escritas e pintura, Ê que na primeira precisamos seguir R WH[WR GR FRPHŠR DR ͤP VH TXLVHUPRV HQWHQGHU VXD PHQVDJHP -£ QR segundo, podemos captar esta informação antes mesmo de fazer uma decomposição de sua imagem.

Textos Filmes

1ÂŞ DimensĂŁo

2ÂŞ DimensĂŁo

Esculturas 3ÂŞ DimensĂŁo

'LPHQV¡HV VHJXQGR )OXVVHU S

Flusser acredita que uma mudança radical na estrutura de nossa civilização SRGH DFRQWHFHU M£ TXH ̸R SHQVDPHQWR HP OLQKD̚ HVW£ VHQGR DEVRUYLGR SHOR ̸SHQVDPHQWR HP VXSHUI¯FLH̚

Ficção conceitual

Ficção imagÊtica

Pensamento em linha

Pensamento em superfĂ­cie

Elite

Massa )LFŠ¡HV VHJXQGR )OXVVHU S

$ ͤFŠ¼R LPDJWLFD WLGD WDPEP FRPR SHQVDPHQWR HP VXSHUI¯FLH HUD YLVWD FRPR XP FRQFHLWR GH FRQWHŸGR SDUD D PDVVD (P XPD WHQWDWLYD GH MXQWDU 12

estes dois pensamentos, tanto o linear quanto o de superfície, se chegou a XP SHQVDPHQWR LPDJWLFR FRQVFLHQWH H FODUR PDVVLͤFDQGR D LQIRUPDŠ¼R antes elitizada. Segundo o autor, os pensamentos imagÊtico e conceitual tomariam uma outra forma no futuro, representado por uma espÊcie de retroalimentação, que talvez se assemelhe ao que ocorre atualmente nas UHGHV VRFLDLV

Imagem de algo

Explica imagem

Imagem da explicação

Publicação compartilhada

Descrição e legenda da imagem

Comentårios, intervenção na imagem

)OX[R GH ͤFŠ¼R )OXVVHU S H FRPSDUDWLYR FRP DV UHGHV VRFLDLV

Flusser destaca duas tendências, a primeira delas Ê a de que a mídia de superfície como pinturas e peças publicitårias estaria recorrendo cada vez mais a linearidade, dando ao pensamento imagÊtico e ao de superfície, o poder de conceber conceitos. A segunda posição Ê a respeito da terceira dimensão que, segundo o autor, vai alÊm das esculturas, trata-se de SURYRFDU VHQVDŠ¡HV FRUS¾UHDV 6HQGR DVVLP R SHQVDPHQWR HP VXSHUI¯FLH se destaca para esta tarefa, pois pode cobrir os fatos de uma maneira mais completa. Isto por sua vez, não quer dizer que devemos deixar de ODGR R SHQVDPHQWR OLQHDU 1HVWH SRQWR R DXWRU SURS¡H XPD FRPELQDŠ¼R destes dois tipos de mídia. Isto abriria as portas para o surgimento de uma nova mídia, que nos faria ver os fatos de uma maneira diferente. Tal combinação poderia resultar em uma nova civilização. Flusser tem uma visão de sociedade contemporânea como algo que não foi concebido de maneira linear, mas sim por meio de uma espÊcie de espiral.

13

Primeira posição

Segunda posição

Terceira posição

Mensagens estĂĄticas

Conceitos lineares

Imagens que ordenam conceitos

Mitos

HistĂłria

Formalismo

Espiral de Flusser (2010, p. 120).

Nesta terceira posição, o homem usa sua criatividade para criar conteúdo, mas de uma forma nunca antes feita. Em suas próprias palavras, ele H[SOLFD HVWH FRQFHLWR Vamos então buscar um espectador de TV num futuro próximo. Ele WHU£ ¢ VXD GLVSRVLŠ¼R XP YLGHRFDVVHWH FRP ͤWDV GH Y£ULRV SURJUDPDV Estarå apto a mesclå-los e a compor, assim, seu próprio programa. Mas SRGHU£ ID]HU DLQGD PDLV ͤOPDU VHX SURJUDPD H RXWURV QD VHTXQFLD LQFOXVLYH ͤOPDU D VL PHVPR UHJLVWUDU LVVR QXPD ͤWD H GHSRLV SDVVDU R resultado na tela de sua TV. Ele se verå, portanto, em seu programa. ,VVR VLJQLͤFD TXH WHU£ R FRPHŠR R PHLR H R ͤP TXH R HVSHFWDGRU TXLVHU >̿@ )/866(5 S

1RV GLDV GH KRMH LVWR  IHLWR PXLWR PDLV IDFLOPHQWH FRP UHFXUVRV DPSODPHQWH GLVSRQ¯YHLV FRPR ͤOPDGRUDV GH FHOXODU ZHEFDPV H F¤PHUDV GLJLWDLV ‹ R FRQVXPLGRU PROGDQGR R FRQWHŸGR ͤOWUDGR FRQWHPSODQGR o que lhe Ê conveniente e atrativo, Ê a interação com o conteúdo, e não DSHQDV R FRQVXPR GH IRUPD OLQHDU 2 DXWRU DLQGD GHVWDFD TXH QHVWH caso, o interesse deixa de ser a história e passa a ser a possibilidade da combinação de vårias histórias. Ele ainda alerta para o risco de sofrer com a imaginação confusa, sendo esse aviso plausível se comparado ao H[FHVVR GH LQIRUPDŠ¼R TXH YLYHPRV KRMH 2 KRPHP VHJXQGR )OXVVHU S VHPSUH VH YLX REULJDGR D WUDQVSRU o abismo entre ele e o mundo atravÊs de símbolos ordenados. Este Ê um recurso para resumir o mundo das circunstâncias em cenas, e de forma

14

TXH RXWURV SRVVDP GHFRGLͤF£ ODV $VVLP FRPR KRMH DV OLQJXDJHQV GH SURJUDPDŠ¼R R ID]HP PDV QHVWH FDVR Q¼R V¼R LQWHUSUHWDŠ¡HV KXPDQDV PDV VLP GDV P£TXLQDV H VRIWZDUHV 2 KRPHP GH FHUWD IRUPD DLQGD  programado pelo texto, uma vez que passa parte da vida aprendendo a ler e escrever.

Para Flusser (2010, p. 135), a nova geração Ê programada por imagens eletrônicas, porÊm levou-se sÊculos para a escrita ser descoberta como IRUPD GH QDUUDŠ¼R 2 DXWRU DLQGD YDL DOP FRQVLGHUDQGR TXH TXDQGR D informação se torna móvel, ela atinge uma nova esfera. Esta, por sua vez, ao ser somada com a comunicação instantânea, leva o nome de narração, diz o autor. A exemplo, existem as patterns4 GH VLWHV H VRIWZDUHV TXH são códigos decifrados por usuårios, 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 tendência iniciada SRU ͤOPHV H IRWRV (VWH WUDQVSRUWH VH WUDQVIRUPD FDGD YH] PDLV I£FLO H segundo o autor (2010, p. 158), este não deve ser feito como na televisão, que liga um emissor a vårios 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, alÊm de emitir e receber imagens, podem ser SURFHVVDGDV H UHWUDQVPLWLGDV GH YROWD DR HPLVVRU DͤUPD )OXVVHU p. 159). Desta forma, o poder mudarå das mãos de um emissor, para as mãos dos que interpretam e retornam a mensagem.

Para Flusser, não existem paralelos no passado que nos permitam aprender o uso de códigos tecnológicos, mas ao abordar o viÊs social, WDOYH] VHMD SRVV¯YHO HQWHQGHU FRPR D WHFQRORJLD DMXGD QR GLD D GLD H TXDLV as possíveis mudanças que isso pode causar na rotina e comunicação ̧&RPSRQHQWHV YLVXDLV FRPXQV HQWUH GLIHUHQWHV VLWHV H VRIWZDUHV

15

do homem com outros indivíduos. A base desta etapa são os livros ̸$V /HLV GD 6LPSOLFLGDGH̚ GH 0DHGD H ̸&XOWXUD GD ,QWHUIDFH̚ GH Johnson (2001). Maeda5 (2007, p. 23) explica que economia de tempo transmite felicidade e que, quando Ê demonstrado por um produto ou VRIWZDUH WUD] XP HOHYDGR JUDX GH VDWLVIDŠ¼R SRLV QD YLV¼R GR XVX£ULR HOH estå economizando tempo. Entretanto, quando se trata de um processo demorado, precisa-se de sinais de que tudo estå bem, isto Ê reforçado SHOR DXWRU TXDQGR DͤUPD TXH ̸JRVWDPRV GH YHU R WHPSOR IOXLU̚ SRUWDQWR RV DSDUHOKRV H VRIWZDUHV TXH XVDPRV SUHFLVDP QRV GDU HVWH UHWRUQR SDUD nos sentirmos confortåveis.

Se um sistema operacional mostrar um contador de tempo restante para copiar um arquivo, nos sentiremos confortĂĄveis, pois saberemos o tempo estimado para uma tarefa ser concluĂ­da. De acordo com Maeda (2007, p.

30), algumas vezes nesta espera podemos ter uma percepção diferente do que quando se estå em uma situação de emergência pois, neste caso, R WHPSR HVWLPDGR Q¼R  VXͤFLHQWH ‹ SUHFLVR VDEHU R WHPSR H[DWR SDUD D FRQFOXV¼R GH XPD WDUHID 2 DXWRU XVD FRPR H[HPSOR D F¾SLD GH XPD apresentação, minutos antes da palestra, para um auditório cheio.

4XDQGR R GHVLJQ GH XP SURGXWR H VRIWZDUH  GHVHQKDGR GH IRUPD a proporcionar economia de tempo, automaticamente atribui-se simplicidade na descrição de uso. Isto Ê muito importante em necessidades TXH MXOJDPRV VHU VLPSOHV SRLV VHJXQGR R DXWRU S R IDWR de gastar tempo para aprender uma certa tarefa, passa a sensação de estarmos desperdiçando tempo. Portanto, Ê importante que, quando o XVX£ULR IRU REULJDGR D DSUHQGHU DOJR PDLV FRPSOH[R QR VRIWZDUH HOH VHMD recompensado de alguma maneira. Desta forma, o fato de o usuårio usar a repetição para aprimorar seu desempenho e facilidade na execução de

̧0$('$ -RKQ $V OHLV GD VLPSOLFLGDGH 6¼R 3DXOR 1RYR &RQFHLWR

16

tarefas, passarĂŁo desapercebidos. Alguns dos motivos que causam o HQJDMDPHQWR GR XVXÂŁULR FRP R VRIWZDUH VHJXQGR 0DHGD S

V¼R ̸6HQWLU VH VHJXUR DEVWHQGR VH GR GHVHVSHUR VHQWLU VH FRQͤDQWH (dominando o båsico) e sentir-se instintivo (condicionando-se por meio GD UHSHWLŠ¼R ̚ 2XWUR UHFXUVR LPSRUWDQWH SDUD R ERP GHVLJQ GHVFULWR SRU 0DHGD S

 R XVR GH HOHPHQWRV M£ FRQKHFLGRV GR XVX£ULR FDXVDQGR D VHQVDŠ¼R 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, SRGH VHU H[SOLFDGR FRPR QD REUD GH 7LGZHOO6 (2010, p. 18), onde a autora RV GHVFUHYH FRPR HVWUXWXUDV H SDGU¡HV GH HOHPHQWRV TXH PHOKRUDP D usabilidade de uma interface. Um exemplo Ê o uso de menus em sites com PDLV GH XPD S£JLQD UHFXUVR TXH IDFLOLWD D QDYHJDŠ¼R GR PHVPR 2 XVR GDV SDWWHUQV DOLDGR FRP DV M£ FRQKHFLGDV PHW£IRUDV YLVXDLV GDV LQWHUIDFHV dos sistemas operacionais, criam um ambiente capaz de transferir uma JUDQGH TXDQWLGDGH GH LQIRUPDŠ¡HV DR XVX£ULR FRP SRXFR WHPSR &RP WRGRV HVWHV FRQFHLWRV DSOLFDGRV VH WHP JUDQGHV FKDQFHV de desenvolver um aplicativo com relevância social, devido a sua preocupação com as necessidades dos usuårios, poupando-lhes tempo H SURSRUFLRQDQGR IDFLOLGDGH QR GLD D GLD 0DV DOP GHVWDV SUHRFXSDŠ¡HV de uso, outros elementos não menos importantes, devem ser levados em FRQVLGHUDŠ¼R GHVWD YH] SDUD R ERP IXQFLRQDPHQWR GR KDUGZDUH H GR VRIWZDUH Em complemento aos conceitos de Maeda abordados atÊ agora, serão analisadas metodologias e conceitos sobre experiência do usuårio e GHVLJQ GH LQWHUIDFH 2 YLV WHFQRO¾JLFR  HPEDVDGR SHORV W¯WXORV ̸'HVLJQLQJ

̧7,':(// -HQLIHU 'HVLJQLQJ ,QWHUIDFHV l HG 6HEDVWRSRO 2̾5HLOO\

17

,QWHUIDFHV̚ GH 7LGZHOO H ̸2 *XLD 3DUD 3URMHWDU 8;̚ GH &KDQGOHU7 (2009). Dois títulos que, ao serem somados, se tornam de grande utilidade SDUD SURMHWDU XPD DSOLFDŠ¼R VHMD HOD SDUD XP FRPSXWDGRU GH PHVD internet ou dispositivo móvel. &RQIRUPH 7LGZHOO S KRXYH XP WHPSR HP TXH RV GHVLJQHUV GH interface possuíam apenas uma pequena caixa de ferramentas, limitadas a simples controles, ícones e um enxuto número de cores. As regras de como estes poucos itens deveriam ser usados eram ditadas pelos manuais :LQGRZV 6W\OH *XLGH8 H 0DFLQWRVK +XPDQ ,QWHUIDFH *XLGHOLQHV9. AlÊm disso, normalmente esta função de desenho da interface era desenvolvida SHOR PHVPR SURͤVVLRQDO UHVSRQV£YHO SHOD SURJUDPDŠ¼R H Q¼R SRU XP designer.

2 DXWRU &KDQGOHU S H[SOLFD TXH DR ORQJR GRV ŸOWLPRV DQRV R PHUFDGR GH SURͤVVLRQDLV QHVWD £UHD PXGRX 'HVLJQHUV DVVXPLUDP IXQŠ¡HV LPSRUWDQWHV H RFRUUHX XPD VHJPHQWDŠ¼R GH IXQŠ¡HV $ PHGLGD TXH VH IRUDP GHVHQYROYHQGR PHWRGRORJLDV GH SURMHWR VXUJLUDP IXQŠ¡HV como o arquiteto de informação, designer de interação e especialista HP H[SHULQFLD GR XVX£ULR 7LGZHOO S DͤUPD TXH R SDQRUDPD GR GHVHQYROYLPHQWR GH LQWHUIDFHV WDPEP PXGRX QRV GLDV GH KRMH WUDEDOKDQGR VH FRP XPD JLJDQWHVFD SDOHWD GH FRPSRQHQWHV H VROXŠ¡HV ([LVWHP IHUUDPHQWDV SDUD GHVHQKDU DSOLFDŠ¡HV SDUD RV PDLV GLIHUHQWHV canais, kits para desenvolvimento apenas para celulares, e bibliotecas de FRPSRQHQWHV GHVHQKDGRV H[FOXVLYDPHQWH SDUD WDEOHWV &RP D PHOKRUD dos aparelhos, obteve-se excelente qualidade de tela e alto desempenho para processar tarefas. A autora frisa que, mesmo com todas essas possibilidades, continua não sendo tarefa fåcil o desenho de interface, ̧&+$1'/(5 &DURO\Q H 81*(5 5XVV 2 JXLD SDUD SURMHWDU 8; 5LR GH -DQHLUR $OWD %RRNV ̧*XLD GH UHIHUQFLD SDUD GHVHQYROYLPHQWR GH DSOLFDŠ¡HV SDUD VLVWHPDV :LQGRZV ̧*XLD GH UHIHUQFLD SDUD GHVHQYROYLPHQWR GH DSOLFDŠ¡HV SDUD VLVWHPDV $SSOH

18

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

Devido a interface sensível ao toque, as expectativas dos usuårios costumam ser altas em relação ao modo como serå a interação. Mas por outro lado, os usuårios deste tipo de tecnologia estão mais receptivos a PHLRV GLIHUHQWHV GH LQWHUDJLU SRUWDQWR H[SORUDU HVWDV QRYDV LQWHUDŠ¡HV  algo que o usuårio estå esperando. Dois outros pontos são importantes SDUD REWHU VXFHVVR QR GHVHQYROYLPHQWR GH XPD LQWHUIDFH R SULPHLUR  saber as expectativas dos usuårios em relação a aplicação e o segundo Ê escolher cuidadosamente a ferramenta de desenvolvimento da mesma, considerando seus elementos individuais e suas patterns. &RPR FRPSOHPHQWR D HVWHV YLHVHV HVW£ D REUD GH 7RP &KDWͤHOG10 (2010, p. 14), o autor defende que o mundo digital atual não Ê apenas uma ideia RX XP FRQMXQWR GH IHUUDPHQWDV H TXH XP GLVSRVLWLYR GLJLWDO PRGHUQR Q¼R Ê apenas algo ativado para nos entreter e nos agradar. Segundo o autor D QDWXUH]D WHFQRO¾JLFD  W¼R GLYHUVLͤFDGD TXDQGR D QDWXUH]D KXPDQD representando diferentes papÊis em nosso dia-a-dia. Esta pode ser entendida como um espelho do usuårio, pois alÊm de sua rotina tambÊm UHIOHWH VXDV QHFHVVLGDGHV 2V FRPSXWDGRUHV V¼R FDSD]HV GH VLPXODU qualquer mídia, instalando-se o programa adequado.

As pessoas estão em um momento de transição, migrando do computador pessoal para o que o autor chama de computador íntimo, pois alÊm de HVWDU R WHPSR WRGR MXQWR H VHPSUH FRQHFWDGR WDPEP VXSUH QRVVDV QHFHVVLGDGHV GH P¯GLD H GH FRPXQLFDŠ¼R 2 DXWRU DLQGD YDL DOP TXDQGR 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 mídia era capaz de oferecer o mesmo (2010, S &KDWͤHOG FRQFOXL TXH D SULPHLUD OLŠ¼R TXH VH GHYH DSUHQGHU FRP D ̧&+$7),(/' 7RP &RPR YLYHU QD HUD GLJLWDO 5LR GH -DQHLUR 2EMHWLYD

19

tecnologia Ê de que não podemos ter esperança de compreendê-la de uma forma construtiva, falando não da tecnologia de modo abstrato, mas das experiências que ela proporciona (2010, p. 27). &RP D UHIOH[¼R GR FRQWHŸGR GHVWHV YLHVHV  SRVV¯YHO FULDU XPD V¾OLGD EDVH GH FRQFHLWRV H GLUHWUL]HV SDUD REWHU [LWR HP XP SURMHWR GH DSOLFDWLYR P¾YHO $OP GD REULJDŠ¼R P¯QLPD GH ID]HU EHP DTXLOR TXH HOH VH SURS¡H ele tambÊm deve ser familiar, a ponto de se ligar ao meio em que o usuårio vive, pois são 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 não existem paralelos no passado que nos permitam DSUHQGHU R XVR GH F¾GLJRV WHFQRO¾JLFRV WDOYH] VHMD XPD TXHVW¼R GH tempo para que isto mude e as pessoas passem a interpretar o uso de dispositivos móveis naturalmente, pois a cada dia eles adentram à vida GHVWDV SHVVRDV VHMD QD IRUPD GH WDEOHW RX GH FHOXODU $ WHFQRORJLD FRPR um todo pode ser difícil de entender, mas podemos entender melhor um aparelho conhecendo sua história, e com isso saber que a mågica de sua tecnologia não surgiu ao acaso, mas foi fruto de muitos anos de pesquisa e desenvolvimento.

20

Do Teleautograph ao iPad

2V WDEOHWV FRPR RV FRQKHFHPRV SDUHFHP WHU VD¯GR GH XP ͤOPH GH ͤFŠ¼R FLHQW¯ͤFD PDV HOHV Q¼R VXUJLUDP GD QRLWH SDUD R GLD (VWHV V¼R UHVXOWDGR GH uma convergência de tablets perifÊricos, usados atualmente para desenho HP WHOD FRPSXWDGRUHV SRUW£WHLV H 3'$̾V11, tambÊm conhecidos como assistente pessoal digital. Sua história foi moldada por diversos avanços tecnológicos que convergiram para sua criação, uma história que teve início K£ GRLV VFXORV (QTXDQWR R LPLJUDQWH DOHP¼R 2WWPDU 0HUJHQWKDOHU LQLFLDYD XPD UHYROXŠ¼R QD SURGXŠ¼R GH PDWHULDLV JU£ͤFRV FRP VXD FRPSRVLWRUD GH tipos, a Linotype em Baltimore, uma outra revolução acontecia não muito ORQJH GDOL (P (OLVKD *UD\ GHVHQYROYHX QRV DUUHGRUHV GH +LJKODQG Park, no estado americano de Illinois, uma tecnologia que, segundo Jeremy 1RUPDQ DEULULD XP QRYR FDPLQKR QDV FRPXQLFDŠ¡HV *UD\  UHVSRQV£YHO por seis patentes do chamado Teleautograph. Este aparelho transmitia mensagens atravÊs de impulsos magnÊticos para uma folha de papel comum, com o uso de uma caneta especialmente desenvolvida para este ͤP RX FRPR R SU¾SULR FULDGRU GHVFUHYHX HP XPD HQWUHYLVWD D XP UHS¾UWHU GR 7KH 0DQXIDFWXUHU %XLOGHU ̸&RP PLQKD LQYHQŠ¼R YRF SRGHULD HVWDU HP VHX HVFULW¾ULR HP &KLFDJR SHJDU XPD FDQHWD H HVFUHYHU XPD PHQVDJHP SDUD PLP e enquanto sua caneta se move, outra aqui em meu laboratório se PRYHULD VLPXOWDQHDPHQWH H IRUPDULD DV PHVPDV OHWUDV H SDODYUDV̿̚

AlÊm da revolução proporcionada pelo mesmo, ele ainda foi a base para que em 1926 os laboratórios Bell desenvolvessem o primeiro protótipo de fac-simile, ou simplesmente Fax, como Ê amplamente conhecido. Apenas em 1964 o primeiro tablet reconhecível por uma interface de computador IRL GHVHQYROYLGR SHOD 5$1' &RUSRUDWLRQ H SURSRUFLRQDYD DR XVX£ULR D SRVVLELOLGDGH GH HVFROKHU RSŠ¡HV HP PHQXV H GHVHQKDU PDV VHX XVR IRL limitado devido ao seu alto valor. ̧$EUHYLDŠ¼R GH 3HUVRQDO GLJLWDO DVVLVWDQW XP FRPSXWDGRU GH SHTXHQDV SURSRUŠ¡HV

23

5$1' 7DEOHW GH

Alan Key criou em 1968 um protótipo que chamou de Dynabook, o conceito era simples, se tratava de um computador portátil semelhante em tamanho a uma folha de papel e possuía um teclado físico e touchscreen12 integrados. Seu uso, de acordo com o elaborado por Alan, era de que os MRYHQV SXGHVVHP VH FRQHFWDU D VHUYLGRUHV UHPRWRV SDUD DFHVVDU WH[WRV e imagens para trabalhos escolares, conceito semelhante ao que a Apple adotou, ao lançar no início de 2012, sua ferramenta de publicação iBooks Author. Pouco antes da década de 80, a própria Apple se arriscou lançando o primeiro tablet para o mercado doméstico, o Graphics Tablet, para seu aparelho de computador Apple II. Entretanto, alguns entraves como ̧7HOD VHQV¯YHO DR WRTXH

24

interferência em aparelhos de TV, alto preço e a não conformidade com D )HGHUDO &RPPXQLFDWLRQV &RPPLVVLRQ R OHYRX D Q¼R GHFRODU FRPR perifÊrico de interação.

Dynabook de 1968.

Apenas cinco anos depois e a um preço muito mais acessível chegou ao mercado o KoalaPad que permitiu ao seus usuårios criarem desenhos em seus computadores pessoais utilizando a caneta Stylus13 ou os próprios GHGRV &RP H[FHŠ¼R DR '\QDERRN R IRFR GH XVR GRV WDEOHWV IRL VHPSUH voltado ao auxilio na forma de perifÊrico e não como uma ferramenta única. )RL FRP HVVH SURS¾VLWR TXH HP VXUJLX R *5L'SDG FRP VLVWHPD RSHUDFLRQDO 06 '26 WHOD GH SROHJDGDV DXVQFLD GH WHFODGR I¯VLFR H tela sensível 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 interação. ̧3HULIULFR HP IRUPD GH FDQHWD XVDGD HP DSDUHOKRV HOHWUœQLFRV FRP WHOD VHQV¯YHO DR WRTXH

25

2XWUR FRQFHLWR HP HYLGQFLD DWXDOPHQWH  D MXQŠ¼R GH WDEOHW H WHFODGR fazendo com que se assemelhem a laptops, mas com a vantagem de a tela sensível ao toque poder ser removida e utilizada separadamente. Mas HVWH WLSR GH DSDUHOKR VXUJLX HP FRP R QRPH GH &RPSDT &RQFHUWR RQGH WRGR R KDUGZDUH HUD SRVLFLRQDGR DWU£V GD WHOD VHQGR SRVV¯YHO R desencaixe do suporte com teclado físico.

*5L'SDG GH

Aproveitando a tecnologia atÊ então esquecida de seu tablet da dÊcada de D $SSOH VH DYHQWXURX QRYDPHQWH FRP XP QRYR GLVSRVLWLYR TXH GHͤQLX R SDGU¼R GRV 3'$̾V FRP R $SSOH 1HZWRQ XP DSDUHOKR TXH SHUPLWLD D VHXV XVX£ULRV DGLFLRQDU LQIRUPDŠ¡HV GH FRQWDWR H DQRWDŠ¡HV FRP VXD SU¾SULD escrita. Infelizmente, a tecnologia ainda não era exemplar, oferecendo PDWHULDO SDUD FDUWXQLVWDV ]RPEDUHP GH VHX XVR H IXQŠ¡HV FRP LVVR R SURGXWR IRL GHVFRQWLQXDGR HP $LQGD HP D ,%0 GHFLGLX MXQWDU o conceito de PDA à telefonia, alÊm disso ainda foi adicionado uma tela touchscreen, criando assim o Simon. Este, que Ê considerado o primeiro 26

DSDUHOKR VPDUWSKRQH SRVVX¯D IXQŠ¡HV FRPR HQYLR GH H PDLO FRQWDWRV SHVTXLV£YHLV DJHQGD GH HYHQWRV H ID]LD OLJDŠ¡HV PDV VHX DOWR SUHŠR IH] FRP TXH Q¼R GXUDVVH PXLWR QR PHUFDGR 2EVHUYDQGR DV IDOKDV GR $SSOH 1HZWRQ H HQWHQGHQGR TXH D GHPDQGD FUHVFHQWH SRU ODSWRSV VLJQLͤFDYD que as pessoas estavam mais receptivas a possuir um dispositivo móvel, a empresa Palm lançou em 1996 o PDA Palm Pilot 1000, sendo tambÊm XP DSDUHOKR PHQRU H PDLV EDUDWR TXH R 1HZWRQ 6HJXQGR 5RE /DPPOH TXH HVFUHYH SDUD R VLWH GH WHFQRORJLD 0DVKDEOH WDOYH] KRMH HP GLD Q¼R tivÊssemos o iPad, caso Bill Gates não tivesse lançado uma versão para WDEOHWV GR :LQGRZV ;3 HP

:LQGRZV ;3 7DEOHW (GLWLRQ GH

Ver a empresa referĂŞncia em sistemas da ĂŠpoca criar algo para um mercado que parecia morto, foi o estimulo necessĂĄrio para gerar melhorias nas 27

tecnologias móveis. Todos esses avanços mostram que o caminho para o mercado atual passou por diversas etapas, assim como o próprio conceito de móvel, para que tanto a indústria quanto os usuårios convergissem em XP SRQWR LGHDO IDWR TXH RFRUUHX QR DQR GH $V OLŠ¡HV DSUHQGLGDV FRP RV SUREOHPDV GH VHX 3'$ 1HZWRQ WDQWR HP KDUGZDUH TXDQWR HP VRIWZDUH QD GFDGD GH VHUYLUDP GH EDVH SDUD D HPSUHVD FRQKHFHU o comportamento e necessidades de seus consumidores. Em meio ao sucesso do iPhone, e com a abertura de sua plataforma de desenvolvimento H FULDŠ¼R GH DSOLFDWLYRV TXHEUDQGR UHFRUGHV GH SURGXŠ¼R H GRZQORDG D Apple lançou a primeira geração de seu tablet iPad.

iPad da primeira geração lançado em 2010.

28

Objetivos

2 REMHWLYR GHVWH WUDEDOKR  UHGHVHQKDU D PDQHLUD FRPR LQWHUDJLPRV FRP R WHPSR DR UHDOL]DU XPD WDUHID ,VWR  SRVV¯YHO SRLV RV FDOHQG£ULRV FRGLͤFDP o tempo em dias, semanas, meses e anos, nos posicionando a entender TXH HVWHV HVSDŠRV SRGHP VHU SUHHQFKLGRV H TXDQWR PDLV HͤFLHQWHPHQWH este tempo for preenchido, maior serå a satisfação do usuårio. Para tal tarefa serå desenhada uma aplicação para o tablet iPad da Apple, visando seguir as boas pråticas de design de interface e usabilidade, para assim proporcionar uma boa experiência no consumo de seu conteúdo que Ê composto por um serviço de transmissão de vídeo, mais precisamente de sÊries. Neste caso estas não serão denominadas como sÊries de TV, SRLV DWXDOPHQWH DOJXQV FRQWHŸGRV M£ V¼R SURGX]LGRV H[FOXVLYDPHQWH SDUD serviços de streaming de vídeo online.

A escolha de um aplicativo para iPad como proposta Ê embasada por XPD PDWULD SXEOLFDGD QR MRUQDO 2 (VWDGR GH 6¼R 3DXOR14. Segundo ela, lançamentos de aplicativos seguem um ritmo vertiginoso, mas isto não VLJQLͤFD TXH WXGR R TXH  ODQŠDGR ID] VXFHVVR 3DUD PXLWRV TXH DFKDP que Ê uma fåbrica de dinheiro, esbarra-se no fato de que, segundo Wilson Barab Filho, somente fazer o aplicativo não Ê a solução, Ê preciso criar serviços que agreguem valor. Alguns dados mostram o tamanho atual deste PHUFDGR HP UHODŠ¼R D R PHUFDGR GH VPDUWSKRQHV WHYH FUHVFLPHQWR GH VHJXQGR D FRQVXOWRULD ,'& M£ QRV WDEOHWV R FUHVFLPHQWR IRL DLQGD maior, totalizando um aumento de 200% tambÊm em relação a 2010.

Stream foi o nome adotado para o serviço, não só por remeter ao termo streaming15, amplamente utilizado para descrever o consumo online de Y¯GHRV PDV WDPEP SRU VHX VLJQLͤFDGR QR FDPSR GD FRPSXWDŠ¼R TXH SRGH VHU GHͤQLGR FRPR XP IOX[R GH GDGRV HP XP VLVWHPD FRPSXWDFLRQDO ̧0DWULD SXEOLFDGD QR VLWH (VWDG¼R 30( HP GH MXOKR GH ̧7UDQVPLVV¼R GH GDGRV QD IRUPD GH £XGLR H Y¯GHR RQGH VXD UHSURGXŠ¼R  LQLFLDGD PHVPR TXH VHX GRZQORDG DLQGD Q¼R HVWHMD ͤQDOL]DGR

31

2X PDLV SUHFLVDPHQWH  TXDQGR RV GDGRV GH XP DUTXLYR V¼R DEHUWRV H ͤFDP DJDUUDGRV ¢ PHP¾ULD SHUPLWLQGR DOWHUDŠ¡HV H TXDQGR HVWH DUTXLYR  fechado não mais Ê permitido, o que garante a integridade do mesmo. Esta HVFROKD YLVD GDU XP VLJQLͤFDGR DR PHVPR WHPSR GH XP FRQWHŸGR ¯QWHJUR e disponível. A idÊia por trås do Stream estå no fato de que cada pessoa tem suas preferências, e quando o assunto Ê mídia, mais precisamente WHOHYLVLYD RX GH LQWHUQHW HVWH FRQFHLWR  PDQWLGR &RP R 6WUHDP  SRVV¯YHO criar listas de reprodução com as sÊries que mais gosta, Ê como ter o seu próprio canal de TV, com a vantagem de poder escolher a hora, local e conteúdo a ser assistido, e ainda poder compartilhar com outros usuårios. É uma maneira pessoal e agradåvel de interagir com o tempo, o usuårio não o desperdiça com a tarefa que precede o entretenimento, o próprio ato GH HVFROKD H PRQWDJHP GD SURJUDPDŠ¼R M£ ID] SDUWH GD H[SHULQFLD FRPR um todo.

32

%ULHͤQJ

A maneira usada para explicar o que seria o problema foi feita em forma GH EULHͤQJ 0HVPR TXH ͤFW¯FLR HOH UHŸQH LPSRUWDQWHV DVSHFWRV GH GHVLJQ e tecnologia, que tendem a crescer tanto em quantidade quanto em importância, e são mesclados entre necessidades do serviço e do design.

2V LWHQV D VHJXLU IRUDP FRQVLGHUDGRV SRU H[LJLUHP FRQKHFLPHQWR GH WRGR R SURFHVVR GH HODERUDŠ¼R SDUD XP SURMHWR GH LQWHUIDFH P¾YHO HVWHV GDGRV foram obtidos a partir de pesquisas na årea de comentårios da Apple Store, onde os usuårios avaliam uma aplicação indicando seus pontos fortes e fracos. Este levantamento foi feito visando evitar que os mesmos SUREOHPDV RFRUUDP FRP R 6WUHDP V¼R HOHV ̽ &ULDU XPD LQWHUIDFH UHVSRQVLYD H FRQVLVWHQWH LQGHSHQGHQWH GD RULHQWDŠ¼R GR DSDUHOKR ̽ /D\RXW PLQLPDOLVWD DOLQKDGR ¢ LGHQWLGDGH GD PDUFD ̽ 'HVHQKDU IOX[RV VLPSOLͤFDGRV GH WDUHIDV ̽ %DODQFHDU D SHUIRUPDQFH HP GHWULPHQWR GD ERD H[SHULQFLD GR XVX£ULR ̽ 'HPRQVWUDU GH IRUPD HͤFLHQWH WRGD D ELEOLRWHFD GH P¯GLD ̽ &DSWDU LQIRUPDŠ¡HV D UHVSHLWR GR FRQVXPR H FRPSRUWDPHQWR GR XVX£ULR YLVDQGR SURGXŠ¼R GH FRQWHŸGR SU¾SULR ̽ 2IHUHFHU DV GLYHUVDV RSŠ¡HV GH £XGLR H OHJHQGDV TXDQGR VROLFLWDGRV ̽ &RQVLGHUDU TXH DOJXPDV VULHV M£ HVW¼R FRPSOHWDV H RXWUDV UHFHEHP QRYDV LQVHUŠ¡HV VHPDQDLV ̽ 3HUPLWLU DR XVX£ULR D FULDŠ¼R GH OLVWDV GH UHSURGXŠ¼R H FRPSDUWLOKDPHQWR GDV PHVPDV HQWUH XVX£ULRV GR VHUYLŠR ̽ 3HUPLWLU R FRPSDUWLOKDPHQWR GH LPDJHQV GRV HSLV¾GLRV HP P¯GLDV VRFLDLV ̽ 3HUPLWLU D LQWHUDŠ¼R HQWUH XVX£ULRV GHQWUR GR VHUYLŠR 35

2V LWHQV PHQFLRQDGRV V¼R SDUD DWUDLU DR VHUYLŠR XP XVX£ULR FDQVDGR GH VHU escravo de horårios, aos quais os canais de TV o submetem. Este usuårio estå optando pelo aplicativo, pois encontra os seguintes problemas na SURJUDPDŠ¼R GD 79 FRQYHQFLRQDO ̽ 2V KRU£ULRV GDV VULHV PXGDP FRQVWDQWHPHQWH ̽ 2V KRU£ULRV V¼R ͤ[RV H K£ SRXFRV UHSULVHV GLͤFXOWDQGR R DFRPSDQKDPHQWR ̽ 3RXFDV RSHUDGRUDV GH 79 RIHUHFHP UHFXUVRV GH JUDYDŠ¼R DR XVX£ULR ̽ $ FRQWLQXLGDGH RX ͤP GH XPD VULH GHSHQGHP GD DXGLQFLD H HVWD medição normalmente não Ê feita com êxito na TV comum.

Do ponto de vista do design, esta proposta demonstra ser uma oportunidade GH GHVHQYROYHU XP SURMHWR YLVDQGR DV ERDV SU£WLFDV GR GHVLJQ GH LQWHUIDFH MXQWDPHQWH FRP DV IXQŠ¡HV TXH DV WHFQRORJLDV P¾YHLV SURSRUFLRQDP tendo como foco a experiência do usuårio em obter êxito em sua tarefa, fornecendo a ele uma ferramenta que trarå a sensação de controlar com mais precisão seu tempo dedicado ao entretenimento.

36

ReferĂŞncias Projetuais

Apesar de ser um mercado novo, os serviços de streaming de vídeo online são disponibilizados por um número relativamente grande de serviços FRPR 1RZ79 1HWIOL[ +XOX 3OXV 0\79 $PD]RQ ,QVWDQW 9LGHR HQWUH RXWURV (P XPD GHVFULŠ¼R PDLV HVSHF¯ͤFD V¼R VHUYLŠRV GHQRPLQDGRV 27716, que Ê o nome dado à distribuição de conteúdo audiovisual atravÊs de plataformas IP17. Sua popularização estå ligada às altas velocidades de internet disponíveis e a algoritmos que fazem com que vídeos de alta TXDOLGDGH VHMDP FRPSULPLGRV H GLVSRQLELOL]DGRV FRP PDLV YHORFLGDGH $V UHIHUQFLDV SDUD HVWH SURMHWR VH EDVHLDP QDV DSOLFDŠ¡HV SDUD L3DG GH GRLV GHVVHV VHUYLŠRV V¼R HODV 1HWIOL[ H +XOX 3OXV (VWD UHVWULŠ¼R VH HQFRQWUD no fato de que estas duas empresas vêm competindo pela liderança no PHUFDGR H VH PRVWUDP PXLWR HͤFLHQWHV HP RIHUHFHU WRGD VXD ELEOLRWHFD de conteúdo.

2 1HWIOL[ FRPHŠRX HP FRPR XPD HPSUHVD TXH GLVSRQLELOL]DYD XPD DVVLQDWXUD HP TXH R XVX£ULR DOXJDYD '9'̾V H RV UHFHELD HP FDVD 6HX serviço de streaming se popularizou tanto que a empresa abandonou o HPSUVWLPR GH '9'̾V 6HX FUHVFLPHQWR  FRQVLGHUDGR R UHVSRQV£YHO SHOD TXHEUD GD JLJDQWH %ORFNEXVWHU H VXDV ORMDV GH ORFDŠ¼R GH ͤOPHV que, mesmo com claros sinais de que este modelo não seria sustentåvel, LQVLVWLX HP PDQW OR 2 +XOX 3OXV  D YHUV¼R SDJD GR +XOX R VHUYLŠR TXH H[LJH DVVLQDWXUD H SRVVXL FHUFD GH PLOK¡HV GH XVX£ULRV18. Seu apelo estå no fato de seus contratos, com emissoras como Fox, permitirem que as sÊries cheguem primeiro ao seu serviço do que em seu principal rival, o Netflix. Ao contrårio de seu concorrente que inicia uma expansão mundial, H K£ FHUFD GH XP DQR LQFOXLX R %UDVLO R +XOX HVW£ GLVSRQ¯YHO DSHQDV HP poucos países alÊm dos Estados Unidos. A anålise leva em consideração DVSHFWRV YLVXDLV H LQWHUDŠ¡HV H HP VXDV UHFHQWHV DWXDOL]DŠ¡HV IRUDP ̧$EUHYLDŠ¼R GR WHUPR HP LQJOV 2YHU WKH 7RS &RQWHQW ̧‹ XP QŸPHUR SDUD LGHQWLͤFDŠ¼R GH XP GLVSRVLWLYR HP XPD UHGH ̧6HJXQGR LQIRUPDŠ¼R SXEOLFDGD QR EORJ GD HP HPSUHVD HP GH 'H]HPEUR GH

39

adicionadas funcionalidades que vão alÊm do simples consumo de mídia no aparelho. Agora tambÊm Ê possível controlar pelo dispositivo móvel DV YHUV¡HV GD DSOLFDŠ¼R SDUD 6PDUW 79̾V H FRQVROHV GH YLGHRJDPH $ DQ£OLVH IRL GLYLGLGD HP FDWHJRULDV RQGH DV DSOLFDŠ¡HV V¼R FRPSDUDGDV H os principais destaques quanto a interação são avaliados.

Abertura

Telas de abertura semelhantes, a velocidade no carregamento só Ê SUHMXGLFDGD FDVR R XVX£ULR HVWHMD XVDQGR XP VHUYLŠR GH LQWHUQHW * FDVR contrårio, seu carregamento Ê råpido. Em uma primeira utilização são VROLFLWDGRV RV GDGRV GH ORJLQ H VHQKD RX GH FDGDVWUR FDVR R XVX£ULR M£ VHMD DVVLQDQWH GR VHUYLŠR $PERV WDPEP SRVVXHP RWLPL]DŠ¼R SDUD R uso com o aparelho tanto na horizontal quanto na vertical, redistribuindo adequadamente seu conteúdo.

40

PĂĄgina principal

$ S£JLQD SULQFLSDO GD DSOLFDŠ¼R VHJXH GLIHUHQWHV REMHWLYRV 2 +XOX G£ destaque às novidades em sua biblioteca de mídia, enquanto o Netflix foca QD FRQWLQXLGDGH GHVWDFDQGR R FRQWHŸGR M£ LQLFLDGR SHOR XVX£ULR H HP TXH SRQWR HOH SDURX $PEDV DV RSŠ¡HV VH XWLOL]DP GR KLVW¾ULFR GH FRQVXPR GR usuårio para sugerir itens semelhantes.

Navegação

Ao acessar o conteúdo referente às sÊries, o usuårio Ê direcionado à uma S£JLQD H[FOXVLYD GHVWDV 1HVWH FDVR R +XOX VH XWLOL]D GH XPD JUDQGH quantidade de elementos visuais para indicar ao usuårio o conteúdo de FDGD HSLV¾GLR HP TXHVW¼R (P FRQWUDSDUWLGD R 1HWIOL[ IRFD QDV LQIRUPDŠ¡HV 41

como se o episódio foi ou não assistido, e caso tenha sido iniciado, em que momento o usuário parou, podendo assim continuar a reprodução do mesmo ponto.

Player

$PEDV DV DSOLFD©·HV FXPSUHP RV HOHPHQWRV QHFHVV£ULRV GH UHSURGX©¥R de vídeo, oferecendo os itens básicos como mudança de idioma, legenda e WUHFKR GR Y¯GHR 2 GLIHUHQFLDO HVW£ HP TXH R 1HWIOL[ RIHUHFH D SRVVLELOLGDGH de navegar entre outros episódios de uma mesma série, sem a necessidade de sair da reprodução atual de vídeo e ter que voltar a tela anterior de seleção de episódios.

Após analisar estes pontos principais, pode-se notar que a aplicação SURSRVWD SRGH RIHUHFHU PDLV LQWHUD©·HV TXH VHXV SULQFLSDLV FRQFRUUHQWHV Nenhum deles, por exemplo, permite criar uma lista de reprodução com conteúdo de diferentes séries, e também não permitem o compartilhamento de trechos do que está sendo assistido no momento.

42

Metodologia para Dispositivos M贸veis

(P VHLV DQRV GH SURͤVV¼R DFRPSDQKHL GH SHUWR D YHORFLGDGH GDV mudanças no que se diz respeito à tecnologia. Nos últimos três anos, este contato cresceu ainda mais, pois passei a trabalhar em uma empresa que GHVHQYROYH VRIWZDUHV SDUD GLYHUVDV SODWDIRUPDV (VWH WUDEDOKR DSUR[LPRX PH GH H[SHULHQWHV SURͤVVLRQDLV GDV £UHDV GH SURJUDPDŠ¼R DUTXLWHWXUD GH LQIRUPDŠ¼R JHUQFLD GH SURMHWR H LQRYDŠ¼R 2V SULPHLURV SDVVRV GR SURMHWR HP VL IRUDP GDGRV FRP D HVFULWD GH XP WH[WR QR ͤP GH 1HOH GHVFUHYL PLQKDV REVHUYDŠ¡HV VREUH D WHQGQFLD das pessoas optarem por acessar o aplicativo de algum serviço, ao invÊs de navegar na internet para o site do mesmo, o que aparentemente mostrava que, por mais que o dispositivo móvel possibilite o uso de diversas ferramentas simultaneamente, as pessoas preferiam acessar uma por vez, segmentando suas tarefas e necessidades em pequenos ícones na tela.

5DVFXQKR TXH GHX RULJHP DR WHPD HVFROKLGR

2 TXH DLQGD IDOWDYD HUD XPD IRUPD GH ID]HU D MXQŠ¼R GHVWH FRPSRUWDPHQWR em relação a tecnologia móvel com o design, a descoberta foi feita após a 45

OHLWXUD GH XP DUWLJR QR EORJ GD DJQFLD ' FOLFN QR TXDO (GXDUGR +RUYDWK explica o conceito de experiência do usuårio, sua abrangência e como o usuårio Ê afetado pelo uso dos aplicativos. Para completar, veio o interesse SRU FRPR HVWDV DSOLFDŠ¡HV HUDP IHLWDV SDUHFLD FXULRVR FRPR SHTXHQRV VLVWHPDV PXLWDV YH]HV FRP DSHQDV DOJXPDV SRXFDV WHODV H LQWHUDŠ¡HV HUDP FDSD]HV GH GHVSHUWDU WDQWD DGPLUDŠ¼R (VWH FRQMXQWR GH IDWRUHV levaram à escolha do tema deste trabalho de conclusão.

Artigo que apontou a direção do tema alÊm do design visual.

1¼R PHQRV LPSRUWDQWH IRL D EXVFD SRU RXWURV SURͤVVLRQDLV GD £UHD R TXH OHYRX D SDUWLFLSDŠ¼R QRV HQFRQWURV GR 8; %RRN &OXE XPD FRPXQLGDGH internacional que atravÊs da leitura e discussão em grupo de livros VREUH 8VHU ([SHULHQFH WHP FRPR REMHWLYR GHVHQYROYHU DV KDELOLGDGHV e conhecimentos nas åreas de Design de Interação, Arquitetos de ,QIRUPDŠ¼R H 'HVLJQ GH ,QWHUIDFH $OP GH LPSRUWDQWHV REVHUYDŠ¡HV IHLWDV GXUDQWH SDUWLFLSDŠ¡HV QRV HYHQWRV ,QWHUDFWLRQ 6RXWK $PHULFD UHDOL]DGR HP %HOR +RUL]RQWH VREUH GHVLJQ GH LQWHUDŠ¼R H QR :RUOG Information Architecture Day 2012, realizado em São Paulo e mais catorze cidades simultaneamente, para discutir sobre estudos relacionados à arquitetura de informação.

46

$LQGD QD SULPHLUD HWDSD R WHPD HVFROKLGR SDUD R 7*, IRL R SODQHMDPHQWR e desenvolvimento de uma aplicação para o tablet iPad da Apple, que se encaixa em uma categoria denominada como de referência. A proposta GR SURMHWR IRL GH RWLPL]DU R DFHVVR GH DOXQRV GH JUDGXDŠ¼R D LQIRUPDŠ¡HV UHOHYDQWHV SDUD VHXV HVWXGRV %RD SDUWH GD ELEOLRJUDͤD GR SURMHWR IRL GHͤQLGD QHVWD SULPHLUD HWDSD DXWRUHV DQWLJRV H FRQWHPSRU¤QHRV IRUDP descobertos e a ligação entre a leitura de suas obras abriu caminho para a consistência do tema.

Volume impresso do TGI1.

Utilizar os dispositivos móveis como base, demonstrou que a união do GHVLJQ FRP D WHFQRORJLD Q¼R VLJQLͤFD VH SUHQGHU DSHQDV D FRPSXWDŠ¼R pelo contrårio, este pode ser um ambiente harmonioso entre pessoas e sistemas. Esta ligação Ê feita atravÊs da interface, que une os dois PXQGRV H G£ YLGD ¢V WHODV H VXDV LQWHUDŠ¡HV $S¾V D DSUHVHQWDŠ¼R R TXH 47

HUD XP WHPD DIXQLODGR D XP REMHWLYR VH DEULX QRYDPHQWH SRVVLELOLWDQGR D LQFOXV¼R GH QRYRV FRQWHŸGRV UHIOH[¡HV H WHVWHV 0HVPR FRP XP QRYR WHPD DGRWDGR R REMHWLYR IRL PDQWLGR GHVHQKDU XPD LQWHUIDFH TXH Q¼R V¾ DSURYHLWH D FDSDFLGDGH GRV GLVSRVLWLYRV P¾YHLV PDV TXH WDPEP VHMD capaz de demonstrar como o design se molda e se comporta neste tipo de GLVSRVLWLYR &RPR SULQFLSDO OLŠ¼R HVW£ R IDWR GH TXH R SURMHWR HP VL  XPD descoberta, uma curva de aprendizado que vai evoluindo a medida que o FURQRJUDPD FKHJD DR ͤP H TXH D EDJDJHP DGTXLULGD GXUDQWH R SURFHVVR SDVVDU£ D VHUYLU GH EDVH SDUD RV SURMHWRV IXWXURV A mudança de proposta para o TGI2 se deu pela possibilidade de criar uma IHUUDPHQWD TXH FKHJDVVH D XPD IDVH IXQFLRQDO 2 REMHWLYR HUD HQFXUWDU R WHPSR H HVIRUŠR QHFHVV£ULRV SDUD VH REWHU LQIRUPDŠ¡HV VREUH ORFDLV GH descarte de materiais eletrônicos, atravÊs de um aplicativo móvel para WDEOHW (PERUD R SURMHWR WHQKD VLGR DEDQGRQDGR FRPR SURSRVWD GH SURMHWR de conclusão, ele continua sendo desenvolvido paralelamente e sua fase de testes online se inicia no segundo semestre de 2013. Seu andamento proporcionou grande enriquecimento de informação quanto ao processo GH FRQFHSŠ¼R H GHVHQYROYLPHQWR GH XPD DSOLFDŠ¼R 1HVWH SURMHWR IRL possível colocar em pråtica alguns modelos teóricos de desenvolvimento para temas como prototipagem, arquitetura de informação, design de interação e experiência do usuårio.

48

Prototipagem da primeira proposta de TGI2.

2 WHPD IRL DOWHUDGR GHYLGR DR DSUHQGL]DGR REWLGR FRP R GHVHQYROYLPHQWR QR GHFRUUHU GR SURMHWR $R DERUGDU GH PDQHLUD SU£WLFD D GLPHQV¼R GDV TXHVW¡HV TXH HQYROYHP D H[SHULQFLD GR XVX£ULR R WHPD VH PRVWURX muito maior do que parecia. Minha interpretação do termo se tornou mais completa e melhor compreendida com a descoberta do diagrama As disciplinas de User Experience Design, de Dan Saffer que tambÊm Ê o autor GH 'HVLJQLQJ *HVWXUDO ,QWHUIDFHV (OH H[SORUD DWUDYV GH VREUHSRVLŠ¡HV as diversas åreas que se relacionam e que interagem diretamente e indiretamente com o usuårio.

49

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

&RP HVWD YLVXDOL]DŠ¼R HP P¼RV R SURMHWR IRL UHSHQVDGR H GLUHFLRQDGR para a årea em que a ação propriamente dita ocorre, onde as interação são IHLWDV H R XVX£ULR IRFD VXD DWHQŠ¼R D LQWHUIDFH 6HQGR DVVLP R WUDEDOKR foi renomeado para Design de Interface em Dispositivos Móveis, e seu REMHWLYR WUDŠDGR DR HQWHQGLPHQWR GD LPSRUW¤QFLD GR GHVLJQ GH LQWHUIDFH neste relacionamento da aplicação com o usuårio.

Para reforçar a tarefa de desenvolver uma pesquisa voltada à experiência GR XVX£ULR HP GLVSRVLWLYRV P¾YHLV ERD SDUWH GHVWH SURMHWR IRL IHLWD QHVWH tipo de aparelho. AlÊm disso, esta atitude proporcionou a concentração de material em um único dispositivo, sem a necessidade de se carregar uma sÊrie de elementos como computador, cadernos e livros. Estas 50

DSOLFDŠ¡HV GH L3DG FREULUDP QHFHVVLGDGHV FRPR JHUHQFLDPHQWR GH tarefas, edição de texto e imagens, reprodução de vídeos, entre outros, e IRUDP SURSRUFLRQDGDV SHORV VHJXLQWHV DSOLFDWLYRV HVSHFLͤFDPHQWH

Evernote $V DQRWDŠ¡HV V¼R GH VXPD LPSRUW¤QFLD SDUD XPD SHVTXLVD PDV D GLͤFXOGDGH GH PDQXWHQŠ¼R H D ORFDOL]DŠ¼R GH XPD LQIRUPDŠ¼R HP PHLR D XPD SLOKD GH SDSLV ID] FRP TXH R WHPSR VHMD GHVSHUGLŠDGR (VWH DSOLFDWLYR IXQFLRQD FRPR VH IRVVH XP EORFR GH DQRWDŠ¡HV HP TXH SRGHP VHU LQVHULGRV WH[WRV IRWRV WLUDGDV SHOR SU¾SULR L3DG JUDYDŠ¡HV GH £XGLR H FDSWXUD GH DUWLJRV GD LQWHUQHW &RQIRUPH R QŸPHUR GH DQRWDŠ¡HV YDL crescendo, pode-se pesquisar facilmente seu conteúdo atravÊs de palavras FKDYH PHVPR TXH HVWDV HVWHMDP HP XPD LPDJHP H Q¼R HP WH[WR HGLW£YHO DOP GLVVR WRGDV DV DQRWDŠ¡HV ͤFDP GLVSRQ¯YHLV SDUD VHUHP DFHVVDGDV de qualquer local, via internet.

Tela principal do aplicativo Evernote.

51

Google Drive 7RGRV RV DUTXLYRV UHODFLRQDGRV DR SURMHWR IRUDP PDQWLGRV HP XPD SDVWD de um sistema chamado Google Drive. Esta ferramenta disponibiliza o conteúdo de uma pasta no computador para acesso de qualquer local, via internet. Ao utilizar seu aplicativo para iPad, foi possível acessar e editar os documentos diretamente do próprio tablet, e eles automaticamente se encontravam atualizados quando acessados de qualquer computador posteriormente. Sua navegação Ê semelhante a uma pasta no computador, FRP D YDQWDJHP GDV LQWHUDŠ¡HV WRXFK SDUD DPSOLDU LPDJHQV DUUDVWDU elementos e da função de compartilhamento com outros usuårios, para conferência e edição por parte dos mesmos.

Listagem do conteĂşdo de uma pasta no Google Drive.

iBooks Todo o conteĂşdo que necessitava de consulta com relativa periodicidade foi convertido em PDF e adicionado ao iBooks. Desta forma, todos os 52

manuais, apostilas e livros podiam ser acessados a qualquer momento, com possibilidade de pesquisa e de marcação das principais påginas.

&RQWUROHV GH QDYHJDŠ¼R H PDUFDŠ¡HV GH S£JLQD GH XP 3') QR L%RRNV

iPad Vídeos As vídeo-aulas na internet são uma ótima opção para complementar o aprendizado, mas seu acesso com a internet móvel de maior velocidade disponível no Brasil, que Ê o 3G, ainda exige certa paciência para aguardar R GRZQORDG GH FRQWHŸGR 'HVWD IRUPD R FRQWHŸGR IRL SUHYLDPHQWH EDL[DGR da internet e adicionado ao tablet, e a visualização desta aulas foi feita SRVWHULRUPHQWH FRP R FRQWUROH GH TXDLV Y¯GHRV M£ KDYLDP VLGR DVVLVWLGRV

53

&RQWUROHV GH UHSURGXŠ¼R GH Y¯GHR GR DSOLDWLYR

Paper Este aplicativo Ê uma ferramenta para desenho, demonstrou ser uma ferramenta råpida para esboçar esquemas e diagramas durante SDUWLFLSDŠ¼R HP HYHQWRV H GXUDQWH OHLWXUDV 2XWUR SRQWR LPSRUWDQWH HVW£ QR IDWR GH TXH DS¾V ͤQDOL]DGD D LPDJHP M£ SRGLD VHU DGLFLRQDGD D XP documento de texto, ou a um layout sendo diagramado, e os desenhos pode ser compartilhados em redes sociais.

Ação de retroceder.

54

Seu uso explora diferentes conceitos de usabilidade touch, quando comparado com outros aplicativos da mesma categoria, por exemplo, a função de reverter uma ação não exige acesso ao menu ou a qualquer outra tela que sobreponha o desenho. Para ser utilizada, basta usar dois GHGRV JLUDQGR HP VHQWLGR DQWL KRU£ULR VREUH D WHOD DW R SRQWR TXH GHVHMD voltar.

Navegação entre påginas, simulando a paginação de um caderno.

Photoshop Express Tanto os rascunhos desenhados no aplicativo Paper, quanto as fotos tiradas com o próprio iPad e as imagens tiradas da internet, ås vezes precisam ser editadas para se adequar a pesquisa. Para adiantar o trabalho de edição TXH VHULD UHDOL]DGR SRVWHULRUPHQWH HVWD WDUHID M£  UHDOL]DGD QR WDEOHW

55

Ambiente de edição de imagens.

Wunderlist 6HJXLU XP FURQRJUDPD SDUD HODERUDŠ¼R GH XP SURMHWR  LPSRUWDQWH PDV D UHSHWLGD FRQVXOWD GR PHVPR DͤP GH ORFDOL]DU R TXH M£ IRL FRQFOX¯GR RX DV SHQGQFLDV TXH UHVWDP SRGH Q¼R VHU PXLWR SU£WLFR &RP R XVR deste aplicativo, o cronograma pode ser seguido facilmente, alÊm de ser FRQVWDQWHPHQWH OHPEUDGR FDVR DOJXPD WDUHID HVWHMD SHQGHQWH H VXD GDWD M£ WHQKD SDVVDGR GR OLPLWH HVWLSXODGR $VVLP FRPR R (YHUQRWH H R Google Drive, as tarefas podem ser acessadas via internet de qualquer dispositivo móvel ou computador, seu design de interface Ê simples e de fåcil manuseio, os itens podem ser reordenados apenas com um toque e DUUDVWDQGR SDUD D SRVLŠ¼R GHVHMDGD

56

Lista de tarefas a serem cumpridas.

2 XVR GHVWDV IHUUDPHQWDV  DSHQDV FRPSOHPHQWDU R GHVHQYROYLPHQWR GH um mÊtodo de trabalho sólido, e deve ser aprimorado e estudado. Bruno Munari19 S GHVFUHYH R PWRGR GH SURMHWR FRPR XPD VULH GH RSHUDŠ¡HV QHFHVV£ULDV HP XPD RUGHP FRHUHQWH H GLWDGD SHOD H[SHULQFLD (VWH ŸOWLPR LWHP  R TXH PHOKRU GHVFUHYH HVWD HWDSD +£ GRLV DQRV TXDQGR iniciei os estudos sobre dispositivos móveis, o mercado dava sinais de FUHVFLPHQWR FRP SUHYLV¡HV DOW¯VVLPDV GH YHQGDV WDQWR GH DSOLFDWLYRV quanto de aparelhos que os suportam. Mas as promessas vinham DFRPSDQKDGDV SRU XP FHQ£ULR GH HVFDVVH] GH SURͤVVLRQDLV H GH PWRGRV GH SURMHWR GRV PHVPRV HP PHLR D EXVFD SRU FRQWHŸGR TXH PH RULHQWDVVH D FRQGX]LU R SURMHWR QRWHL XP FHQ£ULR VHPHOKDQWH HP TXH 0XQDUL S

ID] XPD FRPSDUDŠ¼R FRP RV OLYURV GH FXOLQ£ULD QRV TXDLV DV LQGLFDŠ¡HV são resumidas quando se destinam a pessoas mais experientes. A maior parte da informação disponível era de como desenvolver uma aplicação, em seu sentido mais literal, o de programação. Sequências extremamente ̧081$5, %UXQR 'DV FRLVDV QDVFHP DV FRLVDV 6¼R 3DXOR 0DUWLQV )RQWHV

57

lógicas e bem elaboradas de como fazer determinado tipo de código, não que esta não fosse uma informação importante, mas não era nem de perto o que eu estava procurando.

Munari (2008, p. 13) cita que, algumas pessoas sentem a criatividade EORTXHDGD DR WHUHP TXH REVHUYDU UHJUDV SDUD ID]HU XP SURMHWR PDV HVWDV regras se mostraram ferramentas e não limitadores. Este mÊtodo não precisa ser necessariamente seguido a risca, ele se incorpora ao mÊtodo de trabalho de cada um, trazendo agilidade, ou como o próprio autor descreve FRPR DWLQJLU R REMHWLYR FRP R PHQRU HVIRUŠR $ VHJXLU VHU£ DSUHVHQWDGR R PWRGR TXH WRPRX IRUPD QR GHFRUUHU GR SURMHWR HVWLPXODGR SHOD OHLWXUD de obras de Munari, e de artigos em diversos sites de tecnologia e de design que descrevem mÊtodos e etapas importantes para este processo de desenvolvimento. Destes sites nem tudo foi aproveitado, pois as etapas eram muito breves em sua descrição, cabendo a mim ao executå-las FRPSOHPHQWDU DV LQIRUPDŠ¡HV WH[WXDLV H GH GRFXPHQWDŠ¼R D UHVSHLWR GD mesma.

6HTXQFLD GH HWDSDV TXH FRPS¡HP D PHWRGRORJLD

&DGD HWDSD VHU£ DERUGDGD VHSDUDGDPHQWH H R FRQWHŸGR  FRPSRVWR SHOD GRFXPHQWDŠ¼R SURGX]LGD GXUDQWH R SURMHWR H SHOD OHLWXUD GH ELEOLRJUDͤDV FRPSOHPHQWDUHV (VWD VHSDUDŠ¼R IRL GHͤQLGD SRU VHU DV GHOLPLWDŠ¡HV H[DWDV GDV HWDSDV GLͤFLOPHQWH HOD SRGHU£ VHU H[HFXWDGD VHP D FRQFOXV¼R da anterior.

58

Conceito

2 WHUPR FRQFHLWR  XWLOL]DGR SDUD GHͤQLU D MXQŠ¼R GH HOHPHQWRV TXH FDUDFWHUL]DP R SURMHWR V¼R FRPSRQHQWHV TXH MXQWRV GHͤQHP H WUDQVPLWHP a idÊia do que Ê a aplicação. Um aplicativo possui duas maneiras de ser criado, na primeira ele Ê desenvolvido a partir de uma idÊia, muitas vezes sem um vínculo com uma empresa. Apenas para suprir a necessidade de XP QLFKR FRPR XP FURQœPHWUR FRP IXQŠ¡HV HVSHF¯ͤFDV -£ QD VHJXQGD maneira, ele surge da demanda de uma empresa em adentrar ao mercado GH DSOLFDŠ¡HV P¾YHLV SDUD WDPEP RIHUHFHU VHXV VHUYLŠRV SRU HVWH canal. Independente do cenårio, os passos seguintes são os mesmos, o levantamento de dados Ê necessårio para se ter um panorama de todos os dados disponíveis, assim como os demais passos, serå usado como H[HPSOR R SU¾SULR SURMHWR GH JUDGXDŠ¼R 8P GRV SLODUHV SRU WU£V GR 6WUHDP Ê ser centrado no usuårio, ou em outras palavras, entender primeiramente FRPR R VHU KXPDQR LQWHUDJH FRP HVWH WLSR GH SODWDIRUPD H D SURMHWDU GD maneira mais natural possível.

(P VHX OLYUR VREUH 'HVLJQ 7KLQNLQJ 7LP %URZQ20 levanta alguns pontos que são relevantes para se entender o estado atual do design em relação às novas tecnologias, ao mesmo tempo que då dicas e mostra como as pessoas podem ser melhor entendidas. Parafraseando Peter Drucker, Ê ̸WRUQDU QHFHVVLGDGH HP GHPDQGD̚ SDUHFH VLPSOHV EDVWD GHVFREULU R TXH as pessoas querem e dar isso a elas, mas não Ê o que acontece, ou então teríamos mais histórias de sucesso como o iPod. A resposta, segundo o autor, Ê que Ê necessårio voltar ao centro da história. Precisamos aprender D FRORFDU DV SHVVRDV HP SULPHLUR OXJDU ̸GHVLJQ FHQWUDGR QR XVX£ULR̚ p. 37). Isto pode ser iniciado com o aprendizado de que comportamentos QXQFD V¼R FHUWRV RX HUUDGRV PDV V¼R VHPSUH VLJQLͤFDWLYRV S

Muitas vezes se torna difĂ­cil saber o que ĂŠ errado, pois segundo o autor as

̧%52:1 7LP 'HVLJQ 7KLQNLQJ XPD PHWRGRORJLD SRGHURVD SDUD GHWHFWDU R ͤP GDV YHOKDV LGHLDV HG 5LR GH -DQHLUR (OVHYLHU

61

SHVVRDV V¼R W¼R HQJHQKRVDV HP VH DGDSWDU D VLWXDŠ¡HV LQFRQYHQLHQWHV que muitas vezes nem chegam a perceber que estão fazendo isso (2010, S 2 WUDEDOKR GR GHVLJQHU QHVWH SRQWR GH YLVWD  DMXGDU DV SHVVRDV D articular as necessidades latentes que podem nem saber que têm, e não apenas tornar algo mais råpido (2010, p. 38). $LQGD HP RV VRIWZDUHV HUDP GH GRP¯QLR GRV JHHNV HP ODERUDW¾ULRV de computador e não de designers, muito menos de alunos em sala de aula, trabalhadores em escritórios ou consumidores em casa (2010, p.

124). Em 1988 inspirado pelo Mac, Bill Moggridge21 decidiu que o designer GHYHULD WHU SDUWLFLSDŠ¼R WDPEP QR VRIWZDUH H Q¼R DSHQDV QR H[WHULRU GRV computadores. E assim surgiu o design de interação, que deveria pensar WDQWR VREUH DV DŠ¡HV QR VRIWZDUH TXDQWR QR REMHWR TXH LPSXWDYD HVVDV DŠ¡HV SURMHWDU XPD LQWHUDŠ¼R  SHUPLWLU TXH XPD KLVW¾ULD VH GHVHQYROYD FRP R WHPSR ( GLIHUHQWH GHVWH LQLFLR KRMH HP GLD DR LQYV GH GLWDU WRGRV os caminhos que o usuårio deve seguir nesta narrativa, o designer abre mão deste controle e o próprio usuårio desenvolve a narrativa a seu gosto H ULWPR S 2 6WRU\WHOOLQJ RX FRPR D KLVW¾ULD GR IXQFLRQDPHQWR do serviço vai ser contada ao cliente, não precisa ser um anúncio de TV. Muitos sites utilizam simples recursos para contar uma história, com SHUVRQDJHQV H DQLPDŠ¡HV TXH LOXVWUDP FRPR R VHUYLŠR RX DSOLFDŠ¼R funciona, de forma humana e entendível. A própria gigante fabricante de processadores Intel se utilizou de pequenas histórias produzidas a um custo módico de um anúncio de TV para divulgar sua sÊrie Visão Futura (2010, p. 131). Na verdade muitos clientes em países emergentes vão ter o primeiro contato com a internet atravÊs de um dispositivo móvel, por ser PDLV EDUDWR TXH XP FRPSXWDGRU S 2 GHVLJQ FRP R WHPSR VLJQLͤFD SHQVDU QDV SHVVRDV FRPR RUJDQLVPRV TXH YLYHP FUHVFHP H SHQVDP H TXH SRGHP DMXGDU D HVFUHYHU DV SU¾SULDV KLVW¾ULDV S ̧&RIXQGDGRU GD DJQFLD ,'(2 H UHVSRQV£YHO SHOR SULPHLUR ODSWRS DLQGD HP

62

127). AlÊm de centrar a aplicação no usuårio, ele tambÊm Ê incorporado DR SURFHVVR DWUDYV GD JDPHͤFDŠ¼R

*DPHͤFDŠ¼R 2 FRQFHLWR QHVWH SURMHWR YLVD HVWLPXODU D FXUDGRULD GR FRQWHŸGR SHOR próprio usuårio, este que pode tornar seus canais públicos e competir por YLVXDOL]DŠ¡HV SDUD JDQKDU GHVWDTXH H QRWRULHGDGH 2 DWR GH UHSDVVDU HVVH WUDEDOKR GH VHOHŠ¼R GH FRQWHŸGR SDUD R XVX£ULR Q¼R VLJQLͤFD WUDQVIHULU a responsabilidade para eles, Ê guiå-los por um caminho previamente GHͤQLGR SHOD DSOLFDŠ¼R 6HJXQGR .HYLQ :HUEDFK QD 8QLYHUVLGDGH GD 3HQVLOY¤QLD JDPHͤFDŠ¼R VLJQLͤFD XVDU HOHPHQWRV HQFRQWUDGRV HP MRJRV em um outro contexto e, por mais que se assemelhe a eles, o propósito H R REMHWLYR V¼R IDWRUHV TXH WP YDOLGDGH XPD LQWHQŠ¼R H Q¼R DSHQDV HQWUHWHQLPHQWR $ SULQFLSDO PRWLYDŠ¼R QR XVR GD JDPHͤFDŠ¼R SRU SDUWH GH estrategistas de negócio, estå na possibilidade de obter o mesmo sucesso TXH RV MRJRV FRQVHJXHP FRPR XPD IHUUDPHQWD SRGHURVD GH ͤGHOL]DŠ¼R H HQJDMDPHQWR ‹ XP WHPD WUDWDGR FRPR XP PRGHOR GH QHJ¾FLRV emergente, isto se deve ao fato de que as pessoas que, nos anos 90 eram MRYHQV H VH GLYHUWLDP FRP MRJRV H RXWURV PHLRV HOHWUœQLFRV HVW¼R KRMH HP dia alcançando cargos de alto nível, ou empreendendo em seus próprios negócios.

63

Ferramenta criada pela empresa Sansung para estimular a competitividade na geração de idÊias para a própria empresa.

(VWHV QRYRV O¯GHUHV WHP GLͤFXOGDGH GH DFHLWDU ¢V YH]HV RV PRGHORV GH negócio utilizados atÊ os anos noventa, e passam a adaptar os mesmos à VXDV H[SHULQFLDV FXOWXUDLV VRFLDLV H YLVXDLV (OHV DVVRFLDP D JDPHͤFDŠ¼R DR HVWLPXOR GD FULDWLYLGDGH DR HQJDMDPHQWR FRP GHWHUPLQDGR DVVXQWR RX tema e, principalmente, com a competitividade. ̸'H UHSHQWH JDPHͤFDŠ¼R  D PDLRU QRYLGDGH HP WHUPRV GH PRGHOR GH QHJ¾FLR VHQGR XVDGR SRU PXLWDV GDV PDLV DGPLUDGDV HPSUHVDV ̚

5HYLVWD )RUWXQH

3DUD HQWHQGHU FRPR R FRQFHLWR FKHJRX QRV GLDV GH KRMH ÂŤ QHFHVVÂŁULR observar um breve resumo de sua histĂłria e analisar os pontos que o transformaram.

0XOWL 8VHU 'XQJHRQ ÂŤ FRQVLGHUDGR R PXQGR YLUWXDO PDLV DQWLJR Foi originalmente desenvolvido em 1978 na Essex University, Inglaterra.

Esta foi a primeira experiência de um mundo online, compartilhando uma plataforma de colaboração. Tudo isto ocorria em uma interface semelhante DR '26 DSHQDV DWUDYV GH OLQKDV GH FRPDQGR 64

7HOD GH XPD MRUQDGD GH 0XOWL 8VHU 'XQJHRQ HP DQGDPHQWR

(VWXGRV M£ PRVWUDYDP TXH FULDQ©DV SRGHULDP DSUHQGHU FRP MRJRV SRLV M£ H[LJLDP TXH HODV HQWHQGHVVHP VLVWHPDV DSDUHQWHPHQWH FRPSOH[RV GH REMHWLYRV H VLVWHPDWL]D©¥R SDUD REWHU SURJUHVVR QRV MRJRV H HVWHQGHU R tempo de entretenimento.

&DSD GH XP HVWXGR GR ;HUR[ 3DOR $OWR 5HVHDUFK &HQWHU VREUH D DSUHQGL]DJHP FRP MRJRV

(PSUHVDV GR VHWRU SULYDGR XQLYHUVLGDGHV H DW« R H[«UFLWR DPHULFDQR GHVHQYROYHUDP MRJRV SDUD VLPXODU H WUHLQDU HP GLYHUVRV REMHWLYRV 65

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

HP GLDQWH 2 PHUFDGR IRL DEVRUYHQGR HVWH FRQFHLWR H R H[SORUDQGR GH GLYHUVDV PDQHLUDV H M£ PRVWUD VLQDLV GH DPDGXUHFLPHQWR SRLV FDGD YH] PDLV JUDQGHV HPSUHVDV SDVVDUDP D DGRWDU D JDPHͤFD©¥R HP VXDV DSOLFD©·HV

(PSUHVDV TXH M£ SRVVXHP DSOLFD©·HV FRP R FRQFHLWR GH JDPHͤFD©¥R DSOLFDGR

66

.HYLQ :HUEDFK UHIRUŠD TXH JDPHͤFDŠ¼R Q¼R  WUDQVIRUPDU WXGR HP MRJR RX HP XPD H[SHULQFLD LPHUVLYD HP ' 2 FRQFHLWR GHYH VH DGDSWDU DR produto, serviço ou ideia. Sua aplicação não Ê algo trivial, deve ocorrer um EDODQFHDPHQWR GRV HOHPHQWRV TXH RV FRPS¡HP GH DFRUGR FRP R REMHWLYR DOPHMDGR ([LJH FRQKHFLPHQWRV PXOWLGLVFLSOLQDUHV SRU UHXQLU FRQWHŸGRV GH psicologia, design, negócios e tecnologia. É uma representação de como a mente funciona, motivação que leva os usuårios a pensarem em tÊcnicas SDUD DWLQJLU R REMHWLYR FRP YLVXDO H RUJDQL]DŠ¼R GD LQIRUPDŠ¼R 0DV DQWHV de organizar a informação, ela deve ser colhida de diversas maneiras, estes dados colhidos são denominados como dados brutos.

67

Arquitetura de Informação

Este conceito estå ligado ao estudo, disposição e organização da informação bruta (protocolos, banco de dados, níveis de mapeamento, DOWHUQDWLYDV GH QDYHJDŠ¼R HWF &RQVLGHUDQGR VH DV SRWHQFLDOLGDGHV de uso de uma tecnologia e os caminhos que elas sugerem para o fluxo GH LQIRUPDŠ¼R QR HVSDŠR GLJLWDO VHQGR TXH R UHVXOWDGR ͤQDO IRUQHŠD DR usuårio a informação que ele necessita.

Segundo Peter Morville, co-fundador do Information Architecture Institute, no início dos anos 90, com a ascensão da internet, veio tambÊm um SUREOHPD PXLWRV VLWHV IRUDP FULDGRV VHP SODQHMDPHQWR RFDVLRQDQGR SUREOHPDV GH XVDELOLGDGH JHUDQGR JUDQGHV GLͤFXOGDGHV GH VH REWHU R FRQWHŸGR GHVHMDGR H DV DOWHUDŠ¡HV GH OD\RXW HUDP PXLWR FDUDV ‹ QHVVH aparente caos que, segundo o autor, as pessoas passaram a entender D LPSRUW¤QFLD GR SODQHMDPHQWR GH VLWHV H HQW¼R IRL DGRWDGR R QRPH GH ̸DUTXLWHWXUD GH LQIRUPDŠ¼R̚ SRU XPD TXHVW¼R GH PHW£IRUD PDV DR LQYV GH SUGLRV HVWHV SURͤVVLRQDLV SURMHWDP VLWHV VRIWZDUHV H VHUYLŠRV interativos.

A arquitetura da informação se adaptou aos dispositivos móveis, assumindo um importante papel, não só na estrutura de conteúdo , mas WDPEP DR SODQHMDPHQWR H PDSHDPHQWR GH WRGD D H[SHULQFLD 6XD função não Ê só criar links entre påginas de maneira bem estruturada, mas WDPEP FULDU UHODŠ¡HV SDUD DMXGDU R XVX£ULR D VDEHU RQGH HOH HVW£ R TXH ele estå vendo e o que esperar do que estå a sua volta. A resolução Ê parte FUXFLDO GR SURMHWR  R HVTXHOHWR GD VROXŠ¼R SRLV HOD H[SOLFD R SURMHWR H JXLD D HWDSD VHJXLQWH D HYLWDU WUDEDOKR GHVQHFHVV£ULR 2V GDGRV EUXWRV colhidos no levantamento de dados são estruturados e organizados para TXH D SURWRWLSDJHP VHMD LQLFLDGD

69

Levantamento de dados 2V GDGRV UHODWLYRV DR FRQWHŸGR DXGLRYLVXDO IRUDP FROKLGRV GH EDVHV GH dados na internet, mais precisamente nos sites IMDB (Internet Movie 'DWDEDVH H 79 &20 (VWDV GXDV EDVHV SRVVXHP VHXV GDGRV LQIOXHQFLDGRV SRU XVX£ULRV VHQGR DVVLP VXD FRQWULEXLŠ¼R JDUDQWH LQIRUPDŠ¡HV DWXDOL]DGDV GH VULHV HOHQFRV H GHPDLV LQIRUPDŠ¡HV TXH HQYROYHP HVWH conteúdo audiovisual, alÊm de serem abertas gratuitamente para consulta.

2XWUD LPSRUWDQWH IRUPD SDUD REWHQŠ¼R GH GDGRV  R UHWRUQR GH FU¯WLFDV H VXJHVW¡HV GRV FRQVXPLGRUHV GH VRIWZDUHV (VWHV V¼R FROKLGRV GDV S£JLQDV YLUWXDLV GRV DSOLFDWLYRV QDV TXDLV RV XVX£ULRV ID]HP DYDOLDŠ¡HV que se tornam públicas e podem ser levadas em consideração para DOWHUDŠ¡HV GH GDGRV FDVR Q¼R DJUDGHP RV XVX£ULRV 1HVWH SRQWR RQGH WRGDV DV LQIRUPDŠ¡HV HVWDYDP UHXQLGDV H HVWUXWXUDGDV IRL QHFHVV£ULR encontrar uma maneira que se adequasse com meu modo de trabalho, e DR TXH HVWDYD VHQGR SURMHWDGR

+LHUDUTXLD GH GDGRV WÂŤFQLFRV

&RP D DUTXLWHWXUD GH LQIRUPDŠ¼R M£ GHͤQLGD  GDGR R SULPHLUR SDVVR SDUD R OD\RXW QHVWH SRQWR M£ VH VDEH R TXH FDGD WHOD GHYH FRQWHU H QHVWD HWDSD 70

Ê estudado qual a melhor maneira deste conteúdo ser apresentado ao XVX£ULR $ SURWRWLSDJHP  D SDUWH PDLV H[WHQVD GR SURMHWR H GLIHUHQWH GR GHVLJQ LPSUHVVR 2 GHVLJQ GLJLWDO VRIUH DOWHUDŠ¡HV FRQVWDQWHV SDUD DWHQGHU requisitos de acesso e adequação ao interesse do usuårio, mas mesmo DVVLP  QHFHVV£ULR VH ͤ[DU XP SRQWR SDUD XPD SULPHLUD YHUV¼R

Fluxo de navegação da aplicação.

&RP R FRQWHŸGR M£ GHͤQLGR SDUD FDGD WHOD  SUHFLVR GHVFREULU D PHOKRU maneira deles serem dispostos. Em cada caso são feitos uma sÊrie de estudos, trocando-se elementos de posição, interação, sequência de DŠ¡HV SDUD TXH VH PRQWH R PHOKRU FDPLQKR SDUD R XVX£ULR

71

Prototipagem

Segundo Scott Klemmer, a prototipagem Ê a maneira mais råpida, efetiva e menos custosa de se obter um retorno real sobre o funcionamento, ou não, de uma ideia. AlÊm disso, ao construir um modelo de um produto ou serviço, muito provavelmente outras ideias irão surgir e futuros problemas de funcionamento e desenvolvimento serão pensados muito antes de aparecerem em uma futura fase de desenvolvimento. Scott deixa claro de que protótipos não são e nem devem ser completos. Eles na verdade, não precisam sequer funcionar, a exemplo do protótipo de uma câmera digital GHVHQYROYLGD HP SHOR HVFULW¾ULR GH GHVLJQ ,'(2 RQGH R REMHWLYR HUD criar um aparelho, no qual fosse possível alÊm de tirar uma foto, editar a mesma. Este protótipo sequer tirava fotos, mas foi de extrema importância SDUD VXD IRUPD ͤQDO H LQWHUIDFH GH HGLŠ¼R GH LPDJHP PRVWUDQGR DV GLPHQV¡HV P¯QLPDV QHFHVV£ULDV H DV GLͤFXOGDGHV GH XVDELOLGDGH TXH os usuårios tinham ao editar uma foto em uma câmera. Uma coerente GHͤQLŠ¼R SDUD SURWRWLSDJHP SDUHFH VHU D GR SU¾SULR 6FRWW .OHPPHU RQGH HOH GL] TXH XP SURW¾WLSR  D HVWUDWJLD PDLV HͤFLHQWH SDUD OLGDU FRP FRLVDV que são difíceis de prever.

Não se deve desperdiçar muito tempo em um único protótipo, eles devem proporcionar o aprendizado no menor tempo possível. Ao se prototipar por exemplo, para dispositivos móveis, a maior barreira a ser vencida Ê proporcionar aos usuårios de diversos sistemas e modelos, a mesma H[SHULQFLD (P DOJXQV FDVRV LVWR Q¼R  SRVV¯YHO GHYLGR DV UHVWULŠ¡HV WFQLFDV HQWUH DSDUHOKRV GLIHUHQWHV 2 SURFHVVR XVDGR QHVWH WUDEDOKR FRQVLVWH GH GXDV HWDSDV V¼R HODV

3URWRWLSDJHP GH EDL[D ͤGHOLGDGH 1¼R  QHVWD HWDSD TXH R VRIWZDUH WHU£ D IRUPD ͤQDO SHQVDGD R IRFR GD SURWRWLSDŠ¼R  R REMHWLYR ͤQDO D DŠ¼R GH ID]HU DOJR H SDUD LVWR VXD IRUPD e aparência podem mudar drasticamente no decorrer do processo para 73

DOFDQŠDU R REMHWLYR GHVHMDGR 1HVWD IDVH GLIHUHQWHV UDVFXQKRV V¼R IHLWRV VHP VH SUHRFXSDU FRP GHWDOKDPHQWR R REMHWLYR  FRQVHJXLU R PDLRU QŸPHUR GH GLIHUHQFLDŠ¡HV D ͤP GH HQFRQWUDU GH PDQHLUD U£SLGD D TXH PDLV se adapta a necessidade em questão.

Diferentes rascunhos da tela das listas de reprodução, e o rascunho escolhido em destaque.

3URWRWLSDJHP GH DOWD ͤGHOLGDGH Após o exercício de desenho para se chegar a uma tela que atenda às necessidades levantadas pela arquitetura de informação, ela Ê redesenhada com mais detalhes e uma preocupação maior com os elementos. Este desenho serå a base para a próxima etapa, em que os rascunhos ainda Q¼R SRVVXHP R YLVXDO ͤQDO PDV Y¼R JDQKDU YLGD FRP LQWHUDŠ¡HV TXH Y¼R adicionar navegabilidade às telas atÊ então eståticas.

74

Mesma tela feita com mais detalhes.

1R GHFRUUHU GR SURFHVVR DV DGDSWDŠ¡HV Q¼R RFRUUHP VRPHQWH FRP R desenho, o próprio processo passa se moldar e artifícios podem, e devem ser criados para complementar e facilitar o desenvolvimento de cada etapa.

1HVWD HP TXHVW¼R IRL FULDGR XP DUWLͤFLR SDUD TXH PHVPR QHVWH HVW£JLR inicial de desenvolvimento fosse possível ter uma visão mais avançada GD WHOD HP VHX GLVSRVLWLYR ͤQDO H SDUD LVVR XP DUWHIDWR GH SDSHO¼R IRL FRQVWUX¯GR SDUD VLPXODU R GHVHQKR GD WHOD HP VHX VXSRUWH ͤQDO

$UWLͤFLR FULDGR SDUD HVWXGR GH FRHUQFLD YLVXDO GH WHODV 75

Wireframes

(VWD HWDSD YLVD MXQWDU DV GXDV SULPHLUDV HP XPD HVSFLH GH HVTXHOHWR GD DSOLFDŠ¼R TXH FRQWHQKD WRGDV DV LQIRUPDŠ¡HV VREUH FRQH[¡HV GH IXQFLRQDPHQWR &KDQGOHU S DUJXPHQWD TXH R SULPHLUR SDVVR DQWHV GH VH SURGX]LU ZLUHIUDPHV V¼R RV PDSDV GH VLWH HVWHV TXH V¼R XPD IRUPD GH GHPRQVWUDU JUDͤFDPHQWH D HVWUXWXUD GH XPD DSOLFDŠ¼R 1HVWH FRQFHLWR GH GLDJUDPD ͤFDP FODUDV DV KLHUDUTXLDV H FRQH[¡HV SUHVHQWHV QR SURMHWR IRUQHFHQGR XPD U£SLGD FRPSUHHQV¼R GD GLVWULEXLŠ¼R H ORFDOL]DŠ¼R GR FRQWHŸGR $ FULDŠ¼R GR ZLUHIUDPH  XP H[HUF¯FLR GH FRPSUHHQV¼R da necessidade do cliente, as telas desenhadas são transformadas em ZLUHIUDPHV RQGH VXD IXQŠ¼R E£VLFD  LGHQWLͤFDU RV HOHPHQWRV QHFHVV£ULRV SDUD VHUHP H[LELGRV HP WHOD &RPR IRUWH FDUDFWHU¯VWLFD HVW£ D DXVQFLD ou o pouco uso de cor, substituintes para imagens e fontes båsicas de sistema.

Logo Voltar

Categoria

Categoria

Categoria

Wireframe de uma das påginas da aplicação.

77

Mas sua função vai alÊm de indicar ao designer de interface o que deve ser criado, ele Ê tambÊm usado para demonstrar a aplicação para FOLHQWHV H HTXLSH HQYROYLGD QR SURMHWR $R QDYHJDU SRU XP ZLUHIUDPH  comum se deparar com ícones que, quando clicados, exibem uma breve explicação sobre a funcionalidade daquele elemento. Isso acontece, pois alguns recursos complexos não se adequam a proposta de agilidade de GHVHQYROYLPHQWR GRV ZLUHIUDPHV $OP GLVVR HVWDV DQRWDŠ¡HV LQGLFDP ULVFRV QR XVR GR GHWHUPLQDGR REMHWR 2 DXWRU DUJXPHQWD TXH D QDYHJDŠ¼R YLD ZLUHIUDPH  UHVSRQV£YHO SRU LGHQWLͤFDU JUDYHV IDOKDV GH XVDELOLGDGH SRLV VLPXOD R XVR UHDO GD IHUUDPHQWD 4XDQGR XP ZLUHIUDPH  FRQVLGHUDGR FRPSOHWR HOH SRGH VHU XVDGR SDUD WHVWHV GH XVDELOLGDGH D ͤP GH LGHQWLͤFDU o nível de facilidade e empatia dos usuårios com o sistema.

Usabilidade & Acessibilidade Por se tratar de uma etapa interativa, deve-se aplicar os conhecimentos GH XVDELOLGDGH D ͤP GH HYLWDU GHVFRQIRUWR QR XVR GD DSOLFDŠ¼R 6HJXQGR Antony T.22 DV £UHDV WRXFK SHTXHQDV JHUDP GLͤFXOGDGHV GH XVR $R VH desenhar interfaces para dispositivos móveis, as åreas de ação ao toque devem ser grandes. Nestas horas, Ê recomendåvel recorrer aos manuais de UHFRPHQGDŠ¡HV SDUD FDGD SODWDIRUPD GH GHVHQYROYLPHQWR SRUP HVVDV LQIRUPDŠ¡HV VH GLYHUJHP HQWUH RV SULQFLSDLV JXLDV 2 SUREOHPD GHVWDV medidas, segundo o autor, Ê o de que todas elas representam um tamanho menor do que o de um dedo humano, o que pode causar frustração e LUULWDŠ¼R DRV XVX£ULRV SHOD GLͤFXOGDGH GH DFHUWDU VHX DOYR

̧(VFULWRU GR VLWH UHIHUQFLD HP XVDELOLGDGH 6PDVK 0DJD]LQH

78

'LͤFXOGDGHV LPSO¯FLWDV SRU XPD £UHD GH WRTXH SHTXHQD

2V SHTXHQRV DOYRV H[LJHP SUHFLV¼R SDUD DFHUWDU RV XVX£ULRV WHP GH se preocupar com a maneira e posição do dedo. Isso acaba por gerar D VHQVDŠ¼R GH XPD DSOLFDŠ¼R OHQWD SRLV SDUHFH TXH SRU PDLV TXH VHMD pouco, essa necessidade de atenção com o toque estå requerendo tempo.

A situação se torna ainda pior quando existem grupos de itens, pois o XVX£ULR SRGH DFLGHQWDOPHQWH DFLRQDU XPD IXQŠ¼R Q¼R GHVHMDGD DSHQDV por ter aplicado uma pressão maior em uma das extremidades do dedo, ao invÊs do centro. Em uma pesquisa desenvolvida pelo MIT Touch Lab, pesquisadores da instituição chegaram à medida de 16 – 20 mm, ou convertendo para medidas digitais 45 – 57 pixels como sendo de tamanho recomendåvel para a maioria dos adultos.

&RPSDUDWLYR GH ÂŁUHD FRP SL[HO H R GHGR GH XP DGXOWR

Em um tablet, isso pode ser facilmente aplicado, pois possui uma ĂĄrea de tela relativamente grande, mas o mesmo nĂŁo 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 mĂ­nimo, 79

SRGH VH XVDU RXWURV JHVWRV 'H DFRUGR FRP R L26 +XPDQ ,QWHUIDFH *XLGHOLQHV RV WLSRV GH LQWHUDŠ¼R DFHLWRV SHOR L3DG V¼R Toque

Pressionar ou selecionar um controle ou elemento em tela, em uma rĂĄpida analogia ĂŠ semelhante ao clique do mouse.

Arrastar

Arrastar um conteĂşdo ou mover um elemento.

Flick

Arrastar um conteĂşdo rapidamente.

Deslizar

Normalmente usado para revelar um FRQWHŸGR RFXOWR FRPR RV ERW¡HV para deletar itens.

Toque duplo

Ação tambÊm usada para aumentar o nível de zoom em um conteúdo ou imagem.

80

&RPSULPLU H

&RPSULPLU SDUD DXPHQWDU R ]RRP H

expandir

expandir para diminuir o zoom.

Segurar

Em um conteĂşdo selecionĂĄvel ĂŠ usado para mostrar detalhes.

&KDFRDOKDU

Balançar o aparelho para iniciar uma interação.

$ PWULFD SDUD ERW¡HV SDUHFH VLPSOHV GH VHU PHGLGD PDV R IDWRU KXPDQR da diferenciação no tamanho dos dedos implica em testes diferenciados SDUD D DSOLFDŠ¼R 6WHYHQ +RREHU FRDXWRU GH 'HVLJQLQJ 0RELOH ,QWHUIDFHV Patterns for Interaction Design, criou uma ferramenta muito útil para esta medição, se trata de uma rÊgua chamada 4ourth Mobile Touch Template, que pode ser aplicada desde os primeiros rascunhos e que possibilita um retorno físico sobre a usabilidade da aplicação, desta forma Ê possível LGHQWLͤFDU GLͤFXOGDGHV GH XVR EDVHDGR QDV PHGLGDV GD IHUUDPHQWD

4ourth Mobile Touch Template e sua utilização.

81

As mãos respondem por toda a interação com os aplicativos, mas o FRUSR VRIUH RV HIHLWRV GR XVR FRPR XP WRGR $ REUD &XULRXV 5LWXDOV23 DERUGD R TXH RV DXWRUHV GHQRPLQDP FRPR ̸RV JHVWRV GR VFXOR ;;,̚  XPD OHLWXUD TXH DMXGD R GHVLJQHU GH LQWHUDŠ¼R D HQWHQGHU TXDO D SURY£YHO posição do usuårio ao executar determinada tarefa em seu dispositivo P¾YHO H GHPDLV DSDUHOKRV HOHWUœQLFRV $V LOXVWUDŠ¡HV DSUHVHQWDGDV DEDL[R são basicamente monocromåticas, apenas os membros que exigem PRYLPHQWRV SDUD R XVR GRV DSDUHOKRV V¼R GHVWDFDGRV FRP FRUHV

,OXVWUDŠ¡HV GR OLYUR &XULRXV 5LWXDOV

2 IDWR GR GLVSRVLWLYR SRVVXLU WHFQRORJLD WRXFK SURSRUFLRQD XPD QRYD JDPD GH LQWHUDŠ¡HV SDUD DV WDUHIDV TXH DW HQW¼R HUDP H[HFXWDGDV VRPHQWH FRP R PRXVH H HVWDV LQWHUDŠ¡HV SRGHP HQFXUWDU IOX[RV H RWLPL]DU LQWHUIDFHV Em todas as etapas os testes são importantes, não só por prevenirem futuros erros, às vezes uma interação se comporta da maneira que Ê imaginada e construída, e pode não ser tão interessante quanto parecia.

̧&XULRXV 5LWXDOV *HVWXUDO ,QWHUDFWLRQ LQ WKH 'LJLWDO (YHU\GD\

82

Interface do Usuรกrio

'HVLJQ GH LQWHUIDFH  R UHVSRQV£YHO SRU UHDOL]DU D FRPXQLFDŠ¼R HͤFLHQWH GR conteúdo digital atravÊs do uso de recursos que contêm necessariamente um componente estÊtico. Sua contribuição consiste em reduzir a complexidade cognitiva e produzir clareza para uma melhor compreensão da informação, atravÊs de uma aplicação equilibrada dos diferentes canais GH SHUFHSŠ¼R YLVXDO DXGLWLYR H W£WLO 2 TXH LQFOXL R HVWXGR GHWDOKDGR GD DGHTXDŠ¼R DR IRUPDWR GR GLVSRVLWLYR D VHU XWLOL]DGR WLSRJUDͤD V SDOHWD FURP£WLFD WDPDQKRV SURSRUŠ¡HV H SRVLFLRQDPHQWR GRV HOHPHQWRV HP FDGD WHOD ERW¡HV LQIRUPDŠ¡HV GH VHJXUDQŠD H DOHUWD H LQIRUPDŠ¡HV GH DMXGD DR XVX£ULR 2 YLVXDO Q¼R  VRPHQWH RQGH RFRUUH R FRQWDWR FRP o usuårio, Ê onde todo o trabalho Ê posto a prova, mostrando de forma DJUDG£YHO H VLPSOLͤFDGD WRGD D HVWUXWXUD GR VLVWHPD

Evolução Visual dos Aplicativos $ HYROXŠ¼R QR GHVHQKR GDV DSOLFDŠ¡HV PRVWUD TXH R EUDQGLQJ SRGH VHU mantido. Não Ê porque os dispositivos são de tamanhos diferentes que a essência da marca vai se perder. Fazendo uma råpida analogia, Ê como se uma marca não pudesse manter a sua identidade ao mesmo tempo em um outdoor e em um cartão de visita. Não Ê um exemplo tão divergente pois se trata da aplicação da marca em um substrato de impressão.

3RU FRQWD GD GLͤFXOGDGH GH DSUHQGL]DJHP GD OLQJXDJHP SRU WU£V GR desenvolvimento de solução da Apple, o que acabou ocorrendo foi que os próprios programadores deram conta do layout, utilizando apenas recursos GR SU¾SULR VLVWHPD D DOJXPDV DOWHUDŠ¡HV GH FRUHV H HOHPHQWRV SDUD FULDU VXDV DSOLFDŠ¡HV 2XWUR IDWR TXH FRODERURX SDUD HVWD KRPRJHQHL]DŠ¼R YLVXDO H HVWUXWXUDO GRV DSOLFDWLYRV IRUDP RV ERQV SDGU¡HV GHVHQYROYLGRV SHOD $SSOH H D VXD GLͤFXOGDGH GH VHUHP DOWHUDGRV 6HJXQGR 0DWWKHZ 3DQ]DULQR HVFULWRU GR VLWH GH WHFQRORJLD ̸7KH 1H[W :HE̚  SURY£YHO TXH XP consumidor saiba quando estå olhando para algo feito pelo Google, seu uso de cores primårias, espaço branco e texto proeminente são elementos M£ EDVWDQWH FRQKHFLGRV 85

2V SULPHLURV DSOLFDWLYRV IRUDP FULDGRV SHOD $SSOH H XWLOL]DGRV SDUD FRQͤJXUDŠ¼R GH VHX SU¾SULR VLVWHPD RSHUDFLRQDO H SDUD FRQVXPR GH mídia, como o iTunes.

$SOLFDŠ¼R GR VLVWHPD L26 SDUD FRQͤJXUDŠ¡HV GH XVR GR L3DG

Ao disponibilizar para o público sua plataforma de desenvolvimento, o SDK24, a Apple o fez prevendo não apenas a possibilidade de criar uma aplicação do zero. Ela tambÊm forneceu os templates de suas próprias DSOLFDŠ¡HV IDFLOLWDQGR DVVLP D FULDŠ¼R VHJXLQGR VHXV FRQFHLWRV GH GHVLJQ &RP LVVR XPD HQ[XUUDGD GH DSOLFDŠ¡HV FRP OD\RXW VHPHOKDQWH WDQWR QD disposição dos elementos quanto em outros elementos visuais, como ERW¡HV H EDUUDV GHOLPLWDGRUDV IRUDP FULDGRV

̧‹ D VLJOD SDUD 6RIWZDUH 'HYHORSPHQW .LW

86

7HPSODWH GR PRGHOR 0DVWHU 'HWDLO VHQGR XVDGR HP DSOLFDŠ¡HV

2V GHVHQYROYHGRUHV VH VHQWLDP FRQIRUW£YHLV SRLV EDVWDYDP DOJXPDV SRXFDV DOWHUDŠ¡HV GH LPDJHQV SDUD VH WHU XPD DSOLFDŠ¼R FRQFOX¯GD 0DV FRP HVVH FRPSRUWDPHQWR R TXH VXUJLUDP IRUDP DSOLFDŠ¡HV GH HPSUHVDV IDPRVDV VHP VXD HVVQFLD 2V HOHPHQWRV YLVXDLV GHVWDV HPSUHVDV VH encontravam presentes, mas de maneira não comum. A aplicação para iPad do Skype Ê um exemplo, a imagem abaixo compara a versão antiga FRP D QRYD ‹ SRVV¯YHO QRWDU TXH QD DQWHULRU FRUHV H WLSRJUDͤD Q¼R VHJXLDP FRP HͤFLQFLD R TXH D LGHQWLGDGH GD PDUFD SURSXQKD

87

VersĂŁo antiga e nova respectivamente do aplicativo Skype para iPad.

Assim como o Skype, o Google em sua recente reestilização da aplicação GR *PDLO SDUD L26 WDPEP VH DWHYH D HVVD QHFHVVLGDGH GH WUDQVSRUWDU VXD LGHQWLGDGH ͤHOPHQWH SDUD D DSOLFDŠ¼R

88

Nova identidade do Gmail para iPad.

Mesmo com essa evolução, os templates antigos continuavam a ser VHJXLGRV PDV XPD QRYD WHQGQFLD SRGH VHU QRWDGD $OJXPDV DSOLFDŠ¡HV passaram a se desprender de sua plataforma, isto se deve em partes pela influência de plataformas concorrentes, e tambÊm pela maior maleabilidade no desenvolvimento.

89

$SOLFDŠ¼R 5LVH SDUD L3DG

,VWR VLJQLͤFD TXH R FDPLQKR SDUD VH FKHJDU D XPD KRPRJHQHL]DŠ¼R GH experiências entre plataformas de dispositivos móveis estå mais próxima. $SHVDU GR FDPLQKR DSRQWDU SDUD XPD LGHQWLGDGH SU¾SULD SDUD DV DSOLFDŠ¡HV LVVR Q¼R VLJQLͤFD TXH VHMD SUHFLVR DOWHUDU WRGR R SDGU¼R GR VLVWHPD SDUD VH WHU VXFHVVR (VWH PHVPR FHQ£ULR RFRUUH QDV DSOLFDŠ¡HV GH GHVNWRS nos computadores, muitos programas possuem elementos em comum, M£ TXH V¼R UHFXUVRV GLVSRQLELOL]DGRV SHOR SU¾SULR VLVWHPD RSHUDFLRQDO $ situação atual mostra que os designers não mais se preocupam com os elementos de sistema, a maleabilidade tanto dos sistemas, quanto dos desenvolvedores, permite mais liberdade de criação para os aplicativos.

90

Identidade visual para a empresa The Pool.

2 YLVXDO GDV DSOLFDŠ¡HV Q¼R  HVW£WLFR HOH GHYH VH DGDSWDU ¢V GLPHQV¡HV da tela, assim como nos sites se torna cada vez mais difícil manter uma identidade coerente com os meios. A diferença estå no fato de que os usuårios de computador estão acostumados a sites que não preenchem WRGR R HVSDŠR GD WHOD RV GDV DSOLFDŠ¡HV P¾YHLV Q¼R $OP GLVVR R OD\RXW HP JUDQGH SDUWH GDV DSOLFDŠ¡HV GHYH VHU SHQVDGR OLWHUDOPHQWH HP GRLV VHQWLGRV QD YHUWLFDO H QD KRUL]RQWDO H LVWR Q¼R VLJQLͤFD DSHQDV JLUDU RV HOHPHQWRV HP QRYHQWD JUDXV 6XDV SRVLŠ¡HV WDPDQKR GLVSRVLŠ¼R H visibilidade devem ser repensadas.

91

Desenvolvimento e Performance

A tecnologia dita boa parte do visual, a velocidade com a qual os novos UHFXUVRV SODWDIRUPDV GH GHVHQYROYLPHQWR H WLSRV GH LQWHUDŠ¡HV VXUJHP FKHJD D VHU DVVXVWDGRU 1HVWD HWDSD GR SURMHWR VHU¼R DSUHVHQWDGRV assuntos que podem fugir ao conhecimento do designer, por estarem UHODFLRQDGRV D HWDSD GH GHVHQYROYLPHQWR GH VRIWZDUHV ‹ QHFHVV£ULR acompanhar mais de perto os recursos que os desenvolvedores possuem SDUD GDU YLGD ¢V DSOLFDŠ¡HV DͤP Q¼R V¾ GH VDEHU XP SRXFR PDLV VREUH todo o processo, mas tambÊm para evitar que uma solução aparentemente perfeita, se perca em meio a inviabilidade tÊcnica.

2 ;FRGH  D DSOLFDŠ¼R XVDGD SDUD R GHVHQYROYLPHQWR GH DSOLFDŠ¡HV SDUD RV GLVSRVLWYRV $SSOH  RQGH WRGRV RV HOHPHQWRV GR SURMHWR V¼R DJUXSDGRV JDQKDP VXDV IXQŠ¡HV DWUDYV GH F¾GLJRV GH SURJUDPDŠ¼R H IHFKDGRV HP forma de aplicação para serem disponibilizados na Apple Store25.

;FRGH DSOLFDŠ¼R XVDGD SDUD GHVHQYROYHU DSOLFDWLYRV GR VLVWHPD L26

Não Ê comum fazer o desenvolvimento de uma aplicação partindo do zero, QRUPDOPHQWH VH XWLOL]D ELEOLRWHFDV FRPR DX[LOLR H F¾GLJRV M£ HVFULWRV (VWHV que podem ser alterados, em uma råpida analogia, podemos comparar a ̧6LWH RQGH DV DSOLFDŠ¡HV SDUD R VLVWHPD L26 V¼R GLVSRQLELOL]DGRV

93

XPD SHVTXLVD VHP¤QWLFD IHLWD SHOR GHVLJQHU 2V GHVHQYROYHGRUHV WDPEP buscam referências de códigos para desenvolvimento. Isto ocorre, não apenas para otimização, mas se trata de um modelo que em programação  FRQKHFLGR FRPR 09&26, que separa a aplicação em três distintas åreas, H GHVWD IRUPD FRQWULEXL SDUD R ERP IXQFLRQDPHQWR GD DSOLFDŠ¼R &RP HVWH processo se evita por exemplo que o programa se feche abruptamente, pelo aparelho não possuir memória disponível. Este conhecimento pode não ser de interesse do designer no momento em que a interface estå sendo desenhada, mas vai influenciar na experiência que o usuårio terå. $ RUGHP FRP TXH DV LQIRUPDŠ¡HV V¼R FDUUHJDGDV SRGH QD YHUGDGH VHU usada como camuflagem para o que Ê mais pesado, o fato do usuårio saber quanto tempo uma ação vai levar e saber que não precisa esperar R FDUUHJDPHQWR FRPSOHWR SDUD LQLFLDU D LQWHUDŠ¼R  GH JUDQGH DMXGD SDUD uma boa experiência.

As categorias sĂŁo carregadas rapidamente, e enquanto o usuĂĄrios decide qual ĂŠ a de seu interesse as imagens referentes a cada uma vĂŁo sendo carregadas.

̧6LJOD SDUD 0RGHO 9LHZ H &RQWUROOHU  XPD DUTXLWHWXUD GLYLGLU DV IXQFLRQDOLGDGHV GH XP VRIWZDUH

94

Resultado Final

$W HVWH PRPHQWR IRL GHVFULWR R SURFHVVR GH GHVHQYROYLPHQWR GR SURMHWR QHVWD ŸOWLPD HWDSD VHU£ DSUHVHQWDGR R UHVXOWDGR ͤQDO GD DSOLFDŠ¼R (OHPHQWRV GH GHVLJQ FRPR WLSRJUDͤD H JULG VHU¼R XVDGRV FRPR separadores para explicar cada etapa do layout, alÊm de haver uma comparação de sua concepção quando feita no meio digital em relação a mídia tradicional impressa.

2 ORJR GR VHUYLŠR  XPD MXQŠ¼R GH HOHPHQWRV TXH FDUDFWHUL]DP VHX VLJQLͤFDGR  XP HOHPHQWR JU£ͤFR FRPSRVWR UHVSHFWLYDPHQWH SRU XPD tela, e pictogramas utilizados para controle de reprodução de vídeo. Este elemento visual Ê seguido pelo nome do serviço criado com a mesma WLSRJUDͤD XVDGD QD DSOLFDŠ¼R

Explicação sobre a conceitualização do logo.

As cores tem um papel muito importante nesta identidade, pois com a ausência de elementos auxiliares como sombras, texturas, degradês e RXWURV HOHPHQWRV D KLHUDUTXL]DŠ¼R GRV HOHPHQWRV ͤFD D FDUJR GDV FRUHV H GD WLSRJUDͤD $R VH WUDEDOKDU HP XP GLVSRVLWLYR FRPR R L3DG VH OHYD vantagem na reprodução de cores, pois se trata de um mesmo dispositivo 97

para todos os usuårios. Não Ê como um monitor que pode descalibrar, ou uma peça impressa que pode ter o range de cor alterado dependendo do mÊtodo de impressão. A variação só ocorre com o lançamento de uma QRYD JHUDŠ¼R GR DSDUHOKR &RP LVWR IRL SRVV¯YHO H[SORUDU R XVR GH VXWLV YDULDŠ¡HV GH XPD PHVPD FRU H PHVPR DVVLP VXD GLIHUHQŠD VHU£ YLVLYHO para complementar os elementos deste tom são utilizados tons de cinza como auxiliares.

�cones 2 ¯FRQH GH XPD DSOLFDŠ¼R  R SULPHLUR FRQWDWR GR XVX£ULR FRP D PHVPD 6HX YLVXDO VLPSOLͤFDGR  UHIOH[R GD QHFHVVLGDGH GD V¯QWHVH YLVXDO GHYLGR ao pequeno tamanho em tela, onde divide espaço com as mais diversas DSOLFDŠ¡HV 'HYLGR D LVVR HVWH ¯FRQH SHUGHX D VXD SDUWH WH[WXDO SRLV VHX QRPH M£  DSUHVHQWDGR DEDL[R GR �FRQH GH IRUPD SDGURQL]DGD SDUD WRGDV DV RXWUDV DSOLFDŠ¡HV QR L3DG

�cone da aplicação no iPad.

AlÊm do ícone que representa a aplicação, existem os ícones da interface do usuårio. Estes simbolizam uma ação atravÊs de pictogramas, oferecendo ao usuårio a possibilidade clara de interação com o sistema. Isto acontece 98

pois os pictogramas utilizados são de comum conhecimento à maioria dos usuårios deste dispositivo, dispensando assim a necessidade de reflexão VREUH R FRQWHŸGR GD LQWHUDŠ¼R FDVR R ERW¼R VHMD DFLRQDGR 'HYLGR ¢V VXDV SHTXHQDV GLPHQV¡HV IRUDP XWLOL]DGRV SLFWRJUDPDV D EDVH GH IRUPDV geomÊtricas extremamente redutivas e um range cromåtico limitado a monocromia.

Elementos de controle da interface de reprodução.

&RPR  SRVV¯YHO QRWDU QD LPDJHP DQWHULRU Q¼R V¾ RV ¯FRQHV DSUHVHQWDP YLVXDO VLPSOLͤFDGR H SODQR 7RGD D DSOLFDŠ¼R VHJXH HVVD HVWUDWJLD YLVXDO esta Ê a principal característica do sistema, a apresentação de uma LQWHUIDFH VLPSOLͤFDGD H I£FLO GH VH XWLOL]DU

99

Interface 'H DFRUGR FRP 0HJJV R PLQLPDOLVPR FRPR FRQFHLWR JU£ͤFR WHYH LQ¯FLR QD +RODQGD FRP R PRYLPHQWR DUW¯VWLFR 'H 6WLMO LQLFLDGR HP SRU 7KHR van Doesburg. Seus trabalhos geomÊtricos tinham o propósito de buscar para a arte, as leis universais de equilíbrio e harmonia, e a inspiração para R PRYLPHQWR YHLR GR SLQWRU +RODQGV 3LHW 0RQGULDQ H VXD DUWH FXELVWD 2 autor argumenta que a adoção das cores primårias por Mondrian se deu SHOD LQIOXQFLD GH 0 + - 6FKRHQPDNHUV TXDQGR R PHVPR GHͤQLX TXH vermelho, amarelo e azul são as três cores essenciais, alÊm de tambÊm citar a horizontal e a vertical como os dois opostos quem fundamentaram a formação do nosso mundo.

3LHW 0RQGULDQ &RPSRVLŠ¼R ,,,

Tanto Mondrian quanto Van der Leck e Van Doesburg adotaram, alÊm dos SULQF¯SLRV M£ FLWDGRV R XVR GH FRUHV QHXWUDV FRPR SUHWR FLQ]D H EUDQFR H planos chapados limitados a retângulos e quadrados. Meggs argumenta que os autores acreditavam que os novos acontecimentos políticos trariam 100

XPD QRYD HUD GH REMHWLYLGDGH H FROHWLYLVPR &RP R SDVVDU GRV DQRV VHXV SULQF¯SLRV IRUDP OHYDGRV DGLDQWH DWUDYV GH DUTXLWHWRV FRPR /XGZLJ 0LHV YDQ GHU 5RKH H GHVLJQHUV LQGXVWULDLV FRPR 'LHWHU 5DPV UHVSRQV£YHO SHORV LFœQLFRV DSDUHOKRV GD %UDXQ FKHJDUHP DRV GLDV GH KRMH Segundo Kenna27, o estado atual do racionalismo estå em uma UHLQWHUSUHWDŠ¼R GR PHVPR D DXWRUD DͤUPD TXH HVWD GLVVHPLQDGD DGRŠ¼R GR HVWLOR GH GHVLJQ PLQLPDOLVWD SRGH WHU FRPHŠDGR VXSHUͤFLDOPHQWH PDV coincidiu com uma retomada do interesse histórico e teórico a respeito GRV GHVLJQHUV PRGHUQLVWDV (VWD DͤUPDŠ¼R SRGH VHU IHLWD SHOR DXPHQWR GR QŸPHUR GH SXEOLFDŠ¡HV OLJDGDV DR WHPD QRV ŸOWLPRV DQRV 6HJXQGR D DXWRUD D PHWRGRORJLD SXEOLFDGD SHOR WLS¾JUDIR VX¯ŠR (PLO 5XGHU HP VXD REUD 7\SRJUDSK\H $ 0DQXDO IRU 'HVLJQ FRQVLVWH HP XP DSDQKDGR GH FRQFHLWRV SDUD DYDOLDŠ¼R GR XVR GH WLSRJUDͤD H  EDVHDGR HP SULQF¯SLRV de design como contraste, forma e contra forma, tons de cinza e ritmo. A DXWRUD GHIHQGH TXH HVWH PWRGR Q¼R  HVSHF¯ͤFR SDUD XPD ŸQLFD WHFQRORJLD e que tambÊm Ê semelhante aos mÊtodos de avaliação contemporâneos XWLOL]DGRV QRV FDPSRV GH +&,28.

Este resgate ao conceito minimalista tem recebido o nome de design SODQLͤFDGR VHX XVR SRGH VHU QRWDGR WDQWR HP DSOLFDŠ¡HV P¾YHLV TXDQWR HP ZHEVLWHV 6HX UHVJDWH VH ID] QHFHVV£ULR HP XPD SRFD HP TXH D TXDQWLGDGH de informação gerada Ê inversamente proporcional à capacidade humana de consumo da mesma. É uma forma de que quem produz o conteúdo, o VLQWHWL]H H R VLPSOLͤTXH HP SURO GR XVX£ULR 2 FRQFHLWR JDQKRX DLQGD PDLV IRUŠD FRP R ODQŠDPHQWR GR VLVWHPD RSHUDFLRQDO :LQGRZV GD 0LFURVRIW SRU VHU XP VRIWZDUH DPSODPHQWH XWLOL]DGR ORJR VXD QRYD LQWHUIDFH SDVVRX D LQIOXHQFLDU RXWUDV DSOLFDŠ¡HV ,VWR RFRUUHX SRLV SDUD PXLWRV VH WRUQRX uma maneira de promover facilidade e simplicidade por meio de uma ̧.(11$ +LODU\ 'HVLJQ ,VVXHV 9ROXPH 18PEHU :LQWHU ̧$EUHYLDŠ¼R HP LQJOV SDUD R FDPSR GH +XPDQ &RPSXWHU ,QWHUDFWLRQ

101

interface minimalista.

7HOD LQLFLDO SHUVRQDOL]ÂŁYHO GR :LQGRZV

2 GHVLJQ SODQLͤFDGR  XPD WFQLFD TXH Q¼R LQFOXL DWULEXWRV WULGLPHQVLRQDLV efeitos como sombras, bordas, relevos, gradientes ou outras ferramentas que possam transmitir um efeito de elevação ou criar profundidade, e que normalmente utilizados para indicar ao usuårio que ali existe uma interação.

Seu visual tende a ser simples e de fåcil utilização, fato que contribui para sua popularização, principalmente em interfaces de dispositivos móveis.

A ausência dos elementos citados, em contrapartida, exige mais atenção do designer, pois ele deve compensar a falta destes elementos de outras PDQHLUDV 6HX IRFR GHYH VH YROWDU DR XVR GH FRUHV YLYDV WLSRJUDͤD VHP VHULID H HOHPHQWRV JHRPWULFRV VLPSOLͤFDGRV

Nesta última etapa, serão apresentadas as interfaces desenhadas para a DSOLFDŠ¼R H TXH VHJXHP HVWH FRQFHLWR GH SODQLͤFDŠ¼R FRPR UHFXUVR SDUD YLVDU D REMHWLYLGDGH H VLPSOLFLGDGH QD WUDQVPLVV¼R GD LQIRUPDŠ¼R 6XD 102

apresentação segue o fluxo do que seria o primeiro contato do usuário com o serviço. Partindo da abertura da aplicação, passando pelo cadastro, criação de Streams (listas de reprodução), reprodução do conteúdo, entre outros.

Tela de abertura

$ WHOD GH DEHUWXUD « XP DUWLͤFLR GRV VLVWHPDV RSHUDFLRQDLV SDUD LQGLFDU ao usuário que sua ação foi iniciada, e que a aplicação solicitada está sendo aberta. Sua duração é de poucos segundos e por isso a informação FRQWLGD GHYH VHU HͤFLHQWH H VLPSOHV

103

Tela de login

Esta tela é o primeiro contado de interação do usuário com a aplicação, são solicitados apenas os campos usuário e senha para o acesso ao serviço. A imagem na esquerda é aleatória, e trás cenas das diversas séries disponíveis no serviço.

104

7HOD GH FRQͤJXUD©¥R VRFLDO

1HVWH SULPHLUR DFHVVR « VROLFLWDGR DR XVX£ULR D FRQͤJXUD©¥R GH DOJXQV LWHQV 2V GDGRV GH P¯GLD VRFLDO V¥R VROLFLWDGRV D ͤP GH TXH R XVX£ULR SRVVD FRPSDUWLOKDU DV FHQDV TXH GHVHMDU QDV UHGHV VRFLDLV

105

Tela de tutorial

&RQWLQXDGR D FRQͤJXUDŠ¼R LQLFLDO R XVX£ULR  FRQYLGDGR D FULDU R VHX primeiro Stream, para assim se familiarizar com o funcionamento do serviço.

106

Tela principal

(VWD « WHOD SULQFLSDO DWUDY«V GHOD « SRVV¯YHO DFHVVDU WRGDV DV IXQ©·HV GD DSOLFD©¥R 1R PHQX ODWHUDO H[LVWHP FRQH[·HV SDUD DV RXWUDV IXQ©·HV GD DSOLFD©¥R H QD £UHD FHQWUDO DV V«ULHV TXH FRPS·H R 6WUHDP VHOHFLRQDGR ( QD EDUUD VXSHULRU H[LVWH XP PHQX SDUD DFHVVDU DV LQIRUPD©·HV GH XVX£ULR H VHQKD SDUD SRVV¯YHLV DOWHUD©·HV DVVLP WDPE«P FRPR RV GDGRV GH mídias sociais.

107

Tela Popular

7RGRV RV 6WUHDPV FULDGRV ͤFDP GLVSRQ¯YHLV SDUD RXWURV XVX£ULRV SRGHQGR assim ser adicionados por eles, mas a edição do mesmo só Ê possível por quem o criou. Eles aparecem por ordem de popularidade, indicada pelo número de Streamers (usuårios) que adicionaram em suas contas.

108

Tela Status

(VWD « XPD IRUPD GH JDPHͤFD©¥R DSOLFDGD DR VHUYL©R PRWLYDQGR R XVX£ULR D DOFDQ©DU REMHWLYRV HVSHF¯ͤFRV 0DV LVWR Vµ VHU£ SRVV¯YHO PDQWHQGR D XWLOL]D©¥R GR VHUYL©R D ͤP GH DOFDQ©DU D PHWD SURSRVWD

109

Tela Social

Nesta tela são mostrados os compartilhamentos de imagens realizados por usuários do Stream, que também são um contato nas redes sociais.

110

Player

2 SOD\HU  DFLRQDGR TXDQGR XP 6WUHDP  VHOHFLRQDGR VHQGR DVVLP ele inicia a reprodução do episódio em que o usuårio parou na última UHSURGXŠ¼R (VWD IRL D DSUHVHQWDŠ¼R GR UHVXOWDGR ͤQDO GDV WHODV GD aplicação, em seguida outros conceitos de design aplicados a estas telas serão abordados.

111

Imagens 2V IRUPDWRV GH LPDJHP XVDGRV HP XPD DSOLFDŠ¼R GH L3DG V¼R RV PHVPR XVDGRV QR GHVHQYROYLPHQWR GH ZHEVLWHV $UTXLYRV FRP H[WHQV¼R -3* H 31* SRGHP VHU XWLOL]DGRV SDUD HOHPHQWRV JU£ͤFRV FRPSRVWRV FRPR IRWRV PDV SDUD ¯FRQHV H RXWURV HOHPHQWRV JU£ͤFRV GH FDUDFWHU¯VWLFD vetorial, Ê aconselhado o uso do formato SVG. Este tipo de arquivo pode ser expandindo para diversos tamanhos sem perder a qualidade, alÊm de ser um formato relativamente leve de arquivo evitando assim que se perca performance no uso da aplicação.

Grid 6HJXQGR 6$0$5$ 7LPRWK\ S R JULG  XPD PDQHLUD GH DJUXSDU RV GLYHUVRV HOHPHQWRV TXH FRPS¡HP XPD SHŠD R XVR GHVWD WFQLFD WUD] FRPR YDQWDJHQV FODUH]D HͤFLQFLD HFRQRPLD GH WHPSR H LGHQWLGDGH ,VWR Ê possível pois o grid hierarquiza a informação e a organiza de maneira FRHUHQWH DR REMHWLYR GR GHVLJQHU 3DUD R SURMHWR GR 6WUHDP IRUDP XWLOL]DGRV dois grids, onde o primeiro leva em consideração a årea mínima sensível ao WRTXH H R RXWUR  EDVHDGR QD XVDELOLGDGH (VWH VHJXQGR DMXGD D SRVLFLRQDU os elementos em uma região de fåcil interação por parte do usuårio, um ORFDO TXH VHMD SRVV¯YHO GH VH DOFDQŠDU FRP XP WRTXH

DifĂ­cil

MĂŠdio FĂĄcil

2 JULG GD HVTXHUGD YLVD D XVDELOLGDGH LQGLFDQGR R WDPDQKR P¯QLPR GH LQWHUDŠ¼R M£ R GD GLUHLWD LQGLFD DV £UHDV GH PDLRU GLͤFXOGDGH SDUD WRTXH HP WHOD 112

Alguns elementos do grid para um dispositivo digital, como o iPad, SRVVXHP DOJXPDV GLIHUHQFLDŠ¡HV SDUD LPSUHVVRV 1¼R H[LVWHP PDUJHQV SRLV GLIHUHQWH GD SUHRFXSDŠ¼R FRP R UHͤOH QR DFDEDPHQWR GH XP impresso, as telas destes dispositivos podem ser aproveitadas atÊ o limite GH VXD ERUGD 2XWUR LWHP TXH RV GLIHUHQFLD  R IDWR GR DSDUHOKR VXSRUWDU GXDV RULHQWDŠ¡HV R TXH H[LJH D FULDŠ¼R GH XP JULG SDUD GLVWULEXLŠ¼R GH elementos na horizontal e outro para vertical.

7LSRJUDͤD $W DOJXQV DQRV DWU£V DV IRQWHV HUDP SURMHWDGDV SDUD LPSUHVVRV PHVPR VHQGR HVWDV GHVHQKDGDV H ͤQDOL]DGDV HP XP FRPSXWDGRU H posteriormente impressas por diversas tecnologias de impressão. Antes GRV GLVSRVLWLYRV P¾YHLV DV IRQWHV M£ FRPHŠDUDP D VH DGDSWDU DR FRQWHŸGR digital para monitores. Isto ocorreu, pois os sites trouxeram consigo muitos HOHPHQWRV GR GHVLJQ LPSUHVVR FRPR JULG HVSDŠR GH UHVSLUR H WLSRJUDͤD 0DV FRP DSDUHOKRV W¼R SHTXHQRV H FRP WHODV GH DOWD GHͤQLŠ¼R QRYDV fontes tiveram que ser desenhadas, com características de adaptabilidade em diferentes tamanhos de tela. Em 2011, pensando neste propósito, o VLVWHPD $QGURLG GR *RRJOH DGRWRX QD YHUV¼R ̸,FH &UHDP 6DQGZLFK̚ GH VHX VLVWHPD RSHUDFLRQDO XPD QRYD IRQWH FKDPDGD 5RERWR FULDGD SRU XP IXQFLRQ£ULR GD HPSUHVD FKDPDGR &KULVWLDQ 5REHUWVRQ H GHVFULWD SHOR mesmo como uma fonte desenhada para dispositivo de alta resolução e alinhada com a interface do novo sistema.

113

)DP¯OLD GH IRQWHV 5RERWR HP VXDV GLIHUHQWHV YDULDŠ¡HV

6HX ODQŠDPHQWR IRL VHJXLGR GH XPD VULH GH DQ£OLVHV H FRPSDUDŠ¡HV $OJXQV HVSHFLDOLVWDV HP WLSRJUDͤD DͤUPDUDP TXH HOD SRVVXL WUDŠRV GD +HOYHWLFD W¼R XWLOL]DGD SRU VXD ULYDO $SSOH QR VLVWHPD RSHUDFLRQDO L26 TXH LQFRUSRUD WDQWR D +HOYHWLFD TXDQWR D +HOYHWLFD 1HXH FRPR IRQWHV SDGU¼R GH VLVWHPD 6WHSKHQ &ROHQ GR VLWH 7\SRJUDSKLFD IRL PDLV DOP H IH] XP comparativo de seu desenho com outras fontes pois, segundo ele, ela Ê XPD PLVWXUD GH +HOYHWLFD 0\ULDG 8QLYHUV ',1 H 5RQQLD (VWD IRL D IRQWH HVFROKLGD SDUD R SURMHWR SRLV DOP GH VHU SURMHWDGD SDUD VH DGDSWDU DV telas dos dispositivos móveis, Ê uma fonte aberta para uso livre.

114

&RPSDUDWLYR GD IRQWH 5RERWR FRP VXDV VHPHOKDQWHV

Ela foi selecionada, não só por sua adaptação às telas dos dispositivos móveis, mas também por atender a características dos layouts minimalistas H SODQRV 2 TXH VLJQLͤFD TXH D PHVPD Q¥R GHYH SRVVXLU VHULID H GHYH proporcionar uma boa variedade de pesos, visando a hierarquização de elementos textuais.

115

Considerações Finais

Se aventurar em uma årea ainda pouco evoluída pode parecer algo intimidador de começo, mas o processo que se decorre da pesquisa torna o trabalho motivador. A årea de design de interface em dispositivos móveis estå em uma fase de formação de conhecimento, sua evolução estå ligada não só a adoção no uso destes aparelhos, mas tambÊm pelo entendimento GH FRPR HVWD WHFQRORJLD DIHWD D WRGRV 2 L3DG GLVSRVLWLYR P¾YHO DERUGDGR QHVWH WUDEDOKR SRU PDLV TXH VHMD R PDLV GLIXQGLGR  DSHQDV XP GRV diversos modelos, isto claro, sem contar os smartphones e recentemente ODQŠDGRV WDEOHWV GH PHQRUHV SURSRUŠ¡HV $ IXQGDPHQWDŠ¼R WH¾ULFD PRVWURX TXH D WHFQRORJLD XVDGD KRMH GHULYD GH SHQVDPHQWRV H LGHLDV TXH M£ YLQKDP VHQGR WHVWDGDV K£ PXLWRV DQRV PDV que só com o correto alinhamento de tecnologias foi possível produzir XP DSDUHOKR FRP HVWDV IXQFLRQDOLGDGHV 2 HVWXGR GHVWH FDPLQKR WUDŠDGR DW R PRPHQWR HP TXH HVWDPRV KRMH SRGH DMXGDU D FRPSUHHQGHU Q¼R só o porquê de estarmos utilizando as tecnologias móveis para os mais GLIHUHQWHV ͤQV PDV WDPEP SDUD DMXGDU D RULHQWDU R TXH SRGH YLU D VHJXLU 2 XVR GD LQWHUIDFH FRPR FRPXQLFDGRU Q¼R VH UHVXPH DSHQDV HP VHU HͤFLHQWH RX DSUHVHQWDU ERD FDUDFWHU¯VWLFD YLVXDO HOD SRGH VHU FRPSDUDGD D SHOH RX VHMD HOD  D SDUWH YLV¯YHO GH DOJR PXLWR PDLV FRPSOH[R H GH muitas dependências para o bom funcionamento. Somente a experiência do usuårio no uso da aplicação Ê que vai revelar se todo o esforço de seu SURMHWR IRL EHP H[HFXWDGR SRLV IUXVWUDŠ¡HV GH XVR SRGHP DFRQWHFHU HP qualquer situação. Em um aplicativo móvel podemos imaginå-las como D GLVW¤QFLD HQWUH R XVX£ULR H D LQIRUPDŠ¼R TXH GHVHMD 4XDQWR PDLRU IRU esta distância, menor serå a qualidade de uso do aplicativo. Ele serå visto DSHQDV FRPR XPD IHUUDPHQWD H QDGD PDLV RX VHMD XPD H[SHULQFLD VHP impacto.

117

3RU RXWUR ODGR TXDQGR RV REMHWLYRV V¼R DWLQJLGRV IDFLOPHQWH RX R VLVWHPD consegue anteceder uma necessidade que ainda desconhecemos, nos sentimos no mínimo satisfeitos. Quando isto acontece, se sabe que a experiência do usuårio foi completa, e por mais que esta satisfação pareça VXEMHWLYD D PLVV¼R GD LQWHUIDFH FRPR FRPXQLFDGRU IRL FXPSULGD A tarefa de conseguir criar essa empatia com o usuårio não Ê realizada SRU VRUWH HOD  IUXWR GR WUDEDOKR H SHVTXLVD GH SURͤVVLRQDLV GDV PDLV GLIHUHQWHV £UHDV TXH SURMHWDUDP HVWUXWXUDUDP H SURWRWLSDUDP GLYHUVDV YHUV¡HV GH XPD VROXŠ¼R 5HDOL]DQGR GLYHUVRV WHVWHV GH VXDV IRUPDV IOX[RV hierarquias e demais aspectos para proporcionar ao usuårio a resolução de sua necessidade. Unindo design e tecnologia, para criar uma solução FHQWUDGD QR SU¾SULR XVX£ULR ͤQDO H VXDV PDLV GHIHUHQWHV FDUDFWHU¯VWLFDV pessoais. &ULDU HVVD HPSDWLD FRP R XVX£ULR Q¼R  XPD TXHVW¼R GH VRUWH HOD  IUXWR GR WUDEDOKR H SHVTXLVD GH SURͤVVLRQDLV GDV PDLV GLIHUHQWHV £UHDV TXH SURMHWDUDP HVWUXWXUDUDP H SURWRWLSDUDP GLYHUVDV YHUV¡HV GH XPD VROXŠ¼R 5HDOL]DQGR GLYHUVRV WHVWHV GH VXDV IRUPDV IOX[RV KLHUDUTXLDV H GHPDLV aspectos para proporcionar ao usuårio a resolução de sua necessidade.

Unindo design e tecnologia, para criar uma solução centrada no próprio XVX£ULR ͤQDO H VXDV PDLV GHIHUHQWHV FDUDFWHU¯VWLFDV SHVVRDLV

118

119

Referências %LEOLRJU£ͤFDV

%216,(3( *XL 'HVLJQ FXOWXUD H VRFLHGDGH 6¥R 3DXOR %OXFKHU &+$1'/(5 &DURO\Q 81*(5 5XVV 2 JXLD SDUD SURMHWDU 8; 5LR GH -DQHLUR Alta Books, 2009. )/866(5 9LO«P 2 PXQGR FRGLͤFDGR l HG 6¥R 3DXOR &RVDF 1DLI\ -2+1621 6WHYHQ &XOWXUD GD LQWHUIDFH 5LR GH -DQHLUR =DKDU 0$('$ -RKQ $V OHLV GD VLPSOLFLGDGH YLGD QHJµFLRV WHFQRORJLD GHVLJQ 6¥R 3DXOR 1RYR &RQFHLWR 35((&( -HQQ\ 52*(56 <YRQQH 6+$53 +HOHQ 'HVLJQ GH ,QWHUD©¥R DO«P GD LQWHUD©¥R KRPHP FRPSXWDGRU 3RUWR $OHJUH %RRNPDQ 7,':(// -HQLIHU 'HVLJQLQJ ,QWHUIDFHV l HG 6HEDVWRSRO 2̵5HLOO\ 0(**6 3KLOLS % +LVWµULD GR GHVLJQ JU£ͤFR 6¥R 3DXOR &RVDF 1DLI\ &+$7),(/' 7RP &RPR YLYHU QD HUD GLJLWDO 5LR GH -DQHLUR 2EMHWLYD

121

ReferĂŞncias: Sites Consultados

Arquitetura de Informação Sites relacionados a estruturação de informação: 8VHU ([SHULHQFH 'HVLJQ KWWS VHPDQWLFVWXGLRV FRP SXEOLFDWLRQV VHPDQWLFV SKS 8QGHUVWDQGLQJ ,QIRUPDWLRQ $UFKLWHFWXUH KWWS SUH]L FRP DDIPY\D EN W XQGHUVWDQGLQJ LQIRUPDWLRQ DUFKLWHFWXUH

Cores Seleção de cores para aplicações: )ODW GHVLJQ FRORUV KWWS GHVLJQPRGR FRP IODW GHVLJQ FRORUV

Ícones Bibliotecas de pictogramas para ícones: &UHDWH :HE )RQWV KWWS ZZZ ZHEGHVLJQHUGHSRW FRP KRZ WR PDNH \RXU RZQ LFRQ :HEIRQW %LEOLRWHFD FRQHV KWWS IRQWHOOR FRP %LEOLRWHFD FRQHV KWWS ZZZ JXLGHERRNJDOOHU\ RUJ LFRQV

Interface Referências de criação e da história das interfaces: ,QWHUIDFH ,QVXOWV KWWS ZZZ IOLFNU FRP JURXSV LQVXOWV ,QWHUIDFH 3UHVHQWDWLRQV KWWS ZZZ OXNHZ FRP SUHVRV :LQGRZV 3KRQH 3DWWHUQV KWWS FKRFRODGHVLJQ FRP SDGURHV GH LQWHUIDFH GR ZLQGRZV SKRQH SDUWH :LQGRZV 3KRQH 3DWWHUQV KWWS FKRFRODGHVLJQ FRP SDGURHV GH LQWHUIDFH GR ZLQGRZV SKRQH SDUWH :LQGRZV 3KRQH 3DWWHUQV KWWS FKRFRODGHVLJQ FRP SDGURHV GH LQWHUIDFH GR ZLQGRZV SKRQH SDUWH 123

$UWLJRV KWWS ZZZ DOLVWDSDUW FRP WRSLFV XVHUVFLHQFH DFFHVVLELOLW\ /LQKD GR WHPSR GH LQWHUD©·HV KWWSV ZZZ IDFHERRN FRP /,$8)6&DU /LQKD GR WHPSR GH *8,̵V KWWS ZZZ JXLGHERRNJDOOHU\ RUJ WLPHOLQHV ,QWHUIDFH ;HUR[ $OWR KWWS WRDVW\WHFK FRP JXLV DOWR KWPO 7HODV GH DEHUWXUD GH VRIWZDUHV KWWS ZZZ JXLGHERRNJDOOHU\ RUJ splashes 8, *XLGHOLQHV IRU PRELOH KWWS ZZZ PRELOH[ZHE FRP EORJ XL JXLGHOLQHV mobile-tablet-design

Prototipagem Informações sobre como prototipar aplicações: 6NHWFKV SDUD L3DG KWWS VQHDNSHHNLW FRP SDG VNHWFKVKHHWV :LUHIUDPLQJ :HE $SSV KWWS LQVLGHLQWHUFRP LR ZLUHIUDPLQJ IRU ZHE DSSV 8; DQG 8, &KLFNHQ DQG (JJ KWWS ZZZ ZLUHIUDPHZHGQHVGD\ FRP X[ and-ui-chicken-and-egg +RZ ZH ZLUHIUDPH SURMHFWV KWWS ZZZ ZLUHIUDPHZHGQHVGD\ FRP 3ODQHMDQGR ZLUHIUDPHV KWWS ZZZ VOLGHVKDUH QHW EUDGKD\QHV VWUDWHJ\ DQG ZLUHIUDPHV SODQ RU GLH

Patterns Bibliotecas de referências sobre padrões em aplicativos e websites: $SOLFD©·HV KWWS ZZZ PDNHEHWWHUDSSV FRP $QGURLG KWWS ZZZ DQGURLGXLSDWWHUQV FRP $QGURLG KWWS DQGURLGSWWUQV FRP $QGURLG KWWS GHYHORSHU DQGURLG FRP GHVLJQ SDWWHUQV LQGH[ KWPO 'LVSRVLWLYRV 0µYHLV KWWS RXUWK FRP ZLNL ,QGH[ 'LVSRVLWLYRV 0µYHLV KWWS ZZZ PRELOH SDWWHUQV FRP 'LVSRVLWLYRV 0µYHLV KWWS LQVSLUHG XL FRP 124

'LVSRVLWLYRV 0µYHLV KWWS ZZZ ORYHO\XL FRP 'LVSRVLWLYRV 0µYHLV KWWS ZZZ PRELOHGHVLJQSDWWHUQJDOOHU\ FRP mobile-patterns.php 'LVSRVLWLYRV 0µYHLV KWWS SWWUQV FRP %RP

'LVSRVLWLYRV 0µYHLV KWWS ZZZ SDWWHUQVRIGHVLJQ FR XN 'LVSRVLWLYRV 0µYHLV KWWS ZZZ WDSSJDOD FRP 'LVSRVLWLYRV 0µYHLV KWWS FUHDWWLFD FRP PRELOH ODWHVW GHVLJQV 'LVSRVLWLYRV 0µYHLV KWWS GULEEEOH FRP WDJV LSKRQH 'LVSRVLWLYRV 0µYHLV KWWS WDSIDQF\ FRP 1RNLD KWWS ZZZ GHYHORSHU QRNLD FRP &RPPXQLW\ :LNL &DWHJRU\ 0RELOHB'HVLJQB3DWWHUQV L26 KWWS ZZZ LRVSLUDWLRQV FRP L26 KWWS FVVLSKRQH FRP L26 KWWS GHYHORSHU DSSOH FRP OLEUDU\ LRV GRFXPHQWDWLRQ 8VHU([SHULHQFH &RQFHSWXDO 0RELOH+,* ,QWURGXFWLRQ ,QWURGXFWLRQ KWPO L3DG KWWS ZZZ PDNHEHWWHUDSSV FRP FDW LSDG L3DG KWWS ODQGLQJSDG RUJ 3DWWHUQV GLYHUVDV KWWS ZZZ IOLFNU FRP SKRWRV IDFWRU\MRH FROOHFWLRQV 3DWWHUQV GLYHUVDV KWWS SDWWHUQWDS FRP 3DWWHUQV GLYHUVDV KWWS ZZZ ZHOLH FRP SDWWHUQV LQGH[ SKS 3DWWHUQV GLYHUVDV KWWS XL SDWWHUQV FRP 3DWWHUQV GLYHUVDV KWWS GHYHORSHU \DKRR FRP \SDWWHUQV 3DWWHUQV GLYHUVDV KWWS GHYHORSHU \DKRR FRP \SDWWHUQV :LUHIUDPHV KWWS ZLUHIUDPHV WXPEOU FRP

Usabilidade Referências sobre a preocupação com a usabilidade do usuário: 7HVWH $% KWWS ZZZ VPDVKLQJPDJD]LQH FRP PXOWLYDULDWH 125

WHVWLQJ D VFLHQWLͤF PHWKRG RI RSWLPL]LQJ GHVLJQ $UWLJRV VREUH XVDELOLGDGH KWWS ZZZ XVDEOHZHE FRP $UWLJRV VREUH XVDELOLGDGH KWWS ZZZ XVHLW FRP $UWLJRV VREUH XVDELOLGDGH KWWS ZZZ XVDELOLW\ͤUVW FRP $UWLJRV VREUH XVDELOLGDGH KWWS ZZZ XVDELOLW\ JRY 0HGLGRUHV KWWS ZZZ FOLFNWDOH FRP (\H WUDFNLQJ KWWS ZZZ FUD]\HJJ FRP

UX - Experiência do Usuário Artigos e ferramentas ligadas a experiência do usuário: )HUUDPHQWDV KWWSV ZZZ PDNHVHWV FRP X[ WRROV $JUXSDPHQWR GH VLWHV VREUH 8; KWWS ZZZ WKHX[ERRNPDUN FRP )HUUDPHQWDV SDUD PHGL©¥R KWWS ZZZ PHDVXULQJXVDELOLW\ FRP EORJ X[ benchmarks.php $UWLJRV VREUH 8; 0RELOH KWWS ZZZ LQVSLUHX[ FRP $UWLJRV VREUH 8; KWWS X[PDJ FRP EURZVH WRSLFV

126