Checklist de Qualidade – Aplicativos Metro Style
CENÁRIO ............................................................................................................................................................................ 3
Possui missão e escopo claros; a implementação está adiantada representando o escopo final. .............................. 3
EXPERIÊNCIA de USUÁRIO - Aperfeiçoamento ................................................................................................................. 3
Segue os princípios Metro style .................................................................................................................................... 3
Transmite a marca e o propósito .................................................................................................................................. 3
Segue um layout e alinhamento consistentes .............................................................................................................. 3
Aproveita a tipografia e espaço em branco, e segue uma hierarquia de fontes .......................................................... 4
Abrace a personalidade do Windows 8 ........................................................................................................................ 4
Projetado para uma excelente primeira impressão ..................................................................................................... 4
As animações têm um propósito, criam continuidade, e transmitem confiança ao usuário ....................................... 5
Projetado para toque .................................................................................................................................................... 5
EXPERIÊNCIA de USUÁRIO - Controles, Navigação, Animação ......................................................................................... 6
O conteúdo é o mecanismo de navegação principal .................................................................................................... 6
Faz uso apropriado do app bar ..................................................................................................................................... 6
Faz uso apropriado de superficies de comando e respeita as bordas .......................................................................... 6
Mostra tratamento de erro não obtrusivo, com significado e que o usuário pode agir .............................................. 6
Aproveita o zoom semântico de maneira apropriada .................................................................................................. 6
EXPERIÊNCIA de USUÁRIO - Telas & Formatos de Dispositivos ........................................................................................ 7
Suporta as orientações de tela paisagem e retrato ...................................................................................................... 7
Se a adapta em diferentes formatos de dispositivos e respeita as proporções ........................................................... 7
Trata os estados de tela snap, fill, e tela cheia ............................................................................................................. 7
Arrasta e rola a tela em apenas uma direção para criar um senso de estabilidade ..................................................... 7
É functional e parece natural num sistema que possui apenas mouse ou teclado ...................................................... 8
É functional e parece natural num sistema que usa o teclado na tela ......................................................................... 8
EXPERIÊNCIA de USUÁRIO - Configurações ...................................................................................................................... 8
Implementa o contrato de Settings e não possui configurações e preferências em outros lugares do aplicativo ...... 8
Faz roaming das configurações e estado do usuário .................................................................................................... 8
Possui uma boa experiência de sign-in/sign-out .......................................................................................................... 9
EXPERIÊNCIA de USUÁRIO - Contratos ............................................................................................................................. 9
Implementa o contrato de Search / Busca ................................................................................................................... 9
Implementa o contrato de Share Target / Destino de Compartilhamento .................................................................. 9
Implementa o contrato de Share Source / Fonte do Compartilhamento.................................................................... 9
Possui belas interfaces de usuário para os contratos ................................................................................................. 10
Aproveita os file pickers / seletores de arquivos ........................................................................................................ 10
1
EXPERIÊNCIA de USUÁRIO – Gerenciamento do ciclo de vida........................................................................................ 10
Trata os estados de vida do aplicativo de maneira apropriada .................................................................................. 10
Faz uso apropriado de tarefas de background ........................................................................................................... 10
EXPERIÊNCIA de USUÁRIO - Rede ................................................................................................................................... 11
Se comporta bem quando está offline ou quando a conectividade de rede é intermitente ..................................... 11
EXPERIÊNCIA de USUÁRIO - Tiles e Notificações ............................................................................................................ 11
Tem um belo Tile / Mosaico com a sua marca ........................................................................................................... 11
Tem um live tile ou tiles secundários .......................................................................................................................... 11
Usa notificações toast para informações relevantes e onde o horário é importante ................................................ 11
Trata adequadamente as ativações via contratos, tiles secundários e notificações .................................................. 12
WINDOWS STORE ........................................................................................................................................................... 12
Esperado passar nos requisitos de certificação da Windows Store ........................................................................... 12
Passa nos testes do Windows App Certification Kit (WACK) ...................................................................................... 12
DESEMPENHO ................................................................................................................................................................. 12
A interface de usuário é sempre responsiva e provê feedback visual nas interações ............................................... 12
DESEMPENHO - Animação .............................................................................................................................................. 13
Mantém 60 frames por segundo ................................................................................................................................ 13
DESEMPENHO – Ciclo de vida ......................................................................................................................................... 13
Otimiza os tratadores dos eventos de suspend e resume .......................................................................................... 13
Suspende e retoma nos tempos previstos.................................................................................................................. 13
DESEMPENHO - Cache & Dados Locais ........................................................................................................................... 14
Depende de conteúdo empacotado, local o máximo possível ................................................................................... 14
DESEMPENHO - Inicialização........................................................................................................................................... 14
A primeira página carrega em menos de 5 segundos ................................................................................................. 14
Aproveita o caching de bytecodes de Javascript ........................................................................................................ 14
DESEMPENHO - Memória ............................................................................................................................................... 14
Gerencia o uso de memória para os limites recomendados ...................................................................................... 14
DESEMPENHO - Rede ...................................................................................................................................................... 15
Gerencia os recursos de rede de maneira apropriada ............................................................................................... 15
DESEMPENHO – Tarefas de background ........................................................................................................................ 15
Respeita os tempos reservados para as tarefas em background ............................................................................... 15
OUTROS ........................................................................................................................................................................... 15
É acessível ................................................................................................................................................................... 15
É localizado.................................................................................................................................................................. 16
2
CENÁRIO
Possui missão e escopo claros; a implementação está adiantada representando o
escopo final.
Um excelente aplicativo é planejado desde o começo. É dado foco nas tarefas e funcionalidades requeridas para
cumprir a missão do aplicativo. Visto que isto é uma revisão do aplicativo, queremos garantir que você tem um plano
para seu aplicativo e que você sabe em que ele vai se destacar.
O aplicativo que você está revisando precisa representar a visão final dele. Você não precisa estar com 100% dele
pronto, mas ele deve ter funcionalidades suficientes para demonstrar a visão e funcionalidades que farão dele um
aplicativo que se destaca dos outros na categoria em que ele se encontra.
Para esse requisito, você não precisa trazer um “pitch” ou um argumento de venda; traga um excelente aplicativo
que tenha sido propriamente planejado.
Links
Planejando seu aplicativo: http://msdn.microsoft.com/pt-BR/library/windows/apps/hh465427
EXPERIÊNCIA de USUÁRIO - Aperfeiçoamento
Segue os princípios Metro style
O design Metro style tem um conjunto de cinco princípios para ajudá-lo a fazer as melhores escolhas quando estiver
projetando seu aplicativo. Estes princípios são a fundação para criar excelentes aplicativos Metro style. Sempre
garanta que suas escolhas de design e desenvolvimento sejam guiadas por esses princípios.
Links
Princípios de design estilo Metro: http://msdn.microsoft.com/pt-BR/library/windows/apps/hh781237
Transmite a marca e o propósito
O design Metro style dá ênfase no conteúdo sobre a moldura/borda, dá ênfase num layout clean/limpo e fazendo
mais com menos. Seguir esses principios te dará consistência com outros aplicativos, mas sem perder de vista a sua
marca; faça o design do seu aplicativo Metro style para promover sua marca e atingir um propósito.
Pense sobre a mensagem que você quer passar para seus usuários quando eles forem ver seu aplicativo Metro style
na loja, quando eles verem seu aplicativo na Tela Inicial/Start Screen, quando eles executarem ele pela primeira vez,
e quando eles tiverem usando seu aplicativo. Aproveite estas oportunidades do design visual do seu aplicativo para
definir e promover sua marca.
A seção de marcas no guia de planejamento de aplicativos Metro style contém uma série de dicas importantes para
fazer sua marca brilhar para seus usuários.
Links
Planejamento de marcas: http://msdn.microsoft.com/pt-BR/library/windows/apps/hh465418
Planejando seu aplicativo: http://msdn.microsoft.com/pt-BR/library/windows/apps/hh465427
Segue um layout e alinhamento consistentes
Vários dos princípios de design Metro – como conteúdo sobre moldura/bordas, orgulho dos detalhes, e usar
tipografia para a hierarquia de conteúdo – levam a ter um excelente alinhamento no seu aplicativo. Garanta que
você se preocupe com alinhamento e siga as recomendações de margens do Windows 8.
3
Os ativos de design para aplicativos Metro Style são uma boa referência para você basear seu layout. Aproveitar os
modelos/templates do Visual Studio para aplicativos Metro style também é um jeito fácil de começar com um bom
layout.
Links
Ativos de design: http://msdn.microsoft.com/pt-BR/library/windows/apps/hh700403
Criando layouts flexíveis: http://msdn.microsoft.com/pt-BR/library/windows/apps/hh465386
Aproveita a tipografia e espaço em branco, e segue uma hierarquia de fontes
O uso correto de tamanhos de fontes, pesos/negrito, cores, guias e espaços podem ajudar a daar um visual
limpo/clean para seu aplicativo Metro style, deixando ele bem mais fácil de usar.
Para criar uma experiência consistente com outros aplicativos, verifique os guias/guidelines para texto e tipografia
para aplicativos Metro style. Se você usar suas próprias fonts (por causa de marca, por exemplo), ainda siga a
hierarquia de tamanhos de fonte e outros guidelines.
Links
Guidelines e checklists para textos e tipografias: http://msdn.microsoft.com/pt-BR/library/windows/apps/hh700394
Abrace a personalidade do Windows 8
O design Metro style do Windows 8 é único. Se você tem um aplicativo escrito para outra plataforma, ele deve ter
características de design que podem não ser consistentes com a personalidade do Windows 8.
A personalidade do Windows 8 tem layouts específicos, hierarquia de fontes, animações, interações, comandos,
controles comuns e etc.
Os dois maiores erros quando se reutiliza layouts e design de outras plataformas são:
1. Reutilizar ícones ou imagens que tem gradientes, 3D, bordas, cantos arredondados e etc.
2. Prover animações que não são autenticamente digitais (como uma animação de virada de página).
Pense sobre todos esses pontos enquanto você faz o design do seu aplicativo para o Windows 8. Familiarize-se com
a biblioteca de animações do Windows e aproveite ela para prover animações de transição que sejam familiares para
seus usuários e que sejam intuitivas para descobrir.
Reference (HTML)
Biblioteca de animação: http://msdn.microsoft.com/pt-BR/library/windows/apps/br229780
Diretrizes de Experiência de Usuário: http://msdn.microsoft.com/pt-BR/library/windows/apps/hh465424
Projetado para uma excelente primeira impressão
Os usuários vão interagir com seu aplicativo pela primeira vez clicando no Tile/Mosaico dele; eles virão a splash
screen/tela de abertura, e as cores de fundo e de face do seu aplicativo.
Para atingir este requisito:


Revise e siga os guidelines para Tiles/mosaicos, Badges/selos e para Tiles/mosaicos secundários;
Garanta que as cores de fundo e face que você escolheu no manifesto do aplicativo são complementares e
ficam bem mesmo em um monitor de alto contraste e baixo brilho.
Links
Guidelines e checklist para Tiles/mosaicos: http://msdn.microsoft.com/pt-BR/library/windows/apps/hh465403
4
Guidelines e checklist para Badges/selos: http://msdn.microsoft.com/pt-BR /library/windows/apps/hh761459
Guidelines e checklist para Tiles/mosaicos secundários: http://msdn.microsoft.com/pt-BR
/library/windows/apps/hh465398
Guidelines e checklist para splash screen/tela de abertura: http://msdn.microsoft.com/ptBR/library/windows/apps/hh465338
As animações têm um propósito, criam continuidade, e transmitem confiança ao
usuário
Animações bem projetadas e com propósito trazem vida ao aplicativo e dão a sensação de uma experiência polida e
aperfeiçoada. Elas ajudam o usuário entender as mudanças de contexto, e ligam as experiências com as transições
visuais. Se você quer ter um aplicativo rápido e flexível, olhe nos guidelines de arrastar e soltar/drag and drop,
animações de borda, e animações de interface de usuário.
Não se esqueça de seguir os princípios do design Metro. Se você quer ter um aplicativo que seja autenticamente
digital, evite imitar movimentos físicos (por exemplo, evite fazer uma animação de virada de página igual a um livro).
Se você quer ter um aplicativo rápido e flexível, garanta que as animações são independentes e tenham uma
renderização de 60 frames por segundo.
Links
Guidelines e checklist para animações de borda: http://msdn.microsoft.com/pt-BR/library/windows/apps/hh465178
Guidelines e checklist para animações de transição: http://msdn.microsoft.com/enus/library/windows/apps/hh465209
Projetado para toque
Seu aplicativo deve também estar otimizado para todos os tipos de entrada de dados, incluindo toque/touch.
A otimização para toque é uma boa abordagem porque a plataforma do Windows 8 te dá eventos de mouse e
caneta de graça quando você codifica e faz o design para touch.
Projetar seu aplicativo para toque requer muita atenção a detalhes em diferentes níveis e critérios. Considere todos
esses fatores:





Design de interação por toque;
Linguagem de toque do Windows 8;
Tamanho dos objetos de toque;
Feedback visual;
Seleção.
Links
Design de interação por toque: http://msdn.microsoft.com/pt-BR/library/windows/apps/hh465415
Linguagem de toque do Windows 8: http://msdn.microsoft.com/ptBR/library/windows/apps/hh465415#touch_language
Tamanho dos objetos de toque: http://msdn.microsoft.com/pt-BR/library/windows/apps/hh465415#touch_targets
Feedback visual de toque: http://msdn.microsoft.com/pt-BR/library/windows/apps/hh465342
Seleção por toque: http://msdn.microsoft.com/pt-BR/library/windows/apps/hh465334
5
EXPERIÊNCIA de USUÁRIO - Controles, Navigação, Animação
O conteúdo é o mecanismo de navegação principal
A trait of a great Metro style app is content before chrome. When people focus on content, the composition of that
content forms the identity of the application and it should become the primary navigation mechanism. Avoid tabs,
menus for navigation, and home buttons. If your app needs navigation, you can use a header menu and section
labels to navigate, or a navigation bar.
Check the guidelines for navigation design for Metro style apps if you need tips for your navigation.
Links
Navegação: http://msdn.microsoft.com/en-us/library/windows/apps/hh761500
Faz uso apropriado do app bar
App bars provide the user with easy access to commands when they need them. Users will be familiar with the
pattern and will expect consistency across apps. You should


