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

O design de sites é uma prática comum há décadas. Com o Windows 8, os designers e desenvolvedores podem usar as tecnologias da Web com as quais estão acostumados, incluindo HTML5, CSS3 (Folhas de Estilos em Cascata, Nível 3) e JavaScript, para criar aplicativos da Windows Store. Neste artigo, abordamos como expor os recursos de um site para transformá-lo em um ótimo aplicativo da Windows Store e mostramos modos de fornecer mais valor, personalização e experiências mais ricas usando recursos da plataforma Windows 8.

Nossa meta é ajudar os designers e desenvolvedores a reimaginar seus sites como 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 a versão offline deste artigo.

Site e aplicativo de vans de comida

A base deste artigo é um site de vans de comida que permite que os usuários procurem vans em sua área, mantenham-se atualizados com as notícias mais recentes e forneçam análises das vans. No estudo de caso orientado a design a seguir, exploramos modos de reimaginar a funcionalidade central do site e ampliá-lo como um aplicativo da Windows Store.

Nossa meta ao realizar a migração para um aplicativo da Windows Store era destacar os melhores recursos do site e manter a paridade com sua funcionalidade central. Determinamos que a melhor função do aplicativo da Windows Store é permitir que os usuários naveguem e achem vans próximas. A próxima figura mostra a anatomia da interface do usuário do site de vans de comida. Neste artigo, mostramos como converter cada um desses componentes da interface do usuário para o estilo de design da Microsoft.

1. Layout e navegação
2. Comandos e ações
3. Contratos: pesquisa, compartilhamento e configurações
4. Toque
5. Dimensionamento e modos de exibição
6. Notificações

Layout e navegação

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

A maioria dos sites usa padrões de layout bem estabelecidos. O design da home page tem uma interface do usuário com suporte à navegação (cabeçalho e rodapé), componentes utilitários (logon, pesquisa) e acesso a outros conteúdos (blog e notícias). Esses elementos são comuns em sites, mas impedem que os usuários se concentrem na tarefa mais importante: achar uma van de comida próxima. Durante o design do aplicativo da Windows Store, removemos grande parte dos elementos de interface do usuário e do conteúdo, pois eles não estavam diretamente relacionados ao recurso principal do aplicativo.

Site:

• O site tem um padrão de layout comum com duas colunas: conteúdo principal à esquerda e outros conteúdos à direita.
• O ponto focal do site, vans de comida, ocupa somente um terço da tela.

Aplicativo da Windows Store:

Todo o espaço na página de aterrissagem é dedicado ao que esse aplicativo tem de melhor: encontrar uma van de comida próxima.

Exemplo: destacando conteúdo na home page do site e na tela de início do aplicativo da Windows Store.

Tanto o site quanto o aplicativo da Windows Store mostram categorias e vans de comida em destaque nas páginas principais. Por causa do espaço limitado do site, cada categoria de van de comida é representada por uma única imagem. Durante o desenvolvimento da tela inicial do aplicativo da Windows Store, optamos por trazer mais informações sobre vans de comida para o nível superior a fim de proporcionar mais contexto aos usuários e criar uma interface mais atraente.

Site: Cada categoria de van de comida é representada por uma única imagem. Um usuário deve ir para outra página para ver mais vans na categoria e, em seguida, selecionar uma van para exibir os detalhes.	Aplicativo da Windows Store: Cada categoria é representada por um grupo de imagens, de modo que os usuários possam determinar rapidamente quais vans em uma categoria específica estão próximas. Os usuários podem acessar uma van diretamente a partir da tela inicial.

 

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.

Usar manipulação direta para navegar

No site, os elementos de navegação são repetidos na barra de navegação superior e no rodapé. Os elementos de navegação são permanentes e estão sempre em exibição. Desenvolvemos os elementos de navegação no aplicativo da Windows Store para que sejam integrados diretamente ao conteúdo e fiquem ocultos até que o usuário precise deles.

Exemplo: navegando até uma van específica no site e no aplicativo da Windows Store.

Site: A. Um usuário navegue até uma página separada de categorias no site para ver todas as categorias de vans. B. O usuário selecione uma categoria (por exemplo, "Barbecue food trucks", isto é, "Vans de churrasco") e a acessa. C. Por fim, o usuário pode selecionar uma van na categoria selecionada.

