Criando aplicativos estilo Metro que se destaquem da concorrência

Blog do desenvolvedor de aplicativos do Windows 8

Ideias sobre a criação de aplicativos com o estilo Metro para o Windows 8, da equipe de engenharia do Windows 8

Criando aplicativos estilo Metro que se destaquem da concorrência

  • Comments 0

Quando você enviar seu aplicativo à Loja, não resta dúvida de que haverá outros aplicativos em sua categoria que concorrerão para chamar a atenção das pessoas. Ser capaz de mostrar com inteligência os pontos de diferenciação em suas ofertas e manter o foco em apresentar as principais situações nas quais você é o melhor são ações cruciais para que um aplicativo estilo Metro se destaque da concorrência.

O Windows 8 oferece um conjunto de padrões de design, controles comuns e funcionalidades internas de plataforma, como contratos, que podem ajudá-lo a se concentrar no que você faz de melhor. Por exemplo, apenas para citar alguns: a barra de aplicativos é um controle comum que ajuda as pessoas a se concentrarem em seu conteúdo e minimiza distrações; o padrão de toque prescreve um conjunto de gestos que são usados consistentemente em controles de plataforma, como passar o dedo na borda para ativar a barra de aplicativos, a fim de que as pessoas possam se concentrar em usar com segurança seu aplicativo sem precisar aprender novas interfaces; o contrato de Compartilhamento é a ''cola'' que permite que dois aplicativos funcionem juntos, a fim de que o usuários possam realizar mais ações com seu conteúdo.

Esta postagem é um pouco diferente de algumas das outras postagens – em vez de falar sobre padrões de codificação, falaremos sobre padrões de design que você pode usar em seu processo de planejamento. Apresentarei um aplicativo de exemplo, Food with friends, e começarei respondendo a pergunta que é essencial para se destacar dos demais: "No que meu aplicativo é melhor em sua categoria?". Em seguida, ilustrarei algumas etapas práticas para criar o layout e a estrutura do aplicativo, a fim de destacar os principais cenários e pontos de diferenciação sobre o que há de melhor nele. Esta é a primeira em uma série de postagens ocasionais que ocorrerão nos próximos meses. As últimas postagens continuarão usando esse aplicativo como um exemplo e apresentarão formas nas quais você pode aproveitar esses vários aspectos da plataforma Windows 8 para criar experiências que transmitam uma sensação imersiva, elaborada, rápida e fluida.

Vamos lá!

Exemplo: Food with friends

Digamos que estejamos criando um aplicativo que ajude as pessoas a encontrarem restaurantes. Vejamos o processo de criação desse aplicativo.

1. Identificando os pontos de diferenciação

Começaremos identificando um foco que nos permitirá nos diferenciarmos de outros concorrentes na categoria de restaurantes:

Meu aplicativo é o melhor em sua categoria ao ajudar usuários e seus amigos a localizarem um restaurante para jantarem.

O aspecto exclusivo desse aplicativo está em ajudar os usuários e seus amigos a encontrarem um restaurante para jantar. Esse aplicativo diz respeito a fazer com que os amigos cheguem a um consenso sobre um local para comerem algo, e terá foco em mostrar as preferências dos amigos, a fim de que um usuário possa considerá-las ao tomar decisões. Essa ênfase destaca nosso aplicativo de outros aplicativos genéricos na mesma categoria, que podem simplesmente estar fornecendo detalhes de restaurantes locais.

Essa declaração de "maior qualidade" descreve os motivos pelos quais o usuário desejará comprar esse aplicativo e não um do concorrente na mesma categoria. Estaremos nos referindo a isso novamente muitas vezes à medida que fizermos trocas e decidirmos quais funcionalidades de plataforma e conjunto de recursos usar.

Em virtude disso, vamos chamar esse aplicativo de Food with friends.

2. Seleção dos cenários certos