Ensure your app bars are organized, consistent, de-cluttered, and work well across all view states.
App bars should not have navigation elements in them.
To learn more and have a great app bar follow the guidelines for app bars.
Links
AppBar: http://msdn.microsoft.com/en-us/library/windows/apps/hh465302
Faz uso apropriado de superficies de comando e respeita as bordas
Commanding surfaces such as context menus, flyouts, and charms, are all designed to work together.
To ensure commanding is seamless for your users:




Ensure you do not have commanding surfaces near the left and right edge of the screen where the charms
and the task switching happens
Ensure that you use flyouts with light dismiss
Do not include persistent content on flyout or context menus.
Ensure your commanding strategy works across multiple view states, including filled and snapped.
Links
Design de comandos: http://msdn.microsoft.com/en-us/library/windows/apps/hh761499
Mostra tratamento de erro não obtrusivo, com significado e que o usuário pode agir
Present errors to the user in a non-obtrusive manner and ensure your messages are actionable. Follow the
guidelines for error messaging and choose the appropriate UI surface to present the errors.
Links
Superfícies de interface de usuário: http://msdn.microsoft.com/en-us/library/windows/apps/hh465304.aspx
Guia de Mensagens de Erro: http://msdn.microsoft.com/en-us/library/windows/desktop/ms679325(v=vs.85).aspx
Aproveita o zoom semântico de maneira apropriada
Semantic zoom is a touch-optimized technique for presenting and navigating through large sets of related content
within a single view. If your application presents such content, you should consider using the Semantic Zoom control.
6
To learn all the “do’s and don’ts” to effectively leverage the Semantic Zoom control, check the guidelines for
Semantic Zoom.
Links
Zoom Semântico: http://msdn.microsoft.com/en-us/library/windows/apps/hh465319
EXPERIÊNCIA de USUÁRIO - Telas & Formatos de Dispositivos
Suporta as orientações de tela paisagem e retrato
Rotation allows users to optimize interaction with your app with optimal comfort and ease of use for their device.
Windows 8 gives you multiple choices for rotation: free, constrained, and combined. Implement as many of these
choices as is appropriate for your app.
If your app does not support every possible device orientation, declare that in your manifest and plan accordingly.
You don’t want your user to get into a non-functional state in your app from changing the device’s orientation.
Links
Rotação: http://msdn.microsoft.com/en-us/library/windows/apps/hh465315
Se a adapta em diferentes formatos de dispositivos e respeita as proporções
Windows 8 will be available for a myriad of devices, form-factors, resolutions and aspect ratios.
If you want to sell to all these devices, you must design a flexible layout that adapts to this wide variety of devices
and aspect ratios.
You should also design for different resolutions and include assets that will look great in high-resolution displays.
We recommend you test your app at all the following display resolutions: 1024x768, 1366x768, 1920x1080, and
1280x800.
Links
Layouts flexíveis: http://msdn.microsoft.com/en-us/library/windows/apps/hh465386.aspx
Trata os estados de tela snap, fill, e tela cheia
Your application should handle snapped, filled, and full views.
Your UI should reflow smoothly and gracefully as you transition across states.
Your UI should also remain functional when in snapped mode; it might not have every detail that a full view will
have, but it should be functional.
When in snapped mode, focus on content that is relevant and needs to be visible. Avoid the common pitfalls in
snapped mode, such as cramped, non-functional app bars, clipped content, or panning in the wrong direction
(horizontal)
Links
Snap e fill: http://msdn.microsoft.com/en-us/library/windows/apps/hh465371
Arrasta e rola a tela em apenas uma direção para criar um senso de estabilidade
Panning helps users navigate through a view that does not fit (horizontally or vertically) within the viewport. There
are a lot of factors to consider when panning, for example: device type, orientation, input type (such as mouse,
touch, or pen), etc.
7
Provide a sense of stability within your views by always scrolling on a single axis. You can change the axis if the
device orientation changes, but ensure that there is stability and intuitive panning within the view.
Links
Guia de arraste e rolagem: http://msdn.microsoft.com/en-us/library/windows/apps/hh465310
É functional e parece natural num sistema que possui apenas mouse ou teclado
Keyboard is still a very important input mechanism for Windows. You should ensure that your application works well
for a user who is only using keyboard. This will require handling of navigation, tab stops, and ordering, etc.
Links
Guia de entrada de texto: http://msdn.microsoft.com/en-us/library/windows/apps/hh750315
É functional e parece natural num sistema que usa o teclado na tela
Designing for touch will get you a long way in Windows 8. As you lay out your screens, you should test on lower
resolution (1024x768) and ensure that your application works well with the soft keyboard.
Ensure that the keyboard is not pushing fields too high or covering controls that users will need in order to navigate
through the app (such as submit buttons).
Links
Design de interações por toque: http://msdn.microsoft.com/en-us/library/windows/apps/hh465415
EXPERIÊNCIA de USUÁRIO - Configurações
Implementa o contrato de Settings e não possui configurações e preferências em outros
lugares do aplicativo
The settings charm is the one consistent, familiar interface for the user to configure your app.
All those user preferences and settings that users do not change often should be exposed only in the settings
windows rather than throughout the app.
The guidelines for app settings has great insights into organizing your settings and what is appropriate for settings
and what is not appropriate for settings. Review and implement this guidance to make your app easy to configure.
Links
http://msdn.microsoft.com/en-us/library/windows/apps/hh770544
Faz roaming das configurações e estado do usuário
Roaming application data lets users keep your application data in sync across multiple devices like their work PC and
their slate at home. If a user installs the same app on two devices, Windows keeps the app data, like user
preferences, in sync. This reduces the amount of setup work that users need to do for your app on their second
devices.
To take advantage of this free, easy to code for, roaming functionality, check out the guidelines for roaming
application data.
Become familiar with the APIs to check for quota for roaming settings. Though roaming is very easy to use, it is not
designed to roam large data sets. Understand the implications and optimize your user experience accordingly.
8
Links
http://msdn.microsoft.com/en-us/library/windows/apps/hh465094
http://msdn.microsoft.com/en-us/library/windows/apps/windows.storage.applicationdata.roamingstoragequota
Possui uma boa experiência de sign-in/sign-out
If your application requires that users sign-in to enable certain functionality, pay attention to the user experience
and workflow around sign-in and sign-out.
Try to keep your application functional while the user is still signed-out. Provide some default experience that still
has value to the user.
If sign-out is not a common action (such as caching credentials), implement the functionality via the settings charm;
this way it will not be intrusive, and the user will intuitively find it consistent with other Windows 8 Metro style apps.
EXPERIÊNCIA de USUÁRIO - Contratos
Implementa o contrato de Search / Busca
The search contract lets your users search through your app’s content from anywhere in the system.
Using the Search charm helps you:



