USER EXPERIENCE

USER EXPERIENCE

A definição padrão de UX é "percepções e respostas que resultam do uso ou utilização prevista de um produto, sistema ou serviço".

O design não tem a ver só com a questão estética e visual. Cada vez mais o design assume uma posição estratégica e tem muito mais relação com usabilidade e aproximação com o usuário, do que com apenas deixar algo bonito.

2

USER EXPERIENCE

Esses fatores estão relacionados ao design,

usabilidade e acessibilidade, mas também a

emoções e sentimento ligados no usuário.

3

USER EXPERIENCE

Os controles de interface devem ser intuitivos e

fáceis de usar. O usuário deve saber como

movimentar, entender e interagir com um site

sem a necessidade de explicações ou preparação

prévia, na medida do possível.

4

USER EXPERIENCE

5

USER EXPERIENCE

6

A HISTÓRIA DA INTERFACE GRÁFICA

A forma como o ser humanos interagem com os

computadores esta sempre em constante revolução!

Passou da linha de comando de texto para desktops

em três dimensões e softwares que aceitam comandos

por voz ou gestos.

7

O PAI DO MOUSE E DA INTERFACE GRÁFICA

Com o simples propósito de facilitar e tornar mais

intuitiva a utilização das máquinas.

Inspirado pelo trabalho de Bush, Douglas Engelbart.

Ele acreditava que, com informações dispostas em

uma tela, o usuário poderia se organizar de

maneira gráfica e pular de uma informação para

outra, sempre que necessário.

8

Periféricos demonstrados por Engelbart em 1968

O PAI DO MOUSE E DA INTERFACE GRÁFICA

9

Como no caso do Memex, as idéias de Engelbart

estavam muito à frente de sua época.

Em 1962, até mesmo interfaces em modo texto, com

comandos sendo executados em tempo real, em vez da

concorrência que usava cartões perfurados.

O PAI DO MOUSE E DA INTERFACE GRÁFICA

10

O PAI DO MOUSE E DA INTERFACE GRÁFICA

Mas o mouse foi apenas uma das muitas inovações

demonstradas naquele dia.

Que também trouxeram o hipertexto, comunicação por rede e tela compartilhada em locais diferentes, que trabalham em conjunto, a videoconferência

Porem os softwares desenvolvidos na época ainda não trabalhavam com o conceito de janelas.

11

SURGIMENTO DE JANELAS (1974)

Só veio depois do surgimento da Smalltalk ( uma linguagem de programação e ambiente de desenvolvimento) que possuía uma interface gráfica diferenciada, a GUI começou a ganhar aspectos mais modernos, em 1974.

Ela possui uma particularidade:

TUDO É OBJETO: os números, as classes, os métodos, blocos de código, etc.

Smalltalk-72 (no qual muitas das funcionalidades de mídia foram implementadas, da capacidade de desenhar até programas de música e linguagens de programação icônicas)

12

PARECE BOBAGEM, MAIS:

A grande inovação foram as janelas, já que ela

não existiam nem possuíam bordas e barras de

títulos que permitiam a identificação e o

reposicionamento delas.

oO conceito de ícones

também surgiu na mesma

época, assim como o menu

de contexto. No mesmo

período, também foram

apresentadas as barras de

rolagem, as caixas de

diálogo e os botões de

opções (radio buttons). 13

LISA

A criação do Lisa em 1978, foi um divisor de águas. Já que ele contava com a contratação de ex-funcionários da Xerox, podendo assim a Apple iniciar o desenvolvimento do computador pessoal Lisa, em 1978.

Tendo uma interface baseada em ícones, em que cada um deles indicava um documento ou uma aplicação.

Além disso, a equipe

criou a primeira barra de

menu desdobrável (pull-

down), que hospedava

todos os menus logo nas

primeiras linhas da tela. 14

TAMBÉM FICARAM DO LISA:

A marcas de verificação (checkmarks), que ajudam a destacar os itens do menu que estejam ativados, o conceito de atalhos de teclado.

