# data[].attributes.body
Grupo: João Pedro Padilha, Vinícius Ferreira do Rosário, Otávio Augusto Nogueira

# data[].attributes.body
Minuto 8:40.

# data[].attributes.attachment_link.title
As Dez Heurísticas de Usabilidade de Jacob Nielsen - Design de Interfaces e UX (Com Exemplos)

# data[].attributes.body
Caio Pereira Silva, Júlio César Claudino, Luis Marcelo de Pádua.

# data[].attributes.body
Lucas David Salomé Ortiz, Matheus Silva Ortiz, Gabriel Mansur, Vinícius Pacheco, Nicholas Ciacci, Lucas Salles

# data[].attributes.body
Guilherme Vinhas
Rayan R. Silva
João Pedro Pontes
Isaque Mansur

# data[].attributes.body
*Hugo Borges*
*Wesly Gleison*
*Guilheme Dias Rodrigues*
*Antonio Roberto Fonseca*

# data[].attributes.body
Igor Gonçalves
Gustavo Nogueira
Vinicius Kenzo

# data[].attributes.headline
Rafael Carvalho - Morelle Jr - Fernando Veloso

# data[].attributes.subject
Rafael Carvalho - Morelle Jr - Fernando Veloso

# data[].attributes.headline
Heurísticas de Nielsen-9 Ajuda com erros.

# data[].attributes.subject
Heurísticas de Nielsen-9 Ajuda com erros.

# data[].attributes.body
Por exemplo, o formulário de criação de conta do Spotify, mostra quando um dado está preenchido incorretamente, no momento de criar a senha a plataforma orienta onde está o erro, próximo do campo em que ele ocorreu e os passos para corrigi-lo.

# data[].attributes.body
FILIPE EDUARDO ANDRADE COSTA

RODOLFO ARNAUT VILELA SILVA

GUSTAVO DE RESENDE FARIA

# data[].attributes.body
O usuário ao observar as ferramentas da interface deverá identificar os símbolos e deduzir o funcionamento.

# data[].attributes.body
Utilizamos a prevenção de erro do Visual Studio Code
Conforme a imagem acima, vemos que o visual nos alertou ao sair da pagina sem salvar o conteúdo, evitando que o erro aconteça.

# data[].attributes.body
A interface do site ou sistema web deverá conter padrões e elementos com consistência para que o usuário entenda os elementos que quer utilizar ou está utilizando, por meio do uso de símbolos ou padrões universais.

# data[].attributes.body
Portanto, a oitava heurística de Nielsen é um ponto essencial para a criação de uma aplicação que dialogue e sane os anseios do usuário final.

# data[].attributes.attachment_link.title
As Dez Heurísticas de Usabilidade de Jacob Nielsen - Design de Interfaces e UX (Com Exemplos)

# data[].attributes.body
Visto isso, mostra-se que é mais viável antecipar o erro dos usuários, através de caixas e mensagens de confirmações do que o acometimento de erros precoces e irrevercívei por parte do usuário.

Grupo: Álvaro Mendes, Caio Ozzilins, Gabriel Gouvea, Miguel Ferrari, Rafael Ponce e Victor Emanuel.

# data[].attributes.body
Ana Caroline Comuniam
Érika Maia
Renan Augusto

# data[].attributes.headline
Heurísticas de Nielsen-9 Ajuda com erros.

# data[].attributes.subject
Heurísticas de Nielsen-9 Ajuda com erros.

# data[].attributes.body
Um site ou sistema web deve ser consistente em sua comunicação com o usuário e apresentação dos elementos de interação.

# data[].attributes.body
Devemos minimizar a quantidade de informações que o usuário precisa memorizar, para isso, objetos, ações e opções importantes devem ficar visíveis, isso faz com que o cérebro perceba as ações que são similares, reconhecendo assim padrões.
Sexta das 10 heurísticas de Nielsen: Reconhecimento em vez de recordação - Página de produto no site Best Buy
Página de produto no site Best Buy
Os sites de e-commerce, por exemplo, costumam seguir padrões em seu layout, tendo a barra de busca no topo, o carrinho no canto superior direito, na página do produto fica uma foto deste a esquerda e sua descrição na direita, permitindo assim que o usuário reconheça o layout de experiências anteriores que ele teve nos demais sites do gênero, focando mais sua atenção nos produtos, do que em aprender a utilizar o site.

