Levando a edição por toque a Office Web Apps em tablets com Windows 8 e iOS

Artigo original publicado segunda-feira, dia 20 de agosto de 2012

Mostramos os novos Office Web Apps há algumas semanas. Adicionamos novos recursos, melhoramos o desempenho de nossos aplicativos e continuamos a fornecer acesso a seus documentos em qualquer local, usando diversos navegadores populares.

Hoje, estamos entusiasmados para mostrar a você uma nova dimensão de entrada, o toque, para levar os recursos completos de exibição e edição dos Office Web Apps a tablets e navegadores com suporte a toque, inclusive o IE no Windows 8 e o Safari móvel no iOS.

 No desenvolvimento dos Office Web Apps para toque, queríamos atingir as seguintes metas:

• Os usuários devem ser capazes de usar os Office Web Apps habilitados por toque instantaneamente
• Os usuários não devem precisar aprender a navegar na nova interface do usuário
• Os usuário devem poder alternar facilmente entre as experiências de toque e mouse/teclado
• O conjunto completo de recursos dos Office Web Apps, inclusive ferramentas de edição, deve estar habilitado em dispositivos de toque como tablets e monitores touch.

A criação de uma interface do usuário que permitisse o toque e respondesse bem a entradas de toque apresentou desafios de design interessantes. Neste post, falarei sobre como nós conseguimos isso.

Desenvolvendo a estrutura para toque

Desenvolvemos uma estrutura unificada, consistente com as plataformas para as quais oferecemos suporte e com as diretrizes de interação por toque para aplicativos Microsoft Office para desktop, Windows 8 e iOS. Também buscamos o equilíbrio entre esse aspecto e a experiência e as manipulações por toque que os usuários desejam quando usam um dispositivo por toque em particular.

Usamos os seguintes princípios na criação da experiência do usuário nas plataformas:

• Proporcionar experiências completas e excelentes usando apenas a entrada por toque
  • Focar em cenários e experiências em um dispositivo por toque
  • Garantir que os usuários possam tocar a interface do usuário com confiança
  • Criar manipulações por toque simples e intuitivas
  • Aproveitar os recursos do navegador
• Garantir experiências completas e incríveis usando uma combinação de toque, mouse e teclado
  • Permitir que os usuários possam alternar facilmente entre o toque ou mouse e teclado para interagir com o aplicativo
  • Permitir que o aplicativo responda à entrada.

Vamos nos aprofundar em cada um desses princípios:

Cenários e experiências otimizados para toque

Eu escrevi este post em alguns dias e o editei algumas vezes. Assim como a maioria de vocês, eu não fiquei sentada o tempo todo nem carreguei um notebook para ver a aula de esgrima do meu filho. Comecei a redigir o post em meu desktop no trabalho e, com o documento no Skydrive, disponível em qualquer local, continuei a editá-lo em minha tablet.

As tendências e os padrões de uso e comportamento que vieram à tona a partir da pesquisa com usuários nos ajudaram a definir dois cenários:

1.        Ler e consumir conteúdo de documentos será uma experiência rápida, agradável e cativamente, assim como visualizar apresentações e planilhas.

• Ler e consumir informações era a atividade favorita de muitas pessoas que usavam tablets.
• As pessoas navegam pelos documentos e pelas apresentações, e fazem comentários de conteúdo compartilhado por colegas e amigos.
• Outras pessoas desejavam agregar pesquisas relacionadas à compra de carros em seu OneNote Web App e tê-las à disposição no tablet no momento da negociação de compra de um carro.

 2.        A edição leve será altamente satisfatória quando as pessoas adicionarem, modificarem e revisarem documentos

• Certas mães como eu desejam conectar-se rapidamente para compartilhar em uma planilha, com a Associação de Pais e Mestres, a sobremesa que meu filho irá levar no pic-nic organizado pela escola.

• Os estudantes desejam realizar edições rápidas nos trabalhos que estão fazendo e colaborar na apresentação que precisam criar.

Toque com confiança

Não há nada mais frustrante do que tocar em um controle errado na interface do usuário. A confiança no aplicativo aumenta quando você pode tocar com confiança em um controle ou na parte desejada da interface. Queremos que você tenha essa confiança ao usar os Office Web Apps.

O mouse é uma ferramenta que proporciona interação precisa e controlada com a interface do usuário. Em conjunto com um teclado físico, ele transmite ao usuário a confiança de posicionar pontos de inserção, fazer seleções, pressionar botões e chamar menus contextuais, menus suspensos e outras interfaces com precisão.

Comparativamente, os dedos humanos possuem todos os tipos de formas e tamanhos. Eles são desajeitados na hora de posicionar um ponto de inserção e imprecisos no controle da interação com a interface do usuário.

Nossa meta era que os usuários pudessem tocar na interface do usuário sem medo e obter os resultados esperados, igual aconteceria com um mouse.

Fazer com que algo seja fácil de tocar depende do tamanho do alvo. Muitos elementos de interface do usuário, como os controles da faixa de opções e os menus contextuais, ficam bem abaixo dos limites de tamanho "tocáveis" definidos pelo Windows 8 e pelo Microsoft Office.

Todos esses elementos são fáceis de tocar nos novos Office Web Apps. Tomamos muito cuidado para equilibrar o aumento do tamanho físico da interface do usuário com a preservação do máximo de espaço possível para o conteúdo do documento em si.

Observe neste close que os botões estão maiores e mais fáceis de tocar. Além disso, há um espaçamento confortável entre os controles:

 A guia Início no Excel Web App:

A guia Inserir no PowerPoint Web App:

A guia Início no OneNote Web App:

O Selecionador de Cores no Word Web App:

Usar manipulações por toque simples e intuitivas

