Mostrando postagens com marcador arquitetura de informação. Mostrar todas as postagens
Mostrando postagens com marcador arquitetura de informação. Mostrar todas as postagens

Minicurso de prototipação em papel na Jornada de Informática da UNESP-Bauru

A Faculdade de Ciências da Unesp, campus de Bauru, por meio do Departamento de Computação, promoverá a XII Jornada de Informática. O evento será realizado entre nos dias 21, 22, 23 de setembro na FunDeB (Fundação para o Desenvolvimento de Bauru) e no LEPEC (Laboratório de Ensino, Pesquisa e Extensão em Computação) situados no campus da Unesp de Bauru.

O objetivo da jornada é apresentar por meio de palestras e minicursos novas técnicas e metodologias desenvolvidas atualmente proporcionando a todos contato com novas tecnologias e a integração com o mercado de trabalho.

Eu estarei participando da Jornada juntamente com a Livia Gabos ministrando um minicurso de prototipação em papel no dia 23/09 das 19h às 22h40.

Entre os demais destaques da programação, haverá palestras e minicursos com a Cissa Gatto (GarotasCPBr), Junia Anacleto (minha orientadora de mestrado da UFSCar), Bruno Penteado (MSTech), Maurício Alegretti e outros.

Fique atento à abertura das inscrições e participem ;)

5 Ferramentas gratuitas para a criação de wireframes

Os wireframes são artefatos da etapa inicial de Arquitetura de Informação e definição da interface, sendo um componente importante para apresentar a disposição do conteúdo e os links para as principais páginas de um website.
Eles provêem uma visão da organização do conteúdo na interface do website. É possível notar através deles o comportamento do menu de navegação e a distribuição dos principais conteúdos que compõem a interface, porém, sem muito detalhe a nível gráfico.
As ferramentas mais conhecidas para a construção de wireframes são proprietárias: Microsoft Office Visio, Omnigraffle e Axure. Mas nos último anos têm surgido ótimas alternativas gratuitas e, inclusive, online. Selecionei 5 (versões de) ferramentas gratuitas e profissionais para que você possa construir wireframes de qualidade e aproveitar o potencial que eles possuem para o projeto de websites.

1. MockFlow
A melhor ferramenta online que eu testei. Fácil de usar, com diversos recursos e componentes. Permite o compartilhamento do wireframe, utilização de grid, guias, régua e exportação como blueprint (formato semelhante àquelas plantas azuis de engenharia) e preto e branco. Infelizmente a versão gratuita permite criar apenas um mockup, porém, com múltiplas páginas. Possui também a versão stand-alone.



2. Mockingbird
O Mockinbird é uma ferramenta online que facilita a criação, visualização e compartilhamento dos wireframes de seu site ou aplicação.



3. Lovely Charts
É uma ferramenta online disponível para instalação no Chrome que permite não somente a criação de wireframes, mas também de sitemaps, fluxogramas, organogramas, e muito mais. A única desvantagem é que nessa versão gratuita você pode salvar apenas 1 gráfico editável, mas pode exportar ilimitadamente.



4. Balsamiq Mockups
O Balsamiq é uma ferramenta bem conhecida. A versão paga é desenvolvida em Adobe Air, mas você pode testar uma versão de demonstração online que permite exportar para PNG, PDF e XML.



5. Cacoo
Cacoo é uma ferramenta com interface amigável, uma boa quantidade de recursos e versão em português. Assim como o Lovely Charts, ele também permite a criação de diversos tipos de diagramas, inclusive UML e é completamente free.



Tem alguma dica? Publique nos comentários, quem sabe não sai a parte 2 ;)

Não deixe de conferir também outras opções neste post do Mashable que eu encontrei ontem.

Tutorial de Prototipagem em Papel

Para quem ficou interessado em saber mais sobre como fazer prototipagem em papel, depois de ler sobre a Oficina de Design de Interação na CPBr, dêem uma olhada no vídeo abaixo, preparado pelo pessoal do LTIA-Unesp (Laboratório de Tecnologia da Informação Aplicada), aqui de Bauru. É um tutorial muito interessante, rápido e divertido. Dá para ter uma boa noção de como fazer e aplicar testes em protótipo de papel.



Recebi esse vídeo pelo Henrique Perticarati, estudante da Unesp-Bauru e membro do LTIA. Até o tio Jakob Nielsen (ou Jakozão, como diria o designer Felipe Memória) assistiu a este vídeo, que foi enviado a ele pelos estudantes.

Direto da Campus Party 2011 - Oficina "Design de Interação - além do lápis e papel"

A melhor oficina que participei na Campus Party foi, sem dúvida, "Design de Interação - além do lápis e papel", ministrada por Tássia Spinelli e Rafaela Rei, ambas arquitetas de informação no iG.


