Otimização para a paisagem e o retrato

Criando o Windows 8

Nos bastidores com a equipe de engenharia do Windows

Otimização para a paisagem e o retrato

  • Comments 0

Ao demonstrar o Windows 8 em muitos fóruns, usamos mais a orientação paisagem (widescreen). Primeiro isso se deve ao fato de que, para projeção, essa orientação oferece uma melhor experiência. Outro motivo é que muitos dos primeiros dispositivos (como o tablet Samsung lançado na //build/ com o Windows Developer Preview) são widescreen, ideais para mostrar aplicativos lado a lado usando o novo recurso Ajustar, o que tende a funcionar melhor na orientação paisagem. Trabalhamos muitíssimo para permitir uma experiência rápida e fluida na rotação da tela e uma ótima experiência para as pessoas que preferem a orientação retrato. Como você vai ler, com a nossa experiência estudando quais fatores contribuem para a preferência por uma ou outra orientação, observamos que essa preferência é altamente influenciável. Trabalhamos com as nossas ferramentas Visual Studio e Expression para garantir que os desenvolvedores tivessem um ótimo suporte de ferramentas para criar aplicativos que funcionassem bem nas duas orientações. David Washington, da equipe de experiência do usuário foi o autor desta postagem sobre telas com as orientações paisagem e retrato no Windows 8. Ele também oferece a sessão APP-207T da //build/. --Steven

O PC com o Windows 8 é realmente um novo tipo de dispositivo, que pode ser um tablet pequeno, um tablet somente sensível ao toque, um laptop ou um desktop. Reimaginando o Windows, criamos o Windows 8 para oferecer uma ótima experiência, independentemente do fator forma ou orientação da tela. Os dispositivos tablet permitem flexibilidade ergonômica, de modo que você possa segurá-los na orientação que for mais confortável para você e mais adequada ao seu conteúdo.

Uma das melhores coisas em um tablet é que você pode segurá-lo com as mãos. É pessoal. Quer você esteja lendo o jornal de domingo ou vendo uma pilha de fotos de casamento, poder segurar e tocar aquilo com que você interage cria um vínculo emocional. Na era digital, muitas coisas que são importantes para nós estão nos dispositivos, portanto, ao planejar o Windows 8, desejamos garantir que a experiência pudesse dar suporte a todas as orientações possíveis nos dispositivos.

Ao desenvolvermos a experiência completa em diferentes fatores forma no Windows 8, usamos estes princípios:

  • A experiência se adapta a todos os fatores forma: telas pequenas e grandes, laptops e desktops.
  • A experiência é favorecida pelos formatos widescreen para várias tarefas e vídeos em tela inteira.
  • É possível segurar o dispositivo e interagir com ele da maneira que for mais confortável.
  • Os desenvolvedores têm a oportunidade de criar um aplicativo que possa ser executado em todos os modos de exibição e orientações em diferentes fatores forma com mínimo esforço.

Passamos um número considerável de horas estudando pessoas enquanto elas usavam dispositivos tablet nos nossos laboratórios de usabilidade e em suas próprias casas. Observamos pessoas que já estavam familiarizadas com os tablets e outras que estavam começando a usar esses fatores forma, e mantivemos contato com elas por meses depois. Observamos as formas de segurar o dispositivo, posturas corporais, movimentos das mãos e interações com uma variedade de aplicativos, posicionamento do dispositivo e orientações. Vimos uma ampla gama de variáveis e ouvimos os usuários identificarem os fatores que influenciaram suas escolhas quanto à posição do corpo e orientação do dispositivo. As influências sobre essas escolhas incluíram fatores antropométricos, como o tamanho das mãos e distâncias de alcance do polegar, fatores ergonômicos como repetição e fatiga, fatores de hardware, como acessibilidade aos botões, fatores ambientais, como onde eles estavam usando o tablet (por exemplo, na cozinha, no quarto ou na sala de estar) e fatores físicos, como se eles estavam em pé, sentados no sofá ou usando uma mesa. O número de combinações foi impressionante, contribuindo para a conclusão básica de que as posturas corporais, as formas de se segurar o dispositivo e as orientações variam com bastante frequência. Concluindo, não há apenas uma forma de se segurar um dispositivo e as pessoas naturalmente procuram achar uma posição e orientação confortáveis que sejam adequadas para o que eles estão fazendo com o dispositivo no momento.

Pessoa sentada em um sofá usando um tablet no modo retrato

Inicialmente, pensamos que a escolha da orientação paisagem ou retrato fosse mais influenciada pela preferência pessoal. Cada pessoa que observamos girava o dispositivo e esperava que ele e a interface do usuário funcionassem com aquela orientação do momento. Surpreendente foi notar que, conforme as pessoas se tornavam mais familiarizadas com o dispositivo e os aplicativos de que gostavam, a influência única na rotação do dispositivo passava a ser o tipo de conteúdo exibido na tela. Quando o conteúdo e a experiência ficavam melhor no modo paisagem, as pessoas naturalmente usavam o aplicativo nesse modo. Quando o conteúdo e a experiência ficavam melhor na orientação retrato, o aplicativo era usado nessa orientação. Como exemplo, a maioria das pessoas prefere assistir a um filme em tela inteira no modo paisagem e sem as barras pretas, enquanto prefere ler um artigo longo ou página da Web na orientação retrato, para evitar ficar rolando a página. As preferências expressadas pelas pessoas eram influenciadas sobretudo pela constatação de qual orientação oferecia uma ótima experiência. Recebemos perguntas e comentários sobre se o Windows 8 era voltado para a orientação paisagem ou retrato. Nosso ponto de vista é que tanto a paisagem quanto o retrato são importantes e as experiências podem ser ótimas nas duas orientações. Em vez de escolhermos uma postura ou orientação para otimização, criamos uma experiência que faz sentido independentemente de como o dispositivo é segurado, que pareça feita sob medida para o aplicativo e seu conteúdo.

Os nossos objetivos ao olhar as orientações paisagem e retrato foram estes:

  • Você pode girar o tablet facilmente para que ele se adapte melhor à tarefa ou à postura ergonômica.
  • A rotação no Windows é rápida e fluida.
  • O Windows gira de forma previsível no sistema e aplicativos, mantendo o usuário no controle.
  • Os desenvolvedores podem criar layouts de alta qualidade voltados para o retrato ou para a paisagem, dependendo das experiências que desejam permitir.

Windows no modo paisagem

Algumas pessoas perguntaram por que mostramos tanto a interface do usuário do Windows 8 com a orientação paisagem na conferência //build/. O Windows 8 é uma reimaginação de todos os PCs e não é voltado apenas para tablets. Ele será executado em centenas de milhares de laptops e desktops (criados para o Windows 7 e novos para o Windows 8), muitos do quais são e serão somente para paisagem. Além disso, na paisagem e widescreen, podemos oferecer uma experiência multitarefas (ajustando dois aplicativos lado a lado) e reprodução de vídeo em tela inteira sem letterbox. (Além disso, em muitas de nossas grandes demonstrações, projetamos o conteúdo em telas enormes, e a orientação paisagem fica melhor nesse caso).

Criamos o Windows 8 para que ficasse ergonomicamente confortável em todas as orientações. Chegamos à conclusão de que uma postura confortável para usar um tablet no modo paisagem é segurá-lo com as duas mãos e tocar a tela com os polegares. Por essa razão, criamos a maior parte da experiência de forma que fosse facilmente acessível pelos polegares. Também otimizamos o sistema para rolar horizontalmente, tornando a experiência rápida e fluida tanto no modo paisagem quanto no modo retrato.

Aplicativo AllThingsD ao lado do aplicativo Stocks no modo paisagem

Windows no modo retrato

O Windows também foi criado para funcionar otimamente no modo retrato. Analisamos situações exaustivamente, como ler notícias no navegador Web, ver fotos e rolar longas listas de mensagens de email e reunimos o que aprendemos na criação de um sistema que funcionasse perfeitamente com todas as orientações. Ajustamos as experiências do sistema, como o uso do teclado, seletor de arquivos e botões para que funcionassem muito bem tanto no modo retrato quanto no modo paisagem. Desejamos fazer isso para que você não precisasse reaprender a usar o sistema quanto alternasse para o modo retrato; ele simplesmente funcionará.

Aplicativo Stocks no modo retrato com 3:4, 10:16 e 9:16

Rotação

Como um dos nossos objetivos era tornar a transição de rotação entre a paisagem e o retrato rápida e fluida, as equipes do Windows empenharam muito esforço na simplificação do caminho dessa transição, desde o hardware de acelerômetro, passando pela pilha da placa gráfica até o aplicativo.

Uma parte importante da transição entre a paisagem e o retrato é a animação. A animação "coreografa" uma transição suave entre os dois estados de layout. O tempo da animação era importante porque tinha de ser rápido e responsivo, embora suave o bastante para não tornar a transição brusca. O DWM (Gerenciador de Janelas da Área de Trabalho), a base das animações suaves do Windows 7 e Windows 8, orquestra essa animação.

A linha do tempo mostra quando o acelerômetro começa a se mover, quando o dispositivo é girado para o modo retrato, quando o acelerômetro se estabiliza (a 100 milissegundos) e quando a linha do tempo é concluída (a 500 milissegundos)

Estamos trabalhando continuamente para tornar a rotação o mais estável e previsível possível porque sabemos o quanto uma rotação brusca pode ser irritante. Antes de a rotação começar, o sistema aguarda a estabilização do acelerômetro para evitar rotações acidentais. Também quisemos manter o controle da experiência de rotação no usuário, para evitar acionamentos acidentais. Introduzimos um bloqueio na orientação do hardware para “ignorar a gravidade” e manter a orientação da forma que você desejar.

Comandos Bloqueio da rotação e Bloqueio da rotação desativado

Telas diferentes

Em uma futura postagem, abordaremos em profundidade como o Windows 8 se adapta a diferentes telas, do ponto de vista do desenvolvedor, mas vale a pena falar um pouco sobre o tamanho da tela no contexto das orientações paisagem e retrato. O Windows 8 será executado em PCs com telas de tamanhos diferentes, diferentes resoluções e diferentes taxas de proporção, desde telas de 4:3, que são mais próximas a um quadrado, até as telas widescreen de 16:9. A nossa colocação em escala permite que o Windows e aplicativos se adaptem perfeitamente e reencaminhem o conteúdo para essas telas diferentes, fazendo uso de todo o espaço. Você pode usar muitos desses dispositivos tanto no modo retrato quanto no modo paisagem. Essa diversidade de escolhas é exclusiva do Windows. Você pode escolher o dispositivo e a orientação que melhor atenda às suas necessidades e uso.

Modo paisagem com 4:3, 16:10 e 16:9

A resolução mínima em que os aplicativos com o estilo Metro do Windows 8 podem ser executados é de 1024 x 768. Escolhemos esse tamanho por ser um valor comum designado para ser usado na Web e a grande maioria (isto é, 98,8%) dos usuários do Windows pode usar essa resolução ou uma superior (veja o gráfico abaixo).

Aproximadamente 42% dos usuários do Windows 7 têm resoluções de tela de 1366 x 768. Todas as outras resoluções representam 12% ou menos.  1024 x 600 e 1280 x 720 dão suporte somente para aplicativos da área de trabalho, enquanto todas as outras resoluções dão suporte a todos os aplicativos do Windows 8.

Achamos que é importante ter uma resolução mínima para aplicativos porque isso permite que todos os desenvolvedores criem para seus aplicativos um modo de exibição principal menor, evitando a fragmentação em diferentes dispositivos. Esse valor mínimo também garante que os usuários não vejam layouts de aplicativos quebrados devido aos pequenos tamanhos de tela.

A resolução que dá suporte a todos os recursos do Windows 8, incluindo multitarefas com ajuste, é 1366 x 768. Optamos por essa resolução porque ela se adapta à largura de um aplicativo ajustado, que tem 320 px (também é a largura específica de muitos layouts de telefone), ao lado de um aplicativo principal com 1024 x 768 (um tamanho comum para ser usado na Web).

Esses limites serão reforçados no tempo de execução. Estamos rompendo a tradição de não oferecer uma solução alternativa para isso devido ao fato de a nossa motivação principal ser garantir que os aplicativos com o estilo Metro sejam desenvolvidos para funcionar perfeitamente com uma determinada resolução publicada. No Developer Preview, não tínhamos nenhum aviso de tempo de execução útil além da comunicação no site de download. É claro que solucionaremos isso na versão beta. Não notamos o inconveniente causado para um conjunto de pessoas que estava usando máquinas virtuais com 600 x 800 ou netbooks de 1024 x 600 e pedimos desculpas por isso. É válido observar que a taxa de execução de computadores de 1024 x 600 é muito baixa e as resoluções de tela básicas mudaram para 1280 x 800, o que dá suporte aos aplicativos com o estilo Metro sem ajuste. Essa resolução ainda está a um segundo de distância das resoluções totalmente compatíveis e esperamos continuar vendo a troca para telas com resoluções mais altas à medida que novos PCs surgirem no mercado.

Rotação e desenvolvedores

No Windows 8, os aplicativos ditam a experiência, portanto, trabalhamos para facilitar ao máximo a criação de modos de exibição paisagem e retrato pelos desenvolvedores. Assim como em qualquer outra plataforma, os desenvolvedores podem escolher as orientações que dão suporte a seus aplicativos e como sua experiência é personalizada. Esperamos que mais desenvolvedores ofereçam o modo de exibição paisagem porque o maior número de PCs no mercado atual é composto por laptops e desktops. Entretanto, se a experiência de um aplicativo puder dar suporte tanto à paisagem quanto ao retrato, o suporte ao modo de exibição retrato representa apenas um valor incremental de trabalho no layout.

Usando as mesmas técnicas utilizadas para criar aplicativos para o recurso Ajustar ou para diferentes tamanhos de tela, os desenvolvedores podem facilmente criar experiências para o modo retrato. Os desenvolvedores da HTML5 usarão consultas de mídia CSS para vincular o estilo de layout à orientação do sistema, enquanto que os desenvolvedores da XAML alterarão seu layout em resposta para exibir eventos de estado. Tanto na linguagem HTML quanto na XAML, todos os modelos e controles adaptáveis oferecidos pela plataforma dão suporte tanto ao retrato quanto à paisagem. Além disso, o sistema manipula a animação da transição automaticamente, sem nenhum esforço adicional por parte dos desenvolvedores. Se houver um conteúdo em um aplicativo que seja mais adequado para uma orientação, os desenvolvedores podem preferir uma orientação ou outra, e o sistema manterá o aplicativo naquela orientação (se o dispositivo der suporte a ela).

O Visual Studio 11 e o Expression Blend permitem que os desenvolvedores testem seus aplicativos nos modos retrato e paisagem e em diferentes tamanhos de tela e taxas de proporção, mesmo que eles não tenham acesso a um dispositivo tablet.

Paisagem e retrato no simulador do Visual Studio 11

Você pode escolher o dispositivo que melhor atenda às suas preferências e segurá-lo da forma que for mais confortável, que a experiência acomodará essa postura. Os aplicativos podem se beneficiar com a tela grande com várias tarefas e ainda ficarem ótimos na orientação retrato com trabalho adicional mínimo.

Veja aqui um pequeno vídeo que mostra as transições do modo paisagem para a orientação retrato em ação.


Baixe este vídeo para assisti-lo no seu media player favorito:
MP4 de alta qualidade | MP4 de qualidade inferior

Esperamos que você experimente!

Obrigado,
David