Olá Pessoal!

Depois de algum tempo estou mostrando um componente no qual uso seguidamente trata-se de duas listas para Drag and Drop, porém não posso disponibilizar o fonte ainda ( vou ver se eu posso hehe ) talvez se eu der uma enxugada nele eu poste ai para vcs leitores, mas para verificar como fica o fonte é mais ou menos isso abaixo.

Fonte:

xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	xmlns:fborella="br.com.fborella.*" backgroundColor="white">
	<mx:Script>
		[CDATA[
			import mx.collections.ArrayCollection;
?
			[Bindable]
			public var disciplinas:ArrayCollection=
				new ArrayCollection(
				[{descrdisciplina: "PORTUGUES"},
				 {descrdisciplina: "MATEMATICA"},
				 {descrdisciplina: "CIÊNCIAS"},
				 {descrdisciplina: "HISTÓRIA"},
				 {descrdisciplina: "GEOGRAFIA"},
				 {descrdisciplina: "EDUCAÇÃO FÍSICA"},
				 {descrdisciplina: "ENSINO RELIGIOSO"},
				 {descrdisciplina: "FÍSICA"}]);
?
			[Bindable]
			public var droppedDisciplinas:ArrayCollection=
				new ArrayCollection(
				[{descrdisciplina: "QUÍMICA"},
				{descrdisciplina: "BIOLOGIA"}]);
		]]>
	mx:Script>
	<fborella:FList width="100%" height="100%" id="lista"
			dataProvider="{disciplinas}" tDataProvider="{droppedDisciplinas}"
			labelField="descrdisciplina" tLabelField="descrdisciplina"
			filtrarLabel="Todas Disciplinas" tFiltrarLabel="Disciplinas Associadas">
	fborella:FList>
mx:Application>

Demo:

Arraste, movimente os objetos com os botões etc, observe os tool tips que vai ajudar na navegação.

Até em breve
Comentem.

Felipe Borella

Na última aula ensinei a vocês como criar um Menu Wizard utilizando botões e um recurso “fake” para simular o down permanente (selected).

Nessa aula eu mostro como utilizar o ToggleButton para fazer o mesmo menu sem necessitar daquele layer Down em imagem separada.

No entanto vale lembrar que ambos tem suas funções, você deve aprender os dois jeitos pois perceberá o momento certo de usar cada um.

A dica Flex de hoje mostra como fixar a largura dos botões do componente Spark ButtonBar no Flex 4. Para isso vamos apenas criar um layout customizado horizontal e setar as propriedades columnWidth e variableColumnWidth.

Veja o código a seguir:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx">
	<s:ButtonBar horizontalCenter="0" verticalCenter="0">
		<s:layout>
			<s:HorizontalLayout columnWidth="80" variableColumnWidth="false" />
		s:layout>
		<s:dataProvider>
			<s:ArrayList source="[Botão 1, Botão Dois, Botão 3, Botão Número 4]" />
		s:dataProvider>
	s:ButtonBar>
?
s:Application>

Lembrando que se a propriedade variableColumnWidth estiver setada como true a propriedade columnWidth não terá efeito.

Espero que tenham gostado. Até a próxima!

Bom galera, estamos continuando nossas aulas sobre Flash Catalyst, agora trago a vocês um componente bastante interessante, podemos chamá-lo de Wizard Button Menu, são botões que se comportam de acordo com um menu Wizard.

O que é um menu Wizard? São aqueles menus de etapas, muito comuns em e-commerce, o problema é que o comportamento de um botão nesse tipo de menu é diferente daquilo que o Catalyst por si só oferece, ou seja, você precisa de um down permanente, sem que ao retirar o mouse ele volte ao estado de on, logo, eu ensino uma técnica simples, porém um pouco trabalhosa para se fazer isso, mas é no meu ver a melhor técnica para criar esse tipo de componente já que, vamos navegar entre os states sem problema, desabilitar o botão que se encontra na etapa desejada deixando somente os demais ativos.

A primeira parte eu mostro como organizar os arquivos no Fireworks para você importar com maior facilidade para trabalhar no Catalyst, se você já sabe isso, pule essa etapa, mas… se tiver problemas para organizar depois, volte e veja esse vídeo.

A segunda parte eu ensino como organizar o menu no Catalyst, criar os botões e deixar pronto para fazermos o Wizard.

A terceira aula e última por fim eu termino o processo criando o menu.

Eu faço isso de maneira muito mais diferenciada e mais rápida, porém eu tive quase certeza que ia complicar a vida do iniciante, então fiz algumas etapas bem chatinhas mesmo para que aqueles não muito intimos do Catalyst pudessem acompanhar e entender os problemas.

Se você não fez a aula de botão, volte e faça, do contrário essa aula aqui será bastante complicada.

PS:  Meu Illustrator expirou, pois é, eu havia recentemente instalado o pacote pois o meu Mac é novo, logo, não pude mostrar um detalhe, prometo que na próxima aula o problema já estará corrigido rs, e mostrarei o detalhe que faltou, ah claro, não editei… você pode conferir….  []´s

PS2: O barulho de fundo na última aula desse menu é chuva, sabe como é, estou em Sampa hehe

Aspecto do nosso Menu.

.

Parte 1

.

.

Parte 2

.

.

Parte 3

.

.

_______________________
Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath

A dica Flex de hoje é para aqueles que querem embedar assets de arquivos SWF. O Flex permite que façamos esse trabalho de forma simplificada, utilizando apenas a metadata “Embed“, especificando qual o símbolo a ser embedado. Para dar um exemplo prático, digamos que você criou uma série de assets no Flash, como ícones e botões customizados, e agora deseja utilizá-los no seu aplicativo Flex.

Veja o código abaixo:

