Introdução ao
desenvolvimento
de interfaces
Bruno Sérgio Coelho de Oliveira
1 O que é Interface?
1 O que é Interface?
• Uma interface é o dispositivo que serve como limite
entre diferentes entidades comunicantes (emissorreceptor)
• Podemos entendê-la também como uma fachada, ou
seja, é a face que o produto apresenta ao mundo.
• A interface pode ser entendida também como uma
superfície de relacionamento. Neste sentido, tanto a
tela do computador quanto o cabo de um martelo
podem ser compreendidos como uma interface.
“Comunicação não é o que você fala, mas sim o que
o outro entende.”
1 O que é Interface?
Exemplo de uma interface física
1 O que é Interface?
Exemplo de interface gráfica
1 O que é Interface?
Exemplo de uma interface física com gráfica
1 O que é Interface?
Exemplo de interface física com gráfica digital
Existem milhares de soluções
para a interface de um mesmo
tipo de produto, como um
celular.
Conhecer bem a interface de
seu celular não significa um
bom conhecimento da
interface do celular de uma
amigo seu, por exemplo.
1 O que é Interface?
Exemplo de uma interface gráfica digital
1 O que é Interface?
Elementos da
experiência do
usuário
(Jesse James Garrett, 2000)
A interface pode aqui ser
considerada como a parte
visível (concreta) construída
a partir de um estrutura
funcional invisível (abstrata)
2 Breve histórico: HCI e GUI
2 Breve histórico: HCI e GUI
Temos a seguir importantes fatos que contribuiram para o
estado atual tanto da HCI (Human Computer Interaction),
quanto das UI (User Interface ou também HCI: Human
Computer Interface).
As GUI (Graphical User Interface) são nada mais nada
menos que um típo de UI que recebem entrada de dados
via acessórios como o mouse e o teclado e exibem estas
informações em um monitor.
2 Breve histórico: HCI e GUI
A invenção do mouse
• A sua patente pertence a Douglas Engelbart, fundador do
Augmentation Research Center, no Stanford Research
Institute registrou o invento em 1970. Bill Enghlish foi que
construiu o invento sob as especificações de Engelbalt .
• Engelbart apresentou este periférico pela primeira vez
em 9 de dezembro de 1968 denominando-o de "XY Position
Indicator For A Display System". Constituía-se então em
uma pequena caixa de madeira com apenas um botão. O
invento de Engelbart ficou sem muita utilização devido a
falta de necessidade do dispositivo, pois a maioria dos
computadores utilizavam apenas textos sem cursores na
tela, até mesmo durante a década de 80.
2 Breve histórico: HCI e GUI
A invenção do mouse
2 Breve histórico: HCI e GUI
A invenção do mouse
• A partir da primeira metade da década de 1980, mais
precisamente em 1983, a Apple passou a utilizar o mouse
como dispositivo apontador em seus micros Apple Lisa. De
de lá para cá o periférico tornou-se parte integrante dos
atuais PCs.
• O Windows da Microsoft foi criado sem mouse, mas
navegar na Internet seria impossível sem o mesmo. Podese dizer que a partir do lançamento do Windows 3.1, em
abril de 1992, o lugar do mouse estava assegurado.
2 Breve histórico: HCI e GUI
O Computador Pessoal
• Em 1973 surge o primeiro computador pessoal produzido
pela XEROX no PARC (Polo Alto Research Center)
• O Surge na mesma época o primeiro sistema comercial
com um editor WYSIWYG, mouse e Interface gráfica
financiados pela Xerox.
• Como o sistema não foi considerado interessante pelos
executivos da Xerox, foi autorizado a apresentação do
mesmo para Steve Jobs, um dos fundadores da Apple,
alguns anos depois.
2 Breve histórico: HCI e GUI
O Computador Pessoal
A interface gráfica
desenvolvida na
XEROX – Anos 70
2 Breve histórico: HCI e GUI
O Computador Pessoal
• Em 1979 a Xerox libera para a Apple o conhecimento dos
seus pesquisadores sobre o desenvolvimento de interfaces
gráficas baseadas em janelas e no uso do mouse.
• Em 1982 a IBM começa a produção do PC (Personal
Computer), utilizando o DOS (Disk Operational System)
desenvolvido pela Microsoft, de Bill Gates e Paul Allen.
• Em 1983 é lançado o “Apple Lisa”, desenvolvido por
Steve Jobs e outros engenheiros da Apple a partir dos
conhecimentos de interface liberados pela Xerox.
2 Breve histórico: HCI e GUI
O Computador Pessoal
O Apple Lisa
com interface
gráfica – Anos 80
2 Breve histórico: HCI e GUI
O Computador Pessoal
• Ainda em 1983, ano de lançamento do Lisa, Bill Gates
tem acesso aos códigos do sistema da Apple e baseando-se
na mesma concepção de interface baseada em janelas e
interação com o mouse, lança o Windows, que populariza
o PC e revoluciona a história da informática, tornando-se
o sistema operacional mais vendido de todos os tempos.
• Em 1984, o Macintosh da Apple é lançado em um
histórico comercial durante o Superbowl, mas apesar de
ter se envolvido em uma batalha judicial com a Microsoft
devido a cópia do seu GUI, perdeu mercado e só voltou a
se reerguer com o lançamento do iMac em 1998.
2 Breve histórico: HCI e GUI
O Computador Pessoal
Tela do
Microsoft
Windows 95
2 Breve histórico: HCI e GUI
A criação da World Wide Web
• Em 1991, Tim Berners-Lee cria a WWW, a World Wide
Web, ou simplesmente Web. Colocada em domínio público
e com a criação dos Webmails, a Web torna-se a interface
mais utilizada na Internet e faz com que a mesma cresça
exponencialmente em conteúdo e quantidade de Websites.
• Empresas percebem rapidamente seu potencial e
começam a enxergar a Internet como uma importante
forma de comunicação e uma questão de marketing.
2 Breve histórico: HCI e GUI
A criação da World Wide Web
Tim Berners-Lee,
o criador da
WWW
2 Breve histórico: HCI e GUI
Interfaces na Web
• Em 1993, Donald Norman usa o termo “User Experience”
para definir a experiência do usuário ao utilizar uma
interface Web.
• Em seu livro, "The Design of Everyday Things", Norman
também usa o termo “User-Centered Design ” para
descrever o design baseado nas necessidades do usuário,
deixando de lado o que ele julga secundário, questões como
estética. User-centered design envolve simplificar a
estrutura de tarefas, fazendo coisas visíveis.
2 Breve histórico: HCI e GUI
Interfaces na Web
Donald Norman
que cunhou o
termo “User
Experience”
3 Estilos de design na Web
3 Estilos de Design de Websites
Com o desenvolvimento e incremento da Internet, podemos
perceber também a existência de gerações ou estilos de
concepção de interfaces na web, que convivem no atual
ciberespaço.
Apesar destas gerações não terem uma relação de ordem
cronológica, podemos dizer que elas correspondem à
tendências existentes na Web desde seu nascimento até os
dias de hoje. A diferença entre estas gerações está na
técnica e forma de exibição do conteúdo, muitas vezes
influênciadas pelas características e tecnologias da época.
3 Estilos de Design de Websites
1ª Geração: Estruturalismo
Principais características:
• Réguas horizontais e muitos elementos horizontalizados
• Textos grandes, complexos e em linhas extensas
• Imagens sem tratamento ou em baixa resolução
• Uso de gifs animados
• Layout com frames
• Contadores de páginas e livros de visitas
3 Estilos de Design de Websites
2ª Geração: Estruturalismo com Design Gráfico
Principais características:
• Similaridade – Sites muitos parecidos e previsíveis
• Hierarquia – Organização estrutural complexa
• Horizontalidade – Ainda bastante presente
• Simetria – Equilíbrio visual baseado na simetria dos
elementos da página
• Excesso de imagens, cores e luzes
• Excesso de elementos estruturais (caixas, fios, divisões,
colunas,...)
3 Estilos de Design de Websites
3ª Geração: Design Gráfico domina a estrutura
Principais características:
• Programação Visual – Equilíbrio baseado em cores e
disposição artística dos elementos
• Interface limpa – Principalmente baseada na importância
de uma navegabilidade segura e com menos elementos
visíveis supérfluos de estruturação.
• Otimização – Preocupação com acesso rápido, eficiente e
com tempo de visitação otimizado.
• Galeria de informação – Maior número de páginas com
menos informação e com isso, menor tamanho de scroll
3 Estilos de Design de Websites
Novas Gerações
Principais características:
• Ênfase e valorização de recursos multimídia (animações e
vídeos), permitido pelo carecimento do acesso banda larga.
• Sites como ferramenta de marketing
• Identidade visual dos sites atreladas às campanhas
publicitárias das empresas.
• Interfaces personalizadas ou customizáveis.
• Interfaces experimentais e uso de interatividade mais
rica do que a atual através de recursos como Flash e AJAX.
http://www.suahellmans.com.br.com
http://www.seagullsfly.com
http://www.cocacolalight.com.br/sabores
http://www.dontclick.it
http://www.red-issue.com
http://ony.ru/#/ony