Em seguida, vamos identificar os principais cenários nos quais nosso aplicativo terá foco com base em nossa declaração de maior qualidade. No processo de brainstorming e seleção de situações, poderá haver um grande número de itens interessantes que poderiamservir de suporte (como ver o valor nutricional dos pratos). Mas para fornecer de fato a experiência exclusiva, diferenciada e melhor que nossa declaração de maior qualidade promete, devemos dizer não ao que não estiver de acordo com nossa visão. Com base nisso, aqui estão as principais situações para as quais esse aplicativo será excelente:

  • Encontrar restaurantes nos quais queira ir
  • Encontrar restaurantes nos quais meus amigos queiram ir
  • Fazer planos para o jantar hoje à noite com amigos

Queremos começar pensando sobre situações que descrevem o motivo pelo qual as pessoas usam o aplicativo, antes de começarmos a pensar sobre recursos, que são como eles alcançarão essas metas. Cada uma de nossas situações envolverá vários recursos. Quando soubermos quais são as principais situações, poderemos pensar sobre os recursos que as possibilitarão. Entraremos em mais detalhes na criação e seleção de recursos na próxima postagem, mas aqui estão alguns exemplos de possíveis recursos:

  • Encontrar restaurantes nos quais queira ir:
    • Procurar restaurantes em um mapa ou em uma lista
    • Pesquisar por nome ou palavra-chave
    • Filtrar/classificar por categoria, preços e classificação
    • Adicionar/remover restaurantes para/da lista de desejos

3. Criando a experiência inicial

A página inicial é a chave para qualquer aplicativo estilo Metro. É sua chance de dizer ao seu usuário qual é maior qualidade de seu aplicativo. Quando os usuários abrirem seu aplicativo eles desejarão compreender imediatamente quais são as principais situações de seu aplicativo e como elas fornecem valores exclusivos. Uma boa página inicial motiva os usuários a abrir o aplicativo ao sempre fornecer conteúdo novo e atualizado, e os convence a ficar e gastar mais tempo no aplicativo. É como um hub, o centro de interesse e mostra o melhor do aplicativo.

Desenvolver um excelente hub diz respeito a criar um layout que otimiza oferecer conteúdo e funcionalidade para pessoas de uma forma fácil de explorar. A navegação característica em aplicativos ou na Web envolve mostrar uma seção padrão de um aplicativo, e então contar que o usuário escolha acessar uma nova seção de uma barra de navegação ou sumário. O problema com esse padrão é que ele não incentiva a exploração. Para que as pessoas decidam clicar em uma guia e ir para uma nova seção, elas precisam acreditar que há algo que seja interessante ou útil para elas. Se não houver seções interessantes, eles mudarão para outro aplicativo. Por exemplo, este aplicativo leitor de notícias usa um design baseado em guias, no qual as pessoas iniciam em uma seção individual, mas então precisam conscientemente criar uma decisão para acessar outras seções do aplicativo apenas com base no nome. Você não pode dizer se qualquer uma dessas outras 4 seções são interessantes até mudar para ela:

Criação de página inicial baseada em guias

Em vez disso, converta isso em um hub e simplesmente adicione movimento panorâmico, que não requer decisão difícil dos usuários e eles verão por que o conteúdo ou funcionalidade do aplicativo é interessante para eles.

Criação de página inicial baseada em hub

Ao criar um layout de aplicativo que seja fácil de explorar, mostramos aos usuários por que eles devem continuar no aplicativo. Mostramos a eles a ampla variedade do que nosso aplicativo tem de melhor.

Portanto, com isso em mente, vamos iniciar com um layout de hub básico usando o modelo de projeto de Grade do Visual Studio (XAML, HTML). Sua página inicial (a groupedItemsPage) tem várias seções e itens selecionados de cada uma:

Página inicial do modelo de projeto de Grade do Visual Studio

Queremos que esta página realmente represente a declaração de maior qualidade: Meu aplicativo é o melhor em sua categoria ao ajudar usuários e seus amigos a localizarem um restaurante para jantarem. A primeira etapa é fazer com que cada seção de nosso hub represente uma de nossas três principais situações.Cadasituação principal deverá ser representada (embora possa haver várias seções vinculadas a uma situação):

1. Hoje à noite

Foco em fazer planos para o jantar hoje à noite com amigos

2. Lista de desejos dos amigos

Foco em encontrar restaurantes nos quais meus amigos queiram ir

