16
Tecnologia em Sistemas para Internet Componente Curricular: Projeto de Navegação e Interação 02 - Interfaces

Componente Curricular: Projeto de Navegação e ...vfm.com.br/fatec/PNI/02 - PNI - 8 Regras de Outro de Ben Shneiderm… · Tecnologia em Sistemas para Internet Componente Curricular:

  • Upload
    others

  • View
    5

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Componente Curricular: Projeto de Navegação e ...vfm.com.br/fatec/PNI/02 - PNI - 8 Regras de Outro de Ben Shneiderm… · Tecnologia em Sistemas para Internet Componente Curricular:

Tecnologia em Sistemas para Internet

Componente Curricular: Projeto de Navegação e Interação

02 - Interfaces

Page 2: Componente Curricular: Projeto de Navegação e ...vfm.com.br/fatec/PNI/02 - PNI - 8 Regras de Outro de Ben Shneiderm… · Tecnologia em Sistemas para Internet Componente Curricular:

Interface do Usuário e as oito regras de ouro de Ben Shneiderman

• Ben Shneiderman é professor e pesquisador na universidade de Maryland – USA: https://www.cs.umd.edu/users/ben/

• Segundo o seu próprio site, seus principais interesses são Interação Humano-Computador, Design de Interface do Usuário, Visualização da Informação e Mídia Social.

• Ele define oito regras que, se obedecidas, podem ser um grande diferencial no desenvolvimento de interfaces intuitivas e de fácil utilização.

• Essas regras são aplicáveis não somente a sites, mas também a aplicações web, desktop e mobile.

Page 3: Componente Curricular: Projeto de Navegação e ...vfm.com.br/fatec/PNI/02 - PNI - 8 Regras de Outro de Ben Shneiderm… · Tecnologia em Sistemas para Internet Componente Curricular:

Regra nº 1 – Mantenha a consistência• Repetição de certos padrões:

• Estrutura do Layout

• Barras de navegação

• Ícones e símbolos

• Estilo de redação

• Cores

• Repetição de ações

Page 4: Componente Curricular: Projeto de Navegação e ...vfm.com.br/fatec/PNI/02 - PNI - 8 Regras de Outro de Ben Shneiderm… · Tecnologia em Sistemas para Internet Componente Curricular:
Page 5: Componente Curricular: Projeto de Navegação e ...vfm.com.br/fatec/PNI/02 - PNI - 8 Regras de Outro de Ben Shneiderm… · Tecnologia em Sistemas para Internet Componente Curricular:

Regra nº 2 – Atalhos para usuários experientes• Basicamente os usuário podem ser classificados em

leigos e experientes;

• É inviável criar duas interfaces diferentes, isto é, uma para cada tipo de usuário

• Criar atalhos (teclas mágicas) e formas de navegação alternativa para usuários mais experientes

• Teclas e atalho e menus alternativos

Page 6: Componente Curricular: Projeto de Navegação e ...vfm.com.br/fatec/PNI/02 - PNI - 8 Regras de Outro de Ben Shneiderm… · Tecnologia em Sistemas para Internet Componente Curricular:
Page 7: Componente Curricular: Projeto de Navegação e ...vfm.com.br/fatec/PNI/02 - PNI - 8 Regras de Outro de Ben Shneiderm… · Tecnologia em Sistemas para Internet Componente Curricular:

Regra nº 3 - Feedback

• Existem interações instantâneas e interações demoradas;

• Para cada ação do usuário é necessário haver um feedback, isto é, o usuário precisa saber se a ação foi executada com sucesso, aconteceu algum problema e, principalmente, se a ação ainda está sendo executada;

• É aconselhável a utilização de metáforas de interface para informar ao usuário o status de uma ação.

Page 8: Componente Curricular: Projeto de Navegação e ...vfm.com.br/fatec/PNI/02 - PNI - 8 Regras de Outro de Ben Shneiderm… · Tecnologia em Sistemas para Internet Componente Curricular:
Page 9: Componente Curricular: Projeto de Navegação e ...vfm.com.br/fatec/PNI/02 - PNI - 8 Regras de Outro de Ben Shneiderm… · Tecnologia em Sistemas para Internet Componente Curricular:

Regra nº 4 – Diálogos com início, meio e fim• Os diálogos devem ser padronizados:

• Ícones• Textos• Símbolos

• A utilização de diálogos deve ser suave e, ao mesmo tempo, informativa e inspirar confiança:

“Parabéns, o seu cadastro foi realizado com sucesso! Verifique seu e-mail para que possamos continuar o processo”

“Seu cadastro foi ativado. Clique aqui para entrar no sistema”

“O campo CPF é obrigatório. Por favor, preencha-o”

