Estudo de caso de design: iPad para aplicativo do Tempo de Execução do Windows

O iOS é uma plataforma popular para a criação de aplicativos que dão prioridade ao toque, são divertidos e atraentes. Com a introdução do Windows 8, os designers e desenvolvedores têm uma nova plataforma para soltar a criatividade.

Neste estudo de caso, queremos ajudar os designers e desenvolvedores familiarizados com o iOS a reinventar seus aplicativos usando os princípios de design para aplicativos da Windows Store. Mostraremos como converter os padrões comuns de experiência e interface do usuário encontrados no iPad em aplicativos da Windows Store do Windows 8. Aproveitamos nossa experiência para criar o mesmo aplicativo para iPad e Windows 8. Usamos cenários comuns de design e desenvolvimento para mostrar como utilizar a plataforma do Windows 8 e incorporar os princípios de design para aplicativos da Windows Store.

Para saber mais sobre a oportunidade de negócios do Windows 8, acesse Venda de aplicativos. Para obter mais informações sobre os recursos usados para criar aplicativos da Windows Store, acesse Guia de Produtos do Windows 8 para Desenvolvedores.

Baixe este artigo: para baixar este artigo, consulte Versão offline deste artigo.

O aplicativo

O aplicativo que estamos desenvolvendo é um álbum de fotos conectado, no qual os usuários podem visualizar e gerenciar fotos e vídeos online usando um modo de exibição de linha do tempo.

Primeiramente, o aplicativo foi criado para iPad. A próxima figura mostra a anatomia do aplicativo de iPad. Agora, vejamos como cada componente é convertido para a linguagem de design da Microsoft.

1. Layout e navegação

2. Comandos e ações

3. Contratos: pesquisa, compartilhamento e outros

4. Toque

5. Orientação e modos de exibição

6. Notificações

Layout e navegação

Foco no conteúdo, não nos elementos visuais

O aplicativo de álbum de fotos deve ser ótima em mostrar fotos do usuário e as atividades sociais recentes associadas a elas. Ao criar o aplicativo da Windows Store, nossa primeira meta foi remover todos os elementos de interface do usuário que não tinham importância direta para a funcionalidade central do aplicativo. Por exemplo, as barras de navegação superior e inferior e os controles de paginação podem ser removidos. Na próxima seção, falaremos sobre como os usuários podem exibir elementos visuais quando necessário usando a barra de aplicativos.

Aplicativo para iPad A. Barra de navegação superior B. Conteúdo do aplicativo C. Interface do usuário de paginação D. Barra com guias inferior	Aplicativo da Windows Store B. Conteúdo e logotipo do aplicativo

 

Exemplo: modo de exibição de linha do tempo na tela inicial

Os dois aplicativos mostram fotos em suas telas iniciais organizadas por mês, mas o modo como o mês é representado é bem diferente. Na versão do álbum de fotos para iPad, a página é otimizada para exibir os 12 meses de um ano com uma metáfora de fotos empilhadas, usada para representar cada mês. Durante o desenvolvimento da tela inicial do aplicativo da Windows Store, optamos por trazer mais imagens e conteúdo social ao nível superior para proporcionar mais contexto aos usuários. Removemos as bordas das imagens e, em vez disso, usados espaços em branco para fornecer mais foco visual às fotos, que são o ponto focal do aplicativo.

iPad: cada mês é representado por fotos empilhadas, com apenas uma foto visível.	Aplicativo da Windows Store: cada mês é representado por várias fotos, seus títulos e o número de comentários associados às fotos. Os usuários podem ver mais conteúdo em destaque para um mês na tela inicial.

 

Simplificar a hierarquia de navegação

Usamos o padrão de navegação hierárquica no design do aplicativo da Windows Store. Quando recriamos o design do aplicativo, simplificamos a hierarquia de navegação para permitir o acesso a mais conteúdo por meio da tela do hub do aplicativo, eliminando a necessidade de navegação.

Exemplo: removendo a barra de guias inferior

Aplicativo para iPad A. Modo de exibição de fotos B. Modo de exibição de comentários A barra com guias contendo dois pivôs (fotos e comentários) está sempre na tela. Os usuários podem ver um modo de exibição ou outro.

