[vc_row row_height_percent=”0″ override_padding=”yes” h_padding=”2″ top_padding=”3″ bottom_padding=”3″ overlay_alpha=”100″ gutter_size=”3″ shift_y=”0″ row_height_use_pixel=””][vc_column column_width_use_pixel=”yes” overlay_alpha=”50″ gutter_size=”3″ medium_width=”0″ shift_x=”0″ shift_y=”0″ zoom_width=”0″ zoom_height=”0″ column_width_pixel=”800″][vc_column_text]Uma recente pesquisa da Nielsen Ibope revelou que, em 2015, haviam mais de 76 milhões de smartphones ativos no país, representando 61% de toda telefonia móvel no Brasil. Objetivamente, estes equipamentos são inteiramente desenvolvidos para navegação e conectividade e a necessidade de layouts responsivos se tornou uma necessidade para qualquer projeto digital.
Cada vez mais os dispositivos móveis tem se tornado o principal recurso de pesquisa dos brasileiros. Seria inteligente da parte de qualquer empresa preparar seus canais digitais (aplicativos, sites, lojas virtuais, etc) para funcionarem bem em celulares equipados com telas sensíveis ao toque.
Por algum tempo, o mercado nacional entendeu que isso era simplesmente redimensionar o tamanho da resolução do site para uma tela menor, mas, com o passar do tempo, a comunidade digital brasileira ganhou maturidade e passou a dar passos largos rumo à experiências inovadoras no cenário móvel.
A partir desse momento, as empresas compreenderam melhor um conceito chamado Think Mobile, que considera diversos fatores na construção de um wireframe e layout para que eles sejam aderentes aos Smartphones e Tablets. Desta maneira, a navegação de qualquer iniciativa online se torna mais simples com uma experiência de uso rica para o usuário.
Com a preocupação de desenvolver um trabalho criterioso e bem planejado, nós da I2R criamos uma metodologia para a construção de layouts responsivos, considerando sempre características fundamentais no sucesso de um canal digital.
Conheça os detalhes de cada uma das características de um Layout pensado em Mobile:[/vc_column_text][/vc_column][/vc_row][vc_row unlock_row=”” row_height_percent=”0″ override_padding=”yes” h_padding=”2″ top_padding=”0″ bottom_padding=”3″ overlay_alpha=”100″ gutter_size=”3″ shift_y=”0″ row_height_use_pixel=””][vc_column column_width_use_pixel=”yes” overlay_alpha=”50″ gutter_size=”3″ medium_width=”0″ shift_x=”0″ shift_y=”0″ zoom_width=”0″ zoom_height=”0″][vc_single_image media=”81675″ media_width_use_pixel=”yes” alignment=”center” media_title_uppercase=”” media_width_pixel=”800″][/vc_column][/vc_row][vc_row unlock_row=”” row_height_percent=”0″ override_padding=”yes” h_padding=”2″ top_padding=”3″ bottom_padding=”2″ overlay_alpha=”100″ gutter_size=”3″ shift_y=”0″ row_height_use_pixel=””][vc_column column_width_use_pixel=”yes” overlay_alpha=”50″ gutter_size=”3″ medium_width=”0″ shift_x=”0″ shift_y=”0″ zoom_width=”0″ zoom_height=”0″ column_width_pixel=”800″][vc_column_text]
Velocidade de Carregamento
Antes de qualquer coisa, tenha sempre em mente que um Smartphone ou Tablet provavelmente estará utilizando uma rede 3G ou 4G de alguma operadora de telefonia, e nessa circunstância imagine que quanto menor for o tamanho em Kbytes de uma página que o usuário acessar, mais rápido ela será carregada e menos será consumido da franquia de dados dessa pessoa. É uma contribuição dupla para a satisfação de seus clientes: Layouts leves que carregam rápido e que consumam poucos dados dos usuários.
Limitações e Espaços
Naturalmente, a grande maioria dos designers e profissionais da web estão habituados a projetarem layouts e wireframes em computadores Desktop ou Notebook. Esse costume geralmente os fazem pensar em soluções criativas contando sempre com toda essa área disponível, mas acreditamos que não é um hábito sadio por limitar a aplicação da mesma solução criativa em dispositivos com resoluções menores.
Por tanto, gostamos muito de desenvolver primeiro interfaces apropriadas para as resoluções menores, como as de smartphones, e depois derivamos o mesmo layout para telas com resoluções maiores como Tablets e Desktops. É a forma produtiva de inovar na web com simplicidade e intuitividade.
O Mercado denominou esta prática de Think Mobile First, ou seja, pense em mobile primeiramente! E é importante mencionar que quando falamos de resolução Desktop estamos nos referindo à computadores de mesa ou notebooks.
Ausência de Mouse
Em dispositivos touch screen não há um mouse para você posicionar o cursor em alguma parte da tela, como ocorre em notebooks e computadores comuns. Por este motivo, aconselhamos que você evite utilizar recursos e animações que são iniciados com o passar do mouse sobre eles.
Existe uma alternativa muito interessante a ser explorada – Animações, vídeos e outros artifícios podem ser iniciados de forma seletiva assim que o “bloco” em que aquele conteúdo está for enquadrado na tela do display. Esse método funciona bem em qualquer tipo de tela.
Imagine que você está deslizando sua tela para baixo em um determinado site, e à medida que algum banner for inteiramente enquadrado visor, ele iniciará um vídeo, animação ou algum outro recurso nesse sentido.[/vc_column_text][vc_single_image media=”81542″ media_width_use_pixel=”yes” alignment=”center” media_title_uppercase=”” media_width_pixel=”400″][vc_column_text css=”.vc_custom_1559151215465{margin-top: 0px !important;}”]
Os elementos de um smartphone devem ser adequados para o touchscreen para não causar dificuldades ao usuário.
[/vc_column_text][vc_column_text]
Navegação Vertical
Num passado não muito distante, o mercado digital sempre mencionou que era necessário reduzir o comprimento de qualquer página na web porque os usuários não chegavam ao fim dela e as últimas informações acabavam sem ser visualizadas pelas pessoas.
Com o advento de telas touch screen, essa recomendação perdeu força e por uma facilidade de movimento de deslizar a tela, as informações finais da tela passaram a ser tão vistas quanto as primeiras.
Invista na disposição vertical das suas informações, essa prática fará seu layout ficar mais clean e permitirá organizar melhor a apresentação das ideias ao usuário.
Área de Toque
Este item requer atenção pelo simples motivo de ter sido a razão da criação de telas sensíveis ao toque. Como já é um tanto óbvio, sabemos que as pessoas interagem nessas telas utilizando a ponta dos dedos, mas há algo mais profundo para analisar nesse contexto.
Olhe para as suas mãos, veja o formato e as características dos seus dedos. Agora faça a mesma coisa olhando para as mãos de qualquer pessoa que estiver ao seu lado. Possivelmente essa pessoa possuirá características diferentes das suas mãos e isso requer um cuidado nos pontos que chamamos de “área de toque”.
Para compreender bem o que isso tudo quer dizer, visualize um botão escrito voltar. Agora imagine o personagem de desenho animado Shrek tentando clicar nesse botão sem esbarrar em qualquer elemento que esteja em volta. Foi fácil e divertido de entender, não foi?
Agora você já sabe que é necessário estabelecer margens mínimas e espaços generosos para botões, formulários e menus. Essa prática fará a navegação do seu site ou aplicativo ser muito mais confortável e elegante.
Slide Horizontal
A segunda ação mais natural em telas sensíveis ao toque é o de deslizar os dedos, e isso acontece por ser um movimento simples e intuitivo que não requer explicações.
Reinvente sua navegação e explore seus conteúdos com rolagens verticais e também na horizontais (como é o caso de banners rotativos, vitrines virtuais e similares). Estamos falando de movimentos que facilitarão o uso de qualquer pessoa naquilo que você criar na web ou aplicativo.
É bom observar, inclusive, que estas duas últimas sugestões não prejudicam em nada a navegação em computadores desktop ou notebook, pelo contrário, farão as pessoas navegarem com mais dinamismo e interação pelo seu conteúdo.
Peculiaridades Mobile
Excepcionalmente, esse recurso diz respeito somente ao universo Mobile. Esse mercado é dominado por sistemas operacionais consolidados, como é o caso do IOS (Apple), Android (Google) e Windows Phone (Microsoft).
É importante conhecer as características de navegação de cada um deles para projetar soluções que sejam aderentes a qualquer um desses sistemas. A criatividade deve estar à disposição da sua empresa para eliminar barreiras e tornar o uso mais natural e abrangente possível.
Por exemplo, o sistema Android disponibiliza sempre um botão fixo voltar em seus dispositivos. Já no sistema IOS esse botão não existe. Então não brinque com a paciência dos seus futuros usuários e planeje os wireframes do seu projeto incluindo sempre alguma forma intuitiva do usuário retornar ao lugar que estava antes. Essa recomendação cabe à qualquer circunstância que possa gerar dificuldades na navegação em diferentes modelos de dispositivo móvel.
[/vc_column_text][/vc_column][/vc_row]