bruno sérgio coelho de oliveira introdução ao desenvolvimento de interfaces

Bruno Sérgio Coelho de Oliveira

Introdução ao desenvolvimento de interfaces

1 O que é Interface?


• Uma interface é o dispositivo que serve como limite entre diferentes entidades comunicantes (emissor-receptor)

• 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.”


Exemplo de uma interface física


Exemplo de interface gráfica


Exemplo de uma interface física com gráfica


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.

Exemplo de interface física com gráfica digital


Exemplo de uma interface gráfica digital


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


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.

• 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.

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. Pode-se dizer que a partir do lançamento do Windows 3.1, em abril de 1992, o lugar do mouse estava assegurado.



• 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.

O Computador Pessoal




A interface gráfica desenvolvida na XEROX – Anos 70



• 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.



O Apple Lisa com interface gráfica – Anos 80



• 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.



Tela do Microsoft Windows 95

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.

A criação da World Wide Web


Tim Berners-Lee, o criador da WWW

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.


Donald Norman que cunhou o termo “User Experience”

Interfaces na Web

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.


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

1ª Geração: Estruturalismo



• 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,...)

2ª Geração: Estruturalismo com Design Gráfico



• 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ª Geração: Design Gráfico domina a estrutura



• Ê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.

Novas Gerações

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

bruno sérgio coelho de oliveira introdução ao desenvolvimento de interfaces

Documents