SlideShare una empresa de Scribd logo
1 de 28
“Pequenos atos como atender o celular,
realizar um saque em um caixa-eletrônico ou
jogar videogame tem mostrado que o homem
mudou sua forma de se relacionar com o mundo
a sua volta e se comunicar.”
Histórico da evolução nas interfaces
Em seu sentido mais simples, a palavra se
refere a softwares que dão forma à interação
entre usuários e computador. A interface atua
como uma espécie de tradutor, mediando entre
as duas partes, tornando uma sensível para a
outra.
Histórico da evolução nas interfaces
O código Binário (a lógica por trás dos
chips e sistemas).
A Guerra na evolução e os saltos
evolutivos do computador.
A revolução tecnológica
de Silicon Valley
As sucatas se tornam
computadores para fins pacíficos.
Limitações pelas complexas
programações e circuitos elétricos
fizeram necessária a criação de
interfaces para facilitar o acesso de
usuários inexperientes, porém
ainda era inacessível ao público
casual.
ALTAIR, o primeiro
computador comercial (1975):
Surgem os recursos interativos de
som, gráficos e textos.
Xerox PARC e a primeira
tentativa de um computador
amigável, o Xerox Star. (O fracasso
da primeira metáfora de interface).
O mercado e a rápida evolução dos computadores:
- A IBM entra no mercado em
1981 através do Personal Computer
(com funções apenas de produção de
textos e manutenção de pequenos
bancos de dados).
- Surgimento da Apple computer e a metáfora do
DESKTOP (usando o Xerox Star como trampolim).
- Surge a Microsoft com o
desenvolvimento também de uma
interface gráfica, o Windows.
- A metáfora da interface
confirma sua superioridade sob as
escrivaninhas virtuais, porém os
simuladores de vôos e games (que
se inspirava na virtualidade da
escrivaninha) se desenvolviam de
forma paralela, oferecendo um
tipo diferente de interatividade.
A partir disso ocorreram diversas implementações
na forma de desenvolver uma interface, porém na sua
essência o modelo DESKTOP estava consolidado como
mais eficiente na interação Homem-Computador. Dentro
desse contexto surgiram as técnicas e estudos para
aperfeiçoamento de cada projeto interativo, dentre os
quais um dos mais importante, os testes de usabilidade (
estudo de compatibilidade entre tecnologia e seu
usuário).
USABILIDADE + INTERFACE, estão interligados!
“O estilo de uma interface, no que diz respeito a
formas, fontes, cores e elementos gráficos que são
utilizados e a maneira como são combinados, tem
influência em se determinar quão agradável é interagir
com eles. Quanto mais eficaz for o uso das imagens em
uma interface, mais envolvente e agradável ela será”. A
interface e a usabilidade podem ser os heróis contra a
sobrecarga de informações.
Durante a primeira onda (pré-bolha) o design
insatisfatório de interface acarretou uma série de custos
para companhias online. Os principais eram:
- Perda de aproximadamente 50% das vendas,
porque os clientes não conseguiam encontrar os produtos
e informações.
- O resultado negativo da primeira visita ao site
gerava perda de 40% em média dos clientes em uma
segunda visita.
A Interface na “prática”.
A web era questionada como modelo de negócios no
início do milênio, hoje o MC Donalds investe mais em Web
que TV.
Existem diversos tipos de interação HOMEM-
COMPUTADOR, desde o objetivo contato com a máquina
de bilhete do metrô, até as mais profundas experiências
de imersão em ambientes virtuais e sistemas de
aprendizagem via internet. Os tipos de interação dividem-
se em:
- Linguagem Natural- Interação com o sistema utilizando-
se da sua própria linguagem.
- Linguagem de Comando- Comunicação com o sistema
através de comandos específicos (teclas simples).
- Menus- Conjunto de opções apresentado na tela forma
hierarquicamente.
- Preenchimento de Formulário- Usado para entrada de
informação no sistema.
- Manipulação Direta- Permite ao usuário agir
diretamente sobre os elementos representados na tela,
sem comandos (metáforas, games, etc)
- Agentes- Identificam necessidades do usuário e realizam
tarefas em segundo plano, de maneira colaborativa.
O que o usuário vê na tela e como seu olhar “caminha”
por ela.
- A hierarquia visual é uma guia.
- Força das palavras, grátis, venda.
- Carrinhos de compras, lixeiras e outros tipos de
affordances auxiliam, mas também limitam, os usuários já
estão acostumado e dependo do caso pode não focar em
elementos desgastados.
O que os projetistas criam!
O que os usuários vêem!
Por que projetados e a realidade!
As 10 Heurísticas de Jakob Nielsen
1) Feedback
O sistema deve informar continuamente ao usuário
sobre o que ele está fazendo.
10 segundos é o limite para manter a atenção do
usuário focalizada no diálogo.
2) Falar a linguagem do usuário
A terminologia deve ser baseada na linguagem do
usuário e não orientada ao sistema. As informações devem
ser organizadas conforme o modelo mental do usuário.
3) Saídas claramente demarcadas
O usuário controla o sistema, ele pode, a qualquer
momento, abortar uma tarefa, ou desfazer uma operação
e retornar ao estado anterior.
4) Consistência
Um mesmo comando ou ação deve ter sempre o
mesmo efeito.
A mesma operação deve ser apresentada na
mesma localização e deve ser formatada/apresentada da
mesma maneira para facilitar o reconhecimento.
5) Prevenir erros
Evitar situações de erro.
Conhecer as situações que mais provocam erros e
modificar a interface para que estes erros não ocorram.
6) Minimizar a sobrecarga de memória do usuário
O sistema deve mostrar os elementos de diálogo e
permitir que o usuário faça suas escolhas, sem a
necessidade de lembrar um comando específico.
7) Atalhos
Para usuários experientes executarem as operações
mais rapidamente.
Abreviações, teclas de função, duplo clique no
mouse, função de volta em sistemas hipertexto.
Atalhos também servem para recuperar
informações que estão numa profundidade na árvore
navegacional a partir da interface principal.
8) Diálogos simples e naturais
Deve-se apresentar exatamente a informação que o
usuário precisa no momento, nem mais nem menos.
A seqüência da interação e o acesso aos objetos e
operações devem ser compatíveis com o modo pelo qual o
usuário realiza suas tarefas.
9) Boas mensagens de erro
Linguagem clara e sem códigos.
Devem ajudar o usuário a entender e resolver o
problema.
Não devem culpar ou intimidar o usuário.
10) Ajuda e documentação
O ideal é que um software seja tão fácil de usar
(intuitivo) que não necessite de ajuda ou documentação.
Se for necessária a ajuda deve estar facilmente
acessível on-line.
A escolha da Interface ideal: Metáfora ou abstração?
As representações físicas, conhecidas na área da
multimídia como “metáforas de interface” são “modelos
conceituais desenvolvidos para ser
semelhante de alguma forma, a aspectos de
uma entidade física (ou entidades), mas.
que também tem seu próprio
comportamento e suas propriedades.
Uma discussão complexa.
As metáforas contribuíram para a construção de
uma mídia intuitiva, e de fácil acesso, não apenas aos
programadores, mas também a todos aqueles que
desejassem “se aventurar” nesse novo universo.
Metáforas são soluções velhas e limitadas. A
verdadeira mágica dos computadores gráficos deriva do
fato de eles não estarem amarrados ao velho mundo
analógico dos objetos. Para que limitarmos a “andar” ao
se deslocar de um local a outro se podemos simplesmente
“voar”.
Abstrato Metáfora
Permite o uso de simbologias que
trabalhem melhor o sistema cognitivo do
usuário, sem limitações “realistas”.
Geralmente utiliza-se de affordances
(ícones considerados por muitos
desgastados para remeter a ideias).
A pouca similaridade com o mundo real
permite atividades não permitidas no
mundo real, sem estranheza do usuário.
Preso a conceitos do mundo físico,
limitando a navegação em alguns
aspectos..
Permite uso de atalhos e ferramentas que
otimizam a navegação para os mais
familiarizados com o sistema.
Menor aceitação dos usuários avançados.
Dificuldades de assimilação de alguns
conceitos abstratos pelos iniciantes.
Maior facilidade de uso por usuários
inexperientes.
Permite maior quantidade de texto e
imagens sem um desconforto do usuário,
através de uma diagramação mais fácil.
Com o uso de textos e imagens pode ficar
facilmente sobrecarregado.
Interface web

