Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Usabilidade: 10 regras para você desenvolver interfaces agradáveis aos usuários

950 views

Published on

Apresentação realizada na SETI - Semana de Tecnologia da Informação da UFLA - Universidade Federal de Lavras.

---

Já notou como o uso de alguns sistemas flui tão naturalmente que você nem repara que existe todo um trabalho de interface por trás? Em contrapartida, outros, mesmo com um visual bonito, cheio de elementos que saltam aos olhos, se torna um martírio usá-lo. Essa diferença entre o feio e o bonito, o usável e o não usável se resume na agradabilidade da interface.

Uma interface agradável combina boas técnicas visuais com boas práticas de usabilidade. Ela permite o acesso e execução de tarefas de forma fácil e rápida. Depois de várias pesquisas, leituras e experiências, sintetizei em 10 itens as principais regras de usabilidade para interfaces agradáveis de usar.

Published in: Design

Usabilidade: 10 regras para você desenvolver interfaces agradáveis aos usuários

  1. 1. RIO REGR AS R/ ldmh/ .x VOCE UESEIWUIÁ/ AGR/ AD/ À. / EI ER lNíERF/ ABES s/ .xo usu/ .xnno ;
  2. 2. ,, r _ . ' V ', ~ 'g a. ” - , r _ *' 4 V. -Íl ' : :v ' * ' , . , , w ' 'm' v. . gJ A x, n q, a¡ y _ t¡ . . 1¡ 1 r . ¡ , . j! 1 l 1 ¡ . 1 I r . 1 1 ** ', ' E l N ' y i I › a l w - s¡ - - . v a * J z'. . _ 'Í u x '*¡ . 1 ! A E te¡ l w ' v JF; V, l: ,A c Er. rev_ t. u ' i2. : :Jíãfãíllllíãàê
  3. 3. POR OUE EXWSTENI INTERFAOES OUE PAREOENI . Í?
  4. 4. INTERFACE OBJETIVA _É_ VISUAL ATRAENTE _É_ BOA USABILIOAOE
  5. 5. INTERFACE OBJETIVA VISUAL ATRAENTE BOA USABILIOAOE I : Iñgv '*~ : WII/ t U . .IJVEELJÂ IL. ; ÍJA/ 'JI . a z/ “L _ _
  6. 6. IO REORAS OE OURO PARA DESENVOLVER INTERFACES AORAOAVEIS AOS USUARIOS
  7. 7. ú I. CONHEÇA A REAL NECESSIDADE OO USUÁRIO
  8. 8. ú , 2. SEJA SIMPLES, MENOS E MAIS!
  9. 9. n A ñ aboulzblank <_ c q 5
  10. 10. §'¡I'L*'e1:- ' Paragraph V Font Family ' Font size ' nLi/ :wm sgjy-. lsAvavv E x. xWsz 2 ; axu »uma
  11. 11. BOM EXEMPLO Enviar Í | @JI I_I;
  12. 12. ú 3. CRIE UMA IDENTIDADE PARA SEU SISTEMA
  13. 13. ^ 'P' ^ 7 Documentl H . v. Í: 1¡ : E ' " EJ: 150% v É* 0a Iv: ñ Home Layout Document Elements Tables Charts SmartArt Review Fon: Paragrao* Smes I-*sert v . , E - 7- Ah z: v . 3:1 L v 'M . A . .a cambmuwdy) 12 A A *V* / * ' ' *' “- AaBbCrDdEt ¡uBbCcDdEu _ E” IA Iv v v f” E” "A ' Workbookl 0. LE¡ . r. 7; L: :a v; IL; L E: Loose' 91v ~ ñ Home Layout Tables Charts SmartArt Formulas Data Review Ed¡ Font Abgnmen: Numaer Format 4; _ Q nu v Calibr¡ (Body) v 12 ~ A› Av abcv , WrapTextv Geneva! v V: g. Normal 1;¡ › íI: : ' " ' " " "M . C* *^* ^ E; Presentationl , -4 “ E¡ 106% - ? I vqv , n . w I. ñ Home Themes Tables Charts SmartArt Transitions Animations Slide Show Review Síwdes Fon: Paraçran** l^san Format . _stavoux- A'. , I. 'EQ' w v,
  14. 14. ú 4. NÃO EXIJA ESFORÇO DE SEU USUARIO
  15. 15. DUPLICAR
  16. 16. CADASTRE SEU NOTEBOOK: E Importante cadastrar seu rIotcbook Informando seu nome completo o o numero de BCHE' para facIIItar o uso e cvItar DO§SIVCIS problemas cm C050 do perda ou CXÍfdVlO. Informe seu nome completo: Informe o numrrro do serio de seu notebook presente na parte Infonor do equnpamcrtto. O numero geralmente e constItuIdo por numeros c letras; ÍFTI IIIIII “s, IIIII o v IIIII IIIIILIFIII “ 4:¡ Ill. l". :. _r_ ; f I CADASTRE SEU NOTEBOOK: FaciIIte o uso o evite problemas Nome completo: Numero dc scrIr: do aparelho;
  17. 17. W . . 5. URGANIZE A INFORMACAO
  18. 18. Organizando a informação Definir as áreas de texto, espaçamentos e tamanhos das fontes são fundamentais para facilitar a leitura de uma interface. Título l Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Iaoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit Iobortis nisl ut aliquip ex ea commodo consequat. Título 2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Iaoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit Iobortis nisl ut aliquip ex ea commodo consequat. Título 3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Iaoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit Iobortis nisl ut aliquip ex ea commodo consequat.
  19. 19. Organizando a informação Defina' as ; áreas de texto_ esiàaçeaiwientçvs e tanwggmhtvs das fontes száiç: fundamzzntais para ÍOCMÍÚT' a eitura do uma interface. Título 1 Título 2 Título 3 Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet. consectetuer adipiscing elit_ sed consectetuer adipiscing elit, sed consectetuer adipiscing elit. sed diam nonummy nibh euismod diam nonummy nibh euismod diam nonummy nibh euismod tincidunt ut Iaoreet dolore magna tincidunt ut Iaoreet dolore magna tincidunt ut Iaoreet dolore magna aliquam erat volutpat. Ut wisi enim aliquam erat volutpat. Ut wisi enim aliquam erat volutpat. Ut wisi enim ad minim veniam. quis nostrud ad minim veniam. quis nostrud ad minim veniam, quis nostrud exerci tation ullamcorper suscipit exerci tation ullamcorper suscipit exerci tation ullamcorper suscipit Iobortis nisl ut aliquip ex ea Iobortis nisl ut aliquip ex ea Iobortis nisl ut aliquip ex ea commodo consequat. commodo consequat. commodo consequat.
  20. 20. B. O VAZIO NIIJIVOII. OEVE ESTAR VAZIO
  21. 21. Pesquisar: thiagonasc. com Q Responsável Data de criação
  22. 22. Pesquisar: thiagonasc. com Nenhum resultado encontrado. Não ha registros em nossa base de dados para thiagonasccom. reaIize uma nova pesquisa o
  23. 23. ú 7. SE APROVEITE no CONTRASTE
  24. 24. Lançamento! Lorem Ifjzuli] tIoloi' sit amet. consectetuer acIipi: .<; iiic_; FBIIÍ. SQCI ctiam nonummy» nibh euismod EIIICICILJHÍ ut Iaoreet dolore mgigna aliciuanw erat v-:3|Lit; :~at. Ut wisi enim nd minim IJÉIII-ÉIIW, CILIIÉ- nostrLiCI exerci tation ulIzmwcorçaer suscipit IOIDOIÍIÉ misI ut ; iIiquuJ ex ea commcvcic: consequat. DLIIS autenw *mel @um IFILIIE* dolor m hendrtsrit m vulptitate vcIit @São nmqlestie: CDHSQCILIÕE, . ~:›| ¡Ilum dolore eu feuçiint nulIa facilisis nt 'veto @ros ct accumsean @t iusto OCIIO (Iigiwissiiww qui IDIJHCIIÍ pmeseiit ILIDÍÕÍLIIW : :til (Ielemt (iuçjue cIuis (Iolorci to fcugait nulIzu faCiIIsi. COMPRAR Lançamento! COMPRAR
  25. 25. + 8. UTILIZE AS CORES ESTRATEOIOAIVIENTE
  26. 26. SEM O USO DAS CORES T? <2*li"l'lIêÍÍêl$ÇF-j¡l(! axçilullíãi ÍCFÍÍÍCBL CBL cihufíi<: lsg CÍÉ' síkiitçliirai_ transita¡ çircmçtgignit*
  27. 27. COM O USO DAS CORES T? <2*li"l'lIêÍÍêl$ÇF-j¡l(! ;mçllljlíãi ÍCFÍÍÍCBL CBL 'Êhlüfílü CÍÊ' síkiitçliirai_ [rasteira çirçmçtglgnit*
  28. 28. ú O. OE O CONTROLE AO USUARIO
  29. 29. EVITAR atum- anual-un: :x-m- ~ Amucihitzi actual-mm ; mau . .Lu -h¡O_[ll= IÍÍIl= uI_, o1gl= $' gommclia ; atum fntoiunqzuoflox<vê^hiuliow ! lol ! AMP-kw ; diluir lkllillvhl' ? molha 'llluofr-. i-íl: !JOÍMOBIHOI Etoíilf-_Iv ÍGIÍIIOVIQ' EVITAR amv-J" : canal-mic: :x 3'- < . hlqLIláII| l-. -I_. o|_n¡= w TEVE, """»31Ô)]§Q&Fv 77 ___, ,~-"' 7 'ETT ãoÍIIialr : aim-var ülolunqzudlowvãlzluitow E E E' "" , _ _ 7 , linkar naun-var san-im T 2101740516104 O ' ímnawargg ›
  30. 30. BOM EXEMPLO Nami- ñhllll-lIJF-, I nunwiilzuz¡ gommzmzi . lzi-_¡-¡= ¡nu= .-L. -1.-x= w quarenta: atmncrzudlu-«àizi-lkow ! tamem-im ; meu : calm-var ? malha 'limitar-fla SIOIMOBMO' ; t-íiliaiv : taum-var BOM EX EM PLO I: Í<T, IÍ'ÍÍÍI"I'IISMÇÉI<TA 'Palm crañkazt-: i em: : &Íkmáhi lsllllclvleli' “Atum 'Êta-Inf' cito- mataram! ! ! FV I SIM I
  31. 31. L. :i IN Hoje; .i, I II IIiII I I i" - R1 l ›““: _i~: II
  32. 32. / Óculos de Sol e" gli/ Í' JI N$:100,00 x” . '// ' )_¡| ni_-¡. ¡f. o ; VIA qr. / Óculos de Sol xx iIiI' s %' “m ñ, .- _/ N$: IO0,00 Sistema não responde nem oferece rierhuma informação. ..
  33. 33. BOM EXEMPLO BOM EXEMPLO . I Z/ _C/ _L/ _L/ _C/ _Z/ ZZT/ T/ 22/2/22 1 ÂQIÍÉIÍÊÍHI *ihhileks _oirgie(= i»1.-i= _iii-íisr›~2:- mui _OIdÍIÍÉISi_ 'Êülíansit-r-ia-llinni: ::ixo-px-iétahllamina! lgili-¡mtqgiuinlit-n. .magrasmamy_ I i-@eu@muiram; iiIn-qiqruç-«IL-liaiahnüiinpitoi-iaxwiuiil-nxaau; intima
  34. 34. Informação: o usuario ao ser cadastrado recebera em seu Q'ITTBII as instrucoes de acesso. Sucesso: o usuário foi cadastrado no sistema e seu painel ia está acessivel. Alerta: existe um usuário cadastrado com o mesmo nome, altere para prosseguir. Erro: não foi possivel cadastrar o usuário pois o sistema excedeu o limite.
  35. 35. «i» SATISFAOA E IMPRESSIONE SEU T I e
  36. 36. MUITO h- OBRIGADO! I' THIAGO NASCIMENTO WWWTHIAGONASOCOM

×