Disciplinas

Usabilidade e Ergonomia de Interfaces, Projeto de Viabilidade - Graduação em Design UNISUL. Professores Frederick van Amstel e Gonçalo Ferraz.


Usabilidade I - Design Digital PUCPR - Prof. Gonçalo Ferraz.

30.6.11

LOCALIS

Este projeto tem o objetivo de melhorar o sistema de informações de ônibus para Curitiba e sinalizar rotas para outros meios de transporte, como carros ou a pé, além de facilitar o usuário visualizar pontos da cidade, como bancos, farmácias, shoppings, etc.


Primeiro organizamos as principais questões para definir nosso objetivo definindo o por que e para quem estávamos fazendo o projeto, para então definirmos o público alvo. Que neste caso são Estudantes e Trabalhadores. Pensando nisso, desenvolvemos personas e situações para analisar tarefas que cada uma iria realizar, como por exemplo, quando o carro de alguém quebra e essa pessoa está despreparada de informações sobre ônibus e precisa disso rapidamente, ou um estudante do interior em uma cidade nova para ele e grande como Curitiba, mas também pensando nas classes mais baixas que mal tem acesso ao computador. Através desse método pudemos extrair quais eram as principais necessidades desse publico alvo. 

Para complementar essas tarefas, analisamos como a internet supre essas necessidades dos usuários através da Análise de Similares (benchmarking) encontramos sites como:

Google Maps tem o layout mais clean dentre os sites analisados, ele vai direto em como traçar uma rota, mas nem todas as cidades tem o sistema de ônibus integrado a ele.

O Maplink tem o layout um pouco mais poluído, porém tem mais aplicativos que o maps, o que faz dele levemente mais complicado. (não tem sistema de transporte público)

Guia Mais tem o layout quase tão simples quanto o Maps,
mas não tem também sistema de transporte público.
Conclusão, o Google Maps é o site mais completo na internet, mesmo ainda sendo carente de informações para alguns lugares no brasil ainda. (como o sistema de transporte, transito, clima, etc...).

E depois que definimos o perfil do usuário, começamos a trabalhar com Card-Sorting e desenvolver o layout através de sketches. Depois de alguns testes com o usuário, chegamos ao layout final.






Este é o resultado do trabalho deste primeiro semestre de 2011, foram aproximadamente  4 meses de trabalho desde março até o final de junho, na matéria de Usabilidade.


Neste tipo de trabalho seguindo um tutorial, com auxilio do professor, foi muito proveitoso  para aqueles que souberam aproveitar a oportunidade, pois pudemos desenvolver um projeto mais completo (normalmente trabalhamos em vários projetos menores), tivemos tempo para analisar os erros e os acertos, ver onde melhorar  e produzir algo de qualidade.
Nossa equipe realmente se dedicou ao LOCALIS, acreditamos nessa idéia e agora compartilhamos  ela aqui com vocês.

Duvidas? Sugestões? Criticas? Não deixe de comentar o post.  Nos ajude a melhorar sempre o nosso “Projeto LOCALIS”.


Equipe: Luiz Rosa, Ricardo Schroeter, Rafael Raja, Guilherme Follador de Creddo, Jeanne Chauvin.

Found it!

O objetivo consiste em melhorar o sistema de informação do transporte público proporcionando eficiência, conforto e qualidade.

Processos de desenvolvimento


  1. Estudo de Público Alvo;
  2. Desenvolvimento de Personas;
  3. Análise de similares;
  4. Pesquisa de conteúdo do aplicativo;
  5. Fluxograma de navegação;
  6. Card Sorting;
  7. Protótipo de baixa fidelidade;
  8. Protótipo.

Vídeo de realização do card sorting:



video


Quo Vadis

Para atender a missão de melhorar a vida urbana, facilitando os deslocamentos e assegurando o acesso das pessoas às suas casas, ao trabalho, serviços e lazer, de maneira confortável, segura e eficiente, temos como objetivo do site Quo Vadis auxiliar na compreensão e na mobilidade urbana utilizando de uma página de simples navegação e com funcionalidades que ajudarão usuários do transporte coletivo e individual assim como turistas e usuários esporádicos do sistema.