Más contenido relacionado

La actualidad más candente

Interação humano computador (introdução )
Interação humano computador (introdução )Interação humano computador (introdução )
Interação humano computador (introdução )
Jesse Teixeira
 
Interface Homem Computador
Interface Homem ComputadorInterface Homem Computador
Interface Homem Computador
Duílio Andrade
 
Palestra Experiência do Usuário no contexto do negócio (UX Expert)
Palestra Experiência do Usuário no contexto do negócio (UX Expert)Palestra Experiência do Usuário no contexto do negócio (UX Expert)
Palestra Experiência do Usuário no contexto do negócio (UX Expert)
Impacta Eventos
 
A importancia de IHC no desenvolvimento de software
A importancia de IHC no desenvolvimento de softwareA importancia de IHC no desenvolvimento de software
A importancia de IHC no desenvolvimento de software
Flavia Negrao
 
Teoria da interactividade
Teoria da interactividadeTeoria da interactividade
Teoria da interactividade
Carlos Barbosa
 

La actualidad más candente (20)

7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 20107Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
 
Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)
 
Interação humano computador (introdução )
Interação humano computador (introdução )Interação humano computador (introdução )
Interação humano computador (introdução )
 
Ihc Aula7
Ihc Aula7Ihc Aula7
Ihc Aula7
 