Outra novidade que ficou foi o ícone da Lixeira, para onde o usuário podia arrastar arquivos para removê-los posteriormente.

O mouse, que havia se consagrado com três botões, passou a ter apenas um no Lisa e, como a interface exigia pelo menos duas ações para cada ícone, uma para selecionar e outra para executar o programa ou arquivo, foi criado o conceito de duplo clique.

15

OUTRA EMPRESA QUE TRABALHOU COM INTERFACE

A VisiCorp, também estava trabalhando em

interfaces gráficas para computadores pessoais.

Só que para planilha eletrônica VisiCalc, a

empresa lançou uma interface para PCs, em

1983, não fez muito sucesso.

Além do preço alto e de

exigir muito recurso de

hardware, a VisiOn, e

como deixar de usar

ícones e eliminar o

cursor do mouse.

Então caiu em desuso.

16

Interface GEM (interface gráfica para o DOS )

1º versão do Microsoft Windows (cada janela tinha a sua própria

barra de menus,)

Dock, 1º a usar fontes com anti-aliasing, mesmo em modo de 16 cores.

Introduziu uma aparência 3D aos seus componentes 1ª a usar o botão em forma de “X”.

ENTRE OUTROS

17

ENTRE OUTROS

Executado com suporte à rede, se tornou a base

dos ambientes gráficos do Linux.Trouxe o fato de

poder habilitar o foco em uma janela apenas

posicionando o mouse sobre ela, sem clicar.

Atualmente, muitos projetos gráficos ainda fazem

uso do X, com o KDE e o GNOME.

GNOME

18

ANOS 90

Durante os anos 90, apenas duas empresas

resistiram: a Microsoft e a Apple.

As demais entraram em falência ou foram

adquiridas por outras companhias.

19

APPLE (ANTES E DEPOIS)

Continuou inovando e lançou a interface Aqua, o Mac OS X. Uma aparência nova, mais a principal novidades era o fato de que as janelas podiam ser redesenhadas rapidamente, e de uma maneira imperceptível aos olhos, quando movidas ou redimensionadas.

Antes do Aqua Depois do Aqua

20

AQUA

Ele trouxe os efeitos de animação executados para o ato

de minimizar programas. Atualmente usa-se o conceito

de Epxosé ( é uma ferramenta do Mac OS X, que

facilita o gerenciamento das janelas dos programas

abertos, permitindo que o usuário possa ter uma rápida

visualização de todos os aplicativos em funcionamento,

sem a necessidade de clicar em cada um deles.)

Não há dúvida de que

uma enorme influência

na aparência do Aqua

com todos os seus botões

e riscas e translucidez

foi a enorme

popularidade do iMac:

21

AQUA INFLUENCIOU

Quando o Aqua foi lançado ele influenciou tanto o

mundo gráfico que nos próximos 5 anos ou mais

cada coisa que os designers produziam tinha um

brilho desnecessário:

Seguindo esta mesma idéia o Windows XP, em

2001; lançou a Interface de Usuário Luna.

22

MICROSOFT

Com o lançamento do Windows Vista, pudemos ver a estréia do Aero, responsável pelos efeitos visuais de sombra e transparência da Área de trabalho.

Com o Windows 7, a interface foi aprimorada, ganhando suporte a telas touchscreen e multitouch, além de apresentar uma barra de ferramentas totalmente reformulada e o Aero Shake, que permite interação com as janelas ao sacudi-las.

23

WINDOWS AERO

O estilo visual diferenciado do Aero combina a aparência de janelas leves e translúcidas com poderosos avanços gráficos.

Bordas de vidro das janelas, os comportamento de janelas também foi reprojetado, animações sutis ao minimização, a maximização e o reposicionamento das janelas para um efeito mais suave e fácil.

Windows Flip 3D, permite

organizar as janelas abertas

em uma pilha tridimensional

que você pode percorrer

rapidamente sem precisar