# data[].attributes.body
Essa heurística foca em criar uma plataforma que busca prevenir que problemas ocorram, eliminando condições mais propensas ao erro, isso pode ser feito sinalizando ações como quando o usuário não finalizou uma tarefa e pede para sair da página ou oferecendo a ele uma opção de confirmação antes de completar uma ação.

# data[].attributes.body
Na arquitetura, assim como em outras áreas, o minimalismo, descrito nas palavras de Mies Van Der Rohe, valoriza a sintonia entre a eficiência e o equilíbrio, a percepção aguçada para entregar o que é necessário e remover o excesso.

Também é o mesmo processo utilizado na criação de aplicações.

# data[].attributes.headline
Grupo 4- Consistência e padrões - Patrick Bernardes da Silva, Alvaro Henrique Leonel, Wesley  Pereira

# data[].attributes.subject
Grupo 4- Consistência e padrões - Patrick Bernardes da Silva, Alvaro Henrique Leonel, Wesley  Pereira

# data[].attributes.body
Definição: a visibilidade do status do sistema refere-se a quão bem o estado do sistema é transmitido a seus usuários. O ideal é que os sistemas sempre mantenham os usuários informados sobre o que está acontecendo, por meio de feedback apropriado dentro de um prazo razoável.

# data[].attributes.headline
Visibilidade do status do sistema- Feedback apropriado

# data[].attributes.subject
Visibilidade do status do sistema- Feedback apropriado

# data[].attributes.body
Sempre que os usuários interagem com um sistema, eles precisam saber se a interação foi bem-sucedida. O sistema realmente detectou aquele botão pressionado ou estava ocupado com outra coisa e o ignorou? O item foi adicionado ao carrinho? A solicitação foi atendida?

O feedback apropriado para uma ação do usuário é talvez a diretriz mais básica do design da interface do usuário. Ele serve para manter os usuários informados sobre o status atual e permitir que eles direcionem a interação na direção certa, sem perder esforço.

Esse feedback pode ser tão simples quanto uma mudança de cor depois que o usuário clica em um botão ou um indicador de progresso quando um processo precisa de um pouco mais de tempo para terminar. Esses indicadores comunicam que o sistema está funcionando e reduzem a incerteza – evitando que os usuários, digamos, toquem no mesmo botão várias vezes porque não tinham certeza se a primeira vez funcionou.

# data[].attributes.headline
Ajude os usuários a reconhecer, diagnosticar e recuperar de erros | Parte Final

# data[].attributes.subject
Ajude os usuários a reconhecer, diagnosticar e recuperar de erros | Parte Final

# data[].attributes.body
Seguindo as dicas da oitava heurística de Nielsen é possível criar um design cada vez mais limpo e eficiente, o princípio do minimalismo deve ser protagonista de qualquer projeto, como uma forma de prever erros e colaborar para que o usuário do aplicativo se sinta realizado ao fazer determinada tarefa.

# data[].attributes.body
Lucas Salles

Somente sabendo qual é o status atual do sistema você pode alterá-lo, ou seja, você pode superar o abismo da avaliação e descobrir o que você precisa fazer a seguir para atingir seu objetivo.

Por exemplo, quando você dirige um carro, precisa ver continuamente sua velocidade para decidir se precisa ir mais rápido ou reduzir a velocidade. Quem já dirigiu um carro com o velocímetro quebrado pode atestar o fato de que é bastante difícil. Quando isso aconteceu comigo, me senti à mercê dos carros ao meu redor, enquanto tentava manter o ritmo e confiar cegamente que eles estavam indo a uma velocidade razoável. A falta de informação geralmente equivale à falta de controle.

# data[].attributes.body
Definição: Utilização de métodos, atalhos e ferramentas que tem como finalidade, facilitar e fazer com que a usabilidade seja a mais agradável e funcional possível.