Para chamar a atenção do público, primeiro elas mostraram um slide com imagem do iPhone, clichê em muitas apresentações, mas logo elas explicaram porque. o iPhone é característico pela sua facilidade de uso e, por este e outros motivos, é desejo de consumo de muitas pessoas. Isto porque ele foi planejado, projetado, desenhado e prototipado.

A importância do protótipo em papel, segundo Spinelli e Rei, é que ele se apresenta uma forma simples, rápida e barata para testar e garantir bons resultados, além de ser uma das melhores ferramentas para desenhar ótimas experiências de uso. Os principais benefícios são: fácil execução; forma rápida de incorporar feedback no momento de produção; os participantes dos testes se sentem mais à vontade criticando um protótipo em papel; há economia de tempo e dinheiro. E tem a grande vantagem de que você não precisa se preocupar com a fidelidade do design. Isso acaba tirando o foco do usuário durante o teste, ele acaba se preocupando em apontar mais questões de design do que problemas de funcionalidade. O foco do protótipo é analisar o fluxo de interação e a dificuldade de realização de tarefas, permitindo maior abstração destes quesitos.

O protótipo em papel é um ambiente simples para testar usabilidade, mas também deve ter uma planejamento. É preciso definir o público, as interfaces a serem testadas e as atividades a serem realizadas. Depois, os protótipos são desenhados e os testes são aplicados sob a supervisão do moderador e do observador. Para ter uma noção mais clara, as oficineiras exibiram o vídeo Paper Prototyping at Work.

Elas também deixaram claro o que não é protótipo:
  • Quadro branco: é mais utilizado pra brainstorming, não é interativo e apenas apresenta um rascunho de ideias. Protótipo não é um rascunho, não é a primeira ideia que vem em mente, é um refinamento destas ideias sob um planejamento;
  • Storyboard: apenas narra a ideia de interação. Mesmo que seja feito em papel, protótipo é funcional apenas é testado com o usuário e a intenção do storyboard não é essa;
  • Prancha;
  • Wireframe: são mais demorados e mais elaborados, geralmente não servem muito bem em outras etapas, pois há grande preocupação com detalhes de estrutura e fonte. Se for impresso, pode até servir como um protótipo funcional.

Os seguintes mitos também foram derrubados durante a oficina:
  1. Protótipo deve ser bonito: não. Antes de tudo, um protótipo é uma simulação de interface, tem que ser vivo, não tem que ser bonito;
  2. "Só sei desenhar direto no layout";
  3. "Não parece profissional": profissional é envolver as pessoas desde o início do projeto, não fazer um protótipo de alta fidelidade;
  4. "Meu chefe não irá entender";
  5. "Prototipar depende da plataforma";
  6. "Impossível simular interatividade com papel": é possível sim e muito bem :)

E para começar a fazer o protótipo é preciso pensar que a proposta da prototipação é propor ideias e trazer feedback mais rapidamente. Respondendo à algumas dúvidas da plateia, Spinelli e Rei esclareceram que o protótipo e seu benefício não são mensuráveis como um produto entregável. Elas também responderam que a responsabilidade sobre do protótipo ou wireframe é de toda a equipe, deve envolver todos os profissionais, não há "quem fale mais alto" nesse momento, é um processo de negociação com designers, arquitetos de informação e programadores.

Ao final da oficina foi proposta uma atividade prática pra prototipar um aplicativo do iG para iPhone. Ninguém se manifestou na plateia, acredito que todo mundo tenha ficado um pouco receoso de não conseguir dar conta, pois eu também fiquei assim. Conforme o pessoal foi saindo, eu continuei na plateia e fui chamada, junto com um pessoal para fazer a atividade. Estávamos em 6 pessoas e dividimos em 2 grupos de 3. Cada grupo teria que prototipar o aplicativo do canal Zoom para o iPhone e depois cada grupo elegeria o moderador e o observador para testar até 2 atividades do aplicativo com um "usuário" do outro grupo.


Quebramos muito a cabeça para definir uma interface simples e que pudesse refletir as principais ações desejadas pelos usuários no aplicativo. É interessante como o trabalho de prototipação é mais complexo, pois você precisa desenhar todo o fluxo de interação, por exemplo, "se o usuário clicar aqui, mostro a tela X, se na tela X ele clicar no botão Y, vai para Z, se clicar no W, vai para o K" e assim por diante. Spinelli e Rei foram super atenciosas e nos orientaram muito bem durante o teste com usuário, dando dicas do que não pode ser falado durante o teste com moderação, como apresentar o protótipo para o usuário, como incentivá-lo a narrar a interação, etc.


O mais surpreendente foi ver como cada equipe pensou a interface de forma completamente diferente. E, pra completar, eu e os colegas de oficina, novos amigos, fomos rachar uma pizza depois da oficina e no sábado também.

Postagens no blog

Twitter Delicious Facebook Digg Stumbleupon Favorites More