clicar na barra de tarefas.

24

LINUX

Um exemplo é o Compiz-Fusion, é um software que dinamiza o

seu ambiente de trabalho com fantásticas animações gráficas,

direcionando para a placa de vídeo algumas instruções especiais

proporcionando efeitos que usufruem da capacidade de aceleração

3D que ela pode oferecer.

O mais importante é que mesmo com essa grande

quantidade de efeitos, o Compiz-Fusion (XGL) é bem leve e

não transforma seu computador em uma carroça.

25

APPLE, MUDA NOVAMENTE (SIMPLIFICAÇÃO)

Mas, mesmo apesar da popularidade da estética de plástico colorida, translúcida e brilhante, a Apple tornou-se mais e mais contida, com seus projetos de hardware ao longo do tempo:

A marcha implacável do design, simplificação e estilo no hardware teve um efeito semelhante no software, com a transparência sendo reduzida, a visibilidade das riscas sumindo até desaparecer por completo, a introdução de interfaces de metal escovado, todo o caminho para algo não muito diferente para a interface antiga, predominantemente cinza de MacOS 9:

26

27

EM PARALELO

Apple lançou o famoso iPhone, a grande revolução

no mercado de celular.

Na época, não havia nada semelhante ao smartphone

e sistema da Maçã.

O iOS foi criado com base

no OS X e introduziu ao

mundo recursos de fácil

uso. Recentemente, o

sistema passou por uma

reformulação em seu visual

e continua dando passos

largos na introdução de

novos recursos.

28

SIMPLIFICAÇÃO ATÉ POR IPHONE, :

Esta mudança não é específica ou exclusiva para o Mac; Isso

aconteceu em toda a indústria.

Inclusive no Iphone, muitos aplicativos (incluindo o Skype)

foram liberados com as sobreposições de ícones brilhantes.

Mas, como o Mac OS X passou de olhar excitante e

refrescante para uma monstruosidade berrante ao longo dos

anos, que a interface de tela inicial do iPhone OS mudou, é

agora 6 anos de idade.

29

SE VOCÊ NÃO ESTÁ MELHORANDO, VOCÊ ESTÁ

INDO PARA TRÁS.

E como o Iphone esta ficando mais ou menos o mesmo,

a concorrência aproveitaram a oportunidade para

fazer algo radicalmente diferente, avançando na

tecnologia passaram a ter este visual:

5 anos de Android Depois do Aqua

30

WINDOWS PHONE linguagem de design Metro, Microsoft decidiu

redesenhar a interface e com mais foco em tipografia limpa e menos na UI cromo.

Estes princípios e do novo Zune UI foram transportados para Windows Phone e também para o Windows 8.

O cliente Zune Desktop também foi redesenhado, com ênfase em tipografia e design clean que era diferente da anterior

31

LIMPEZA

Criar uma experiência limpa e propositiva, deixando

apenas os elementos mais relevantes sobre tela.

Quando se trata de projetar grandes experiências de

aplicativos, acreditamos no conteúdo, e não o Chrome.

Concentrando-se em conteúdo sobre cromo reduz

elementos desnecessários.

32

INTEGRANTES DO GRUPO

Diego Vieira;

Wesley Luan;

Yasmim Luiza;

33

BIBLIOGRAFIA:

http://www.tecmundo.com.br/historia/9528-a-historia-da-

http://ux.stackexchange.com/questions/35576/what-explains-the-current-shift-from-glossy-uis-to-matte-uis

http://forum.outerspace.terra.com.br/index.php?threads/especial-a-historia-dos-antigos-computadores-da-apple-computer.85739/

http://news.squeak.org/2007/12/29/old-smalltalk-pics-from-parc-place/

http://windows.microsoft.com/pt-br/windows-vista/what-is-windows-aero

http://www.baixaki.com.br/linux/download/compiz-fusion.htm

http://www.tecmundo.com.br/linux/2031-a-historia-dos-sistemas-operacionais.htm

34