Design de Interface

Significado de Interface

Limite comum a dois corpos, sistemas,

fases ou espaços, que permite sua ação mútua ou
intercomunicação ou trocas entre eles.

Ponto em que interagem “coisas” diversas.

Meio físico ou lógico através do qual um ou mais dispositivos ou

sistemas incompatíveis conseguem comunicar-se entre si.
Multisignificação de Interface

. Na ciência da computação
de um circuito eletrônico que controla a interligação entre dois
dispositivos hardwares e os ajuda a trocar dados de maneira confiável.

. Na Informática
de interconexão entre dois equipamentos que possuem diferentes
funções e que não se poderiam conectar diretamente.
Ex., o modem.

. Na Comunicação
como o meio capaz de promover a comunicação
ou interação entre dois ou mais grupos.

. Na Física
de superfície que separa duas fases de um sistema.

. Na Ecologia
de área de fronteira entre regiões adjacentes, e que constitui
ponto em que interagem sistemas independentes de diversos grupos.
Interface Gráfica do Usuário

Em informática, interface gráfica do usuário (abreviadamente, o acrônimo GUI, do

inglês Graphical User Interface) é um modelo de interface que permite a interação
com dispositivos digitais por meio de indicadores visuais, em contraste a interface
de linha de comando.
Foi criada pela Xerox mas somente se tornou popular com a Apple.

Os recursos típicos da interface visual são os quadros de advertência, os quadros

de dialogo, as setas de paginação, a possibilidade de utilização de diversas fontes
na tela, a equivalência entre conteúdo da tela e a página impressa e a abertura de
várias janelas na tela etc.

IPad: Hardware e software

Interface Gráfica do Usuário
Curiosidade

Na década de 1970, o centro de pesquisas Xerox em Palo Alto - o Xerox PARC

(Xerox Palo Alto Research Center) - inventa a interface gráfica moderna e os ícones.
Essas idéias serão aproveitadas em máquinas experimentais como o Alto, e mais
tarde comercializadas como o Star. Mas estas máquinas revolucionárias são muito
caras e lentas demais com as tecnologias e custos da época.

Star
Curiosidade

Alguns anos mais tarde, o sistema é apresentado a Steve Jobs, que viera
visitar o laboratório. Jobs fez os engenheiros da Apple melhorarem o
conceito, e eles acabaram projetando um modelo duas vezes mais barato
que o Star, batizado Lisa. Depois, em 1984, os engenheiros da Apple dividem
os custos pela metade mais uma vez e apresentam o Macintosh, que vem
salvar o prestígio da Apple do fracasso comercial do Apple III.

Lisa
 Curiosidade
Xerox não ousa atacar a Apple na justiça por violação de propriedade intelectual, o que não
impede a Apple de atacar a Digital Research na justiça, que realizara uma cópia idêntica da
interface para o PC : Digital Research é obrigada pela justiça a degradar sua interface até
torná-la inutilizável.

Alguns anos mais tarde, a Apple faria um processo similar contra a Microsoft pelo Windows
3.0 e, principalmente, Windows 3.1, mas a opinião dos juízes sobre a propriedade das idéias
de interface (e não do código que a implementa) mudou consideravelmante, e a Apple não
ganharia a causa.
Win 3.0 Star

Lisa
Projetando a interface
. Arquitetura de Informação

Organizações contam com a AI como uma competência crítica para diversos

perfis de profissionais como, por exemplo, os estrategistas de internet,
designers de interação e os arquitetos de conhecimento. Em ambos os casos,
boas práticas em arquitetura de informação dão suporte ao desenvolvimento
de interfaces que facilitam o fluxo de informação útil e relevante para o usuário.

Os objetivos de negócio ditam o design ou um redesign significante

de uma interface de usuário ou website

Card Sorting - Método usado para categorizar e subdividir conteúdo.

Projetando a interface
. Arquitetura de Informação

Arquitetura da informação é definida pela Information Architecture Institute

http://www.iainstitute.org/ como:

“Information architecture is the practice of deciding how to arrange the parts of

something to be understandable.”

Algumas organizações definem claramente o perfil dos Arquitetos de Informação, que

têm um papel decisivo no desenvolvimento de processos tanto para sistemas de
arquivos quanto arquitetura de produto.

Eye Tracking - Método usado para definir posição do olhar no monitor.

 Ferramentas utilizadas na Arquitetura de Informação

.Fluxograma

Fluxograma é um tipo de diagrama, e pode ser entendido como uma representação

esquemática de um processo, muitas vezes feito através de gráficos que ilustram de forma
descomplicada a transição de informações entre os elementos que o compõem. Podemos
entendê-lo, na prática, como a documentação dos passos necessários para a execução de
um processo qualquer.

Exemplos de softwares para desenvolvimento de fluxogramas:

DIA, Draw, Inskape, Visio, SlickPlan, RobotProg, BizAgi Process Modeler, etc.
.Wireframe

Wireframe é um esqueleto da página, deve ser feito antes de iniciar a montagem do layout. O
objetivo do wireframe é ajudar o desenvolvedor de sistemas a entender o que o cliente está
querendo, mostrando os requisitos funcionais.
Wireframes permitem também o desenvolvimento de variações de um layout
para manter a consistência do design através dos dispositivos.

Exemplos de wireframes:
Desenhando a interface
O desenho da interface está diretamente ralacionado aos critérios definidos pela arquitetura
de informação. Cabendo ao designer levar em conta tanto o aspecto lógico quanto o aspecto
conceitual da interface, definindo as metáforas utilizadas e sua adequação ao público alvo.
Os layouts são feitos em softwares de desenho convencionais, sendo o Adobe Photoshop o
de maior aceitação, usado em grandes corporações e por “heavy users”.

Exemplo de interface utilizada no sistema operacional LINUX.

O designer de interface tem como principal atividade, criar elementos que compõem o
espaço explorado pelo usuário. É de sua responsabilidade a criação do padrão gráfico
adotado, as relações de figura/fundo, e acabamento dos elementos, sejam eles janelas,
botões, ícones, barras de rolagem, animações, etc.

Interface de opções do Playstation 3.

Interface de jogos do Playstation 4.

 Cabe também ao designer de interface dialogar com o programador da mesma, com a
finalidade de alinhar as possibilidades de exploração gráfica. Evitando maiores problemas
na implementação do sistema. Devido ao fato de termos variadas formas de interface
visual, leva-se em conta o formato da tela, sua resolução em pixels e o tipo de publicação
[plataforma]. Ex.: Web, TV, Mobile, Tablet, etc.

IPad: resolução de 1024x768 pixels

IPhone 6:
5,5” Resolução de 1920 x 1080 pixels, 401 ppi
4,7” Resolução de 1334 x 750 pixels, 326 ppi

Computador: resolução variável.

IPad retina: resolução de 2048x1536 pixels

264 pixels per inch (ppi)
IPad pro: resolução de 2732 x 2048 pixels,
264 pixels por polegada (ppp)