Um dos nossos objetivos centrais era fazer com que os usuários pudessem começar a utilizar os Office Web Apps instantaneamente em tablets usando manipulações por toque simples e intuitivas, não gestos complexos que precisassem ser aprendidos e decorados.

Você só precisa de cinco ações para começar:

Vejamos como você pode usar essas ações nos Office Web Apps:

Rolar e navegar pelo documento

Quando for necessário examinar um documento rapidamente, você poderá passar/mexer o dedo usando um movimento de rolagem rápida. O conteúdo do documento rolará com aceleração rápida e fluida, que pode ser sempre interrompida com um toque.

Usamos o recurso do navegador nativo para permitir a rolagem acelerada no Word Web App, nos modos de exibição Leitura e Edição.

No PowerPoint Web App, você pode usar a mesma ação de passar o dedo para mudar de slide.  

Ampliação e redução:

Você pode ampliar a reduzir a interface do usuário usando dois dedos, separados ou unidos.

Digitação:

Um toque no modo de exibição Edição dos Office Web Apps insere um ponto de inserção e exibe o teclado para que você comece a digitar.

O ponto de inserção no Word Web App:

Observe que o ponto de inserção é diferente daquele que vemos quando usamos mouse e teclado. A "garra" circular com o ponto de inserção permite pegá-lo e arrastá-lo facilmente para fazer uma seleção.

Digitar é fundamental na edição. Por isso, garantir uma boa experiência é um dos principais cenários com suporte.

Posicionamento do ponto de inserção

Como o dedo é uma ferramenta de entrada imprecisa, tivemos que descobrir como posicionar um ponto de inserção no local desejado pelo usuário de forma confiável.

A maioria dos usuários modificará o início ou o fim da palavra.

Por isso, usamos a abordagem de "suporte para livros" no posicionamento do ponto de inserção:

Um toque em uma palavra existente gera um cálculo da extremidade mais próxima (começo ou fim da palavra) e posiciona o ponto de inserção ali. Um novo toque na mesma palavra refina o ponto de inserção para o local exato em que o toque foi registrado.

Seleção

A seleção de texto e objetos permite manipular, aplicar formatação ou realizar outras ações. Os usuários podem realizar essas operações de forma eficiente com um mouse e as teclas Ctrl e Shift no teclado porque esses elementos proporcionam precisão.

No ambiente de toque, a "garra" no ponto de inserção serve como uma alça que você pode segurar para arrastar e criar um nova seleção. Você também pode modificar uma seleção existente reduzindo ou expandindo o intervalo selecionado com o uso das garras em cada extremidade.

Arrastando a garra para selecionar texto no Word Web App:

 Arrastando para selecionar as dimensões a fim de inserir uma tabela:

Aplicando ações dentro de contextos:

Os menus contextuais proporcionam um modo rápido e fácil de aplicar ações dentro de contextos específicos. Talvez você já esteja familiarizado com o uso dos menus contextuais com o mouse nos Office Web Apps. Eles são exibidos clicando com o botão direito do mouse.

Menus contextuais exibidos com um clique no botão direito do mouse no modo de exibição Edição do Word Web App:

Facilitamos o acesso ao menu contextual. Basta tocar em uma seleção para exibi-lo. Ele desaparecerá se você tocar em uma parte fora do menu contextual.

Ao se tocar em uma seleção, o menu contextual é exibido:

Observe o espaçamento confortável dos controles no menu contextual para toque.

Em um ponto de inserção, você pode exibir o menu contextual mantendo o dedo na tela por alguns instantes:

No modo de exibição de leitura do Word Web App, um toque permite selecionar uma linha. Outro toque na seleção faz com que seja exibido o menu contextual.

Seleção e menu contextual no visualizador do Word Web App:

Garantir experiências completas e incríveis usando uma combinação de toque, mouse e teclado

As tablets podem ser usadas com entrada por toque, mouse e teclado.

No Windows 8, os Office Web Apps podem ser usados com toque, com mouse e teclado ou com uma combinação de ambos. No iOS, os Office Web Apps funcionam melhor usando entrada por toque.

Modo de toque

Nos Office Web Apps, a interface do usuário pode ser uma das seguintes:

• Interface do usuário fixa

Esta interface está sempre presente e é sempre exibida no aplicativo.

Exemplo: painel de navegação do OneNote Web App, faixa de opções

• Interface do usuário contextual

Esta interface aparece e desaparece sob demanda.

Exemplo: menus contextuais

Quando você usa um dispositivo por toque, os Office Web Apps exibem a interface do usuário fixa no modo de toque por padrão. Você pode alterar esse modo para usar a interface com mouse ativando o botão "Modo de toque".

Esse botão apareça na barra de ferramentas de acesso rápido, na parte superior esquerda dos Office Web Apps, permitindo que você alterne entre o modo de toque e o modo de precisão/mouse.

O botão Modo de Toque (ativado) exibe a interface do usuário por toque:

Close do botão Modo de Toque:

Os menus contextuais, submenus da faixa de opções e menus exibidos sob demanda são mostrados no método de entrada que os acionou (toque ou mouse).

Resumo:

Recomendo que você teste o novo Office Web Apps Preview em skydrive.com ou no Office 365 Preview em um dispositivo por toque com Windows 8 e no iOS do iPad. 

Queremos conhecer sua experiência. Por isso, envie seu comentário para nós. Há uma opção "Enviar Comentários" no canto superior direito do aplicativo e no menu Arquivo.

Estamos constantemente refinando e aprimorando a experiência, e sempre escutamos suas opiniões a respeito do que gosta ou não.

 Renu Devi

Gerente de programas, Office Web Apps

Este é um post localizado. O artigo original está em Bringing touch editing to Office Web Apps on Windows 8 and iOS tablets