Felipe Gonzalez ‐ Processo Seletivo CI. 

 

Arquitetura da Informação. 

A construção do layout referente às páginas  http://www.ci.com.br/estudar-no-exterior/cursos-de-idiomas.nese/sedes.boston/cursos.curso-de-ingles.4-semanas e http://www.ci.com.br/fazer-uma-viagem/mochilao-ci/sugestoes-de-roteiro.mochilao-explorer?id=278842 teve como conceito a arquitetura semântica de websites. O objetivo é apresentar uma proposta de melhoria na navegação da página, tornando o conteúdo mais atraente, para que o usuário permaneça mais tempo no site.  Após a realização de uma avaliação heurística seguida de um benchmarking identifiquei alguns pontos que demonstram falhas na navegação do site.      Falhas de Navegação encontradas:  

1. Bread Crumbs – O caminho para a página está confuso. 2. As fotos da página Boston/ Nese estão em baixa resolução e mal distribuídas no site. 3. As fotos não possuem nenhuma legenda e não apresentam autoria 4. Produtos relacionados não demonstram relevância com o conteúdo da página. 5. O Box content referente aos eventos não apresentam relevância na página. 6. Itens duplicados com a mesma funcionalidade 7. Fonte apresenta variação de acordo com o navegador 

 Internet Explorer – fonte: Calibri  Google Chrome ‐ fonte:  Lucida Sans Unicode 

8. Erro de rotulação FAQ – o site está em português BR, apesar de consagrado pelo o uso, é aconselhável substituição do rótulo para melhor identificação do usuário. 

9. A apresentação das cidades na página mochilão Explorer está confusa. 10. Texto com poucas informações  11. Falta de conteúdo multimídia e gráfico 

                 

Sugestões de Arquitetura da Informação para a página Boston/Nese  De acordo com as falhas apresentadas sugiro algumas melhorias pontuais na página com o objetivo de facilitar a navegação e tornar o conteúdo mais atrativo para a permanência do usuário por mais tempo no site.  

          

1. Bread Crumbs  Os Bread Crumbs podem ser utilizados como menus drop downs facilitando a navegação e organizando melhor a informação para o usuário: Exemplo de Bread Crumb drop down http://www.lonelyplanet.com/usa/cape‐cod  2.Banner com menu em Jquery  O menu com imagens é mais atrativo graficamente e pode auxiliar a navegação do usuário sem que ele tenha que rolar a página até o fim. Os menus laterais tem a finalidade de complementar à informação ao usuário. Eles seriam direcionados: Botão: Escola/ Nesse ‐ http://www.ci.com.br/estudar‐no‐exterior/cursos‐de‐idiomas.nese Botão: Cidade/ Boston ‐ http://www.ci.com.br/guia‐mundo/especial‐cidades.boston Botão: País/ Eua ‐ http://www.ci.com.br/guia‐mundo/pais.estados‐unidos   3. Conteúdo multimídia e Dúvidas frequentes  O conteúdo multimídia está ao lado esquerdo seguindo o estudo de leitura dos internautas em F. O Box apresenta informações complementares e está compactado em um tabbed content para melhor distribuição do conteúdo. O mesmo acontece com a aba Dúvidas Frequentes que complementa as informações apresentadas no texto. A sugestão em mudar a rotulação de FAQ para Dúvidas Frequentes se dá pela assertividade do termo ao conteúdo.  4. Texto  Foi apresentado um texto introdutório com objetivo de estimular o usuário a navegar pelo site. O texto foi construído com base nos textos descritivos do próprio site da CI, garantindo a identidade na forma escrita dos conteúdos.  Segue texto proposto: Texto Boston/Nese 

Viaje pela história da Revolução Americana e estude inglês em um dos mais famosos centros estudantis do mundo. Conheça Boston e sinta a riqueza multicultural que essa metrópole pode lhe oferecer. 

Capital do estado de Massachusetts, Boston foi fundada pelos ingleses em 1630 e tem uma rica história colonial com um grande espírito libertário. Além de ter sido o berço da Revolução americana, Boston é uma cidade com forte economia, representando a maior da região e umas das melhores dos EUA. 