Aplicativo da Windows Store: A. A tela inicial inclui uma página de hub que consiste de grupos de conteúdo: vans em destaque, vans perto de mim e modo de exibição de categorias. B. Os usuários podem usar toques para realizar movimentos panorâmicos para qualquer direção a fim de ver categorias diferentes de vans de comida bem na tela inicial. C. Como cada hub destaca várias vans na categoria, os usuários podem tocar em uma van para ir diretamente à página dela ou tocar no texto do cabeçalho do grupo da categoria (por exemplo, "Asian') para acessar a página de uma categoria.

 

Comandos e ações

Manter comandos e ações do aplicativo na barra de aplicativos

Os sites frequentemente usam comandos ad-hoc que aparecem como ações do usuário alinhadas ao conteúdo. Em nosso site, por exemplo, todas as páginas de vans de comida têm um link para que os usuários façam upload de imagens de uma van específica. Essas ações contextuais são repetidas na página de cada van.

Seguindo a abordagem característica do design de aplicativos da Windows Store (de dar prioridade ao conteúdo, não aos elementos visuais), colocamos todas as ações contextuais na barra de aplicativos, um controle comum no sistema. Além disso, os comandos usados com frequência estão próximos das bordas para que o acesso a eles fique mais fácil. Quando seguimos esses princípios de design, 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 ou de cima da tela para ver ações relevantes na barra de aplicativos. Todos os aplicativos da Windows Store podem usar a barra de aplicativos para seus comandos. Como os usuários ficarã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 é mais coeso.

Exemplo: carregando uma foto de van de comida no site e no aplicativo da Windows Store.

Site: Comandos ad-hoc. As ações do usuário estão alinhadas ao conteúdo.	Aplicativo da Windows Store: 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 ou de cima da tela para acessar ações contextuais. As ações mudam dependendo da parte do aplicativo acessada pelo usuário ou do conteúdo selecionado.

 

Contratos

O site de van de comida segue convenções comuns de sites relacionadas a ações como pesquisa e logon. Essas ações são afixadas permanentemente ao canto superior direito do site. Ao projetar o aplicativo da Windows Store, não incluímos nossas interfaces de usuário para essas ações globais. Em vez disso, usamos recursos internos do sistema, inclusive os contratos de Pesquisa, Compartilhamento e Configurações. Como os componentes da interface do usuário não estão sempre na tela, a tela do aplicativo é mais limpa e tem mais espaço para conteúdo.

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

Como a maioria dos sites, o site de vans de comida tem uma caixa de pesquisa em todas as páginas, voltada apenas ao site. Isso significa que o usuário tem que acessar o site de vans de comida antes de pesquisar.

Ao projetar a experiência de pesquisa no aplicativo da Windows Store, empregamos o contrato de Pesquisa. Dessa forma, as pessoas podem procurar uma boa van sem precisar abrir o aplicativo primeiro. O botão Pesquisar fornece acesso à função de pesquisa, e um usuário pode invocá-lo de qualquer lugar do sistema.

Exemplo: buscando uma van de comida usando o site e o aplicativo da Windows Store.

Site:

• A caixa de pesquisa está sempre visível no site.
• Quando os resultados de pesquisa são exibidos, todos os elementos visuais do site continuam presentes.
• Os usuários sempre precisam acessar o site antes de realizar uma pesquisa de van de comida.

Aplicativo da Windows Store:

• Os usuários podem realizar uma pesquisa em qualquer parte do aplicativo passando o dedo na borda para exibir os botões e selecionando a pesquisa. Você também pode fornecer uma caixa de pesquisa dentro do aplicativo que aparece na barra de aplicativos ou na tela do aplicativo.
• O aplicativo de vans de comida é 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 de pesquisa. Desse modo, os usuários podem ver rapidamente quais termos geram resultados. Depois que o usuário envia a consulta (por exemplo, "van de churrasco"), o aplicativo mostra um modo de exibição de resultados de pesquisa.
• Esse modo de exibição é limpo e dedicado somente aos resultados de pesquisa, sem elementos visuais desnecessários. Se você adicionar uma caixa de pesquisa, poderá controlar toda a experiência do usuário para pesquisa.

Exemplo: procurando uma van de comida fora do aplicativo (disponível apenas no aplicativo da Windows Store).

Além da pesquisa no aplicativo, os usuários podem realizar pesquisas fora do aplicativo selecionando o aplicativo de vans de comida como destino de pesquisa. Neste exemplo, um usuário está pesquisando "van de churrasco" na tela inicial. O usuário toca no aplicativo de vans de comida, na lista de aplicativos do painel de pesquisa, que inicia o aplicativo e conclui a consulta da pesquisa. Como o site de vans de comida está otimizado para localizar vans próximas, o usuário pode concluir a pesquisa com um toque e encontrar vans de churrasco em sua área.

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

No site da vans de comida, os usuários podem compartilhar informações sobre uma van de comida específica por e-mail, Facebook ou Twitter. As opções de compartilhamento são disponibilizadas frequentemente em muitos locais em um site, próximas ao conteúdo que pode ser compartilhado.

Os cenários de compartilhamento ganham destaque em nosso aplicativo da Windows Store graças ao contrato de Compartilhamento. O uso do botão de compartilhamento interno do sistema elimina a necessidade de exibir botões de compartilhamento em todo o aplicativo. Os usuários podem sempre encontrar opções de compartilhamento em um local consistente, independente do aplicativo usado. A mudança simplifica o design e o desenvolvimento, pois não há necessidade de conectar-se com todos os serviços que um usuário deseje usar. Após a integração de nosso aplicativo com Compartilhar, ele estará conectado a todos os aplicativos Windows que têm o contrato de compartilhamento implementado. Não há necessidade de lidar com mudanças de API para serviços Web externos.

Exemplo: compartilhando uma foto de trailer de lanches.

Site: Cada serviço de compartilhamento tem seu próprio botão. Os serviços de compartilhamento estão espalhados pelo site.	Aplicativo da Windows Store: Um local consistente em todos os aplicativos da Windows Store para todas as opções de compartilhamento. Os usuários podem chamar Compartilhar em qualquer local do aplicativo. Quando um usuário seleciona um serviço de compartilhamento, o aplicativo de destino pode personalizar a identidade visual e o painel da interface do usuário.

 

Exemplo: uma olhada de perto no painel Compartilhar.

Aplicativo da Windows Store:

• Qualquer aplicativo implementado como um destino de compartilhamento aparece na lista de aplicativos do painel Compartilhar. Por exemplo, Socialite, Tweet@Rama ou Mail.
• Os usuários podem compartilhar vários tipos de conteúdos compatíveis com um aplicativo. Por exemplo, eles podem compartilhar links, fotos ou salvar as informações em um aplicativo de anotações, se quiserem.
• Os destinos de compartilhamento frequentes são exibidos na parte superior para ajudar os usuários a concluírem o fluxo de trabalhos de compartilhamento rapidamente.

Usar o painel Configurações

O site de vans de comida tem um conjunto de funções utilitárias, como informações sobre o site, logon, informações de contato e informativos. Essas funções ocupam áreas específicas da tela de acordo com padrões de webdesign comuns, de modo que os usuários possam localizá-las facilmente. Mas elas estão espalhadas por áreas diferentes do site. As tarefas de configuração e gerenciamento não são os pontos focais do aplicativo da Windows Store. Usando o contrato de Configurações com seu ponto de entrada consistente, os usuários não precisam memorizar onde essas funções de gerenciamento de aplicativos estão e podem chamá-las com confiança quando necessário.

Exemplo: definindo opções no site e no aplicativo da Windows Store.

Site:

• As funções utilitárias, como logon, informações sobre o site, contato e informativos ocupam áreas diferentes do site.

Aplicativo da Windows Store:

A. As opções de configuração estão todas em um local do painel Configurações.

B. Os usuários podem fazer logon no aplicativo sem sair do contexto atual.

C. A configuração de notificação permite que os usuários especifiquem que tipos de notificações desejam receber. Isso substitui o informativo do site e fornece aos usuários as últimas informações do aplicativo.

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

O site de vans de comidas incentiva os usuários a carregar fotos de vans em sua área. Essa funcionalidade pode ser facilmente replicada em um aplicativo da Windows Store usando um seletor de arquivos. 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, conectado a dispositivos de armazenamento ou outros computadores conectados por meio de um Grupo Doméstico. Os usuários também podem acessar itens de aplicativos e participar do contrato de seletor de arquivos.

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

Aplicativo da Windows Store:

• Quando o usuário toca no botão Upload 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.
• 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.
• Quando o usuário seleciona várias fotos da pasta, é exibida uma lista de miniaturas na parte inferior esquerda mostrando as fotos selecionadas.

Toque

Usar movimento panorâmico horizontal para layout horizontal

Tanto o site quanto o aplicativo da Windows Store de vans de comida foram projetados tendo em mente o método de interação do usuário e a ergonomia. O site foi desenvolvido principalmente para interação com o mouse, de modo que o layout de todas as páginas esteja disposto na vertical e os usuários possam usar o mouse para rolar com rapidez e facilidade pelo conteúdo desejado. O aplicativo da Windows Store foi desenvolvido para dar prioridade ao toque e usa orientação paisagem, como a maioria dos desktops e laptops. O layout horizontal otimiza o uso do espaço da tela. Também é mais confortável e natural para os usuários fazer um movimento panorâmico horizontalmente com toque em um dispositivo no modo paisagem do que rolar verticalmente.

Exemplo: navegando pelo conteúdo no site e na tela inicial do aplicativo da Windows Store.

Deslizamento transversal para selecionar objetos

Uma convenção comum em sites é usar caixas de seleção ao lado de vários objetos para indicar diversas seleções. Com o Windows 8, um usuário pode passar o dedo rapidamente em um objeto, 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 pode ser revelada automaticamente para mostrar comandos relevantes ao item.

Exemplo: selecionando vários trailers de lanches na tela de início para fixar na tela Inicial.

Na página de aterrissagem do aplicativo, quando os usuários passam o dedo para escolher uma van, uma barra de aplicativos é revelada com um comando Adicionar aos favoritos, que pode marcar as vans selecionadas como favoritas. Esse gesto é reversível, o que torna a seleção muito mais eficiente em aplicativos da Windows Store, dando aos usuários confiança para explorar o aplicativo.

Apertar ou estender para zoom semântico

Os gestos de apertar e estender permitem que os usuários percorram rapidamente uma longa lista de conteúdos. A página de aterrissagem do aplicativo da Windows Store mostra vários grupos, inclusive Featured (Em destaque), Near me (Perto de mim), Asian (Asiáticas), Barbeque (Churrasco) e Breakfast (Café da manhã). Os usuários podem fazer um movimento panorâmico para visualizar mais conteúdo ou, usando o zoom semântico, podem rapidamente pular para uma seção específica. Usando o controle de zoom semântico, afaste o zoom para mostrar todas as seções no modo de exibição atual instantaneamente. Em seguida, os usuários podem tocar rapidamente para ir ao início, ao fim ou a uma seção específica da lista. O modo de exibição com zoom afastado pode ser desenvolvido ainda mais para mostrar conteúdos interessantes em cada seção ou metainformações sobre uma seção (como número de vans em cada categoria). Ele pode ser usado para navegação em vez de elementos de navegação persistentes na tela do aplicativo.

Exemplo: saltando para uma categoria de trailer específica usando o zoom semântico.

Site: O usuário deve navegar até uma página separada para ver todas as categorias.	Aplicativo da Windows Store: O usuário pode usar o zoom semântico na tela inicial para ver todas as categorias com facilidade sem sair da tela. No modo de exibição de zoom semântico, cada categoria é representada por uma única imagem. Todas as categorias ficam disponíveis na tela inicial sem a necessidade de fazer um movimento panorâmico para ver uma lista completa.

 

Dimensionamento e redimensionamento

Projetar um layout que se adapte a diferentes orientações e tamanhos de tela

Desenvolvemos o layout do site de vans de comida para que seja flexível o suficiente a fim de se adequar a diferentes dispositivos, tamanhos de tela, resoluções e orientações. De modo semelhante ao design de um site fluido, os PCs com Windows 8 PCs variam de tablets pequenos, com suporte apenas para toque, até grandes laptops e desktops. Projetar o aplicativo para que seja adequado à grande variedade de dispositivos com suporte para aplicativos da Windows Store é crucial para que o aplicativo atinja mais clientes.

Você pode aplicar muitos princípios de design de sites ao desenvolvimento de aplicativos da Windows Store. Os modelos e controles internos facilitam a mudança da exibição paisagem para retrato e vice-versa. Quando a orientação muda para retrato, mais vans são mostradas em cada categoria. De modo semelhante, o aplicativo também mostra mais vans em cada categoria para tirar vantagem do espaço adicional na tela de monitores de alta resolução.

Exemplo: site de vans de comida e o aplicativo da Windows Store em dispositivos diferentes.

Site:

• O site de vans de comida ajusta o layout e se adapta a diferentes tamanhos de tela e fatores forma.

Aplicativo da Windows Store:

• O aplicativo da Windows Store em modo retrato, modo paisagem e em uma tela de alta resolução. Usamos o espaço extra para mostrar mais conteúdo.

Usar uma largura estreita 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. Os usuários não devem perdem 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 de um aplicativo da Windows Store nos tamanhos largo e estreito.

• Esquerda: o aplicativo de vans de comida em tamanho largo, ocupando a maior parte da tela. O usuário pode usar um aplicativo de previsão do tempo e o aplicativo de trailers de lanches lado a lado.
• Direita: em uma largura estreita, um usuário faz um movimento panorâmico verticalmente para acessar mais conteúdo, pois é mais confortável fazer esse movimento 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

Os usuários do site de vans de comida podem acessá-lo para conferir notícias e blogs sobre novas vans em sua área vans cujos locais mudaram. O site também permite que os usuários sigam anúncios das vans no Facebook e Twitter. Mas para isso, os usuários devem acessar o site para ver as novidades ou se inscrever para receber atualizações. É possível que os usuários não vejam algumas atualizações até que já tenham perdido importância.

Ao converter esse recurso em um aplicativo da Windows Store, usamos blocos e notificações do sistema para fornecer aos usuários informações mais atualizadas, personalizadas de acordo com suas necessidades. Os blocos mostrados na tela inicial são a porta de entrada para o aplicativo da Windows Store. Foram projetados para realizar atividades de forma dinâmica e fornecer conteúdo atualizado e personalizado, feito sob medida para o usuário, de modo que ele use mais o aplicativo e obtenha vantagens com ele. O aplicativo continua a mostrar esse conteúdo mesmo quando não está em execução.

Site:

• A seção de últimas notícias do site mostra o local mais recente de uma van.
• O blog no site lista novas vans e fornece dicas sobre quando elas estarão em uma região específica.

Aplicativo da Windows Store:

• O bloco principal do aplicativo de vans de comida mostra quais vans estão próximas de um usuário e quanto tempo elas ficaram no local indicado. Os blocos podem ser atualizados mesmo quando o aplicativo de vans de comida não está em execução, de modo que os usuários possam receber atualizações pela tela inicial.
• Um usuário pode marcar as vans favoritas (como uma de cheeseburgers) como um bloco na tela inicial para receber as notícias mais recentes sobre elas. Isso proporciona aos usuários um alto nível de personalização, sob medida às necessidades deles. Há muitos modelos e tamanhos de blocos disponíveis que os designers de aplicativos podem escolher para facilitar a implementação.

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

Além das notificações de bloco, as notificações do sistema também podem ser usadas 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.

Exemplo: o trailer de comida favorito do usuário mudou de local.

O usuário aceitou receber notificações do sistema por meio do painel Configurações para saber quando uma van de comida favorita mudou de local.

Conclusão

Ao criar um aplicativo da Windows Store baseado em um site existente, sempre pergunte o que o aplicativo faz de melhor. Quando tiver a resposta, otimize seu aplicativo da Windows Store para esse cenário. Lembre-se sempre de dar ênfase ao conteúdo, não aos elementos visuais: use comandos internos no sistema, como Compartilhar, Pesquisar e Configurações, para fornecer acesso a funções comuns em um mecanismo familiar e intuitivo. Oculte os comandos quando não forem necessários usando a barra de aplicativos e controles de zoom semântico. E aproveite os blocos e as notificações, de modo que os usuários continuem a obter vantagens com o aplicativo, mesmo que ele não esteja em execução. Se você fizer isso, terá um aplicativo da Windows Store atraente, que os usuários vão adorar e que poderá ajudá-lo a ampliar seus negócios.

Sobre os autores

Nicholas Huttema é designer visual e de interações da Plain Concepts. Ele gosta de trabalhar com ideias novas e interfaces de usuário limpas. A formação e a carreira de Nick tiveram início em Michigan, como designer de impressão. Desde então, ele adquiriu conhecimento em design de experiência do usuário trabalhando em várias empresas de Los Angeles e Seattle. Ele fez trabalhos de design para a Microsoft, Myspace, Amazon.com e Herman Miller, entre outras. Fora do ambiente de trabalho, ele gosta de dedicar seu tempo ao ar livre, com caminhadas, acampamentos e praticando snowboard.

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 o estilo 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.