Take advantage of muscle memory that users have built by using the Search charm in the system and in
other apps
Ensure that users have a consistent and predictable experience when they search and when they change
search settings
Make your app more visible by placing it at the top of the list of searchable apps if the user searches your
app frequently
To have a great search experience, follow the guidelines for search.
Links
http://msdn.microsoft.com/en-us/library/windows/apps/hh465233
Implementa o contrato de Share Target / Destino de Compartilhamento
Users will always have information they want to share.
If your app implements the share target contract, it will always be one swipe away for the user.
If you want to increase the usage for your app, and have scenarios that can consume data from other apps,
implement the share target contract. Windows does most of the heavy lifting with sharing the data, you simply have
to receive it and let the user access it within your app.
For more details, check the guidelines for sharing.
Links
http://msdn.microsoft.com/en-us/library/windows/apps/hh465251
Implementa o contrato de Share Source / Fonte do Compartilhamento
An easy way to extend your application and connect it to any other application or service is to implement the share
contract. Participating in the Share contract means that you don't have to write extra code or provide other
developers with an SDK for your app just to share content.
9
You will be adding value and exposing it in the consistent, safe way that all Windows 8 users will expect.
For details on sharing, check the guidelines for sharing.
Links
http://msdn.microsoft.com/en-us/library/windows/apps/hh465251
Possui belas interfaces de usuário para os contratos
Sometimes we see beautifully designed applications that don’t sweat the details in their contracts’ user interface.
Contracts are an important part of your app; ensure the alignment, responsiveness, branding, and overall UI polish in
your contracts UI is as high as the rest of your app.
Aproveita os file pickers / seletores de arquivos
A Metro style app can call a file picker window to let the user browse their system and pick files or folders for the
app to operate on or to let the user save a file using a new name, file type, or location ("save as"). Apps can also use
file pickers as an interface that enables them to provide other apps with files, a save location, or even file updates.
Leverage file pickers within your app if you want to interact with user data that is stored in files.
To learn more about file pickers, check the accessing files with file pickers reference and follow the guidelines for file
pickers.
Links
Accessing files with file pickers: http://msdn.microsoft.com/en-us/library/windows/apps/hh465174.aspx
http://msdn.microsoft.com/en-us/library/windows/apps/hh465182
EXPERIÊNCIA de USUÁRIO – Gerenciamento do ciclo de vida
Trata os estados de vida do aplicativo de maneira apropriada
To allow your users to switch across apps and feel like they never left your app, you must properly and efficiently
handle the process life cycle management (PLM) events. At the highest level, you should:



Save transient state on suspend
Handle the resuming event, update the view if the content has changed since it was last visible to the user
Restore the transient state on launch event when the last known state was terminated
To learn more about PLM events, follow these guidelines for suspend and resume.
Links
http://msdn.microsoft.com/en-us/library/windows/apps/hh465088
Faz uso apropriado de tarefas de background
Through background tasks, Metro style apps can run while suspended or terminated. Despite this flexible option
being available, not all applications need background tasks.
Review your scenario carefully and decide if you must run in the background, how-often, and what would happen if
the user – who controls the lock screen apps – does not approve for your app to run in the background.
To become proficient on background tasks, check the introduction to background tasks white paper and then design
your application for the right usage.
10
If you do decide to declare your application for a background task, ensure that you have the right assets (for
example, badges for lock screen) and that you have the right triggers and conditions so your app runs when needed
and within the allotted slots for background tasks.
Links
http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=27411
EXPERIÊNCIA de USUÁRIO - Rede
Se comporta bem quando está offline ou quando a conectividade de rede é intermitente
If your application depends on the internet or any other resource that might be intermittent, ensure that it is able to
handle a lack of the resource.
As an example of how to handle intermittent resources availability, let’s use network connectivity:



Your application should not crash while off-line (when launched from a cold start, or when resuming after
having lost connectivity during suspend)
It should preserve as much functionality as it can even while off-line
It should detect the changes in the availability of the intermittent resource and transition appropriately,
enabling the right functionality when the resource is available
EXPERIÊNCIA de USUÁRIO - Tiles e Notificações
Tem um belo Tile / Mosaico com a sua marca
There is a bit to consider when designing a great tile: your brand, size of the tile, localization, high-dpi displays,
whether to use text for your app name, or to have your brand come through via the tile.
To learn all the do’s and don’ts of a beautiful, branded tile check the guidelines for tiles
Links
http://msdn.microsoft.com/en-us/library/windows/apps/hh465403
Tem um live tile ou tiles secundários
If you want your app to stand-out, liven up your tile and leverage secondary tiles to provide extra convenience for
your users. There are lots of ways to have your tile stand-out, most of them do not require a service.
If you want to learn more, here are some great options to differentiate your tiles: •Tile updates