3. Minha lista de desejos

Foco em encontrar restaurantes nos quais eu queira ir

4. Todos os restaurantes

Foco também em encontrar restaurantes nos quais eu queira ir

Hub com seções para hoje à noite, lista de desejos dos amigos, minha lista de desejos, todos os restaurantes


A ordem das seções é estratégica. O motivo hoje à noite é o primeiro porque é a seção mais relevante do que irá acontecer agora e, portanto, é provável que mude sempre que você abrir o aplicativo. As informações sobre hoje à noite também são um excelente candidato para o conteúdo do bloco dinâmico, pois é atual, pessoal e relevante. Esse alinhamento significa que se as pessoas veem o que está acontecendo hoje à noite no bloco dinâmico do aplicativo na tela inicial, elas podem abrir o aplicativo e ver o conteúdo que acabaram de ver no bloco dinâmico direto na página do hub. Seu aplicativo deve recompensar os usuários por abrir o aplicativo com informações que sejam novas e mais importantes para eles. Para saber mais sobre blocos dinâmicos, consulte a postagem de Kevin Michael Woley, Criando uma fantástica experiência com o bloco.

Em seguida, inserimos as listas de desejos de Amigos e então Minha lista de desejos – isso está nessa ordem por dois motivos:

  • O foco do Food with friends está em meus amigos – esse é o diferenciador e o que o Food with friends faz ninguém mais faz da mesma forma.
  • Como na seção Hoje à noite, outras pessoas atualizarão suas listas de desejo enquanto um usuário estiver ausente do aplicativo e, portanto, ela pode mudar com frequência. Ela contém informações que o usuário não conhece, enquanto eles estão mais familiarizados com suas próprias listas de desejo e portanto é menos crítica para exploração.

Colocamos a seção Todos os restaurantes no fim. Esperamos que os usuários acessem essa seção somente quando quiserem gerenciar sua lista de desejos, mas de acordo com nossa declaração de maior qualidade na maior parte do tempo os usuários estarão tomando decisões sobre onde irão hoje à noite, o que significa que na maior parte do tempo eles estarão vendo as listas de desejos já existentes e as sugestões para hoje à noite. Colocar essa seção no final também fornece um ótimo benefício, pois a seção pode se expandir o quanto você quiser, sem acessar outro conteúdo. Você pode estar preocupado com o fato de a seção Todos os restaurantes estar muito afastada, mas não fique. O Zoom Semântico serve exatamente para passar rapidamente por uma lista.

4. Desenvolvimento das seções

Para criar uma seção, é vital otimizá-la para sua situação correspondente. Ela não precisa ser uma grade uniforme de blocos em todo o hub! É aí que podemos ser criativos, demonstrar como nosso aplicativo é diferente de outros e mostrar a maior qualidade dele. Além disso, não precisamos mostrar todos os itens em determinada seção na página inicial, pois pode ser muita informação. Em vez disso, talvez seja melhor somente somente se perder em um conjunto preciso de itens que sejam mais relevantes e atualizados. Por exemplo, mostramos somente os principais amigos na lista de desejos dos Amigos, bem como os restaurantes adicionados mais recentemente em Minha lista de desejos.

Para este aplicativo, a primeira seção, Hoje à noite, diz respeito a decidir com seus amigos onde irão jantar hoje à noite. Como isso requer a colaboração entre seus amigos e você, isso funciona melhor como um debate:

Página inicial com a seção Hoje à noite preenchida com conversas sobre planos de jantar com amigos

A lista de desejos de Meus amigos diz respeito a meus amigos e o que eles querem; portanto, nessa seção, as pessoas são o foco!

Página inicial com a seção de lista de desejos de Amigos preenchida com a lista de restaurante de vários amigos

Para minha lista de desejos, trata-se dos restaurantes nos quais estou mais interessado em ir, então apresentamos o restaurante:

Página inicial com a seção Minha lista de desejos preenchida com a minha lista de restaurantes

