A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

JÁ NÃO VIRIA TUDO DECIDO? Sim, porém nem tudo foi prototipado, padronizado ou componentizado NÃO POSSO CUSTOMIZAR PADRÕES NO MEU CASO? - Teremos retrabalho.

Apresentações semelhantes


Apresentação em tema: "JÁ NÃO VIRIA TUDO DECIDO? Sim, porém nem tudo foi prototipado, padronizado ou componentizado NÃO POSSO CUSTOMIZAR PADRÕES NO MEU CASO? - Teremos retrabalho."— Transcrição da apresentação:

1

2

3 JÁ NÃO VIRIA TUDO DECIDO? Sim, porém nem tudo foi prototipado, padronizado ou componentizado NÃO POSSO CUSTOMIZAR PADRÕES NO MEU CASO? - Teremos retrabalho quando algum padrão for atualizado - Fazer coisas parecidas de formas diferentes confunde e baixa a qualidade da experiência ISSO DEVERIA SER PREOCUPAÇÃO MINHA? SIM E NÃO. Até certo ponto os padrões devem garantir consistência, mas sempre teremos níveis específicos a tratar

4

5 comusabilidadeconseguimo sfazerascoisasmaisrapidoco mmenoserrosecommaissati sfacaoeumaqualidadealcanc adaatravesdemecanismosq uemuitasvezesnosparecem apenasdetalhesmasquefaze mmuitafaltaquandonaotemo s

6 Com usabilidade, conseguimos fazer as coisas mais rápido, com menos erros e com mais satisfação. É uma qualidade alcançada através de mecanismos que muitas vezes nos parecem apenas detalhes, mas que fazem muita falta quando não temos.

7 Quando perguntamos aos usuários o que eles queriam que o Office tivesse, 9 de cada 10 vezes, eles citam algo que já está no produto, eles só não conseguem encontrar Quando perguntamos aos usuários o que eles queriam que o Office tivesse, 9 de cada 10 vezes, eles citam algo que já está no produto, eles só não conseguem encontrar Chris Capossela, Microsoft VP Chris Capossela, Microsoft VP

8 O Word já foi bem básico, porém teve sucesso nas questões primárias Nas evoluções foram adicionados mecanismos avançados como botão direito, DragnDrop e combinações de teclas, que melhoram a produtividade Evoluiu tanto que a metáfora foi reprojetada

9

10 Gera percepção Gera percepção Impressão do usuário Impressão do usuário Conquista o usuário Conquista o usuário Dá vontade de usar Dá vontade de usar Apelo visual, Design, IPod... Apelo visual, Design, IPod... Mantém o usuário satisfeito Mantém o usuário satisfeito Números de Erros Números de Erros Performance Performance Cobertura de tarefas Cobertura de tarefas Gera referência Gera referência

11 Novos SkinsOriginal Qual skin é melhor de usar?

12 ALGO USÁVEL É Fácil de aprender Fácil de aprender Fácil de lembrar Fácil de lembrar Eficiente Eficiente Confiável Confiável Traz satisfação Traz satisfação 2 FORMATO DA INTERAÇÃO eventos, comportamentos, estados,... Projetar com usabilidade inclui 1 APRESENTAÇÃO estrutura, design, informações, ações, … É PENSAR EM: o que, onde e como apresentar o que, onde e como apresentar como interagir (usuário) como interagir (usuário) como se comportar (sistema) como se comportar (sistema)

13

14 Produto Padrão Sistemas Internos

15 Ter uma forma única para acessar os produtos e interagir com a Datasul Central de Acessos Central de Acessos Login Unificado Login Unificado SSO - Integração com SO SSO - Integração com SO Suporte onLine Suporte onLine Datasul By You

16 Acessar rápida e facilmente as funcionalidades Seletor de Aplicativos Web ou Não Menus Rápidos e Personalizáveis Troca de Empresa na sessão Datasul By You

17 1 Ter a atenção gerenciada 2 Decidir 3 Ser conduzido nos processos de negócio Desktop de trabalho orientado a papéis e tarefas 1 Monitoramento 2 Detalhamento 3 Ação 4 Colaboração Datasul By You

18 Framework: Reuso da metáfora, templates e tudo que independe de contexto Projetos Aproveitam itens reusáveis ou geram itens reusáveis pro framework

19