Do GUI aos ambientes imersos
Do GUI aos ambientes imersosDo GUI aos ambientes imersos
Do GUI aos ambientes imersos
 
Interação Humano Computador 1
Interação Humano Computador 1Interação Humano Computador 1
Interação Humano Computador 1
 
Interface Homem Computador
Interface Homem ComputadorInterface Homem Computador
Interface Homem Computador
 
Paradigmas da comunicação IHC
Paradigmas da comunicação IHCParadigmas da comunicação IHC
Paradigmas da comunicação IHC
 
Pesquisa
PesquisaPesquisa
Pesquisa
 
Interface Homem Computador - IHC
Interface Homem Computador - IHCInterface Homem Computador - IHC
Interface Homem Computador - IHC
 
Palestra Experiência do Usuário no contexto do negócio (UX Expert)
Palestra Experiência do Usuário no contexto do negócio (UX Expert)Palestra Experiência do Usuário no contexto do negócio (UX Expert)
Palestra Experiência do Usuário no contexto do negócio (UX Expert)
 
A importancia de IHC no desenvolvimento de software
A importancia de IHC no desenvolvimento de softwareA importancia de IHC no desenvolvimento de software
A importancia de IHC no desenvolvimento de software
 
IHM x IHM – INTERFACE x INTERAçÃO HOMEM-MÁQUINA
IHM x IHM – INTERFACE x INTERAçÃO HOMEM-MÁQUINAIHM x IHM – INTERFACE x INTERAçÃO HOMEM-MÁQUINA
IHM x IHM – INTERFACE x INTERAçÃO HOMEM-MÁQUINA
 
Interface Homem Computador - Janaira Franca
Interface Homem Computador - Janaira FrancaInterface Homem Computador - Janaira Franca
Interface Homem Computador - Janaira Franca
 
Interação Homem Computador Aula 02
Interação Homem Computador Aula 02Interação Homem Computador Aula 02
Interação Homem Computador Aula 02
 
Usabilidade, IHC - Definições
Usabilidade, IHC - DefiniçõesUsabilidade, IHC - Definições
Usabilidade, IHC - Definições
 
IHC - Slide 2 - Usabilidade e Princípios de Design
IHC - Slide 2 - Usabilidade e Princípios de DesignIHC - Slide 2 - Usabilidade e Princípios de Design
IHC - Slide 2 - Usabilidade e Princípios de Design
 
Teoria da interactividade
Teoria da interactividadeTeoria da interactividade
Teoria da interactividade
 
Introdução à teoria da interactividade
Introdução à teoria da interactividadeIntrodução à teoria da interactividade
Introdução à teoria da interactividade
 
Parte I
Parte IParte I
Parte I
 

Destacado

Ladou Corporate Presentation
Ladou Corporate PresentationLadou Corporate Presentation
Ladou Corporate Presentation
Luciead
 
Plan de trabajo
Plan de trabajoPlan de trabajo
Plan de trabajo
W1MFH3R
 
Clube De Relacionamento Dell
Clube De Relacionamento DellClube De Relacionamento Dell
Clube De Relacionamento Dell
Ligia Mello
 
SC EXTENDS STAY ON DEMOLITIONS AT SARAKKI
SC EXTENDS STAY ON DEMOLITIONS AT SARAKKISC EXTENDS STAY ON DEMOLITIONS AT SARAKKI
SC EXTENDS STAY ON DEMOLITIONS AT SARAKKI
Bangalore Generalnews
 
A INTERDEPENDÊNCIA ENTRE ESTADO E MST NA CONSTITUIÇÃO DE UM ASSENTAMENTO DE R...
A INTERDEPENDÊNCIA ENTRE ESTADO E MST NA CONSTITUIÇÃO DE UM ASSENTAMENTO DE R...A INTERDEPENDÊNCIA ENTRE ESTADO E MST NA CONSTITUIÇÃO DE UM ASSENTAMENTO DE R...
A INTERDEPENDÊNCIA ENTRE ESTADO E MST NA CONSTITUIÇÃO DE UM ASSENTAMENTO DE R...
UFPB
 
FOLLOW LAW, LET SCHOOLS TEACH IN ENGLISH: HIGH COURT
FOLLOW LAW, LET SCHOOLS TEACH IN ENGLISH: HIGH COURTFOLLOW LAW, LET SCHOOLS TEACH IN ENGLISH: HIGH COURT
FOLLOW LAW, LET SCHOOLS TEACH IN ENGLISH: HIGH COURT
Bangalore Generalnews
 

Destacado (20)

O Quiosque Coca-Cola 1
O Quiosque Coca-Cola 1O Quiosque Coca-Cola 1
O Quiosque Coca-Cola 1
 
