Unidade 1 - Design de Interface do Usuário.pdf

Teoria básica sobre Design de Interface do Usuário.

2. Guia de
atividades
para a
Unidade 1

3. Agenda da Semana
Aulasíncrona–23/10/2023
•Apresentaçãodadisciplina;
•AulaexpositivasobreIntroduçãoàInternet.
Atividadesassíncronas–23/10/2023a29/05/2023
•Tarefa:Conhecerferramentasqueatuamcomoservidor-1h
•Leitura:Aula1doLivroFundamentosdoDesenvolvimentoWeb-1h
•Leitura:Capítulo1doLivroDesigneAvaliaçãodeInterfacesHumano-Computador-
2h
•Questionário-2h
Encontropresencial–19/05/2023
•Discussãosobreaimportânciadeumbomdesign;
•AulaexpositivasobreNoçõesdeDesign;

4. Roteiro
●Design de Interface de Usuário
●Requisitos
○Consistência
○Padronização
○Integração
○Portabilidade
●Critérios de qualidade
●Conceitos
○Tipos de usuários da web;
○Espaço de uma página web;
○Navegação
○Página principal e páginas internas de um website;
○Usabilidade;
○Acessibilidade;
○Legibilidade.
●Figma

5. DesigndeInterfacedoUsuário,tambémconhecido
comoUIdesign,éoprocessodecriaraaparênciaea
interaçãodeumprodutodigital,comoumaplicativo
ouumsite,comoobjetivodetorná-lofácildeusare
agradávelparaousuário.
Design de Interface do Usuário

6. Design de Interface do Usuário

7. Design de Interface do Usuário

8. Umdesigndeinterfacedousuáriobem-sucedidolevaemconsideração:
•Aexperiênciadousuário;
•Ocontextodeusodoproduto;
•Asmelhorespráticasdedesign(usabilidadeeacessibilidade)
•Aconsistênciavisual.
•Atenderàsnecessidadeseexpectativasdosusuários.
DesigndeInterfacedoUsuário

9. Conceitos de Engenharia de
Sistemas

10. Requisitos de um Sistema
computacional
•Confiabilidade
˲Ousuáriodeveconfiarnosistema,não
temererros.
•SegurançaeDisponibilidade
˲Estãoligadosdemaneiraintrínseca,um
sistemacompoucasegurançatemmais
chancesdeficarindisponível.

11. Engenharia de Sistemas: Interface
•Padronização;
•Consistência;
•Integração;
•Portabilidade;

12. Padronização

13. Padronização
•Apadronizaçãodainterface,
dosobjetos(normalmente
visuais)comosquaisos
usuáriosinterageméfator
decisivoparaosucessodeum
sistemainterativo.
•Afaltadepadronizaçãoirritao
usuário,aumentaotempode
aprendizadoeaincidênciade
erros.

14. Padronização -Atomic Design
•AtomicDesignéumconceitocriadopeloDesignerBradFrost;
•Frostindicaquetodainterfacepodeserquebradaemdiversos
elementosmenoresquesãoessenciaisparaasuaformação;
•Dessaformaosistemasetornanaturalmentemodulare
escalável.

15. Padronização -Atomic Design

16. Consistência

17. Consistência
•OconceitodeConsistênciaestámuito
próximoaodepadronização.
•Consistênciarefere-seasequênciasde
açõescomuns,termos,unidades,layouts,
cores,tipografiasutilizadasemuma
aplicação.
•Aconsistênciaéumfortefator
determinantedesucessooufracassode
umprojeto

18. Integração
O conceito de integração está ligado
à transferência automática de dados
entre sistemas distintos.

19. Portabilidade
•APortabilidadedizrespeitoao
potencialdeseconverterdadose
compartilharinterfacesentrevários
sistemaseequipamentosdediferentes
tipos.
•Ainformaçãoestádisponívelaos
usuáriosondequerqueelesestejam
(desdetenhamacessoàinternet)eem
váriosdispositivosdiferentes
(desktops,tablets,smartphones,etc).

20. Critérios de Qualidade de Interface
Homem-Computador
•Tempo para aprender
oQuantotempolevaparaumusuáriotípicoaprenderausaro
sistemaparaexecutardeterminadatarefa?
oUsuáriotípicoéaqueleusuáriorepresentativodacomunidadede
usuáriosdaquelaaplicação.
oAssim,seoprojetoenvolvedesenvolvimentodeinterfacespara
usuárioscomdeficiênciavisual,ousuáriotípicoéumapessoa
comdeficiênciavisual.

21. Critérios de Qualidade de Interface
Homem-Computador
•Performance
oÉmedidaemtempogastopelousuáriotípicoemrealizaruma
atividadebemrepresentativadodomíniodaaplicação.

22. Critérios de Qualidade de Interface
Homem-Computador
•Tempo de retenção
oEssamétricadizrespeitoaotempoqueousuáriomantémo
conhecimentodecomousaraaplicação.
•Otempoderetençãoestárelacionadocomotempode
aprendizadoeafrequênciadeuso.
•Obviamentequantomaissimpleseintuitivoforaformacom
queosusuáriosinteragemcomosistema,maiorseráotempo
deretenção.

