usabilidade de interfaces - parte 3
TRANSCRIPT
Como interfaces não planejadas podem afetar o resultado final de um projeto?
Antes da Prototipação
Discutir sobre as possíveis ideias e soluções
Protótipo
Surge como a pedra angular (algo fundamental) do processo de criação, é graças a ele que podemos imaginar o dispositivo ou a experiência que se está tentando criar.
• É muito difícil descrever um aparelho que não existe. Como explicar o que é um iPod a alguém que nunca o viu?
Para que protótipos?
Quando se constroem protótipos de diversos tamanhos, com formas e funcionalidades diferentes, é mais fácil transmitir o que se tem em mente e tirar conclusões.
Eles não apenas comunicam idéias, como também persuadem o cliente e o convence a aceitar a proposta.
Qual o momento da prototipagem?
Conseguimos com um protótipo
Obter retorno sobre desenho mais depressa Poupar tempo de desenvolvimento e dinheiro Experimentar alternativas de desenho Resolver problemas antes de escrever o código Manter desenho centrado nos usuários
Quais tipos de protótipos iremos estudar?
Cenários Storyboards Protótipos de baixa fidelidade e de alta
fidelidade Wizard of OZ Wireframes
Cenários
O que é um cenário?
Um meio de representar, analisar e planejar como um sistema computacional pode causar impacto nas atividades e experiências do usuário.
É uma descrição em geral narrativa, mas também em outro formatos (storyboards, cartoons anotados, maquetes em vídeos, protótipos em script), que as pessoas fazem e experimentam conforme elas imaginam ou tentam fazer uso de sistemas e aplicações.
Exemplo de um cenárioJoão dirigiu-se à máquina de vender bilhetes de metrô, escolheu o seu destino carregando no botão físico da máquina correspondente área 1, depois selecionou um bilhete de ida e volta carregando na opção correspondente.
Quando lhe apareceu um diálogo para confirmar a informação introduzida, o João carregou no botão <OK>e o sistema passou para a tela de pagamento, selecionando o João a opção de pagar com débito automático na conta corrente.
O João passou o cartão do banco na ranhura e introduziu a senha correspondente. Finalmente, o João carregou no botão <Recibo> para receber um recibo da sua operação.
ED
Componentes de um cenário
Nome – um rótulo curto para referência a um cenário específico.
Descrição – em geral texto ilustrando uma situação específica.
Lógica Essencial – com relação ao usuário, representações e ações que devem estar disponíveis ao usuário, independentemente de aspectos relacionas à implementação, com relação ao sistema, informações necessárias para que o sistema funcione como requerido.
Passos Genéricos – sequência de passos que o usuário realizaria, independentemente de aspectos de implementação.
Passos Específicos – sequência de ações do usuários seguidas de feedback do sistema, considerando possibilidade de ações erradas do usuário.
ED
Exemplo do livro de Rocha (2003)
Nome: Iniciando o Jogo da Fábrica: atividade síncrona à distância baseada em sistema computacional
Descrição: Funcionários da fábrica X conectam-se via Internet e iniciam o Jogo da Fábrica: uma simulação de conceitos e processo de manufatura com objetivo de formação.
Lógica Essencial: (usuário) Cada usuário em seu local de trabalho, ao conectar-se
ao sistema, vê a tela inicial do jogo e informações sobre a conexão dos demais participantes, cada um ocupando um célula da linha de manufatura representada no jogo. Cada usuário saúda os demais que estão conectados a distância, pelo canal de comunicação, aguardando início do jogo.
(sistema) Informação necessária para conexão: IP da máquina servidora.
Passos Genéricos: Buscar opção de conexão no menu. Entrar com dados solicitados.
Passos Específicos: Selecionar “Entrar com IP do servidor”.
ED
Analisando o uso de cenários
Permitem desenvolver e explorar o espaço de design com um mínimo de comprometimento.
Permitem avaliar a interface inicial sem custos de construir um modelo concreto.
Como não há interação com dados reais, ele não permite flexibilidade para o usuário, pois os usuários não podem se mover livremente pelo sistema.
ED
Em que momento do processo surgem os cenários?
ED
Storyboards
Storyboard no cinema Os storyboards surgiram originalmente do
cinema, para se ter uma idéia da cena.
ED
Storyboard no cinema
Neles se combinam imagens e textos para complementar as informações das cena.
As setas ajudam a compreender as ações.
ED
Os storyboards das interfaces
Os storyboards são os desenhos de tela e as conexões entre elas.
Eles podem ser apresentados a usuários potenciais que tentam explicar o que pensam ser possível fazer e efeitos esperados de suas ações.
Desta maneira, eles complementam os cenários.
Os storyboards das interfaces
São usados para especificar as ações que os usuários podem efetuar para resolver cenários de utilização.
Desta maneira, eles complementam os cenários.
Projeto IBIMM
Storyboard para interface
Elementos do sistema e suas ligações começam a ser organizados
Usuários conseguem avaliar rapidamente se os passos estão levando ao lugar desejado.
Storyboard para interface Oferecem uma série de
esboços que ilustram os detalhes e as interações importantes. Os detalhes irrelevantes são suprimidos.
Ex. de storyboard (mais elaborado)
ED
Protótipos de baixa fidelidade
Protótipos de Baixa Fidelidade
Fidelidade refere-se ao nível de detalhe. É uma representação ‘artística’, um esboço, com
muitos detalhes omissos Vantagem: não tomam muito tempo para seu
desenvolvimento e não requer equipamento dispendioso.
Protótipos de Baixa Fidelidade
são construídos, na maioria das vezes, em papel e podem ser testados com usuários reais, assim, permitem demonstrar o comportamento da interface muito cedo no desenvolvimento
Protótipos de Baixa Fidelidade
Seu uso pode aumentar a qualidade das interfaces, pois permitem várias avaliações pelo usuário em pouco tempo e o retorno imediato.
Protótipos de Baixa Fidelidade
Com eles, os usuários são obrigados a pensar no conteúdo em vez da aparência, uma vez que somente são realizados esboços que servem como protótipos
Protótipos Físicos de Baixa Fidelidade (Gadgets)
Neste tipo de protótipo, as dimensões e o aspecto são importantes, embora ainda possam ser feitos com materiais simples como cartolina e massa de modelar.
Protótipos Físicos de Baixa Fidelidade (Gadgets)
Protótipos de Alta Fidelidade
Protótipos de Alta Fidelidade
Assemelham-se ao produto final. Neles os detalhes são importantes, pois simulam todas as funcionalidades do sistema.
Wearable computer - Eurotech
Protótipos de Alta Fidelidade A apresentação formal
sugere um “produto acabado”. Além de visualizar as conexões, conseguimos visualizar o design: o arranjo gráfico, o uso das cores, os tipos, etc.
Soft-shell mobile phone –http://www.nec-design.co.jp/showcase/
Protótipos de Alta Fidelidade
Acarreta mais tempo e dinheiro investido em sua confecção do que no protótipo de baixa fidelidade
P-ISM :Pen-style Personal Networking Gadget Package
http://www.nec-design.co.jp/showcase/
Wizard of Oz
Wizard of Oz
Permite que tecnologias que ainda não existem sejam avaliadas por meio do uso de uma pessoa que simula a resposta de um sistema.
Muitas vezes, o usuário não sabe que as respostas estão sendo geradas por uma pessoa e não um computador.
Com isto, esta técnica permite testar conceitos difíceis de interfaces e sugerir funcionalidades antes que o sistema seja implementado.
ED
Como funciona o método Wizard of Oz?
Uma pessoa – que será o “wizard” – senta em um ambiente separado e observa as ações dos usuários e, então, simula as respostas do sistema em tempo real.
O uso do Wizard of Ozpode
Buscar informações sobre a natureza da interação.
Testar quais comandos e mecanismos melhor representam a interação, de maneira que os esforços subsequentes de desenvolvimento sejam direcionados apropriadamente.
Testar a interação de um dispositivo antes de construir um modelo funcional.
Descobrir os problemas que as pessoas terão com esta interface.
Investigar aspectos visuais dos produtos.
ED
Wireframes
Projeto IBIMM
Wireframe de Baixa Fidelidade
Projeto IBIMM
Wireframe de Alta Fidelidade
Wireframe e Design da Página
O wireframe não limita o trabalho de um designer, mas apenas orienta quanto as informações e proposta de peso de importância ou relevância de cada item.
Veja alguns exemplos de wireframes e design da página.
Projeto Concurso Quiz Terra Sonora
Wireframe
Projeto Concurso Quiz Terra Sonora
Design
Projeto Concurso Quiz Terra Sonora
Wireframe
Projeto Concurso Quiz Terra Sonora
Design
Projeto Hatalé (www.hatale.ca)
Wireframe
Projeto Hatalé (www.hatale.ca)
Design
Projeto Como en Casa (www.comoencasa.ca)
Wireframe
Projeto Como en Casa (www.comoencasa.ca)
Design
Tools Cloud Wirefrme.cc
https://wireframe.cc/