10 Minute Social Media Formula
10 Minute Social Media Formula10 Minute Social Media Formula
10 Minute Social Media Formula
 
Ladou Corporate Presentation
Ladou Corporate PresentationLadou Corporate Presentation
Ladou Corporate Presentation
 
Genkiphonicsposters
GenkiphonicspostersGenkiphonicsposters
Genkiphonicsposters
 
Plan de trabajo
Plan de trabajoPlan de trabajo
Plan de trabajo
 
Diplo. seguridad ciudadana (panamá)
Diplo.  seguridad ciudadana (panamá)Diplo.  seguridad ciudadana (panamá)
Diplo. seguridad ciudadana (panamá)
 
Clube De Relacionamento Dell
Clube De Relacionamento DellClube De Relacionamento Dell
Clube De Relacionamento Dell
 
Pos RECON 2012
Pos RECON 2012 Pos RECON 2012
Pos RECON 2012
 
SC EXTENDS STAY ON DEMOLITIONS AT SARAKKI
SC EXTENDS STAY ON DEMOLITIONS AT SARAKKISC EXTENDS STAY ON DEMOLITIONS AT SARAKKI
SC EXTENDS STAY ON DEMOLITIONS AT SARAKKI
 
IRC Marketing Plan Presentation
IRC Marketing Plan PresentationIRC Marketing Plan Presentation
IRC Marketing Plan Presentation
 
De toekomst van co-producten - Richard Corsmit
De toekomst van co-producten - Richard CorsmitDe toekomst van co-producten - Richard Corsmit
De toekomst van co-producten - Richard Corsmit
 
A INTERDEPENDÊNCIA ENTRE ESTADO E MST NA CONSTITUIÇÃO DE UM ASSENTAMENTO DE R...
A INTERDEPENDÊNCIA ENTRE ESTADO E MST NA CONSTITUIÇÃO DE UM ASSENTAMENTO DE R...A INTERDEPENDÊNCIA ENTRE ESTADO E MST NA CONSTITUIÇÃO DE UM ASSENTAMENTO DE R...
A INTERDEPENDÊNCIA ENTRE ESTADO E MST NA CONSTITUIÇÃO DE UM ASSENTAMENTO DE R...
 
Cultura, ciudad, acción colectiva,
Cultura, ciudad, acción colectiva,Cultura, ciudad, acción colectiva,
Cultura, ciudad, acción colectiva,
 
Community facilitation
Community facilitationCommunity facilitation
Community facilitation
 
FOLLOW LAW, LET SCHOOLS TEACH IN ENGLISH: HIGH COURT
FOLLOW LAW, LET SCHOOLS TEACH IN ENGLISH: HIGH COURTFOLLOW LAW, LET SCHOOLS TEACH IN ENGLISH: HIGH COURT
FOLLOW LAW, LET SCHOOLS TEACH IN ENGLISH: HIGH COURT
 
13th February 2017 - The bible - Book of Malachi
13th February 2017  - The bible - Book of Malachi13th February 2017  - The bible - Book of Malachi
13th February 2017 - The bible - Book of Malachi
 
Clasa a iii
Clasa a iiiClasa a iii
Clasa a iii
 
Formación en Contact center
Formación en Contact centerFormación en Contact center
Formación en Contact center
 
Quesiton 3 (denya lara)
Quesiton 3 (denya lara)Quesiton 3 (denya lara)
Quesiton 3 (denya lara)
 
http://commercialinsurance.serviceinvirginia.com/
http://commercialinsurance.serviceinvirginia.com/http://commercialinsurance.serviceinvirginia.com/
http://commercialinsurance.serviceinvirginia.com/
 

Similar a Interface web

Interface com o usuário
Interface com o usuárioInterface com o usuário
Interface com o usuário
irlss
 
Aula 01 - Conceitos de IHC - Prof.ª Cristiane Fidelix
Aula 01 - Conceitos de IHC - Prof.ª Cristiane FidelixAula 01 - Conceitos de IHC - Prof.ª Cristiane Fidelix
Aula 01 - Conceitos de IHC - Prof.ª Cristiane Fidelix
Cris Fidelix
 
Aula 2. Fatores Humanos em IHC
Aula 2. Fatores Humanos em IHCAula 2. Fatores Humanos em IHC
Aula 2. Fatores Humanos em IHC
Silvia Dotta
 

Similar a Interface web (20)

Interface com o usuário
Interface com o usuárioInterface com o usuário
Interface com o usuário
 
Usabilidade na tv digital
Usabilidade na tv digitalUsabilidade na tv digital
Usabilidade na tv digital
 
Teorias da Comunicação Digital - Aula 02
Teorias da Comunicação Digital - Aula 02Teorias da Comunicação Digital - Aula 02
Teorias da Comunicação Digital - Aula 02
 
