A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

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

Apresentações semelhantes


Apresentação em tema: "Bruno Sérgio Coelho de Oliveira Introdução ao desenvolvimento de interfaces."— Transcrição da apresentação:

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

2 1 O que é Interface?

3 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 1 O que é Interface? Exemplo de uma interface física

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

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

7 1 O que é Interface? 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

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

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

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

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

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

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 histórico comercial durante o Superbowl

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 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 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 2 Breve histórico: HCI e GUI Donald Norman que cunhou o termo User Experience Interfaces na Web

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 3 Estilos de Design de Websites 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

28

29

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

31

32

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

34

35

36

37

38 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. Novas Gerações

39

40

41

42

43

44

45

46

47

48

49

50


Carregar ppt "Bruno Sérgio Coelho de Oliveira Introdução ao desenvolvimento de interfaces."

Apresentações semelhantes


Anúncios Google