Os públicos-alvo são os Cidadãos de Curitiba e Região Metropolitana, turistas nacionais e internacionais, enfim, aqueles que buscam meios de transporte para se locomover de forma fácil na cidade.


Dentro do Cenário foram feitas análises competitivas com outros sites brasileiros e europeus referentes ao transporte coletivo.

Card Sorting


















Layout







Quo Vadis

Alunos: Elizeu Greber, Lilian Voos, Mauro e Pedro Marins

22.6.11

LAYOUT FINAL

Dicionário Infantil

Aqui está a home, pensamos em algo para diminuir ao máximo palavras, pois como se trata de um site para crianças que ainda não sabem ler , ou leêm muito pouco ainda, não adiantaria colocar descrições por exemplo.
 








Cada personagem nesta cena é um ícone que de acordo com sua fisionomia direciona para o local correto da pessoa que esta entrando. 
Por exemplo: o Pai 
Clicando no pai o site direciona o usúario para o perfil dos pais assim como a personagem da Mãe.





Nesta pagina, o pai pode realizar seu login, onde ira direciona-lo para o local onde pode verificar o desempenho do seu filho. Se não for cadastrado ainda, pode conhecer o site e os métodos utilizados para aprendizagem com o site.


Clicando nos personagens de uma das crianças, o usuario é direcionado para o local de senha, onde a criança terá um jeito só dela de colocar sua senha, sem palavras e sim por desenhos cores e o alfabeto. Já induzindo a mesma a conhecer a letras.





Assim que a criança clica na letra da sua senha e nos seus desenhos e cores nas telas ao lado é possível ve-los para confirmar se a sequência é a correta, e então é só clicar no OK.


Essa é a primeira tela que a criança usa de fato o dicionário. Nela aparece seu nome e foto,  assim como um baú onde a criança pode armazenar suas atividades preferidas para ver mais tarde. Nessa pagina a criança tem acesso a todas as letras do alfabeto, podendo clicar em qualquer uma para conhece-la.



Como exemplo, a criança escolhendo a letra b, o site direciona pra a tela da letra b, onde ela pode ver e ouvir a letra, bem como objetos que iniciam com essa letra, como se escreve, separa e fala. Assim a criança poderá ter uma melhor associação do alfabeto com imagens sons e escrita, para ouvir as letras basta clicar sobre elas.






Da mesma forma que outras atividades vão evoluindo de acordo as telas que a criança vai passando, o site também possui algumas atividades para avaliar o desempenho da criança sem que ela perceba (apenas os pais podem ver); mas essas atividades servem para a crianças passar para proximas etapas do dicionario, conhecendo palavras e associações mais complexas.

No final de um numero x de telas, é proposto uma atividade para criança onde ela pratica o que foi visto. Essas atividades servem para ela passar para os proximos niveis e, consequentemente, novas atividades. A criança só passa pelas atividades depois de visitar as telas de "conhecimento", sendo assim a criança não pode ir para telas avançadas sem conhecer o básico, mas pode voltar caso queira rever alguma tela anterior.

Passando pelos níveis, a criança vai desenvolvendo seu aprendizado de uma forma descontraída e sem as cobranças encontradas em sala de aula.

Por: Ádila Geller, Mariah Maciel e Mariane Schneider

20.6.11

Kacili Zuchinali

Equipe: Antonielle, Daniella, Elizandra, Kacili


Card-sorting





Organograma do Site




Paineis Semânticos (Personas)





Interfaces

--


--

--

--
--

19.6.11

Skate - Vídeo Interativo

OBJETIVO GERAL

Criar uma hipermídia intertiva que possibilite ao usuário adquirir diversas informações sobre os elementos integrantes dessa hipermídia, sem ter que recorrer a recursos de terceiros - como os mecanismos de busca da internet e os círculos sociais do usuário -, criando assim um ambiente adequado e completo para a aquisição de todas as informações integrantes dessa hipermídia.
____________________________________________________________________



DOCUMENTAÇÃO DO PROJETO


____________________________________________________________________



VÍDEO ENTREVISTAS PÚBLICO

Segue abaixo um vídeo da entrevista com 5 jovens skatistas da capital de SC, escolhidos com base nos critérios descritos no documento acima.