Aula 01 - Conceitos de IHC - Prof.ª Cristiane Fidelix
Aula 01 - Conceitos de IHC - Prof.ª Cristiane FidelixAula 01 - Conceitos de IHC - Prof.ª Cristiane Fidelix
Aula 01 - Conceitos de IHC - Prof.ª Cristiane Fidelix
 
Realidade virtual
Realidade virtualRealidade virtual
Realidade virtual
 
Design de interfaces gráficas
Design de interfaces gráficasDesign de interfaces gráficas
Design de interfaces gráficas
 
Cenários de futuro
Cenários de futuroCenários de futuro
Cenários de futuro
 
CRP-5215-0420-2014-09
CRP-5215-0420-2014-09CRP-5215-0420-2014-09
CRP-5215-0420-2014-09
 
Aula 2. Fatores Humanos em IHC
Aula 2. Fatores Humanos em IHCAula 2. Fatores Humanos em IHC
Aula 2. Fatores Humanos em IHC
 
Artigo ihc1
Artigo ihc1Artigo ihc1
Artigo ihc1
 
12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)
 
Kelly Shigeno | Conversando com ninguém – uma reflexão sobre os chatbots
Kelly Shigeno | Conversando com ninguém – uma reflexão sobre os chatbotsKelly Shigeno | Conversando com ninguém – uma reflexão sobre os chatbots
Kelly Shigeno | Conversando com ninguém – uma reflexão sobre os chatbots
 
Convergência de Tecnologias
Convergência de TecnologiasConvergência de Tecnologias
Convergência de Tecnologias
 
Design para a web - da interface ao branding
Design para a web - da interface ao brandingDesign para a web - da interface ao branding
Design para a web - da interface ao branding
 
Graphic1
Graphic1Graphic1
Graphic1
 
Ihm07
Ihm07Ihm07
Ihm07
 
Capitulo1
Capitulo1Capitulo1
Capitulo1
 
Interfaces Naturais
Interfaces NaturaisInterfaces Naturais
Interfaces Naturais
 
Modulo iii arquiteturainformacaousabilidade_thaiscampas
Modulo iii arquiteturainformacaousabilidade_thaiscampasModulo iii arquiteturainformacaousabilidade_thaiscampas
Modulo iii arquiteturainformacaousabilidade_thaiscampas
 
Apresentação Aula 01
Apresentação  Aula 01Apresentação  Aula 01
Apresentação Aula 01
 

Más de Armando Rivarola (20)

I.h aula 6 7 8 9 10 11 12
I.h aula 6 7 8 9 10 11 12I.h aula 6 7 8 9 10 11 12
I.h aula 6 7 8 9 10 11 12
 
I.h aula 1 2 3 4 5
I.h aula 1 2 3 4 5I.h aula 1 2 3 4 5
I.h aula 1 2 3 4 5
 
S.o aula 3334
S.o aula 3334S.o aula 3334
S.o aula 3334
 
S.o aula 3132
S.o aula 3132S.o aula 3132
S.o aula 3132
 
S.o aula 2930
S.o aula 2930S.o aula 2930
S.o aula 2930
 
Aula so 1a
Aula so 1aAula so 1a
Aula so 1a
 
S.o aula 2728
S.o aula 2728S.o aula 2728
S.o aula 2728
 
S.o aula 2526
S.o aula 2526S.o aula 2526
S.o aula 2526
 
S.o aula 2324
S.o aula 2324S.o aula 2324
S.o aula 2324
 
S.o aula 2122
S.o aula 2122S.o aula 2122
S.o aula 2122
 
S.o aula 1920
S.o aula 1920S.o aula 1920
S.o aula 1920
 
S.o aula 1718
S.o aula 1718S.o aula 1718
S.o aula 1718
 
Calc
CalcCalc
Calc
 
Apostila de broffice writer
Apostila de broffice writerApostila de broffice writer
Apostila de broffice writer
 
S.o aula 1516
S.o aula 1516S.o aula 1516
S.o aula 1516
 
S.o aula 121314
S.o aula 121314S.o aula 121314
S.o aula 121314
 
S.o aula 9101112
S.o aula 9101112S.o aula 9101112
S.o aula 9101112
 
S.o aula 5678
S.o aula 5678S.o aula 5678
S.o aula 5678
 
Comunicação de dados!
Comunicação de dados!Comunicação de dados!
Comunicação de dados!
 
S.o aula 1234
S.o aula 1234S.o aula 1234
S.o aula 1234
 

Último

