RENAN NASCIMENTO
RENAN NASCIMENTO29/11/2023 21:19
Share

Smartphones ≠ Tablets

  • #Android
  • #iOS
  • #UI/UX

Pensar, Planejar e Iniciar!

Quem nunca ficou frustado por ter iniciado freneticamente um ideia e no meio pro fim não foi como esperado? Ou quem nunca construiu uma tela linda para uma smartphone e quando colocou em um tablet não ficou como queria? Com certeza uma das etapas mais importantes do processo de desenvolvimento de software é a análise. Saber o que se pretende fazer e como fazer, considerar os dispositivos e as formas de interação pode lhe economizar muito tempo e trabalho.

Neste artigo, vamos pensar um pouco sobre duas características das plataformas mobile, dimensão de tela e área de toque, como podem ser diferentes entre si e nas suas formas de interação. Espero que encontrem aqui uma força para o que vocês precisam!

Smartphones ≠ Tablets

Dimensões

O suporte a diferentes tamanhos de tela garante a qualquer aplicação alcance o maior número de usuários e uma variedade de dispositivos, contudo não existe uma padronização para dimensões de tela. Para uma maior adequação e padronização, as grandes produtoras de aplicativos (Google e Apple) definem classes de dimensões para construção de aplicações para os seus dispositivos. As classes podem ser compact, medium e expanded relacionadas a largura (Figura 1) e altura (Figura 2) do dispositivo.


O Android utiliza essas classes baseadas em pontos de interrupção mínimos de tela, desconsiderando as áreas de ações do dispositivo (barra de ferramentas e margens). Esses valores são utilizados apenas como referência, pois os dispositivos físicos não garantem uma classe de tamanho de janela específica.


image


image


A Apple também disponibiliza uma documentação de desenvolvimento (Apple Developer Documentation), onde apresenta suas boas práticas para criação de aplicações em diferentes dispositivos e telas, nesse link é possível verificar propriedades de telas dos diversos produtos IOS. Os aparelhos IOS implementam apenas 2 classes de tamanho de tela, compact e regular (Tabela 1), as classes estão relacionadas ao dispositivo e a sua orientação (retrato e paisagem) (Figura 3). Os IPADs ainda contam com uma configuração multitarefa, que permite que a tela possa ser divida em 2/3, 1/2 e 1/3 da tela (Figura 4), geralmente utilizada para compartilhar a tela com jogos.


image

image

image

Apresentação de Conteúdo e Área de toque

Com uma variedade de telas e dispositivos, uma aplicação mobile deve apresentar o que propõe de forma clara, onde os elementos em tela devem estar distribuídos ocupando a área disponível. UX/UI são profissionais que garantem uma boa harmonização da apresentação de conteúdo, o que é relevante e usual para os usuários. Além desses profissionais, as documentações oficiais direcionam o desenvolvimento de aplicações para suas plataformas.

As documentações e guias de desenvolvimento para os sistemas operacionais (SO) Android e IOS descrevem as boas práticas para o desenvolvimento de aplicações. O direcionamento para a área disponível deve considerar as barras de sistema (áreas em tela exibem informações do nível de bateria, hora e a área de navegação), incentivam a manter o foco em conteúdos e ações primárias, além de um número ações de controle que realmente sejam necessárias estar em tela. Os SO garantem o redimensionamento em dispositivos compatíveis, mesmo que possuam variações em suas dimensões.

O Android e o IOS são executados em uma variedade de dispositivos que oferecem diferentes tamanhos e densidades de tela. Os sistemas realizam um escalonamento e redimensionamento básicos para adaptar sua interface do usuário a diferentes telas. No entanto, ainda é preciso realizar outras ações para garantir que ela se ajuste perfeitamente a cada tipo de tela. Algumas das recomendações para telas grandes são:


  • Aproveitar a tela grande para elevar o conteúdo que interessa às pessoas, minimizando interfaces modais e transições de tela inteira e posicionando controles na tela onde sejam fáceis de alcançar, mas não atrapalhem.
  • Pode-se projetar diferentes layouts que otimizam a experiência do usuário para o espaço disponível em diferentes dispositivos.

Além do conteúdo exibido em tela, a área de interação (toque) é outro ponto particular que diferenciam smartphones de tablets. Enquanto os usuários conseguem manipular facilmente um smartphone com uma única mão, o mesmo não ocorre com dispositivos maiores. Como o conteúdo e as informações estão distribuídas em tela, facilitam ou dificultam ações dos usuários. As Figuras 5 e 6 a seguir mostram uma representação de como usuários comumente manipulam e como interagem.


image

image

Segundo a pesquisa How Do Users Really Hold Mobile Devices? (Como os usuários realmente seguram dispositivos móveis?) conduzida pelo design Steeven Hoober (2013), 49% dos usuários de smartphone utiliza uma única mão, enquanto os outros envolvem o dispositivo sobre uma das mãos e interagem com o dedo indicador (36%) ou usam ambas as mãos interagindo com os polegares (15%) enquanto realizam interações. Similarmente, 35% dos usuários de tablets e IPADs utilizam uma das mãos para segurar o dispositivo e o dedo indicador para realizar interações, 14% usam uma das mãos e o polegar, 20% ambas as mãos e polegares e 26% uma única mão e o polegar.

Outra característica que deve ser considerada no desenvolvimento de aplicações são as zonas de alcance em smartphones e tablets. Como a maioria dos usuários manipula seus dispositivos com uma única mão e utiliza o polegar em suas ações, criar aplicações que explorem essa experiência conquista usuários. Existem zonas na tela que são mais fáceis de serem acessadas que outras, a seguir as Figuras 7 a 9 nos dão indicativos em cada um dos dispositivos.

image

image

image

Referências

https://developer.android.com/guide/topics/large-screens/support-different-screen-sizes?hl=pt-br

https://developer.apple.com/design/human-interface-guidelines/layout#Device-screen-sizes-and-orientations

https://www.ios-resolution.com/

https://developer.android.com/guide/practices/screens_support?hl=pt-br

https://developer.apple.com/design/human-interface-guidelines/designing-for-ipados

https://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php#top

https://www.dreamerux.com/articles/s3aw4fz8uue534fuscx074q3mtil5t

Share
Comments (0)