Esta é uma série de links que venho juntando ao longo do tempo… artigos, posts, apresentações que passam bem o recado sobre a abordagem de User Experience (UX) ou Experiência do Usuário. Não é uma lista definitiva nem completíssima, mas deve dar um visão bem abrangente sobre o assunto, para quem chegou agora ou já é faixa preta. Nota: a maior parte dos conteúdos está em inglês.
Conceito: O que é UX?
Para começar a conversa, algumas definições :)
Definição de UX
Sem muita enrolação, essa é a definição de Jakob Nielsen e Don Norman: “Summary: ‘User experience’ encompasses all aspects of the end-user’s interaction with the company, its services, and its products.” O segundo autor, inclusive, é o que aparece no video com o dedo em riste.
Artigo: www.nngroup.com/articles/definition-user-experience
O que é UX Design e o que faz um UX Designer?
Vídeo que apresenta, de forma visual e didática, um pouco da definição e do processo UX, dando uma boa ênfase ao perfil do profissional envolvido com isso.
Vídeo: www.youtube.com/watch?v=Ovj4hFxko7c&feature=em-subs_digest-vrecs
Design Centrado no Usuário
Nessas apresentações, Érico Fileno apresenta o que está por trás da abordagem de design contemporânea, centrada no usuário.
Slides:
www.slideshare.net/efileno/aula1-minicurso-sobre-design-centrado-no-usurio
www.slideshare.net/efileno/aula-2-minicurso-sobre-design-centrado-no-usurio
www.slideshare.net/efileno/aula-3-minicurso-sobre-design-centrado-no-usurio
Super heróis e vilãos no Design
Nessa apresentação, Aral Balkan fala sobre o fato de vivermos na era da experiências e de como UX funciona nas organizações: “What about our business? (…) Great design is your business plan!” (cerca de 07:00)
Vídeo: vimeo.com/70030549
De onde vem a UX?
Para entender UX e ver que a abordagem não foi inventada agora, Leah Buley conta a história desde o taylorismo até o advento da web. Esse infográfico complementa o texto.
Artigo: www.uxbooth.com/articles/where-ux-comes-from
Design for behavior (ao invés de Design da experiência)
Em resposta à polêmica pergunta “pode uma experiência ser projetada?” — uma vez que a experiência pertence a cada um — , Jared Spool conta uma história sobre o design de brinquedos na Disneyworld e como podemos projetar para influenciar comportamentos.
Podcast: web.archive.org/web/20150909234151/http://www.muleradio.net/mistakes/105 (Arquivo mp3)
A diferença entre UX design e Web design
Com o surgimento do UX designer, surge a questão: qual a diferença dele/a para um/a web designer?
Artigo: uxmastery.com/the-difference-between-web-design-and-ux-design
Guarda Chuva de UX
Projetar para a experiência do usuário implica uma série de disciplinas ou especialidades. (Essa parte da lista ainda está bem incompleta, dicas de conteúdos são bem vindas).
PESQUISA COM USUÁRIOS
Métodos de pesquisa
Essa é um lista com os métodos mais indicados para realizar pesquisa com usuários.
Artigo: web.archive.org/web/20140612014758/http://muledesign.com/2011/03/designed-with-science-a-bit-about-our-research-methods/
Por que em alguns momentos é melhor não apresentar sua ideia
Rob Fitzpatrick apresenta a ideia de que, validar ideias — principalmente em momentos de maturação — pode ser um engano. Ao invés disso, que tal focar em problemas e, se decidirmos criar alguma solução, um possível comprometimento por parte dos usuários em potencial?
Vídeo: videos.theconference.se/rob-fitzpatrick-not-presenting-your-idea
Qualquer pesquisa é melhor do que nenhuma pesquisa
Um post que orienta a melhor forma de fazer pesquisa dada as restrições de tempo que tivermos, além de orientações que temos que ter em mente na hora de fazê-la.
Artigo: blog.intercom.io/any-research-is-better-than-no-research
Um guia para conduzir entrevistas com usuários
Esse vídeo demonstra na prática como uma entrevista ou teste pode ser conduzido.
Vídeo: www.youtube.com/watch?v=U9ZG19XTbd4
Formas de comunicar achados de pesquisa
Por mais evidentes que sejam os achados, eles podem não ser óbvios para quem os viu com os próprios olhos. Por isso a necessidade de engajar os stakeholders de maneira mais efetiva (do que com aqueles relatórios que nem são lidos).
Artigo: www.epicpeople.org/case-study-in-communication-design
Uma amostra de como dá para criar e compartilhar resultados em um ambiente de desenvolvimento de produto.
Artigo: gds.blog.gov.uk/2014/09/03/vertical-campfires-our-user-research-walls/
Exemplos de formulários de pesquisa e recrutamento bem projetados
No meio a tantos formulários online que deduzem mal informações sobre nós e feitos às pressas — hoje não requer muita prática criar um no Google Forms ou Typeform –, volta e meia dou de cara com alguns que foram projetados com cuidado.
Formulários:
– lulileslie.typeform.com/to/yO02Ua
– docs.google.com/forms/d/1q34apZYkMzqNFdHzwhNkycn_Cj4eAAEzb1X5Fh5zqj0/viewform?c=0&w=1
REDAÇÃO
A importância das palavras na experiência do usuário
A parte textual de uma interface se tornou tão ou mais importante que os elementos visuais. E é um ofício que traz todo um universo consigo.
Artigo: https://medium.com/re-form/what-is-narrative-ux-9400664660af
Seguindo essa mesmo linha, este artigo adverte: “Writing becomes more and more important to our craft“.
Artigo: uxdesign.cc/my-website-is-now-conversational-here-is-what-i-learned-7e943cc6ace0#.lvmsn1y4t
Um guia feito pela equipe do Mailchimp para todos os lugares onde veiculam suas mensagens.
Site: voiceandtone.com
Um estudo de como o tom de voz influencia os usuários.
Artigo: www.nngroup.com/articles/tone-voice-users
Seção com guia de como escrever e se comunicar com usuários, com dos e don’ts.
Página: material.google.com/style/writing.html
Diferença entre readability vs. legibility (ver the long answer).
Questão: www.quora.com/Do-italics-decrease-readability
Usar primeira ou segunda pessoa em interfaces?
Questão: https://www.uxmatters.com/mt/archives/2009/07/generating-ideas-your-versus-my-in-user-interfaces.php#wording
Qual a largura indicada para uma linha de texto (pensando em readability)?
Artigo: baymard.com/blog/line-length-readability
Projeto de UX: processos e ferramentas
Para rodar um projeto pensando em experiência do usuário, você não vai querer reinventar a roda toda vez, certo? A seguir, uma lista de ferramentas utilizadas com frequência por designers, junto ao seu processo mostrado sem mistério.
Definição de problema
Definir bem um problema, como (e se) queremos resolvê-lo, é uma parte fundamental dos processos centrados nas pessoas. O artigo abaixo esmiuça essa etapa detalhadamente.
Artigo: hbr.org/2012/09/are-you-solving-the-right-problem
UX Apprentice
Um passo a passo sobre as etapas de definição da UX, com um teste de conhecimento logo em seguida.
Site: www.uxapprentice.com
Style guides
Style guides (ou guias de estilo) são uma forma de dar consistência aos elementos de interface, assim como documentá-los para sua equipe
Site: styletil.es
Guia para criar style-guides: www.nngroup.com/articles/front-end-style-guides
Lightning Design System (style-guide da Salesforce): www.lightningdesignsystem.com
Pattern Library (Mailchimp): ux.mailchimp.com/patterns/forms
UX Project Checklist
Um cheklist bem extensivo com etapas de um projeto de UX.
Checklist: uxchecklist.github.io
Métodos e entregáveis de UX
Um guia com etapas e artefatos gerados em cada um delas.
Site: fabricio.nu/metodos
Design Process: Double diamond
Um descritivo das etapas porque passamos em um projeto, de forma fácil de visualizar e memorizar.
Artigo: Ver resultados no Google Images
Design Thinking 101
O processo de design explicado para pessoas de qualquer área, vulgo Design Thinking :)
Artigo: www.nngroup.com/articles/design-thinking
Nesse vídeo, Ellen Lupton conta a história de como pensou em uma forma de melhorar a experiência em um hospital, numa amostra clara do que é o design thinking.
Vídeo, aos 01:25: vimeo.com/42175536
Um workshop para mapear serviços (e evoluí-los)
Uma ferramenta para destrinchar serviços (digitais ou não) e propor melhorias.
Slides: pt.slideshare.net/zaic/workshop-using-service-blueprinting-to-evolve-services
Mapa de jornada do usuário
Os mapas servem para descrever experiências de forma mais holística, indo além do simples uso ou compra.
Vídeo: vimeo.com/78554759
Como criar um Conceito de Design
Um bom framework para se usar no início de projetos. Você pode começar a pensar em ideias de design muito antes de desenhar algo.
Artigo: www.vanseodesign.com/web-design/design-concept-thoughts
Definindo a sua estratégia de UX
Definir a estratégia de UX é pensar, desde o início da definição de produto, o tipo de experiência que você quer promover, no que vai se diferenciar dos outros etc.
Resumo visual: thiagoesser.com.br/2016/01/07/ux-strategy-o-livro-do-chacal-por-jaime-levy-um-resumo-visual-do-framework
Obtendo feedbacks sobre seus designs
Tão importante quando produzir artefatos, é envolver outros stakeholders em sessões de revisão sobre eles.
Artigo: scottberkun.com/essays/23-how-to-run-a-design-critique
Padrões ou guias de Interface do Usuário (UI)
WEB
Good UI
Uma série de recomendações para interfaces web, esse mundo em constante mudança, às vezes meio sem lei.
Site: goodui.org
Padrões de interface web
Biblioteca de padrões de interface, com exemplos e argumentação do porque usá-los
Sites:
– ui-patterns.com/patterns
– patternry.com/patterns
Formulários
Como desenhar melhores formulários, a partir de uma série de boas práticas já consolidadas.
Artigo 1: uxdesign.cc/design-better-forms-96fadca0f49c#.vb20fgk2b
Artigo 2: uxdesign.cc/alternatives-to-placeholder-text-13f430abc56f#.pvdmvqsqn
Mensagens de Erro
Um guia para compor mensagens de erro.
Artigo: www.userfocus.co.uk/articles/errormessages.html
Num breve resumo, mostro qual a estrutura que está por trás de mensagens de erro ou alerta.
Resumo visual: thiagoesser.com.br/2013/07/01/anatomia-de-uma-mensagem-de-erro-ou-alerta
Dark Patterns (Padrões “do mal”)
Agregado de diversos padrões de design que prejudicam propositalmente seus usuários.
Site: darkpatterns.org
Artigo com exemplos de padrões do mal.
Artigo: http://www.tableless.com.br/padroes-de-ux-mal
Entrevista mostrando que algumas más práticas são combatidas por lei.
Artigo: www.90percentofeverything.com/2014/08/26/some-dark-patterns-now-illegal-in-uk-interview-with-heather-burns
MOBILE
Tamanhos das áreas pressionáveis
Sugestões de tamanhos de área pressionáveis em aplicativos mobile.
Artigo: www.lukew.com/ff/entry.asp?1085
Equívocos comuns sobre touch
Artigo sobre como funcionam as áreas pressionáveis em dispositivos móveis, esclarecendo a diferença entre touch target e visual target, e como podemos evitar erros.
Artigo: www.uxmatters.com/mt/archives/2013/03/common-misconceptions-about-touch.php
Como seguramos dispositivos móveis
A partir de observações de pessoas segurando dispositivos, autor fala sobre as limitações de cada cenário.
Artigo: alistapart.com/article/how-we-hold-our-gadgets
Nativo vs. Web
A diferença entre aplicativos nativos, web ou híbridos, e qual deles escolher se formos criar uma solução.
Artigo: www.nngroup.com/articles/mobile-native-apps
Artigo que faz considerações semelhantes ao artigo acima, um pouco mais a fundo.
Artigo: mobile.smashingmagazine.com/2012/06/18/mobile-considerations-in-user-experience-design-web-or-native/
Alternativas ao famoso menu hamburger (se aplica a mobile nativo e web).
Artigo: https://blog.marvelapp.com/hamburger-menu-alternatives-mobile-navigation
Guidelines iOS (Apple)
Site com princípios e recomendações feitas por designers da Apple.
Site: developer.apple.com/ios/human-interface-guidelines
Guidelines Windows
Recomendações e documentação para todas interfaces Windows (mobile e outros dispositivos).
Site: developer.microsoft.com/en-us/windows/design
Material Design (Android/Google)
Princípios de design aplicados a produtos ligados ao ecossistema do Google, como o Android. Se aplica a todos os dispositivos.
Site: material.google.com
As diferenças entre sistemas operacionais mobile
“Entenda porque seu aplicativo de Android não deve ser igual ao de iPhone”: essa diferença era mais gritante há um tempos atrás, mas a discussão continua válida.
Slides: pt.slideshare.net/hperticarati/contexto-e-familiaridade-porque-apps-de-android-no-devem-ser-iguais-aos-de-iphone
Esse outro artigo levanta a mesma bandeira.
Artigo: medium.com/@michalacler/hey-designers-theres-a-thing-called-guidelines-94d43d5daf75#.oxw5eatjb
Responsive News BBC
Projeto para tornar o site da BBC completamente responsivo.
Site: responsivenews.co.uk/
Tabelas responsivas
Possíveis soluções responsivas para dados tabulares.
Artigo: www.maxdesign.com.au/2013/03/22/simple-responsive-table/
Tudo é um remix
Nada se cria, tudo se copia?
Vídeo: vimeo.com/81745843
TV
Apresentação sobre padrões de navegação para TVs (ainda num momento sem muitas Smart TVs).
Slides: http://www.slideshare.net/rquaresma/tv-interatividade-9887494
Estudo sobre interface e interações em TVs.
Apresentação: www.behance.net/gallery/TVDi-Interactions-Studies/5868713
Princípios Universais de Design
Princípios são como os guidelines, só que menos prescritivos e mais universais — se aplicam às várias disciplinas de design.
Principles of User Interface Design
Princípios para UI Design, mas que podem ser usados de forma ampla.
Site: bokardo.com/principles-of-user-interface-design/
Design Principles
Princípios de design escritos pela esquipe do governo britânico.
Site: https://www.gov.uk/design-principles
Mitos de UX
Mitos servem para reforçar os princípios de design, cuja finalidade principal é derrotar os primeiros.
Site: uxmyths.com
“Leis” de UX
Site: lawsofux.com
Fundamentos do Design
Esse curso aborda os princípios universais básicos do design.
Curso: www.codeschool.com/courses/fundamentals-of-design
UX para e-commerce
E-Commerce Usability Research
baymard.com
E-Commerce Search Usability (específico sobre Busca)
baymard.com/research/ecommerce-search
6 Mobile Checkout Usability Considerations (específico sobre Checkout)
baymard.com/blog/mobile-checkout
The anatomy of a credit card payment form
gabrieltomescu.com/blog/2015/6/27/anatomy-of-a-credit-card-form
User Experience Impacts on eCommerce
medium.com/@LetsAlign/user-experience-impacts-on-e-commerce-a5a953eb76e6#.7i5zbexsg
Topic: E-commerce (Nielsen Norman Group)
www.nngroup.com/topic/e-commerce
Ten Requirements For Making Home Page Carousels Work For End Users (If Needed)
www.smashingmagazine.com/2016/07/ten-requirements-for-making-home-page-carousels-work-for-end-users
Livros
Minhas leituras
locomotivo.com.br/tag/livros
Minha conta no instagram (onde posto fotos de livros que leio)
instagram.com/thiagoesser
The Only UX Reading Ever
medium.com/@span870/the-only-ux-reading-list-ever-d420edb3f4ff
Don’t make me think
www.sensible.com/dmmt.html
Rocket Surgery made easy
www.sensible.com/rsme.html
O Design do dia-a-dia
www.saraiva.com.br/o-design-do-dia-a-dia-1563428.html
Design is a Job
www.abookapart.com/products/design-is-a-job
Guia para projetar UX
www.saraiva.com.br/o-guia-para-projetar-ux-2858799.html
Designing the Editorial Experience + Conversations with students
instagram.com/p/uJEjF5uLvd
The Sketchnote Workbook
locomotivo.com.br/2014/10/29/to-dentro-the-stechknote-workbook-do-mike-rohde-im-in-the-stechknote-workbook-by-mike-rohde/
The UX guide book for Product Managers
instagram.com/p/rr1lFMuLrF
Designing for emotion
instagram.com/p/qRvGoCOLmg
Change by design
instagram.com/p/ns_L4GOLnL
Gestão Estratégica do Design
instagram.com/p/nQpoLLuLqn
Grouped
instagram.com/p/a8swACuLry/
Grids + Layout + Design Th!nking
instagram.com/p/YDMBbeuLl0
Chief Culture Officer (CCO)
instagram.com/p/Ud5v1AuLs5
Direto ao ponto
leanpub.com/diretoaoponto
Design de Interação
– instagram.com/p/xuY_2POLgu/
– books.google.com.br/books?id=d_s4AgAAQBAJ&printsec=frontcover#v=onepage&q&f=false
Gestão do Design
instagram.com/p/xuYoRSOLv4/
Vamos fazer Design de Interação?
designdeinteracao.com.br/wp/wp-content/uploads/2013/10/vfdi.pdf
The Biggest list of 35 FREE UX Books
www.keepitusable.com/blog/?p=2291
(Foto: santea on flickr)