No exemplo embedamos 2 símbolos de um arquivo SWF chamado “MyAssets.swf” e vamos utilizá-los como ícones dos nossos botões.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<mx:Script>

        <![CDATA[ 



            [Bindable]

            [Embed(&#039;assets/myAssets.swf&#039;, symbol=&#039;btnSalvar&#039;)]

            private static var BUTTON_SALVAR:Class; 



            [Bindable]

            [Embed(&#039;assets/myAssets.swf&#039;, symbol=btnEditar)]

            private static var BUTTON_EDITAR:Class; 



        ]]>

    </mx:Script> 



    <mx:Button id="salvar" label="Salvar" icon="{BUTTON_SALVAR}" />

    <mx:Button id="editar" label="Editar" icon="{BUTTON_EDITAR}" />

O código acima funciona perfeitamente mas não é a forma mais clara de fazer esse trabalho. Utilizando um conceito da orientação a objetos chamado divisão de responsabilidades, vamos refatorar nosso pequeno exemplo, criando uma nova classe que vai encapsular nossos assets, movendo para ela nossas propriedades estáticas. Veja o código da classe a seguir:

1
2
3
4
5
6
7
8
    public class MyAssets

    {

            [Embed('assets/myAssets.swf', symbol='btnSalvar')]

            private static var BUTTON_SALVAR:Class; 



            [Embed('assets/myAssets.swf', symbol=btnEditar)]

            private static var BUTTON_EDITAR:Class;

    }

Para utilizá-la faça:

1
2
    <mx:Button id="salvar" label="Salvar" icon="{MyAssets.BUTTON_SALVAR}" />

    <mx:Button id="editar" label="Editar" icon="{MyAssets.BUTTON_EDITAR}" />

Para saber mais sobre como embedar assets acesse:
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf60546-7fff.html

Espero que tenham gostado e até a próxima pessoal!

Já?

Chegou aquela altura do ano em que do lado do WordPress.org se começam a dar os retoques finais na próxima versão do WordPress (a 3.1, neste caso). Os utilizadores do WordPress.com são automaticamente incluídos na versão beta, dando-lhe todo o acesso a novas funcionalidades, um mês antes de estas serem lançadas oficialmente. Isto é bom, não só porque lhe dá um acesso antecipado ao que aí vem, mas como também a sua opinião nos ajuda a melhorar ainda mais. Estou muito animada, tanto pelos os novos recursos que acabámos de implementar, como por serem adições que já desejava há muito tempo. Aqui estão as novas funcionalidades que já pode ver no seu painel:

Criação mais fácil de links internos

Fi.nal.mente.

Está a escrever um post (ou uma página) no WordPress. Menciona algo que tenha escrito antes, e pensa: “Já sei, vou criar uma ligação para esse post!” O que é que fazia? Pode ser que abrisse um novo separador ou janela e que procurasse no seu conteúdo na sua lista de posts, ou ainda que visitasse o seu blog e procurasse esse post. Seja como for, teria que encontrar esse conteúdo, obter a respectiva URL, de modo a ao clicar no botão de link no editor de posts, poderia colá-la. Certo? Isso são o quê? Entre 5 a 8 passos, dependendo de como o fazia? Não mais!

Posts e páginas existentes podem ser encontrados e ligados com uma pesquisa dinâmica.

Com a nova funcionalidade de links internos, pode agora indicar qualquer URL para criar um link, como costumava fazer, ou então procurar nos seus posts e páginas existentes logo ali, na janela de inserção de links. Uma combinação de pré-carregamento, preenchimento previsivo e alguma magia Ajax tornam o uso da ferramenta de criação de links numa alegria (e confira quão mais rápida está a janela!). Esperamos que isto o incite a fazer mais conexões entre o conteúdo do seu site, o que tornará mais fácil para os seus visitantes encontrar mais conteúdo relacionado. Agora todos juntos: Viva! (Certo?)

Ordem por colunas

Quando visita a página de Posts (ou de Páginas, ou de Media ou de qualquer outra informação em lista), alguma vez desejou poder clicar no nome da coluna para alterar a visualização, ordenando por exemplo a informação por data, por ordem alfabética, por autor ou por outro critério? Eu sei que eu quis, desde sempre. Já temos! Este recurso é o resultado de um bem-sucedido projecto de um aluno do Google Summer of Code, demonstrando ainda que o programa é uma ótima maneira de se envolver com o desenvolvimento do WordPress. A pequena seta ao lado do título da coluna (na minha imagem de exemplo, a coluna Data) mostra a coluna pela qual a informação está ordenada, e se a ordenação é ascendente ou descendente. Basta clicar no cabeçalho de qualquer coluna para ordenar por essa coluna ou para inverter a ordem.

Paginação melhorada

Se tem muito conteúdo, pode ser que tenha tido uma experiência levemente irritante ao navegar as páginas posts, media ou outros. Clicar para a frente e para trás é fácil, tal como saltar para a primeira ou última página, mas então e o meio? Imaginemos que tem 23 páginas de posts; está na página 6 e, com base nas datas, acha que o que está à procura deve estar por volta da página 15. Teria que clicar várias vezes para avançar algumas páginas, até chegar à página desejada. Não mais! Com o novo estilo de paginação, os botões para a frente/fim e para trás/início continuam lá, mas agora pode ir directamente para qualquer página, alterando apenas o número editável mostrado na área de paginação (e carregar em Enter).

Pesquisas com Ajax

Os resultados de pesquisas são agora mais rápidos e não requerem actualizações do painel no seu browser graças à adição de Ajax. Rápido!

Esquema de cores revisto

Nas opções do seu perfil, tem uma escolha de esquemas de cores do painel, cinza ou azul (o padrão é cinza). Actualizamos o esquema de cores cinza há algum tempo, mas não actualizamos o azul. (Lembra-se quando mudamos do cabeçalho do escuro para o mais claro? Bons velhos tempos.) O novo esquema de cores azul é mais leve, mais limpo e com base nos mesmos tons que o esquema de cor cinza, mas com uma tonalidade azul, para que o foco possa permanecer firmemente na criação de conteúdo, sem distrações. Se você nunca experimentou o esquema de cor azul, agora seria um óptimo para experimentar e ver se gosta! Existem outras cores que gostaria de ter como opções? Diga-nos nos comentários!

Suporte melhorado para IE9

Para aqueles que têm tido problemas em usar arrastar e largar no painel ou ainda algum problema com o editor visual na criação de posts, com o Internet Explorer 9, foram feitas melhorias para funcionem agora sem problemas no mais recente browser da Microsoft.

A ter em conta: estas funcionalidades são novas e embora tenhamos trabalhado nelas durante bastante tempo, poderá encontrar um erro que nos tenha escapado. Se alguma delas lhe estiver a causar problemas, pode deixar um comentário neste post durante as próximas duas semanas, falar sobre isso nos fóruns, ou contactar o suporte através dos canais habituais.

Espero que apreciem estas notícias, tanto quanto nós gostamos de as desenvolver. Bom blogging!

Actualização

Graças aos vossos comentários, conseguimos já detectar e corrigir alguns erros que escaparam nos nossos testes.

• Corrigimos um conflito com o plugin de CSS usado no WordPress.com (a incompatibilidade causava comportamentos estranhos no editor). Assim, se tinha problemas tais como ver texto a ser sublinhado ou em negrito inesperadamente, isto não deve acontecer mais.
• Corrigimos uma falha do IE8 com a janela de inserção de links, mas ainda estamos a trabalhar em alguns problemas no IE7. (Agora a sério, usar browser antigos não é uma boa ideia. Actualize-o!)

Se mesmo assim continuar com problemas com as novas funcionalidades, quando deixar um comentário ou contactar o suporte, por favor indique o sistema operativo e browser que está a usar, para nos ajudar a resolver o problema mais depressa. Exemplos: “Estou a usar Firefox 3.9 com Mac OSX 10.5.”  ”Estou a usar Google Chrome em Windows 7.”

Obrigado!

Twitter!

Esse texto não visa explicar o que é UX, já temos um texto que trata do assunto, este artigo abaixo é a visão de Shane Morris sobre o processo de UX em si.

Entenda do artigo a palavra produto como o aplicativo em si construído pelo desenvolvedor e designer.

Shane Morris, um ex-UX Evangelista da Microsoft e que atualmente é um UX Arquiteto independente, realizou uma palestra chamada “Pimp My App” no TechEd Brasil 2010, apresentando cinco coisas para se saber antes de começar a criar uma UX (como já comentei,  no texto What the hell is UX?, é comum arquitetos se apoderarem do termo UX a fim de definir a matéria de usabilidade com um algo a mais, porém aqui no texto vale o nome, só acho que um pouco mal colocado), e 6 dicas de como desenvolver um produto com uma aparência maravilhosa.

Morris considera que o desenvolvimento de uma UX (como já havia citado, UX não é algo concreto mas vamos lá), deve seguir as seguintes etapas:

1. Projeto Conceitual

2. Design de Informação

3. Design de Interação

4. Apresentação do Design

.

Ele fala de cinco coisas que deve-se saber antes de começar a “UX”:

.

1.  A primeira função de um projeto de UX não é estabelecer as cores e as fontes, mas classificar as informações a serem exibidas e estabelecer o fluxo de informações, ajudando o usuário  a encontrar o seu caminho, fazendo com que o mesmo consiga realizar a tarefa predisposta. Em seguida vem a questão “emocional” do produto.

2. Definição dos objetivos do usuário, dos negócios, da usabilidade, da experiência e perspectiva, porque tudo isso irá afetar o design.
O que acontece com o olhar do usuário quando este acessa um produto e uma página? Qual objetivo da organização do produto? O que torna um produto útil? Ele é fácil de usar? Flexível? Adaptável?
Qual é a experiência de se usar o produto desejado?
Esta é a melhor forma de expor as informações aos usuáros potenciais do produto, caso contrário o designer deve se perguntar o que ele gostaria de ver se ele fosse um cliente.

3. “Você não é o usuário”. Enquanto o designer deve tentar imaginar o que o usuário gostaria de ver ao utilizar o produto, ele deve lembrar que ele não entende realmente os gostos do usuário e o que realmente gosta ou sente, então ele não deve assumir que todos os usuários vão gostar de tudo que ele gostaria de ver.

4. Realizar testes de usabilidade a cada dois ou três sprints para certificar-se de que as novas implementações no projeto serão bem recebidas.

5.  Adquirir uma boa compreensão do fluxo de informação em todo o produto, pois ele ajuda a imaginar maneiras melhores de apresentar essa informação. Então só depois disso podemos passar a pensar na concepção da Interface para o usuário (UI – User Interface).

.

Morris continua com 4 etapas desse esquema:

.

1. Mapear o fluxo de trabalho, determinar a sequencia das ações que o usuário pode vir a realizar, a fim de conseguir fazer as atividades.

2. Liste os seus conteúdos, determine os widgets necessários para tonar o fluxo de trabalho possível. Apropriadamente escolha os check boxes, radio buttons, spin buttons, etc. Escolha a terminologia utilizada, ou seja, palavras que aparecem nos botões (text label), check boxes, etc.

3. Organização dos elementos da página, essa organização visual deve ser considerado a partir do fluxo normal de uma página (visão ocidental), que é na maioria dos países, da esquerda para a direita e de cima para baixo. Essa é o padrão a ser levado em consideração.

4. Verifique o agrupamento. Alguns elementos estão fortemente relacionados entre si, e por isso é natural agrupá-los por página, isso pode exigir alguma reorganização dos elementos (e até mesmo da proposta inicial).

.

Em seguida, ele apresenta 6 dicas para melhorar a forma como o produto se apresenta:

.

1. Remova todos os elementos desnecessários, uma abordagem minimalista seria recomendada.Toda a “decoração” deve ser feita com um propósito em mente. Caso se trate de um produto previamente projetado, deve-se remover qualquer elemento que não é relamente necessário ou que tumultua a vista, enganando o usuário em relação ao seu real propósito. Por exemplo, se dois elementos são relacionados, devem estar juntos dentro  do mesmo box, em vez de em boxes separados.

2. Minimize as variações. Deve-se ser coerente com as fontes, layout e cores utilizadas. Isso não significa que deve ser usar as mesmas características por toda a página, mas a variação é que deve ser limitada. As pessoas são mais atraídas  por GUIs (Guidelines) consistentes e previsíveis.
Por exemplo, a área de compra de um site deve ter um destaque diferente, porém a tal área além de ter um visual mais próprio, mantem um padrão entre si.

3. Alinhamento. É importante que os vários elementos de uma pagina estejam alinhados tanto quanto possíveis, para que isso de fato crie um fluxo visual, tornando mais fácil para o usuário entender a página.

4. Uniformidade e Proporção.  Tem de haver equilíbrio na forma como os elementos estão dimensionados e espaçados entre si. O olho prefere elementos do mesmo tamanho e com espaçamento proporcional, fazendo com que pareça natural.

5. Indique agrupamento através de boxes, com similaridade, proximidade, alinhamento, e espaçamentos.

6. Ajuste o peso visual. Atribua diferentes pesos aos elementos visuais, usando cores, tamanho, forma, desalinhamento, contraste, animação, isso ajuda o usuário a navegar em uma página pela ordem correta projetada. Por exemplo, o olho vai notar rapidamente os elementos que são maiores, ou com maior contraste, com cor de funda, ou mesmo com cor quente.

.

Morris também ofereceu conselhos sobre o uso de cores:

.

“O vermelho e o verde não deve serem vistos sem uma cor entre eles” – Tendo cuidado na combinação de cores. Na verdade o Morris foi simplista, já que poderia ter citado que vermelho e verde, ou vermelho e azul são cores opostas, essas cores se não tiverem uma linha branca entre elas (só exemplo) causará confusão no cérebro vulgo ilusão de optica.

Utilizando uma abordagem minimalista para o o número de cores. Ou seja, não faça do seu produto um arco-íris a menos que você saiba o que está fazendo.

Morris pede aos designers escolherem uma escala de 1 a 5, 1 correspondente a não ter uma experiência em UX e 5 se refere a quem já tem uma experiência basta e sabe como utilizar as cores. Assim se um desenvolvedor acha que não tem talento para a arte, mas que ele necessita tomar uma decisão sobre uma determinada interface, que utilize então apenas uma cor. Se alguém pensa que é um bom designer então ele merece usar escala de 3 cores, mas se ele é um especialista já pode usar 5 horas e bem, ele já sabe que pode fazer isso.

A cor de fundo deve ser neutra, branco, cinza, marinho, preto, marrom escuro, porque essas cores trabalham muito bem com a maioria das demais que estarão na página.

Se o indivíduo não sabe quais cores usar deve-se usar tons de uma mesma cor.

Utilize um desses sites para tirar boas combinações para uma aplicação.
http://kuler.adobe.com/

http://colourlovers.com

Ambos possuem boas aplicações em Air para utilizar no seu desktop.

Preste anteção aos problemas de visão, mais precisamente dautonismo que afeta 10% dos homens, segundo Morris.  O site  vischeck.com é útil para garantir que o design é apropriado a esse respeito, e não deve se confiar somente na cor para transmitir informações.

Cores frias, azul, verde – tendem a diminuir quando usadas em relação ao espectador, da mesma forma, cores quentes, o inverso, tal como vermelho, laranja,. Então utilize apropriadamente as cores para o que deseja, como no caso de algo que queira estar próximo do espectador utilize cores quentes.

Bom, essa é a visão do Morris, não há nada novo aí, mas espero que ajudem a agregar mais conhecimento sobre o tema, acontece que, novamente isso não é UX, isso é os passos para se garantir uma boa UX, lembrando que UX é de fato a experiência do usuário, para se atingir a mesma é necessário técnicas e essas são as mais básicas que devem ser respeitadas para o mínimo de sucesso.

_________________________________________

Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath

Twitter!

Tudo o que você sempre quis saber para começar a criar sua skin.

Esse post é para você designer, que atualmente está sonhando em criar uma skin para app de Iphone ou Ipad e simplesmente não sabe como fazê-lo, ou porque não sabe inglês, ou porque não encontrou material a respeito.

Lá fora (na gringa) há muito material a respeito, mas infelizmente nem todos são objetivos e respondem as perguntas mais básicas.

Vamos supor que você já sabe alguma coisa sobre Iphone, afinal deve possuir um, sabe como desenhar uma skin, afinal entende de Fireworks, Photoshop, Ilustrator ou outro software gráfico (sem ser Adobe não recomendo…).

Então você chegou nas seguintes dúvidas:

Qual o tamanho da tela? Iphone 3G ou 4G tela de retina? Qual o procedimento certo para criar o design, já para Iphone 4 ou para 3? Entre outras muito comuns.
Em pesquisa para criar interfaces para esses gadgets aqui na DClick me deparei com essas questões, e como já as solucionei estou aqui para contribuir com esse material muito valioso.
Esse é o primeiro de muitos posts do mesmo tema. Em breve estarei ensinando também aos novatos na área de Design de Interface como criar uma bela skin para esses portáteis, e vou indicar material sobre o assunto.

Bem, chega de blá blá blá e vamos ao post.

Tamanho padronizado da tela e dos ícones

.

É possível que você já tenha lido a documentação da Apple sobre Iphone e Ipad Guidelines, são os padrões para a criação das skins. Caso não tenho lido aconselho a faze-lo, é o primeiro passo para entender como funciona esse mundo, no entanto, o conteúdo está em inglês,  se tiver dificuldades peça ajuda ao concorrente da Apple e utilize nosso amigo Google Translator, não será a melhor tradução do mundo mas com esforço você chega lá.

Iphone Guidelines

Ipad Guidelines

É possível ler este artigo sem ter o conhecimento acima?  Sim é, mas será melhor com a leitura dos padrões da Apple.

Quando comprei meu Iphone 4 no dia do seu lançamento (não peguei fila acredite) eu fiquei surpreso com a resolução da sua tela, mas logo veio algo a mente… como isso afetaria os aplicativos,  e não demorou até eu ver aplicativos com a resolução perfeita, e aplicativos com os famosos pixelados, sim, com um visual podre, literalmente falando. São os aplicativos que foram criados para a resolução 320 x 480px, todos os modelos anteriores a quarta geração de Iphone.  Claro que não eram totalmente ruins, porém muito da qualidade se perdia, e logo não demorou para  que a maioria deles fossem atualizados para a nova resolução de 640 x 960px.

Essa é a vantagem de quem desenvolveu em vetor, bastaram redimensionar suas skins para o novo tamanho e aplicá-las na app e então enviar o pedido de atualização ao usuário.

Quando você exporta os arquivos para Iphone ou Ipad geralmente é PNG. O Xcode (leia tópico a respeito), não considera o valor PPI (não confunda com DPI) quando você salva a imagem, portanto, para matar a charada siga as configurações abaixo:

Agora, um comentário importante sobre isso,  qual software utilizar? Eu particularmente gosto do Fireworks para a criação de Interfaces, esse software é fantástico e prático, mas se realmente quer ter facilidade com skins para Iphone e Ipad volte ao Photoshop, caso não seja usuário do mesmo, crie suas skins bases no Fireworks e salve com PSD, e depois aplique os efeitos e detalhes no Photoshop, ele é realmente uma máquina de guerra para esse assunto.
Nos futuros posts estarei falando melhor disso.

Supondo portanto que estamos falando do Photoshop, vejamos então algumas padronizações de configurações:

.

.

E quanto ao Itunes Store segue:
Ícone: 512 x 512 px (tif, jpg ou png, 72 dpi, RGB…)
Imagens iPhone: 320 x 480 px ou 640 x 860 px (tif, jpg ou png, 72 dpi, RGB…)
Imagens IPAD: 1024 x 768 px (tif, jpg ou png, 72 dpi, RGB…)

Agora a grande questão, criar uma Interface pensando na resolução do 3G (terceira geração) ou 4G (quarta geração)?

Apesar da sua resposta parecer óbvia, e ela até é, você certamente disse a si mesmo “criar skin para a quarta geração, evidente… não precisa ser guru para saber isso.” Ela não é a resposta correta acredite.

Antes de mais nada a pergunta, você já possui um Iphone4? Se sua resposta é não, relaxe, mas será necessário você entender através desse link as nossas preocupações:

Comparações entre tela 3G e 4G (Retina)

Como pode ver, as resoluções são drasticamente diferentes, o Iphone 4 tem uma resolução superior ao olho humano (segundo a própria Apple) e de fato é uma resolução impecável, a tela de retina .Utilize o mouse e percorra a rosa mostrada no Iphone nesse link que te apresentei…

Assim você vai pensar, “Então como não fazer para a melhor resolução?”

Simples, muito simples, porque quando você cria interfaces com resoluções maiores você tende a ser mais detalhista, e interfaces detalhadas quando forem redimensionadas a tamanhos menores vão dar problema, não será uma boa interface, não ficará com um belo padrão de visualização. Os pixels podem se confundir, criando até mesmo embaçamentos.

Portanto a melhor técnica é criar, obviamente tudo em vetor, na resolução de 320 x 480px, ver se está tudo harmonico, e então só depois redimensionar para o dobro, 640 x 960px. Confie, ficará muito melhor que desenhar diretamente para 640 x 960px, já tive algumas experiências ruins criando diretamente nessa resolução. Deixe para aplicar texturas caso queira faze-lo na resolução de 640, já as bases tem que ser vetorial.

E claro, agora sim não precisa ser guru para saber que se fizer em 320 x 480px sem ser vetor e redimensionar (que é o acontece com as aplicações sem suas interfaces atualizadas) ficará pixelado e granulado, tal com vemos nos exemplos abaixo.
.

.

Padrão de imagem na exportação

.

Como bom brasileiro sei que para tudo há um jeitinho, mas no caso de interfaces para iOS o jeitinho pode ser uma não aprovação na Apple Store, ou mesmo uma interface ruim.

Portanto não custa nada enfatizar, o padrão que você deve usar na exportação das imagens dos seus elementos é o PNG, na teoria o iOS pode exibir outros formatos, mas… na prática não ficará bom, o motivo é que o PNG é otimizado automaticamente no pelo SDK do iOS. Assim sendo, como estamos nosso software gráfico utilizado é o Photoshop vamos exportar em PNG 24 e com transparência.

.

Padrão de botões

.

Você já se deparou com aplicações cujos botões eram pequenos demais? Aquelas aplicações que para poder inserir um determinado evento o designer implementou um botão pequenininho que coubesse na interface a fim de executar a função desejada mas… que por vezes não era sensível ao toque?

Pois bem, seja bem vindo ao maravilhoso mundo daqueles que acreditam que pesquisa não serve para nada, a Apple padronizou os botões em 44 x 44px, apesar do rigor que a mesma tem na aprovação dos aplicativos muitos dos mesmos passam com botões inferiores a isso, e espero que você não seja um destes, afinal, você estará estragando toda a UX (leia artigo) da sua aplicação caso se meta a achar que um botão menor é melhor para o seu usuário, sendo que a Apple fez inúmeras pesquisas para definir o melhor tamanho, sendo esse, 44 x 44px o tamanho MÍNIMO recomendado.

.

O Mistério, como preparar os arquivos para o seu desenvolvedor

.

Sim, sua obrigação, e talvez a leitura desse texto inteiro seja por conta dessa preciosa informação, afinal você pensa “Fazer interface eu sei, design eu sei, conceito eu sei, mas como afinal eu devo exportar tudo isso para o desenvolvedor?”.

Eis a fórmula mágica, volte a ler os Padrões de imagem para a exportação. Sim isso mesmo, você apenas tem que fatiar os arquivos e enviá-los de forma organizada ao seu desenvolvedor, ele tratará de incluir isso através do XCode, caso você tenha interesse em agilizar esse processo e trabalhar em parceria com seu desenvolvedor de forma mais dinâmica, então terá que estudar o XCode, um bom primeiro passo para isso é o post que indiquei no começo do artigo do nosso colaborador Artur Fabri (@arturfabri), que explica como implementar uma skin em uma tabbar, incluindo formas de testar nas versões 3G, 4G e Ipad, é imperdível o Screencast dele, se você assim como eu é um pouco mais que um designer e gosta de fuçar em como as aplicações se comportam vai gostar muito da explicação dele.

Espero com esse artigo ter elucidado os primeiros passos para que você venha a criar interfaces para Iphone, Ipad , futuramente estarei falando aqui no Blog de Android também, bem como compartilhando métodos de criação de skins e as próprias skins (Guidelines) para download.

Espero que tenham gostado do artigo.

_________________________________________

Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath

Twitter!

Começamos este post afirmando que você ama UX, que você quer UX na sua vida a todo momento, a menos que… você seja um masoquista, e para atingir a satisfação você goste de experiências diferentes das quais a maioria das pessoas estão interessadas.
Portanto, a experiência que trataremos nesse texto é sobre a boa experiência, e se possível sobre a experiência maravilhosa…
A User Experience (UX) é mais comumente tratada pelo literal do seu nome, experiência do usuário, mas  afinal como essa matéria é de fato aplicada pelos profissionais da área de tecnologia e como é vista realmente.
O objetivo desse post é de maneira resumida (se você pensar em um livro) fazer você entender o que de fato é UX, o que não é UX, e como utilizar a UX em benefício próprio e do seu projeto.

Escrever sobre User Experience em milhares de páginas é fácil, isso tem sido feito a anos e as pessoas até hoje tem idéias diferentes sobre o mesmo tema, e poucos sabem definir com exatidão em poucas palavras do que afinal ele se trata. O difícil mesmo é trazer a informação correta e objetiva em um texto que é acessível a todos, e esse texto também é uma experiência pela qual você (usuário) está passando nesse momento, portanto espero que ele seja o mais agradável possível, e que cumpra sua função.

.

O que não é UX

Acredito firmemente que para explicar UX é necessário antes de tudo mostrar o que não é UX, e vamos por tópicos.

- Usabilidade
Não é UX, e apesar de todos confundirem essa matéria com UX ela não é a experiência do usuário, ela ajuda a melhorar drásticamente a experiência, mas ela em si não é a própria experiência, portanto vamos descartar a Usabilidade do termo UX e vamos inseri-la como parte do processo de UX.
É comum, muito comum por sinal, você ver os profissionais de usabilidade se apoderando do termo UX, certamente porque foram eles sem dúvida que fizeram renascer  essa idéia na área de tecnologia, e vamos entender por tecnologia nesse texto todo o tipo de aplicativo e interface disponível que possui uma interação com o usuário.
Se você é um arquiteto de informação pode estar se perguntando porque eu disse renascer,  já que a idéia a esse respeito é de que o termo foi criado através da Usabilidade e que são esses profissionais unicamente que se preocupam com o bem estar do usuário, mas não é bem assim como veremos mais a frente. Por hora vamos ficar com a firme noção de que usabilidade não é UX.

- Arquitetura de Informação
Sei  que há uma discussão eterna de que Arquitetura de Informação e Usabilidade são as mesmas coisas, não vou entrar no mérito,  para esse texto Arquitetura é a disposição e organização da informação, que gera é óbvio a usabilidade (ou não).
E porque Arquitetura de Informação não é UX? Ela organiza a informação de forma a gerar ao usuário uma melhor experiência, esse é o seu objetivo, mas será que sozinha é capaz desse feito? Quem já não se deparou com sites extremamentes funcionais (usabilidade) e bem organizados (arquitetura) e cujo layout era para lá de ridículo, para não dizer horrível, e por fim apesar de cumprir bem com sua função não gerava uma boa experiência.

- Design
Ah sim, Design… a maioria das pessoas ama essa matéria,  somos todos apaixonados  pelas coisas bonitas e pela estética, no entanto, o estético e o belo também devem ser funcionais, de nada adianta uma boa interface se não funcionar, e de nada adianta funcionar se você não for capaz de chegar onde você quer.
Certamente Design não é UX, e isso parecia óbvio para você, mas óbvio não é saber que tal matéria é importantíssima para a experiência do usuário, visto que, digo novamente, a associação de UX a Usabilidade parece a cada dia mais forte, e infelizmente é isso que está fazendo as pessoas não entenderem do que se trata o termo UX.

.

O que o mundo acha que é UX e porque nós pensamos diferente

Vamos frizar, vamos bater na tecla novamente, a maior parte das pessoas está pensando que UX é Usabilidade, não é incomum você ver gerentes de projeto, designers, arquitetos, todos substituindo o termo usabilidade unicamente por UX, dizendo equivocadamente “A UX do site está pronta?” tratando o layout, o design por esse termo, ou mesmo os wireframes, e por aí vai. Esse tipo de comentário faz a cada dia as pessoas banalizarem um termo que tem um grau alto de importância em um projeto.
Você cria aplicativos, sites, hotsites, para quem? Primeiramente ao cliente que te pediu, mas obviamente para um usuário que vai utilizar o sistema, esse usuário precisa ter uma boa experiência, ele precisa ter a sua satisfação atingida.
Nós não devemos pensar a User Experience como algo palpável, algo que pode ser visto, porque não pode, UX não é usabilidade, UX não é arquitetura, UX não é wireframes, UX não é o layout, design, etc.

.

Mas afinal, o que é UX?

Se alguém te fizer essa pergunta e você tiver que explicar em uma frase o que você diria? Apesar de parecer complexo, UX não é nada complexo, e se resume sim em uma única frase.

UX É CONCEITO.
Simples, não tem mistério, não tem milhares de terminologias para definir UX, ninguém é dono dessa matéria, e ninguém pode dizer que é seu criador. Isso porque UX por ser conceito é algo muito mais antigo do que os arquitetos de informação atualmente comentam, como algo novo, criado por eles, como disse anteriormente, eles fizeram renascer o termo, mas não o criaram.
E porque UX é conceito?
Você depende de diversas matérias para que a experiência do usuário seja atingida com satisfação,  é necessário uma boa arquitetura da informação, uma boa usabilidade, um bom layout, uma boa estrutura de dados (de nada adianta também uma programação ruim, banco de dados lento) etc, e de tudo o que for importante para que a aplicação funcione e seja agradável, que atinga todos os  objetivos almejados pelo usuário, isso certamente trará a ele uma boa experiência. Ok, mas para que isso aconteça é necessário estudar alguns assuntos, e vamos trazer aqui uma idéia superficial disso, mas o nosso objetivo aqui é fazer você entender de maneira rápida o que de fato é UX e porque as pessoas tem usado esse termo de maneira equivocada.

Com o que foi escrito até agora acredito que você já entendeu boa parte da idéia, percebeu que Usabilidade, Design, e outras matérias trazem algo concreto (que gera a UX), e que UX é algo abstrato, por isso UX é conceito, tais matérias são responsáveis por uma boa UX ou uma UX ruim, claro que, nosso intuito é termos uma boa UX,  mas acredito que a partir de agora você não mais vai chamar um wireframe de UX, ou mesmo uma layout de UX, pois percebeu que a UX é algo experimentado, você pode dizer “Essa interface não me parece trazer uma boa UX…” pois antes mesmo de a mesma ir ao usuário somos capazes de avaliar todo o conjunto da obra, e pensar se o nosso usuário vai de fato ficar satisfeito com a aplicação.
Mas tem algo que você talvez ainda se pergunte, porque estamos insistindo que UX não é algo novo, vamos então ao assunto.

.

História da UX voltando a Ergonomia

Poderiamos voltar na história da Bauhaus (escola de design) para tratar do assunto, mas isso estenderia demais o post, vamos resumir essa passagem.
Bauhaus é uma escola de design que se preocupou com ergonomia, em uma época em que as pessoas se preocupavam com produção, logo após a revolução industrial. As empresas faziam milhares de cadeiras, e quando tinham que pensar nos gostos do usuário apenas variavam a cor, então tinhamos milhares de cadeiras idênticas com cores diferentes, era azul, rosa, violeta e afins para todos os gostos, porém algo não era visto, o consumidor, e quem é ele? Ele é o usuário dessa cadeira, aquele que vai usá-la, então os designers da Bauhaus começaram a pensar na matéria de ergonomia, e a analisar como seria a cadeira ideal para um determinado tipo de usuário, e não só isso, mas para uma determinada tarefa que o usuário precisasse executar, logo a cadeira da sala não era igual a cadeira da cozinha e assim por diante. Estou sendo simplista.

Essa matéria foi criada pela Bauhaus? Não, claro que não, se a gente for voltar no tempo vamos chegar nos gregos e no seu estudo sobre simetria (porque o ser humano gosta do simétrico), e se voltarmos mais ainda vamos chegar na era da pedra… o homem sempre se preocupou com a UX, sempre se preocupou com a experiência do usuário, pois como disse, não somos masoquistas, pelo menos não a maioria de nós.

Assim sendo na web não aconteceu diferente, com a revolução tecnológica, com os milhares de sites surgindo, milhares de aplicativos, o mesmo erro voltou a acontecer, eram sites de todas as cores para todos os gostos, aplicações com botões azuis, rosas, vermelhos, mas poucos se preocupavam com a ergonomia desses sites e aplicações, e o que é a ergonomia na nossa área de tecnologia? Devemos pensar no tempo de exposição do usuário a aplicação, qual a finalidade da aplicação, que tipo de usuário majoritário temos para a aplicação, quais funcionalidades existem e como otimizar a informação ao máximo para que o usuário encontre o que necessita. Esse é apenas um resumo do resumo, a matéria é vasta, mas ergonomia para a nossa área existe, e hoje ela é chamada de UX.
Portanto não há nada novo aí, apenas o mesmo erro foi cometido e a mesma solução foi aplicada, tratar o usuário com o devido grau de importância.
Ok, mas você vai ainda perguntar, “Então como fazer uma boa UX?” com poucas palavras é difícil dizer, mas faremos o possível para que você entenda com um exemplo prático.

1. Curva de Aprendizado.
2. Curva de Satisfação.
3. Atender uma necessidade do usuário que ele desconhece.

Essas são as três chaves mestras para se ter uma boa UX, acredito que a primeira você já ouviu falar por todos os cantos mas a segunda talvez seja novidade, a terceira então… bom, vamos a explicação.

.

Curva de aprendizado

A curva de aprendizado como sabemos é o período que o usuário leva para entender um site ou uma aplicação, esse período deve ser curto, o mais curto possível, porém existem exceções, e explicaremos logo mais.
Primeiro vamos a um exemplo prático, vamos utilizar o Twitter para ser avaliado.
Não é incomum a frase “Ninguém pode explicar o sucesso do Twitter…”

Escreverei minha visão particular, como autor do post, eu de fato ouvi essa frase por diversas vezes e por milhares de pessoas, mas será mesmo que não podemos explicar rapidamente o sucesso dessa ferramenta fantástica?
Sim podemos.
Ela possui elementos já conhecidos do usuário, vamos a eles:
- SMS
- Blog
- Rede Social
- ScrapBook (tão conhecido no Orkut)

Você vai concordar que quando se acessa o Twitter pela primeira vez leva-se algum tempo até entender o que está acontecendo, mas esse tempo de aprendizado é curto, pois nele há elementos que você já conhece, tal como os mencionados acima, e rapidamente você já está utilizando a ferramenta.

Então chegamos a uma conclusão, o tempo de aprendizagem do Twitter é curto, e portanto ele oferece uma boa experiência nesse quesito.
Mas é necessário que sempre a curva de aprendizado seja curta? Em regra sim, mas como disse há exceções, elas acontecem quando por exemplo você cria uma aplicação para uma empresa utilizar internamente, ela poderá ter situações diferentes que o usuário desconheça, pois a empresa poderá oferecer treinamento a seus usuários, mas reforço, essa é a exceção, pois quanto menor for esse treinamento melhor também será a aceitação dessa ferramenta, e se não houve necessidade então de treinamento …

.

Nível de Satisfação

Hum, talvez você deva estar pensando em comida, ou talvez nem isso…  mas é fato, o ser humano precisa se satisfazer, e quando usamos uma aplicação não é diferente, é necessário um grau de satisfação para que voltemos a utlizá-la.
Quando lidamos com clientes eu digo que esse é o tema mais importante  e deve ser observado com cuidado.
Todo cliente necessita ter seu grau de satisfação atingido, ele tem uma expectativa em relação a aplicação que você está desenvolvendo, geralmente ele até já imaginou como é a interface dessa aplicação, então você tem duas soluções, ou mostra algo que ele vai olhar e dizer “ah, não era bem isso mas está bonito.” ou ele vai dizer “Fantástico, ficou melhor do que eu pensei”.
Acredite, não há meio termo, não vai existir a frase “Foi exatamente isso que pensei”, não mesmo, ou você supera as expectativas ou fica abaixo da média, quando você supera as expectativas ótimo, mas quando fica abaixo da média é que surgem os problemas.
Por conta do nosso primeiro usuário (o cliente) não ter atingido seu grau máximo de satisfação ele logo vai começar com frases bem conhecidas “não sei, talvez a gente possa mudar essa cor aqui.. “ ou “acho que precisa de mais texto”, ou ainda… “Vamos inserir alguns campos nesse formulário, estou achando meio pobre”, entre outros clássicos.
A culpa é dele? Não, o que aconteceu é que ele não atingiu seu nível máximo de satisfação e como todo ser humano ele vai tentar preencher  isso com alguma coisa, como não estamos tratando de comida, não basta só tomar um cafezinho e comer um chocolate…

Ok, mas não estávamos usando o Twitter como exemplo? Pois bem, voltemos a ele.
O nível de satisfação do Twitter é alto, é bem elevado, isso porque o usuário está usando uma aplicação que atendeu as suas necessidades, porém, resolvendo problemas de comunicação que ele desconhecia existir, vamos ao tema.

.

Atender uma necessidade do usuário que ele deconhece

O que é isso? Como atender uma necessidade que o próprio usuário desconhece? Ninguém sabia que era necessário criar a roda até que ela existisse, foi criada a partir de uma necessidade, mas desconhecida pela maioria.
Assim foi com o Twitter, ele sanou um problema de comunicação que a maioria das pessoas sofria na internet, a falta de informação objetiva, poder seguir pessoas sem qualquer vínculo ou comprimisso. Claro que, se você quer uma informação um pouco mais aprofundada vai procurar um post como esse, e se ele não te sanar todas as dúvidas é provável que você compre um livro ou faça novas pesquisas, mas é certo que o Twitter é muitas vezes o início de tudo (você pode inclusive ter chegado aqui através dele), filtrando milhares de informações e otimizando a informação de algo que corre na velocidade da luz, a internet.

Por isso, e pelos motivos acima descritos ele é um sucesso, os seus criadores Jack Dorsey, Biz Stone e Evan Williams fizeram o Twitter para atender suas próprias necessidades (a idéia mesmo foi do Dorsey), e quando isso acontece o resultado geralmente é atender a necessidade de outros tantos semelhantes.

Existem milhares e exemplos que podem ser usados como uma boa UX, tal como o Google, mas creio que você já tem como fazer suas próprias análises.

E para quem pensa que UX é Design (tópico para designers)…

.

Arte que se explica não é arte, é artifício

A arte deve ser sentida, a arte deve ser experimentada, cada qual terá sua própria experiência através do Design, mas seja ela boa ou ruim, varia de pessoa para pessoa, de público para público.
Portanto primeira passo, para quem é o design, quem é o nosso usuário, e quem é nosso público final.
Temos evidentemente dois tipos de usuários em algumas situações. Quando possuímos um projeto que nos é solicitado por um cliente então algo deve ser muito bem avaliado, seu primeiro usuário será esse cliente, ele quem utilizará a aplicação pela primeira vez, e então depois dele será o cliente do cliente, o segundo usuário e este é o mais importante, tanto para você quanto para o seu cliente.
Porém é necessário que você agrade gregos e troianos, é imprescindível que você atinja todas as necessidades do cliente, e quando possível demonstre que entende e conhece o cliente dele, que você se preocupa com o usuário final e por isso tais coisas devem ou não serem implementadas. Acredite, se você agradar unicamente seu cliente, e não o cliente dele, o seu cliente pode dizer hoje “fico maravilhoso”, e amanhã dizer “aquela aplicação que você fez não é boa, ninguém gostou… ninguém acessa.”

O Design não precisa ser explicado, o que precisa ser explicado é a disposição da informação, as cores, mas não o seu conjunto, não adianta ficar inventando coisas do tipo “isso causa uma sensação de fluidez” quando isso não é sentido nem por você e nem pelo usuário, é diferente dizer, “essa sensação causada por essa transição chamamos de fluidez e os usuários gostam disso”.
É óbvio que existem milhares de matérias que  o designer deve conhecer para fazer uma interface, desde semiótica a teoria das cores, mas não adianta ser acadêmico, é a experiência, o dia a dia que vai fazer você criar uma boa interface, não esquecendo que você também é um usuário, pense como tal ao ver sua própria “arte”.

Esse post é o resumo de uma palestra ministrada aqui na DClick, muito poderia ser comentado mas a objetividade em textos é muito mais complexa que na fala, pois aqui estamos consumindo o seu precioso tempo.

Assim sendo, vou finalizar com alguns mitos a respeito de UX, que se precisar de algum comentário pode postar sua dúvida que estarei a disposição para responder.

.

10 piores mitos a respeito de UX

- Mitos entre os Desenvolvedores

#1  O cliente não repara se o campo está  1px para a direita ou se está muito amarelo, o cliente quer saber se o aplicativo funciona.

#2 Não faz diferença se o canto é arredondado ou se não é, ninguém vai reparar nisto.

#3 A aplicação está lenta mas está funcionando, é isso que importa.

- Mitos entre os Designers

#4 O Cliente deve ser ouvido

#5 O Cliente é quem define as cores

#6 O usuário deve ser ouvido

#7 O layout é que faz vender o produto

- Mitos entre os Arquitetos de Informação

#8 Site acessível tem que ser “feio”

#9 Todas as páginas devem ser acessíveis em 3 Cliques

#10 Seu usuário é como você

Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath

Depois que criei o artigo sobre Flash e Nintendo Wii, mandei para alguns amigos para que testassem em seus equipamentos. Dentre eles, meu irmão teve a curiosidade de testar também em seu PlayStation 3.
Bom, eu já tinha conhecimento de que o PlayStation 3 tinha suporte ao Flash Player, restava saber a versão e de que como a aplicação pode ser utilizada. No caso do Flash Player, vi que ele suporta até o momento a versão 9 (PS3 9.0.159.0) e que rodará pelo browser(baseado no Mozilla – o NetFront) assim como no Nintendo Wii(baseado no Opera).
Veja você mesmo o exemplo criado para o Nintendo Wii rodando no PlayStation 3

Estou preparando mais alguns testes específicos para o PlayStation 3, se roda ActionScript 3.0, o uso dos botões e o novo PlayStation Move que vira com uma WebCam, ou seja, possibilidades interessantes com uso de realidade aumentada com a Flash Platform no PlayStation 3