20 ORIENTAÇÕES, PADRÕES E EXEMPLOS VERSÃO 1.0 Ricardo Santos

21

22 Somos contra 800x600, mas… Somos contra 800x600, mas… Base de clientes (40% 800x600) Base de clientes (40% 800x600) Vendedores, projetores Vendedores, projetores 1024 com área lateral restam 800x com área lateral restam 800x600 EMS 640 X 480 EMS 640 X 480

23

24 Alinhamentos e ancoramentos com layoutConstraints Alinhamentos e ancoramentos com layoutConstraints Agrupamentos (áreas da interface) Agrupamentos (áreas da interface) Falta de margens nos containers e entre itens Falta de margens nos containers e entre itens

25

26 Alinhar itens do cabeçalho à esquerda Alinhar itens do cabeçalho à esquerda Agrupadores de cabeçalho Agrupadores de cabeçalho Filtros (próximo slide) Filtros (próximo slide) Cabeçalho duplicado Cabeçalho duplicado Altura do cabeçalho Altura do cabeçalho

27

28 Filtros rápidos (checkboxes) Filtros rápidos (checkboxes) Filtros simples que não encontram partes de um texto. Filtros simples que não encontram partes de um texto. Filtros de períodos não são exibidos no cabeçalho dando a ilusão de que a consulta corrente reflete toda a base de dados, porém o filtro de período pode estar ocultando muita informação. Filtros de períodos não são exibidos no cabeçalho dando a ilusão de que a consulta corrente reflete toda a base de dados, porém o filtro de período pode estar ocultando muita informação. Filtros avançados, vários modelos Filtros avançados, vários modelos

29

30 Hierarquia da informação Hierarquia da informação Organização da interface (agrupamento por localização) Organização da interface (agrupamento por localização) Melhor Orientação Melhor Orientação

31 Diferenciação das ações botões (focal, normais) e Ações Relacionadas Diferenciação das ações botões (focal, normais) e Ações Relacionadas Botão ou ação focal com clique, Enter e duplo clique Botão ou ação focal com clique, Enter e duplo clique Relação ações da folder (botões) e ações de entidades internas (links em grids) Relação ações da folder (botões) e ações de entidades internas (links em grids)

32 Portlets que não exploram ou se adaptam aos estados e tamanhos possíveis, por vezes ficando vazios e outras com muitas barras de rolagem. Portlets que não exploram ou se adaptam aos estados e tamanhos possíveis, por vezes ficando vazios e outras com muitas barras de rolagem. Sempre que não houver dados nos portlets informar o usuário para verificar as configurações do portlet para identificar inconsistência dos dados atuais. Sempre que não houver dados nos portlets informar o usuário para verificar as configurações do portlet para identificar inconsistência dos dados atuais. Ao selecionar uma série de um gráfico e clicar em detalhar, a consulta que abre deve trazer filtro aplicado. Ao selecionar uma série de um gráfico e clicar em detalhar, a consulta que abre deve trazer filtro aplicado. Vários estão com o cabeçalho vazio Vários estão com o cabeçalho vazio Portlets sem atalhos além do detalhar (ações possíveis) Portlets sem atalhos além do detalhar (ações possíveis)

33 I18n - Layout apresenta campos sem espaçamento (grudados). Utilizar o component formItem com label interno para posicionar em cima do campo I18n - Layout apresenta campos sem espaçamento (grudados). Utilizar o component formItem com label interno para posicionar em cima do campo Falta de margens na esquerda e topo do form (20px) Falta de margens na esquerda e topo do form (20px) Pista de obrigatoriedades(*) Pista de obrigatoriedades(*) Falta de agrupadores de conteudo (groupContent) Falta de agrupadores de conteudo (groupContent) Falta de Validadores (modelo CRUD) Falta de Validadores (modelo CRUD) Falta de Máscaras Falta de Máscaras Falta de painél agrupador (ao redor do form) Falta de painél agrupador (ao redor do form)

