Download - Aula 9 interfaces- graduação Design
Pa4, unisinos, design
Interfaces, telas e arquitetura de informação
relacionamento <proposon>mútuo vivo
canvasrepresentação
telas
mídias
TvRádioJornalRevis
taWebTv
RádioJornalRevis
taWeb
informações
Remidiação como característica de uma genealogia de mídias
Afiliação entre mídias (mais que evolução em só sentido)
Remidiação das práticas materiais e arranjos sociais
Dependência, Contexto, Reforma
TV, Impresso...
“fala” através das interfaces Da
lacuna a intra-remidiação
Imediação e hipermediação nas interfaces
Busca por transparência / mídia “original”
Excitação da interface/ reconhecimento do meio
Tensionamento pelos observáveis e 3 facetas
A hipermediação na web se relacionacom a evolução do computação e de aspectos do design.
Interface humano-computador: arquivamento, montagem, devaneio, playfullness
Segundo Manovitch, a tela ou interface do computador é
aquela que “separa dois espaços absolutamente diferentes e que de alguma maneira coexistem”.
Quem ou o que são esses espaços?
“Interfacear ou atender simultaneamente a dois ou mais pólos de um sistema de informações implica em, de um lado, cumprir com os procedimentos contidos no pólo inanimado, mas planejado e pré-definido do sistema, e de outro lado, atender a demanda de expectativas previsíveis por parte do indivíduo usuário e solicitante.” (Freitas, p. 188)
“Oferecer possibilidade de uso,
com linguagens decodificáveis a um ou mais indivíduos usuários pode ser
considerado o principal desafio de
uma interface”(Freitas,p. 189)
A função da metáfora fica bem clara conforme
a conclusão de Steven Johnson, que diz que ela ajuda a
imaginar o que é informado, propiciando a visão do todo
em uma única tela (Gosciola, 2003, 92).
Outros exemplos de metáforas nos ícones e Remidiação: video players
Telas-interfaces-mídias
• Com a hipermídia, a discussão passaria a ser o surgimento, desenvolvimento e
transformação das interfaces que permitem comunicação e uso por imersão. (Freitas, p. 195)
Telas-interfaces-mídias
Oops
Numa analogia entre o design na relação humana no campo do “real”, em termos de passagens entre
ambientes, o autor afirma que no ciberespaço, “[o]s elementos ali presentes, quando permitem a
movimentação de sua estrutura, apresentam um quadro hierárquico de movimentação com diferentes
graus de permissividade”. (p. 189)
A idéia de ambientação como repetição de elementos de cenário ou de sonoridade nas telas que não devem se restringir ao seu próprio espaço. Devem sim, dar indicações que cada uma é uma continuidade física, em representação, da outra, permitindo que se visualize a continuidade do ambiente a cada tela para promover maior empatia do usuário. (idem, p.98)
Para o planejamento de uma interface, “deve-se levar em consideração o histórico das experiências” vivenciadas do indivíduo que se pretende sensibilizar, podendo-se, então, projetar um conjunto de elementos estimulantes em um sistema específico de
informações, objetivando-se sua interpretação unívoca e previamente
determinada” (p. 191)
No início, havia 2 escolas de AI:
- Desenho de wireframes e mapas do site.
- Design estrutural da informação (vocabulários controlados e taxonomias).
´
Fonte: Luciana Cattony – plantabaixa.wordpress.com
1. O design estrutural de ambientes de informaçãocompartilhados
2. A arte e a ciência da organização e categorização de sites, intranets, comunidades online e softwares para proporcionar usabilidade e “encontrabilidade”
3. Uma comunidade de prática emergente focada em levar
princípios de design e arquitetura ao ambiente digital
Segundo o Instituto de Arquitetura de Informação:
Fonte: Luciana Cattony – plantabaixa.wordpress.com
Fonte: Luciana Cattony – plantabaixa.wordpress.com
Luciana Cattony. Arquiteta de Informação da Gerdau.
Para mim arquitetura de informação é fazer o complexo se tornar algo simples. É entender as necessidades do cliente, do seu negócio e traduzí-las em ambientes amigáveis e intuitivos para o usuário. Costumo dizer que o arquiteto de informação é como se fosse um intérprete entre o cliente e o usuário, já que ele contribui significativamente para que a comunicação e o intercâmbio / compartilhamento de informações e experiências entre esses dois lados sejam feitos de maneira eficaz.
Fonte: Luciana Cattony – plantabaixa.wordpress.com
Visão da disciplina
Mercado, concorrentes, necessidades do negócio, restrições tecnológicas, financeiras etc.
Quem são, suas necessidades, hábitos, maneiras de navegar, expectativas etc.
O que o site tem a oferecer, como será criado o conteúdo etc.
Fonte: Luciana Cattony – plantabaixa.wordpress.com
• Encurtar o tempo de construção
• Tornar a manutenção mais simples
• Tornar a busca por informações mais rápida
• Simplificar tarefas e processos
• Diminuir a necessidade de treinamentos
• Agregar valor às marcas
• Criar experiências de uso memoráveis
Arquitetura de Informação – Objetivos
Fonte: Luciana Cattony – plantabaixa.wordpress.com
Entregáveis
O que é arquitetura de informação?
Atividades e entregáveis
Fonte: Luciana Cattony – plantabaixa.wordpress.com
Resgate e levantamento de informações
Recebimento da demanda
Benchmarking
Fonte: Luciana Cattony – plantabaixa.wordpress.com
Inventário / análise de conteúdo
Avaliação de maturidade
Avaliação Heurística
EstatísticasFonte: Luciana Cattony – plantabaixa.wordpress.com
Pesquisas quantitativas / qualitativas
Entrevistas com usuários
Personas
Imagem personas: Adaptivepath
Focus Group
Fonte: Luciana Cattony – plantabaixa.wordpress.com
Testes de usabilidade
Card Sorting
Imagens: TRY – Consultoria e pesquisa
Estudo etnográfico
Mapa do site
Fonte: Luciana Cattony – plantabaixa.wordpress.com
Protótipos em papel
http://www.nngroup.com/reports/prototyping/video_stills.html
Fonte: Luciana Cattony – plantabaixa.wordpress.com
Desenvolvimento de wireframes
Fonte: Luciana Cattony – plantabaixa.wordpress.com
Wireframes x Layouts
Fonte: Luciana Cattony – plantabaixa.wordpress.com
Wireframes x Layouts
Fonte: Luciana Cattony – plantabaixa.wordpress.com
Acompanhamento do desenvolvimento
Fonte: Luciana Cattony – plantabaixa.wordpress.com
• Hierarquia da informaçãoAs informações devem ter pesos diferentes. Foque naquilo que é mais importante e respeite uma hierarquia de informação.
Fonte: Luciana Cattony – plantabaixa.wordpress.com
• Apresentação da informaçãoExistem maneiras visuais e mais amigáveis para se transmitir uma informação.
Fonte: Luciana Cattony – plantabaixa.wordpress.com
• Apresentação da informaçãoExistem maneiras visuais e mais amigáveis para se transmitir uma informação.
Fonte: Luciana Cattony – plantabaixa.wordpress.com
Fonte: Luciana Cattony – plantabaixa.wordpress.com
• Apresentação da informaçãoExistem maneiras visuais e mais amigáveis para se transmitir uma informação.
Fonte: Luciana Cattony – plantabaixa.wordpress.com
• FormuláriosDependendo do caso, é melhor fazer o usuário dar vários passos do que oferecer uma rolagem gigante .
Fonte: Luciana Cattony – plantabaixa.wordpress.com
• Homogeneidade ComunicativaPadronização estética e de navegação para reforçar a marca e a apreensão cognitiva.
Seção cama, mesa e banho
Seção informática
• MundializaçãoUtilização de códigos, ícones e signos reconhecidos internacionalmente e específicos de diferentes usuários facilitam o entendimento.
Fonte: Luciana Cattony – plantabaixa.wordpress.com
• Navegação assertivaInformações simples, diretas, distribuídas estrategicamente e links representativos para o usuário alcançar facilmente seus objetivos.
Fonte: Luciana Cattony – plantabaixa.wordpress.com
• Ajuda ao usuárioInformações complementares, em local visível, que auxiliam a navegação e o cumprimento dos objetivos do usuário.
Fonte: Luciana Cattony – plantabaixa.wordpress.com
• FeedbackOpção para que o usuário se manifeste, fazendo-o sentir parte importante do processo.
Site BP– Área de Imprensa
Fonte: Luciana Cattony – plantabaixa.wordpress.com