Pioneira na área de ensino e pesquisa, a metrópole é simplesmente a sede da primeira e mais importante universidade do país: Harvard. A população estudantil, que conta com mais de 100 faculdades e instituições universitárias na região metropolitana, tem voz ativa e espalha vibração jovem pelo lugar. 

Não perca a chance de vivenciar a história americana em cada passo percorrido por essa viagem. Guarde lembranças que vão muito além de um simples curso. Desfrute de experiências que você levará para o resto da vida. 

 5.Valores do pacote  Seguindo novamente a lógica da leitura em F é proposto que o conteúdo relacionado aos valores apareça depois que o usuário já tenha lido sobre os benefícios oferecidos. A ideia é apresentar os benefícios antes dos valores.  6.Fotos  A ideia de um slide de fotos maior é valorizar a viagem através das imagens e aguçar o usuário a conhecer o local de destino. As fotos devem ser apresentadas com descrição para auxiliar os mecanismos de busca e facilitar a navegação.        Arquitetura do site estrutural  Existem duas ferramentas que podem auxiliar a navegação semântica do site:  Menu que acompanha o scroll da página: pode auxiliar muito na navegação uma vez o conteúdo seja grande na página.  Menu flutuante: Ótima ferramenta para distribuir o conteúdo relacionado com página que está sendo visitada.  As ferramentas são em programação Jquery e podem ser vistas neste site: http://www.meutimao.com.br/blogs/marcelo_lima/arena_corinthians_de_lego                  

Sugestões de Arquitetura da Informação para a página Mochilão Explorer  

 

1. Bread Crumbs  

Os Bread Crumbs podem ser utilizados como menus drop downs facilitando a navegação e organizando melhor a informação para o usuário: Exemplo de Bread Crumb drop down http://www.lonelyplanet.com/usa/cape‐cod   2. Banner interativo com Jquery  Mesmo conceito do banner proposto na página anterior (Boston/Nese), porém o conteúdo se altera no wireframe na própria página.  O usuário clica em Budapeste e o comando altera o texto descritivo juntamente com a função do mapa interativo na própria página, dividindo e organizando melhor as informações.  3. O que é o mochilão e quem pode ir?  Estão em tabbed content e são informações complementares. Segue o exemplo da página anterior. (Boston/Nese)  4. Descritivo Mochilão Explorer  Texto com um breve descritivo da viagem. Contém os valores do pacote e serve como introdução para mais informações ou alterações no roteiro proposto.  5. Conteúdo das páginas com mapa interativo.  O conteúdo das páginas estará em tabs e poderá ser alterado de acordo com os comandos dos botões do banner em Jquery (item2). Cada botão terá um descritivo da cidade e no mapa automaticamente aparecerão as principais atrações turísticas em um Box pop‐up.  Os comandos do mapa podem ser alterados pelo usuário sem que ele tenha que recorrer aos botões do banner, ou seja, ele pode estar lendo o descritivo de Budapeste e consultando os pontos turísticos de Berlim.  5.1 textos sugeridos para conteúdo  Budapeste Capital de um dos mais antigos países europeus, Budapeste tem uma história conturbada, de invasões e lutas, e atualmente é uma das cidades mais visitadas do mundo. No lado direito do rio Danúbio vê‐se Peste. No lado esquerdo está Buda. Unidas desde 1873, as duas formam a cidade que ficou conhecida como Rainha do Danúbio. Budapeste é um roteiro irrecusável para quem aprecia história e belas paisagens.  Berlim Berlim foi o berço de revoluções políticas e mundial, excêntrica e provocativa hoje a cidade é a mescla do tradicional com o moderno. No coração da Europa Ocidental a cidade respira cultura e se torna um convite irrecusável para qualquer viajante. Saiba mais link: http://www.ci.com.br/guia‐mundo/especial‐cidades.berlim  Praga Capital da República Tcheca, Praga reúne romantismo, história, glamour, e muita cultura.  

O centro histórico desta cidade do leste europeu está incluído na lista do patrimônio histórico mundial da Unesco e sua arquitetura é apreciada por turistas do mundo todo.  Viena Elegante, Viena exibe sua identidade clássica vinda dos renascentistas. A capital da Áustria vem se modernizando e conta com paisagens bucólicas que traduzem a arte e a cultura dessa cidade que transpira charme.