A Interface Humano Computador

Introdução

Há muitos elementos com o que se preocupar, sobretudo com o design, mas principalmente com o usuário. O layout da interface não se resume apenas à sua aparência, contribui para a experiência subjetiva e emocional de recepção e ação.

A Interface Visual que adaptamos foi através do website de uma Escola Infantil (https://www.unisantahelena.com.br/), transformando o formado para Mobile. Encontramos vários tipos de problemas visíveis como a fontes, cores, imagens, e composições que são partes funcionais do design da informação, visual e interação.

O layout influência na primeira impressão, como diz o ditado: “A primeira impressão é a que fica.” Uma boa impressão facilita a compreensão da estrutura do conteúdo, do conceito, e das da funcionalidades.

Fizemos com que a informação fiquem claras e quando for necessária em um dado momento da realização de uma tarefa. Utilizamos gráficos cores, ordenação de itens, sequenciamento de informações diferentes e espaçamentos de itens.

Evitamos entulhar a interface com muita informação, sem resultar uma mistura de mídias que acaba por distrair o usuário em vez de auxiliá-lo a prestar atenção nas informações relevantes.

Erros encontrados:

Layout não atraente

Tipografia ruim

Cores

Navegação confusa

Layout não atraente

O Layout original não tinha criatividade, por assim só, pensamos em mudar nos elementos gráficos, tendências e composições.

Tipografia ruim

Utilizaram fontes ruins e fizeram o uso de títulos muito grandes. Então pensamos em usar a tipografia mais adequada no layout, facilitando a leitura, tamanho, cor e contrate com o fundo. Estabelecendo um padrão para textos e títulos.

Cores

Existia múltiplas cores, apesar de que o website era de uma Escola Infantil, é preciso manter um equilíbrio e harmonia, então apostamos em boas composições, estudando os tons para equilibrar. Usando as cores primárias, Verde, Vermelho, Amarelo e Azul.

Verde:

Usamos o verde por ser uma cor mais ligada a temas naturais. Representando novos começos, crescimento e abundância.

Vermelho:

O vermelho é versátil, no designer a cor é de referência poderosa.

Amarelo

É considerada a cor quente mais clara e enérgica. Amarelos mais suaves são usados como uma cor unissex para bebês e crianças mais novas. Em tonalidade mais claras, transpassa um sentimento calmo de alegria.

Azul:

Usamos bastante o azul claro por ser uma cor relaxante e que lembra a maternidade.

Navegação confusa

A interface se encontrava confusa, recheada de conteúdo misturados, faltando coerência, adaptamos para algo mais acessível cm uma bota navegação, assim o usuário alcança seu objetivo, fazendo o caminho mais curso, ou seja, simples e direta.

Elementos Utilizados

Menu

O Menu do nosso aplicativo fica no cabeçalho a esquerda. Assemelhamos isso a forma como nós enxergamos as páginas ao visita-las. Ao acessar o formato procuramos primeiramente pela esquerda.

Calendário de Eventos

No calendário de eventos tornamos a interface mais simples e objetiva, usando a criatividade com elementos gráficos.

PARTE II - GRAU B

Melhorias:

O Layout do nosso mobile foi totalmente modificado, alterando as cores por umas mais neutras, mantendo ainda o equilíbrio e harmonia, tornando a interface agradável para passar as informações de maneira direta. Agora ele é mais prático, sendo assim é preciso só ‘’arrastar para baixo’’ para visualizar todas as informações.

Tarefas:

A Tarefa usada na nossa interface foi o Cadastro dos Alunos em Cursos.

...