Exemplos: Utilização de teclas de atalho no Vegas PRO, criadas para agilizar e facilitar a edição de vídeos neste programa.

# data[].attributes.body
Tamires Maiolini
Rafael Fernandes da Silva
Graziele Souza
Paulo Sérgio
Lorran Dias
Marcus Vinicius Knoll

# data[].attributes.headline
Ajude os usuários a reconhecer, diagnosticar e recuperar de erros | Parte 2

# data[].attributes.subject
Ajude os usuários a reconhecer, diagnosticar e recuperar de erros | Parte 2

# data[].attributes.body
Cada mensagem de erro deve ser a mais explícita e precisa possível. Ninguém quer ler mensagens vagas como “algo deu errado”. Declare o que aconteceu de forma clara e direta, sem enrolar.
Mensagens como “Erro 372” são igualmente absurdas. Dê ao usuário alguns conselhos construtivos sobre o que fazer a seguir. Proponha a solução ou encaminhe o usuário a um funcionário do suporte ao cliente que possa cuidar da situação.
A última regra das boas mensagens de erro é a educação. Nunca culpe o usuário pelo erro ou faça-o se sentir culpado.

# data[].attributes.headline
Heurística 3-Liberdade e controle do usuário

# data[].attributes.subject
Heurística 3-Liberdade e controle do usuário

# data[].attributes.body
Uma boa prática que já foi documentada e que temos vários exemplos práticos é dar controle ao usuário. Isso tem vários significados e preocupações, pois liberdade é poderosa e precisa ser bem planejada quando se trata de liberdade ao usuário.

A liberdade de controle pode significar ter vários atalhos, ter mais de uma forma de fazer a mesma coisa e também significa ter o controle de desfazer o que foi feito até agora.

Quando projetamos sistemas, aplicativos e similares, temos que nos preocupar em transportar o modelo mental do usuário e do processo para o projeto em questão. Isso traz alguns detalhes que na vida real o usuário precisa que seja solucionado com essa ferramenta tecnológica.

# data[].attributes.headline
Visibilidade de status do sistema - explicação

# data[].attributes.subject
Visibilidade de status do sistema - explicação

# data[].attributes.body
Em sua essência, trata-se de comunicação e transparência, que são essenciais para muitos aspectos da vida. As pessoas se esforçam por previsibilidade e controle e, na maioria dos casos, mais informações se traduzem em melhores decisões.

# data[].attributes.headline
Heurística 03 - Liberdade e controle do usuário.

# data[].attributes.subject
Heurística 03 - Liberdade e controle do usuário.

# data[].attributes.body
O ponto aqui é que quando o usuário realiza ações por engano, algo que é frequente, o sistema deve apresentar ao usuário uma “saída de emergência” daquele estado no qual ele entrou para o estado de segurança em que estava, em outras palavras, dê ao usuário o “Ctrl+Z” pois essa possibilidade de reverter ações remove a insegurança do usuário ao utilizar o aplicativo, site, etc. Contudo , isso contribui para o nosso usuário além de maior segurança , também um conforto , onde ele terá livre acesso para realizar a suas ações sem haver nenhuma limitação ou interferência em seus atos.

# data[].attributes.headline
Heurística 2- Relação entre Interface e o Mundo Real

# data[].attributes.subject
Heurística 2- Relação entre Interface e o Mundo Real

# data[].attributes.body
Uma interface com boa usabilidade segue convenções do mundo real, trazendo informações de maneira natural, lógica e familiar . Desse modo, todas as nomenclaturas, ícones e imagens precisam estar inseridas em um contexto e ser coerentes com o modelo mental do usuário.

# data[].attributes.body
Presença de atalhos e métodos que visam melhorar e apresentar uma interação mais eficiente com o produto.

Exemplo: Teclas de atalho presentes no Vegas PRO, utilizadas para facilitar e aumentar a produtividade em edições de vídeo.

# data[].attributes.headline
Heurísticas de Nielsen - 9. Ajuda com erros.

# data[].attributes.subject
Heurísticas de Nielsen - 9. Ajuda com erros.

