Introdução ao desenvolvimento de interfaces

Apresentação em tema: "Introdução ao desenvolvimento de interfaces"— Transcrição da apresentação:

1 Introdução ao desenvolvimento de interfaces
Bruno Sérgio Coelho de Oliveira

2 1 O que é Interface?

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

4 Exemplo de uma interface física
1 O que é Interface? Exemplo de uma interface física

5 Exemplo de interface gráfica
1 O que é Interface? Exemplo de interface gráfica

6 Exemplo de uma interface física com gráfica
1 O que é Interface? Exemplo de uma interface física com gráfica

7 Exemplo de interface física com gráfica digital
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.

8 Exemplo de uma interface gráfica digital
1 O que é Interface? Exemplo de uma interface gráfica digital

9 Elementos da experiência do usuário
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)

10 2 Breve histórico: HCI e GUI

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

12 A invenção do mouse 2 Breve histórico: HCI e GUI
A sua patente pertence a Douglas Engelbart, fundador do Augmentation Research Center, no Stanford Research Institute registrou o invento em 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.

13 2 Breve histórico: HCI e GUI
A invenção do mouse

14 A invenção do mouse 2 Breve histórico: HCI e GUI
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.

15 O Computador Pessoal 2 Breve histórico: HCI e GUI
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.

16 O Computador Pessoal 2 Breve histórico: HCI e GUI
A interface gráfica desenvolvida na XEROX – Anos 70

17 O Computador Pessoal 2 Breve histórico: HCI e GUI
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.

18 O Computador Pessoal 2 Breve histórico: HCI e GUI
O Apple Lisa com interface gráfica – Anos 80

19 O Computador Pessoal 2 Breve histórico: HCI e GUI
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.

20 O Computador Pessoal 2 Breve histórico: HCI e GUI
Tela do Microsoft Windows 95

21 A criação da World Wide Web
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.

22 A criação da World Wide Web
2 Breve histórico: HCI e GUI A criação da World Wide Web Tim Berners-Lee, o criador da WWW

23 Interfaces na Web 2 Breve histórico: HCI e GUI
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.

24 Interfaces na Web 2 Breve histórico: HCI e GUI
Donald Norman que cunhou o termo “User Experience”

25 3 Estilos de design na Web

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

27 1ª Geração: Estruturalismo
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

28

29

30 2ª Geração: Estruturalismo com Design Gráfico
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,...)

31

32

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

34

35

36

37

38 Novas Gerações 3 Estilos de Design de Websites
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.

39

40

41

42

43

44

45

46

47

48

49

50