ENGENHARIA DE USABILIDADE E INTERFACES

Transcrição

1 Unidade III Desenvolvimento de Projetos de IHC Luiz Leão

2 Conteúdo Programático desta Unidade Técnicas de Concepção Técnicas de Modelagem

3 Objetivo Demonstrar técnicas destinadas a implementar as especificações para a interface e a usabilidade.

4 Projeto

5 Técnicas de Concepção Geração e Organização de Ideias: Brainstorm Card Sorting (Arranjo de Cartas) Diagrama de Afinidade Concepção: Narrativa Gráfica (Storyboard) Maquetes Prototipagem Rápida Baixa Fidelidade Alta Fidelidade

6 Brainstorm Tempestade de Ideias Visa a geração de ideias em grupo Pessoas se reúnem para resolver um problema, ou para criar novos sistemas Permite a melhor compreensão do problema, e da solução No mínimo 2 pessoas e no máximo 12 pessoas Etapas: 1 - Geração de ideias 2 Crítica das ideias Deve existir uma pessoa que comande a reunião Registrar as ideias

7 Brainstorm Tempestade de Ideias

8 Card Sorting Arranjo de Cartas Visa descobrir o modelo mental dos usuários em relação aos itens de informação para uma aplicação Analista descreve os itens em fichas de papel e espalha sobre a mesa Um usuário é convidado para organizar em grupos, e nomear os grupos Não é necessário mais que seis sessões individuais Os resultados são combinados, se necessário estatisticamente

9 Card Sorting Arranjo de Cartas

10 Diagrama de Afinidade É utilizado para organizar uma grande quantidade de itens em grupos lógicos Projetistas e usuários alvo trabalham juntos para obter um consenso sobre a organização de itens Os diagramas de afinidade são usados geralmente para identificar e agrupar as funções de um produto em desenvolvimento

11 Diagrama de Afinidade

12 Storyboard Narrativa Gráfica É a representação das interações entre os usuários e o sistema em seu ambiente de trabalho Consiste do detalhamento de um cenário do sistema, através de uma sequência de desenhos. Os desenhos devem ser feitos em grandes folhas de papel e colocadas na parede de uma sala de reunião Os desenhos vão ser avaliados pelos usuários e especialistas, com base nos requisitos de usabilidade É necessário que o projetista descreva os acontecimentos desenhados

13 Storyboard Narrativa Gráfica

14 Storyboard Narrativa Gráfica

15 Maquetes Protótipos em Papel São usados para esclarecer e desenvolver requisitos específicos para a interface do programa Favorecem a concepção participativa bastar saber desenhar Permite simular e testar a interação com o usuário Proporciona a identificação precoce de problemas de usabilidade Ciclo de construção de maquetes: Conceito: Explorar diferentes linguagens gráficas nos vários aspectos conceituais e estruturas gráficas das telas Projeto das Preliminar das Telas: Definir o projeto inicial de cada tela Interação: Organizar uma estrutura de telas Projeto detalhado das telas: Possibilidades de elementos de arte, cores e estilo Teste de Telas: Testar e revisar as tela

16 Maquetes Protótipos em Papel

17 Prototipagem Rápida É a implementação de programas de software que simulem o sistema final com mais fidelidade que as maquetes de papel Permite obter um feedback mais fiel sobre os problemas e vantagens da interface em desenvolvimento Protótipos: Baixa fidelidade: Muitos aspectos a serem explorados Alta fidelidade: Muitos aspectos a serem validados

18 Prototipagem de Baixa Fidelidade São protótipos informatizados Esse protótipo podem ser validado por representantes de usuários em simulações de uso mais realista que maquetes de papel Porém é um pouco limitado no que diz respeito ao nível de detalhamento, conteúdo e aparência Pencil é uma ferramenta para modelagem de telas

19 Prototipagem de Baixa Fidelidade

20 Prototipagem de Alta Fidelidade É criado com ferramentas que proporcionam componentes de interface com aparência e comportamento parecidos com o pretendido Contam com um conteúdo de informação mais elaborado É possível obter medidas de usabilidade: Eficácia Eficiência Satisfação

21 Prototipagem de Alta Fidelidade Exemplo: Netbeans utilizando Swing, sem a construção das classes de negócio

22 Técnicas de Modelagem de Interface Conjunto de etapas para a definição de elementos concretos, partindo de elementos abstratos; Fase de refinamento do trabalho de concepção, gerando requisitos que serão usados no projeto de IHC.

23 Técnicas de Modelagem de Interface The Bridge Usage-centered Design

24 The Bridge Proposta por Tom Dayton em Essa abordagem baseia-se em uma sequência de sessões de projeto participativo, envolvendo usuários, engenheiros de usabilidade, engenheiros de software, programadores. De preferência todo o trabalho previsto deve ser realizado em um ou dois dias de reuniões em salas equipadas apenas de mesas, cadeiras, lápis, papel, cartões adesivos e desenhos de janelas préimpressos. Nelas, projetistas e usuários irão realizar a passagem ( The Bridge ) entre os requisitos de usabilidade e o projeto de uma interface.

25 The Bridge É mais direta e econômica que a abordagem centrada no uso, propondo poucas transformações, por meio das quais o modelo conceitual e definido a partir dos grandes componentes que compõem um projeto (Visão macro). Esta abordagem envolve três passagens principais: Fluxo de tarefas; Mapear os fluxos de tarefa em objetos da tarefa; Mapear objetos da tarefa em objetos de interfaces.