GEOGRAFIA - COMÉRCIO INTERNACIONAL E BLOCOS ECONÔMICOS - PROF. LUCAS QUEIROZ.pdf
GEOGRAFIA - COMÉRCIO INTERNACIONAL E BLOCOS ECONÔMICOS - PROF. LUCAS QUEIROZ.pdfGEOGRAFIA - COMÉRCIO INTERNACIONAL E BLOCOS ECONÔMICOS - PROF. LUCAS QUEIROZ.pdf
GEOGRAFIA - COMÉRCIO INTERNACIONAL E BLOCOS ECONÔMICOS - PROF. LUCAS QUEIROZ.pdf
RavenaSales1
 
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
azulassessoria9
 
apostila projeto de vida 2 ano ensino médio
apostila projeto de vida 2 ano ensino médioapostila projeto de vida 2 ano ensino médio
apostila projeto de vida 2 ano ensino médio
rosenilrucks
 
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
HELENO FAVACHO
 
Os editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptxOs editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptx
TailsonSantos1
 
Considere a seguinte situação fictícia: Durante uma reunião de equipe em uma...
Considere a seguinte situação fictícia:  Durante uma reunião de equipe em uma...Considere a seguinte situação fictícia:  Durante uma reunião de equipe em uma...
Considere a seguinte situação fictícia: Durante uma reunião de equipe em uma...
azulassessoria9
 
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
azulassessoria9
 

Último (20)

GEOGRAFIA - COMÉRCIO INTERNACIONAL E BLOCOS ECONÔMICOS - PROF. LUCAS QUEIROZ.pdf
GEOGRAFIA - COMÉRCIO INTERNACIONAL E BLOCOS ECONÔMICOS - PROF. LUCAS QUEIROZ.pdfGEOGRAFIA - COMÉRCIO INTERNACIONAL E BLOCOS ECONÔMICOS - PROF. LUCAS QUEIROZ.pdf
GEOGRAFIA - COMÉRCIO INTERNACIONAL E BLOCOS ECONÔMICOS - PROF. LUCAS QUEIROZ.pdf
 
Aula sobre o Imperialismo Europeu no século XIX
Aula sobre o Imperialismo Europeu no século XIXAula sobre o Imperialismo Europeu no século XIX
Aula sobre o Imperialismo Europeu no século XIX
 
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
 
PROJETO DE EXTENSÃO I - TERAPIAS INTEGRATIVAS E COMPLEMENTARES.pdf
PROJETO DE EXTENSÃO I - TERAPIAS INTEGRATIVAS E COMPLEMENTARES.pdfPROJETO DE EXTENSÃO I - TERAPIAS INTEGRATIVAS E COMPLEMENTARES.pdf
PROJETO DE EXTENSÃO I - TERAPIAS INTEGRATIVAS E COMPLEMENTARES.pdf
 
Projeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdf
Projeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdfProjeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdf
Projeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdf
 
"É melhor praticar para a nota" - Como avaliar comportamentos em contextos de...
"É melhor praticar para a nota" - Como avaliar comportamentos em contextos de..."É melhor praticar para a nota" - Como avaliar comportamentos em contextos de...
"É melhor praticar para a nota" - Como avaliar comportamentos em contextos de...
 
PRÁTICAS PEDAGÓGICAS GESTÃO DA APRENDIZAGEM
PRÁTICAS PEDAGÓGICAS GESTÃO DA APRENDIZAGEMPRÁTICAS PEDAGÓGICAS GESTÃO DA APRENDIZAGEM
PRÁTICAS PEDAGÓGICAS GESTÃO DA APRENDIZAGEM
 
apostila projeto de vida 2 ano ensino médio
apostila projeto de vida 2 ano ensino médioapostila projeto de vida 2 ano ensino médio
apostila projeto de vida 2 ano ensino médio
 
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
 
Os editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptxOs editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptx
 
Slides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptx
Slides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptxSlides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptx
Slides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptx
 
Considere a seguinte situação fictícia: Durante uma reunião de equipe em uma...
Considere a seguinte situação fictícia:  Durante uma reunião de equipe em uma...Considere a seguinte situação fictícia:  Durante uma reunião de equipe em uma...
Considere a seguinte situação fictícia: Durante uma reunião de equipe em uma...
 
PRÉDIOS HISTÓRICOS DE ASSARÉ Prof. Francisco Leite.pdf
PRÉDIOS HISTÓRICOS DE ASSARÉ Prof. Francisco Leite.pdfPRÉDIOS HISTÓRICOS DE ASSARÉ Prof. Francisco Leite.pdf
PRÉDIOS HISTÓRICOS DE ASSARÉ Prof. Francisco Leite.pdf
 
Rota das Ribeiras Camp, Projeto Nós Propomos!
Rota das Ribeiras Camp, Projeto Nós Propomos!Rota das Ribeiras Camp, Projeto Nós Propomos!
Rota das Ribeiras Camp, Projeto Nós Propomos!
 
