O documento discute as diretrizes de interface humana da Apple (HIG) e do Material Design do Google, comparando suas abordagens para manter a consistência entre aplicativos em suas respectivas plataformas. As HIG da Apple datam de 1978 e buscam controlar a experiência do usuário através de verificações detalhadas de aplicativos, enquanto o Material Design se inspira no mundo físico e nas propriedades dos materiais. As diretrizes abordam temas como navegação, botões, ícones e boas práticas de design.
Interação Humano-Computador - História, Conceitos e Heurísticas de NielsenRos Galabo, PhD
Ergonomia Informacional e IHC (Interação Humano-computador) -
Design - UFMA
Prof. Dr. Carlos de Salles Soares Neto
Estágio a docência
Professor Auxiliar: Rosendy Jess Fernandez Galabo
UX e UI Design - O que é? Quais as diferenças?Marconi Pacheco
Conheça estas duas áreas, fique por dentro de sua importância, aplicabilidade, áreas de atuação e o que realmente fazem os profissionais de UX e UI. Um contraste com as duas áreas, suas diferenças, semelhanças e como trabalham em conjunto.
Workshop realizado em 13 e 14 de Julho de 2013, ministrado por Paolo Passeri (http://www.slideshare.net/paolopasseri), pelo Instituto Faber-Ludens, no Centro de Criatividade Astrolábio, em Curitiba.
Interação Humano-Computador - História, Conceitos e Heurísticas de NielsenRos Galabo, PhD
Ergonomia Informacional e IHC (Interação Humano-computador) -
Design - UFMA
Prof. Dr. Carlos de Salles Soares Neto
Estágio a docência
Professor Auxiliar: Rosendy Jess Fernandez Galabo
UX e UI Design - O que é? Quais as diferenças?Marconi Pacheco
Conheça estas duas áreas, fique por dentro de sua importância, aplicabilidade, áreas de atuação e o que realmente fazem os profissionais de UX e UI. Um contraste com as duas áreas, suas diferenças, semelhanças e como trabalham em conjunto.
Workshop realizado em 13 e 14 de Julho de 2013, ministrado por Paolo Passeri (http://www.slideshare.net/paolopasseri), pelo Instituto Faber-Ludens, no Centro de Criatividade Astrolábio, em Curitiba.
Apresentação Trabalho de Conclusão de Curso - Ciência da Computação Thiago Marinho
DESENVOLVIMENTO DE APLICATIVO PARA DISPOSITIVO MÓVEL COM
FINALIDADE DE REALIZAR O MONITORAMENTO EM TEMPO REAL DO
ÔNIBUS DE TRANSPORTE COLETIVO URBANO UTILIZANDO A PLATAFORMA
JAVA E SISTEMA OPERACIONAL ANDROID
Introdução aexperiência do usuário.
O que é?
O que se faz?
Como se faz?
User Experience é focar o projeto no usuário, entender necessidades e saber conciliar sua satisfação com os objetivos do produto.
Video fashionista:
http://www.youtube.com/watch?v=E1T0egGgc5E
Referências tiradas de:
http://catarinasdesign.com.br
http://www.slideshare.net/guimenga/interface-interao-e-usabilidade
http://www.slideshare.net/fabricioteixeira/ux-design-antes-do-wireframe
http://www.fatdux.com/pt/What/What-is-UX
http://books.google.com.br/books?id=bl0H1cYIzAwC&printsec=frontcover&hl=pt-BR&source=gbs_ge_summary_r&cad=0#v=onepage&q&f=false
Material de apoio aos alunos do curso de Office do Projeto Função. Apostila de Word desenvolvida por Cibele Kanegae.
O Projeto Função é realizado na Comunidade da Vila Prudente. Nasceu da motivação de levar cultura e educação social/profissional para dentro da comunidade.
Referências:site da Microsoft Office
It’s not easy to get a remote team to collaborate. Give them some guidance with a team activity template.
What’s a team activity template? Team activity templates serve as a type of guided script to take your team through a series of exercises. Your team can participate in a collaborative activity together, even when they’re not in the same place. Team activity templates are also reusable, so they can help you scale your practices.
Introdução ao Mobile.
Ementa, introdução, conceito, breve histórico, desafios da mobilidade, as principais linguagens de programação usadas em desenvolvimento mobile, linguagens cross-plataforma, dúvidas e referências.
Jackson Lee, Joshua Tan, Jasmine Battu on September 29, 2023
✨Unlock Your Creative Potential with Figma! Get ready to dive into the world of UI/UX design with our exciting workshop in collaboration with the ICCIT Council.
Whether you're a complete beginner or already have some design experience, this event is tailored just for you!
This event will cover creating accessible user interfaces design using Figma, and basic user experience principles that are usually taught in upper-year CCIT courses.
No prior experience is required; our goal is to provide a welcoming environment for everyone to learn and grow. Don't miss out on this unique opportunity to enhance your UI/UX skills and connect with like-minded peers. Mark your calendar, invite your friends, and see you there! 👋
Slides para apoiar as aulas sobre Avaliação de Interfaces de Usuário tratando do objetivo da avaliação, dos grupos de métodos existentes e exemplificando com o método de inspeção, a Avaliação Heurística.
UI vs UX: Comparison Between User Interface and User ExperienceCloud Analogy
The user interface can be defined as the graphics of an application. This graphical layout is composed of buttons that the user clicks on, reads the text, and images, sliders, text boxes, and other elements that the user interacts with. It consists of screen layouts, transitions, interface animations, and any micro-interactions that need to be properly designed.
Apresentação Trabalho de Conclusão de Curso - Ciência da Computação Thiago Marinho
DESENVOLVIMENTO DE APLICATIVO PARA DISPOSITIVO MÓVEL COM
FINALIDADE DE REALIZAR O MONITORAMENTO EM TEMPO REAL DO
ÔNIBUS DE TRANSPORTE COLETIVO URBANO UTILIZANDO A PLATAFORMA
JAVA E SISTEMA OPERACIONAL ANDROID
Introdução aexperiência do usuário.
O que é?
O que se faz?
Como se faz?
User Experience é focar o projeto no usuário, entender necessidades e saber conciliar sua satisfação com os objetivos do produto.
Video fashionista:
http://www.youtube.com/watch?v=E1T0egGgc5E
Referências tiradas de:
http://catarinasdesign.com.br
http://www.slideshare.net/guimenga/interface-interao-e-usabilidade
http://www.slideshare.net/fabricioteixeira/ux-design-antes-do-wireframe
http://www.fatdux.com/pt/What/What-is-UX
http://books.google.com.br/books?id=bl0H1cYIzAwC&printsec=frontcover&hl=pt-BR&source=gbs_ge_summary_r&cad=0#v=onepage&q&f=false
Material de apoio aos alunos do curso de Office do Projeto Função. Apostila de Word desenvolvida por Cibele Kanegae.
O Projeto Função é realizado na Comunidade da Vila Prudente. Nasceu da motivação de levar cultura e educação social/profissional para dentro da comunidade.
Referências:site da Microsoft Office
It’s not easy to get a remote team to collaborate. Give them some guidance with a team activity template.
What’s a team activity template? Team activity templates serve as a type of guided script to take your team through a series of exercises. Your team can participate in a collaborative activity together, even when they’re not in the same place. Team activity templates are also reusable, so they can help you scale your practices.
Introdução ao Mobile.
Ementa, introdução, conceito, breve histórico, desafios da mobilidade, as principais linguagens de programação usadas em desenvolvimento mobile, linguagens cross-plataforma, dúvidas e referências.
Jackson Lee, Joshua Tan, Jasmine Battu on September 29, 2023
✨Unlock Your Creative Potential with Figma! Get ready to dive into the world of UI/UX design with our exciting workshop in collaboration with the ICCIT Council.
Whether you're a complete beginner or already have some design experience, this event is tailored just for you!
This event will cover creating accessible user interfaces design using Figma, and basic user experience principles that are usually taught in upper-year CCIT courses.
No prior experience is required; our goal is to provide a welcoming environment for everyone to learn and grow. Don't miss out on this unique opportunity to enhance your UI/UX skills and connect with like-minded peers. Mark your calendar, invite your friends, and see you there! 👋
Slides para apoiar as aulas sobre Avaliação de Interfaces de Usuário tratando do objetivo da avaliação, dos grupos de métodos existentes e exemplificando com o método de inspeção, a Avaliação Heurística.
UI vs UX: Comparison Between User Interface and User ExperienceCloud Analogy
The user interface can be defined as the graphics of an application. This graphical layout is composed of buttons that the user clicks on, reads the text, and images, sliders, text boxes, and other elements that the user interacts with. It consists of screen layouts, transitions, interface animations, and any micro-interactions that need to be properly designed.
Android vs. iOS - Relatório de diferenças na abordagem de interface visual e ...Rafael Burity
Porque investir na Experiência do Usuário?
O que é uma boa interface?
Devemos projetar diferente para cada plataforma?
Através de alguns comparativos procurei apresentar o motivo da escolha de trabalhar com elementos nativos e focar na experiência indiviudal de cada plataforma em nossos aplicativos
Apresentação em Slides do Trabalho de Frameworks de desenvolvimento mobile utilizando técnologias Web do curso de Desenvolvimento de Aplicações para Dispositivos Móveis, Disciplina Desenvolvimento Web do Professor João Vinagre, 09/05/2017
Apresentação de conclusão do curso "UI Design Patterns: Usabilidade em Interfaces Mobile", fornecido pela Agência Econverse para aprimoramento de seus funcionários.
Consciência ingênua e crítica em Vieira Pinto e Paulo Freire [atualizado]Rodrigo Freese Gonzatto
[Material atualizado em junho de 2022] Recurso educacional sobre relação entre modos de consciência (crítica e ingênua), suas gradações e relações no pensamento dos autores: Álvaro Vieira Pinto e de Paulo Freire.
Material elaborado para disciplina ''Seminário de Estudos Avançados - Tecnologia e Educação em Álvaro Vieira Pinto'' (PPGEdu/PUCRS) 2021/2 e atualizado em 2022/1.
Princípios de linguagem visual para Design de Interfaces. Um pouco de semiótica e vários exercícios para entender Gestalt aplicada para composição de interfaces. Ao final, alguns princípios para tipografia, grid, alinhamento, hierarquia de informação, etc.
Paulo Freire em diálogo com Álvaro Vieira Pinto: a conscientização frente à q...Rodrigo Freese Gonzatto
Palestra sobre interações entre as ideias de Vieira Pinto e Paulo Freire diante da questão da Tecnologia. Ministrada no seminário "Paulo Freire: um arauto da liberdade, do diálogo e da utopia", em 04 de junho de 2019, em evento promovido pelo Grupo de Pesquisa Pensamento Educacional Brasileiro: Histórias e Políticas" do Programa de Pós-Graduação em Educação da PUCPR (Curitiba).
Produzir nossa própria existência: Reflexões para a produção em/sobre Álvaro ...Rodrigo Freese Gonzatto
Fala sobre presente e futuro da comunidade de pesquisa sobre Vieira Pinto no Brasil. Apresentado no 3o Colóquio Álvaro Vieira Pinto, no dia 14 de dezembro de 2018, em Porto Alegre (RS).
Usuários e Produção da Existência: contribuições de Álvaro Vieira Pinto e Pau...Rodrigo Freese Gonzatto
Apresentação utilizada na banca de defesa de tese de doutorado de Rodrigo Freese Gonzatto, em 28 de setembro de 2018. Trata sobre a história e características do conceito de usuário em Interação Humano-Computador e Design de Interação. A noção de usuário é analisada criticamente perante a ideia de produção da existência, dos filósofos brasileiros Vieira Pinto e Paulo Freire.
Sobre o conceito de amanualidade em Simone de Beauvoir e Vieira Pinto a parti...Rodrigo Freese Gonzatto
Slides da apresentação de trabalho (resumo) no XV Congresso de Filosofia Contemporânea da PUCPR - Fenomenologia da Vida em 31 de outubro de 2017, na Pontifícia Universidade Católica do Paraná, Curitiba.
Projetando interações opressivas e libertárias com o corpo inteiroRodrigo Freese Gonzatto
Slides da comunicação oral do artigo (completo) Projetando interações opressivas e libertárias com o corpo consciente, apresentada no XV Simpósio Brasileiro sobre Fatores Humanos em Sistemas Computacionais (IHC 2017). Baseado em Paulo Freire e em Augusto Boal.
Slides do minicurso ministrado no XV Simpósio Brasileiro sobre Fatores Humanos em Sistemas Computacionais (IHC 2017) em 24 de outubro 2017, por Rodrigo Gonzatto e Frederick van Amstel, sobre proposta de uso de vídeos como criação.
Slides sobre o conceito de Técnica e Tecnologia, abordando diversas concepções, mas oferecendo enfoque ao conceito de tecnologia do filósofo brasileiro Álvaro Vieira Pinto, que apresenta a técnica como existencial do ser humano.
2. • Linhas-guia, Diretrizes < Design Systems, Design Language
• Porquê? https://uxplanet.org/why-you-need-ui-guidelines-d380e407b759
• Definir uma aparência comum para os aplicativos?
• Definir base para uma boa UX
(Interação, Usabilidade e Arq. de Info, etc)
• Mantém consistência: ajuda no aprendizado
• Manual/site que oferece informação comum de referência:
não precisa recriar tudo do 0
Metro UI, Microsoft
Human Interface Guidelines,Apple
Material Design, Google
Porquê Guidelines?
4. • Marca
• Controle: experiência consistente entre plataformas
• Verificação de apps detalhada
• Segurança e Privacidade
• Limitação e vantagem:
limitação na variedade de dispositivos
iOS, iPhone, Apple
5. • Human Interface Guidelines (HIG)
https://modelessdesign.com/backdrop/204
• 1978:1st Draft
https://www.apple.asimov.net/images/non-english/french/
apple_forumdesdeveloppeurs/
apple_forumdesdeveloppeurs_02_interface.pdf
• 1987: Human Interface Guidelines
• 1995: Macintosh
Human Interface Guidelines
http://interface.free.fr/Archives/Apple_HIGuidelines.pdf
Guidelines na Apple
6. Human Interface Guidelines
• Clarity: legibilidade de texto, ícones, composição, etc
• Deference: conteúdo primeiro, ocupando toda a tela.
Motion ajuda pessoas a entenderem e interagirem com
conteúdo. mínimos detalhes
• Depth: camadas visuais distintas dão sensação de hierarquia
e compreensão, transições oferecem profundidade
https://developer.apple.com/ios/human-interface-guidelines/
6 princípios: https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
8. • Abertura
• Adaptação
• Verificação de apps mais rápida
• Mercado maior
• Limitação e vantagem:
atende a uma diversidade de dispositivos
Android, Google
9. • 2014
• Evolução dos "cards" do Google Now
• Uso não muitos consiste das Guidelines pela
própria empresa
Guidelines no Google
10. Material Design
• Material como metáfora: inspiração no mundo (3D):
física e propriedades dos objetos, luz e sombras,
camadas de papeis/cartões sobrepostas
• Hierarquia: tipografia, grid, espaço, escala, color e imagem
• Motion produz significado: foca atenção,
mantém continuidade, oferece feedback
https://material.io/design/
https://material.io/archive/guidelines/material-design/introduction.html#introduction-goals
https://www.youtube.com/watch?v=Q8TXgCzxEnw
https://www.youtube.com/watch?v=rrT6v5sOwJg
12. home button e voltar
3 botões: voltar,
home e overview
voltar com botão
universal disponível
botão de home vai para
tela principal
voltar com swipe
e na interface
navegação no sistema operacional
13. voltar (variações)
o texto de voltar pode ser
trocado pelo nome do lugar
para onde se está voltando (navegação)
14. navigation bar / app bar (action bar)
variações e
possibilidades
navigation bars
apps bars
(action bars)
18. navegação no app
drawer menu no topo
(menu hamburguer)
drop-down para uma lista no lado
da tela
longe do dedo
discreto. mas como saber
o que está ali dentro?
tab bar em baixo
bottom navigation
mais perto do dedo.
ocupa espaço,
mas deixa itens visíveis
itens: não mais que 5. não menos que 2.
no caso de 2, considerar segmented (iOS) ou tabs (Android)
21. duas navigations próximas (Android), e diferentes (global, contextual)
a diferença se faz pelo contraste - preto e branco -
que diminui opções de personalização
https://material.io/design/components/bottom-navigation.html#
tab bar /
bottom
navigation
22. “toolbar”
ações possíveis na ferramentas
da navigation bar / app bar (action bar)
geralmente contextuais da interface atual
23. overflow icon
é uma área “outros”, “mais”, “veja mais”… (escondida)
existe padrão? algumas variedades
25. overflow icon
no caso de mais de 3 ações, o overflow icon pode aparecer
nele ficam as ações menos importantes e menos usadas
porém, se você precisa ter mais do que 3 ações…
além de com voltar e título da tela ….repense a estrutura
26. principal ação / ação primária
FAB button
próximo da base
perto do dedo
consistente (sempre
no mesmo lugar)
‘’call to action’’
no canto superior direito
longe do dedo
consistente (sempre no
mesmo lugar)
destaque para a principal ação (mais usada) de uma tela
27. ação principal / ação primária
center of tab bars
CTA buttons
próximo da base, perto do dedo
possibilidade de confundir tools
com navigation
destaque para a principal ação (mais usada) de uma tela
30. uso do swipe para ações contextuais
https://material.io/design/interaction/gestures.html#properties
right (trailing) side
padrão de deletar
left (leading) side
ação não destrutiva: like, salvar
(table) swipe actions
/ leave-behinds bottom
33. SF PRO Display
fonte para títulos
(vem no mac, mas não vem para uso, tem que baixar)
SF PRO Texto
fonte para textos subtítulos, blocos de texto,
elementos secundários, etc
trecho da palestra da Apple
sobre a fonte San Francisco
https://developer.apple.com/videos/play/wwdc2015/804/
11:29 porque mudar da Fonte Display para a fonte Text
35. botões
Android: com profundidade
e texto em caixa alta
iOS: flat design sem sombras
e texto com inicial maiúscula
cuidar com uso de sombras
em cards
36. o que faz isso
ser um botão?
uso de caixa alta
37. drop lists:
action sheets / bottom sheets
Android: a camada mostra as
opções em lista, com ícones e
cores, e usa sombra
iOS: a camada inteira é um pouco
transparente, sem sombra.
botão de cancelar bem demarcado
modais:
próximos do dedo.
38. quando bottom sheets (em baixo) possuem a mesma importância que
o conteúdo principal (em cima), para ter ambas as informações visíveis
persistent bottom
39. segmented control / tabs
Android: tabs
próprios nomes. lembra menu
iOS: segmented control
parecem botões. remete a switch
para transitar entre views localizadas em uma mesma tela
47. gripper / reorder
remete ao “grip” de segurar algo
3 linhas
(não tem menu hamburguer
para confundir)
pode lembrar um
menu hamburguer
por isso
4 linhas
53. ações: botão ou texto?
botão em botão: ação preferencial, recomendada.
deixa explícito a ação possível
botão em texto: ação possível, mas secundária.
pode confundir com o conteúdo
54. campos vazios / empty states
primeira impressão do usuário. usar ilustrações, descrições breves
e ''call to action'' para conduzir para a ação possível/desejada
55. carets (>)
discoverability: como usuário consegue descobrir opções do app?
use carets to indicate that the
user should tap into the row to
view more
create visual cues and
conversational content design to
indicate tap targets to view more
56. drop lists:
action sheets / bottom sheets
para apresentar múltiplas ações
associadas a uma ação (call to action)
cancelar sempre distinto
57. drop lists:
action sheets / bottom sheets
não usar para: permissões, alertas críticos (ações destrutivas)
ou qualquer coisa que bloqueie o sistema
58. caixas de diálogo: alertas
3 principais usos:
1) Alertas: interrompe o que a pessoa está fazendo
para informar da situação
2) Menus: opçõa para mudar configurações
3) Confirmation: como um poka-yoke,
para confirmar a ação escolhida e previnir erros
iOS: conteúdo pode ser
omitido, título não
Android: título pode ser
omitido, conteúdo não
59.
60. caixas de diálogo: alertas
use as caixas de diálogos nativas do sistema para alertas críticos, alertas
de permissão, etc. Tudo que for alerta, que se relacionar a ações
destrutivas, sem volta. Se não for este o caso, use action sheets.
botões claramente
demarcados
consistentes
61. tiles ou cards
container retangular com conjunto de informações e ações:
action card ou info card.
iOS mais flat. Android segue Material Design, com mais sombras.
66. ícones e grids
Youtube’s structure evolution: The important features, My subscriptions, History and Playlist are put into a drawer ->
App structure is reorganized, drawer is removed and main features are moved into tabs -> Trending is added into tabs.
Google Photos’s structure evolution: Main features are put into drawer -> Main features are moved into button navigation ->
Search floating action button, which may interrupt browsing photos, is transformed into a search bar.
68. diferenças Android x iOS
https://medium.muz.li/differences-between-designing-native-ios-apps-and-native-android-apps-e71256dfa1ca
https://medium.com/@vedantha/interaction-design-patterns-ios-vs-android-111055f8a9b7
https://lunapps.com/blog/android-vs-ios-uiux-differences/
https://dyna.mo/blog/a-beginners-introduction-to-the-differences-in-ios-and-android-design/
desenhar para ambos https://webdesign.tutsplus.com/pt/articles/a-tale-of-two-platforms-designing-for-both-
android-and-ios--cms-23616
detalhes forms https://uxdesign.cc/form-field-required-vs-optional-9b4d7cdbf400
design language systems https://uxplanet.org/design-language-system-d438f4aa30e0
design app https://medium.muz.li/the-design-guide-to-ios-and-android-app-icons-c1a73d3f278f
tipografia iOS https://uxdesign.cc/how-to-make-the-typography-of-your-ios-app-not-suck-a6de09fb7c41
livros: form design patterns, designing UX: forms, web form design, e livro: bureaucracy
ui patterns
design notes: https://www.designnotes.co/
comparação de 4 técnicas de avaliação de interfaces http://citeseerx.ist.psu.edu/viewdoc/download?
doi=10.1.1.330.1188&rep=rep1&type=pdf
human guidelines cards
https://hig.kde.org/components/editing/card.html
tendencias UX
https://uxplanet.org/review-of-ui-design-trends-we-start-2019-with-68f128151215
https://uxplanet.org/2019-ui-and-ux-design-trends-92dfa8323225
Outros