Aplicativo da Windows Store Combinamos os comentários e as fotos em um modo de exibição para eliminar a necessidade de uma interface do usuário com guias. O design de hub da tela inicial revela o conteúdo mais importante de cada seção. Para ver a lista completa de comentários, os usuários podem tocar no cabeçalho de grupo chamado Recent comments (Comentários recentes).

 

Usar manipulação direta para navegar

A manipulação direta permite que os usuários interajam com o conteúdo e naveguem até áreas diferentes naturalmente. Ao desenvolver o aplicativo da Windows Store, usamos manipulação direta sempre que possível, aproveitando controles internos como Zoom Semântico, que permite que os usuários naveguem com mais eficiência.

Aplicativo para iPad Na tela inicial, toque no botão Years (Anos) na barra de navegação superior para exibir uma janela pop-over e selecione um ano.

Aplicativo da Windows Store Na tela inicial, pince com dois dedos para afastar o zoom e ver todos os meses e anos. Desse modo, os usuários podem ir para qualquer mês de qualquer ano com rapidez. Os usuários também podem ter uma visão geral dos meses que têm fotos e dos que não têm (fundo vermelho apagado). Os usuários podem navegar apenas manipulando o conteúdo, sem usar elementos visuais ou navegar para uma página diferente.

 

Para auxiliá-lo a escolher qual o melhor navegador para o seu aplicativo, acesse Tipos de navegadores.

Acesse o Padrão de navegador simples atualmente em uso na seção Características para Aplicativos, da série do início ao fim.

Comandos e ações

Manter ações contextuais do aplicativo na barra de aplicativos

Quando recriamos o design de comandos ou ações contextuais no aplicativo, novamente seguimos a abordagem de "dar prioridade ao conteúdo em vez de elementos visuais" e disponibilizamos todas as ações contextuais pelo controle da barra de aplicativos. Os comandos usados com frequência estão próximos das bordas direita e esquerda, de modo a facilitar o alcance com a mão. Desse modo, a superfície de design do aplicativo não fica com acúmulo de controles. Além disso, independente de onde o usuário está, ele pode passar o dedo de baixo para cima pela tela para exibir a barra de aplicativos e ver as ações relevantes. Todos os aplicativos da Windows Store podem usar a barra de aplicativos para seus comandos. Como os usuários estarão familiarizados com as interações da barra de aplicativos, ela também aumenta a usabilidade do aplicativo e dá a sensação de que todo o sistema é coeso.

Exemplo: excluindo fotos

Aplicativo para iPad Os comandos do aplicativo estão na parte superior da tela quando um usuário entra no modo de seleção.

Aplicativo da Windows Store A. A barra de aplicativos fica oculta por padrão para proporcionar uma experiência imersiva aos usuários. Um usuário pode passar o dedo de baixo para cima pela tela para abrir a barra de aplicativos. B. Quando um usuário seleciona objetos na página, as ações contextuais dos itens selecionados aparecem na barra. As ações mudam dependendo dos objetos selecionados e da parte do aplicativo acessada pelo usuário. Geralmente, os comandos globais são colocados do lado direito da barra de aplicativos. Os comandos que mudam de acordo com o contexto devem ser posicionados do lado esquerdo da barra de aplicativos.

 

Contratos

Usar o contrato de pesquisa para centralizar a experiência de pesquisa

Em vez de criar uma interface de entrada de pesquisas permanente na tela do aplicativo, implementamos o contrato de pesquisa. Os usuários podem chamar a pesquisa de forma consistente por meio de botões. Além disso, os resultados podem ser apresentados no aplicativo de forma natural em relação ao conteúdo. Usando o contrato de pesquisa, os usuários podem chamar o botão Pesquisar de qualquer parte do sistema para procurar conteúdo em aplicativos com suporte ao contrato.

Exemplo: procurando uma foto no aplicativo de diário de fotos

Aplicativo para iPad A pesquisa está disponível no aplicativo, na tela inicial. Quando um usuário digita um termo de pesquisa, os resultados começam a aparecer e podem ser selecionados pelo usuário.

