Omradio re-design

A OmRadio é um projeto consolidado de uma radio online, arquitetado, desenvolvido e mantido com extremo zelo pelo Matheus Souza em sua infraestrutura pessoal e utilizando o Sistema Operacional para servidores FreeBSD; Na web radio são divulgados seus trabalhos como produtor musical e músicas do seu repertório atualizado como DJ na cidade de Fortaleza/CE. Fui convidado a auxiliá-lo no projeto de software, utilizando as seguintes tecnologias:

  • HTML5
  • CSS3
  • Javascript + JQuery

Status do website
Já conhecia a OmRadio? http://omradio.xyz
Visite, conheça e volte para este artigo, pois nos próximos parágrafos irei abordar os aspectos técnicos de TI deste projeto.

Mas meu trabalho consistiu principalmente na Interação Humano-Computador (IHC) do front-end, que obrigatoriamente deveria ser responsivo para desktop e dispositivos móveis modernos (vou explicar o porquê, utilizando as informações de análise de tráfego que colhemos, mas posteriormente…), enquanto ele desenvolvia as particularidades do back-end, como o Streaming via protocolo HTTP 1.1 (stateless), como na forma Multicast IP e a organização e esquemas da reprodução das estações com a tecnologia Python. Aproveitamos também para discutir e viabilizar uma maneira legal, em termos de lei, para distribuir conteúdo multimédia via streaming, sem afetar o copyright ou a propriedade intelectual dos artistas, e, informar ao usuário de maneira transparente sobre as informações que coletamos no site e principalmente, como utilizamos essa informação.

O código-fonte da versão 1.0.0 está disponível para acesso e download em meu repositório pessoal: https://coderi.com.br/redmine/projects/omradio-web-client/repository

Como sabemos, o re-design é a reformulação do design. Essa necessidade de renovação surge por diversas razões. Pode ser pelo aparecimento de novas técnicas, de novos materiais, para eliminar falhas existentes ou como estratégia de marketing para renovar um produto no mercado.

Como nós iniciamos?
Buscamos conhecer a resolução de tela e o sistema operacional dos usuários que visitaram a OmRadio durante o período de testes.

Com a posse destas informações imagina-se uma lista de restrições formais…
Aqui vou elencar algumas técnicas que utilizei e aprendi durante a graduação em Engenharia de Software na Universidade Federal do Ceará – Campus Quixadá, bem como ferramentas e utilitários que podem ajudar neste trabalho.

Compreendendo o acesso dos usuários (Via Desktop/Mobile)

Após projetarmos o produto mínimo viável (MVP), durante os meses de julho e agosto, decidi colher inteligência sobre a navegação e a interação de todos usuário com nosso sistema.

Por exemplo, registramos ao longo deste período os cliques e a movimentação do mouse dos usuários pela interface, e através da compilação dos dados em gráficos de heatmap pudemos compreender melhor como decorre a navegação dos usuários:


Bem como indiretamente, conseguimos calcular a representação do percentual de acesso por determinada estação, região, horário e navegador:

Tivemos um usuário que decidiu brincar um pouco no site, realmente esse tipo de interação por mais que seja lucubrada, planejada e testada, pode-se notar claramente com este exemplo que nem sempre os esforços são suficientes.

Você deve estar se perguntando agora:
E o que foi aprendido… Qual a lição aprendida?

Após notado um alto número de “refresh” (atualização forçada pelos controles do navegador) pudemos notar a necessidade de uma feature, exclusivamente para alterar o background da interface, pois comprovamos que os usuários atualizavam a página somente para permutar a imagem de background, este intencionalmente planejado para ser único a cada novo acesso por parte do usuário.
Requisições HTTP desnecessárias custam caro! =)

Visão geral com algumas informações demográficas

Abaixo está o screenshot de acesso à OmRadio que foi publicada ontem (24/08/2015).

Logicamente, essas informação são bastante relevantes quando conseguimos compará-las com os dados que coletamos utilizando análise de tráfego, durante este mesmo período de estudos e coletas.

– Média de Idade e Sexo dos usuários:


– Idioma:

– Fonte de origem de tráfego:

– Navegadores:

Ex: Abaixo as versões do navegador Chrome

Concluindo

Utilizamos toda informação acima, com detalhes e cuidado e então projetamos a interface a seguir, um pouco mais rica, atentando à experiência do usuário (UX), seguindo alguns dos preceitos do single-page aplication (SPA), além de:

  • auxiliar o usuário com uma nova feature de sistema de Tour explicando e auxiliando sobre os novos recursos adicionados.
  • adicionamos features com funções sociais (Facebook, Twitter e Google+).
  • adicionamos um feedback em forma de semáforo para exibir de maneira intuitiva e não intrusiva a disponibilidade de cada estação.
  • e detalhamos consistentemente as informações do autor.

Um grande projeto!
Boa sorte Matheus.