Criando a experiência do usuário na Windows Store

Criando a experiência do usuário na Windows Store

  • Comments 0

Tivemos a oportunidade de demonstrar aspectos da experiência da Store em alguns eventos recentes: na nossa conferência //build/, no evento Store Preview e na CES. Achamos que seria útil descrever agora a experiência completa do cliente com a Store no que se refere à navegação e pesquisa no catálogo, e também à atualização e roaming dos aplicativos no Windows 8. Jonathan Wang, gerente de programas da nossa equipe de clientes da Store, descreve os elementos da Store e as nossas escolhas de design.

-- Antoine


Quando resolvemos criar a Windows Store, tínhamos vários princípios e metas de design que nos guiaram em direção à nossa experiência final. A base fundamental do design da Store era garantir que as pessoas pudessem descobrir aplicativos facilmente e adquiri-los de forma rápida. Embora seja uma meta óbvia para um catálogo ou marketplace, na verdade, ela é bastante desafiadora porque o tamanho e a diversidade do catálogo aumentam muito rapidamente, assim como esperamos que aconteça na Windows Store.

Nesta postagem, apresentarei as principais partes da estrutura da Store: a página de aterrissagem, as páginas de tópicos editoriais, as listas de geração de dados, as páginas de detalhes do aplicativo e as experiências de pesquisa, navegação, instalação e atualização. Falarei sobre a relação entre essas superfícies de interface do usuário e como aplicamos a linguagem de design estilo Metro do Windows para atingir a nossa meta de eficiência na descoberta de aplicativos.

O diagrama da estrutura da Store mostra a página de aterrissagem da Store, que tem links para as páginas de editorial, de descrição do aplicativo e de categoria. As páginas de editorial e de categoria também têm links para a página de descrição do aplicativo. Estrutura da Windows Store

Uma página de aterrissagem voltada para a descoberta

Mencionamos na postagem anterior que um dos princípios de design mais importantes da Store era a descoberta. Criamos o Windows 8 em torno da noção de que o conteúdo deveria ficar em destaque e o cromado, em segundo plano. Com um mínimo de cromado, a página de aterrissagem da Store coloca os aplicativos em primeiro plano, permitindo que a marca e a personalidade deles despertem o seu interesse.

Store / categoria em destaque, contendo aplicativos da Evernote, Cut the Rope, eBay e Paintplay, além do conteúdo editorial sobre aplicativos recomendados; categoria de jogos com conteúdo editorial sobre jogos recomendados, além de mais dois aplicativos de jogos
Página de aterrissagem da Windows Store

Na página de aterrissagem da Store, apresentaremos constantemente um conteúdo novo e estimulante, mudando com frequência para que os clientes fiquem na expectativa de sempre haver mais novidades a serem exploradas na Store. A página de aterrissagem combina conteúdos em destaque com conteúdos de navegação (como categorias e listas de aplicativos em destaque). Os resultados de pesquisas nos nossos laboratórios de usabilidade e de entrevistas individuais de clientes indicaram que as pessoas tendem a pesquisar somente o que elas desejam nas lojas de aplicativos atuais porque a maioria das experiências de navegação não é suficientemente atraente. Portanto, o design da nossa página de aterrissagem combina conteúdo em destaque, listas orientadas por dados e listas de categorias em uma experiência de navegação coesa e interativa.

A navegação é simples e tem o design da IU do Windows 8 estilo Metro, portanto, o uso da Store será fácil e familiar para os usuários do Windows 8. As categorias da Store são apresentadas na parte superior da tela, cada uma com aplicativos atraentes em destaque. Para navegar, basta fazer movimentos panorâmicos para a direita ou esquerda. Com um simples movimento do dedo, é incrivelmente fácil ver aplicativos novos e interessantes em todas as categorias, assim como ter uma visão geral de toda a Store. Se você tiver interesse, também poderá fazer uma busca detalhada dos aplicativos de uma determinada categoria com um único toque no nome de uma categoria.

Longa exibição horizontal da Store com categorias: Em destaque, Jogos, Entretenimento, Fotos, Música e Vídeos, Livros e referência, Notícias e tempo, Estilo de vida Role horizontalmente para exibir mais categorias (clique para ampliar a imagem)