Aplicativo da Windows Store O usuário abre a barra de botões e acessa o botão Pesquisar. O aplicativo de álbum de fotos é selecionado por padrão, pois o usuário está acessando o aplicativo no momento. Quando o usuário começa a digitar, o aplicativo fornece sugestões de pesquisa no painel. Desse modo, os usuários podem ver rapidamente quais termos geram resultados de pesquisa. Depois que o usuário envia a consulta, ele vê um modo de exibição de resultados da pesquisa e seleciona o resultado desejado.

 

Exemplo: procurando uma foto fora do aplicativo de diário de fotos (disponível apenas em aplicativos da Windows Store)

Este exemplo mostra como pesquisar um termo em diferentes aplicativos selecionando um novo aplicativo por meio do painel de pesquisa. Essa funcionalidade permite que, a qualquer momento, os usuários pesquisem qualquer tipo de conteúdo em qualquer aplicativo.

Aplicativo da Windows Store Um usuário pesquisa o termo "Barcelona" no aplicativo Tweet@Rama e deseja ver fotos de Barcelona usando o álbum de fotos. Agora, o álbum de fotos é o provedor dos resultados da pesquisa. O aplicativo é iniciado automaticamente e exibe os resultados da pesquisa. O usuário não precisa iniciar o aplicativo de álbum de fotos para realizar a pesquisa.

 

Use o contrato de compartilhamento para atingir mais destinos e pessoas importantes

A integração com mídias sociais é um componente essencial na maioria dos aplicativos. Ao criar aplicativos para iPad, os designers e desenvolvedores normalmente escolhem quais são os canais de mídia social compatíveis com o aplicativo (como Twitter ou Facebook) e, em seguida, os desenvolvedores devem integrar cada um desses serviços individualmente ou usar uma das estruturas disponíveis. Quando há alterações de API nesses serviços de compartilhamento, os desenvolvedores devem atualizar seus códigos para os serviços de compartilhamento a fim de darem continuidade a seus trabalhos.

Ao converter a funcionalidade de compartilhamento para o aplicativo da Windows Store, usamos o contrato de Compartilhamento do sistema. Esse contrato simplifica o design e o desenvolvimento, pois não há necessidade de se conectar com todos os serviços que o usuário queira usar. Além das redes sociais, os usuários também podem salvar conteúdo em outros serviços, como um aplicativos de notas, por exemplo, Notespace ou EverNote. Usando apenas uma pequena quantidade de códigos, nosso aplicativo fica conectado a todos os aplicativos da Windows Store que têm o contrato de Compartilhamento implementado. Não há necessidade de lidar com mudanças de API para sites de redes sociais ou serviços Web externos. Da perspectiva dos usuários, eles podem sempre compartilhar um local consistente acessando os botões e abrindo o painel Compartilhar.

Exemplo: compartilhando uma foto no diário de fotos com outro aplicativo

iPad Para compartilhar uma foto no aplicativo de álbum de fotos do iPad, primeiro o usuário deve tocar no botão de ação na barra de navegação superior e, em seguida, optar pelo compartilhamento no Facebook. O desenvolvedor deverá ter mais trabalho e adicionar mais botões de compartilhamento caso queira realizar integração com outros serviços de redes sociais no futuro.

Aplicativo da Windows Store Os usuários podem sempre encontrar opções de compartilhamento em um local consistente, independente do aplicativo usado. Qualquer aplicativo instalado que tenha sido designado como um destino de compartilhamento aparecerá na lista de aplicativos do painel Compartilhar. Por exemplo, Socialite, Tweet@Rama, Notespace e PaintPlay são destinos de compartilhamento. Os usuários podem compartilhar vários tipos de conteúdos. Por exemplo, eles podem compartilhar links, fotos ou salvar as informações em um aplicativo de anotações. Os destinos de compartilhamento mais usados são exibidos na parte superior da lista para ajudar os usuários a concluir as tarefas com rapidez.

 

Além de ser uma origem de compartilhamento, desenvolvemos nosso aplicativo de álbum de fotos para ser um destino de compartilhamento também. Os usuários podem compartilhar fotos com facilidade de um aplicativo para seus fluxos de fotos no álbum de fotos. Essa conexão também é possível graças do contrato de compartilhamento. Consulte as diretrizes e lista de verificação de compartilhamento de conteúdo para obter mais informações sobre quais aplicativos são os melhores destinos de compartilhamento.