23. Critérios de Qualidade de Interface
Homem-Computador
•Taxas de erro
oErrospodemcausargrandesprejuízos.Perdasquepodem
envolvervidas,recursosfinanceiros,imagem,oportunidade,
mercado.
oAssim,oserrosdevemsertratados,comaorientaçãoclara
paraousuáriosobrecomoprocederdiantedoerro.

24. Critérios de Qualidade de Interface
Homem-Computador
•Satisfação subjetiva
oEssamétricadizrespeitoàexperiênciaqueousuáriotemao
utilizarumaplicativopararealizardeterminadotipodetarefa.
oUsuáriospodemsesentirfrustradosporqueaaplicação“não
ajuda”nahoraderealizardeterminadaação;
oOuquenãoconseguiramacharaopçãoqueoslevaacerta
ação,ouaindaquenãoconseguiramcontrolarosistema.

25. Tipos de usuário
•Individualidade (idade, cultura etc)
•Tamanho e resolução de tela
•Navegador de Internet
•Velocidade de conexão

26. Espaço da página
Na cultura ocidental
Fundamentos do Desenvolvimento Web

27. Navegação
•Navegaçãoéoatoouefeitodepercorrerumhipertexto,
determinandoasequênciaemqueosdiversos
documentossãoconsultados,oupercorrerpáginasweb,
indodeumlinkaoutro.
•Asinterfacesdevemsercapazesderesponderaousuários
trêsperguntas:
•Ondeestou?
•Ondeestive?
•Ondepossoir?

28. Página inicial
•A página inicial geralmente é a página mais importante de
um sistema;
•A página inicial deve seguir algumas características:
•Destaque ao que é importante
•Facilidade para encontrar o que procura
•Concisa e direta
•Mais navegação do que conteúdo
•Dividida em seções

29. Páginas internas
•Apesar da página inicial ser super importante, o usuário passar
em torno de 80% do seu tempo em páginas mais internas;
•As páginas internas devem ter algumas características:
•Manter estilo
•Manter navegação
•Se o conteúdo for extenso, dividir em resumo e detalhes
•Seções clássicas
•Página inicial
•Sobre
•Contato
•Mapa do site
•Política de privacidade
•Perguntas frequentes
•Páginas de erro

30. Usabilidade
Usabilidadepodeserdefinidacomo:
“Umconjuntodeatributosdesoftwarerelacionadoao
esforçonecessárioparaseuusoeparaojulgamentoindividualde
talusopordeterminadoconjuntodeusuários.”
Conceitosimportantesparausabilidade
•Usuário–Pessoaqueinteragecomoproduto.
•Contextodeuso–Ambiente,tarefas,etc,queoprodutoé
usado.
•Eficácia–Precisãoemresolverproblemas.
•Eficiência–Precisãonautilizaçãoderecursos.
•Satisfação–Aceitabilidadedoproduto.

31. Usabilidade
Fatores que influenciam na autonomia dos usuários:
•Graudefamiliaridade.
•Usodeconvençõesjáaceitasemgrandessiteseportais.
•Orientaçãovisualdospercursosaseguir.
•Sinalizaçãodostatusdatarefarealizada.
•Adiçãodelinksrelacionados.
•Navegaçãoclaraeobjetiva.
•Reversibilidadedeações.

32. Acessibilidade
Aacessibilidadeemsistemaswebrefere-seaodesignedesenvolvimento
dewebsites,aplicaçõesesistemasdigitaisdeformaquepossamser
utilizadosportodasaspessoas,incluindoaquelascomdeficiênciasou
limitaçõesfísicas,sensoriais,cognitivasoutecnológicas.
Awebpodeserusadaporpessoasemdiferentescontextos:
•Problemadevisãoouaudição
•Dificuldadedeinterpretaçãodetexto
•Faltadetecladooumouse
•Telasomentetextoouresoluçãobaixa
•ConexãolentacomaInternet
•Problemacomoidioma
•Navegadorultrapassado

33. Acessibilidade

34. Recomendações
•Navegaçãoclaraeobjetiva
•Contextoeorientações
•Alternativasdeconteúdosonoroouvisual
•Nãorecorrerapenasàcor
•Utilizarcorretamentemarcaçõesefolhasdeestilo
•Clarezaesimplicidade
Acessibilidade

35. Legibilidade
•Ocampodepercepçãovisualreduz-seàmetadeaumadistância
de2.5grausdopontodefixaçãodoolho;
•Ainda,apenas21%dosusuáriosleempalavraporpalavra,a
maiorparteescaneiaoatela;
•Torneotexto“escaneável”:
•Cabeçalhos
•Colunas
•Marcadores
•Negrito
•Tabelas
•Gráficos

36. Legibilidade -Fontes
Existem basicamente dois tipos de fonte:
-Serif-Com serifa
•Times New Roman
-SansSerif-Sem serifa
•Arial
As fontes serifadas geralmente se perdem na resolução dos
monitores;

37. Figma
Ferramenta online para design de interfaces
https://www.figma.com/
●Crie um frame
●Desenhe e crie componentes
●Aproveite plugins como “Handy Components”

38. Referências
●Interação Humano Computador
●Fundamentos do Desenvolvimento Web
●Noções básicas de design -Windows apps | Microsoft
Learn

39. Até a próxima semana!
;)