Interface Homem Computador (IHC)

Transcrição

1 Universidade Federal de Alagoas (UFAL) Campus Arapiraca Interface Homem Computador (IHC) Interação Humano Computador 04 - Alexandre de Andrade Barbosa alexandre.barbosa@arapiraca.ufal.br Alexandre de Andrade Barbosa alexandre.barbosa@arapiraca.ufal.br 1/ 33

2 Objetivos Prototipação de interface Objetivos Definir diferentes tipos de protótipo Apresentar técnicas e ferramentas para a criação de protótipos Alexandre de Andrade Barbosa alexandre.barbosa@arapiraca.ufal.br 2/ 33

3 O que é um protótipo? Alexandre de Andrade Barbosa 3/ 33

4 O que é um protótipo? Um protótipo é uma representação limitada de um design que permite aos usuários interagir com ele e explorar a sua conveniência Preece, Rogers e Sharp, 2005 Alexandre de Andrade Barbosa alexandre.barbosa@arapiraca.ufal.br 4/ 33

5 O que é um protótipo? Protótipos são versões incompletas de um produto que se deseja investigar Desenvolvedores de software tendem a imaginar protótipos como versões implementadas e executáveis do sistema Diferentes abordagens de prototipação podem ser adotadas, muitas não necessitam de versões implementadas Alexandre de Andrade Barbosa alexandre.barbosa@arapiraca.ufal.br 5/ 33

6 Para que prototipar? Diferentes aspectos do produto podem ser observados para cada protótipo criado (ex. resistência, aparência, funções, outros) Protótipos podem ser criados para: Alexandre de Andrade Barbosa 6/ 33

7 Para que prototipar? Diferentes aspectos do produto podem ser observados para cada protótipo criado (ex. resistência, aparência, funções, outros) Protótipos podem ser criados para: discutir idéias; propor alternativas; descobrir soluções para problemas conhecidos descobrir problemas que não eram conhecidos; outros. O objetivo é possibilitar aos usuários experiência direta com a interface A experiência possibilita o julgar a usabilidade do sistema Alexandre de Andrade Barbosa alexandre.barbosa@arapiraca.ufal.br 7/ 33

8 Prototipação Diferentes níveis de fidelidade de protótipo podem ser utilizados: baixa-fidelidade (tradicional) média-fidelidade (recente) alta-fidelidade (tradicional) Alexandre de Andrade Barbosa 8/ 33

9 Prototipação: baixa fidelidade Protótipos de baixa-fidelidade são representações que não se assemelham em muitos aspectos ao produto final Prototipação do primeiro mouse D. Engelbert e seu invento (o mouse) Alexandre de Andrade Barbosa alexandre.barbosa@arapiraca.ufal.br 9/ 33

10 Prototipação: baixa fidelidade O objetivo da criação de protótipos de baixa fidelidade é criar rapidamente e com poucos recursos uma descrição da interface, ainda no início do desenvolvimento Para a criação de protótipos de baixa fidelidade são (normalmente) utilizados: Papel e caneta Skecthes (rascunhos) Mockups (modelos) Storyboards (descrição de cenários) Alexandre de Andrade Barbosa alexandre.barbosa@arapiraca.ufal.br 10/ 33

11 Prototipação: baixa fidelidade Protótipo de baixa fidelidade da ferramenta SMILE (AGUIAR, 2007) Alexandre de Andrade Barbosa 11/ 33

12 Prototipação: baixa fidelidade Protótipo de baixa fidelidade (Storyboard) Alexandre de Andrade Barbosa 12/ 33

13 Prototipac a o de interface Exercı cios, Resumo e Refere ncias Projeto de interac a o com o usua rio: Prototipac a o Prototipac a o: baixa fidelidade Proto tipo de baixa fidelidade para uma aplicac a o em celular Alexandre de Andrade Barbosa alexandre.barbosa@arapiraca.ufal.br 13/ 33

14 Exercício Prototipação de interface Crie um protótipo de baixa fidelidade para uma aplicação para um celular Descrição da aplicação em uma folha (Nome e objetivo) Protótipo separado da descrição Tempo: 20 min. Auxilo: PDFs externos com exemplos de mockups Alexandre de Andrade Barbosa alexandre.barbosa@arapiraca.ufal.br 14/ 33

15 Prototipação: alta fidelidade Protótipos de alta-fidelidade são representações próximas da interface final O objetivo da criação de protótipos de alta fidelidade é investigar a interação com o usuário em uma interface próxima a versão final Para a criação de protótipos de alta fidelidade são (normalmente) utilizados: Ferramentas específicas Linguagens de programação Alexandre de Andrade Barbosa alexandre.barbosa@arapiraca.ufal.br 15/ 33

16 Prototipação: alta fidelidade Inicialmente pode-se imaginar que criar protótipos de alta fidelidade é melhor que os de baixa fidelidade Cada nível de fidelidade adotado permite investigação de aspectos diferentes A prototipação de alta fidelidade possui como desvantagens: o tempo empregado na criação do protótipo é muito maior que na baixa fidelidade; aspectos menos relevantes podem ser focados; usuários podem imaginar que o sistema já está pronto; desenvolvedores podem não quere alterar algo que foi criado durante horas para o protótipo; outros. Alexandre de Andrade Barbosa alexandre.barbosa@arapiraca.ufal.br 16/ 33