Em muitas das categorias da Store, apresentaremos um conjunto de aplicativos escolhidos de forma editorial, com base em uma variedade de fatores, como, por exemplo, se realizam um ótimo trabalho na plataforma ou expressam, de forma excelente, os princípios de design do estilo Metro. Se houver um determinado tema em comum a vários aplicativos que desejamos apresentar, criaremos uma página de "tópico" especial com um link na página de aterrissagem para exibir esses aplicativos. Os clientes também poderão ver listas em destaque dos aplicativos mais populares e daqueles que julgamos ser de melhor qualidade em cada categoria. Apresentaremos aplicativos de desenvolvedores em ascensão junto com aqueles criados por desenvolvedores que já são conhecidos pelo histórico de desenvolvimento de aplicativos de qualidade. Também ofereceremos recomendações de aplicativos com base no histórico de compras do cliente.

Para conhecer as nossas categorias e entender melhor os tipos de aplicativos que encontrará na Store, com o gesto de pinçagem, você poderá reduzir a imagem para ver todas as categorias e depois tocar para saltar para uma determinada categoria. Esse mesmo gesto também pode ser usado na tela Iniciar. Chamamos esse gesto de "zoom semântico" porque ele nos permite ampliar e reduzir o conteúdo de uma página para ver mais ou menos detalhes. A exibição da Store reduzida mostra todas as categorias de aplicativos de uma vez, garantindo uma navegação eficiente aos clientes mesmo quando o catálogo for grande e contiver diversas categorias. O design ajuda a garantir uma navegação eficiente mesmo com a expansão do catálogo e das categorias. Construímos a página de aterrissagem usando um controle ListView padrão junto com o controle do zoom semântico, disponível aos desenvolvedores de aplicativos estilo Metro com o uso de HTML e JavaScript.

Página de aterrissagem da Store, incluindo Em destaque, Jogos, Entretenimento, Fotos e Música e entretenimento Reduza a imagem para ver mais categorias

Com um grande número de categorias, a estrutura de navegação plana da Store se torna ainda melhor com o zoom, que é um dos elementos de arquitetura principais do design da experiência do usuário com o estilo Metro no Windows 8.

Pesquisando e navegando na Store

A pesquisa se tornou um componente incrivelmente importante das interfaces de usuário e é atualmente uma das formas mais comuns de os clientes descobrirem produtos para comprar em lojas online. A Windows Store implementou o contrato do Windows Search, que permite que você pesquise de dentro de qualquer aplicativo que estiver usando, bastando para isso, tocar no botão Pesquisar. Isso facilita a pesquisa de novos aplicativos quando você já estiver com o aplicativo da Store aberto. Mas também facilitamos a pesquisa na Store sem que seja necessário iniciá-la.

Exibição do aplicativo de meteorologia, com o painel de pesquisa à direita, com o termo "sudoku" a ser pesquisado na Store.Pesquise aplicativos de qualquer lugar no Windows

Se você por acaso se lembrar de um aplicativo enquanto estiver navegando na Web ou usando outro aplicativo, poderá apenas tocar no botão Pesquisar, digitar o termo de pesquisa e selecionar a Store para ver os resultados da pesquisa para a sua consulta.

Você usará a mesma interface do usuário para fazer pesquisas enquanto estiver na Store, para que tenha a mesma funcionalidade de forma consistente.

Home page da Store, com o painel de pesquisa à direita, com o termo de pesquisa "aplicativos internos" inserido
Usando a pesquisa na Store

Assim que começar a digitar, sugestões de texto imediatamente aparecerão no painel de pesquisa. Esse recurso já era útil para a maioria de nós e se tornou ainda mais útil quando usamos um teclado de toque. Se alguma das sugestões de texto for um aplicativo, ele aparecerá como resultado "Recomendado" e, tocando nele, você será direcionado à página de detalhes do aplicativo. Não é necessário ir para uma página de resultados de pesquisa primeiro, portanto, há menos etapas entre o cliente e a página de detalhes do aplicativo. Mesmo na recomendação da pesquisa, o ícone da marca do aplicativo permite um reconhecimento imediato.

Se você não tiver nenhum aplicativo específico em mente e digitar uma consulta de pesquisa mais geral, você será direcionado à página de resultados da pesquisa.

