Exemplo de Media Query em CSS com orientação landscape

Outra abordagem muito importante para conseguir um design responsivo foi a utilização da unidade "vh" (utilizada no exemplo 4.1) ou "vw". No caso de "vh", 1vh corresponde a 1% da altura de viewport. Para "vw", 1vw corresponde a 1% da largura de viewport. Estas unidades podem ser utilizadas na grande maioria dos browsers modernos (Chrome versão 20, Edge versão 9, Firefox versão 19 e Safari versão 6) [100].

4.2

Novo layout

Na secção3.2foi mostrado o design do CAFE Mobile 2.3. Um dos principais problemas com esse design prende-se com a sua estrutura que torna a navegação entre páginas por vezes pouco clara. Para perceber o modo de funcionamento do layout do CAFE 2.3, estão descritas algumas user storiesno que respeita às principais funcionalidades e ao seu modo de navegação.

1. Como utilizador posso visualizar as publicações e comentários feitos por outros utilizado- res,aos quais tenho permissões de visualização, ou por mim na página inicial (de feeds) do CAFE Mobile.

2. Como utilizador posso fazer um post/comentário na página inicial do CAFE Mobile, para um grupo alvo, com texto e/ou imagens/vídeos.

4.2 Novo layout 37

3. Como utilizador posso navegar para a página UCoIP de qualquer lugar da aplicação de forma a utilizar as suas funcionalidades (efetuar uma chamada, enviar um mail, etc). 4. Como utilizador posso navegar para a página do webphone apenas a partir da página UCoIP

de forma a utilizar o webphone e as suas funcionalidades.

5. Como utilizador posso navegar de volta para a página inicial a partir do ícone da empresa em qualquer local da aplicação.

6. Como utilizador posso navegar de volta para a página inicial a partir do ícone de navegação para a página inicial que se encontra na página UCoIP.

7. Como utilizador posso navegar de volta para a página inicial a partir do menu lateral. 8. Como utilizador posso navegar para as páginas de definições de perfil, álbuns, notícias,

inquéritos voicemail e ficheiros a partir do menu lateral.

9. Como utilizador posso visualizar as notificações a partir do ícone de notificações.

10. Como utilizador posso navegar para a página de notícias a partir de qualquer lugar da apli- cação de forma a poder visualizar a sua informação.

4.2.1 Situação 1

Um exemplo desta situação pode ser:

1. O utilizador encontra-se na página inicial, de feeds (figura3.2);

2. O utilizador pretende navegar para a página de UCoIP (figura3.4, user story3); 3. O utilizador clica no ícone da figura4.2e a página UCoIP é mostrada.

Figura 4.2: Ícone de navegação para a página UCoIP no CAFE Mobile 2.3 Nesta situação, se o utilizador quiser voltar à página inicial, tem três opções:

• O utilizador clica no logótipo da empresa (no canto superior esquerdo da figura3.4) (user story5);