Currículo - Ícaro Kleisson - Tutor acadêmico.pdf
Currículo - Ícaro Kleisson - Tutor acadêmico.pdfCurrículo - Ícaro Kleisson - Tutor acadêmico.pdf
Currículo - Ícaro Kleisson - Tutor acadêmico.pdf
 
PROJETO DE EXTENSÃO I - Radiologia Tecnologia
PROJETO DE EXTENSÃO I - Radiologia TecnologiaPROJETO DE EXTENSÃO I - Radiologia Tecnologia
PROJETO DE EXTENSÃO I - Radiologia Tecnologia
 
PROJETO DE EXTENSÃO I - AGRONOMIA.pdf AGRONOMIAAGRONOMIA
PROJETO DE EXTENSÃO I - AGRONOMIA.pdf AGRONOMIAAGRONOMIAPROJETO DE EXTENSÃO I - AGRONOMIA.pdf AGRONOMIAAGRONOMIA
PROJETO DE EXTENSÃO I - AGRONOMIA.pdf AGRONOMIAAGRONOMIA
 
Nós Propomos! " Pinhais limpos, mundo saudável"
Nós Propomos! " Pinhais limpos, mundo saudável"Nós Propomos! " Pinhais limpos, mundo saudável"
Nós Propomos! " Pinhais limpos, mundo saudável"
 
DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...
DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...
DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...
 
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
 