Resultados para "aplicativos internos" com 10 aplicativos Página de resultados da pesquisa

Nessa página, você poderá navegar nos resultados, que se apresentam classificados por relevância inicialmente. Você também poderá classificá-los por atributos diferentes, como preço, classificação média de usuários mais alta e data de lançamento. Para reduzir o número de resultados, você poderá filtrá-los por categoria ou preço.

Usamos o mesmo modelo de design da nossa exibição de categoria, reduzindo, novamente, a experiência ao menor número de conceitos efetivos, para aumentar a capacidade de descoberta. Toque no cabeçalho de uma categoria na página de aterrissagem para acessar uma das páginas da categoria. Essa exibição permite navegar casualmente em todo o catálogo. Criamos a página de categoria para ser muito semelhante à página de resultados da pesquisa, oferecendo as mesmas opções de classificação e filtragem avançada. E, assim como na página de aterrissagem e na IU de pesquisa, a navegação nas categorias é muito simples. Não há paginas, basta rolar continuamente para ver mais aplicativos.

Categoria de jogos, com 28 aplicativos e filtros: Todos os preços, grátis, grátis e de avaliação, e pagos.
Página de categoria

Páginas de descrição do aplicativo

A descrição do aplicativo é o local em que os clientes podem aprender tudo o que precisam saber sobre o aplicativo (e onde os desenvolvedores podem dizer por que seus aplicativos são importantes e despertarão o interesse dos clientes).

Cut the Rope / Store > Jogos > Quebra-cabeças / ***** Classificação média (1023) / US$ 1,49 / Botões: Comprar / Avaliar / Imagem e descrição do aplicativo
A página de descrição do aplicativo destaca a marca do aplicativo

Para garantir que a personalidade do aplicativo seja destacada, a página de descrição do aplicativo usa os elementos visuais do pacote do aplicativo para aplicar o logotipo e a cor da marca do aplicativo. Além da descrição e lista de recursos do aplicativo, você poderá usar a classificação média e avaliações enviadas pelos usuários para julgar a qualidade do aplicativo e se ele atende às suas necessidades. Você pode percorrer as capturas de tela que foram implementadas com o controle [FlipView Object] (Objeto FlipView), que também está disponível para os desenvolvedores. As capturas de tela são posicionadas com muito destaque porque, para muitas pessoas, os elementos visuais são o que melhor descrevem o aplicativo. A descrição do aplicativo também mostrará a classificação etária e uma lista de permissões de aplicativos necessárias, como acesso a um sensor de localização ou biblioteca de documentos.

Os aplicativos da área de trabalho que forem aprovados pela certificação de aplicativos da área de trabalho também poderão ter páginas de descrição do aplicativo. Eles poderão ser descobertos na Store por meio de pesquisa e navegação e terão um link para o site do desenvolvedor do aplicativo, para que os clientes possam comprar o aplicativo lá.

Contoso / Obter aplicativo do desenvolvedor / Ir para o site do desenvolvedor (link) / Visão geral do aplicativo
Página de descrição do aplicativo da área de trabalho

Instalando aplicativos

A instalação de aplicativos no Windows 8 será simples, rápida e confiável.

