Template de Interface Web

Para alcançar o objetivo geral deste trabalho, outros projetos de city dashboards foram consultados com intuito de levantar os parâmetros mais comuns e relevantes às cidades. A escolha das cidades para este levantamento foi baseada nos seus respectivos portes e características, em comparação com a cidade de Natal. A partir do resultado dessa análise os parâmetros foram agrupados considerando os que mais vezes se re- petiram. A Figura16 apresenta um gráfico com o percentual das ocorrências de cada parâmetro neste conjunto de cidades.

Essa análise orientou no desenvolvimento do primeiro template, norteando sobre os elementos que deveriam constar nessa interface. Itens de interface (clima, qualidade do ar, qualidade de água, mapas da cidade, mapa do trânsito, câmeras de tráfego, notícias, turismo, eventos, dados sobre transporte público, etc.) que geralmente constam e que são importantes para que os cidadãos tenham acesso, foram definidos nesta etapa, a partir do resultado apresentado na Figura 16. Aliado a isso, foi necessário levar em conta outro fator sobre a cidade de Natal: seu grande potencial turístico. Por isso, para esse template, usando o SmartNode Dashboard, convencionou-se que o dashboard seria voltado à cidades com características turísticas.

Para testar a funcionalidade do SmartNode Dashboard, foi criado um template utilizando um primeiro cenário para a cidade de Natal. Assim, foi possível utilizar componentes de interface capazes de ilustrar o funcionamento de um City Dashboard

Capítulo 4. SMARTNODE DASHBOARD 45

Figura 16 – Gráfico com os elementos comuns em city dashboards

com parâmetros comuns a outros centros urbanos com os mesmos aspectos. A Figura 17

apresenta a proposta de template simples, com as regras de navegação, com função de mostrar como os elementos serão dispostos em tela.

Esse layout funciona como um mapa de navegação. Com as regras que cada elemento deve seguir e consequentemente como será a visualização na tela. A Figura

17 mostra uma layout simples para tela desktop e smartphone. Todos os elementos possuem perfil similar, com variação nas dimensões de largura e altura, que representam a categorização das informações. Ou seja, mostra que cada informação pertence a um grupo de informação diferente. A proposta deste template está dividida em três áreas diferentes:

Cards fixos (CF00) : correspondem aos elementos de dados que não devem mudar. Após definido pela equipe de desenvolvimento, esses dados não devem variar seus elementos. Devem ser utilizados para elementos que devem exibir dados constantes e que sejam de extrema relevância para os cidadãos. Exemplos: níveis poluição do ar, informações do tempo, locais e disponibilidade de bicicletas, estações de metrô,

Capítulo 4. SMARTNODE DASHBOARD 46

Figura 17 – Layout do template para cidade inteligente

dentre outros;

Cards destacados (CP00) : esse espaço pode ser configurado para se tornar variável, ou seja, modificar conforme programação. Sua principal função e exibir informações com mais destaques. Pode ser configurada para exibir informações do trânsito em tempo real. Pode ser interessante a programação para ser exibida em horários de grandes fluxos de tráfego;

Cards dinâmicos (CD00) : este espaço é direcionado para mudança de informação de acordo com o local da cidade que o usuário se encontre. Dessa forma os dados são visualizados e dinamicamente atualizados de acordo com o contexto que ele esteja inserido. Oferecendo, desta forma, informações mais relevantes para que os cidadãos consigam utilizar o dashboard como uma ferramenta que os auxiliem na tomada de decisões.

A organização da interface na Figura 17 foi pensada de modo a organizar os elementos da página de acordo com a tecnologia de visualização utilizada pelo o usuário. Essa é uma preocupação com a experiência que o usuário terá ao navegar na página de visualização de dados. É comum e desejável, por exemplo, que as pessoas acessem os

dashboards utilizando seus aparelhos móveis. Apesar de ser um desafio extra para os

Capítulo 4. SMARTNODE DASHBOARD 47

o layout precisam oferecer a esses utilizadores um modelo de navegação adequada. Essa é uma preocupação que deve nortear qualquer projeto de interface, por isso, os

cards representados na Figura 17, com seus aspectos intrínsecos para serem ajustados a diversificada gama de telas, foram escolhidos como padrão de interface. Essa figura além de mostrar os itens visualizados em tela de desktops, exibir a progressão de informação em interface móvel, ou seja, como ficará a mesma interface ajustada à tela de um

smartphone.

A partir do layout proposto na etapa de planejamento de interface do template, foi criado o protótipo navegável. Os parâmetros incluídos nessa versão de protótipo são os seguintes: clima, bicicletas, qualidade do ar, linhas de ônibus, mapa do trânsito, câmeras de tráfego, agenda cultural. Para entender melhor cada parâmetro presente no protótipo, a Tabela3descreve cada um.

Tabela 3 – Parâmetros incluídos no protótipo 1

Nome Descrição

Clima Informações sobre clima: temperatura atual, velocidade do vento e umidade do ar.

Bicicletas

Informações sobre bicicletas de aluguel, e as estações são mostradas aleatoriamente: nome da estação, slots de devolu- ção disponíveis, bicicletas disponíveis.

Qualidade do Ar Informações sobre qualidade do ar: status da qualidade do ar, nível de poluição, níveis de: CO2, NO2, SO2, O3.

Linhas de Ônibus Informações sobre ônibus urbanos que circurlam nas proxi- midades.

Mapa do Trânsito Exibe o mapa com o status do trânsito em tempo real. Agenda Cultural Informações sobre eventos culturais na cidade.

Câmeras de Tráfego Exibe as imagens das câmeras de trânsito disponíveis na cidade, informa total de câmeras.

O resultado da integração entre o SmartNode Dashboard e o template é apresen- tado na Figura18. Por ainda se tratar de uma demonstração, os dados apresentados na figura são oriundos de base dados de diversos lugares diferentes. Isso foi feito com a finalidade de demonstrar a capacidade da plataforma de se adequar a diferentes APIs de dados.