• O utilizador acede ao menu (clicando no ícone do canto superior direito da figura 3.4, a aplicação abre o menu do lado esquerdo (3.3) e o utilizador clica em "Feed" (user story7); • O utilizador clica no ícone de navegação para a página inicial no canto inferior direito (figura

Figura 4.3: Ícone de navegação para a página inicial no CAFE Mobile 2.3

Todas as opções funcionam, ou seja, o utilizador acaba por voltar onde pretendia. No entanto, as duas primeiras têm dois grandes problemas de usabilidade. Em primeiro lugar, tanto a opção de clicar no logótipo da empresa como na de utilizar o menu, não é claro para o utilizador que esse é o caminho para o levar à página inicial, de feeds. O utilizador acaba por ter que perder tempo a procurar uma hiperligação que deveria ser óbvia.

Em segundo lugar, nas duas primeiras opções, após o clique, a aplicação não mostra simples- mente a página inicial. O que acontece é um recarregamento total da página o que leva a mais tempo até o utilizador visualizar o que pretende.

Na terceira opção, é pouco intuitivo e coerente para o utilizador, que acabou de fazer uma navegação entre páginas através dos ícones superiores, ter que voltar à página inicial através de um ícone na parte inferior do ecrã do seu dispositivo.

Estes problemas de falta de intuitividade e/ou coerência de navegação entre páginas da aplica- ção revelam-se também noutras situações. Outro exemplo disso é a situação:

4.2.2 Situação 2

1. O utilizador encontra-se na página inicial, de feeds (figura3.2);

2. O utilizador pretende navegar para a página de noticias da empresa (figura3.9);

3. O utilizador clica no ícone da figura4.4e a página de noticias da empresa é mostrada (user story10).

Figura 4.4: Ícone de navegação para a página de notícias da empresa no CAFE Mobile 2.3 Para voltar à página inicial as duas únicas opções são:

• O utilizador clica no logótipo da empresa (no canto superior esquerdo da figura3.4, user story5);

• O utilizador acede ao menu (clicando no ícone do canto superior direito da figura 3.4, a aplicação abre o menu do lado esquerdo (3.3) e o utilizador clica em "Feed" (user story7). Estas duas opções, e os seus problemas, já foram referidas na situação anterior. Este cenário repete-se quando o utilizador tenta aceder à página de inquéritos, álbuns ou definições pessoais.

4.2 Novo layout 39

4.2.3 Outros exemplos

O layout do CAFE Mobile 2.3 tem outros problemas. Um deles é não ter uma solução para uma funcionalidade do CAFE 2.3 (versão desktop) que é a pesquisa por hashtags (figura 4.5). Esta funcionalidade permite ao utilizador pesquisar por um determinado tópico em todos os posts desde que este tenha sido mencionado precedido do símbolo "#". Para isso basta introduzir na área indicada na figura4.5o tópico a pesquisar e clicar no símbolo de uma "lupa" e os posts serão filtrados pelo tópico pretendido. No CAFE Mobile 2.3, esta funcionalidade não existe.

Figura 4.5: Pesquisa de hashtags no CAFE 2.3

Outro exemplo de um problema de usabilidade encontra-se na figura3.8. Quando utilizador pretende escrever um post e/ou adicionar uma imagem/vídeo tem que clicar no botão "Publicar" que faz aparecer a área de escrita do post em que o utilizador têm três botões: "Anexar imagem ou vídeo", escolha de grupos para os quais o post vai ficar visível e, ao seu lado direito, o botão "Publicar".

Como se pode verificar, existem dois botões com a mesma informação "Publicar" que têm ob- jetivos diferentes, o primeiro (de fundo branco), serve para mostrar/esconder a área de publicação e o segundo (de fundo azul) serve para publicar o post. Isto pode não ser claro para o utiliza- dor e pode resultar neste clicar no botão errado para o objetivo que pretende, aumentando a sua frustração.

Estes são alguns exemplos dos problemas do layout do CAFE Mobile 2.3, que tornam a apli- cação pouco coerente, frustrante e não intuitiva.

4.2.4 Implementação do novo layout

Para resolver os problemas de layout do CAFE Mobile 2.3 foi decidido que um novo layout tinha de ser desenvolvido, para dar um aspeto mais apelativo à aplicação, uma organização mais clara e coerente aos conteúdos e uma navegação intuitiva.

Com a colaboração da Designer da IPBrick, Nádia Neves, a base do layout foi concebida. Foi decidido que existiriam quatro páginas de maior relevo: a página de feeds (inicial), UCoIP, WebPhone e notificações. Para navegar entre estas páginas seria implementado uma nova barra de navegação no topo da aplicação (a baixo da barra onde se encontra o logótipo da empresa e o botão para abrir o menu lateral) onde seria claro a página onde o utilizador se encontra. Esta nova

Figura 4.6: screenshot do novo layout feedde notícias do CAFE Mobile

Figura 4.7: screenshot do novo layout da página UCoIP do CAFE Mobile

Figura 4.8: screenshot do novo layout da página do WebPhone do CAFE Mo- bile

Figura 4.9: screenshot do novo layout da página de notificações do CAFE Mobile

4.2 Novo layout 41

barra de navegação permite também que o utilizador navegue facilmente entre qualquer uma das páginas iniciais.

As figuras4.6,4.7,4.8e4.9mostram as quatro principais páginas do novo layout implemen- tado no CAFE Mobile 2.4 e a figura4.10mostra a nova barra de navegação.

Para a nova barra de navegação foi usada a classe da framework Bootstrap "navbar". Esta classe tem como propósito criar barras de navegação sendo que é possível ser usada com diversas características como posicionamento e expansível [101].

Figura 4.10: Barra de navegação no CAFE Mobile 2.4

1 < u l c l a s s =" nav n a v b a r −nav "> 2 < l i i d =" s h o w _ f e e d s " 3 c l a s s =" v i s i b l e −xs−i n l i n e −b l o c k v i s i b l e −sm−i n l i n e −b l o c k "> 4 / / R e s t a n t e s e l e m e n t o s p a r a c r i a ç ã o 5 / / e e s t i l i z a ç ã o do í c o n e bem como 6 / / d e f i n i ç ã o do s e u e v e n t o de c l i q u e ( j a v a c r i p t o n c l i c k ) 7 </ l i > 8 < l i i d =" s h o w _ u c o i p " 9 c l a s s =" v i s i b l e −xs−i n l i n e −b l o c k v i s i b l e −sm−i n l i n e −b l o c k "> 10 / / R e s t a n t e s e l e m e n t o s p a r a c r i a ç ã o 11 / / e e s t i l i z a ç ã o do í c o n e bem como 12 / / d e f i n i ç ã o do s e u e v e n t o de c l i q u e ( j a v a c r i p t o n c l i c k ) 13 </ l i > 14 < l i i d =" show_phone " 15 c l a s s =" v i s i b l e −xs−i n l i n e −b l o c k v i s i b l e −sm−i n l i n e −b l o c k "> 16 / / R e s t a n t e s e l e m e n t o s p a r a c r i a ç ã o 17 / / e e s t i l i z a ç ã o do í c o n e bem como 18 / / d e f i n i ç ã o do s e u e v e n t o de c l i q u e ( j a v a c r i p t o n c l i c k ) 19 </ l i > 20 < l i i d =" s h o w _ n o t i f i c a t i o n s " 21 c l a s s =" v i s i b l e −xs−i n l i n e −b l o c k v i s i b l e −sm−i n l i n e −b l o c k "> 22 / / R e s t a n t e s e l e m e n t o s p a r a c r i a ç ã o 23 / / e e s t i l i z a ç ã o do í c o n e bem como 24 / / d e f i n i ç ã o do s e u e v e n t o de c l i q u e ( j a v a c r i p t o n c l i c k ) 25 </ l i > 26 </ u l >