Bastará um toque na página de descrição do aplicativo na Windows Store para instalar aplicativos gratuitos e de avaliação. Somente isso. Quando forem aplicativos pagos, solicitaremos a sua senha para confirmar a sua compra. Se não desejar inserir a senha em cada compra, há uma configuração para desativar essa etapa de segurança (mas acreditamos que aqueles que compartilham dispositivos com crianças prefiram usar essa proteção contra compras indesejadas.

Como queremos muito favorecer a descoberta de aplicativos, tomamos uma decisão consciente de não tirar o cliente de seu contexto quando ele estiver instalando um aplicativo. Você não precisa ficar olhando para a barra de progresso e contando cada segundo que passa. Da mesma forma, mantê-lo na página de descrição do aplicativo que você acabou de adquirir não faz sentido, pois não haverá mais o que fazer nessa página. Em vez disso, assim que a instalação começar, você voltará para a página que estava olhando antes, para poder continuar comprando aplicativos; em muitos casos, será a página de aterrissagem, de categoria ou outra lista de ótimos aplicativos a serem experimentados que você estava olhando antes. A pesquisa no nosso laboratório mostrou que, depois de adquirirem um aplicativo, as pessoas gostaram de continuar descobrindo outros.

Você ainda poderá acompanhar a instalação pelo indicador de progresso, e o mosaico do aplicativo que estiver sendo instalado será adicionado à tela Iniciar. E, se estiver muito curioso sobre o andamento da instalação, você poderá tocar no indicador de progresso para ver os detalhes.

Página de detalhes da instalação com uma lista de quatro aplicativos com barra de progresso "Baixando..."
Exibição dos aplicativos que estão sendo instalados

Quando a instalação for concluída, uma notificação informará que o aplicativo está pronto. Bastará tocar na notificação para iniciar o aplicativo e começar a usá-lo no segundo em que estiver pronto. O mosaico de um novo aplicativo sempre será exibido no final da tela Iniciar. Mas você poderá movê-lo facilmente para onde desejar, tendo o controle da organização dos aplicativos na tela Iniciar.

Atualizando aplicativos

Também quisemos garantir que a atualização fosse uma experiência fácil e previsível. Uma vez por dia, verificaremos se há atualização para algum dos aplicativos instalados. O mosaico da Store mostrará o número de atualizações disponíveis para que você saiba claramente que há algo esperando por você na Store.

Na página de atualizações, bastará apenas tocar em um botão para atualizar todos os seus aplicativos. Todas as atualizações são selecionadas automaticamente. Desejamos que todos os aplicativos sejam atualizados em tempo hábil, logo que os desenvolvedores disponibilizarem a atualização.

Atualizações de aplicativos / 8 atualizações disponíveis As atualizações dos seus aplicativos podem ser instaladas de forma rápida e fácil

As atualizações serão instaladas de forma muito rápida. Baixaremos (sem instalar) essas atualizações em segundo plano quando o computador estiver ocioso, mas nunca quando você estiver em uma rede de banda larga móvel que cobre pelo uso de dados. É claro que, se não desejar baixar as atualizações automaticamente, você poderá desativar esse comportamento nas configurações da Store. Assim que iniciar o processo de atualização, você voltará para a página anterior na Store, para que possa procurar conteúdos novos e interessantes enquanto as suas atualizações forem instaladas.

Readquirindo aplicativos

Sabendo que você pode ter mais de um PC e provavelmente desejará ter os seus aplicativos em todos eles, facilitamos a instalação e execução de todos os seus aplicativos em até cinco PCs com o Windows 8. Sempre que você instalar um aplicativo em um novo dispositivo, esse dispositivo será adicionado a uma lista de dispositivos com permissão para executar o aplicativo. Você será solicitado a remover um dos dispositivos se desejar instalar o aplicativo em um sexto dispositivo.

Seus aplicativos / exibição de 9 aplicativos Veja todos os aplicativos e reinstale-os

Também permitimos uma filtragem rápida pelos aplicativos que foram instalados em um determinado dispositivo. Isso facilita pegar os aplicativos que você tem em um dispositivo e instalá-los em outro. Na verdade, se esses aplicativos tiverem implementado o roaming e você estiver em uma conta conectada (se entrar no Windows 8 com um Windows Live ID), as configurações e estado dos aplicativos também serão preservados em todos os dispositivos.

Atingindo o equilíbrio certo

Na criação da Windows Store, tentamos alcançar um equilíbrio entre um design otimizado para a descoberta casual de aplicativos por meio de conteúdo organizado e um design em que os clientes possam localizar facilmente os aplicativos que estiverem pesquisando. Trabalhamos muito para atrair os clientes, destacando as cores e o ícone da marca de cada aplicativo tanto nos detalhes do aplicativo quanto nos próprios aplicativos. O nosso objetivo ao criar o processo de descoberta, instalação e atualização de aplicativos era torná-lo o mais simples e rápido possível. Como o processo de descoberta de aplicativos será mais fácil do que nunca para os clientes, acreditamos que a nova Windows Store represente a maior oportunidade já proporcionada aos desenvolvedores.

Jonathan J. Wang


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

  • Loading...
Leave a Comment
  • Please add 4 and 6 and type the answer here:
  • Post