.NET Tips And Tricks
Artigos com o marcador WPF
Ribbon para WPF
03/08/10
Desde que a Microsoft lançou o menu Ribbon no Office, creio que foi amor a primeira vista com a maioria das pessoas, apesar de muito diferente daquele velho e bom menu padrão, utilizando Ribbon, tudo fica mais organizado.
Infelizmente o WPF não possuia o menu Ribbon nativo para utilizarmos em nossos projetos, digo nativamente por que com componentes de terceiros, como por semplo da Telerik, eu já utilizei Ribbon eu vários projetos.
Ontem, dia 02/08 foi liberado o RTM do Ribbon for WPF um menu do estilo Ribbon, para WPF, construído pela própria Microsoft, já utilizei esse menu a algum tempo, mas ainda era Beta e não funcionou bem.
Para começar, podemos fazer download do menu clicando aqui, temos a opção de fazer download do instalador do Ribbon, e também de exemplos de utilização e do código fonte, isso mesmo, podemos olhar o código fonte do projeto, bons estudos . Além do link para download, clicando aqui vemos a página de documentação do menu.
A primeira mudança quando instalamos o Ribbon, é que ganhamos um novo tipo de projeto para WPF Ribbon Application.
Com o projeto criado, por padrão é criado um menu com itens básicos, o que é muito bom para entender o funcionamento do controle. Abaixo imagem do menu padrão criado com o código gerado.
<ribbon:Ribbon x:Name="Ribbon">
<ribbon:Ribbon.ApplicationMenu>
<ribbon:RibbonApplicationMenu SmallImageSource="Images\SmallIcon.png">
<ribbon:RibbonApplicationMenuItem Header="Hello _Ribbon"
x:Name="MenuItem1"
ImageSource="Images\LargeIcon.png"/>
</ribbon:RibbonApplicationMenu>
</ribbon:Ribbon.ApplicationMenu>
<ribbon:RibbonTab x:Name="HomeTab"
Header="Home">
<ribbon:RibbonGroup x:Name="Group1"
Header="Group1">
<ribbon:RibbonButton x:Name="Button1"
LargeImageSource="Images\LargeIcon.png"
Label="Button1" />
<ribbon:RibbonButton x:Name="Button2"
SmallImageSource="Images\SmallIcon.png"
Label="Button2" />
<ribbon:RibbonButton x:Name="Button3"
SmallImageSource="Images\SmallIcon.png"
Label="Button3" />
<ribbon:RibbonButton x:Name="Button4"
SmallImageSource="Images\SmallIcon.png"
Label="Button4" />
</ribbon:RibbonGroup>
</ribbon:RibbonTab>
</ribbon:Ribbon>
Como podem ver, não existe segredo na criação de Tabs, Grupos e Botões. Agora conseguimos utilizar um ótimo menu com Ribbon, sem recorrer a outras empresas.
Um outro detalhe, é que na Toolbox do Visual Studio, uma nova aba é criada, com todos os controles disponíveis para a criação do menu com Ribbon.
Aproveitem o Ribbon for WPF e é hora de começar a repensar a estrutura dos menus das aplicações .
Abraços.
Melhorando WinApps seguindo WebApps
01/08/10
Nossa Márcio que título maluco!!
Pois é, foi o melhor que encontrei 
mas logo o título fará sentido. Felizmente, sempre trabalhei com Web e Windows, apesar de não ter tanto talento como designer, adoro estudar padrões para UI, o que é certo, errado, o que fazer e o que não fazer.
É claro que não vou falar que todos os sites ou todas aplicações web seguem o que vou mostrar, mas felizmente a maioria das “bem feitas” seguem isso. Vou esquecer sites normais, e vou focar em aplicações web, só para facilitar.
O item que estou falando é tão simples e básico, que todo mundo deveria seguir, que é alinhar corretamente os itens de um formulário, é tão comum quando vamos desenvolver um layout de site, utilizar grids para definir o espaçamento entre os itens, assim temos um layout organizado e agradável.
Quem liga para isso Márcio? Ahhh ninguém, é só mais uma prática boba que o pessoal segue. Todo mundo liga, e liga muito. Mesmo que mesmo sem perceber, um formulário bem organizado ajuda qualquer usuário a encontrar o que ele quer.
Quem nunca viu algum profissional falar algo do tipo, “meu cliente não acha nada, meu cliente não procura nada direito”, é tão fácil culpar o cliente, afinal “eu” fiz tal coisa, então essa coisa está “perfeita”.
Mas eu acho que isso é meio cultural, já cansei de passar estudos de como criar um layout agradável para formulários para programadores, o que eles fazem? Apertam delete no e-mail, afinal isso é trabalho do “designer”, eu acho isso um absurdo, não estou pedindo para algum programador de WinApps aprender como combinar cores, como utilizar o Photoshop, nada disso, mas só para prestar atenção em como organizar um formulário.
Chega de falar, e vamos ver dois exemplos, com Windows Forms mesmo, que é o que a maioria do pessoal utiliza .
Padrão macarronada, nem sei se alguém já deu esse nome, mas falei ontem em um curso e gostei .
Ok, a tela feita, funciona, mas eu acho horrível olhar telas dessa forma, podemos facilmente organizar da seguinte forma.
Olhando a imagem acima, sei onde tudo começa e acaba, tenho padrão de espaçamento entre os campos do formulário, joguei o Label acima dos campos só para facilitar a visualização, e prefiro assim, mas com o Label a esquerda funciona da mesma forma.
Quando eu trabalhava com o Heitor Althmann, é família de geek =D, ele é designer, nós criamos alguns padrões para formulários, na época definidos por CSS automaticamente, mas ainda utilizo o padrão com sucesso em aplicações para Windows. Segue abaixo a lista de possibilidades com o padrão.
Espero que gostem, e que utilizem o padrão, e que UI seja uma preocupação também de quem desenvolve aplicações para Windows, afinal, aquela tela com 100 campos, totalmente desorganizados, deixa qualquer usuário confuso.
Abraços.
XAML – Canvas
08/06/10
Dando continuidade aos artigos sobre os painéis de layout do XAML, alias não vou mais dar o nome WPF/Silverlight para o que funcionar em ambas as tecnologias, vou falar diretamente XAML. Alias me perguntaram esses dias o significado de XAML, para quem não sabe é eXtensible Application Markup Language.
Bom no primeiro artigo sobre painéis de layout eu falei sobre o StackPanel, hoje vou mostra o controle Canvas.
Criar layouts com o Canvas lembra muito o jeito WindowsForms clássico, onde arrastavamos controles, e eles eram posicionados por coordenadas.
No Canvas acontece o mesmo, informamos valores da margem esquerda e superior, então caso queira criar um Button a 50 pixels da margem esquerda e 50 da margem superior o código é.
<Canvas x:Name="LayoutRoot" Background="White">
<Button Canvas.Left="50" Canvas.Top="50" Content="Botão 01" Height="23" Name="button1" Width="75" />
</Canvas>
Reparem que definimos a posição referente a margem esquerda do Canvas pela propriedade Canvas.Left do Button, o mesmo para a posição referente a margem superior do Canvas pela propriedade Canvas.Top.
Uma outra propriedade que temos acesso no Button é Canvas.ZIndex onde podemos definir qual elemento vai aparecer sobre outro, então no exemplo eu vou colocar mais um Button na posição Canvas.Top=”55” e Canvas.Left=”55”.
<Canvas x:Name="LayoutRoot" Background="White">
<Button Canvas.Left="50" Canvas.Top="50" Content="Botão 01" Height="23" Name="button1" Width="75" />
<Button Canvas.Left="55" Canvas.Top="55" Content="Botão 02" Height="23" Name="button2" Width="75" />
</Canvas>
Tudo bem, ninguém coloca um botão sobre outro, mas como é só para exemplo vamos lá =). Agora eu quero modificar a ordem, quero que o Botão 01 fique sobre o Botão 02. Para isso definimos a propriedade Canvas.ZIndex de cada um dos Buttons. Informamos um valor numérico, o valor mais alto fica sobre o valor mais baixo, simples assim.
Segue o código.
<Canvas x:Name="LayoutRoot" Background="White">
<Button Canvas.Left="50" Canvas.Top="50" Canvas.ZIndex="1" Content="Botão 01" Height="23" Name="button1" Width="75" />
<Button Canvas.Left="55" Canvas.Top="55" Canvas.ZIndex="0" Content="Botão 02" Height="23" Name="button2" Width="75" />
</Canvas>
Resultado, agora o Botão 01 está sobre o Botão 02.
O Canvas é simples mas pouco flexível, mas muito útil para quem quer desenvolver jogos, algumas animações onde vamos trabalhar diretamente com objetos posicionados, fica muito mais fácil.
Abraços e até o próximo artigo sobre o Grid.
Button com texto na vertical no XAML
15/05/10
Continuando os posts sobre XAML e o último post sobre o StackPanel nos comentários o Alan Cossari perguntou se não teria como colocar o texto dentro do botão na vertical, já que os botões estão em um StackPanel com orientação Horizontal para relembrar como era na imagem abaixo e também o resultado final.
E o código para rotacionar o conteúdo do botão.
<Button>
<Button.Content>
<TextBlock RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<TransformGroup>
<RotateTransform Angle="90"/>
</TransformGroup>
</TextBlock.RenderTransform>Botão 06</TextBlock>
</Button.Content>
</Button>
Esse foi um post simples e rápido, a explicação de cada cada item fica para os próximos artigos, mas fica claro que temos uma flexibilidade para criar ou alterar elementos do nosso layout.
Abraços.
WPF/Silverlight – StackPanel
11/05/10
Dando continuidade a série de posts para quem está começando com com WPF ou Silverlight, vou falar primeiramente sobre os paineis disponíveis para criação do layout dos aplicativos.
Eu considero o StackPanel o mais simples dos painéis, com ele conseguimos colocar os controles ordenados horizontal ou verticalmente.
Para criar os quatro botões da primeira imagem o código utilizado foi.
<StackPanel>
<Button Content="Botão 01" />
<Button Content="Botão 02" />
<Button Content="Botão 03" />
<Button Content="Botão 04" />
</StackPanel>
É possível definir a orientação dos elementos filhos do StackPanel através da propriedade Orientation, se a propriedade não for informada, por padrão a orientação dos elementos filhos é vertical.
O código abaixo é da segunda imagem, com os elementos filhos dispostos horizontalmente, um ao lado do outro, reparem que nesse exemplo coloquei a propriedade Orientation com o valor Horizontal.
<StackPanel Orientation="Horizontal">
<Button Content="Botão 01" />
<Button Content="Botão 02" />
<Button Content="Botão 03" />
<Button Content="Botão 04" />
</StackPanel>
Vale lembra que conseguimos adicionar StackPanel como elemento filho de outro StackPanel como por exemplo na imagem e código abaixo.
<StackPanel>
<Button Content="Botão 01" />
<Button Content="Botão 02" />
<Button Content="Botão 03" />
<Button Content="Botão 04" />
<StackPanel Orientation="Horizontal">
<Button Content="Botão 05" />
<Button Content="Botão 06" />
<Button Content="Botão 07" />
<Button Content="Botão 08" />
<Button Content="Botão 09" />
<Button Content="Botão 10" />
</StackPanel>
</StackPanel>
Por hoje é só, a utlização do StackPanel é simples, no próximo artigo vou mostrar opções de alinhamento e margens utilizando ainda o StackPanel.
Abraços.
WPF/Silverlight – Trabalhando com Painéis de Layout
23/04/10
Conforme solicitado no meu artigo sobre WPF vou começar uma série de artigos básicos sobre WPF/Silverlight.
Para começar vou mostrar uma breve descrição de cada painel disponível para criação do layout das aplicações, e depois dedicarei um artigo para cada um dos painéis. Vale lembrar que é muito importante entender o funcionamento e a utilização de cada um desses painéis para facilitar o desenvolvimento das nossas aplicações, como disse anteriormente WPF não é difícil, o que é difícil é mudar a forma de pensar e utilizar todo o poder da tecnologia.
Chega de papo e vamos ver quais painéis temos disponíveis.
- StackPanel: Disponibiliza os elementos em forma de pilha, vertical ou horizontalmente.
- Grid: Disponibiliza os elementos em linhas e colunas. É um dos mais utilizados para a criação de formulários.
- Canvas: Os elementos são posicionados por coordenadas x, y. Lembra o jeito WindowsForms de desenhar formulários, é simples mas pouco flexível.
Ainda temos o WrapPanel e o DockPanel mas vamos deixá-los por último.
Até o próximo artigo onde veremos mais detalhes sobre o StackPanel.
Abraços.
WPF é Difícil?!
01/04/10
Sempre me perguntam por e-mail ou nas palestras que faço se desenvolver com WPF é difícil, eu diria que desenvolver aplicações com WPF não é difícil, mas sim vai dar trabalho sair do velho Windows Forms e cair direto no WPF, exige sim estudo, entender como tudo aquilo funciona para não cometer o erro que muita gente comete, desenvolver aplicações Windows Forms com WPF.
Como assim aplicações Windows Forms com WPF?
Bom simplesmente desenvolvendo pensando na forma errada, esse eu acho o maior problema, o paradigma é outro, antes de sair escrevendo código, temos que pensar antes em todos os recursos que o WPF oferece para fazer da melhor forma possível.
Vou dar um exemplo abaixo do que eu chamo de desenvolver Windowns Forms com WPF, imaginem a tela de segurança de banco de dados, onde o usuário pode escolher a forma de segurança, disponível por 2 RadioButtons, Segurança Integrado do Windows ou Usuário e Senha do SQL Server e dois TextBox para informar o Usuário e Senha caso o usuário escolha Usuário e Senha do SQL Server.
A tela é simples:
Pensando na forma Windows Forms no eu vou programar o evento Checked de cada RadioButton, eles irão chamar um método que analisa se o Usuário e Senha do SQL Server está selecionado, e habilita os TextBox de Usuário e Senha.
1: private void radSegurancaIntegradaWindows_Checked(object sender, RoutedEventArgs e)
2: {
3: VerificarFormaSeguranca();
4: }
5:
6: private void radUsuarioSenhaSQLServer_Checked(object sender, RoutedEventArgs e)
7: {
8: VerificarFormaSeguranca();
9: }
10:
11: private void VerificarFormaSeguranca()
12: {
13: if(radUsuarioSenhaSQLServer != null)
14: txtUsuario.IsEnabled = txtSenha.IsEnabled = (bool) radUsuarioSenhaSQLServer.IsChecked;
15: }
O código funciona perfeitamente, mas eu não preciso fazer nada disso, eu posso utilizar os recusos de Binding do WPF, e faço todo esse tratamento direto no XAML.
Veja abaixo.
1: <TextBox Name="txtUsuario" Width="250" IsEnabled="{Binding ElementName=radUsuarioSenhaSQLServer, Path=IsChecked}"/>
2: <PasswordBox Name="txtSenha" Width="250" IsEnabled="{Binding ElementName=radUsuarioSenhaSQLServer, Path=IsChecked}"/>
Vejam que a propriedade IsEnabled do TextBox e do PasswordBox estão fazendo um Binding a outro elemento do meu formulário, ElementName=radUsuarioSenhaSQLServer na propriedade IsChecked, Path=IsChecked.
Resumindo, utilizar todo o poder do WPF da sim um pouco de trabalho, no que diz respeito a ter que estudar, aprender, etc… mas o resultado final recompensa todo o esforço!
Abraços e até a próxima.
WPF: Mudar o foco de controle apertando Enter
23/02/10
É muito comum no desenvolvimento de aplicações além da tecla Tab, definir o Enter para pular entre os controles do formulário, principalmente sistemas migrados do DOS em que o pessoal tinha esse costume de utilizar o Enter.
Com um projeto WPF criado, coloque 4 TextBox no formulário.
Feito isso, vá até o evento PreviewKeyDown do mesmo. O código para fazer o Enter pular de controle está abaixo.
private void Window_PreviewKeyDown(object sender, KeyEventArgs e){ var elemento = e.OriginalSource as UIElement; if (elemento == null) return; if(e.Key == Key.Enter) elemento.MoveFocus(new TraversalRequest(FocusNavigationDirection.Next));}
O código é simples, primeiro criamos uma variável a partir do e.OriginalSource que é o controle que estamos, e será a partir dele que vamos mudar o foco. Depois só temos uma verificação que se elemento for nulo retorna e não faz mais nada;
O if é simples, verifico se a tecla pressionada foi o Enter, e ai chamamos o método MoveFocus() que move o foco de um controle para outro, esse método recebe uma nova instância da classe TraversalRequest que representa uma requisição para mover o foco para outro controle.
No construtor da TraversalRequest passamos o enum FocusNavigationDirection que contém as opções abaixo:
- Next
- Previous
- First
- Last
- Left
- Right
- Up
- Down
Cada uma das opções move o foco de acordo com o TabOrder do formulário ou pela posição dos controles.
Com esse enum fica fácil criarmos mais opções para o usuário, por exemplo se o usuário clicar a seta para cima mudamos o foco para o controle acima, o código ficaria assim.
private void Window_PreviewKeyDown(object sender, KeyEventArgs e){ var elemento = e.OriginalSource as UIElement; if (elemento == null) return; if(e.Key == Key.Enter) elemento.MoveFocus(new TraversalRequest(FocusNavigationDirection.Next)); if (e.Key == Key.Up) elemento.MoveFocus(new TraversalRequest(FocusNavigationDirection.Up));}
Fica aqui a dica principalmente para quem está migrando de WindowsForms para WPF, e vai ver que alguns (muitos) detalhes funcionarão de forma diferente.
Abraços.
Fontes de Dados no Sketchflow
12/01/10
Dando continuidade aos artigos sobre o Sketchflow, hoje vou mostrar mostrar como utilizar fontes de dados de exemplo nos nossos protótipos. Como estamos criando somente um protótipo, não vamos nos preocupar com criação de banco de dados, popular os controles com dados reais, mas podemos criar fontes de dados de exemplo permitindo a criação de um protótipo ainda mais real com o produto final.
Seguindo o artigo anterior, criei uma página de produtos onde coloquei um ComboBox que vai mostrar o nome do produto e a foto do mesmo para o usuário escolher, a tela é simples só tem o ComboBox.
Agora com o ComboBox criado, vá até a janela Data, geralmente ela fica junto com a janela Properties, se ela não estiver aberta é só abri-la através do menu Windows/Data. Vamos no momento criar uma nova fonte de dados para o projeto, clique no ícone indicado pela seta na imagem abaixo, e selecione a opção Define New Sample Data…, como vemos abaixo, podemos importar os dados de um XML, mas isso fica para outro artigo.
Na próxima janela, informamos um nome para a nossa fonte de dados no nosso caso ProdutosDataSource, ainda podemos escolher se a fonte de dados será definida no projeto ou no documento, deixe selecionado Project, também escolhemos a opção Enable sample data when application is running caso contrário a fonte de dados não vai funcionar no nosso protótipo. Depois disso é só clicar em Ok e a nossa primeira fonte de dados está quase pronta.
Com a fonte de dados criada a janela Data ficará como na imagem abaixo, vemos também que foram criadas duas propriedades chamadas Property1 e Property2, podemos mais propriedades, excluir, renomear, que é o caso dessas duas, vamos renomear Property1 para Nome e Property2 para Foto. Para renomear uma propriedade é só dar um duplo clique no nome da propriedade e colocar o novo nome.
Com as propriedades renomeadas, vamos editar os valores da fonte de dados, para isso clique no botão Edit sample values.
Veja abaixo a tela de edição de dados mostrando as nossas duas propriedades já com dados preenchidos, vale ressaltar que no rodapé da janela podemos escolher o número de registros que será criado na nossa fonte de dados, por padrão vem definido com 10 registros.
O primeiro problema que vamos resolver é que a propriedade Foto foi criada com o tipo Boolean, e temos que falar que a coluna é do tipo image, para issó é só clicar no ícone indicado na imagem abaixo, e no popup menu que vai abrir, é só escolher o tipo da propriedade como Image.
Assim que escolhemos o tipo Image a nossa tela de edição de valores já mostra algumas imagens de exemplo na coluna foto como pode ser visto abaixo, mas ainda temos a opção de escolher um diretório do nosso computador com as imagens que queremos mostrar, no exemplo vou deixar as imagens padrão, mas caso queira mostrar imagens específicas é só escolher o diretório das imagens no campo Location.
No caso da coluna Nome só para demonstrar as opções de dados que temos para uma coluna do tipo string as imagens abaixo mostram as configurações disponíveis como o número máximo de palavas, e o número máximo de caracteres por palavra na string, a segunda imagem mostra os tipos de dados padrão que temos para string como Lorem ipsum, Email, Address, cada tipo que definir vai preencher a coluna com exemplos do tipo escolhido, para o exemplo vamos deixar Loren ipsun mesmo. Feito isso é só clicar em Ok.
Agora o último passo é arrastar a nossa fonte de dados para o controle que vai mostrar os dados, no nosso caso o ComboBox.
Feito isso é só compilar o nosso projeto e já vemos o ComboBox do nosso protótipo mostrando dados para o usuário.
Esse foi mais um exemplo de todo o poder e facilidade do Sketchflow e como ele pode ajudar nos nossos protótipos.
Abraços.
Criando Protótipos com o SketchFlow Parte Final
07/01/10
No primeiro artigo mostrei como criar um protótipo simples com duas telas, dando continuidade vamos agora enviar o nosso protótipo para a avaliação do cliente, para isso é só utilizar a opção Package SketchFlow Project do menu File.
Na próxima janela só precisamos escolher um local para salvar os arquivos e o nome da pasta que será criada, feito isso é só clicar no botão Ok.
Os arquivos gerados devem ser enviados para o cliente, lembrando que para executar o protótipo é só abrir o arquivo TestPage.html. Sera aberto o browser padrão com o SkethFlow Player rodando o protótipo, um detalhe é que o cliente precisa do Silverlight instalado para visualizar o protótipo. Veja abaixo o protótipo em execução.
O SketchFlow Player algumas janelas interessantes.
- Navigate: Além de navegar pelo protótipo mesmo clicando nos botões, como no caso acima no botão Login a janela Navigate mostra as navegações possíveis apartir da tela que estamos visualizando no momento. Temos também um slider que possibilita aumentar ou diminuir o zoom sobre a tela visualizada.
- Map: Mostra o mesmo diagrama com o relacionamento entre as telas que temos dentro do Blend.
- Feedback: É a janela mais interessante e onde serão feitas todas as anotações sobre o protótipo, nela temos pincéis para desenho, podemos escrever anotações, podemos escolher cores para cada pincel, enfim, o cliente tem o protótipo livre para rabiscar, escrever como se estivesse com uma folha de papel e caneta na mão.
Nas imagens abaixo tem um exemplo do que pode ser feito, vale notar que alterei os valores dos campos de Login e Senha mostrando que o protótipo é interativo e não apenas uma imagem.
Com a minha analise do protótipo feita, onde coloquei minhas anotações sobre o que quero mudar no mesmo, eu preciso exportar o meu feedback para o desenvolvedor, para isso dentro da janela Feedback no botão Show Feedback Options escolhemos a opção Export Feedback.
Feito isso aparecerá uma janela para para o autor do Feedback colocar seu nome e iniciais.
Clicando no botão OK uma janela do Windows para salvar arquivos aparecerá, é só escolher um diretório e dar o nome do arquivo que será salvo.
Um arquivo .feedback sera criado, esse arquivo deve ser mandado de volta ao desenvolvedor para ele analisar os feedbacks do cliente e fazer as modificações solicitadas, agora só precisamos importar esse arquivo de feedback do cliente no Blend, na janela Feedback clique no botão +, uma janela para adicionar arquivos existentes aparecerá, só precisamos escolher o arquivo de feedback e clicar em Open.
Se o botão que tem o desenho de lampada da janela Feedback estiver ativo, veremos no fonte das telas as anotações feitas pelo nosso cliente, facilitando a correção dos problemas, também vemos os comentários que ele escreveu na própria janela de Feedback, outro detalhe importante é que na janela SketchFlow Map as telas com feedback terão uma lampada adicionada no item da mesma dentro do diagrama. Veja abaixo os feedback do cliente visto dentro do Blend.
Imaginando que terminamos todo o trabalho, temos a opção do Blend gerar automaticamente a documentação de todo o protótipo, para isso escolha o item Export To Microsoft Word do menu File.
Na próxima janela só precisamos informar o nome do arquivo .docx que será gerado, a pasta o
nde será gerado, e ainda temos a opção de mandar o arquivo abrir no final da geração, e se você possuir algum template de documento do Word, pode marcar a opção escolher template e selecionar o mesmo.
Veja abaixo o documento aberto no Word com a documentação do projeto, imagens do mapa das telas, e imagem das telas.
Bom esse foi um pequeno exemplo de todo o poder do SketchFlow ainda tenho muito o que falar, animações, coleção de dados, mas fica para os próximos artigos, e só para completar, em um projeto novo que estou trabalhando, fizemos um SketchFlow do site e mandamos para o cliente, ensinamos ele a utilizar a ferramenta de feedback, e ele adorou, elogiou demais, adorou navegar pelo site e ver onde tudo vai ficar antes mesmo do desenvolvimento do site começar.
Abraços.