E, por fim, Todos os restaurantes diz respeito a navegar na enorme coleção de restaurantes que está disponível; portanto, vamos apresentar alguns dos mais populares nos quais os usuários devem estar interessados e então apresentar categorias para fácil navegação. Com todas essas partes inseridas, agora você pode ver qual a aparência da página inicial do hub do aplicativo:

Página inicial com a seção Todos os restaurantes preenchida com a lista de restaurantes

Uma parte crucial para fornecer uma experiência diferenciada é expressar a marca de seu produto. Esse é um tópico que merece sua própria postagem, portanto fique atento a dicas mais avançadas de layout e design visual, bem como técnicas que ajudarão a personalidade de sua marca a ter destaque, mantendo ainda assim uma aparência consistente com a plataforma para a qual foi criada. Por enquanto, vejamos um exemplo simples:

Experiência inicial do Food with friends com cores da marca e imagem da tela de fundo

5. Criando o layout do restante do seu aplicativo

Agora que temos nossa página inicial, fica realmente fácil criar o layout do restante do aplicativo.

Sabemos que nem todas as seções no hub foram abrangentes; portanto, precisamos de páginas totalmente dedicadas a mostrar o conjunto completo de conteúdo para cada seção. A groupDetailPage no modelo de grade do Visual Studio foi desenvolvida para essa finalidade. Desenvolvemos o layout da ListView nesta página para melhor atender ao tipo de conteúdo.

Lista de desejos de Meus amigos:

Página de lista de desejos de amigos com lista completa de amigos e seus restaurantes favoritos

Minha lista de desejos:

Página de Minha lista de desejos com minha lista completa de restaurantes favoritos

Todos os restaurantes:

Lista completa de todos os restaurantes agrupados por destaque e tipo de cozinha

Além disso sabemos que há duas entidades principais refletidas no hub: restaurantes e pessoas. Isso significa que precisamos de duas variantes da página de detalhes de item (itemDetailPage no modelo de projeto de grade) na qual os usuários podem ver informações sobre um item quando eles tocarem/clicarem nele:

A página de uma amiga com suas informações de perfil, sua lista de desejos e suas avaliações

A página de um restaurante com seu horário, local, informações de contato, fotos e avaliações de outros usuários

Ao criar cada página, é essencial continuar pensando sobre o que cada página está tentando oferecer de melhor e como ela contribui para ajudar seu aplicativo a cumprir sua declaração de "maior qualidade".

6. Navegando na interface do usuário

Agora que temos as várias páginas, tudo o que precisamos fazer é fornecer ao usuário uma forma de navegar nelas. A navegação na interface do usuário é muito improvável que seja acoisa para qual qualquer aplicativo é desenvolvido para ser o melhor nisso. Podemos aplicar padrões de navegação existentes que os usuários já conhecem, a fim de que possam acessar rapidamente o conteúdo e a funcionalidade de nosso aplicativo. Neste exemplo, usamos o modelo de projeto de grade, que segue o padrão de sistema hierárquico. Por exemplo, tocar um bloco leva você para a página de detalhes do item. Tocar em um cabeçalho da seção no hub o leva para essa seção. Tocar novamente o leva para onde você acabou de vir (não para cima). Grande parte disso é desenvolvida no modelo de projeto de grade. Em uma postagem futura, continuaremos entrando e mais detalhes na implementação e dicas para criar uma navegação mais avançada no aplicativo.

Uma captura de tela mostrando a hiearquia do conteúdo do aplicativo

Resumo

Descobrir no que você é melhor em sua categoria é a primeira e mais importante etapa para criar um excelente aplicativo estilo Metro que se destaque da concorrência. Como vimos, identificar e se concentrar nos pontos de diferenciação influencia muitas decisões de base que irão compor sua estrutura de conteúdo, experiência inicial, layout de página e navegação. Em postagens futuras, continuaremos desenvolvendo isso e mostraremos como você pode usar a plataforma Windows 8 para tornar seu aplicativo o melhor de sua categoria. Para analisar alguns dos recursos mencionados nesta postagem, veja o conteúdo em http://design.windows.com.

-- Bonny Lau, gerente sênior de programas, Windows

  • Loading...
Leave a Comment
  • Please add 7 and 3 and type the answer here:
  • Post