Interação homem-computador

Trabalho 3

Projeto de melhoria de interface

Sabrina Millane Oliveira da Silva

Manaus/AM
Introdução
O trabalho tem como ideia principal analisar uma interface, sugerir melhorias e
apresentar para os colegas de classes suas proposta de melhorias.

Projeto de melhorias de interface

A interface analisada foi a musikcity, https://musikcity.mus.br/, que é um site do
maestro Hugo Bellard para divulgação das músicas, de algumas rádios e também um
canal para outros músicos divulgarem seu trabalho ou contratarem outras pessoas do
meio musical.
Nesta interface foi identificado diversos elementos desnecessários que atrapalhavam o
usuário na navegação, o contraste de cores não era adequado, o site era longo com
diversas informações irrelevantes e como consequências as partes essenciais acabavam
ficando apagadas.
Na interface do site, os elementos essenciais sobre o que o site oferece ficam espalhadas
ao longo da interface, o que dificulta o encontro dessas informações e como
consequência deixando-as desconectadas e de difícil encontro. A primeira mudança se
deu por adicionar um menu no topo do site para facilitar a visualização de todas as
ferramentas que o site pode oferecer e ajudando a navegação do usuário.

Figura 1: Informações essenciais desconectada com o contexto do site e difíceis de ser encontradas
 Figura 2: Nova interface com as correções de cores e um topo de menu para facilitar a visualização das
ferramentas oferecidas pelo site

Outra mudança se deu nas cores, trazendo cores mais atuais e imagens vetoriais que são
tendências entre sites de músicas. Houve a diminuição de texto não essenciais que
deixavam o site longo para o usuário.
Também foram realizadas melhorias em relação alinhamento e agrupamentos de
informações e elementos no site. Sintetizando as informações e facilitando a navegação
do usuário.

Figura 3: Interface antiga com exemplos grandes e um abaixo do outro o que deixa o site longo e com
informações desnecessárias
 Figura 4: Interface antiga com exemplos de rádios por seção

Figura 4: Informações sintetizadas que facilitam a visualização do usuário