Exemplo: compartilhando fotos de outro aplicativo com o diário de fotos – destino de compartilhamento (disponível apenas em aplicativos da Windows Store)

Neste exemplo, um usuário em outro aplicativo de fotos vê fotos de uma viagem ao México. Ele deseja compartilhar as fotos do álbum com sua coleção no aplicativo de álbum de fotos para facilitar a visualização delas em um modo de exibição de linha do tempo. Quando o usuário abre o painel Compartilhar, ele vê que o aplicativo de álbum de fotos está listado como destino de compartilhamento de chama o fluxo de trabalho de compartilhamento.

 

Usar o seletor de arquivos para acessar arquivos de vários locais

O seletor de arquivos é uma caixa de diálogo em tela inteira que permite que os usuários acessem arquivos e pastas localizados no PC local, conectados a dispositivos de armazenamento ou a um Grupo Doméstico. Ele também pode acessar itens de aplicativos e participar do contrato de seletor de arquivos.

Exemplo: carregando uma foto a partir do sistema de arquivos local

Aplicativo para iPad O aplicativo de iPad permite acessar fotos na biblioteca de fotos local e em alguns serviços de rede social.

Aplicativo da Windows Store A. Quando o usuário toca no botão Carregar na barra de aplicativos, a interface do usuário do seletor de arquivos é aberta. Ela é uma superfície de interface do usuário consistente que o usuário vê sempre que deseja acessar arquivos. B. Tocando no cabeçalho Arquivos, o usuário vê um menu suspenso com os locais de todos os arquivos disponíveis e navega até uma pasta de arquivos. C. Quando o usuário seleciona várias fotos da pasta, é exibida uma lista de miniaturas na parte inferior esquerda mostrando as fotos selecionadas.

 

Exemplo: usando uma foto do diário de fotos em outro aplicativo (disponível apenas em aplicativos da Windows Store)

Também tiramos proveito de um recurso exclusivo dos aplicativos da Windows Store e adicionamos suporte à seleção de conteúdo de fotos do diário de fotos em outro aplicativo. Isso dispensa o trabalho de baixar fotos do diário para o sistema de arquivos local e depois carregar as fotos para outro aplicativo. O álbum de fotos implementa o contrato de seletor de arquivos para que o sistema o reconheça como um local de armazenamento de arquivos.

Aplicativo da Windows Store Um usuário está na tela Configurações do PC e toca em Procurar para personalizar a foto da sua conta. Como o álbum de fotos implementa o contrato de seletor de arquivos, o usuário vê que o aplicativo pode ser acessado no diretório de arquivos. Dessa forma, o usuário pode selecionar uma foto armazenada em sua coleção no álbum de fotos.

 

Toque

Passando o dedo nas bordas para acessar comandos do aplicativo e do sistema

Com o Windows 8, um usuário pode passar o dedo pelas bordas para acessar comandos e navegar entre aplicativos.

• Para revelar os comandos do aplicativo, passe o dedo começando pela borda inferior ou superior da tela. A barra de aplicativos sempre deve ser usada para exibir comandos do aplicativo.
• Passar o dedo na borda direita da tela revela os botões que contêm os comandos do sistema.
• Passar o dedo começando pela borda esquerda alterna para os aplicativos usados anteriormente.
• Passar o dedo da borda superior para a borda inferior da tela permite encaixar ou fechar aplicativos.

Exemplo: acessando a barra de aplicativo e os botões em um aplicativo da Windows Store

Passe o dedo na borda inferior ou superior da tela para acessar os comandos do aplicativo.	Passe o dedo na borda direita da tela para revelar os botões que contêm comandos do sistema (Pesquisar, Compartilhar, Iniciar, Dispositivos e Configurações).

 

Deslizamento transversal para selecionar objetos

Com o Windows 8, um usuário pode deslizar o dedo por uma curta distância, perpendicular à direção do movimento panorâmico, para selecionar um objeto em uma lista ou grade. Quando os objetos são selecionados, a barra de aplicativos é revelada, mostrando automaticamente os comandos relevantes.