Page 10: Componente Curricular: Projeto de Navegação e ...vfm.com.br/fatec/PNI/02 - PNI - 8 Regras de Outro de Ben Shneiderm… · Tecnologia em Sistemas para Internet Componente Curricular:

Regra nº 5 – Prevenção de erros

• O sistema deve ser capaz de se acusar erros humanos (validação de dados) de forma suave, simples e objetiva (Vide Regra nº 4)

• O sistema deve se recuperar de erros e permitir que uma operação seja reiniciada sem complicações.

• O usuário não pode se sentir “perdido” quando um erro acontecer, seja por culpa dele ou devido problemas técnicos (falha na conexão com a Internet, erro de banco de dados, etc...)

Page 11: Componente Curricular: Projeto de Navegação e ...vfm.com.br/fatec/PNI/02 - PNI - 8 Regras de Outro de Ben Shneiderm… · Tecnologia em Sistemas para Internet Componente Curricular:
Page 12: Componente Curricular: Projeto de Navegação e ...vfm.com.br/fatec/PNI/02 - PNI - 8 Regras de Outro de Ben Shneiderm… · Tecnologia em Sistemas para Internet Componente Curricular:

Regra nº 6 – Desfazer!

• O comando “desfazer” tão presente e tão marcante nos softwares desktop foi uma grande sacada. Com ele é possível desfazer uma ação apenas com um clique, então, porque as aplicações, seja web, desktop ou mobile não usam essa ideia?

• Analise com cuidado como será a navegação no seu site, pois, dependendo da forma como é feita, o botão “voltar” dos navegadores se tornarão inúteis e isso pode complicar a vida do usuário.

Page 13: Componente Curricular: Projeto de Navegação e ...vfm.com.br/fatec/PNI/02 - PNI - 8 Regras de Outro de Ben Shneiderm… · Tecnologia em Sistemas para Internet Componente Curricular:

Regra nº 7 – O usuário é quem manda!• Isso é usabilidade, ou seja, o

usuário deve se sentir no comando o tempo todo.

• Com uma interface simples e intuitiva o usuário terá a sensação que é ele quem controla o sistema e não o contrário.

• Regras, mensagens “forçadas”, pop-ups e outros elementos que tentem persuadir o usuário a executar uma ação ao qual ele não deseja devem ser destruídos! Claro, há exceções.

Page 14: Componente Curricular: Projeto de Navegação e ...vfm.com.br/fatec/PNI/02 - PNI - 8 Regras de Outro de Ben Shneiderm… · Tecnologia em Sistemas para Internet Componente Curricular:

Regra nº 8 – Respeite a memória curta• A memória de curto prazo do ser

humano é capaz de armazenar somente 7 (mais ou menos 2) blocos de informação a cada interação como computador.

• Essa limitação deve ser respeitada pelos designers, caso contrário o usuário se sentirá “perdido” durante a interação.

• Menus expansíveis (pull-down) devem ser evitados;

• Devem existir no máximo 9 opções de navegação visíveis na tela (menu de navegação).

Page 15: Componente Curricular: Projeto de Navegação e ...vfm.com.br/fatec/PNI/02 - PNI - 8 Regras de Outro de Ben Shneiderm… · Tecnologia em Sistemas para Internet Componente Curricular:

Bônus: a 9ª regra – Conheça o Usuário[...] o usuário não é uma abstração teórica. Umainterface só é bem sucedida se ela der o suporteadequado aos objetivos e ao comportamento dousuário real. Antes de botar a mão na massa [...]devemos descobrir o que o público pensa, o que elequer e como ele age, aplicando técnicas de pesquisacomo grupos de foco, questionários, card sorting outestes de usabilidade. A isso chamamos de projetocentrado no usuário.

Agner (2012, pág. 32 e 33)

Page 16: Componente Curricular: Projeto de Navegação e ...vfm.com.br/fatec/PNI/02 - PNI - 8 Regras de Outro de Ben Shneiderm… · Tecnologia em Sistemas para Internet Componente Curricular:

Referências e Bibliografia

AGNER, Luiz. Ergodesign e arquitetura da informação: trabalhando com o usuário. Rio de Janeiro: Quartet, 3ª ed. 2012.

CAMARGO, Liriane Soares de Araújo de; VIDOTTI, Silvana Aparecida Borsetti Gregorio. Arquitetura da Informação: uma abordagem prática para o tratamento de conteúdo e interface em ambientes informacionais digitais. Rio de Janeiro: LTC, 2011.

SHNEIDERMAN, Ben. The Eight Golden Rules of Interface Design. Disponível em <https://www.cs.umd.edu/users/ben/goldenrules.html>. Acesso em 20 jul. 2015.