Desing de interação 003

232 visualizações

Publicada em

Terceiro conteúdo para o módulo de Design de Interação da Pós-Graduação em Mídias Digitais da Estácio.

Publicada em: Design
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Desing de interação 003

  1. 1. A deñmçao de Arquitetura da lnfonnação é o "estudo da organização da informação que permite ao usuário chegar ao entedimento". Na prática, ela se refere à organização da estrutura de um website e seu conteúdo, rotulagem e categorização da informação e o design dos sistemas de navegação e de busca.
  2. 2. Recuperação i @www lNà-'IDL ' _ / visuanzação s. ¡zàção . . g1' . Navegação
  3. 3. i Í* "V" _LT à ” . , n] ~ ' . A « . r 12-7 e . it est» e 4 _ à . _ 3,¡ r, fllr-. l'll= lhlali= aniko~ r K ExáVE1liÉ_I¡'¡l, '.-| !¡¡3» ~ _N . .:: _t-. L$1ÍÍIQÊ= .IÉI°. ' g
  4. 4. “l i: .Iuñm g : rm c , ; : Ir Llii-. u g 1 ii mu: : E] ir : lrâzlaa mm : m: : 1 n; l ( x m¡ 5'v_sfL_l"l= l“I, . l. 'animar : lu lunar c' -* vn¡ i: : É'. Rr'. 4a. :: rui( P: P: "l ill-z: :: as ll: :axa-N- ir : nx-li : ami: zllmnn. L1:: :M : :uu . IML) ma' t: I um: _' ; cm iii¡ m lr. , ll m: , _ u. XII” A
  5. 5. xtâ 0 lnforfnãüori Àrchiteõtáiél 1 Q l define Arquitetura de Informação 139m9:: " r
  6. 6. E; . ;3;1 0 Information Architecture Institute define Arquitetura de Informação geme; r " e» 'll-IE ART AND SclENcE OF ORGANIZING AND LABELlNG WEB SITES, INTRANETS, ONLINE OOMMUNIHES AND T0 SUPPORTUSABIUÍY AND F| NDABlUTY.
  7. 7. REIBYE RESEARCH nm um» Raul lima, Rml QCnlLHLÍ by NME BOL! :na mm IuLAmIuultE
  8. 8. MAKE IT SD 'Jli. lñ'lf'lrli'| " a, “um author; u CvuiSICPNER »uzssu
  9. 9. "Everyboúyknvws menmuiem we need to De more inuuvaiive. Mw we've wi the soutien Bamesmrmma lhis sum_ nm, mms-on mc¡ m l enerqizavmir mam and mnmneyu: creauviry-m ao n using sum you »many nave nu your viíice suvolr closer! " . .p-mn uunuam~inanu . W L 1" f' A APlaybookforlnnovators, " ›- _- - Rulebreakers, andchangemakers 6 Dave Gray Sunni Brown O'REILLY' James Macanuio f* f¡ i 1,/
  10. 10. v a - - Introdução é Boas Práticas em UX Design é uma , coletânea de çartlgos, exemplos e_boas práticas em User Experience Design para quem trabalha _ oomcriaçãoe desenvolvimento de produtos - digitais - seja em portais, agências, startups, consultorias* ouempresas dealguma forma( envolvidas com criação de software Aléh) de exemplos práticos, o livro traz um e ' panorama do mercado para quem busca dar . - * “ os primeiros passos_ na área. ' 'i
  11. 11. SIMPLICIDADE Giles COlDOLliPE em sei¡ livro Simple and Usable ; Diopóe +1- “modelos para SOlLIClOFÕl' o excesso de irformacào e conseguir desenhar' lHÍÊHÊiCeS realmeiíze simples
  12. 12. Remove Hide , p: _ l _ o › -íjcs : e o v Organize Displace
  13. 13. á? ?? m* ' 1,( " V ~ ' . . ea Im l ri e . leu 1:31 13 3fâlllltlidêf liVA(= -'›: ',: ~il: -Q| ll= ,ll0_lll= li 'OKOR-'fãi-qlllà ¡râimizjlzyzzemanioilzlf orinnnlplllorauêloi l-íkíüplolilâó-*ÚQIIÍÍÍW "ranioxvxqi“oiomtailliloi ¡sm! .Ani ¡Vsflliuoiolln oranllnigll' ; Lam-gula vioitFê-llêhlIlilâwñliíãlk-CÍSIIEVIQ;
  14. 14. SIMPLICIDADE Organize: distribua os elementos da interface de forma que eles se enoaixem em grupos lõgcos. Isso podeisigniñrtanto se basear em. modelos mentais. (de quem usa), quanto ; agirupáielos emi padrõesíde interface. que sejam: maisífamiliares;
  15. 15. GJ "J 7 i i_ -' 'r1_| l_l_| _F“_iJ i . L zu: 1:. Fil-il: : íl=9Z(= -'= .l',0I= )ll= .lh¡aih! Ilallllãlltellllploiihliikle : io»all-ninmaiñuanidiu-oi-innnqiviz-: ilzs-sazjbinn-íliivnog); , ici-rala c : ida-divã:
  16. 16. i' w-l-x-e-: J--V-«v '- -J n ' _Í "i Í ~: Llilil; üJJ i: LL un 15. Emperor: : ^ola]lorqlllmliglllliralaíhwãí! Illtllclilalllíhldlai : iam-emita-dllzigioiáíivxo-oituoiuiiiro-lnigtait oílaioiumançjuia : i laieuíziois--iêkc-ílqutumgpz-inmvisil , Iloifiilclsiiiãli (animam: iniizmufoizz: ipzoizs-! ivrzrk-ileugjuiarvxmtaí. 'm' a”. V! ” 3' 3 'fix r . ¡ . qi m, *t5
  17. 17. GATOS Segundo a wikipedia, [o gato] é um pequeno mamífero domesücado e peludo que nós valorizamos pelo companheirismo e pelas suas habilidades de caçar outros bichos.
  18. 18. GATOS Seja curioso: sempre investigue aquilo que seu instinto manda. Descanse sempre que puder. Encontre tempo para descansar e para recuperar as energias. Se você se sobrecarregar de tarefas, isso acabará prejudicando a qualidade do seu trabalho. Seja flexível e se adapte a qualquer situação que aconteça. Você nunca sabe onde estará trabalhando, ou com quem - e você precisa estar pronto para se contorcer para o que precisar.
  19. 19. GATOS Fique confortável em qualquer lugar: esperando em um aeroporto, em visitas ao cliente ou em qualquer outro lugar que você tenha que ir. Aprenda onde estão os lugares "quentes". Use isso como uma metáfora, claro, para saber em quais lugares você deve ir para encontrar problemas de usabilidade, por exemplo. Gatos sabem quem são seus amigos. No caso do UX, saiba quem são seus usuários e seus stakeholders, já que você trabalha para ambos.
  20. 20. GATOS Fique de olho em tudo: em oportunidades de conversar com outras pessoas e de investigar mais sobre determinado assunto. Tire um tempo para brincar. Saia para "tomar uns bons drink" e socializar com pessoas diferentes. Tenha uma boa aparência. E para não se inspirar nos gatos: não tema estranhos, não tema mudanças e não se deixe acomodar.
  21. 21. -LTIÂlEi/ Ltl; ¡Liilliii r laêãlõllllíhiílaâ "íII¡r= i' iai inieimgel. .altihrlaiiiiriromípiqiüid e "mais sr. Inigunimiíi: »diana-mariana -iaiurai- " ñiollllahidla- oioinnuqlria- a -: :mím--ozolniaaglianl-itemigli “Irani tlzitsunnnnnior: lnirzinkioia.
  22. 22. ' F . E › "L - a¡ awllceclafllliiicieíaali» : a: ; x *' -. Í4 uma-picllniuinlir-: uie n 'uomulcrz' iziolnlollmgilv: íatfpnoiraf; lunar-ratio. Iiolll-'iitilánlnwleu--zc ¡( - L'-k . u. ^* , ___ ugno- , i __-, É_ l ir¡ : i «se às? r . . . : . v. 'i . ; _ . : 1:1_ , N¡ . _ l U 1'¡ Mir. " j ¡ j ' | | ó rm;
  23. 23. .at. '~ mina' ii ~ ' Fac¡ e de aprendizado' a utilização do sistema requer . v " -^"” memí
  24. 24. »L lembrar como utilizar a interface: *um* Fáci memorizar: o usuario i7": . ,
  25. 25. à_ ' 77 7" 7 O __ A, . _ M, › ' a A / H A ' l Í' l 1 E . I t g __ M, “* i' ' ” ' 0': ' ' - "i irtcim: l-: :zia : lllíãllrâwt- 'Air Til " 7 . ii. - v ;
  26. 26. .at. *um* Mini_ rataxa de errosrasc . .saiu erros. a interface deve avisar o Lisuário e * . .mn aüo ' “ _odofácit í*-
  27. 27. N_ r m” r" ' m _ À¡ x _ h, _L › / A ” l l ^ i l = = 'v' r , ' , jgtjg I r - x-; iívísgi 'lv acumula: c ; . _. , , . . ~ ~ : :iñài m" _ í
  28. 28. i. i l j' , i i -: l›= ílii. i:i: --v›l= Enigmlinlikwl: â” iiwniis. :i ilzealfollli-Çlalih àalnigloibrziol: a'! mim-íhlilllãllldhidlar'IÊ-'lãiigãlfzlllíl Illlñ petit-rwbnamwücioilz-uaíl-&âoiizudinamica-tz. .uaiíl-! Têlniolbi (aliam-ara: mim: laiiainigâlwpiroioillinvai àlllÍÍao-llslllílllo-: aonvciltllôilllã¡ pzaiunliilnio 'ÊliÍêhlnfêmOr ojlairairaikiz-oionnriuianioii"aaiioirgouacii-i nazigzaiiiêliiolfi agraiçíñvxall , é»aiíloeâol'l= ,wel9lil= vsí= lr'= lll “ Olalpraloildklolle-Ílouílâliãlilrêr-: u gira_ V Íêliíl : iniraniano-aoioianipiisiludis-dewtairak«aceitar-imita» : raiuic-oif-Jisiílvxoicnuonaãiziisinniai
  29. 29. . i* «siaiu-; i-. ciiei-. F " . igrirorájnnlpllitírçí “ x «mee- '-. i °. l!l= . _-~la¡r= .l'§= oi¡i¡loro'n'i i
  30. 30. ;arr-Iill-IIllàlciuunlaüàãqlllkflhk* - Entrevistas v Análise de Tarefa o Focus Group (sessões de discussão durante o levantamento de requisitos) o Card Surfing Hnn; “°'ugçwudí'wbfíx' - Modelagem de Tarefa - Prototipação rápida de partes da interface/ sistema 01ml¡ it-r: rdãt- --. 'rx-six u Moderação de testes sob os protótipos desenvolvidos o Avaliação heuristica - Testes de usabilidade lllíazllnníí* - M4414' › Observação do usuário sobre o ambiente ondeo sistema é utilizado
  31. 31. Experiência do Usuário -0 meu sentimento geral sobre o sistema é bom / /"'. -_- Design de Interação -A aparência do sistema me proporciona uma ¡nteração agradável Usabilidade 'Eu cunslgo usar as funcionalidades de modo fácil í" Uüüdade ' O sistema é úlil e atende às mlnhas necessidades
  32. 32. i Filial? l. J'_-. LAFJ' A Na web, a usabilidade é um fator crucial de ' sobrevivência. Se um website é diñcil de utilizar, as pasms desistem. Se a homepage não apresenta, de forma clara, o que a empresa tem para oferecer e o que é que os utilizadores podem fazer no site, as pessoas desistem. Se os utilizadores se perdem num website, desistem.
  33. 33. USABILIDADE Se a informação contida num website é de x' dificil leitura e não responde às questões-chave *n* dos utilizadores, eles desistem. Detecta aqui um padrão?
  34. 34. “fn _al I : L1: L1 15 «clean : wuull qiniaoiz-niillkç ' raiz-Vânia¡ : mm 'zu Mural: : (zmlowvrfiqiikl. 'plâlítlàiõlâil . ::. nñlmi all¡ viver-gsm; :: íkitmaniumpirozaeçie FIÍGãIIFIÍÍV/ ílàoillnniã italian : aii: (oii-unit ' ¡lgjlãñfàníláizlasrqivizxos nníllmurozrszçg. nrçpzgmoiiouaz- . « ¡ai-ilãsijo, asiqsl-qiglpiçrpâ. ' 'k saíu-if_ -~-~ me'
  35. 35. 'J l l m iãñiliâii
  36. 36. i* »à - ' _jjv ' "W. ' 3X», l: Lágçàsg lji); E 4 Existem numerosas metodologias para estudar a usabilidade de um sistema, mas podemos afirmar que a mais simples e útil é a realização de testes com utilizadores, que podemos dividir em 3 etapas: - »e “ _ f . __ 'j' ' Ó , ," r-w/ í// ~" Í' _ e; .J _- i '_= * * " _rifífd Y r 'm . ~_/ n» ' 'j , ... .- - sz
  37. 37. .. - _ t' A l 'JL' | _|_L JÉÂÁ Iii ? a , 1a; uíiimi-mas¡1:; pirzmaiaitziílvroie-¡ia-_gi!1blllor9=›g| iv1oi__ "° *e u ? MP«'liiãfâliãltwáiãwãàirñiã-riii-EO tiârs-lie-zllcumliiozo¡ &ripar; Íliñuis ~ caiam aiavizru. ¡nimilnrzi Ian: : . :, -: »<r: ¡nn. :i~¡r« Qlllàiiâltíàllliiãr: Jâiâklâlltiillufsw: inmiwã;
  38. 38. .. - _ t' A l 'JL' | ,_| _L JÉÂÁ 1:. : $531_ Iiíilmiiroi_ "r-Jimi¡iii-unroibudiozmzziiicuiqigrçsgoie. _ '° 'g "o : rubi: iiiíiaiiillríiciér: : m: Iiíliinioâ-'ie-¡ie-sükiiziilsi . _t_ , ., . . , ngztailm¡ ÊVMIF"F)ÃQ›OJGJIÊIZHÀÊ3.
  39. 39. .. - _ t' A l 'JL' | ,_| _L JÉÂÁ 1:. : $531_ Iiíilmiiloi_ "r-Jimi¡iii-unroibudiozmzziiicuiqigrçsgoie. _ '° 'g "o : rubi: iiiíiaiiillrílciér: : m: Iiílitnioâ-'ie-¡ie-sükiiziilsi . _t_ , ., . . , ngztailm¡ ÊVMIF"F)ÃQ›OJGJIÊIZHÀÊ3.
  40. 40. « _~ _ s. , Oonsiste na possibiiidéaceêso a urñtitigarou . conjunto de lugares. Significa não apenas permitir que pessoas com deficiências ou mobilidade reduzida participem de atividades que incluem o uso de produtos, serviços e infomwação, mas a inclusão e extensão do uso destes por todas as parcelas presentes em uma determinada população, visando sua adaptação e locomoção, eliminando as barreiras.
  41. 41. _s rimas E É" - _ à Em informática, programas que provêm acessibilidade são ferramentas ou conjuntos de ferramentas que permitem . _ , ._ s. › , ç que portadores de deficiências (as mais izariadas) se , ç _ a e , i *e utilizem dos recursos que o computador oferece. . .wa E a ' ^ E Essas ferramentas podem constituir leitores de ecrã como* ' " ' o JAWS e o Dosvox, para deficientes visuais, teclados virtuais para portadores de deficiência motora ou com dificuldades de coordenação motora, e sintetizadores de voz para pessoas com problemas de fala. ' : y:
  42. 42. 'latim' IIÍlO-: IMJL oílaaioi-iiiiiouroinn ensinaram ! smart-i imitam-libra homasirsilaiñvhm . ÍHÍ_'llL. .=-' "ÉLJÀON“Qblillsllüi, ¡ _ _ _ _i ii: í_ã~_'*? r_l_›tl_l ru, mrailnitaniai nirsiunio-aioiassilôiiildraidls-rairsirazzrai- : :moram °lñi_o, i¡? =i: n.lorVi'Biú§ aerlkfainnmgiçimiiilr" premiar a m» : ioxsssrovaicie-uvrsií-slitan. iii : igiziaroilaiiiíanílzitairanr : ligarntigr-diçiilçitãnioiigpeiiiuñtçi Alslleipiçi¡ ainioílauílszwziforoiroílainr OÍKMÕÍYH“ÍIQIO-ilâftllliàvâbzfãl Ir.
  43. 43. *lp i_= .-*. ~i*? í-l5lJJ . -lí 1i. .i. f~ lã rzgionsiruiojianaioieunieiurâítcze iannisiliiciílai nraulniíoimraiáto. gzelíiãlllíioneiçisjln . .rensiinitainrazwtiiaá -" (ci-Tlm. iiâñíollllrêmiinlpli *ã-, Olíâidi-'tãl ililolâ-'SHÕHÍÍOÍÉII ! Qui-gil A _ . 'rçíhnrçioitao (dia geihrniilaroílo- -wsravsa-. oias-oíiaitortaniksin âlllilàliiir-. lplãi-'Hii . ar-vaillasiíoinnnraiadla-aanvirqoi; 'gilàliltltíl' 'll-âíllê! “ilralll íiêtVíiif-Élêrrliííáàlfípflo : nzioras-lifolllliilsiila J 4h~g1!l§~0ÍÍ= l'1=b§; ll“'àI(9Y-Z oílloilsi-*Ilgsinii 'VKÊÉIÍQÍÊÍÉL
  44. 44. i7 AQ O World Wide Web Consortium (W3C) é a principal organização de padronização da _A ç_ ç World Wide Web. Consiste em um consórcio internacional com quase 400 membros, agrega empresas, órgãos gavemamentais e organizações independentes com a finalidade de estabelecer padrões para a criação e a interpretação de conteúdos para a Web.

×