Exemplo: selecionando várias fotos para exclusão

Aplicativo para iPad Os usuários podem entrar em um modo de edição específico para realizar a ação de seleção e outras ações de edição. Isso é necessário porque o toque é reservado a ações primárias, como iniciar. Quando terminam, os usuário devem sair do modo de edição.	Aplicativo da Windows Store Passando o dedo no objeto com um movimento para baixo, os usuários o selecionam. Com isso, a barra de aplicativos aparece automaticamente com comandos relavantes em relação ao contexto. Os usuários podem tocar e selecionar um objeto sem entrar nem sair de outro modo. Esse gesto é reversível, o que torna a seleção muito mais eficiente em aplicativos do Windows 8.

 

Apertar ou estender para zoom semântico

Embora os gestos de pinçar e esticar sejam comumente usados para redimensionamento em aplicativos de iPad e da Windows Store, no Windows 8 eles também permitem saltar para o início, fim ou para qualquer lugar dentro do conteúdo usando Zoom Semântico. O zoom semântico permite que o usuário reduza para ver dados em grupos relacionados, além de permitir ampliar novamente de forma rápida. Em vez de proporcionar navegação para a consulta de longas listas de conteúdo, use o zoom semântico sempre que possível para esse tipo de interação. Logicamente, quando um usuário está visualizando uma foto no modo de tela inteira, é possível usar os gestos de apertar e estender para o zoom semântico.

Exemplo: zoom semântico na tela inicial e em uma página de mês

Aplicativo da Windows Store A. O zoom semântico na tela inicial permite que os usuários naveguem até um mês específico em qualquer ano com rapidez. B. O zoom semântico em uma página derivada do modo de exibição de mês permite que os usuários naveguem até um dia específico, além de fornecer um gráfico de informações, detalhando quantas fotos estão disponíveis naquele ano.

 

Tamanho da tela e orientação

Projetar um layout que se adapte

Um aplicativo de iPad tem tamanho de tela e resolução fixos, com duas orientações que os designers devem levar em consideração. O Windows 8 é executado em vários fatores forma, desde tablets portáteis até desktops all-in-one. Como resultado, você pode usar o espaço adicional da tela para mostrar mais conteúdo aos usuários. Ao recriar o design do aplicativo de álbum de fotos, levamos em consideração a aparência do aplicativo em duas orientações de dispositivos, tendo em vista as resoluções de tela e os tamanhos dos dispositivos. O layout de grade facilita o dimensionamento do design para o layout retrato e telas de alta resolução. Por exemplo, incluímos fotos mais realçadas em cada mês quando há mais espaço vertical disponível.

Exemplo: design de tela inicial em telas com formato de paisagem, retrato e grande (somente para aplicativos da Windows Store)

Aplicativo para iPad O mesmo conteúdo é mostrado nos layouts paisagem e retrato. O conteúdo reflui na orientação retrato.

Aplicativo da Windows Store Em layout retrato e telas maiores, o aplicativo mostra mais conteúdo em cada seção da página do hub usando espaço extra. De modo semelhante à criação de imagens para uma tela retina do iOS, criamos várias imagens para porcentagens de dimensionamento do Windows diferentes: 100%, 140% e 180%. Essas imagens são carregadas automaticamente em tablets HD.

 

Usar larguras estreitas para atrair os usuários

O Windows 8 permite que os usuários realizem várias tarefas, colocando diversos aplicativos um ao lado do outro na tela. Projetar seu aplicativo para que ele funcione bem com larguras estreitas é uma ótima maneira de aumentar o tempo do aplicativo na tela e atrair os usuários por períodos maiores. É fácil para um usuário mudar o tamanho do aplicativo manipulando o divisor entre dois aplicativos. Por isso, é importante manter o contexto entre redimensionamentos. Não queremos que os usuários percam o estado do aplicativo como resultado do redimensionamento dele.

Para saber mais sobre redimensionamento, veja Diretrizes para tamanhos de janelas e dimensionamento de telas e Diretrizes para redimensionamento de janelas em layouts amplos e estreitos.

Exemplo: tela inicial em largura estreita