# data[].attributes.body
Caso dê algo de errado, é importante mostrar ao usuário qual foi o erro e como se recuperar dele, para isso, as mensagens de erro devem ser claras e objetivas, em linguagem simples e próximas da ação que causou o erro.

Igor Gonçalves
Gustavo Nogueira
Vinicius Kenzo

# data[].attributes.headline
Heurística 3- Liberdade e controle do usuário

# data[].attributes.subject
Heurística 3- Liberdade e controle do usuário

# data[].attributes.body
Na heurística 3, a preocupação é a liberdade do usuário fazer o que quiser dentro do sistema com exceção das coisas que vão contra o negócio ou interferem em outra funcionalidade. Por exemplo, não podemos editar um Tweet. Seria péssimo você dar um retweet em um conteúdo que acha legal e o dono do post editar para uma mensagem que diz algo que você não gosta.

# data[].attributes.headline
Visibilidade e status do sistema - Exemplos

# data[].attributes.subject
Visibilidade e status do sistema - Exemplos

# data[].attributes.body
Quando você faz login no Gmail, ele mostra o que está acontecendo em segundo plano e o progresso;

Quando você faz o upload de algo, o progresso da ação deve ser claramente visível;

Quando você verifica os detalhes do voo no google, ele mostra claramente o status – a cor indica que é pontual e a localização do ícone indica o andamento da jornada

# data[].attributes.headline
Ajude os usuários a reconhecer, diagnosticar e recuperar de erros | Parte 1

# data[].attributes.subject
Ajude os usuários a reconhecer, diagnosticar e recuperar de erros | Parte 1

# data[].attributes.body
Erros e problemas podem ser frustrantes para o usuário.
Portanto é necessário que tanto a comunicação da existência do erro quanto a resolução do mesmo devem ser configurados da forma mais prática e direta possível.
Assim maximizando a experiência do usuário.

# data[].attributes.body
Presença de atalhos e métodos que visam melhorar e apresentar uma interação mais eficiente com o produto.

Exemplo: Teclas de atalho presentes no Vegas PRO, utilizadas para facilitar e aumentar a produtividade em edições de vídeo.

# data[].attributes.body
O usuário se deparou com uma dúvida ao preencher um formulário no site do DETRAN. O mesmo não sabia o que era o código RENAVAM. Na documentação o usuário sanou suas dúvidas e seguiu com seu cadastro.

# data[].attributes.body
Comunicação clara gera confiança
A melhor maneira de construir confiança é comunicar explicitamente o status atual do sistema – quais itens não estão mais disponíveis – e então permitir que o usuário os remova da lista ou os mantenha visíveis para referência futura, ou seja melhorar a usabilidade. A visibilidade do status do sistema é um princípio básico de uma ótima experiência do usuário. Em sua essência, essa heurística de Nielsen incentiva a comunicação aberta e contínua, que é fundamental para todos os relacionamentos – seja com pessoas ou dispositivos. Os usuários que não estão informados sobre o status atual do sistema não podem decidir o que fazer a seguir para atingir seus objetivos, nem podem descobrir se suas ações foram eficazes ou se cometeram um erro. Não vende os olhos de seus usuários, deixe-os livres para enxergar bem suas escolhas!

# data[].attributes.body
Como por exemplo, o botão de excluir permanentemente algum arquivo. O usuário poderá clicar de maneira equivocada nesta tecla. Ademais, com esta heurística o usuário terá uma segunda confirmação da ação, prevenindo a perca permenante de um arquivo.

Grupo: Álvaro Mendes, Caio Ozzilins, Gabriel Gouvea, Miguel Ferrari, Rafael Ponce e Victor Emanuel.

# data[].attributes.headline
Heurística 2 - Relacionamento entre a interface do sistema e o mundo real

# data[].attributes.subject
Heurística 2 - Relacionamento entre a interface do sistema e o mundo real

# data[].attributes.body
Os ícones de carrinhos de compra para representar o checkout e lixeira para a ação de excluir um arquivo são bons exemplos dessa heurística.
Porém, é importante tomar cuidado, visto que as pessoas vivem em realidades e culturas diferentes.

