oi pronto beleza Tô na aula passada a gente falou de usabilidade hoje a gente vai falar e os princípios de Steve Krug na Steve Krug é o cara que escreveu esse livro aqui ó não me faça pensar tá eu tô esse livro é um livro onde ele tem alguns princípios não vou passar tudo aqui parece tão enfim não tem como passar um livro todo em uma aula mas a gente vai eu fiz um compilado aqui do Capítulo 1 ao 5 para que a gente possa ver algumas boas práticas principalmente antes de vocês começarem a fazer
os principais protótipos na os protótipos de alta fidelidade tá a qualquer momento podem interromper e fazer pergunta Beleza então vamos lá é é o primeiro Princípio não é o primeiro primeira lei vamos dizer assim de Steve Krug o que ele diz é o seguinte não me faça pensar o que ele quer dizer com isso não é é só chegando aí o que ele quer dizer com isso que eu não me faça pensar Ah então por exemplo e às vezes a gente entra numa tela de um aplicativo que a gente fica se perguntando Mas como é
que eu uso isso como é que eu uso o Google sala de aula como é a primeira pergunta que a gente faz é essa né Então a partir do momento que você não indica de alguma forma que ou que tem um menu lá em cima com... O que tem algo que é comum para usuário a gente vai ver aqui você tá fazendo usuário pensar demais e isso para ele é ruim porque ele vai acabar saindo do seu aplicativo tá então por exemplo uma pergunta lá qual a coisa mais importante que devo fazer se quiser me
assegurar que meu site o aplicativo é fácil de usar simples não faça o usuário pensar na Então se tem a empatia lembra que eu falei e aqui a gente finalizou empatia né então tem uma empatia se coloca no lugar do usuário bom e se você estivesse usando aquele aplicativo né como é que você encarar Aria é aquela tela você ia encarar aquilo de forma simples e intuitiva Ou você tem que pensar muito tá então primeira a primeira lei é não faça pensar então livre-se das perguntas Imagino que você entra nesse site aí você olha o
site aí já diz a isso aqui parece ser as categorias dos produtos não é então memória modem aqui só clicar e memória e computador aí já já abre aí do outro lado ele diz assim né estão Estas são as ofertas que estão em destaque tô Imagine quando você entra lá no MercadoLivre MercadoLivre ele já tem a opção de você buscar e do lado tem uma setinha que tem as categorias isso é criativo né agora imagine É sim Oi como é que você ia fazer isso fosse desse jeito aí né então propaganda misturado com categoria Olá
pessoal se o áudio fica ruim de novo como que foi ontem foi o fone né aí vocês a visão tá Oi e aí quando você abre um site que o site é muito poluído Aí você fica né pô cheio de dúvida porque que eles dão esse nome porque clicar aqui eu posso clicar isso é clicável será que isso realmente é um botão Mas será que isso realmente é um botão né ele vai se perguntar o menu do site será que isso aqui é um menu ou só um categorias é porque colocaram essa essa Barrinha aqui
e esses links Eles parecem ser a mesma coisa será que são mesmo ou seja você fez uma confusão na cabeça do usuário o usuário ele tá pensando muito e não é dessa forma que usuário acesso à web tá bom bom então coisas que a gente precisa é fazer sem pensar né a gente Como abrir um site e tem a um menu a gente precisa saber que aquilo ali é um menu a gente precisa saber que aquele botão vai executar um determinado ação mas imagine que você entra em um site de emprego ponta aí você entra
no site o cenário é esse Você entra no site você quer procurar um emprego tá E aí tem a opção emprego clique né ou seja aqui ó só o botão de emprego é mas aí se você entrar em outro site tem assim ó oportunidades de emprego ou seja Já demorou mais para você ler e você vai vai vai se perguntar Será que realmente eu clicando nesse botão ele vai me levar para as vagas de emprego Será que isso vai acontecer não sei já nesse último emprego o lama o que seria isso né pode ser empregos
mas parece mais do que isso né eu devo clicar ou ficar olhando É isso aí pessoal é o seguinte Às vezes as empresas elas colocam nomes internos para os produtos vou dar um exemplo Alguém sabe o que são os rugas o Google Earth E aí como é chamado Os Estagiários do Google tá então vamos supor que o Google abrir uma seleção de estágio no lugar dele colocar lá seleção de estágio ele botou seleção de gugas E aí então são os Estagiários mas quem não sabe o que é isso isso é um terreno interno tá então
é interessante que você coloque e é interessante que você coloque é é o nome popular tá o nome que faz sentido para qualquer pessoa beleza e o outro exemplo aqui você tem um botão resultados você tem um texto resultados em E aí você fica se perguntando Será que isso é um botão será que seu link né E aí você tem um texto que é sem é só o texto em uma cor diferente será que isso é um botão Será que são cliques demora mais ainda para pensar né agora esse primeiro se você já identifica de
cara tá dando continuidade então você não precisa deixar tudo é vidente Imagine que você entra no site do Instituto e é até meio como é hoje né você tem tudo numa página só todos os campis um monte de banner um monte de notícia notícia do edital e fica aquela poluição na tela não é aquela poluição Mas você não precisa deixar tudo em evidência tá e se você não pode deixar Evidente você precisa pelo menos torná-lo Auto explicativo Então nem tudo precisa estar em evidência mas precisa tá fácil para que o usuário acesse e por que
isso né porque tornar as páginas evidentes é como você ter uma boa iluminação e uma loja né faz tudo parecer melhor eu quando você entra em um site no aplicativo e ele é bem Clean né como a gente chama hoje bem simplificado e Isso facilita a navegabilidade né A forma como a pessoa vai navegar dentro do aplicativo tá bom e aqui tem um exemplo é como as pessoas utilizam a web né então fatos sobre os da web eu trouxe aqui Três fatos que estão no livro tá Quais são esses fatos primeiro que as pessoas elas
não leem as páginas elas apenas examinam tá quando vocês acessam a internet e buscar algo no Google você começa a ler tudo lá no Google ou você lê só os títulos das matérias é e fala para mim aí então você lei só os títulos né porque porque aquilo é o que você está procurando na Então o que a gente vê em um site Depende do que a gente está querendo o que a gente está procurando então um exemplo é essa aqui ó o que os projetistas criam é os desenvolvedores eles criam site completo O que
usuário ver usuário tá lá e diz assim eu quero comprar o ingresso ele só vê os botões de comprar bom né ou seja ele consegue processar apenas os botões de comprar porque ele quer comprar o ingresso e quando chega no outro que ele diz assim ó como verifico minhas milhas ou minhas milhagens né como tá aqui bom então ele vai olhar o botão que tem para verificar as milhas o que tem relacionada a milhas nessa página o resto é como se não existisse ele não vai sair lendo você não vai ficar lendo todos os anúncios
você vai ler só o título do anúncio você não vai ler o site você não lê a descrição quando tá lá no Google OK OK o segundo fato nós não fazemos escolhas ideais Fazemos o que é suficiente Quando você vai buscar no Google você olha todas as páginas do resultado Então é isso pessoal geralmente mas geralmente se a gente encontra ali os dois três primeiros links é o que a gente acaba clicando né é o que a gente acaba vamos ver assim achando o suficiente então por isso que a gente não faz a escolha ideal
Pode ser que o que você tá procurando lá na quinta página como Cleiton já foi lá e achou era o link ideal mas se ele não fosse procurando ele buscar as com outro termo bom né Será que ele acha aquela página que foi o ideal para ele tá bom E aí temos lá geralmente estamos com pressa Eu quando você vai buscar algo na web você tá com pressa quando você acessa um site você geralmente vai estar com pressa para resolver logo aquele problema tá então por isso que a sua visão o seu olho ele já
vai bater em cima do que você tá procurando é uma visão mais seletiva você não vai começar a ler tudo com a punição para suposições incorretas não é lá grande coisa o que significa isso vamos supor que Cleiton já chegou até a quinta página e ele não achou o que queria o que é que ele ganhou com isso nada o que é que ele perdeu também alguns segundos ali nada tão grave então a punição para ele foi uma punição né ele pode muito bem ir lá em cima na barra de títulos da barra de título
digital outro site ou simplesmente buscar outro termo no Google mesmo é sem precisar voltar para primeira página é avaliado opções pode não melhorar as nossas chances ou seja ele poderia ter ido até a 10ª opção ele foi não ele pegou logo na na quinta mas se ele fosse até a décima será que teria sido uma melhor escolha nem sempre não é porque geralmente que tá mais com o final é o que é menos relevante para sua busca E aí ah e tem um detalhe que adivinhar mais divertido né Então pessoal começa a clicar nos links
Ah não eu achei que esse lindo era para isso o desenvolvedor vai lá Cleiton botou Cleiton Berg colocou lá o o aplicativo dele de imóveis né que eu já dei spoiler né E aí já chegou lá ele colocou uma estrelinha no imóvel é uma estrelinha para que que serve essa estrela aí o cara vai pensar deve ser porque o apartamento é 3 estrelas a cinco estrelas é uma estrela o apartamento não quero não né então seria para favoritar por exemplo a então assim você clica e vai descobrir o que é que acontece geralmente a gente
faz isso vai clicando e vai descobrindo tá então aprendizagem é a partir da prática Tá bom eu não conhece que eu não sei se esse cara aí falava beijo usuário voltar eu acho que eu vi nunca pessoa colocou no link não sei se foi no vídeo Você foi no você foi o texto era no texto isso aí que tinha não não vídeo sobre muita coisa mas isso aí é uma heurística Daniel sem tá aqui ó e é o Senhor o que a gente falou na semana passada que o deixar o usuário voltaram e aqui ó
ajudar o usuário a reconhecer e diagnosticar e corrigir o erro Ah então deixa o usuário voltar seria mais ou menos isso ele errou ele vai voltar ele vai reconhecer que errou e vai corrigir esse erro voltando tá então isso é uma heurística de Nielson e assim esse livro esse esse clube né na verdade ele fala tudo que nelsen fala só que ele sempre fica aí ele te ver que o outro livro de Near você é só usabilidade é uma Bíblia é gigante esse aqui é bem curtinho e ele é bem direto ao ponto tá E
aí o fato três né Nós não descobrimos como as coisas funcionam nós vamos direto ao ponto né então foi o quê de Van falou né as vezes a gente clica mas não tem Tem coisa que não tem como voltar então é porque você foi direto ao ponto você foi lá e clicou e não quis saber né como é que funcionava tá então não é importante para nós o importante é o funcionamento não é importante o site lá a gente que é trabalha na área de informática a gente fica pensando né poxa com Marcos Será que
o serve do MercadoLivre trata quando eu clico no botão do Favorito como é e assim mas não é todo mundo né não é é usuário comum ele não vai pensar nisso ele quer clicar ali e favoritar e acabou não é para ele aquilo ali é uma coisa tão simples tão besta aqui enfim natural para ele tá e esse a gente encontrar algo que funcione a gente adere a ele por exemplo quem aqui já teve um insatisfação com a operadora de telefone mas não mudou eu porque porque a gente não muda já que a gente tá
insatisfeito né porque a gente já tá livre tá funcionando o pior que seja aquela história tá funcionando ali se você mudar e foi pior aí o transtorno de você mudar o número muitas vezes se você não quiser fazer uma portabilidade o plano as vezes que você paga mais barata tu tem tudo isso tá é que você tirinha aqui é uma história de Dois Príncipes sendo que um foi criado na Realeza e o outro ele era o irmão gêmeo mas tinha sido abandonado o que que acontece ele foi encontrado e esse carinho de azul aqui e
ele é o que morava na Rua enfim o irmão gêmeo do príncipe e aí o príncipe tá perguntando aqui e cadê o brasão real aí o de azul disse tá aqui tome aí ele disse Como é que você sabe onde tava aí ele disse o que ele se eu achei que era um quebra-nozes simplesmente ele achou que era um objeto para quebrar nozes e não sabia que era um brasão real tá e o que é que você quer dizer né Isso quer dizer o que você a gente encontrar o que funcione aderimos a ele funcionava
para aquela finalidade para ele então para ele era um quebra-nozes tá que minimize a confusão que confusão é quando você entra no aplicativo aí aparece um papo de anúncio aparece um pop-up para você pedir autorização do cook aparece solicitando notificação enfim a gritaria né que ele chama de gritaria isso tá EA desorganização é quando você tem uma página realmente que foi mal Projetada não tem espaço em branco aí já entra aquela aglomeração né tudo junto ali o formulário ele precisa também distribuir quando o cara for preencher não coloca os campos tudo em cima do outro
Dá um espaço Faz uma hierarquia lembra que a gente já aprendeu isso hierarquia visual legal tá bom há muito ruído pouca informação e o ruído obscurece o que de fato é útil tá então o ruído é quando você tem algo que está atrapalhando a comunicação real tá então se você quer tem lá o título do site do lado do título tem um anúncio que tá chamando mais atenção do que o título dá um espaçamento tá bom diante das limitações de tempo e atenção tudo o que for parte da só que não for parte da solução
é parte do problema ou seja tudo que tá ali e que não seja realmente o que você quer dizer para o seu usuário verifique se realmente aquilo precisa estar ali só que ele não pode ser trocado substituído Ah tá bom E aí e não importa quantas vezes aí já vem a segunda lei dele tá Não importa quantas vezes tenho que clicar desde que cada clique sejam escolha in pensada e não ambígua Ou seja eu não tenho que decidir né ambiguidade é isso Você tem duas opções para decidir eu não tenho que decidir então desde que
ela não tem que decidir eu posso ligar quantas vezes eu quiser por exemplo você vai filtrar uma categoria Então você vai lá em informática depois de informática ele tem notebook depois do notebook eu escolhi se lá e sete então são cliques que vai ajudar o usuário lá na frente porque ele já filtrou uma categoria A então ele diz até uma regrinha né de equivalência três cliques impensadas equivalem a um clique que requeira reflexão É mas ele diz uma ressalva a ressalva é o seguinte né Não adianta eu dar três cliques impensadas e a página demorar
para carregar então se a página demora muito para carregar aí de todo jeito usuário vai preferir sair porque tá demorando são três cliques que eu vou ter que esperar então essa espera também cansa o usuário ok pessoal E aí a terceira lei né a terceira lei que diz o seguinte livre-se da metade das palavras a cada página então se você tem isso aí pessoal não é um texto jornalístico um post de um blog não são palavras que são títulos então por exemplo se você tem um site que tem lá vídeos é um monte de categoria
Será que você não consegue enxergar essas categorias será que tudo que tá ali de texto realmente é necessário bom então livre-se da metade das palavras de cada página e depois livre-se da metade das que restaram ou seja ele diz aí para você reduzir isso aí é só uma um trocadilho Tá mas o que ele quer dizer no final das contas é reduza o texto ao máximo reduza o quanto você puder o texto Ok mas o que que ele quer dizer aí ele até explica no livro com mais detalhe é o seguinte não é para você
levar isso radical ao pé da letra e o que ele quer que você faça é quando você vê uma página análise todos os textos todos os textos às vezes não é necessário na maioria das vezes todo aquele texto tá até uma mensagem de erro que você diz como Aquela que eu mostrei na aula passada Poxa para que dizer aquilo tudo e ao mesmo tempo não dizer nada para que aquela informação é necessário depois que eu já errei dizendo que só aceita maiúscula e que diferencia maiuscula e minuscula depois que eu errei porque não me deu
essa informação antes a Então existe momentos para você da informação e isso é muito bom muito importante vocês levar em consideração tá e reduz o nível de ruído ou a interferência da página quando você reduza o texto reduz o ruído obviamente tá confere maior destaque ao que realmente importa Pode ver pessoal que cada dia mais as páginas iniciais de sites estão mais enxutas não é o tem uma imagem com o texto outro ou são textos curtos Antigamente era muito mais triste na página inicial Hoje não tem mais tá então com isso você consegue também tornar
as páginas menores o que permite ao usuário visualizar mais a cada página sem precisar rolar ou seja sem ele precisar usar a barra de rolagem você consegue exibir tudo em uma uma única tela tá principalmente aplicativo tentem fazer isso porque usar a barra de rolagem aplicativo e é complicado até para prototipar vocês vai dar trabalho então tenta organizar as informações todas em uma tela só não é coloca uma setinha para próximo algo do tipo ok e quando instruções forem necessários limites ao mínimo necessário Então esse é o caso daquele exemplo que eu falei do Swap
também quando você for dar alguma instrução para o usuário limite elas apenas ao for necessário né então se ali naquele momento era o momento dele dizer usuário errado Senha inválida usuário inválido era só isso um outro ou então campo ficar vermelho e ele dizer a mensagem de erro acabou não precisa dizer que diferencia maiúscula de minúscula não precisava dizer tudo isso tá bom então pessoal o que é que vocês acharam é vou recapitular aqui porque a gente chegou agora aí porque a gente viu né então os princípios Steven Clube o primeiro ele fala não me
faça pensar é Ou seja quando você for fazer algo não faça muito confuso para que o usuário não precise ficar analisando como é que usa aquilo a Então seja direto na livre-se das perguntas das perguntas que perguntas né como é que eu uso isso será que aqui é um site será que é um menu será que é um é um botão né coisas que faz a gente pensar quando você coloca muito texto por exemplo em um botão né então vá direto ao ponto coisas que você cria na categorias nomes que vocês criam internamente Então vamos
supor que é e por alguma razão a pessoa está desenvolvendo um sistema de vagas aí eu vamos vamos procurar para nossa realidade eu estou desenvolvendo um sistema para o ief Sertão e aí eu dentro do sistema não ia ser tão eu coloco o algo algum nome né sei lá é Sertão vagas Sertão vagas pronto Sertão vagas dá para entender que seriam vagas disponíveis mas vagas de que vagas para trabalhar vagas para estudar vagas de superior do técnico então isso fica muito vago isso faz o usuário pensar tá então você precisa ser específico o outro exemplo
aqui em São os botões quando hoje em dia um dos padrões web né o utiliza muito aquele flat então o frete ele não tem Sombra ele não tem esses tão frio aqui né que nem é tão utilizado mais hoje hoje a gente utilizar uma sombra e um degradê Zinho É mas ele não tem então o que que acontece ele acaba ficando um botão assim ó só o quadrado aqui Imagino que eu pego esse quadrado né e esse quadrado aqui muda a cor e pronto aí será que eu vou saber que isso aqui é um botão
pode ser simplesmente o fundo não tenho como saber se é um botão agora se eu chego aqui e coloco sei lá uma sombra bom então ele já fica mais com cara de botão tá bom e olha já ficou mais com cara de botão tá vendo aí só por causa da sombra tá então isso é você não fazer o usuário pensar ok e você não precisa de deixar tudo é vidente Mas também você não precisa ocultar nada você o que você não puder deixar Evidente deixe Auto explicativo né como por exemplo é que eu já citei
várias vezes as redes sociais né Elas são bem auto-explicativas a gente aprende a usar sem fazer cursos em ler documentação sem fazer nada tá bom o fatos sobre os da web primeiro nós não Lemos as páginas apenas examinamos aqui tem um exemplo a pessoa vai fazer uma compra ela só vê o que está relacionada à compra a outra vai fazer uma checagem de milhas ela só vê o que está relacionado as milhas tá o fato 2 e nós não fazemos escolhas ideais Fazemos o que é suficiente a gente geralmente tá com pressa e Vai ali
naquele site e escolhe né enfim clica no link apenas rapidamente e não quer ficar buscando várias horas o que sei lá Acontece muito isso na Netflix né então Enfim no YouTube as você quer assistir um vídeo e não sabe o que assistir E aí você fica muitas horas Tentando escolher né só que acaba você se fruta e enfim acaba não assistindo nada às vezes então se ele tivesse um catálogo mais enxuto você escolher algo mais rápido tá se ele tivesse alguma indicação sei lá filme do dia o orçamento do dia mas aí tem 10 15
e 50 filmes lançando de uma vez aí Você não assistiu nenhum e você fica naquela dúvida e acaba não achei nada tá então se você precisa pensar em tudo isso quando for projetar seu site tá seu aplicativo Eu lembro que usuário ele só descobre com as coisas ele não Descobre como as coisas funcionam né ele vai direto ao ponto ele quer usar ele quer usar e pronto não importa para ele se você fez Henriette em react Native em sei lá e aí o nick regula Não importa se fez em PHP java script Ele quer saber
como é que ele faz para usar. Tá bom tô minimize a confusão né gritaria ou seja muita janela pulando muito texto aquela desorganização aglomeração de texto de imagem minimiza e isso ou até elimine tá em diante das limitações de tempo e atenção que você tem porque o usuário ele não fica muito tempo no seu site ele fica milésimos de segundos ou até segundos ali e depois ele sai se for ruim né então diante disso tudo que for parte que não for parte da solução é parte do problema tá Oi e aí vem a segunda lei
Não importa quantas vezes a pessoa vai ter que clicar desde que cada clique sejam escolha impensado ou seja ele não vai demorar pensando aquilo ele não vai gastar tempo tá Oi e a terceira é que você precisa ter uma página enxuta sem muito texto tá então quando as instruções forem necessárias limitadas ao mínimo necessário apenas o que for realmente importante tá bom pessoal o entenderam aula de hoje aí