Aplicativo da Windows Store Quando a tela inicial é redimensionada para uma largura estreita, um usuário ainda pode acessar o mesmo conteúdo. Em um tamanho alto e estreito, um usuário faz movimentos panorâmicos verticalmente para acessar mais conteúdo, pois é mais confortável fazer esses movimentos ao longo da borda comprida. Isso é diferente do movimento panorâmico horizontal no modo de exibição de tela inteira, que também é otimizado para movimentos panorâmicos ao longo da borda comprida.

 

Notificações

Usar blocos para atualizações persistentes e dinâmicas

O iOS 5 introduziu uma central de notificações, onde novas notificações aparecem rapidamente na parte superior da tela. Os usuários podem passar o dedo na parte superior para ver todas as mensagens na central. Além disso, os ícones de aplicativos na Springboard do iOS podem ter emblemas numéricos ligados a eles para indicar que há novas mensagens. Os blocos na tela inicial do Windows 8 combinam a funcionalidade dos emblemas numéricos nos ícones de aplicativos com a Central de Notificações em um iPad. Os usuários podem iniciar aplicativos e ler notificações a partir de um único local. Além disso, ao contrário das notificações no iOS, que têm um formato fixo, os blocos de aplicativos da Windows Store estão disponíveis em três tamanhos quadrados e um tamanho largo, além de terem uma rica coleção de modelos para os designers escolherem.

Exemplo: notificações na tela inicial

iPad A. Ícone de aplicativo com emblema numérico na Springboard do iPad. B. Central de notificações com notificação do álbum de fotos.	Windows 8 C. Bloco na tela inicial com emblema numérico e notificações. Há muitos modelos de blocos disponíveis.

 

Usar notificações do sistema para notificações temporárias e importantes

Você pode usar notificações do sistema para notificar os usuários a respeito de eventos em tempo real. Ao contrário das atualizações de bloco, que são passivas, as notificações do sistema nos aplicativos da Windows Store são atualizações importantes que interrompem os usuários. Elas são mostradas na parte superior direita da tela e podem aparecer em qualquer local no sistema. Geralmente, é melhor deixar que os usuários aceitem as notificações durante a primeira execução do aplicativo. Se aplicável, mostre as notificações do sistema recentes em blocos, enquanto ainda são importantes. As notificações do sistema são semelhantes a alertas temporários do iOS exibidos como banners na parte superior da tela. Porém, os designers podem escolher seus modelos em uma coleção de modelos de notificações do sistema, tornando suas notificações mais relevantes.

Exemplo: o diário de fotos notifica os usuários quando eles recebem um comentário de um membro da família

O usuário está configurado para receber notificações do sistema quando um membro da família faz comentários sobre fotos no aplicativo.

 

Sobre os autores

Bart Claeys é o principal designer de experiência do usuário da Ratio Interactive. Ele é especializado em interfaces de usuário/experiência do usuário para Web e aplicativos móveis. Ele já trabalhou como diretor de arte interativa para a Saatchi & Saatchi Brussels, onde criou campanhas interativas para Toyota, Sony e várias outras marcas internacionais. Bart é mestre em desenvolvimento de produtos e passou por treinamento adicional em gestão de marcas. Ele é o fundador do site Creativeskills.be, o principal canal de empregos na área de criatividade da Bélgica. Em 2006, Bart ganhou o prêmio "Você é o futuro de Flandres", criado pelo governo de Flandres para promover o empreendedorismo.

Qixing Zheng é gerente de programas de experiência do usuário da Microsoft. Ela faz parte da equipe que criou a interface do usuário do Windows 8 e tem ajudado os designers a aprender mais sobre a linguagem de design da Microsoft. Sua paixão está profundamente enraizada em ajudar as pessoas a melhorarem a experiência de seus usuários com as tecnologias que usam diariamente. Antes de se juntar à equipe do Windows, Qixing trabalhou como primeira consultora de experiência do usuário na Microsoft Canada, onde deu palestras em universidades, comunidades de design e empresas sobre o investimento da Microsoft em experiência do usuário. Ela também trabalhou na identificação de pessoas proeminentes na área de design e na coleta de histórias de design da comunidade.

 

Tópicos relacionados

Recriando designs de aplicativos do iOS no Windows 8

Recursos para desenvolvedores do iOS