# data[].attributes.headline
1. Visibilidade do Status do Sistema        Definição: a visibilidade do status do sistema refere-se a quão bem o estado do sistema é transmitido a seus usuários. O ideal é que os sistemas sempre mantenham os usuários informados sobre o que está acontecendo, por meio de feedback apropriado dentro de um prazo razoável.          

# data[].attributes.subject
1. Visibilidade do Status do Sistema        Definição: a visibilidade do status do sistema refere-se a quão bem o estado do sistema é transmitido a seus usuários. O ideal é que os sistemas sempre mantenham os usuários informados sobre o que está acontecendo, por meio de feedback apropriado dentro de um prazo razoável.          

# data[].attributes.body
Knowledge Is Power

Only by knowing what the current system status is can you change it — that is, you can overcome the gulf of evaluation and figure out what you need to do next in order to reach your goal.

For instance, when you drive a car, you need to continuously see its speed to decide if you need to go faster or slow down. Those who have ever driven a car where the speedometer was broken can attest to the fact that it’s quite difficult. When this happened to me, I felt at the mercy of the cars around me, as I attempted to keep pace and blindly trust that they were going at a reasonable speed. A lack of information often equates to a lack of control.

.

Matheus Ortiz

# data[].attributes.headline
MARCUS E LORRAN - VISIBILIDADE DE STATUS DO SISTEMA - DEFINIÇÃO 

# data[].attributes.subject
MARCUS E LORRAN - VISIBILIDADE DE STATUS DO SISTEMA - DEFINIÇÃO 

# data[].attributes.headline
H - 10 - Documentação (exemplo de utilização)

# data[].attributes.subject
H - 10 - Documentação (exemplo de utilização)

# data[].attributes.body
Ao iniciar o processo de interação com uma interface, o usuário pode se deparar com alguns problemas. A documentação trará nitidez e esclarecerá os mesmos.

# data[].attributes.headline
Heurística 2 - Relação entre Interface e o Mundo Real

# data[].attributes.subject
Heurística 2 - Relação entre Interface e o Mundo Real

# data[].attributes.body
A segunda heurística de Nielsen diz respeito a criar uma interface funcional e acessível que fale a linguagem do usuário. Ou seja, que utiliza palavras, frases e conceitos que sejam familiares ao usuário.

# data[].attributes.body
Gabriel Mansur

Incentivar os usuários a agir

Os sistemas modernos costumam ser complexos e não é razoável supor que todas as variáveis que descrevem o estado de um sistema possam ser comunicadas ao usuário. Muitos componentes de backstage, como quais arquivos JavaScript que estão sendo baixados e executados para fazer um site funcionar, são de pouco interesse para os usuários. No entanto, ocasionalmente, os aspectos dos bastidores podem na verdade desempenhar um papel importante no palco.

# data[].attributes.headline
Uma análise segundo as Heurísticas de Nielsen:

# data[].attributes.subject
Uma análise segundo as Heurísticas de Nielsen:

# data[].attributes.body
Termo criado pelo arquiteto Ludwig Mies van der Rohe (renomado arquiteto alemão), ao falar sobre o Edifício Seagram (em New York) utilizou a seguinte frase: "menos é mais”, uma referência a clareza e praticamente a ausência ornamental do projeto que explorou formas geométricas elementares.

# data[].attributes.body
Lucas Salles

Definição: a visibilidade do status do sistema refere-se a quão bem o estado do sistema é transmitido a seus usuários. O ideal é que os sistemas sempre mantenham os usuários informados sobre o que está acontecendo, por meio de feedback apropriado dentro de um prazo razoável.

# data[].attributes.headline
Heurística 8- Estética e design minimalista

# data[].attributes.subject
Heurística 8- Estética e design minimalista

# data[].attributes.body
Uma estética minimalista de interface é essencial para uma boa usabilidade da aplicação. Uma interface com muitas informações dispostas, pode causar confusão para o usuário.
portanto, é essencial criar uma interface simples e dinâmica, e dispor somente as informações necessárias ao usuário, de forma clara para eles.