____________________________________________________________________



VÍDEO PROTOTIPAGEM RÁPIDA

Segue abaixo dois vídeos com a prototipagem rápida da hipermídia, feita de papel - como de praxe.


8.6.11

Dicionário Interativo Infantil

Arquitetura da Informaçao

iFly - Aplicativo Interativo de Busca de Imagens

iFly é um aplicativo interativo que não utiliza mouse, é realizado apenas com os movimentos da mão captados através da webcam e tem como objetivo facilitar o usuário na rápida pesquisa de imagens e armazenamento. O aplicativo será gratuito, disponível para download em websites.

As funções serão a busca de imagens em sites parceiros(Google Imagens, Facebook, Flickr, Picasa, Yahoo) com a opção de salvar as imagens para bibliotecas, podendo também compartilhar-las com amigos que tenham o iFly.


Vídeos: Teste de Usabilidade.
Os vídeos abaixo foram testes de usabilidade feitos com o público de interesse do projeto, sendo estudantes de design e fotógrafos.









Vídeos: Teste de Usabilidade - INTERFACES.

O vídeo abaixo foi feito para o teste de usabilidade com a diagramação gráfica,
funções e todas as interfaces que o aplicativo terá.






INTERFACES


Interface principal do aplicativo. Nesta interface é digitado a palavra que você gostaria de procurar, selecionar em qual(ais) websites deseja fazer a procura e selecionar o tamanho da imagem. Nesta mesma interface é possível entrar em sua biblioteca de banco de imagens.


Nesta interface está mostranto os botões dos ícones dos websites selecionados para fazer a procura de imagens.



As imagens desejadas já estão disponíveis em sua tela do aplicativo. Agora só navergar e achar a imagem desejada.


Navegando novamente...


A foto desejada, você faz o gesto com a mão como se fosse "tocar"...então aumenta. Para fechar a imagem só "tocar" sobre a imagem novamente.


Interface da parte interna da biblioteca.



Selecionando em "compartilhar" para abrir a caixa de contatos add.


Selecionar uma das pastas da sua biblioteca...



Se quiser compartilhar alguma imagem você apenas "arrastará" para o contato desejado.


Para convidar ou add um amigo nos seus contato, você clica em ADD AMIGO e logo abaixo vai aparecer uma outra janela para digitar o e-mail.



Você digita o e-mail do seu amigo e clicar e enviar...



logo, aparece uma "janela" com o informativo que seu amigo foi add.




App Busca de Imagens

7.7.10

Projeto Sistema de Controle de Alimentos na Cozinha.

video
O presente trabalho retrata um projeto para pessoas que moram sozinhas e não sabem cozinhar.
Também e direcionado para pessoas que possuem pouco conhecimento de variadas receitas, mas gostariam de realizar deliciosos pratos, e para quem acaba comendo sempre a mesma coisa.

O Desenvolvimento da idéia surgiu para facilitar a vida deste publico alvo, trazendo o dinamismo para a cozinha.
A pessoa tem a opção de pesquisar as receitas e fazê-las passo-a-passo, sem precisar ser um mestre cuca.
O produto parte de uma tela que pode ser acoplada em um armário, parede, geladeira... Ou onde desejar, em sua cozinha.
Na hora de realizar as refeições o monitor é ligado e lista através de um identificador de RFID os produtos que a pessoa possui em residência.
Clicando no que se quer e arrastando a uma panelinha a pesquisa pode ser efetuada e a receita executada.
Por ali você tem acesso a muitos sites de buscas, e encontra resultados com opinião de outros usuários.
Referente ao sistema de cadastramento dos produtos funcionara da seguinte forma: tudo que passar pela porta de entrada de sua casa já fará parte da sua lista no sistema, através do leitor RFID.
Ali se encontra acesso para mais de um usuário também podendo ser utilizado em republicas, esta fantástica inovação. O login funciona através de suas digitais.
Você também poderá arquivar suas receitas preferidas em uma pasta para tem nas mãos quando necessário.E simples e rápido e lhe fornece muito conforto.

28.5.10

Projeto se liga

Projeto apresentado pelos alunos da especialização web - UEM ,na disciplina de design de integração, prof. Mestre Frederick Vam Amstel