Post on 04-Aug-2015
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