34 Falta de itens definidos (gridtools, painel agrupador com total de registros e nome da entidade, seleção múltipla com checkboxes, Ordenar não funciona Falta de itens definidos (gridtools, painel agrupador com total de registros e nome da entidade, seleção múltipla com checkboxes, Ordenar não funciona Ordenar coluna do Grid em bases grandes, leva muito tempo e não tem feedback de carga, só trava e retorna depois do tempo de carga total. O mesmo ocorre com o scroll que gera nova carga no servidor. Ordenar coluna do Grid em bases grandes, leva muito tempo e não tem feedback de carga, só trava e retorna depois do tempo de carga total. O mesmo ocorre com o scroll que gera nova carga no servidor. As ordens das colunas do grid nas buscas e consultas não estão sendo salvas. As ordens das colunas do grid nas buscas e consultas não estão sendo salvas. Falta tratamento de botão direito do mouse Falta tratamento de botão direito do mouse

35 Falta de tratamento de duplo clique e teclado (Enter/ESC) e botão direito. Falta de tratamento de duplo clique e teclado (Enter/ESC) e botão direito. Painéis internos não são maximizáveis (resolução) Painéis internos não são maximizáveis (resolução) Não há workflows entre os papéis e quando há, não temos feedback das ações (via toaster) Não há workflows entre os papéis e quando há, não temos feedback das ações (via toaster) Interface permite ao usuário executar ações que não estão nas suas metas (ex.: Técnico alterar OMs) Interface permite ao usuário executar ações que não estão nas suas metas (ex.: Técnico alterar OMs)

36

37

38

39

40 Windows Windows Macintosh Macintosh Gnome Gnome Web Web Adobe Flex/Flash Adobe Flex/Flash Vantagens: Vantagens: usuários já familiarizados usuários já familiarizados guia de estilo guia de estilo ferramentas para prototipação e implementação ferramentas para prototipação e implementação VEJA SLIDES DE REFERÊNCIA

41

42 Gato Gato Maracujá Maracujá Elefante Elefante Semblante Semblante Ocorrência Ocorrência Definição Definição Oliveira Santos Goiabada Cabo Domingo Rádio Origami Vassoura Pastel Amarelo Distância Som

43 Gato Gato Cachorro Cachorro Maracujá Maracujá Arquitetura Arquitetura Amarelo Amarelo Semblante Semblante Domingo Domingo Sábado Sábado Origami Origami Caixa Documento Oliveira Distância Ocorrência Santos Goiabada Cabo Rádio Som Vassoura Cobra Elefante Pastel Velocidade Definição

44 DECORARECONHECE

45 Os rótulos (labels) devem casar com a maneira que os usuários pensam sobre a tarefa Os rótulos (labels) devem casar com a maneira que os usuários pensam sobre a tarefa Dê algum retorno - o usuário precisa saber o que uma operação realmente fez…. ou está fazendo para ações demoradas Dê algum retorno - o usuário precisa saber o que uma operação realmente fez…. ou está fazendo para ações demoradas Usuários vão errar, tente cercá-lo com mecanismos como voltar, máscaras, valores default, auto seleções Usuários vão errar, tente cercá-lo com mecanismos como voltar, máscaras, valores default, auto seleções

46 Informação com uma grande mudança na tela tem maior probabilidade de ser lida Informação com uma grande mudança na tela tem maior probabilidade de ser lida Informação próxima de onde o usuário está lendo também Informação próxima de onde o usuário está lendo também Sinais acústicos não podem ser ignorados tão facilmente quanto sinais visuais (faca de dois gumes – as vezes queremos poder ignorar as coisas) Sinais acústicos não podem ser ignorados tão facilmente quanto sinais visuais (faca de dois gumes – as vezes queremos poder ignorar as coisas)

47 Gerando interfaces na maneira que seu usuário está acostumado o deixará mais satisfeito Gerando interfaces na maneira que seu usuário está acostumado o deixará mais satisfeito menor frustração inicial e assim menor ansiedade menor frustração inicial e assim menor ansiedade aprendizagem mais rápida aprendizagem mais rápida reforça noção do empréstimo reforça noção do empréstimo Convenções passaram pelo teste do tempo, qualquer inovação ainda não, teremos problemas difíceis de prever Convenções passaram pelo teste do tempo, qualquer inovação ainda não, teremos problemas difíceis de prever Norman: Norman: Efeito de transferência Efeito de transferência Dialetos e Estereótipos da população Dialetos e Estereótipos da população

48

49 USE TELAS SIMILARES PARA FUNÇÕES SIMILARES MESMO QUE NÃO SEJA UMA CONVENÇÃO EXTERNA Label CADA VEZ DE UM JEITO??

50 Interações Importantes Merecem Mais Atenção Criar Novas Interações 20% 80% Interações Comuns Não reinventar Usar Templates

51 Aplique Paretto - Destacar os 20% mais importantes, ocultar o resto Itens nas Telas e Espaço ocupado Resultado 20% 80% 20%

52

53

54 Isto gera interfaces menos carregadas por não termos tudo na tela ao mesmo tempo

55 Modelo do movimento humano, que prevê que o tempo necessário para se mover de uma posição inicial para um posição meta, é uma função da distância da meta e do tamanho da meta (Paul Fitts, 1954). Modelo do movimento humano, que prevê que o tempo necessário para se mover de uma posição inicial para um posição meta, é uma função da distância da meta e do tamanho da meta (Paul Fitts, 1954). Teste na web: Teste na web: TAMANHO INFINITO MENOS MIRA MAIS MIRA

56

57

58 Controles freqüentemente usados visíveis, e fáceis de acessar; Controles freqüentemente usados visíveis, e fáceis de acessar; Esconda ou encolha controles que são usados com menor freqüência. Esconda ou encolha controles que são usados com menor freqüência.

59 MENOS É MAIS PENSE POR PAPEL

60 Formulários preenchidos com valores padrão Formulários preenchidos com valores padrão Responsabilidades, ação é do usuário ou do sistema? Responsabilidades, ação é do usuário ou do sistema? Guiar o usuário em processos complexos wizards. Guiar o usuário em processos complexos wizards. Crie formas simples e avançadas (apenas se necessário) de fazer as coisas Crie formas simples e avançadas (apenas se necessário) de fazer as coisas

61 USABILIDADE DESIGN TECNOLOGIA

62 Não há certo ou errado, tudo depende das premissas e critérios que queremos atender

63

64 Apple MAC OS - Apple IPod IPhone Apple MAC OS - Apple IPod IPhone MS Windows Vista - Office MS Windows Vista - Office Google - Gmail Google - Gmail Nintendo Wii… Nintendo Wii…

65 Há outros… google it! m m

66 Flex ( e componentes além do básico) =sn610&viewName=Adobe%20Exchange&avm=1 Flex ( e componentes além do básico) =sn610&viewName=Adobe%20Exchange&avm=1 Dia Mundial da Usabilidade – 03/11

67 Patterns e Guias Apple Microsoft Patterns e Guias Apple Microsoft Dia Mundial da Usabilidade – 03/11 Usabilidade e UI Design (Larry Constantine) (Jakob Nielsen) lity.html Usabilidade e UI Design (Larry Constantine) (Jakob Nielsen) lity.html Usabilidade e UI Design Usabilidade e UI Design

68 Livros Contextual Design: A Customer-Centered Approach to Systems Designs - Beyer, Hugh; Holtzblatt, Karen Writing Effective Use Cases - Cockburn, Alistair Software for Use: A Practical Guide to the Models and Methods of Usage-Centered Design - Constantine, Larry; Lockwood,A.D. Usability Engineering - Nielsen, Jakob The Usability Engineering Life Cycle - Mayhew, Deborah Institutionalization of Usability: A Step-by-Step Guide - Eric Schaffer

69

70 - Portlets não exploram ou se adaptam aos estados e tamanhos possíveis, por vezes ficando vazios e outras com muitas barras de rolagem. - Sempre que não houver dados nos portlets informar o usuário para verificar as configurações do portlet para identificar inconsistência dos dados atuais. - Ao selecionar uma série de um gráfico e clicar em detalhar, a consulta aberta não vem com o filtro avançado. - Várias interfaces estão com o cabeçalho de portlet vazio.- Portlets não exploram ou se adaptam aos estados e tamanhos possíveis, por vezes ficando vazios e outras com muitas barras de rolagem. - Sempre que não houver dados nos portlets informar o usuário para verificar as configurações do portlet para identificar inconsistência dos dados atuais. - Ao selecionar uma série de um gráfico e clicar em detalhar, a consulta aberta não vem com o filtro avançado. - Várias interfaces estão com o cabeçalho de portlet vazio.


Carregar ppt "JÁ NÃO VIRIA TUDO DECIDO? Sim, porém nem tudo foi prototipado, padronizado ou componentizado NÃO POSSO CUSTOMIZAR PADRÕES NO MEU CASO? - Teremos retrabalho."

Apresentações semelhantes


Anúncios Google