Interface web

  • 1.
  • 2. “Pequenos atos como atender o celular, realizar um saque em um caixa-eletrônico ou jogar videogame tem mostrado que o homem mudou sua forma de se relacionar com o mundo a sua volta e se comunicar.”
  • 3. Histórico da evolução nas interfaces Em seu sentido mais simples, a palavra se refere a softwares que dão forma à interação entre usuários e computador. A interface atua como uma espécie de tradutor, mediando entre as duas partes, tornando uma sensível para a outra.
  • 4. Histórico da evolução nas interfaces O código Binário (a lógica por trás dos chips e sistemas). A Guerra na evolução e os saltos evolutivos do computador.
  • 5. A revolução tecnológica de Silicon Valley As sucatas se tornam computadores para fins pacíficos. Limitações pelas complexas programações e circuitos elétricos fizeram necessária a criação de interfaces para facilitar o acesso de usuários inexperientes, porém ainda era inacessível ao público casual.
  • 6. ALTAIR, o primeiro computador comercial (1975): Surgem os recursos interativos de som, gráficos e textos. Xerox PARC e a primeira tentativa de um computador amigável, o Xerox Star. (O fracasso da primeira metáfora de interface).
  • 7. O mercado e a rápida evolução dos computadores: - A IBM entra no mercado em 1981 através do Personal Computer (com funções apenas de produção de textos e manutenção de pequenos bancos de dados). - Surgimento da Apple computer e a metáfora do DESKTOP (usando o Xerox Star como trampolim).
  • 8. - Surge a Microsoft com o desenvolvimento também de uma interface gráfica, o Windows. - A metáfora da interface confirma sua superioridade sob as escrivaninhas virtuais, porém os simuladores de vôos e games (que se inspirava na virtualidade da escrivaninha) se desenvolviam de forma paralela, oferecendo um tipo diferente de interatividade.
  • 9. A partir disso ocorreram diversas implementações na forma de desenvolver uma interface, porém na sua essência o modelo DESKTOP estava consolidado como mais eficiente na interação Homem-Computador. Dentro desse contexto surgiram as técnicas e estudos para aperfeiçoamento de cada projeto interativo, dentre os quais um dos mais importante, os testes de usabilidade ( estudo de compatibilidade entre tecnologia e seu usuário).
  • 10. USABILIDADE + INTERFACE, estão interligados! “O estilo de uma interface, no que diz respeito a formas, fontes, cores e elementos gráficos que são utilizados e a maneira como são combinados, tem influência em se determinar quão agradável é interagir com eles. Quanto mais eficaz for o uso das imagens em uma interface, mais envolvente e agradável ela será”. A interface e a usabilidade podem ser os heróis contra a sobrecarga de informações.
  • 11. Durante a primeira onda (pré-bolha) o design insatisfatório de interface acarretou uma série de custos para companhias online. Os principais eram: - Perda de aproximadamente 50% das vendas, porque os clientes não conseguiam encontrar os produtos e informações. - O resultado negativo da primeira visita ao site gerava perda de 40% em média dos clientes em uma segunda visita. A Interface na “prática”.
  • 12. A web era questionada como modelo de negócios no início do milênio, hoje o MC Donalds investe mais em Web que TV.
  • 13. Existem diversos tipos de interação HOMEM- COMPUTADOR, desde o objetivo contato com a máquina de bilhete do metrô, até as mais profundas experiências de imersão em ambientes virtuais e sistemas de aprendizagem via internet. Os tipos de interação dividem- se em:
  • 14. - Linguagem Natural- Interação com o sistema utilizando- se da sua própria linguagem. - Linguagem de Comando- Comunicação com o sistema através de comandos específicos (teclas simples). - Menus- Conjunto de opções apresentado na tela forma hierarquicamente. - Preenchimento de Formulário- Usado para entrada de informação no sistema. - Manipulação Direta- Permite ao usuário agir diretamente sobre os elementos representados na tela, sem comandos (metáforas, games, etc) - Agentes- Identificam necessidades do usuário e realizam tarefas em segundo plano, de maneira colaborativa.
  • 15. O que o usuário vê na tela e como seu olhar “caminha” por ela. - A hierarquia visual é uma guia. - Força das palavras, grátis, venda. - Carrinhos de compras, lixeiras e outros tipos de affordances auxiliam, mas também limitam, os usuários já estão acostumado e dependo do caso pode não focar em elementos desgastados.
  • 16. O que os projetistas criam!
  • 17. O que os usuários vêem!
  • 18. Por que projetados e a realidade!
  • 19. As 10 Heurísticas de Jakob Nielsen 1) Feedback O sistema deve informar continuamente ao usuário sobre o que ele está fazendo. 10 segundos é o limite para manter a atenção do usuário focalizada no diálogo. 2) Falar a linguagem do usuário A terminologia deve ser baseada na linguagem do usuário e não orientada ao sistema. As informações devem ser organizadas conforme o modelo mental do usuário.
  • 20. 3) Saídas claramente demarcadas O usuário controla o sistema, ele pode, a qualquer momento, abortar uma tarefa, ou desfazer uma operação e retornar ao estado anterior. 4) Consistência Um mesmo comando ou ação deve ter sempre o mesmo efeito. A mesma operação deve ser apresentada na mesma localização e deve ser formatada/apresentada da mesma maneira para facilitar o reconhecimento.
  • 21. 5) Prevenir erros Evitar situações de erro. Conhecer as situações que mais provocam erros e modificar a interface para que estes erros não ocorram. 6) Minimizar a sobrecarga de memória do usuário O sistema deve mostrar os elementos de diálogo e permitir que o usuário faça suas escolhas, sem a necessidade de lembrar um comando específico.
  • 22. 7) Atalhos Para usuários experientes executarem as operações mais rapidamente. Abreviações, teclas de função, duplo clique no mouse, função de volta em sistemas hipertexto. Atalhos também servem para recuperar informações que estão numa profundidade na árvore navegacional a partir da interface principal. 8) Diálogos simples e naturais Deve-se apresentar exatamente a informação que o usuário precisa no momento, nem mais nem menos. A seqüência da interação e o acesso aos objetos e operações devem ser compatíveis com o modo pelo qual o usuário realiza suas tarefas.
  • 23. 9) Boas mensagens de erro Linguagem clara e sem códigos. Devem ajudar o usuário a entender e resolver o problema. Não devem culpar ou intimidar o usuário. 10) Ajuda e documentação O ideal é que um software seja tão fácil de usar (intuitivo) que não necessite de ajuda ou documentação. Se for necessária a ajuda deve estar facilmente acessível on-line.
  • 24. A escolha da Interface ideal: Metáfora ou abstração? As representações físicas, conhecidas na área da multimídia como “metáforas de interface” são “modelos conceituais desenvolvidos para ser semelhante de alguma forma, a aspectos de uma entidade física (ou entidades), mas. que também tem seu próprio comportamento e suas propriedades.
  • 25. Uma discussão complexa. As metáforas contribuíram para a construção de uma mídia intuitiva, e de fácil acesso, não apenas aos programadores, mas também a todos aqueles que desejassem “se aventurar” nesse novo universo.
  • 26. Metáforas são soluções velhas e limitadas. A verdadeira mágica dos computadores gráficos deriva do fato de eles não estarem amarrados ao velho mundo analógico dos objetos. Para que limitarmos a “andar” ao se deslocar de um local a outro se podemos simplesmente “voar”.
  • 27. Abstrato Metáfora Permite o uso de simbologias que trabalhem melhor o sistema cognitivo do usuário, sem limitações “realistas”. Geralmente utiliza-se de affordances (ícones considerados por muitos desgastados para remeter a ideias). A pouca similaridade com o mundo real permite atividades não permitidas no mundo real, sem estranheza do usuário. Preso a conceitos do mundo físico, limitando a navegação em alguns aspectos.. Permite uso de atalhos e ferramentas que otimizam a navegação para os mais familiarizados com o sistema. Menor aceitação dos usuários avançados. Dificuldades de assimilação de alguns conceitos abstratos pelos iniciantes. Maior facilidade de uso por usuários inexperientes. Permite maior quantidade de texto e imagens sem um desconforto do usuário, através de uma diagramação mais fácil. Com o uso de textos e imagens pode ficar facilmente sobrecarregado.