26 The Bridge Fluxo das Tarefas: É a forma de expressão dos requisitos do usuário As descrições nesta etapa se fazem em um alto nível de abstração, já que elas se referem aos objetivos dos usuários e não entram em detalhes sobre o sistema ou a interface. Nessa primeira etapa os projetistas e usuários realizam a definição de um novo fluxo de trabalho para o usuário de novo sistema.

27 The Bridge Fluxo das Tarefas: Este é descrito por um fluxograma apresentando blocos para o início, os processos e decisões e o resultado esperado do trabalho. As descrições nos blocos devem conter nomes, associados aos objetos e atributos manipulados pelos usuários, e verbos, associados às ações realizadas pelos usuários sobre tais objetos.

28 The Bridge Exemplo de Fluxo de Tarefa (Check in no Hotel)

29 The Bridge Objetos da Tarefa Os objetos de tarefa são as entidades com as quais os usuários irão realizar uma tarefa com o sistema (independentemente de sua interface). Uma vez validados, os fluxos de tarefas devem ser analisados visando a definição de classes de objetos de tarefa. Estas correspondem a classes de informação por meio das quais os usuários realizam suas tarefas. Elas não referem ainda a funções do novo sistema.

30 The Bridge Objetos da Tarefa Identificação da classe Descrições dos fluxos de tarefa Propriedades Atributos Componentes Ações Verbos da descrição dos fluxos de tarefas Relações de agregação entre objetos Desktop.

31 The Bridge Objetos da Tarefa

32 The Bridge Objetos da Interface Objetos da tarefa Identificação do objeto de tarefa Item em listas Apresentação de janela com suas informações Propriedades dos objetos da tarefa Texto Figuras Ícones Ações de objeto de tarefa Menu Barra de ferramentas Grupo de botões

33 The Bridge Objetos da Interface

34 Usage-centered Design Proposto Lary Constantine e Lucy Lockwood em 1999; Visa construir projetos de IHC centrados no uso do sistema; É mais detalhada que a The Bridget. Propõe um número maior de transformações e, principalmente, um estilo de concepção partindo dos pequenos componentes. No projeto centrado de uso, as decisões de projeto são baseadas em análises objetivas de modelos de usuários de tarefas, de conteúdos de interfaces. A abordagem está organizada em três etapas de modelagens: Papéis de usuários Casos de tarefas Arquitetura de interface e de navegação

35 Usage-centered Design

36 Usage-centered Design Papéis de Usuários O papel de usuário é definido como um tipo de usuário que apresenta necessidades, interesses, expectativas, comportamentos ou responsabilidades específicas em relação ao sistema.

37 Usage-centered Design Casos de Tarefa Envolve casos de uso essenciais ou casos de tarefa. São definidos como narrativas estruturadas e simplificadas de interação realizada pelo usuário desempenhando seu papel por meio do sistema.

38 Usage-centered Design Mapas de Casos de Tarefa Exemplo Especialização

39 Usage-centered Design Mapas de Casos de Tarefa Exemplo Extensão:

40 Usage-centered Design Mapas de Casos de Tarefa Exemplo Composição:

41 Usage-centered Design Mapas de Casos de Tarefa Exemplo Afinidade:

42 Estrutura de Conteúdos da Interface Estrutura de conteúdos capaz de apoiar os usuários quando estiverem desempenhando seus papéis nos casos de tarefa definidos no projeto. Podem ser: Modelo de contextos de interação Mapa de navegação entre contextos

43 Modelo de contextos de interação Espaços ou locais que devem estar equipados com as ferramentas e os materiais de que os usuários necessitam para a realização de suas tarefas. As regras gerais de mapeamentos são as seguintes: Os casos de tarefa correspondem a espaços de trabalho que serão associados a uma janela ou caixa de diálogo; Ferramentas representam as funções que processam dados e informações; Materiais representam esses dados e informações.

44 Modelo de contextos de interação As descrições nessa etapa da modelagem devem se referir aos componentes de interface abstratos. Assim, os autores propõem que nessa etapa se faça a construção de protótipos abstratos, espécies de maquetes feitas de componentes abstratos. Para os autores, Constantine e Lockwood, não é necessário, nem prático, tentar definir soluções de layout nessa etapa, o que será feito mais adiante, na etapa de projeto detalhado.

45 Estrutura de Conteúdos da Interface Mapa de navegação entre contextos: Um mapa de navegação, basicamente é um diagrama de transição de dados onde é representados por retângulos e flechas conectando espaços.

46 Considerações sobre o projeto IHC Características favoráveis das diversas técnicas de concepção de Interface Humano-Computador: Envolver soluções relacionadas aos aspectos essenciais da interface inicialmente; Prever a descrição de soluções em termos abstratos inicialmente, e detalhar progressivamente conforme o projeto avança; Prever transformações, representando com mapeamento entre aspectos de uma representação e outra; Prever diversas oportunidades para que tais definições sejam repartidas e validades pelos usuários.

47 Projetar Para Usuários Abordagem dominante Aplicação de teorias, leis e princípios gerais O Ergonomista/projetista atua em nome do usuário Propício para projetos genéricos O Ergonomista decide o que é melhor para o usuário Projetar Com Usuários Abordagem resultante de críticas ao "projeto para usuários" Ergonomia participativa Consideração com questões inerentes ao ser humano: ambições, crenças, emoções e outras Ergonomista atua como agente de mudança Abordagem apropriada para projetos identificados ou locais Os usuários decidem por si mesmos

48 A abordagem de projeto centrado no usuário, leva em conta o ser humano em cada etapa do desenvolvimento de um produto ou serviço. Tudo que o usuário experimenta deve ser resultado de uma decisão consciente da parte do projetista.