Issuu on Google+

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 3URWRWLSDJHPGHEDL[DͤGHOLGDGH ............................................................... 73 3URWRWLSDJHPGHDOWDͤ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 SDUDVHREWHUXPDFRPXQLFDŠ¼RHͤ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 QREULHͤQJGRSURMHWR$FRPXQLFDŠ¼RHͤFLHQWHDLQGDPDLVLPSRUWDQWH quando atrelada a dispositivos móveis que, assim como o próprio nome M£VXJHUHXPDUWLI¯FLRP¾YHOTXHDFRPSDQKDRXVX£ULRTXH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Š¼RGHFRPSXWDGRUFRPRRVGHPHVDTXHHVWDPRVDFRVWXPDGRV A quantidade de pequenos dispositivos móveis que invadiram a rotina das SHVVRDVUHGHͤQLXRFRQFHLWRGHFRPSXWDGRU(VWHVGLVSRVLWLYRVSRVVXHP 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, REMHWLYRVTXHSRGHPVHUDIHWDGRVSRUUHVWULŠ¡HVWFQLFDVHGHUHSURGXŠ¼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ͤFDPHQWHSDUDRL3DGGD$SSOH8PDDSOLFDŠ¼RSDUDHQWUHWHQLPHQWR chamada Stream, que explora de diferentes maneiras o consumo de conteúdo audiovisual atravÊs do tablet. Seu desenvolvimento tem duas ̧%216,(3(*XL'HVLJQFXOWXUDHVRFLHGDGH6¼R3DXOR%OXFKHU ̧-2+16216WHYHQ&XOWXUDGDLQWHUIDFH5LRGH-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 DSOLFDGRVSDUDVHSURMHWDUSDUDXPDLQWHUIDFHGHGLVSRVLWLYRP¾YHOHDVVLP LGHQWLͤFDUPWRGRVHSURFHVVRVTXHPHOKRUVHDGDSWHPDHVWDͤ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 FRPRRVFRQKHFHPRVVHFRPSRUWDPQHVVDQRYDJDPDGHLQWHUDŠ¡HVH 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 QRGHVHQYROYLPHQWRGRSURMHWR$FUHGLWRTXHDIRUPDFRPRHOHIRLSHQVDGR 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 YLHVHVVHQGRHOHVͤORV¾ͤFRVRFLDOHWHFQRO¾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 FRPF¾GLJRVHLPDJHQV3DUD)OXVVHUYLYHPRVHPXPPXQGRFRGLͤFDGR aprendido com gestos, o que na verdade seria uma segunda natureza, VHQGRDSULPHLUD DTXHODTXHFLUFXQGDWRGRHVWHPXQGRFRGLͤFDGR(VWH modo de pensar molda sua teoria sobre como a comunicação humana Ê IHLWD6HJXQGRRDXWRURREMHWLYRGRDWRGHVHFRPXQLFDUSDUDQRVID]HU esquecer de como somos sozinhos no mundo, e condenados a morte, SHQVDPHQWRTXHFRPS¡HRPXQGRGD̸QDWXUH]D̚$FRPXQLFDŠ¼RKXPDQD  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. 3DUDTXHXPDLQIRUPDŠ¼RVHMDSURGX]LGDQHFHVV£ULRXPDSUYLDWURFD GHLQIRUPDŠ¡HVGLVSRQ¯YHLVSDUDDVVLPVLQWHWL]DUXPDQRYDLQIRUPDŠ¼R Necessariamente, este armazenamento se då pelo compartilhamento, SDUDTXHDVVLPQ¼RVHSHUFDPRXSLRUTXHVHMDPHVTXHFLGDV 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 79DVWHODVGHFLQHPDFDUWD]HVHUHYLVWDV2DXWRUWDPEPFRPSDUDWRGD HVWDLQIRUPDŠ¼RYLVXDOFRPDVOLQKDVHVFULWDV̸$VOLQKDVHVFULWDVDSHVDU de serem muito mais frequentes do que antes, vêm se tornando menos LPSRUWDQWHVSDUDDVPDVVDVGRTXHDVVXSHUI¯FLHV̚ S  ̧)/866(59LOP2PXQGRFRGLͤFDGRlHG6¼R3DXOR&RVDF1DLI\

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 RWH[WRGRFRPHŠRDRͤPVHTXLVHUPRVHQWHQGHUVXDPHQVDJHP-£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·HVVHJXQGR)OXVVHU S 

Flusser acredita que uma mudança radical na estrutura de nossa civilização SRGHDFRQWHFHUM£TXH̸RSHQVDPHQWRHPOLQKD̚HVW£VHQGRDEVRUYLGRSHOR ̸SHQVDPHQWRHPVXSHUI¯FLH̚

Ficção conceitual

Ficção imagÊtica

Pensamento em linha

Pensamento em superfĂ­cie

Elite

Massa )LFŠ¡HVVHJXQGR)OXVVHU S 

$ͤFŠ¼RLPDJWLFDWLGDWDPEPFRPRSHQVDPHQWRHPVXSHUI¯FLHHUDYLVWD FRPRXPFRQFHLWRGHFRQWHŸGRSDUDDPDVVD(PXPDWHQWDWLYDGHMXQWDU 12


estes dois pensamentos, tanto o linear quanto o de superfície, se chegou a XPSHQVDPHQWRLPDJWLFRFRQVFLHQWHHFODURPDVVLͤFDQGRDLQIRUPDŠ¼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 UHGHVVRFLDLV

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[RGHͤFŠ¼R)OXVVHU SHFRPSDUDWLYRFRPDVUHGHVVRFLDLV 

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 SURYRFDUVHQVDŠ¡HVFRUS¾UHDV6HQGRDVVLPRSHQVDPHQWRHPVXSHUI¯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 ODGRRSHQVDPHQWROLQHDU1HVWHSRQWRRDXWRUSURS¡HXPDFRPELQDŠ¼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[SOLFDHVWHFRQFHLWR Vamos então buscar um espectador de TV num futuro próximo. Ele WHU£¢VXDGLVSRVLŠ¼RXPYLGHRFDVVHWHFRPͤWDVGHY£ULRVSURJUDPDV Estarå apto a mesclå-los e a compor, assim, seu próprio programa. Mas SRGHU£ID]HUDLQGDPDLVͤOPDUVHXSURJUDPDHRXWURVQDVHTXQFLD LQFOXVLYHͤOPDUDVLPHVPRUHJLVWUDULVVRQXPDͤWDHGHSRLVSDVVDUR 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(5S

1RV GLDV GH KRMH LVWR  IHLWR PXLWR PDLV IDFLOPHQWH FRP UHFXUVRV DPSODPHQWHGLVSRQ¯YHLVFRPRͤOPDGRUDVGHFHOXODUZHEFDPVHF¤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[FHVVRGHLQIRUPDŠ¼RTXHYLYHPRVKRMH 2KRPHPVHJXQGR)OXVVHU S VHPSUHVHYLXREULJDGRDWUDQVSRU 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Š¼RRID]HPPDVQHVWHFDVRQ¼RV¼RLQWHUSUHWDŠ¡HVKXPDQDV 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 IRUPDGHQDUUDŠ¼R2DXWRUDLQGDYDLDOPFRQVLGHUDQGRTXHTXDQGRD 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 SURFHVVDGDVHUHWUDQVPLWLGDVGHYROWDDRHPLVVRUDͤ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]VHMDSRVV¯YHOHQWHQGHUFRPRDWHFQRORJLDDMXGDQRGLDDGLDHTXDLV as possíveis mudanças que isso pode causar na rotina e comunicação ̧&RPSRQHQWHVYLVXDLVFRPXQVHQWUHGLIHUHQWHVVLWHVHVRIWZDUHV

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 VRIWZDUHWUD]XPHOHYDGRJUDXGHVDWLVIDŠ¼RSRLVQDYLVÂĽRGRXVXÂŁULRHOH estĂĄ economizando tempo. Entretanto, quando se trata de um processo demorado, precisa-se de sinais de que tudo estĂĄ bem, isto ĂŠ reforçado SHORDXWRUTXDQGRDͤUPDTXH̸JRVWDPRVGHYHURWHPSORIOXLUĚšSRUWDQWR RVDSDUHOKRVHVRIWZDUHVTXHXVDPRVSUHFLVDPQRVGDUHVWHUHWRUQRSDUD 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ÂŁULRIRUREULJDGRDDSUHQGHUDOJRPDLVFRPSOH[RQRVRIWZDUHHOHVHMD 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$VOHLVGDVLPSOLFLGDGH6¥R3DXOR1RYR&RQFHLWR

16


tarefas, passarão desapercebidos. Alguns dos motivos que causam o HQJDMDPHQWR GR XVX£ULR FRP R VRIWZDUH VHJXQGR 0DHGD  S   V¥R ̸6HQWLUVH VHJXUR DEVWHQGRVH GR GHVHVSHUR  VHQWLUVH FRQͤDQWH (dominando o básico) e sentir-se instintivo (condicionando-se por meio GDUHSHWL©¥R ̹ 2XWURUHFXUVRLPSRUWDQWHSDUDRERPGHVLJQGHVFULWRSRU0DHGD S  «RXVRGHHOHPHQWRVM£FRQKHFLGRVGRXVX£ULRFDXVDQGRDVHQVD©¥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, SRGHVHUH[SOLFDGRFRPRQDREUDGH7LGZHOO6 (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 PDLVGHXPDS£JLQDUHFXUVRTXHIDFLOLWDDQDYHJD©¥RGRPHVPR2XVR GDVSDWWHUQVDOLDGRFRPDVM£FRQKHFLGDVPHW£IRUDVYLVXDLVGDVLQWHUIDFHV dos sistemas operacionais, criam um ambiente capaz de transferir uma JUDQGHTXDQWLGDGHGHLQIRUPD©·HVDRXVX£ULRFRPSRXFRWHPSR &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 HSURSRUFLRQDQGRIDFLOLGDGHQRGLDDGLD0DVDO«PGHVWDVSUHRFXSD©·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 GHVLJQGHLQWHUIDFH2YL«VWHFQROµJLFR«HPEDVDGRSHORVW¯WXORV̸'HVLJQLQJ

̧7,':(//-HQLIHU'HVLJQLQJ,QWHUIDFHVlHG6HEDVWRSRO2̾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. &RQIRUPH7LGZHOO S KRXYHXPWHPSRHPTXHRVGHVLJQHUVGH 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©·HVLPSRUWDQWHVHRFRUUHXXPDVHJPHQWD©¥RGHIXQ©·HV$PHGLGD TXHVHIRUDPGHVHQYROYHQGRPHWRGRORJLDVGHSURMHWRVXUJLUDPIXQ©·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 WUDEDOKDQGRVHFRPXPDJLJDQWHVFDSDOHWDGHFRPSRQHQWHVHVROX©·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\QH81*(55XVV2JXLDSDUDSURMHWDU8;5LRGH-DQHLUR$OWD%RRNV ̧*XLDGHUHIHU¬QFLDSDUDGHVHQYROYLPHQWRGHDSOLFD©·HVSDUDVLVWHPDV:LQGRZV ̧*XLDGHUHIHU¬QFLDSDUDGHVHQYROYLPHQWRGHDSOLFD©·HVSDUDVLVWHPDV$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 PHLRVGLIHUHQWHVGHLQWHUDJLUSRUWDQWRH[SORUDUHVWDVQRYDVLQWHUDŠ¡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. &RPRFRPSOHPHQWRDHVWHVYLHVHVHVW£DREUDGH7RP&KDWͤHOG10 (2010, p. 14), o autor defende que o mundo digital atual não Ê apenas uma ideia RXXPFRQMXQWRGHIHUUDPHQWDVHTXHXPGLVSRVLWLYRGLJLWDOPRGHUQRQ¼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 QHFHVVLGDGHVGHP¯GLDHGHFRPXQLFDŠ¼R2DXWRUDLQGDYDLDOPTXDQGR 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ͤHOGFRQFOXLTXHDSULPHLUDOLŠ¼RTXHVHGHYHDSUHQGHUFRPD ̧&+$7),(/'7RP&RPRYLYHUQDHUDGLJLWDO5LRGH-DQHLUR2EMHWLYD

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 EDVHGHFRQFHLWRVHGLUHWUL]HVSDUDREWHU[LWRHPXPSURMHWRGHDSOLFDWLYR P¾YHO$OPGDREULJDŠ¼RP¯QLPDGHID]HUEHPDTXLORTXHHOHVHSURS¡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 GHVWDVSHVVRDVVHMDQDIRUPDGHWDEOHWRXGHFHOXODU$WHFQRORJLDFRPR 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


2VWDEOHWVFRPRRVFRQKHFHPRVSDUHFHPWHUVD¯GRGHXPͤOPHGHͤFŠ¼R FLHQW¯ͤFDPDVHOHVQ¼RVXUJLUDPGDQRLWHSDUDRGLD(VWHVV¼RUHVXOWDGRGH 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£GRLVVFXORV(QTXDQWRRLPLJUDQWHDOHP¼R2WWPDU0HUJHQWKDOHULQLFLDYD XPDUHYROXŠ¼RQDSURGXŠ¼RGHPDWHULDLVJU£ͤFRVFRPVXDFRPSRVLWRUDGH tipos, a Linotype em Baltimore, uma outra revolução acontecia não muito ORQJHGDOL(P(OLVKD*UD\GHVHQYROYHXQRVDUUHGRUHVGH+LJKODQG Park, no estado americano de Illinois, uma tecnologia que, segundo Jeremy 1RUPDQDEULULDXPQRYRFDPLQKRQDVFRPXQLFDŠ¡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 ͤPRXFRPRRSU¾SULRFULDGRUGHVFUHYHXHPXPDHQWUHYLVWDDXPUHS¾UWHU GR7KH0DQXIDFWXUHU %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 PRYHULDVLPXOWDQHDPHQWHHIRUPDULDDVPHVPDVOHWUDVHSDODYUDV̿̚

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 SRVVLELOLGDGHGHHVFROKHURSŠ¡HVHPPHQXVHGHVHQKDUPDVVHXXVRIRL limitado devido ao seu alto valor. ̧$EUHYLDŠ¼RGH3HUVRQDOGLJLWDODVVLVWDQWXPFRPSXWDGRUGHSHTXHQDVSURSRUŠ¡HV

23


5$1'7DEOHWGH

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 MRYHQVSXGHVVHPVHFRQHFWDUDVHUYLGRUHVUHPRWRVSDUDDFHVVDUWH[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 ̧7HODVHQV¯YHODRWRTXH

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&RPH[FHŠ¼RDR'\QDERRNRIRFRGHXVRGRVWDEOHWVIRLVHPSUH 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ULFRHPIRUPDGHFDQHWDXVDGDHPDSDUHOKRVHOHWUœQLFRVFRPWHODVHQV¯YHODRWRTXH

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 HVWHWLSRGHDSDUHOKRVXUJLXHPFRPRQRPHGH&RPSDT&RQFHUWR RQGH WRGR R KDUGZDUH HUD SRVLFLRQDGR DWU£V GD WHOD VHQGR SRVV¯YHO R desencaixe do suporte com teclado físico.

*5L'SDGGH

Aproveitando a tecnologia atÊ então esquecida de seu tablet da dÊcada de D$SSOHVHDYHQWXURXQRYDPHQWHFRPXPQRYRGLVSRVLWLYRTXHGHͤQLX RSDGU¼RGRV3'$̾VFRPR$SSOH1HZWRQXPDSDUHOKRTXHSHUPLWLDDVHXV XVX£ULRVDGLFLRQDULQIRUPDŠ¡HVGHFRQWDWRHDQRWDŠ¡HVFRPVXDSU¾SULD escrita. Infelizmente, a tecnologia ainda não era exemplar, oferecendo PDWHULDO SDUD FDUWXQLVWDV ]RPEDUHP GH VHX XVR H IXQŠ¡HV FRP LVVR R SURGXWRIRLGHVFRQWLQXDGRHP$LQGDHPD,%0GHFLGLXMXQWDU 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 HPDLO FRQWDWRV SHVTXLV£YHLVDJHQGDGHHYHQWRVHID]LDOLJDŠ¡HVPDVVHXDOWRSUHŠRIH] FRPTXHQ¼RGXUDVVHPXLWRQRPHUFDGR2EVHUYDQGRDVIDOKDVGR$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 XPDSDUHOKRPHQRUHPDLVEDUDWRTXHR1HZWRQ6HJXQGR5RE/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 WDEOHWVGR:LQGRZV;3HP

:LQGRZV;37DEOHW(GLWLRQGH

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 HFULDŠ¼RGHDSOLFDWLYRVTXHEUDQGRUHFRUGHVGHSURGXŠ¼RHGRZQORDGD Apple lançou a primeira geração de seu tablet iPad.

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

28


Objetivos


2REMHWLYRGHVWHWUDEDOKRUHGHVHQKDUDPDQHLUDFRPRLQWHUDJLPRVFRPR WHPSRDRUHDOL]DUXPDWDUHID,VWRSRVV¯YHOSRLVRVFDOHQG£ULRVFRGLͤFDP o tempo em dias, semanas, meses e anos, nos posicionando a entender TXHHVWHVHVSDŠRVSRGHPVHUSUHHQFKLGRVHTXDQWRPDLVHͤ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, SRLVDWXDOPHQWHDOJXQVFRQWHŸGRVM£V¼RSURGX]LGRVH[FOXVLYDPHQWHSDUD 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ͤFDTXHWXGRRTXHODQŠDGRID]VXFHVVR3DUDPXLWRVTXHDFKDP 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 PHUFDGRHPUHODŠ¼RDRPHUFDGRGHVPDUWSKRQHVWHYHFUHVFLPHQWR GHVHJXQGRDFRQVXOWRULD,'&M£QRVWDEOHWVRFUHVFLPHQWRIRLDLQGD 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¯GHRVPDVWDPEPSRUVHXVLJQLͤFDGRQRFDPSRGDFRPSXWDŠ¼RTXH SRGHVHUGHͤQLGRFRPRXPIOX[RGHGDGRVHPXPVLVWHPDFRPSXWDFLRQDO ̧0DWULDSXEOLFDGDQRVLWH(VWDG¼R30(HPGHMXOKRGH ̧7UDQVPLVV¼RGHGDGRVQDIRUPDGH£XGLRHY¯GHRRQGHVXDUHSURGXŠ¼RLQLFLDGDPHVPRTXHVHX GRZQORDGDLQGDQ¼RHVWHMDͤQDOL]DGR

31


2XPDLVSUHFLVDPHQWHTXDQGRRVGDGRVGHXPDUTXLYRV¼RDEHUWRVH ͤFDPDJDUUDGRV¢PHP¾ULDSHUPLWLQGRDOWHUDŠ¡HVHTXDQGRHVWHDUTXLYR fechado não mais Ê permitido, o que garante a integridade do mesmo. Esta HVFROKDYLVDGDUXPVLJQLͤFDGRDRPHVPRWHPSRGHXPFRQWHŸ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 WHOHYLVLYDRXGHLQWHUQHWHVWHFRQFHLWRPDQWLGR&RPR6WUHDP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 GHHVFROKDHPRQWDJHPGDSURJUDPDŠ¼RM£ID]SDUWHGDH[SHULQFLDFRPR um todo.

32


%ULHͤQJ


A maneira usada para explicar o que seria o problema foi feita em forma GHEULHͤQJ0HVPRTXHͤFW¯FLRHOHUHŸQHLPSRUWDQWHVDVSHFWRVGHGHVLJQ 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. 2VLWHQVDVHJXLUIRUDPFRQVLGHUDGRVSRUH[LJLUHPFRQKHFLPHQWRGHWRGR RSURFHVVRGHHODERUDŠ¼RSDUDXPSURMHWRGHLQWHUIDFHP¾YHOHVWHVGDGRV 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 SUREOHPDVRFRUUDPFRPR6WUHDPV¼RHOHV ̽&ULDUXPDLQWHUIDFHUHVSRQVLYDHFRQVLVWHQWHLQGHSHQGHQWHGDRULHQWDŠ¼R GRDSDUHOKR ̽/D\RXWPLQLPDOLVWDDOLQKDGR¢LGHQWLGDGHGDPDUFD ̽'HVHQKDUIOX[RVVLPSOLͤFDGRVGHWDUHIDV ̽%DODQFHDUDSHUIRUPDQFHHPGHWULPHQWRGDERDH[SHULQFLDGRXVX£ULR ̽'HPRQVWUDUGHIRUPDHͤFLHQWHWRGDDELEOLRWHFDGHP¯GLD ̽&DSWDULQIRUPDŠ¡HVDUHVSHLWRGRFRQVXPRHFRPSRUWDPHQWRGR XVX£ULRYLVDQGRSURGXŠ¼RGHFRQWHŸGRSU¾SULR ̽2IHUHFHUDVGLYHUVDVRSŠ¡HVGH£XGLRHOHJHQGDVTXDQGRVROLFLWDGRV ̽&RQVLGHUDUTXHDOJXPDVVULHVM£HVW¼RFRPSOHWDVHRXWUDVUHFHEHP QRYDVLQVHUŠ¡HVVHPDQDLV ̽3HUPLWLUDRXVX£ULRDFULDŠ¼RGHOLVWDVGHUHSURGXŠ¼RH FRPSDUWLOKDPHQWRGDVPHVPDVHQWUHXVX£ULRVGRVHUYLŠR ̽3HUPLWLURFRPSDUWLOKDPHQWRGHLPDJHQVGRVHSLV¾GLRVHPP¯GLDV VRFLDLV ̽3HUPLWLUDLQWHUDŠ¼RHQWUHXVX£ULRVGHQWURGRVHUYLŠR 35


2VLWHQVPHQFLRQDGRVV¼RSDUDDWUDLUDRVHUYLŠRXPXVX£ULRFDQVDGRGHVHU 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Š¼RGD79FRQYHQFLRQDO ̽2VKRU£ULRVGDVVULHVPXGDPFRQVWDQWHPHQWH ̽2VKRU£ULRVV¼Rͤ[RVHK£SRXFRVUHSULVHVGLͤFXOWDQGRR DFRPSDQKDPHQWR ̽3RXFDVRSHUDGRUDVGH79RIHUHFHPUHFXUVRVGHJUDYDŠ¼RDRXVX£ULR ̽$FRQWLQXLGDGHRXͤPGHXPDVULHGHSHQGHPGDDXGLQFLDHHVWD medição normalmente não Ê feita com êxito na TV comum. Do ponto de vista do design, esta proposta demonstra ser uma oportunidade GHGHVHQYROYHUXPSURMHWRYLVDQGRDVERDVSU£WLFDVGRGHVLJQGHLQWHUIDFH 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 TXDOLGDGHVHMDPFRPSULPLGRVHGLVSRQLELOL]DGRVFRPPDLVYHORFLGDGH$V UHIHUÂŹQFLDVSDUDHVWHSURMHWRVHEDVHLDPQDVDSOLFDŠ¡HVSDUDL3DGGHGRLV GHVVHVVHUYLŠRVVÂĽRHODV1HWIOL[H+XOX3OXV(VWDUHVWULŠ¼RVHHQFRQWUD no fato de que estas duas empresas vĂŞm competindo pela liderança no PHUFDGRHVHPRVWUDPPXLWRHͤFLHQWHVHPRIHUHFHUWRGDVXDELEOLRWHFD de conteĂşdo. 21HWIOL[FRPHŠRXHPFRPRXPDHPSUHVDTXHGLVSRQLELOL]DYDXPD 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, LQVLVWLXHPPDQWÂŹOR2+XOX3OXVÂŤDYHUVÂĽRSDJDGR+XOXRVHUYLŠRTXH H[LJHDVVLQDWXUDHSRVVXLFHUFDGHPLOK¡HVGHXVXÂŁ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, HKÂŁFHUFDGHXPDQRLQFOXLXR%UDVLOR+XOXHVWÂŁGLVSRQÂŻYHODSHQDVHP 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Š¼RGRWHUPRHPLQJOÂŹV2YHUWKH7RS&RQWHQW ̧‹XPQÂźPHURSDUDLGHQWLͤFDŠ¼RGHXPGLVSRVLWLYRHPXPDUHGH ̧6HJXQGRLQIRUPDŠ¼RSXEOLFDGDQREORJGDHPHPSUHVDHPGH'H]HPEURGH

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£OLVHIRLGLYLGLGDHPFDWHJRULDVRQGHDVDSOLFDŠ¡HVV¼RFRPSDUDGDVH os principais destaques quanto a interação são avaliados.

Abertura

Telas de abertura semelhantes, a velocidade no carregamento só Ê SUHMXGLFDGDFDVRRXVX£ULRHVWHMDXVDQGRXPVHUYLŠRGHLQWHUQHW*FDVR contrårio, seu carregamento Ê råpido. Em uma primeira utilização são VROLFLWDGRVRVGDGRVGHORJLQHVHQKDRXGHFDGDVWURFDVRRXVX£ULRM£ 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 QDFRQWLQXLGDGHGHVWDFDQGRRFRQWHŸGRM£LQLFLDGRSHORXVX£ULRHHPTXH SRQWRHOHSDURX$PEDVDVRSŠ¡HVVHXWLOL]DPGRKLVW¾ULFRGHFRQVXPRGR 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 FDGDHSLV¾GLRHPTXHVW¼R(PFRQWUDSDUWLGDR1HWIOL[IRFDQDVLQIRUPDŠ¡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

$PEDVDVDSOLFD©·HVFXPSUHPRVHOHPHQWRVQHFHVV£ULRVGHUHSURGX©¥R de vídeo, oferecendo os itens básicos como mudança de idioma, legenda e WUHFKRGRY¯GHR2GLIHUHQFLDOHVW£HPTXHR1HWIOL[RIHUHFHDSRVVLELOLGDGH 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 SURSRVWDSRGHRIHUHFHUPDLVLQWHUD©·HVTXHVHXVSULQFLSDLVFRQFRUUHQWHV 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 GHVHQYROYHVRIWZDUHVSDUDGLYHUVDVSODWDIRUPDV(VWHWUDEDOKRDSUR[LPRX PHGHH[SHULHQWHVSURͤVVLRQDLVGDV£UHDVGHSURJUDPDŠ¼RDUTXLWHWXUDGH LQIRUPDŠ¼RJHUQFLDGHSURMHWRHLQRYDŠ¼R 2VSULPHLURVSDVVRVGRSURMHWRHPVLIRUDPGDGRVFRPDHVFULWDGHXP WH[WRQRͤPGH1HOHGHVFUHYLPLQKDVREVHUYDŠ¡HVVREUHDWHQG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.

5DVFXQKRTXHGHXRULJHPDRWHPDHVFROKLGR

2TXHDLQGDIDOWDYDHUDXPDIRUPDGHID]HUDMXQŠ¼RGHVWHFRPSRUWDPHQWR em relação a tecnologia móvel com o design, a descoberta foi feita após a 45


OHLWXUDGHXPDUWLJRQREORJGDDJQFLD'FOLFNQRTXDO(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 SRUFRPRHVWDVDSOLFDŠ¡HVHUDPIHLWDVSDUHFLDFXULRVRFRPRSHTXHQRV 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¼RPHQRVLPSRUWDQWHIRLDEXVFDSRURXWURVSURͤVVLRQDLVGD£UHDRTXH 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]DGRHP%HOR+RUL]RQWHVREUHGHVLJQGHLQWHUDŠ¼RHQR: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


$LQGDQDSULPHLUDHWDSDRWHPDHVFROKLGRSDUDR7*,IRLRSODQHMDPHQWR 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 GRSURMHWRIRLGHRWLPL]DURDFHVVRGHDOXQRVGHJUDGXDŠ¼RDLQIRUPDŠ¡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 GHVLJQFRPDWHFQRORJLDQ¼RVLJQLͤFDVHSUHQGHUDSHQDVDFRPSXWDŠ¼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 PXQGRVHG£YLGD¢VWHODVHVXDVLQWHUDŠ¡HV$S¾VDDSUHVHQWDŠ¼RRTXH 47


HUDXPWHPDDIXQLODGRDXPREMHWLYRVHDEULXQRYDPHQWHSRVVLELOLWDQGR DLQFOXV¼RGHQRYRVFRQWHŸGRVUHIOH[¡HVHWHVWHV0HVPRFRPXPQRYR WHPDDGRWDGRRREMHWLYRIRLPDQWLGRGHVHQKDUXPDLQWHUIDFHTXHQ¼RV¾ 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&RPRSULQFLSDOOLŠ¼RHVW£RIDWRGHTXHRSURMHWRHPVLXPD descoberta, uma curva de aprendizado que vai evoluindo a medida que o FURQRJUDPDFKHJDDRͤPHTXHDEDJDJHPDGTXLULGDGXUDQWHRSURFHVVR SDVVDU£DVHUYLUGHEDVHSDUDRVSURMHWRVIXWXURV A mudança de proposta para o TGI2 se deu pela possibilidade de criar uma IHUUDPHQWDTXHFKHJDVVHDXPDIDVHIXQFLRQDO2REMHWLYRHUDHQFXUWDUR WHPSR H HVIRUŠR QHFHVV£ULRVSDUD VH REWHU LQIRUPDŠ¡HVVREUH ORFDLV GH descarte de materiais eletrônicos, atravÊs de um aplicativo móvel para WDEOHW(PERUDRSURMHWRWHQKDVLGRDEDQGRQDGRFRPRSURSRVWDGHSURMHWR 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.

2WHPDIRLDOWHUDGRGHYLGRDRDSUHQGL]DGRREWLGRFRPRGHVHQYROYLPHQWR 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 IHLWDVHRXVX£ULRIRFDVXDDWHQŠ¼RDLQWHUIDFH6HQGRDVVLPRWUDEDOKR foi renomeado para Design de Interface em Dispositivos Móveis, e seu REMHWLYRWUDŠDGRDRHQWHQGLPHQWRGDLPSRUW¤QFLDGRGHVLJQGHLQWHUIDFH neste relacionamento da aplicação com o usuårio. Para reforçar a tarefa de desenvolver uma pesquisa voltada à experiência GRXVX£ULRHPGLVSRVLWLYRVP¾YHLVERDSDUWHGHVWHSURMHWRIRLIHLWDQHVWH 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 IRUDPSURSRUFLRQDGDVSHORVVHJXLQWHVDSOLFDWLYRVHVSHFLͤFDPHQWH

Evernote $V DQRWDŠ¡HV V¼R GH VXPD LPSRUW¤QFLD SDUD XPD SHVTXLVD PDV D GLͤFXOGDGHGHPDQXWHQŠ¼RHDORFDOL]DŠ¼RGHXPDLQIRUPDŠ¼RHPPHLR D XPD SLOKD GH SDSLV ID] FRP TXH R WHPSR VHMD GHVSHUGLŠDGR (VWH DSOLFDWLYRIXQFLRQDFRPRVHIRVVHXPEORFRGHDQRWDŠ¡HVHPTXHSRGHP 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 FKDYHPHVPRTXHHVWDVHVWHMDPHPXPDLPDJHPHQ¼RHPWH[WRHGLW£YHO DOPGLVVRWRGDVDVDQRWDŠ¡HVͤFDPGLVSRQ¯YHLVSDUDVHUHPDFHVVDGDV de qualquer local, via internet.

Tela principal do aplicativo Evernote.

51


Google Drive 7RGRVRVDUTXLYRVUHODFLRQDGRVDRSURMHWRIRUDPPDQWLGRVHPXPDSDVWD 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.

&RQWUROHVGHQDYHJDŠ¼RHPDUFDŠ¡HVGHS£JLQDGHXP3')QRL%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 RGRZQORDGGHFRQWHŸGR'HVWDIRUPDRFRQWHŸGRIRLSUHYLDPHQWHEDL[DGR da internet e adicionado ao tablet, e a visualização desta aulas foi feita SRVWHULRUPHQWHFRPRFRQWUROHGHTXDLVY¯GHRVM£KDYLDPVLGRDVVLVWLGRV

53


&RQWUROHVGHUHSURGXŠ¼RGHY¯GHRGRDSOLDWLYR

Paper Este aplicativo Ê uma ferramenta para desenho, demonstrou ser uma ferramenta råpida para esboçar esquemas e diagramas durante SDUWLFLSDŠ¼RHPHYHQWRVHGXUDQWHOHLWXUDV2XWURSRQWRLPSRUWDQWHHVW£ 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 GHGRVJLUDQGRHPVHQWLGRDQWLKRU£ULRVREUHDWHODDWRSRQWRTXHGHVHMD 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 TXHVHULDUHDOL]DGRSRVWHULRUPHQWHHVWDWDUHIDM£UHDOL]DGDQRWDEOHW

55


Ambiente de edição de imagens.

Wunderlist 6HJXLUXPFURQRJUDPDSDUDHODERUDŠ¼RGHXPSURMHWRLPSRUWDQWHPDV 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 DUUDVWDQGRSDUDDSRVLŠ¼RGHVHMDGD

56


Lista de tarefas a serem cumpridas.

2XVRGHVWDVIHUUDPHQWDVDSHQDVFRPSOHPHQWDURGHVHQYROYLPHQWRGH um mÊtodo de trabalho sólido, e deve ser aprimorado e estudado. Bruno Munari19 S GHVFUHYHRPWRGRGHSURMHWRFRPRXPDVULHGH RSHUDŠ¡HVQHFHVV£ULDVHPXPDRUGHPFRHUHQWHHGLWDGDSHODH[SHULQFLD (VWHŸOWLPRLWHPRTXHPHOKRUGHVFUHYHHVWDHWDSD+£GRLVDQRVTXDQGR 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 DFRPSDQKDGDVSRUXPFHQ£ULRGHHVFDVVH]GHSURͤVVLRQDLVHGHPWRGRV GHSURMHWRGRVPHVPRVHPPHLRDEXVFDSRUFRQWHŸGRTXHPHRULHQWDVVH DFRQGX]LURSURMHWRQRWHLXPFHQ£ULRVHPHOKDQWHHPTXH0XQDUL S  ID]XPDFRPSDUDŠ¼RFRPRVOLYURVGHFXOLQ£ULDQRVTXDLVDVLQGLFDŠ¡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'DVFRLVDVQDVFHPDVFRLVDV6¼R3DXOR0DUWLQV)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 EORTXHDGDDRWHUHPTXHREVHUYDUUHJUDVSDUDID]HUXPSURMHWRPDVHVWDV 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 FRPRDWLQJLURREMHWLYRFRPRPHQRUHVIRUŠR$VHJXLUVHU£DSUHVHQWDGR RPWRGRTXHWRPRXIRUPDQRGHFRUUHUGRSURMHWRHVWLPXODGRSHODOHLWXUD 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 FRPSOHPHQWDUDVLQIRUPDŠ¡HVWH[WXDLVHGHGRFXPHQWDŠ¼RDUHVSHLWRGD mesma.

6HTXQFLDGHHWDSDVTXHFRPS¡HPDPHWRGRORJLD

&DGDHWDSDVHU£DERUGDGDVHSDUDGDPHQWHHRFRQWHŸGRFRPSRVWRSHOD GRFXPHQWDŠ¼RSURGX]LGDGXUDQWHRSURMHWRHSHODOHLWXUDGHELEOLRJUDͤDV FRPSOHPHQWDUHV (VWD VHSDUDŠ¼R IRL GHͤQLGD SRU VHU DV GHOLPLWDŠ¡HV H[DWDVGDVHWDSDVGLͤFLOPHQWHHODSRGHU£VHUH[HFXWDGDVHPDFRQFOXV¼R da anterior.

58


Conceito


2 WHUPR FRQFHLWR « XWLOL]DGR SDUD GHͤQLU D MXQ©¥R GH HOHPHQWRV TXH FDUDFWHUL]DPRSURMHWRV¥RFRPSRQHQWHVTXHMXQWRVGHͤQHPHWUDQVPLWHP 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 XPQLFKRFRPRXPFURQ¶PHWURFRPIXQ©·HVHVSHF¯ͤFDV-£QDVHJXQGD 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[HPSORRSUµSULRSURMHWRGHJUDGXD©¥R8PGRVSLODUHVSRUWU£VGR6WUHDP é ser centrado no usuário, ou em outras palavras, entender primeiramente FRPRRVHUKXPDQRLQWHUDJHFRPHVWHWLSRGHSODWDIRUPDHDSURMHWDUGD 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, é ̸WRUQDUQHFHVVLGDGHHPGHPDQGD̹SDUHFHVLPSOHVEDVWDGHVFREULURTXH 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 DFRORFDUDVSHVVRDVHPSULPHLUROXJDU̸GHVLJQFHQWUDGRQRXVX£ULR̹  p. 37). Isto pode ser iniciado com o aprendizado de que comportamentos QXQFDV¥RFHUWRVRXHUUDGRVPDVV¥RVHPSUHVLJQLͤFDWLYRV S  Muitas vezes se torna difícil saber o que é errado, pois segundo o autor as

̧%52:17LP'HVLJQ7KLQNLQJXPDPHWRGRORJLDSRGHURVDSDUDGHWHFWDURͤPGDVYHOKDVLGHLDV HG5LRGH-DQHLUR(OVHYLHU

61


SHVVRDVV¼RW¼RHQJHQKRVDVHPVHDGDSWDUDVLWXDŠ¡HVLQFRQYHQLHQWHV que muitas vezes nem chegam a perceber que estão fazendo isso (2010, S 2WUDEDOKRGRGHVLJQHUQHVWHSRQWRGHYLVWDDMXGDUDVSHVVRDVD articular as necessidades latentes que podem nem saber que têm, e não apenas tornar algo mais råpido (2010, p. 38). $LQGDHPRVVRIWZDUHVHUDPGHGRP¯QLRGRVJHHNVHPODERUDW¾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 GHYHULDWHUSDUWLFLSDŠ¼RWDPEPQRVRIWZDUHHQ¼RDSHQDVQRH[WHULRUGRV computadores. E assim surgiu o design de interação, que deveria pensar WDQWRVREUHDVDŠ¡HVQRVRIWZDUHTXDQWRQRREMHWRTXHLPSXWDYDHVVDV DŠ¡HVSURMHWDUXPDLQWHUDŠ¼RSHUPLWLUTXHXPDKLVW¾ULDVHGHVHQYROYD FRPRWHPSR(GLIHUHQWHGHVWHLQLFLRKRMHHPGLDDRLQYVGHGLWDUWRGRV 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 HULWPR S 26WRU\WHOOLQJRXFRPRDKLVW¾ULDGRIXQFLRQDPHQWR 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 ̧&RIXQGDGRUGDDJQFLD,'(2HUHVSRQV£YHOSHORSULPHLURODSWRSDLQGDHP

62


127). AlÊm de centrar a aplicação no usuårio, ele tambÊm Ê incorporado DRSURFHVVRDWUDYVGDJDPHͤ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Š¡HVSDUDJDQKDUGHVWDTXHHQRWRULHGDGH2DWRGHUHSDVVDUHVVH 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¤QLDJDPHͤFDŠ¼RVLJQLͤFDXVDUHOHPHQWRVHQFRQWUDGRVHPMRJRV 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$SULQFLSDOPRWLYDŠ¼RQRXVRGDJDPHͤFDŠ¼RSRUSDUWHGH estrategistas de negócio, estå na possibilidade de obter o mesmo sucesso TXHRVMRJRVFRQVHJXHPFRPRXPDIHUUDPHQWDSRGHURVDGHͤ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 MRYHQVHVHGLYHUWLDPFRPMRJRVHRXWURVPHLRVHOHWUœQLFRVHVW¼RKRMHHP 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 à VXDVH[SHUL¬QFLDVFXOWXUDLVVRFLDLVHYLVXDLV(OHVDVVRFLDPDJDPHͤFD©¥R DRHVWLPXORGDFULDWLYLGDGHDRHQJDMDPHQWRFRPGHWHUPLQDGRDVVXQWRRX tema e, principalmente, com a competitividade. ̸'HUHSHQWHJDPHͤFD©¥R«DPDLRUQRYLGDGHHPWHUPRVGHPRGHOR GHQHJµFLRVHQGRXVDGRSRUPXLWDVGDVPDLVDGPLUDGDVHPSUHVDV̹     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.  0XOWL8VHU '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'26DSHQDVDWUDY«VGHOLQKDVGHFRPDQGR 64


7HODGHXPDMRUQDGDGH0XOWL8VHU'XQJHRQHPDQGDPHQWR

(VWXGRVM£PRVWUDYDPTXHFULDQ©DVSRGHULDPDSUHQGHUFRPMRJRV SRLVM£H[LJLDPTXHHODVHQWHQGHVVHPVLVWHPDVDSDUHQWHPHQWHFRPSOH[RV GHREMHWLYRVHVLVWHPDWL]D©¥RSDUDREWHUSURJUHVVRQRVMRJRVHHVWHQGHUR tempo de entretenimento.

&DSDGHXPHVWXGRGR;HUR[3DOR$OWR5HVHDUFK&HQWHUVREUHDDSUHQGL]DJHPFRPMRJRV

(PSUHVDVGRVHWRUSULYDGRXQLYHUVLGDGHVHDW«RH[«UFLWRDPHULFDQR GHVHQYROYHUDPMRJRVSDUDVLPXODUHWUHLQDUHPGLYHUVRVREMHWLYRV 65


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

HPGLDQWH2PHUFDGRIRLDEVRUYHQGRHVWHFRQFHLWRHRH[SORUDQGR GH GLYHUVDV PDQHLUDV H M£ PRVWUD VLQDLV GH DPDGXUHFLPHQWR SRLV FDGD YH]PDLVJUDQGHVHPSUHVDVSDVVDUDPDDGRWDUDJDPHͤFD©¥RHPVXDV DSOLFD©·HV

(PSUHVDVTXHM£SRVVXHPDSOLFD©·HVFRPRFRQFHLWRGHJDPHͤFD©¥RDSOLFDGR

66


.HYLQ:HUEDFKUHIRUŠDTXHJDPHͤFDŠ¼RQ¼RWUDQVIRUPDUWXGRHPMRJR 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 EDODQFHDPHQWRGRVHOHPHQWRVTXHRVFRPS¡HPGHDFRUGRFRPRREMHWLYR DOPHMDGR([LJHFRQKHFLPHQWRVPXOWLGLVFLSOLQDUHVSRUUHXQLUFRQWHŸGRVGH 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 SDUDDWLQJLURREMHWLYRFRPYLVXDOHRUJDQL]DŠ¼RGDLQIRUPDŠ¼R0DVDQWHV 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  &RQVLGHUDQGRVH DV SRWHQFLDOLGDGHV de uso de uma tecnologia e os caminhos que elas sugerem para o fluxo GHLQIRUPDŠ¼RQRHVSDŠRGLJLWDOVHQGRTXHRUHVXOWDGRͤQDOIRUQHŠDDR 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ŸGRGHVHMDGRHDVDOWHUDŠ¡HVGHOD\RXWHUDPPXLWRFDUDV‹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VGHSUGLRVHVWHVSURͤVVLRQDLVSURMHWDPVLWHVVRIWZDUHVHVHUYLŠ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PFULDUUHODŠ¡HVSDUDDMXGDURXVX£ULRDVDEHURQGHHOHHVW£RTXH 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 TXHDSURWRWLSDJHPVHMDLQLFLDGD

69


Levantamento de dados 2VGDGRVUHODWLYRVDRFRQWHŸGRDXGLRYLVXDOIRUDPFROKLGRVGHEDVHVGH dados na internet, mais precisamente nos sites IMDB (Internet Movie 'DWDEDVH H79&20(VWDVGXDVEDVHVSRVVXHPVHXVGDGRVLQIOXHQFLDGRV SRU XVX£ULRV VHQGR DVVLP VXD FRQWULEXLŠ¼R JDUDQWH LQIRUPDŠ¡HV DWXDOL]DGDVGHVULHVHOHQFRVHGHPDLVLQIRUPDŠ¡HVTXHHQYROYHPHVWH 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£JLQDVYLUWXDLVGRVDSOLFDWLYRVQDVTXDLVRVXVX£ULRVID]HPDYDOLDŠ¡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 DRTXHHVWDYDVHQGRSURMHWDGR

+LHUDUTXLDGHGDGRVWÂŤFQLFRV

&RPDDUTXLWHWXUDGHLQIRUPDŠ¼RM£GHͤQLGDGDGRRSULPHLURSDVVRSDUD ROD\RXWQHVWHSRQWRM£VHVDEHRTXHFDGDWHODGHYHFRQWHUHQHVWDHWDSD 70


Ê estudado qual a melhor maneira deste conteúdo ser apresentado ao XVX£ULR$SURWRWLSDJHPDSDUWHPDLVH[WHQVDGRSURMHWRHGLIHUHQWHGR GHVLJQLPSUHVVR2GHVLJQGLJLWDOVRIUHDOWHUDŠ¡HVFRQVWDQWHVSDUDDWHQGHU requisitos de acesso e adequação ao interesse do usuårio, mas mesmo DVVLPQHFHVV£ULRVHͤ[DUXPSRQWRSDUDXPDSULPHLUDYHUV¼R

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

&RPRFRQWHŸGRM£GHͤQLGRSDUDFDGDWHODSUHFLVRGHVFREULUDPHOKRU 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Š¡HVSDUDTXHVHPRQWHRPHOKRUFDPLQKRSDUDRXVX£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 GHVHQYROYLGDHPSHORHVFULW¾ULRGHGHVLJQ,'(2RQGHRREMHWLYRHUD 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Š¼RSDUDSURWRWLSDJHPSDUHFHVHUDGRSU¾SULR6FRWW.OHPPHURQGH HOHGL]TXHXPSURW¾WLSRDHVWUDWJLDPDLVHͤFLHQWHSDUDOLGDUFRPFRLVDV 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 FRQVLVWHGHGXDVHWDSDVV¼RHODV

3URWRWLSDJHPGHEDL[DͤGHOLGDGH 1¼RQHVWDHWDSDTXHRVRIWZDUHWHU£DIRUPDͤQDOSHQVDGDRIRFRGD SURWRWLSDŠ¼RRREMHWLYRͤQDODDŠ¼RGHID]HUDOJRHSDUDLVWRVXDIRUPD e aparência podem mudar drasticamente no decorrer do processo para 73


DOFDQŠDURREMHWLYRGHVHMDGR1HVWDIDVHGLIHUHQWHVUDVFXQKRVV¼RIHLWRV VHP VH SUHRFXSDU FRP GHWDOKDPHQWR R REMHWLYR  FRQVHJXLU R PDLRU QŸPHURGHGLIHUHQFLDŠ¡HVDͤPGHHQFRQWUDUGHPDQHLUDU£SLGDDTXHPDLV se adapta a necessidade em questão.

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

3URWRWLSDJHPGHDOWDͤ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¼RSRVVXHPRYLVXDOͤQDOPDVY¼RJDQKDUYLGDFRPLQWHUDŠ¡HVTXHY¼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. 1HVWDHPTXHVW¼RIRLFULDGRXPDUWLͤFLRSDUDTXHPHVPRQHVWHHVW£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¯GRSDUDVLPXODURGHVHQKRGDWHODHPVHXVXSRUWHͤQDO

$UWLͤFLRFULDGRSDUDHVWXGRGHFRHUQFLDYLVXDOGHWHODV 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 DQWHVGHVHSURGX]LUZLUHIUDPHVV¼RRVPDSDVGHVLWHHVWHVTXHV¼RXPD IRUPDGHGHPRQVWUDUJUDͤFDPHQWHDHVWUXWXUDGHXPDDSOLFDŠ¼R1HVWH FRQFHLWRGHGLDJUDPDͤFDPFODUDVDVKLHUDUTXLDVHFRQH[¡HVSUHVHQWHVQR SURMHWRIRUQHFHQGRXPDU£SLGDFRPSUHHQV¼RGDGLVWULEXLŠ¼RHORFDOL]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 ZLUHIUDPHVRQGHVXDIXQŠ¼RE£VLFDLGHQWLͤFDURVHOHPHQWRVQHFHVV£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 ULVFRVQRXVRGRGHWHUPLQDGRREMHWR2DXWRUDUJXPHQWDTXHDQDYHJDŠ¼R YLD ZLUHIUDPH  UHVSRQV£YHO SRU LGHQWLͤFDU JUDYHV IDOKDV GH XVDELOLGDGH SRLVVLPXODRXVRUHDOGDIHUUDPHQWD4XDQGRXPZLUHIUDPHFRQVLGHUDGR FRPSOHWRHOHSRGHVHUXVDGRSDUDWHVWHVGHXVDELOLGDGHDͤPGHLGHQWLͤ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 GHXVDELOLGDGHDͤPGHHYLWDUGHVFRQIRUWRQRXVRGDDSOLFDŠ¼R6HJXQGR 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Š¡HVSDUDFDGDSODWDIRUPDGHGHVHQYROYLPHQWRSRUPHVVDV 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Š¼RDRVXVX£ULRVSHODGLͤFXOGDGHGHDFHUWDUVHXDOYR

̧(VFULWRUGRVLWHUHIHUQFLDHPXVDELOLGDGH6PDVK0DJD]LQH

78


'LͤFXOGDGHVLPSO¯FLWDVSRUXPD£UHDGHWRTXHSHTXHQD

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£ULRSRGHDFLGHQWDOPHQWHDFLRQDUXPDIXQŠ¼RQ¼RGHVHMDGDDSHQDV 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.

&RPSDUDWLYRGHÂŁUHDFRPSL[HOHRGHGRGHXPDGXOWR

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


SRGHVH XVDU RXWURV JHVWRV 'H DFRUGR FRP R L26 +XPDQ ,QWHUIDFH *XLGHOLQHVRVWLSRVGHLQWHUDŠ¼RDFHLWRVSHORL3DGV¼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

&RPSULPLUH

&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WULFDSDUDERW¡HVSDUHFHVLPSOHVGHVHUPHGLGDPDVRIDWRUKXPDQR da diferenciação no tamanho dos dedos implica em testes diferenciados SDUDDDSOLFDŠ¼R6WHYHQ+RREHUFRDXWRUGH'HVLJQLQJ0RELOH,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ͤFDUGLͤFXOGDGHVGHXVREDVHDGRQDVPHGLGDVGDIHUUDPHQWD

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 DERUGDRTXHRVDXWRUHVGHQRPLQDPFRPR̸RVJHVWRVGRVFXOR;;,̚ XPDOHLWXUDTXHDMXGDRGHVLJQHUGHLQWHUDŠ¼RDHQWHQGHUTXDODSURY£YHO posição do usuårio ao executar determinada tarefa em seu dispositivo P¾YHOHGHPDLVDSDUHOKRVHOHWUœQLFRV$VLOXVWUDŠ¡HVDSUHVHQWDGDVDEDL[R são basicamente monocromåticas, apenas os membros que exigem PRYLPHQWRVSDUDRXVRGRVDSDUHOKRVV¼RGHVWDFDGRVFRPFRUHV

,OXVWUDŠ¡HVGROLYUR&XULRXV5LWXDOV

2IDWRGRGLVSRVLWLYRSRVVXLUWHFQRORJLDWRXFKSURSRUFLRQDXPDQRYDJDPD GHLQWHUDŠ¡HVSDUDDVWDUHIDVTXHDWHQW¼RHUDPH[HFXWDGDVVRPHQWHFRP RPRXVHHHVWDVLQWHUDŠ¡HVSRGHPHQFXUWDUIOX[RVHRWLPL]DULQWHUIDFHV 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.

̧&XULRXV5LWXDOV*HVWXUDO,QWHUDFWLRQLQWKH'LJLWDO(YHU\GD\

82


Interface do Usuรกrio


'HVLJQGHLQWHUIDFHRUHVSRQV£YHOSRUUHDOL]DUDFRPXQLFDŠ¼RHͤFLHQWHGR 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 GHSHUFHSŠ¼R YLVXDODXGLWLYRHW£WLO 2TXHLQFOXLRHVWXGRGHWDOKDGRGD DGHTXDŠ¼RDRIRUPDWRGRGLVSRVLWLYRDVHUXWLOL]DGRWLSRJUDͤ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£YHOHVLPSOLͤFDGDWRGDDHVWUXWXUDGRVLVWHPD

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 GRSU¾SULRVLVWHPDDDOJXPDVDOWHUDŠ¡HVGHFRUHVHHOHPHQWRVSDUDFULDU VXDV DSOLFDŠ¡HV 2XWUR IDWR TXH FRODERURX SDUD HVWD KRPRJHQHL]DŠ¼R YLVXDOHHVWUXWXUDOGRVDSOLFDWLYRVIRUDPRVERQVSDGU¡HVGHVHQYROYLGRV SHOD $SSOH H D VXD GLͤFXOGDGH GH VHUHP DOWHUDGRV 6HJXQGR 0DWWKHZ 3DQ]DULQRHVFULWRUGRVLWHGHWHFQRORJLD̸7KH1H[W:HE̚SURY£YHOTXHXP 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£EDVWDQWHFRQKHFLGRV 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Š¼RGRVLVWHPDL26SDUDFRQͤJXUDŠ¡HVGHXVRGRL3DG

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Š¡HVIDFLOLWDQGRDVVLPDFULDŠ¼RVHJXLQGRVHXVFRQFHLWRVGHGHVLJQ &RPLVVRXPDHQ[XUUDGDGHDSOLFDŠ¡HVFRPOD\RXWVHPHOKDQWHWDQWRQD disposição dos elementos quanto em outros elementos visuais, como ERW¡HVHEDUUDVGHOLPLWDGRUDVIRUDPFULDGRV

̧‹DVLJODSDUD6RIWZDUH'HYHORSPHQW.LW

86


7HPSODWHGRPRGHOR0DVWHU'HWDLOVHQGRXVDGRHPDSOLFDŠ¡HV

2V GHVHQYROYHGRUHV VH VHQWLDP FRQIRUW£YHLV SRLV EDVWDYDP DOJXPDV SRXFDVDOWHUDŠ¡HVGHLPDJHQVSDUDVHWHUXPDDSOLFDŠ¼RFRQFOX¯GD0DV FRPHVVHFRPSRUWDPHQWRRTXHVXUJLUDPIRUDPDSOLFDŠ¡HVGHHPSUHVDV 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 FRPDQRYD‹SRVV¯YHOQRWDUTXHQDDQWHULRUFRUHVHWLSRJUDͤDQ¼RVHJXLDP FRPHͤFLQFLDRTXHDLGHQWLGDGHGDPDUFDSURSXQKD

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*PDLOSDUDL26WDPEPVHDWHYHDHVVDQHFHVVLGDGHGHWUDQVSRUWDU VXDLGHQWLGDGHͤHOPHQWHSDUDDDSOLFDŠ¼R

88


Nova identidade do Gmail para iPad.

Mesmo com essa evolução, os templates antigos continuavam a ser VHJXLGRVPDVXPDQRYDWHQGQFLDSRGHVHUQRWDGD$OJXPDVDSOLFDŠ¡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Š¼R5LVHSDUDL3DG

,VWR VLJQLͤFD TXH R FDPLQKR SDUD VH FKHJDU D XPD KRPRJHQHL]DŠ¼RGH experiências entre plataformas de dispositivos móveis estå mais próxima. $SHVDUGRFDPLQKRDSRQWDUSDUDXPDLGHQWLGDGHSU¾SULDSDUDDVDSOLFDŠ¡HV LVVRQ¼RVLJQLͤFDTXHVHMDSUHFLVRDOWHUDUWRGRRSDGU¼RGRVLVWHPDSDUD VH WHU VXFHVVR (VWH PHVPR FHQ£ULR RFRUUH QDV DSOLFDŠ¡HV GH GHVNWRS nos computadores, muitos programas possuem elementos em comum, M£TXHV¼RUHFXUVRVGLVSRQLELOL]DGRVSHORSU¾SULRVLVWHPDRSHUDFLRQDO$ 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.

2YLVXDOGDVDSOLFDŠ¡HVQ¼RHVW£WLFRHOHGHYHVHDGDSWDU¢VGLPHQV¡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 WRGRRHVSDŠRGDWHODRVGDVDSOLFDŠ¡HVP¾YHLVQ¼R$OPGLVVRROD\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 UHFXUVRVSODWDIRUPDVGHGHVHQYROYLPHQWRHWLSRVGHLQWHUDŠ¡HVVXUJHP 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 SDUDGDUYLGD¢VDSOLFDŠ¡HVDͤPQ¼RV¾GHVDEHUXPSRXFRPDLVVREUH todo o processo, mas tambÊm para evitar que uma solução aparentemente perfeita, se perca em meio a inviabilidade tÊcnica. 2;FRGHDDSOLFDŠ¼RXVDGDSDUDRGHVHQYROYLPHQWRGHDSOLFDŠ¡HVSDUD RVGLVSRVLWYRV$SSOHRQGHWRGRVRVHOHPHQWRVGRSURMHWRV¼RDJUXSDGRV JDQKDPVXDVIXQŠ¡HVDWUDYVGHF¾GLJRVGHSURJUDPDŠ¼RHIHFKDGRVHP forma de aplicação para serem disponibilizados na Apple Store25.

;FRGHDSOLFDŠ¼RXVDGDSDUDGHVHQYROYHUDSOLFDWLYRVGRVLVWHPDL26

Não Ê comum fazer o desenvolvimento de uma aplicação partindo do zero, QRUPDOPHQWHVHXWLOL]DELEOLRWHFDVFRPRDX[LOLRHF¾GLJRVM£HVFULWRV(VWHV que podem ser alterados, em uma råpida analogia, podemos comparar a ̧6LWHRQGHDVDSOLFDŠ¡HVSDUDRVLVWHPDL26V¼RGLVSRQLELOL]DGRV

93


XPDSHVTXLVDVHP¤QWLFDIHLWDSHORGHVLJQHU2VGHVHQYROYHGRUHVWDPE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 FRQKHFLGRFRPR09&26, que separa a aplicação em três distintas åreas, HGHVWDIRUPDFRQWULEXLSDUDRERPIXQFLRQDPHQWRGDDSOLFDŠ¼R&RPHVWH 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 RFDUUHJDPHQWRFRPSOHWRSDUDLQLFLDUDLQWHUDŠ¼RGHJUDQGHDMXGDSDUD 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.

̧6LJODSDUD0RGHO9LHZH&RQWUROOHUXPDDUTXLWHWXUDGLYLGLUDVIXQFLRQDOLGDGHVGHXPVRIWZDUH

94


Resultado Final


$WHVWHPRPHQWRIRLGHVFULWRRSURFHVVRGHGHVHQYROYLPHQWRGRSURMHWR 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ͤDXVDGDQDDSOLFDŠ¼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 RXWURVHOHPHQWRVDKLHUDUTXL]DŠ¼RGRVHOHPHQWRVͤFDDFDUJRGDVFRUHV 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Š¡HVGHXPDPHVPDFRUHPHVPRDVVLPVXDGLIHUHQŠDVHU£YLVLYHO para complementar os elementos deste tom são utilizados tons de cinza como auxiliares.

�cones 2¯FRQHGHXPDDSOLFDŠ¼RRSULPHLURFRQWDWRGRXVX£ULRFRPDPHVPD 6HXYLVXDOVLPSOLͤFDGRUHIOH[RGDQHFHVVLGDGHGDV¯QWHVHYLVXDOGHYLGR ao pequeno tamanho em tela, onde divide espaço com as mais diversas DSOLFDŠ¡HV'HYLGRDLVVRHVWH¯FRQHSHUGHXDVXDSDUWHWH[WXDOSRLVVHX QRPHM£DSUHVHQWDGRDEDL[RGR�FRQHGHIRUPDSDGURQL]DGDSDUDWRGDV DVRXWUDVDSOLFDŠ¡HVQRL3DG

�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 VREUHRFRQWHŸGRGDLQWHUDŠ¼RFDVRRERW¼RVHMDDFLRQDGR'HYLGR¢VVXDV 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¯YHOQRWDUQDLPDJHPDQWHULRUQ¼RV¾RV¯FRQHVDSUHVHQWDP YLVXDOVLPSOLͤFDGRHSODQR7RGDDDSOLFDŠ¼RVHJXHHVVDHVWUDWJLDYLVXDO esta Ê a principal característica do sistema, a apresentação de uma LQWHUIDFHVLPSOLͤFDGDHI£FLOGHVHXWLOL]DU

99


Interface 'HDFRUGRFRP0HJJVRPLQLPDOLVPRFRPRFRQFHLWRJU£ͤFRWHYHLQ¯FLR QD+RODQGDFRPRPRYLPHQWRDUW¯VWLFR'H6WLMOLQLFLDGRHPSRU7KHR 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 RPRYLPHQWRYHLRGRSLQWRU+RODQG¬V3LHW0RQGULDQHVXDDUWHFXELVWD2 autor argumenta que a adoção das cores primárias por Mondrian se deu SHODLQIOX¬QFLDGH0+-6FKRHQPDNHUVTXDQGRRPHVPRGHͤQLXTXH 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.

3LHW0RQGULDQ&RPSRVLŠ¼R,,,

Tanto Mondrian quanto Van der Leck e Van Doesburg adotaram, alÊm dos SULQF¯SLRVM£FLWDGRVRXVRGHFRUHVQHXWUDVFRPRSUHWRFLQ]DHEUDQFRH planos chapados limitados a retângulos e quadrados. Meggs argumenta que os autores acreditavam que os novos acontecimentos políticos trariam 100


XPDQRYDHUDGHREMHWLYLGDGHHFROHWLYLVPR&RPRSDVVDUGRVDQRVVHXV SULQFÂŻSLRVIRUDPOHYDGRVDGLDQWHDWUDYÂŤVGHDUTXLWHWRVFRPR/XGZLJ0LHV YDQGHU5RKHHGHVLJQHUVLQGXVWULDLVFRPR'LHWHU5DPVUHVSRQVÂŁYHOSHORV LFÂśQLFRVDSDUHOKRVGD%UDXQFKHJDUHPDRVGLDVGHKRMH Segundo Kenna27, o estado atual do racionalismo estĂĄ em uma UHLQWHUSUHWDŠ¼RGRPHVPRDDXWRUDDͤUPDTXHHVWDGLVVHPLQDGDDGRŠ¼R GRHVWLORGHGHVLJQPLQLPDOLVWDSRGHWHUFRPHŠDGRVXSHUͤFLDOPHQWHPDV coincidiu com uma retomada do interesse histĂłrico e teĂłrico a respeito GRVGHVLJQHUVPRGHUQLVWDV(VWDDͤUPDŠ¼RSRGHVHUIHLWDSHORDXPHQWR GRQÂźPHURGHSXEOLFDŠ¡HVOLJDGDVDRWHPDQRVÂźOWLPRVDQRV6HJXQGRD DXWRUDDPHWRGRORJLDSXEOLFDGDSHORWLSÂľJUDIRVX¯ŠR(PLO5XGHUHPVXD REUD7\SRJUDSK\H$0DQXDOIRU'HVLJQ  FRQVLVWHHPXPDSDQKDGR GHFRQFHLWRVSDUDDYDOLDŠ¼RGRXVRGHWLSRJUDͤDHÂŤEDVHDGRHPSULQFÂŻSLRV de design como contraste, forma e contra forma, tons de cinza e ritmo. A DXWRUDGHIHQGHTXHHVWHPÂŤWRGRQÂĽRÂŤHVSHF¯ͤFRSDUDXPDÂźQLFDWHFQRORJLD e que tambĂŠm ĂŠ semelhante aos mĂŠtodos de avaliação contemporâneos XWLOL]DGRVQRVFDPSRVGH+&,28. Este resgate ao conceito minimalista tem recebido o nome de design SODQLͤFDGRVHXXVRSRGHVHUQRWDGRWDQWRHPDSOLFDŠ¡HVPÂľYHLVTXDQWRHP ZHEVLWHV6HXUHVJDWHVHID]QHFHVVÂŁULRHPXPDÂŤSRFDHPTXHDTXDQWLGDGH de informação gerada ĂŠ inversamente proporcional Ă  capacidade humana de consumo da mesma. É uma forma de que quem produz o conteĂşdo, o VLQWHWL]HHRVLPSOLͤTXHHPSUROGRXVXÂŁULR2FRQFHLWRJDQKRXDLQGDPDLV IRUŠDFRPRODQŠDPHQWRGRVLVWHPDRSHUDFLRQDO:LQGRZVGD0LFURVRIW SRUVHUXPVRIWZDUHDPSODPHQWHXWLOL]DGRORJRVXDQRYDLQWHUIDFHSDVVRX DLQIOXHQFLDURXWUDVDSOLFDŠ¡HV,VWRRFRUUHXSRLVSDUDPXLWRVVHWRUQRX uma maneira de promover facilidade e simplicidade por meio de uma ̧.(11$+LODU\'HVLJQ,VVXHV9ROXPH18PEHU:LQWHU ̧$EUHYLDŠ¼RHPLQJOÂŹVSDUDRFDPSRGH+XPDQ&RPSXWHU,QWHUDFWLRQ

101


interface minimalista.

7HODLQLFLDOSHUVRQDOL]ÂŁYHOGR:LQGRZV

2GHVLJQSODQLͤFDGRXPDWFQLFDTXHQ¼RLQFOXLDWULEXWRVWULGLPHQVLRQDLV 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 PDQHLUDV6HXIRFRGHYHVHYROWDUDRXVRGHFRUHVYLYDVWLSRJUDͤDVHP VHULIDHHOHPHQWRVJHRPWULFRVVLPSOLͤFDGRV

Nesta última etapa, serão apresentadas as interfaces desenhadas para a DSOLFDŠ¼RHTXHVHJXHPHVWHFRQFHLWRGHSODQLͤFDŠ¼RFRPRUHFXUVRSDUD 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 FRQWLGDGHYHVHUHͤFLHQWHHVLPSOHV

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


7HODGHFRQͤJXUD©¥RVRFLDO

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 SRVVDFRPSDUWLOKDUDVFHQDVTXHGHVHMDUQDVUHGHVVRFLDLV

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«WHODSULQFLSDODWUDY«VGHOD«SRVV¯YHODFHVVDUWRGDVDVIXQ©·HVGD DSOLFD©¥R1RPHQXODWHUDOH[LVWHPFRQH[·HVSDUDDVRXWUDVIXQ©·HVGD DSOLFD©¥RHQD£UHDFHQWUDODVV«ULHVTXHFRPS·HR6WUHDPVHOHFLRQDGR( QDEDUUDVXSHULRUH[LVWHXPPHQXSDUDDFHVVDUDVLQIRUPD©·HVGHXVX£ULR H VHQKD SDUD SRVV¯YHLV DOWHUD©·HV DVVLP WDPE«P FRPR RV GDGRV GH mídias sociais.

107


Tela Popular

7RGRVRV6WUHDPVFULDGRVͤFDPGLVSRQ¯YHLVSDUDRXWURVXVX£ULRVSRGHQGR 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«XPDIRUPDGHJDPHͤFD©¥RDSOLFDGDDRVHUYL©RPRWLYDQGRRXVX£ULR D DOFDQ©DU REMHWLYRV HVSHF¯ͤFRV 0DV LVWR Vµ VHU£ SRVV¯YHO PDQWHQGR D XWLOL]D©¥RGRVHUYL©RDͤPGHDOFDQ©DUDPHWDSURSRVWD

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 2VIRUPDWRVGHLPDJHPXVDGRVHPXPDDSOLFDŠ¼RGHL3DGV¼RRVPHVPR 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 6HJXQGR6$0$5$7LPRWK\ S RJULGXPDPDQHLUDGHDJUXSDU RVGLYHUVRVHOHPHQWRVTXHFRPS¡HPXPDSHŠDRXVRGHVWDWFQLFDWUD] FRPRYDQWDJHQVFODUH]DHͤFLQFLDHFRQRPLDGHWHPSRHLGHQWLGDGH,VWR Ê possível pois o grid hierarquiza a informação e a organiza de maneira FRHUHQWHDRREMHWLYRGRGHVLJQHU3DUDRSURMHWRGR6WUHDPIRUDPXWLOL]DGRV dois grids, onde o primeiro leva em consideração a årea mínima sensível ao WRTXHHRRXWUREDVHDGRQDXVDELOLGDGH(VWHVHJXQGRDMXGDDSRVLFLRQDU os elementos em uma região de fåcil interação por parte do usuårio, um ORFDOTXHVHMDSRVV¯YHOGHVHDOFDQŠDUFRPXPWRTXH

DifĂ­cil

MĂŠdio FĂĄcil

2JULGGDHVTXHUGDYLVDDXVDELOLGDGHLQGLFDQGRRWDPDQKRP¯QLPRGHLQWHUDŠ¼RM£RGD GLUHLWDLQGLFDDV£UHDVGHPDLRUGLͤFXOGDGHSDUDWRTXHHPWHOD 112


Alguns elementos do grid para um dispositivo digital, como o iPad, SRVVXHPDOJXPDVGLIHUHQFLDŠ¡HVSDUDLPSUHVVRV1¼RH[LVWHPPDUJHQV SRLV GLIHUHQWH GD SUHRFXSDŠ¼R FRP R UHͤOH QR DFDEDPHQWR GH XP impresso, as telas destes dispositivos podem ser aproveitadas atÊ o limite GHVXDERUGD2XWURLWHPTXHRVGLIHUHQFLDRIDWRGRDSDUHOKRVXSRUWDU 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 GRVGLVSRVLWLYRVP¾YHLVDVIRQWHVM£FRPHŠDUDPDVHDGDSWDUDRFRQWHŸGR digital para monitores. Isto ocorreu, pois os sites trouxeram consigo muitos HOHPHQWRVGRGHVLJQLPSUHVVRFRPRJULGHVSDŠRGHUHVSLURHWLSRJUDͤ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 XPIXQFLRQ£ULRGDHPSUHVDFKDPDGR&KULVWLDQ5REHUWVRQHGHVFULWDSHOR mesmo como uma fonte desenhada para dispositivo de alta resolução e alinhada com a interface do novo sistema.

113


)DP¯OLDGHIRQWHV5RERWRHPVXDVGLIHUHQWHVYDULDŠ¡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 +HOYHWLFDW¼RXWLOL]DGDSRUVXDULYDO$SSOHQRVLVWHPDRSHUDFLRQDOL26TXH LQFRUSRUDWDQWRD+HOYHWLFDTXDQWRD+HOYHWLFD1HXHFRPRIRQWHVSDGU¼R GHVLVWHPD6WHSKHQ&ROHQGRVLWH7\SRJUDSKLFDIRLPDLVDOPHIH]XP comparativo de seu desenho com outras fontes pois, segundo ele, ela Ê XPDPLVWXUDGH+HOYHWLFD0\ULDG8QLYHUV',1H5RQQLD(VWDIRLDIRQWH 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


&RPSDUDWLYRGDIRQWH5RERWRFRPVXDVVHPHOKDQWHV

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 GHFRPRHVWDWHFQRORJLDDIHWDDWRGRV2L3DGGLVSRVLWLYRP¾YHODERUGDGR QHVWH WUDEDOKR SRU PDLV TXH VHMD R PDLV GLIXQGLGR  DSHQDV XP GRV diversos modelos, isto claro, sem contar os smartphones e recentemente ODQŠDGRVWDEOHWVGHPHQRUHVSURSRUŠ¡HV $IXQGDPHQWDŠ¼RWH¾ULFDPRVWURXTXHDWHFQRORJLDXVDGDKRMHGHULYDGH SHQVDPHQWRVHLGHLDVTXHM£YLQKDPVHQGRWHVWDGDVK£PXLWRVDQRVPDV que só com o correto alinhamento de tecnologias foi possível produzir XPDSDUHOKRFRPHVWDVIXQFLRQDOLGDGHV2HVWXGRGHVWHFDPLQKRWUDŠ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ͤQVPDVWDPEPSDUDDMXGDUDRULHQWDURTXHSRGHYLUDVHJXLU 2 XVR GD LQWHUIDFH FRPR FRPXQLFDGRU Q¼R VH UHVXPH DSHQDV HP VHU HͤFLHQWHRXDSUHVHQWDUERDFDUDFWHU¯VWLFDYLVXDOHODSRGHVHUFRPSDUDGD 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 SURMHWRIRLEHPH[HFXWDGRSRLVIUXVWUDŠ¡HVGHXVRSRGHPDFRQWHFHUHP qualquer situação. Em um aplicativo móvel podemos imaginå-las como DGLVW¤QFLDHQWUHRXVX£ULRHDLQIRUPDŠ¼RTXHGHVHMD4XDQWRPDLRUIRU esta distância, menor serå a qualidade de uso do aplicativo. Ele serå visto DSHQDVFRPRXPDIHUUDPHQWDHQDGDPDLVRXVHMDXPDH[SHULQFLDVHP impacto.

117


3RURXWURODGRTXDQGRRVREMHWLYRVV¼RDWLQJLGRVIDFLOPHQWHRXRVLVWHPD 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 VXEMHWLYDDPLVV¼RGDLQWHUIDFHFRPRFRPXQLFDGRUIRLFXPSULGD 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¡HVGHXPDVROXŠ¼R5HDOL]DQGRGLYHUVRVWHVWHVGHVXDVIRUPDVIOX[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. &ULDUHVVDHPSDWLDFRPRXVX£ULRQ¼RXPDTXHVW¼RGHVRUWHHODIUXWR GR WUDEDOKR H SHVTXLVD GH SURͤVVLRQDLV GDV PDLV GLIHUHQWHV £UHDV TXH SURMHWDUDPHVWUXWXUDUDPHSURWRWLSDUDPGLYHUVDVYHUV¡HVGHXPDVROXŠ¼R 5HDOL]DQGRGLYHUVRVWHVWHVGHVXDVIRUPDVIOX[RVKLHUDUTXLDVHGHPDLV 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ͤQDOHVXDVPDLVGHIHUHQWHVFDUDFWHU¯VWLFDVSHVVRDLV

118


119


Referências %LEOLRJU£ͤFDV


%216,(3(*XL'HVLJQFXOWXUDHVRFLHGDGH6¥R3DXOR%OXFKHU &+$1'/(5&DURO\Q81*(55XVV2JXLDSDUDSURMHWDU8;5LRGH-DQHLUR Alta Books, 2009. )/866(59LO«P2PXQGRFRGLͤFDGRlHG6¥R3DXOR&RVDF1DLI\ -2+16216WHYHQ&XOWXUDGDLQWHUIDFH5LRGH-DQHLUR=DKDU 0$('$-RKQ$VOHLVGDVLPSOLFLGDGHYLGDQHJµFLRVWHFQRORJLDGHVLJQ 6¥R3DXOR1RYR&RQFHLWR 35((&( -HQQ\ 52*(56 <YRQQH 6+$53 +HOHQ 'HVLJQ GH ,QWHUD©¥R DO«PGDLQWHUD©¥RKRPHPFRPSXWDGRU3RUWR$OHJUH%RRNPDQ 7,':(//-HQLIHU'HVLJQLQJ,QWHUIDFHVlHG6HEDVWRSRO2̵5HLOO\ 0(**63KLOLS%+LVWµULDGRGHVLJQJU£ͤFR6¥R3DXOR&RVDF1DLI\ &+$7),(/'7RP&RPRYLYHUQDHUDGLJLWDO5LRGH-DQHLUR2EMHWLYD

121


ReferĂŞncias: Sites Consultados


Arquitetura de Informação Sites relacionados a estruturação de informação: 8VHU([SHULHQFH'HVLJQKWWSVHPDQWLFVWXGLRVFRPSXEOLFDWLRQV VHPDQWLFVSKS 8QGHUVWDQGLQJ,QIRUPDWLRQ$UFKLWHFWXUHKWWSSUH]LFRPDDIPY\DENW XQGHUVWDQGLQJLQIRUPDWLRQDUFKLWHFWXUH

Cores Seleção de cores para aplicações: )ODWGHVLJQFRORUVKWWSGHVLJQPRGRFRPIODWGHVLJQFRORUV

Ícones Bibliotecas de pictogramas para ícones: &UHDWH:HE)RQWVKWWSZZZZHEGHVLJQHUGHSRWFRPKRZWR PDNH\RXURZQLFRQ:HEIRQW %LEOLRWHFDFRQHVKWWSIRQWHOORFRP %LEOLRWHFDFRQHVKWWSZZZJXLGHERRNJDOOHU\RUJLFRQV

Interface Referências de criação e da história das interfaces: ,QWHUIDFH,QVXOWVKWWSZZZIOLFNUFRPJURXSVLQVXOWV ,QWHUIDFH3UHVHQWDWLRQVKWWSZZZOXNHZFRPSUHVRV :LQGRZV3KRQH3DWWHUQVKWWSFKRFRODGHVLJQFRPSDGURHVGH LQWHUIDFHGRZLQGRZVSKRQHSDUWH :LQGRZV3KRQH3DWWHUQVKWWSFKRFRODGHVLJQFRPSDGURHVGH LQWHUIDFHGRZLQGRZVSKRQHSDUWH :LQGRZV3KRQH3DWWHUQVKWWSFKRFRODGHVLJQFRPSDGURHVGH LQWHUIDFHGRZLQGRZVSKRQHSDUWH 123


$UWLJRVKWWSZZZDOLVWDSDUWFRPWRSLFVXVHUVFLHQFHDFFHVVLELOLW\ /LQKDGRWHPSRGHLQWHUD©·HVKWWSVZZZIDFHERRNFRP/,$8)6&DU /LQKDGRWHPSRGH*8,̵VKWWSZZZJXLGHERRNJDOOHU\RUJWLPHOLQHV ,QWHUIDFH;HUR[$OWRKWWSWRDVW\WHFKFRPJXLVDOWRKWPO 7HODVGHDEHUWXUDGHVRIWZDUHVKWWSZZZJXLGHERRNJDOOHU\RUJ splashes 8,*XLGHOLQHVIRUPRELOHKWWSZZZPRELOH[ZHEFRPEORJXLJXLGHOLQHV mobile-tablet-design

Prototipagem Informações sobre como prototipar aplicações: 6NHWFKVSDUDL3DGKWWSVQHDNSHHNLWFRPSDGVNHWFKVKHHWV :LUHIUDPLQJ:HE$SSVKWWSLQVLGHLQWHUFRPLRZLUHIUDPLQJIRUZHE DSSV 8;DQG8,&KLFNHQDQG(JJKWWSZZZZLUHIUDPHZHGQHVGD\FRPX[ and-ui-chicken-and-egg +RZZHZLUHIUDPHSURMHFWVKWWSZZZZLUHIUDPHZHGQHVGD\FRP 3ODQHMDQGRZLUHIUDPHVKWWSZZZVOLGHVKDUHQHWEUDGKD\QHVVWUDWHJ\ DQGZLUHIUDPHVSODQRUGLH

Patterns Bibliotecas de referências sobre padrões em aplicativos e websites: $SOLFD©·HVKWWSZZZPDNHEHWWHUDSSVFRP $QGURLGKWWSZZZDQGURLGXLSDWWHUQVFRP $QGURLGKWWSDQGURLGSWWUQVFRP $QGURLGKWWSGHYHORSHUDQGURLGFRPGHVLJQSDWWHUQVLQGH[KWPO 'LVSRVLWLYRV0µYHLVKWWSRXUWKFRPZLNL,QGH[ 'LVSRVLWLYRV0µYHLVKWWSZZZPRELOHSDWWHUQVFRP 'LVSRVLWLYRV0µYHLVKWWSLQVSLUHGXLFRP 124


'LVSRVLWLYRV0µYHLVKWWSZZZORYHO\XLFRP 'LVSRVLWLYRV0µYHLVKWWSZZZPRELOHGHVLJQSDWWHUQJDOOHU\FRP mobile-patterns.php 'LVSRVLWLYRV0µYHLVKWWSSWWUQVFRP %RP

'LVSRVLWLYRV0µYHLVKWWSZZZSDWWHUQVRIGHVLJQFRXN 'LVSRVLWLYRV0µYHLVKWWSZZZWDSSJDODFRP 'LVSRVLWLYRV0µYHLVKWWSFUHDWWLFDFRPPRELOHODWHVWGHVLJQV 'LVSRVLWLYRV0µYHLVKWWSGULEEEOHFRPWDJVLSKRQH 'LVSRVLWLYRV0µYHLVKWWSWDSIDQF\FRP 1RNLDKWWSZZZGHYHORSHUQRNLDFRP&RPPXQLW\:LNL &DWHJRU\0RELOHB'HVLJQB3DWWHUQV L26KWWSZZZLRVSLUDWLRQVFRP L26KWWSFVVLSKRQHFRP L26KWWSGHYHORSHUDSSOHFRPOLEUDU\LRVGRFXPHQWDWLRQ 8VHU([SHULHQFH&RQFHSWXDO0RELOH+,*,QWURGXFWLRQ,QWURGXFWLRQKWPO L3DGKWWSZZZPDNHEHWWHUDSSVFRPFDWLSDG L3DGKWWSODQGLQJSDGRUJ 3DWWHUQVGLYHUVDVKWWSZZZIOLFNUFRPSKRWRVIDFWRU\MRH FROOHFWLRQV 3DWWHUQVGLYHUVDVKWWSSDWWHUQWDSFRP 3DWWHUQVGLYHUVDVKWWSZZZZHOLHFRPSDWWHUQVLQGH[SKS 3DWWHUQVGLYHUVDVKWWSXLSDWWHUQVFRP 3DWWHUQVGLYHUVDVKWWSGHYHORSHU\DKRRFRP\SDWWHUQV 3DWWHUQVGLYHUVDVKWWSGHYHORSHU\DKRRFRP\SDWWHUQV :LUHIUDPHVKWWSZLUHIUDPHVWXPEOUFRP

Usabilidade Referências sobre a preocupação com a usabilidade do usuário: 7HVWH$%KWWSZZZVPDVKLQJPDJD]LQHFRPPXOWLYDULDWH 125


WHVWLQJDVFLHQWLͤFPHWKRGRIRSWLPL]LQJGHVLJQ $UWLJRVVREUHXVDELOLGDGHKWWSZZZXVDEOHZHEFRP $UWLJRVVREUHXVDELOLGDGHKWWSZZZXVHLWFRP $UWLJRVVREUHXVDELOLGDGHKWWSZZZXVDELOLW\ͤUVWFRP $UWLJRVVREUHXVDELOLGDGHKWWSZZZXVDELOLW\JRY 0HGLGRUHVKWWSZZZFOLFNWDOHFRP (\HWUDFNLQJKWWSZZZFUD]\HJJFRP

UX - Experiência do Usuário Artigos e ferramentas ligadas a experiência do usuário: )HUUDPHQWDVKWWSVZZZPDNHVHWVFRPX[WRROV $JUXSDPHQWRGHVLWHVVREUH8;KWWSZZZWKHX[ERRNPDUNFRP )HUUDPHQWDVSDUDPHGL©¥RKWWSZZZPHDVXULQJXVDELOLW\FRPEORJX[ benchmarks.php $UWLJRVVREUH8;0RELOHKWWSZZZLQVSLUHX[FRP $UWLJRVVREUH8;KWWSX[PDJFRPEURZVHWRSLFV

126


Caio manzotti design interface