17 Prototipação: alta fidelidade Interface da ferramenta SMILE (AGUIAR, 2007) Alexandre de Andrade Barbosa 17/ 33

18 Prototipação: média fidelidade Uma vez que: protótipos de baixa fidelidade não possuem muitos aspectos do produto final protótipos de alta fidelidade precisam de muito tempo para serem criados Criou se como alternativa a média fidelidade, com objetivo de unir as vantagens das outras duas formas de prototipagem Alexandre de Andrade Barbosa alexandre.barbosa@arapiraca.ufal.br 18/ 33

19 Prototipação: média fidelidade Protótipos de média-fidelidade agregam características de baixa-fidelidade e de alta-fidelidade Um conjunto limitado de funções é criado de forma rápida para investigar cenários específicos Objetivos: Possibilitar a definição da UI em etapas inicias Representar a UI de forma barata e simples Fornecer apoio para o usuário utilizar a interface de forma interativa Para a criação de protótipos de média fidelidade são (normalmente) utilizados: Ferramentas específicas Alexandre de Andrade Barbosa alexandre.barbosa@arapiraca.ufal.br 19/ 33

20 Prototipação: média fidelidade Protótipo de média fidelidade da ferramenta SMILE (AGUIAR, 2007) Alexandre de Andrade Barbosa 20/ 33

21 Prototipação: ferramentas Atividade prática com ferramenta Alexandre de Andrade Barbosa 21/ 33

22 Prototipação Relação de tempo e fidelidade da prototipação Alexandre de Andrade Barbosa alexandre.barbosa@arapiraca.ufal.br 22/ 33

23 Exercício Prototipação de interface Crie um protótipo de média fidelidade para uma aplicação desktop Descrição da aplicação em uma folha (Nome e objetivo) Protótipo será executado no computador Tempo: 20 min. Auxilo: Ferramenta Alexandre de Andrade Barbosa alexandre.barbosa@arapiraca.ufal.br 23/ 33

24 Prototipação: simulação Com o intuito de possibilitar experiência da utilização do sistema em momentos iniciais do desenvolvimento, são utilizadas técnicas de simulação As formas de prototipação com simulação mais conhecidas são: Prototipação Máqico de Oz Prototipação em vídeo (descrição de cenários) Alexandre de Andrade Barbosa alexandre.barbosa@arapiraca.ufal.br 24/ 33

25 Prototipação: simulação Prototipação Máqico de Oz - consiste em simular os passos do usuário na utilização da interface É possível adotar essa técnica de forma que o usuário perceba ou não a existência de um Mágico de Oz Quando o usuário não pode perceber a existência do Mágico, o software deve enviar os dados para processamento de um humano em um outro terminal e então retornar as respostas adequadas O Mágico de Oz (Once Upon a Time, 2014) Alexandre de Andrade Barbosa alexandre.barbosa@arapiraca.ufal.br 25/ 33

26 Prototipação: simulação Prototipação Máqico de Oz Vídeos externos (UFSCar) (UFSCar) Alexandre de Andrade Barbosa 26/ 33

27 Exercício Prototipação de interface Realize a simulação Mágico de Oz com um integrante de outra equipe utilizando a aplicação prototipada em exercíco anterior Objetivo: realizar o processo de simulação e verificar as impressões posteriores Atividade: solicite que o usário efetue duas ações em sua aplicação Tempo: 10 min. Alexandre de Andrade Barbosa alexandre.barbosa@arapiraca.ufal.br 27/ 33

28 Exercício Prototipação de interface Discussão da atividade anterior O usuário identificou a funcionalidade da ferramenta? O projeto que a equipe desenvolveu foi adequado para o usuário (dúvidas, erros,...)? Qual o principal aprendizado que o protótipo trouxe (elementos adequados vs. inadequados)?... Alexandre de Andrade Barbosa alexandre.barbosa@arapiraca.ufal.br 28/ 33

29 Prototipação: simulação Prototipação em vídeo - consiste em descrever um cenário exibindo as funcionalidades do sistema atráves de cenas em vídeo É mais uma forma de descrição de cenários Vídeos externos (Sight) O vídeo sight é uma crítica ao excesso de gamificação Alexandre de Andrade Barbosa alexandre.barbosa@arapiraca.ufal.br 29/ 33

30 Exercício Prototipação de interface Crie uma simulação em vídeo como atividade de prototipação de um sistema a sua escolha Alexandre de Andrade Barbosa alexandre.barbosa@arapiraca.ufal.br 30/ 33

31 Resumo Prototipação de interface Resumo Protótipos são versões incompletas de um produto que servem para investigar um ou mais aspectos Diferentes níveis de fidelidade podem ser adotados na prototipação Ferramentas distintas são empredadas no desenvolvimento de um prototipo (ex. papel e caneta, ferramentas para rascunho de interface, outras) Prototipos podem ser simulados (ex. em vídeo) Alexandre de Andrade Barbosa alexandre.barbosa@arapiraca.ufal.br 31/ 33

32 Leituras recomendadas Preece, Rogers e Sharp Design de interação Seção Introdução Seção Prototipação e construção Alexandre de Andrade Barbosa alexandre.barbosa@arapiraca.ufal.br 32/ 33

33 Perguntas? Alexandre de Andrade Barbosa Alexandre de Andrade Barbosa 33/ 33