# data[].attributes.body
Normalmente essas são as áreas menos acessadas mas ainda assim elas são importantes dentro de um sistema pois nunca se sabe quando um usuário irá precisar de uma ajudinha. É como se fosse uma maneira “faça você mesmo” do usuário resolver suas dúvidas de quais ações tomar dentro da aplicação tornando-o mais independente do suporte.

# data[].attributes.body
Recebaaaa

# data[].attributes.headline
Reconhecimento ao invés de lembrança            

# data[].attributes.subject
Reconhecimento ao invés de lembrança            

# data[].attributes.body
Partindo do princípio de que “pensar cansa” e “tomar decisões erradas frustra”, deve-se minimizar a sobrecarga de memórias em uma interface sempre que possível. Vamos levar em conta de que TUDO que é visível na interface se torna um “dado”. Tal qual um computador. E quanto mais “dados” (informação) houver, maior será o tempo, de acordo com o processamento desses “dados”. Ou seja, quanto mais informação e necessidade de pensar, maior sobrecarga de memória haverá.Em relação à cor, forma e tipografia, devem ser levadas em conta: COR o padrão cromático é um fator importante com relação ao comportamento do usuário frente à interface. Em qualquer projeto, deve ser pensado de modo a haver, de fato, um padrão, e não somente cromatismo aleatório (que tem grandes chances de confundir o usuário). FORMA toda a estrutura da interface deve obedecer um padrão, assim como a cor também precisa. Essa estrutura pode ser feita através de diagramas feitos em cima de uma malha diagramacional. Um bom exemplo de padronização é a iconografia do sistema. Deve partir de um conceito e conservar um padrão, o que ajuda no reconhecimento pelo usuário. TIPOGRAFIA deve se adequar ao conjunto, juntamente com cores e formas. Ou seja, deve haver um bom contraste para leitura e fonte legível, pois quanto pior a visualização, maior a sobrecarga de memória (dado que, quanto maior o número de fontes e mais diversificados sejam os tamanhos, maior o tempo de processamento de informação visual pelo usuário)

# data[].attributes.body
O cérebro é muito bom em reconhecer padrões e na medida em que objetos, ações e opções ficam expostos para o usuário mais dicas chegam ao cérebro tornando certas ações familiares, ou seja, é preferível dar ao usuário formas de reconhecer padrões do que ter que obrigá-lo a memorizar várias informações na medida que ele navega pela aplicação. A grande diferença entre reconhecer e memorizar é a quantidade de dicas que são fornecidas para que um conhecimento seja acessado, reconhecer padrões fornece muito mais dicas do que tentar acessar memórias. Tente lembrar de uma senha (memorização) ou tente salvar um arquivo no Excel (reconhecimento).

# data[].attributes.attachment_caption
Exemplo de atalhos para realizar certas funções e facilitar o uso da aplicação assim como a heurísticas propõe.

# data[].attributes.headline
Heurística 7 - Flexibilidade e eficiência de uso

# data[].attributes.subject
Heurística 7 - Flexibilidade e eficiência de uso

# data[].attributes.body
Relação direta com os erros do usuário. Para prevenção dos mesmos é necessário a criação de interfaces bem desenvolvidas antecipando qualquer ação precipitada do usuário.

Grupo: Álvaro Mendes, Caio Ozzilins, Gabriel Gouvea, Miguel Ferrari, Rafael Ponce e Victor Emanuel.

# data[].attributes.body
BOA PARA NOS

# data[].attributes.attachment_link.description
UOL, a maior empresa brasileira de conteúdo, serviços digitais e tecnologia com vários canais de jornalismo e diversas soluções para você ou seu negócio.

# data[].attributes.headline
Heurística 7 - Flexibilidade e Eficiência de Uso.

# data[].attributes.subject
Heurística 7 - Flexibilidade e Eficiência de Uso.

# data[].attributes.body
Explicação:
Qualquer tipo de usuário deve conseguir interagir nas interfaces desenvolvidas.
Necessário ter a flexibilidade de dispor informações detalhadas para os usuários mais inexperientes.
O desenvolvimento da interface deve ser eficaz e permitir a personalização de ações frequentes, disponibilizando atalhos e preenchimentos automáticos.

# data[].attributes.body
teste