Badges
Secondary tiles
Periodic notifications
Scheduled notifications.
Push notifications
Usa notificações toast para informações relevantes e onde o horário é importante
Toast notifications should be used for relevant and time sensitive information only.
They should be actionable (user clicking on them should navigate to an actionable place within your app).
Toast notifications should be concise and clear; don’t use content that is not required; do not add chrome.
11
Ensure you follow the other dos and don’ts from the guidelines for toast notifications.
Links
http://msdn.microsoft.com/en-us/library/windows/apps/hh465391
Trata adequadamente as ativações via contratos, tiles secundários e notificações
When an app is activated from a share contract, search contract, tile, or notification, parameters and data are
passed to your app. Your app should retrieve the data at launch and act upon it.
Links
http://msdn.microsoft.com/en-us/library/windows/apps/hh465102.aspx
WINDOWS STORE
Esperado passar nos requisitos de certificação da Windows Store
The application excellence lab is not a replacement for the thorough testing and validation that happens during
certification. Please carefully review the Windows store certification requirements and ensure that your application
meets all the requirements.
During our review, we will go through some of the requirements, but not all of them.
Links
http://msdn.microsoft.com/en-us/library/windows/apps/hh694083.aspx
Passa nos testes do Windows App Certification Kit (WACK)
To give your app the best chance of getting certified, validate and test it on your computer using the Windows App
Certification Kit.
Links
http://msdn.microsoft.com/en-us/library/windows/apps/hh694081.aspx
DESEMPENHO
A interface de usuário é sempre responsiva e provê feedback visual nas interações
Your UI should always be responsive and always provide visual feedback to the user. Here are examples, of feedback
interactions you should include:


When the user presses an item, provide visual feedback (a pressed animation)
When the user begins a long-running operation such as a network call or saving a file asynchronously, show
a progress control or other way for user to know that the action is executing.
For more tips, check the guidelines for user interaction
Links
http://msdn.microsoft.com/en-us/library/windows/apps/hh465370
12
DESEMPENHO - Animação
Mantém 60 frames por segundo
Fast and fluid applications should redraw the screen at 60 frames per second.
Drawing with high frame rates is most commonly achieved by leveraging the GPU to do the drawing of the scene.
You can accomplish this by:



Using the Windows Animation Library (if writing app with HTML/Javascript)
Using the native animations in XAML
Leveraging independent animations as much as possible
Independent animations are animations running off the UI thread (most often in a separate hardware accelerated I
thread
Links
Animating your UI in Metro style apps built using HTML & Javascript: http://msdn.microsoft.com/enus/library/windows/apps/hh465165.aspx
Standout with styling animation in your XAML app: http://channel9.msdn.com/events/BUILD/BUILD2011/APP-494T
Performance tips for animating Metro style apps built using HTML & JavaScript: http://msdn.microsoft.com/enus/library/windows/apps/hh849087.aspx
DESEMPENHO – Ciclo de vida
Otimiza os tratadores dos eventos de suspend e resume
The suspend and resume PLM events will allow users to switch across tasks and feel like they never have left the
app. If you want the task switching to be seamless, you must have suspend & resume event handlers that are
optimized to execute promptly. Consider the following optimizations if you want fast suspend and restore:



Save the least amount of data at suspend; any non-transient application state can be saved earlier, as it
changes throughout the app
Avoid saving state when no state has changed
Optimize your restore handler to do the least amount of work. Your app is always in memory; if your data
has not changed, you might not have a lot of work to do. If your data did change, refresh it in the
background, and make sure the app is responsive while you are refreshing it.
Links
Optimizing your app's lifecycle: http://msdn.microsoft.com/en-us/library/windows/apps/hh781221.aspx
Suspende e retoma nos tempos previstos
An application has five seconds to save state after the suspending event fires.
The application should resume just as efficiently.
13
DESEMPENHO - Cache & Dados Locais
Depende de conteúdo empacotado, local o máximo possível
Local assets (images, data files, etc.) load quicker than assets you download from a service or website via a network
call. Common caching techniques should apply to your Metro style app.
To minimize unnecessary or repeated downloads, include all the assets that your project needs within your
application’s package.
If you must use online assets cache them locally so you can reuse them. Apply a policy that meets the right balance
between proper expiration times, managing local state and how much space you use in the local drive.
Links
DESEMPENHO - Inicialização
A primeira página carrega em menos de 5 segundos
First impressions are critical. Fast and fluid apps must have a good startup time. Aim for your application’s first page
to be loaded (and functional) within 5 seconds from a cold start.
If your application takes longer, consider using an extended splash screen to keep the user aware of the progress.
Once your app has loaded once, cache enough data or content to have a quick start-up that arrives at a functional
screen promptly the next time it needs to load. If you load from cached data, refresh the data in the background to
not block your loading experience.
Links
Minimizing start-up time on HTML apps: http://msdn.microsoft.com/en-us/library/windows/apps/hh849088.aspx
Minimizing start-up time on XAML apps: http://msdn.microsoft.com/en-us/library/windows/apps/hh771190.aspx
Aproveita o caching de bytecodes de Javascript
This optimization is applicable only to Metro style apps built using HTML and JavaScript.
Bytecode caching is a technique in which the system creates bytecode for each JavaScript file once, rather than
recreating the bytecode each time it launches the app.
To ensure that your app benefits from bytecode caching:


Ensure all JavaScript files are UTF8 encoded with a byte-order mark (BOM)
Ensure all JavaScript files are statically referenced in the root of your HTML start page
Links
For more details about bytecode caching, refer to http://msdn.microsoft.com/enus/library/windows/apps/hh849088.aspx
DESEMPENHO - Memória
Gerencia o uso de memória para os limites recomendados
Most of the time, using less memory implies you are doing things more efficiently.
14
Also, when your app uses less memory, the system has more memory available for task switching and it decreases
the chances of your app being terminated upon suspend.
The desired working set sizes for Metro style apps are 80 MB for smaller apps, 100 MB for medium size apps, and
150MB for larger apps. These numbers obviously vary per app, but budget your working set to not depart too far
from the targets.
Techniques you can use to optimize your app’s working set include:




Upon suspend, release memory or resources that you know will be stale at a later resume.
Decode images only at desired (or reasonable resolution).
Use thumbnail APIs for images when all you need are thumbnails.
Release expensive objects as soon as possible. Don’t forget to call URL.revokeObjectURL
Links
http://msdn.microsoft.com/en-us/library/windows/apps/hh750313.aspx
Performance white paper.
DESEMPENHO - Rede
Gerencia os recursos de rede de maneira apropriada
Even though network operations are asynchronous; optimizing network calls helps with user perception of how
responsive (or ready) your application is.
Common networking call optimizations you should make include:


Canceling pending network operations when they are not needed. Don’t do work that won’t be used.
Design your APIs to return the right amounts of data. If you return too much, you will be executing extra
parsing and downloading extra data that might cost the user on a metered network; if you download too
little, you will be making too many calls (effectively wasting more bandwidth and leading to longer delays)
on data that needs to be readily available for display to the user.
DESEMPENHO – Tarefas de background
Respeita os tempos reservados para as tarefas em background
Apps that run in the background or under lock screen receive a certain amount of CPU time at regular intervals. If
the app uses all of its available CPU time, its background tasks are suspended until the app’s CPU quota is
replenished at the next generation for CPU quota updates.
Budget your allotted CPU time to maximize continuity.
Links
http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=27411
OUTROS
É acessível
Writing an accessible app can help you reach more customers.
15
The platform controls already do a lot of the work needed for your app to be accessible. You should become familiar
with the basic accessibility requirements and decide if you want to reach out to this audience. If you do choose to be
accessible, follow the accessibility guidelines and ensure you declare your app as accessible during your store
submission.
If you are not meeting the accessibility requirements (or have not thoroughly tested for accessibility) don’t declare
your app as accessible in the store; that might lead to bad reviews.
Links
Meeting basic accessibility requirements: http://msdn.microsoft.com/en-us/library/windows/apps/hh700338.aspx
Guidelines and checklist for accessibility: http://msdn.microsoft.com/en-us/library/windows/apps/hh700325
Declaring your app as accessible in the Windows Store: http://msdn.microsoft.com/enus/library/windows/apps/hh700322.aspx
É localizado
Windows is used worldwide, so you need to design your app so that resources, such as strings and images, are
separated from their code, to help make localization easy.
See the guidelines for designing a globalized Metro style app, guidelines for making your app world ready, and
guidelines for app resources if you are localizing your app to different languages.
Links
Guidelines for designing a globalized Metro style app: http://msdn.microsoft.com/enus/library/windows/apps/hh781206
Guidelines and checklist for app resources: http://msdn.microsoft.com/en-us/library/windows/apps/hh465241
16