Recentemente tive a projetar um par de páginas teaser para um cliente e um projeto pessoal, e isso me levou a pensar sobre o que exatamente faz para uma página teaser de bom - ou para ser mais preciso um "em breve" página que as empresas costumam colocar-se antes eles estão prontos para lançar seus produtos. Depois de uma cuidadosa pesquisa e muitos testes científicos na área nova marca de teaserology, eu desenvolvi um sistema patenteado Teaser Eficácia Análise ™ Matrix, que consiste em quatro elementos. A página do teaser perfeita tem pontuação elevada em todos os quatro eixos do seguinte:

• Memorização,
• Viralidade,
• Conveniência,
• Capacidade de coleta de dados.

Eu sei que "a capacidade de coleta de dados" não é bom Inglês, mas inventar novas palavras é uma das vantagens de ser um cientista. Como veremos, a maioria das páginas do teaser concentrar fortemente em dois ou três destes elementos, mas raramente atingiu todos os quatro.

Por que eu preciso A Teaser?

Mesmo que as pessoas parecem lançar um site teaser para qualquer coisa nestes dias, vamos passo para trás e pensar por que seria necessário um teaser. Afinal de contas, colocando um conjunto leva tempo e energia, e você poderia argumentar que o esforço seria melhor gasto no próprio produto.
Mas um teaser pode ir um longo caminho para garantir um lançamento bem sucedido. Sensibilização para o seu produto muito antes de navios faz sentido: as pessoas são mais propensos a interagir com o aplicativo, se eles estão um pouco familiarizados com ela, então deixá-los ouvir sobre isso logo (e tanto) como possível ajuda. O ideal seria criar um clima de antecipação, e fazer as pessoas olharem para a frente para a data de lançamento. As pessoas gostam de saber com antecedência sobre a próxima grande coisa, e você pode usá-lo para sua vantagem.

Uma ferramenta poderosa Motivar

Outro fator que não é tão óbvio, mas talvez ainda mais importante é a motivação. Quando você está trabalhando duro em algo, sem qualquer garantia de sucesso, duvidar de si mesmo e perdendo a motivação é fácil, e esta circunstância, muitas vezes leva as pessoas a abandonar projetos promissores de outra forma.
Sensibilização e recolher endereços de e-mail longas antes do lançamento faz duas coisas para combater esta falta de motivação. Primeiro, ao colocar o projeto lá fora, você faz muito mais difícil para si mesmo para sair, porque nós todo o ódio de decepcionar as pessoas. Em segundo lugar, o pré-registo usuários mostra que há demanda real para o que você está construindo, que vai um longo caminho a silenciar essas dúvidas roer. Neste contexto, o teaser é uma parte vital da estratégia de qualquer produto na Internet.
Agora que sabemos o porquê, vamos olhar para o como, e analisar algumas estratégias.

Página Estratégias Teaser

Criar uma identidade forte

Como dito, a primeira dimensão de um teaser bom é memorização. Uma maneira de conseguir isso é com uma marca forte. Por "marca", quero dizer todos os atributos visuais que as pessoas associam com o produto: logo, cores, estilo, etc Depois de lançamento, o site poderia terminar acima de olhar muito diferente do que a página teaser, assim que ter uma marca forte é uma ótima maneira de manter a continuidade.
Muitos sites combinar um logotipo atraente e esquema de cores fortes para estabelecer a identidade da marca, sem sequer lhe dizer o que eles fazem. Não tem que ser apenas uma cor ou um logotipo, no entanto.

Como para Piictu , nada em sua provocação se destaca à primeira vista, mas o tratamento dado ao projeto total (a partir do padrão de fundo sutis para a combinação de tipos e cores) é memorável em si mesmo, colocando o aplicativo em uma classe própria .
Talkbee (veja a imagem abaixo) é um projeto pessoal meu. Eu decidi que queria um desenho forte com cores brilhantes e um logotipo memorável para diferenciá-lo da competição.

O logotipo é destaque no Talkbee, e toda a página é projetado em torno dele.

Use uma Gimmick

Um projeto supera detalhes ainda marca grande: um truque, algo especial que as pessoas não tenham visto antes. Um dos exemplos mais famosos disto foi a página teaser para Silverback , que incluiu uma CSS efeito de paralaxe (você ainda pode ver o efeito no site atual, se você redimensionar a janela do navegador). O site se tornou viral nos círculos sociais e tornou-se imensamente popular com a força desse truque CSS pouco sozinho.

O Kickoff a página do teaser apresenta uma ilustração sutil, mas agradável e uma caixa pequena de assinatura de e-mail ..
Uma técnica popular de que você poderia usar para conseguir um "gimmick" é animações, hoje geralmente criada com transições e animações CSS CSS. Animações podem rapidamente obter esmagadora e frustrante em "real" sites, mas eles são apropriados em pequenas doses em teasers. Exemplos recentes de teasers com animação são Cloudring e Kickoff .

Ben o Bodyguard você desenha com contação de histórias.
Outra técnicas interessantes é a utilização de rolagem vertical para contar uma história. A criança do poster para este certamente é o Ben Bodyguard que não fornecer todas as informações de imediato, mas sim se desenrola uma história utilizando animação e rolagem.
Uma idéia muito semelhante foi usado por Dayri e do belo Youzee . A técnica é bem sucedida porque contar histórias ajuda as pessoas a dar sentido ao seu ambiente de uma maneira lógica e linear. Uma história linear ganchos-nos muito mais eficaz do que fatos desconexos.

Aproveite o poder dos círculos sociais

Um desenvolvimento mais recente e interessante no projeto de "vir Sooon" páginas é incluir mecanismos viral no processo de pré-registo em si. A forma mais simples disso é um simples "Tweet this page" botão na página.
LaunchRock , um serviço que lhe permite gerar rapidamente uma página teaser de seu próprio país, leva isso um passo adiante. Após o registro de um site LaunchRock-powered, o usuário recebe um link personalizado para o teaser. Quanto mais pessoas se registrar através deste link, quanto mais cedo o usuário obtém acesso ao site. Na verdade, LaunchRock se usa esta técnica: a fim de criar o seu site provocação próprias através LaunchRock, você precisa obter três outras pessoas para se inscrever para o serviço ... Confuso ainda?

O teaser de Cowritable , alimentado por LaunchRock.
Outra idéia interessante é usada pelo "rei do viral sign-ups" Dabble.in . Partilha de ligação Dabble.in 's não vai ter acesso mais cedo. Em vez disso, se várias pessoas a pedir mesmo nome de usuário quando se inscrever (digamos, "John"), então quem recebe mais pessoas para se inscrever ganha o nome de usuário, enquanto os outros têm de se contentar com alternativas menos desejáveis ​​(como, digamos, " John1986 ").

Dabble.in permite que você ganhe o seu nome de utilizador preferido.
Se você preferir não ir a esses extremos, em seguida, "Tweet" simples e "Like" botões ainda são uma boa maneira de incentivar as pessoas a espalhar a palavra. Claro, o que é mais fácil para os visitantes a partilhar o seu link, mais eles vão fazê-lo.

Dar algo de volta

Provavelmente a maneira mais eficaz de fazer as pessoas partilham o seu teaser é para não apenas ajudá-los a reservar um lugar especial, mas também dar algo em troca. Por exemplo, se o suficiente de seus amigos se inscrever, Fab.com dá-lhe até US $ 50 em crédito website.

Fab.com sabe que nada motiva as pessoas como o dinheiro.
Mas você não tem para oferecer dinheiro. Você pode imaginar todos os tipos de ofertas: ícones livres, temas WordPress, etc Mesmo melhor, oferecer o produto em si. Por exemplo, para cada pessoa que você se referir a seu serviço, Dropbox créditos você quer com o armazenamento extra. A melhor parte é que esta estratégia não vai te custar nada até que você realmente lançado e, mesmo assim, porque é seu próprio produto, os custos permanecem baixos.

As pessoas fazem Want It

Uma palavra de advertência. Não importa o quão inteligente o truque viral, não importa se as pessoas não querem realmente usar o seu app. Tão inteligente como Dabble.in 's processo de inscrição é, nada sobre as dicas de site em que o aplicativo realmente faz. O efeito é que muitos usuários podem achar nenhum incentivo para compartilhar o teaser, porque não está mesmo certo porque eles querem ter acesso ao site.
É por isso que a grande maioria dos teasers falhar: eles simplesmente não fazem você quiser usar o produto. A solução fácil é simplesmente chegar e dizer que seu produto faz. Screenshots mostram, postar um vídeo curto ou escrever alguma cópia do assassino.

Youzee teaser "s é tão cheio de olhos doces que você não pode deixar de ficar curioso sobre o app.
Mesmo se você for restrito em quanto você pode dizer sobre o produto, você ainda precisa fazer tratamento de pessoas. Você pode fazer isso através de um design excepcional, como Piictu, Youzee e Kickoff fazer. As pessoas irão naturalmente supor que, se o teaser é bem desenhado, o produto será, também.

A coleta de dados

Claro, se o teaser é bem sucedido e vai viral, você vai enfrentar outro problema: o que fazer com todos esses visitantes? A coisa mais fácil seria apenas para coletar endereços de e-mail e adicioná-los à sua lista de discussão. Você pode usar serviços como MailChimp ou Campaign Monitor para gerenciar sua lista. Ambos os serviços se torna mais fácil para incorporar e estilo de forma simples em sua página, e então você deixar o resto para eles.

Prefinery promete fazer você mais feliz através da remoção de sondas alienígenas de seu cérebro.
Você também tem opções mais avançadas. Por exemplo, Prefinery promete agilizar o processo de pré-lançamento, cuidando de tudo, desde a coleta de e-mail para gestão beta. Mas a obtenção de dados não significa, necessariamente, a recolher endereços de e-mail. Você poderia poll visitantes em sua página do teaser usando um serviço como KISSinsights , ou usar Olark para permitir que os visitantes conversar com você em tempo real.

Um modelo Teaser

O teaser deve ser tudo sobre o seu produto e deve ser adaptada às suas metas. Dito isto, eu projetei um modelo genérico para você estudar, adaptar e usar como está em seu próprio projeto. (Graças a Sharypic por me deixar usar as suas imagens.) Você pode baixar e usar o modelo PSD gratuitamente em todos os seus projectos privados ou comerciais.

Baixe o PSD (. zip, 1,6 MB).

Ir mais longe

O teaser é apenas uma peça do puzzle. Outras partes importantes de uma campanha de pré-lançamento de sucesso são uma conta de Twitter, Facebook, blog e outros. Ao contrário de uma página teaser, que é geralmente um meio só de ida, as pessoas podem responder aos seus tweets e deixar comentários em seu blog. Estes canais são importantes porque ajudam a obter feedback sobre novas idéias e talvez até mesmo curso correto para direcionar melhor o seu mercado.

Lembro-me de quando nos conhecemos. Nós nos demos bem instantaneamente, e não demorou muito para que eu estava apaixonada. Eu apresentei a minha família, e todos eles a amava também. Inferno, eu mesmo convencido de minha esposa que ela era perfeita. Nós fomos felizes juntos agora por anos. Passei uma boa parte do meu dia com ela e, sim ... às vezes ela se junta a minha esposa e eu na cama. Embora, dormir não muito é feito, eu estou normalmente muito ocupados estudando as curvas .
Salve sua letra escarlate. Se você já leu uma parte - Engenharia de Relacionamento: atração Projetando - você sabe que eu não estou falando de algum caso. Eu estou descrevendo o meu relacionamento com a Apple e seu enorme quantidade de engenhocas. Mesmo quando não é prático, eu ainda me pego querendo mais recente iWhatever Apple.

O beijo, Gustav Klimt (Imagem: Wikipedia )
Parece que eu não estou sozinho neste vício, de acordo com uma pesquisa recente , 74 por cento dos compradores iPad já possui um Mac e 66 por cento deles próprios iPhones. Não só produtos engenheiro da Apple maravilhosa, eles também engenheiro de relações extremamente fortes com seu público.
Em uma parte , exploramos as maneiras pelas quais marcas faísca nossa chama proverbial e levar-nos interessados ​​em seus produtos. Aqui vamos investigar o que mantém a chama viva e converte o nosso interesse em amor e possivelmente até mesmo obsessão.

Momento

Manter um relacionamento de longo prazo não é fácil, as coisas podem facilmente tornar-se obsoleto. Aparência e personalidade são cruciais no desenvolvimento de atração, mas as pessoas precisam mais de um relacionamento sério Para criar uma ligação forte e duradoura, outros dois elementos são necessários:. Simplicidade e recompensa.
Simplicidade e recompensa dança um delicado equilíbrio. Cada um deles influencia o impacto do outro. Se o relacionamento é muito simples, suas recompensas são dulled; muito difícil, ea relação pode quebrar. Alcançar uma harmonia entre os dois vai construir uma dinâmica que mantém a relação em movimento.
A frente e para trás da simplicidade e recompensa cria uma onda de satisfação, que as pessoas, sem dúvida, quer montar. Selecione marcas estão a fazer ondas enormes por implementar esses princípios para criar experiências emocionante e envolvente. Vamos examinar alguns dos fatores que determinam a simplicidade e recompensa.

Simplicidade

Relações sofisticadas são o produto da simplicidade Você pode começar um relacionamento com alguém do outro lado do mundo, mas sua sofisticação permaneceria bastante juvenil;. A distância faz com que seja complicado. No entanto, se essa pessoa mudou-se do outro lado da rua, o seu relacionamento teria mais oportunidade de florescer.
Dificuldade é inevitável em relacionamentos, mas um laço raramente vai sobreviver disputa contínua. Então, nós gravitar em torno de pessoas que são fáceis de se conviver. Este critério é definido em relação diferentes: proximidade geográfica, o fluxo de conversa, a harmonia de crenças e assim por diante.
Simplicidade é ainda mais importante quando se trata de produtos que escolher. Nossa avaliação de simplicidade com um produto muitas vezes é mais volúvel do que com uma pessoa. Isto é especialmente verdadeiro na internet onde as opções são abundantes e apenas um clique de distância. É nossa responsabilidade como designers para garantir que cada aspecto da experiência tem o mínimo de fricção possível.
É fácil confundir a complexidade e sofisticação. E muitas vezes, produtos e interfaces são feitas desnecessariamente complexa com características estranhas. Como designers, precisamos reconhecer que uma experiência verdadeiramente sofisticado é aquele que transforma a complexidade em vez de acentuar-lo.

Apple vs Microsoft

Vamos comparar as páginas de suporte da Apple e Microsoft e obter uma análise de fricção simples - uma avaliação de como é fácil para um usuário para alcançar um objetivo. Vamos supor que o usuário chegou a esta página precisa de alguma ajuda com o seu sistema operacional. Áreas do contato oferecendo uma página com humanos têm sido destaque na cor verde para indicar baixo atrito, uma vez que coloca a resolução de problemas nas mãos da empresa. Áreas amarelas indicam mecanismos de auto-ajuda, o que aumenta o atrito suave. Se uma área é irrelevante ou oferece ajuda muito pouco, tem sido marcado em vermelho.

Site de suporte da Apple

Site de suporte da Microsoft

Apple oferece menos atrito no seu processo de suporte ao cliente e, e ao fazê-lo, fortalece as relações com seus clientes. Eles oferecem mais opções de auto-ajuda e mais formas de contato com muitos uma pessoa real. É interessante que a Microsoft dedica quase metade de sua página para empurrar produtos, mídia social e notícias. Eles ignoram o fato de que alguém está indo lá para ajudar. É como tentar confiar em um amigo, mas em vez de oferecer orientação, pedir-lhe para comprar alguns biscoitos Girl Scout e sugerem que Mints fino gosto ainda melhor congelado. Isso torna as coisas difíceis e fere o relacionamento de longo prazo.

Netflix versus Blockbuster

Iniciado em 1985, Blockbuster, uma vez correu supremo como o gigante aluguer de mídia. Tijolo e argamassa lojas em todo o país ofereceu um acesso conveniente ao cinema. Em vez de comprar um filme, você poderia simplesmente alugá-lo. Parece trivial hoje, mas a idéia era novidade na época.
Blockbuster cresceu rapidamente em um império multi-bilionária, com milhares de lojas em os EUA e dezessete outros países. No entanto, a Blockbuster está em bancarrota do capítulo 11. Por quê?
Consumidor precisa impulsionar a evolução de simplicidade, e Blockbuster não conseguiu lidar com as complexidades no seu modelo de negócio. Por que deveríamos ser obrigados a dirigir até uma loja para pegar e devolver os filmes? Por que aluguel de filmes seja tão caro? E por que devemos ser cobrados juros de mora? Netflix abordadas estas questões, e deu um salto evolutivo, aproveitando o poder da web.
Serviço Netflix-mail by-aluguer revolucionou a indústria. Navegação escolhas filme em seu computador de casa é muito mais fácil do que ir a uma loja só para realizar o filme que você quer está fora de estoque. Netflix porque ofereceu uma assinatura em vez de um pay-as-you-go modelo, eles removeram ainda mais complexidade do processo, eliminando datas de vencimento e taxas atrasadas.
Ao contrário da Blockbuster, Netflix não apenas mudar a indústria uma vez e cavalgar a onda. Eles continuaram a inovar. Perceber as complexidades no seu modelo de negócio próprio, eles introduziram uma nova solução para simplificar ainda mais as coisas: sob demanda streaming. Os membros podem transmitir instantaneamente um filme para o seu computador de casa, celular, iPad consola de jogos, DVD player ou um dos muitos outros dispositivos. Através da remoção de atrito, eles construíram relacionamentos mais fortes com seu público.
Netflix e Blockbuster ambos oferecem a mesma experiência: entretenimento. No entanto, Netflix fez o processo de alcançar essa experiência muito mais simples. A evolução de uma indústria é impulsionado pela demanda, mas determinado pela simplicidade. Netflix sabia disso, e se tornou um blockbuster própria.

Para resumir

• Relações simples são relações sofisticados.
• A análise de atrito pode ser uma ferramenta eficaz na medição simplicidade.
• Sobrevivência depende de eliminar o atrito com a experiência do usuário.
• Mints fino bom gosto fora do freezer.

Recompensa

Relações são emocionantes, especialmente nos estágios iniciais de namoro. Temos toda uma hierarquia de recompensas para alcançar. Em alguns relacionamentos, as recompensas são puramente físico, enquanto outros vão mais fundo e oferecer recompensas, tais como casamento, filhos e parceiros de bingo.
A satisfação de uma recompensa é impulsionado pelo desejo. O desejo mais forte, maior a satisfação do. A fim de construir o desejo de alguém, deve haver algo de concreto que lhes falta. Publicidade tradicional, muitas vezes apresenta uma celebridade sexy usando seus produtos. Além de seu sex appeal, essa técnica também apresenta déficits numerosos que desejamos preencher. Podemos falta do produto, mas o mais importante, falta de celebridades. Fama foi elevada à categoria de virtude dentro de nossa sociedade, e é percebido como extremamente gratificante.

Por um produto em paralelo com uma celebridade, marcas visam aumentar a satisfação percebida de seus produtos (para saber mais sobre isso, pegue uma cópia de Influência Cialdini ). Você pode ter tido nenhum desejo anterior para o produto, mas o anunciante revelou algo que falta, e que desencadeia a falta de emoção do desejo .
Outra forma comum de aumentar a satisfação é através do desafio. Nós, como seres humanos, o amor de um bom desafio. Quebra-cabeças, esportes, jogos de vídeo são mesmo todos os desafios desnecessários que de bom grado trazer para nossas vidas. Derrotar um oponente, seja de concreto (por exemplo, uma adversária equipe de esportes) ou mais abstrato (por exemplo, resolver um enigma), oferece uma sensação de satisfação.
Desafio deve ser cuidadosamente gerido, porque vai contra o poder de ligação de simplicidade. Desejo vai aumentar à medida que as coisas se tornam mais difíceis, mas só até certo ponto. Uma vez que o grau de dificuldade supera a satisfação antecipada, as pessoas ficam frustradas. E frustração pode virar o desejo das pessoas para a recompensa em desejo para o seu desaparecimento.

Call of Duty

A indústria de videogames é, sem dúvida o implementador de maior sucesso da metodologia desafio. A maioria dos jogos previstos um sistema de recompensa hierárquica, que recompensa os jogadores para alcançar os objetivos determinados - o objetivo mais difícil, maior a recompensa. Este sistema cria um vínculo muito forte com o jogador.
Chamada da Activision of Duty é uma das franquias de videogame mais quente no mercado. A última versão do Call of Duty: Black Ops definir o primeiro dia recorde de vendas não só para um jogo de vídeo, mas para toda a indústria do entretenimento. Na verdade, ele passou em 360 milhões dólares na América do Norte em um dia, que é mais de quatro vezes o que Avatar feito em sua semana de estréia.
O jogo possui um modo história convincente, mas o aspecto de construção de relacionamento real do jogo é o seu modo multiplayer. Cada jogador começa com um conjunto limitado de armas e perks. Eles são recompensados ​​com a moeda do jogo para atingir diferentes objetivos, que podem ser usados ​​para desbloquear novas munições, atualizar anexos arma, personalizar camuflagem e até mesmo modificar a pintura da cara. Nivelando-se ao mais alto posto e destravar tudo requer uma quantidade significativa de jogo, mas isso é só o começo.

Fonte: Chamada de ícones Dever
Depois de ter sido promovido ao posto mais alto, você terá a opção de ir "Prestige" e começar do zero. Você sacrifica tudo o que você já desbloqueado em troca de uma nova medalha ao lado do seu nome. A medalha é nada mais do que um ícone, mas, dentro da comunidade, é um símbolo de orgulho. Não só este conjunto os prós além da n00btubers, ele constrói uma obsessão que mantém os jogadores voltando para cada lançamento da série.

Groupon

Ser frugal é hip hoje em dia. Graças a empresas como Groupon e LivingSocial, cupons foram revitalizados em grande forma. Em vez de cortar os anúncios de jornais circular, no entanto, as pessoas recebem diariamente em seu e-mail.
Levando a embalagem é Groupon, que oferece um negócio-a-dia das empresas locais. O que começou em Chicago, com um cupom de pizza meia-off disparou em um movimento mundial com mais de 35 milhões de usuários. Então, como tem Groupon começou como uma mania sobre algo tão simples como um cupom? Simples ... criando um baixo atrito, sistema de recompensa alta, para o consumidor e varejista.

Groupon é capaz de oferecer descontos para cima de 90% de desconto usando um mecanismo conhecido como o "contrato de seguro." Cada loja oferece um desconto de alto nível através Groupon, mas apenas que homenageia desconto se um determinado número de pessoas comprá-lo. Groupon, então, tomar um corte de 50% para facilitar. Se o número de compras não for cumprida, o negócio é off e todos que compraram o cupom recebe seu dinheiro de volta.
Este "não pode perder" sistema incentiva as pessoas a agir rapidamente. Não só o temporizador de validade adicionar um senso de urgência, mas o fato de que um certo número de pessoas devem participar acrescenta incentivo para compartilhar a oferta com amigos e familiares.
Groupon também oferece uma recompensa de US $ 10 para convidar um amigo. Eles poderiam ter simplesmente pediu às pessoas que indicar um amigo, mas a recompensa torna ainda mais atraente. No entanto, a recompensa só podem ser resgatadas após o amigo faz uma compra no Groupon. Este o incentiva a incomodar constantemente os seus amigos sobre o serviço, uma vez que agora você tem uma participação em suas ações.
Groupon é um exemplo elegante de mecânica de recompensa em ação. Incentivos urgência aproveitamento, contratos de seguro, e social é uma poderosa forma de criar milhões de relacionamentos. Em última análise, no entanto, o sistema baseia-se no equilíbrio de recompensa e complexidade. Oferecendo grandes recompensas rende grandes recompensas.

Para resumir

• Recompensas aumentar o envolvimento, mas somente se a satisfação antecipada é maior do que a dificuldade exigido em alcançá-la.
• Dificuldade irá aumentar a satisfação antecipada a um ponto. Se o limite for quebrado, no entanto, rapidamente vira satisfação à frustração.
• Déficits delineando invoca o desejo de alcançá-los.
• Mecânica de jogo agradável e construir dificuldade incentivar a participação.

Fragilidade

O amor é precioso. Independentemente de quanto tempo e esforço é colocado em um relacionamento, permanece frágil. Fazemos todos os esforços para preservá-lo: nós adaptar nossas vidas em torno da outra pessoa, nós comprá-los presentes para mostrar o que nós nos importamos; sacrificamos por causa deles. A idéia de que a relação pode acabar abruptamente nos mantém em um estado de cuidado e preservação.
Atuamos também com uma mentalidade de preservação com os produtos que amamos. As pessoas adoram embalar os seus dispositivos móveis em casos elegante, designer. Eles têm uma relação estreita com seu telefone, e descascar para fora o dinheiro extra para um caso que ajuda a preservar a relação.
Honestamente, quantas vezes tem um caso realmente salvou o seu dispositivo a partir de um desaparecimento de outra forma irreparável? As chances não são, muito frequentemente. No entanto, o mercado de acessórios móveis está crescendo. A Apple está lucrando com o must-have-a-caso com a sua síndrome de Tampa Inteligente feitos especificamente para o 2 iPad. Alguns estimam que a tampa do novo Smart pode anel em US $ 1 bilhão para a Apple em 2011.
Ainda assim, você não pode ajudar, mas pergunto por que um mercado tão grande tem sido construída em torno da preservação dos dispositivos que só são projetados para durar por um par de anos. Acredito que tem a ver com o desenho de fragilidade superficial.
Por que o iPod tem um back espelhado? Por que não um case de alumínio escovado como o iPad? Porque a superfície espelhada é muito frágil. É difícil até mesmo levar um iPod fora de sua caixa, sem riscá-la. Arranhões na parte de trás não afetam o desempenho do dispositivo, mas eles afetam a nossa percepção dele. Essa fragilidade é superficial obsolescência planejada eficaz, que é a força vital da indústria de tecnologia.
Obsolescência planejada é, essencialmente, a engenharia de um produto para ter uma vida útil pré-determinada. A esperança é ligar as pessoas em compras repetir uma vez que o produto é considerado inútil ou obsoleto. Este conceito não é novo. Foi dirigindo lucros e inovação em diversas indústrias - de aparelhos para a moda - desde a década de 1930.
Às vezes, esta técnica realmente impede que você use o produto por mais tempo. Por exemplo, as baterias de lítio na maioria de nossos dispositivos eletrônicos utilizam circuitos integrados para restringir o número de vezes que a bateria pode ser recarregada. Mesmo que a bateria é capaz de uma recarga completa, o chip integrado evita-lo.
Obsolescência outras vezes é tudo uma questão de percepção. A indústria da moda se baseia em estações e modismos de ditar quando você deve comprar roupas novas. Empresas de software usam controle de versão para implementar novos recursos, o que o coloca atrás da curva da inovação.
Mesmo a indústria de design Web depende fortemente de obsolescência percebida. Tecnologias web evoluem tão rapidamente que o uso de algo que foi hip no ano passado poderia torná-lo obsoleto este ano. "Seu site é construído em HTML5 XHTML e não? Gasp! "

É fácil de ver obsolescência planejada como uma prática antiética e, em alguns casos, pode ser. Entretanto, o uso de forças deste marcas tática para respeitar o fato de que sem nós, eles não podem sobreviver. Este exorta-os a agir com responsabilidade e para manter o ritmo com a inovação. Tudo volta ao equilíbrio entre simplicidade e recompensa. A atualização é uma dificuldade, mas vamos fazê-lo se as recompensas são altos o suficiente.

Angry Birds

A franquia Angry Birds é um excelente exemplo de obsolescência feito, respectivamente. Como a maioria dos jogos, o produto obsoletes quando alguém tenha completado todos os objetivos. Para alguns, isso significa terminar todos os níveis. Para outros, é necessário ganhar três estrelas em cada nível. Outros ainda continuarão a desempenhar, até que tenha adquirido todos os bônus escondidos. Eventualmente, um jogador vai bater a sua ideia de "completo" eo produto se torna obsoleto em sua mente.

Expansões pode rejuvenescer uma relação de outra forma obsoleto. Raiva packs de expansão Birds servir como um reinício do ciclo de amor. Rovio (os criadores do Angry Birds) poderia liberar atualizações para o jogo para oferecer novos níveis ou desafios. Em vez disso, eles liberam separados stand-alone aplicações, exigindo que os jogadores façam novas compras. Este é um preço pequeno para manter um relacionamento amoroso.
Esta forma de obsolescência coloca o poder nas mãos do consumidor. Não forçar uma atualização. Ele simplesmente oferece uma maneira de manter o relacionamento vivo. Se a marca continua a oferecer experiências gratificantes, não há necessidade de forçar a obsolescência. As pessoas vão continuar a actualizar fora da escolha.

Para resumir

• Fragilidade fortalece relações e promove uma mentalidade de culto.
• Poderes obsolescência a roda da inovação.
• Rompimentos (obsolescência planejada) devem ser tratados, respectivamente, para trazer o público de volta. As pessoas devem querer atualizar, e não ser forçados a isso.

Conclusão

Relacionamentos são as peças do puzzle da nossa vida. As boas relações se encaixam no quadro maior, as más são deixados de lado. Os laços que fazemos com as pessoas correm paralelas às de produtos. Marcas que nutrem relacionamentos tornam-se parte integrante da experiência humana e garantir sua própria sobrevivência no mercado.
A web é o matchmaker mais prolíficos de sempre. Como designers, desenvolvedores e especialistas em digital, temos a responsabilidade de compreender e respeitar as relações que construímos através de nosso trabalho. As pessoas querem produtos que olhar sexy, e muitos designers têm se tornado muito bom em faíscas que o interesse inicial. No entanto, isso é apenas parte da batalha. Relacionamentos de longo prazo exigem design em um sentido muito mais amplo do que apenas visuais, eles são interativos e experiências on-going, que precisam ser alimentadas. Você namoraria o seu produto? Você se casaria com sua marca?

De acordo com Brandweek , "as marcas são o check-out expresso para as pessoas vivendo suas vidas a uma velocidade cada vez maior. Este artigo mostra como e por que, para adicionar "app"-como ícones para seus sites para vários displays browser móvel e desktop, de forma clara e elegante identificar o seu site com um ícone que se destaca da multidão.

Logo Presentation And The Nine Básico Movimentos Ballet

Quando eu era um garoto crescendo na América rural, nós só temos quatro canais na televisão, todas as filiais locais das quatro redes nacionais (sim, quatro, você está esquecendo PBS, que eu só assisti quando eles fizeram promoções de dinossauro). As estações ABC e CBS veio em bastante claro, se você ajustou o "orelhas de coelho" antenas apenas para a direita, e envolveu tinfoil neles.

Não muito longe do que sentado na nossa sala de estar. (Crédito da foto: David E. Bowman ., usado com permissão)
Estação NBC veio dentro sobre os novos canais de moda e de certa forma incompreensível UHF - tivemos que realmente mexer um mostrador que parecia um rádio velho seletor para sintonizar-lo dentro Esse canal sempre foi carregado de estática, e exigiu não só de papel alumínio sobre o coelho ouvidos, mas às vezes precisava do meu irmão ou me de ficar ao lado da TV, com cuidado agarrar uma das orelhas de coelho, e, nas palavras da minha esposa anos mais tarde, assume uma das nove posições básicas do ballet. (O pai dela fez a mesma coisa com ela, até que ele ficou com raiva de alguma coisa, disse o presidente Johnson e chutou para fora o tubo de imagem. História verdadeira.) Se fizemos o grand plié apenas para a direita, o canal NBC viria em bom e claro, no pelo menos até que Don Meredith caiu de volta para a passagem do touchdown eo sinal iria sair.
A televisão também foi um trabalho em preto-e-branco.
Assim, dado que todos os estáticos e falta de cor, a falta de uma tela e da incapacidade de quem não tinha atirador qualidade de visão para discernir o que era o número no mostrador pequeno canal de plástico do outro lado da sala, como se fôssemos sabe o canal que estávamos assistindo à primeira vista?
Resposta curta, não o fizemos. Resposta mais longa, dependia-se as redes, ou a estação local, para nos dizer. Que envolveu o uso de um logotipo, na escolha das redes de identificar-se - parte de sua marca.

A versão 1960 do logotipo da rede ABC. (Crédito da foto: Kris Trexler ., usado com permissão)
Naqueles dias de baixa, de baixa resolução em preto-e-branco sinais, às vezes tinha que depender de o logos da rede para determinar o que estação estávamos assistindo. Eu não tinha idade suficiente para ver o logotipo ABC utilizado na década de 1950 (as letras stenciled em cinza claro no lado de uma câmera de televisão, muito ilegível), mas eu me lembro a versão 1960: três menores caso letras em cores RGB (pareciam diferentes tons de cinza para nós) em um círculo preto. Fácil de ver e entender. ABC ainda usa uma variante desse logotipo.

A versão 1960 do logotipo da rede NBC. (Crédito da foto: Fanpop .)
NBC flaunted seu abraço de cor, colando uma cor-bedazzled pavão na tela. Isso nos deu um bloco de texto em vez undistinctive na parte inferior da tela, e não podíamos ver as cores, por isso não transmitir tão fortemente (além disso, ninguém queria assistir a programas NBC se isso significasse que você tem que ficar pelas antenas na posição alongamento por mais de alguns minutos). O pavão sobrevive, de uma forma muito mais estilizado, hoje.

A versão 1960 do logotipo da rede CBS. (Crédito da foto: Navigator Solar .)
CBS usou o "Olho de Hórus" (eles ainda usam uma versão dele) ladeado por três letras bem serifed em um arranjo de cores RGB diferentes - mais uma vez, facilmente identificáveis.

Auto-identificação e Navegador discagens rápidas

Esta explosão do passado estática crivado veio à mente quando eu instalei o Opera 11.10 (codinome Barracuda no melhor Opera de espionagem nada dupla nomeação tradição) na minha máquina a outra semana. Eu não instalá-lo o dia, ou da semana, ele saiu, em parte porque eu sou preguiçoso e em parte porque eu gosto de ler um pouco sobre como as iterações novo navegador estão fazendo antes de eu jogar meu portas abertas e convidá-los dentro eu instalei-o hoje, ou mais precisamente Opera cansei de me ignorando-o e instalou-se, e eu imediatamente notou uma mudança.
Eu uso o recurso Speed ​​Dial do Opera para a minha página inicial, e duas coisas eram diferentes. Um deles, havia mais (e menores) docas ícone, exigindo-me para encher a tela com alguns sites mais marcada (não pode ter manchas por preencher, é assimétrica e meu TOC não gostaria que ele). Além disso, notei que alguns sites não usou a habitual meia-random screenshots para servir como seus ícones. Em vez disso, alguns deles, como SitePoint e Google Imagens , parecia agora spiffy esporte, iPad-como ícones (menos o overlay brilhante). Iterações anteriores do Opera apenas deu de captura de tela "ícones".

Uma parte da minha área de trabalho atual no Opera 11. As variações no ícone exibe são óbvias.
Era óbvio o quão útil são os pequenos ícones. O chunky SitePoint azul / laranja estilizada "S", por exemplo, é imediatamente perceptível, como é o colorido Google Images "logo" (como CBS, eles usam um bom gosto suave serif, juntamente com uma variedade de cores brilhantes Crayola). Por outro lado, alguns sites não usando os ícones não se saíram tão bem. Meu, por exemplo. Eu tenho um screenshot quase aleatório do meu LinkedIn e ícones contato Twitter, quase inútil para a identificação de qualquer coisa. A página do Facebook que eu visito regularmente tem transformado em um mush borrada, como o programa squished toda a página para baixo em um tiro de miniaturas quase imperceptíveis. O screengrabs para Six Revisions e Smashing Magazine não fazê-lo quente, seja, sem os blocos de texto no fundo dos ícones, eu não poderia facilmente dizer que a página foi (embora logotipo Smashing é mais perceptível do que Six Revisions é). E quem quer contar com um bloco de texto para identificar alguma coisa?
Assim, com Googling alguns minutos, descobri que os ícones são totalmente controlável a partir do final do cliente - em outras palavras, assim como o Apple iPad / iPod / iPhone ícones que também podemos usar em nosso site (Apple chama Webpage ícones ; browser móvel Android usa algo similar), podemos adicionar um ícone que irá destacar-se em Dial usuários Opera 'Speed. Eu também achei que, se preferir, podemos usar Speed ​​Dial específicos CSS ou conteúdo, e até mesmo adicionar um Soupcon de bondade HTML 5.
Em outras palavras, que controlam a aparência. Eu não sei sobre você, mas neste dia e idade de não racional sendo capaz de projetar sites que aparecem pixel-idênticos de navegador para navegador, eu vou tomar um pouco de controle sobre a aparência e apresentação a qualquer hora posso obtê-lo . E, como veremos em breve, o efeito não é limitado a Dial do Opera Velocidade desktop, mas se traduz em muitos displays móveis também.
E não é mesmo parecido com uma tela de área de trabalho móvel? Mais sobre isso mais tarde.
(Não sabe como obter o Opera para mostrar Discagem rápida como a home page? Online Como dá um passo a passo rápido e fácil , embora, como observa o artigo, o Opera 11 usa discagem rápida como padrão para a selecção de home page. Veja como mudar velocidade ícones Dial no seu, e só o seu browser,. E se você é novo para toda a ideia do Speed ​​Dial, Opera nos deu um liso, curto vídeo do YouTube para folhear.)

Chrome com extensão Speed ​​Dial, em um screenshot de dezembro de 2009. (Crédito da foto: Technobuzz .)
Firefox tem uma extensão de discagem rápida que eu comecei a usar depois que eu comecei estragado por recurso próprio Opera. O Firefox também oferece uma extensão similar chamado Fast Dial , mas parece ter alguns problemas de funcionalidade . Chrome também tem uma extensão que dá a seus usuários uma discagem rápida , e de forma algo semelhante ao Opera, que permite o uso de logos site como ícones de marcação, embora sem a personalização.
Internet Explorer 9 tem o seu próprio recurso integrado de Speed ​​Dial que é semelhante ao do Chrome, no entanto, não parece particularmente personalizável (eu não uso IE9, por isso não posso dizer com autoridade). Usuários de Mac têm uma razão para alisar, como Safari fez Discagem rápida por anos, talvez já em 2003 , embora eu entendo que é um aplicativo on-line e não necessariamente a inclusão de um navegador (eu não uso Macs, ou, então alguém aqui pode me corrigir). Michael PCMag de Muchmore reivindicações Opera fez o Speed ​​Dial primeiro , para o que que vale a pena.

Going Mobile: Roubar A March On The Future

A questão do "por que se preocupar?" É válido. Afinal, navegador de desktop do Opera tem menos de uma quota de mercado de 5%, não importa qual números que você aceitar, e eu tenho certeza a maioria dos usuários de outros navegadores não usam suas instalações de discagem rápida. Mas isso não é o negócio inteiro. Opera é conhecido como um navegador de ponta cujos melhores características, muitas vezes encontrar seu caminho em outros browsers mais populares abaixo da estrada. (A lista de inovações Opera voltando a 1994 está disponível no Wiki do Opera, se você estiver interessado. Opera introduziu recursos como tela de zoom, user-defined CSS, gestos do mouse, pop-ups, e navegação por voz, e é Speed ​​Dial tinha desde a versão 9,20 em 2007.)
Eu não vou começar a tentar vender o Opera para você, você usar qualquer navegador de sua preferência, mas se Opera está fazendo isso hoje, Firefox e Chrome eo restante provavelmente vai fazê-lo amanhã. Assim, fazer um ícone de discagem rápida para o seu site agora só poderia encantar o percentual muito pequeno de usuários que usam essa facilidade para agora, mas as chances são de que o ícone, ou uma variante da mesma, virá a calhar para tomar própria de outro browser no Speed ​​Dial no futuro próximo. Melhorias de desktop do Opera muitas vezes passar para o Opera Mobile e Mini navegadores, que no último exame tem mais de 100 milhões de usuários entre eles . Isso é uma parte significante do usuário. E, como veremos ao longo do caminho, a mesma técnica pode ser usada para colocar seu logotipo no celular da Apple, aparelhos touch-screen.
Dials de velocidade são nada de novo, certamente. Mas a capacidade de personalizá-los, agora para o Opera e quase certamente para outros navegadores no futuro próximo, é algo bastante diferente.

A Apple iPad área de trabalho, em uma imagem a partir de Abril de 2010. (Crédito da foto: Pat Moorhead .)
Também está se tornando evidente que se você está projetando para o futuro (mesmo que esse futuro está próximo mês), você está projetando para celular. Se você não está projetando para celular, você não está servindo seus clientes. Autor e especialista em Luke Wroblewski UI lembra que a tendência para mobile já é grande e crescendo aos trancos e barrancos, e cita as estatísticas para apoiá-la.
A empresa de pesquisa fez uma previsão ousada em dezembro de 2009 que, por algum tempo em 2012, os embarques globais de smartphones ultrapassaria embarques globais de desktops, notebooks e laptops combinados. Isso aconteceu no final de 2010, quase dois anos. A diferença continuará a aumentar. Desde 2008, o uso da casa de PCs caiu 20%, e continuará a encolher, como os consumidores dependem cada vez mais seus smartphones para navegar na Internet.
Em 2011, as vendas de PCs no mundo caiu mais de 3% e vai continuar a cair, as remessas dos EUA caiu mais de 10%. Muitos compradores que teriam comprado um PC estão comprando comprimidos, como o iPad. 22-25% dos americanos e britânicos usuários de internet móvel não se incomodam com um computador desktop em tudo para navegar na Internet. Em novembro de 2010, o número de visitantes a sites web-based e-mail diminuiu em 6%, enquanto, ao mesmo tempo o número de usuários que acessam seus e-mails por seus dispositivos móveis cresceu 36%. E dos dispositivos móveis lá fora, Smashing Magazine autor Nick Francis diz-nos que metade dos smartphones vendidos hoje executado no iPhone OS , e metade do restante executado no sistema operacional Android. O tablet da Apple iPad é vendido como um louco .
Além de fazer-me sentir velho (? Como sobre você), as estatísticas dizem-me que se eu estou projetando para um cliente e ignorando as suas necessidades móveis - e particularmente não focar a necessidade de abordar os dispositivos de seus usuários Apple - eu estou não servir os seus interesses. O cliente não pode mesmo saber que você não está dando a eles o que eles precisam, mas é no designer e desenvolvedor de saber que precisa existir, não pelo cliente. Sabemos que mais e mais usuários de nossos clientes ainda podem estar usando um desktop ou notebook para acessar a Internet de hoje, mas amanhã eles vão estar usando um smartphone, e se não for amanhã, então volte na semana que vem, porque eles ter feito a troca. Além disso, eles pensam de sites cada vez menos como "sites" e mais como "apps" (apesar de sabermos os termos não são intercambiáveis ​​).
As técnicas que irá aprender aqui se aplicam agora à Opera de discagem rápida para o PC e para a telas sensíveis ao toque da Apple. Amanhã eles se aplicam a mais dispositivos, provavelmente o Opera Mobile e talvez o Mini. E, acredito, outros desktop / laptop (acho que "fixa" os computadores, embora o termo não é muito preciso), assim: Eu tenho uma sensação de que daqui a um ano, ou talvez dois, um monte de browsers 'home-page exibe vai empregar alguma versão de uma instalação de Dial-celulares como Speed. Vamos roubar uma marcha sobre o futuro (e sobre os nossos concorrentes) e ver como ele funciona.

Primeiro Passo: Como personalizar o seu site Para Dial do Opera Velocidade

[Y] ou pode oferecer [um ícone] que pode ser exibido no [touch screen da Apple] tela de dispositivos 'Home usando o recurso de clipe de web. - Alexander Dawson, Six Revisions

O novo [Opera] aplicação também permite que desenvolvedores de sites para escolher o que aparece nas entradas dos usuários de discagem rápida para seus sites. - Michael Muchmore, PC Magazine

Tiffany Dev Opera Brown escreveu uma rápida e bem detalhado como-ao guia para bater para fora um ícone do Opera de discagem rápida para o seu browser, ou para personalizar o seu ícone de marcação via CSS ou outro conteúdo. Brown confirma que, se você não fizer nada de especial, Dial do Opera velocidade só vai usar a captura de tela de costume, e já sabemos o quão mal que pode girar para fora para você.
Sem surpresa, o processo começou com a idéia do "favicon", ou o ícone do marcador. Fomos incorporando os já em 1999, quando Microsoft rolou com todos nós, com sua inclusão no IE 5 . Eles não fazem parte do HTML 4 especificações, mas isso não impediu que muitas pessoas, e os vendedores de browser não nomeado Microsoft não esperar muito para adicionar suporte para icon como um valor para o rel atributo da link elemento. A Apple construído sobre a idéia do favicon para seu toque do dispositivo ícones através da apple-touch-icon de valor. HTML 5 e acrescentou icon como um valor válido e padronizado para o rel atributo, a menos que mudá-la próxima terça-feira.
(Nota: O Opera não vai pegar um favicon para marcadores de discagem rápida Se não encontrar algum tipo de ícone dedicado ao propósito - Opera não exige que o Opera-específica de codificação, mas exige. link rel codificação especificamente para um ícone. Não será o padrão para exibir o favicon, mas dará aos usuários uma captura de tela como um "ícone".)

O Código Basic Icon

Não toma muito tempo ou esforço para codificar um novo ícone para si mesmo. Brown dá-nos a sujeira-simples código necessário para a cabeça do seu documento:
Ela não fica muito mais fácil do que (você pode até mesmo deixar de fora o type="image/png" , como o PNG tipo MIME é assumido). Você pode ver a rel diferença a partir do código Apple-específicos utilizados para os ícones de toque da Apple:
Os ícones em si são um pouco diferentes dos ícones da Apple dedicado, e pode exigir que você tome uma corrida através do Photoshop, GIMP, ou o seu editor de gráficos de escolha. As especificações são simples. O tamanho mínimo é de 114px por 114px (os menores, como o da Apple de tamanho 57 × 57 ícones PNG, serão ignorados, embora os dispositivos da Apple usará quase qualquer ícone de tamanho razoável, reduzir a escala para 57 × 57, e adicionar seus próprios cantos arredondados - mais sobre isso em um bit) eo máximo é 256px de largura por 160px de altura. (Tamanhos de exibição pode ser alterado na opera:config do menu de seu navegador, mas isso só funciona para você e não o usuário Ópera em Katmandu.) O arquivo deve ser no formato PNG, JPG, GIF ou - não SVGs.
(Web desenvolvedor Mathias Bynens criticou a Apple por não "implementar [ndo] o padrão <link rel=icon> e [chegando] com uma relação mais detalhada ligação de propriedade em seu lugar. "Eu tenho que concordar.)

Usando vários ícones

Se você usar uma imagem animada, somente o primeiro quadro será usado, por isso não se incomode. Mas, você pode usar vários ícones. Qual é a diferença? Ele vai deixar você dar aos usuários um ícone para marcar uma página e um segundo para o seu Speed ​​Dial. Você terá que decidir se este é um plus agradável ou uma fonte de confusão em potencial - nós gostamos geralmente algum grau de uniformidade entre as apresentações nosso logotipo, para fins de identificação.
Se você quer ir por esse caminho, não é muito mais difícil do que o primeiro. Veja como:
O maior deles será escolhido por Discagem rápida como seu ícone, independentemente se ele vem em primeiro lugar ou em segundo lugar na lista. Se ambos os ícones são do mesmo tamanho, Speed ​​Dial usará o primeiro eo segundo será o favicon.
Até agora tem sido fácil. A próxima parte é, assim, fácil demais, mas permite a personalização um bom bocado mais, se você optar por implementá-lo.

Usando o modo de visualização: minimizados

Opera é view-mode recurso de mídia permite que você especifique estilos por modo de visualização. Se você usar view-mode: minimized , você pode fazer mais do que apenas fornecer um favicon maior, badalada para Dial seus visitantes 'Speed. View-mode funciona como outros recursos de mídia, como device-width . Você provavelmente já sabia que a consulta de mídia precisa ser dentro de um @media bloco. Aqui está o código:
Este ainda tem Opera usar um screengrab como o seu "ícone", mas personaliza a aparência: neste caso, alterar a fonte e cores de fundo.
Se preferir, você pode ligar a uma folha de estilo externa (vamos debate os prós e contras desse método em outra ocasião), e defina o valor do atributo mídia (view-mode: minimized) :
Se você usar (view-mode: minimized) , vai desencadear um Speed ​​Dial viewport que é de 256 pixels de largura por 160 pixels de altura. Isso pode não ser um problema para você, mas é algo a saber.
O que você definitivamente precisa saber é que se você usar view-mode: minimized CSS, Speed ​​Dial, que usará como primeira prioridade, sobre um ícone mais genericamente fornecido.

Outras possibilidades

Brown dá exemplos de várias outras facilidades: servir uma URL diferente através de uma solicitação HTTP, andar de bicicleta através de um número de pré-selecionados usando ícones auto-reload, usando mod_rewrite para redirecionar solicitações de discagem rápida, e usando uma linguagem server-side como PHP para servir conteúdo diferente na mesma URL. Se você encontrar estes interessante, eu vou deixá-lo a rever seu artigo , se você quiser explorar os aspectos do Speed ​​Dial.

Extras

Os usuários visual entre nós pode apreciar o passo a passo YouTube Opera nos dá. Opera Mobile, muito popular no Android e Symbian, também usa de discagem rápida , assim como o Opera Mini , embora versões nem móveis, nem permitir a Mini do lado do cliente a personalização ainda. (Firefox e Chrome versões móveis têm suas próprias versões do Speed ​​Dial, assim como o browser móvel Dolphin.) Se você estiver a fim de tomar um breve passeio no mato, o Dev Opera tem um forum de discussão sobre o artigo de Brown. E planejamento do Opera em adicionar extensões para o Speed ​​Dial na versão desktop novo.

Galeria de Websites "App" Ícones

Um antigo Opera screenshot Dial speel de início de 2011. (Crédito da foto: Martin Brinkmann e Ghacks.net ., usado com permissão)
Você viu como o meu computador se parece com o Speed ​​Dial nova ativado. Para fins de comparação, este é como o Speed ​​Dial do Opera olhou antes Opera 11 em um monitor de área de trabalho sem o uso do spiffy novos ícones personalizados. Não é ruim, mas você pode ver como algumas das capturas de tela não se destacam muito bem. Mesmo quando eu ampliar o gráfico, não posso dizer o que todos os locais screengrabs representam. O ponto? "Ícones app" muitos sites "ainda têm a mesma aparência no Speed ​​Dial atualizado. Mas, eles não precisam.

Opera Mobile screenshot início de 2011. Crédito da foto: Dev.Opera , usado sob licença Creative Commons.
Para fins de comparação, aqui está o que o Speed ​​Dial parece em um navegador móvel Opera. Obviamente, todos os "ícones" são agarra tela. Espero Opera irá atualizar a sua instalação móvel Dial de Velocidade para ser customizável em um futuro próximo.
Vamos encontrar alguns ícones da velocidade spiffy nova Dial e ver como eles se parecem individualmente. Aqui está um grupo deles do meu desktop:

Quatro não tão aleatoriamente ícones velocidade selecionada Dial do meu desktop, por volta de abril de 2011.
Eu só escolhi quatro que representam a idéia do ícone personalizável ou o screenshot bem selecionados: Imagens Google, SitePoint, Yahoo Mail e Media Matters. SitePoint usa o apple-touch-icon em seu valor de codificação, e os outros ou usar uma codificação mais genérica ou apenas deixar o browser do seu screengrab sem qualquer intervenção. (A borda azul em torno de alguns dos ícones é desencadeada por foco do mouse, e vem de eu ser um pouco desleixado como eu selecionei os ícones para screenshotting. Deixei as fronteiras de alguns dos tiros porque eu racionalizada que precisamos ver o que o ícones parecem tanto com e sem fronteiras, mas principalmente porque eu estava com preguiça de refazê-las.)
Os benefícios visuais são aparentes. Google Images e Yahoo usam seu texto colorido como sua identidade de marca. O Media Matters logotipo mostra claramente, mas é evidente que o "ícone" é um bem, e por acaso, pedaço selecionado do quadrante superior esquerdo de sua tela (você pode ver a fatia de barra de navegação no ícone, embora eu não acho que diminui o impacto visual forte da apresentação da marca). SitePoint, com o uso de seu ícone da Apple exibindo na tela Discagem rápida , provavelmente faz o maior impacto. Muito limpo e forte, e imediatamente reconhecível.

Opera.com 's ícone de discagem rápida.
Aqui está um atalho para o próprio ícone do Opera Speed ​​Dial. Não surpreendentemente, eles vão com suas "O" grande logo, embora eu perca a sombra (aparentemente desatualizado) inclinada para trás a carta. Tal como acontece com todos os ícones de discagem rápida, o texto é agarrado desde o título da página, explicando porque ele exibe como "testas Opera ..." Podemos, é claro, o controle que, com nossos próprios sites, se queremos truncar ou manipular nossos títulos para dar um curto, exibir texto ágil, e os usuários podem configurar o seu texto para dizer o que quiserem para o ícone.

Apple.com 's ícone de discagem rápida.
Este é um tiro de Apple.com 's ícone de discagem rápida. Quem esperava isso? Eu estava esperando alguma versão da "maçã" logo . Destaca-se muito bem do bloco, eo título, a única palavra "Apple", é eficaz, embora eu não tenho certeza que a foto do iPad faz o truque para fins de identificação.

IPhone da Apple e ícones Dial iPad Speed.
Surpreendentemente, nem website iPhone da Apple, nem o seu local de iPad usar um ícone dedicado e não use o apple-touch-icon de codificação. A captura de tela para o site iPhone é bastante notável, porque o iPad, talvez menos. Talvez a Apple não espera que os usuários móveis visitam estes sites?

Microsoft.com 's ícone de discagem rápida.
Aqui está o ícone do Microsoft Speed ​​Dial. Ou o Opera screengrab que usa para o ícone. Obviamente, a Microsoft não está a tentar cumprir com os requisitos do Opera ou da Apple para essa matéria. Como "ícone" quase todo mundo está lá fora, é uma captura de tela a partir do canto superior esquerdo da home page da Microsoft. É útil, e que sobre tudo o que tem indo para ele.

Velocidade de ícones Dial WordPress.com e páginas de Facebook.
Aqui estão screencaptured "ícones" de um blog WordPress e uma página de Facebook que eu trabalho com. Você pode ver o quão satisfatório estes servem o propósito de ícones da marca. Eles são apenas duas imagens de conteúdo extremamente comprimido. Mesmo os blocos de texto identificando não ajudam muito.

Velocidade ícones Dial do Six Revisions e Smashing Magazine.
Estes são os screencaptured "ícones" do meu marcadores para Six Revisions e Smashing Magazine (mostrando então atual conteúdo da página frontal). Embora eles não são tão ruins como os dois exemplos acima, e logo Smashing é claramente visível, eles não são particularmente agradáveis. Six Revisions parece um site WordPress, porque o dia que eu fiz a ficha, o site estava apresentando um artigo sobre ajuste fino WordPress para fins de SEO . E artigo Smashing sobre alcançar a perfeição do pixel no Photoshop desde há muito tem saído na primeira página, embora uma fatia do título permanece em meu ícone. Esses ícones não mostram novos conteúdos, e não fazer justiça para os sites que eles representam

NBC.com 's ícone de discagem rápida.
E terminando onde começamos ... Enquanto os outros dois principais redes de televisão deixe Opera fazer um screengrab para os seus "ícones", NBC nos dá a versão do século 21 do pavão venerável. Eles código de um JPG mais amplamente aplicável para servir ao propósito.

Etapa dois: Apple Além disso Opera Igual uma mudança radical na Navegação

Uma primeira versão de uma página "app" homemade casa. (Crédito da foto: Geniosity ., usado com permissão)
A idéia de uma home page como uma coleção de "apps", ou mais precisamente links para uma variedade de sites selecionados pelo usuário, não foi introduzida com um Safari ou Opera Dial de Velocidade em primeiro lugar. Computador maven John Dvorak teve uma versão de sua "home page pessoal portal" disponíveis desde 1999; todas as suas iterações usar links de texto apenas, sem ícones, pois o tempo de carregamento mais rápido. Mais recentemente, um desenvolvedor que blogs em Geniosity escreveu sobre sua própria artesanais, texto do link-driven home page que ele criou para a sua cópia do Firefox (imagem à esquerda). O autor me diz que ele ainda usa uma versão deste para a sua casa page.There são outros exemplos lá fora, para o Googling.
Acho que a idéia, à espreita, pois tem nas bordas das convenções navegador para mais de uma década, está prestes a passo para a frente. Se isso acontecer, será porque os usuários móveis querem seu desktop, laptop, notebook e navegador exibe a funcionar da mesma forma como seus desktops móveis - como uma coleção de pessoal selecionado, baseado em ícones links para sites que usam em uma base regular . Este será um dos primeiros exemplos de móveis convenções navegação de uma alteração importante na procura de computadores "fixos".
Acredito firmemente (sem qualquer prova concreta, deve-se notar) que em algum momento no futuro próximo, desktop / laptop os usuários vão querer mudar para um Speed ​​Dial-como interface do navegador que replica o que eles têm em seus dispositivos móveis. Eu vejo isso como uma mudança radical na navegação: em vez de desktop / laptop navegadores condução navegadores móveis que são capazes de fazer, o inverso vai acontecer. Em vez do tradicional desktop "home page", os usuários vão querer uma interface multi-app, como eles usam em seus celulares e tablets.
Se isso acontecer, então designers / desenvolvedores que chegar à frente da curva vai estar preparado quando as mudanças descer a pique. Já teremos nossos sites, e sites de nossos clientes, pronto para mostrar bem no "desktop interface do app" futuro próximo recurso do navegador. (E se isso não acontecer, vamos ter gasto uma quantidade muito pequena de tempo na preparação, com nenhum dano aos nossos sites. Não há realmente nenhuma desvantagem para isso, como você pode equipar um site para esta nova função na menos tempo do que leva o adolescente local para entregar-lhe uma pizza.)
Então, se eu não tenho provas concretas para mostrar a você, como eu posso convencê-lo? Talvez eu não possa. Eu posso bem estar errado. Mas eu não penso assim. Anos, escritor de ficção científica Robert Heinlein escreveu: "barcos a vapor quando é hora de barco a vapor." (A referência histórica é simples: enquanto inventor Robert Fulton é creditado com a "inventar" o barco a vapor, havia uma dezena de caras em três continentes trabalhando simultaneamente sobre uma variante do barco a vapor ou a outra coisa mesmo com o telefone;. enquanto você e eu aprendi que Alexander Graham Bell "inventou" a engenhoca, havia um monte de caras que trabalham em um aspecto ou outro da voz-driven comunicação através de . um fio Era o momento adequado no desenvolvimento tecnológico da sociedade ocidental de barcos a vapor e telefones; a necessidade estava lá, e os dispositivos de "criação e disseminação eram inevitáveis).
A onda do futuro é a computação móvel, e um dos aspectos mais fundamentais da computação móvel é o desktop app-laden. A idéia de abrir um navegador para uma única home page está rapidamente se tornando obsoleto, eu me sinto. Comecei a usar discagem rápida na minha browsers (todos eles, exceto IE) mais de um ano atrás, e eu não iria voltar para um prato de brownies da vovó. A utilidade ea conveniência de ter (no caso do meu Opera "home page") 25 "apps" no meu desktop, assim que eu abro meu navegador me impede sempre de voltar para uma única home page novamente.
Ainda não está convencido? Ok, abra seu navegador de desktop e olhar para qualquer home page que você escolheu. Agora flip aberto o seu dispositivo móvel e olhar para a variedade de aplicativos e sites pronto para ser acessado. Which one gives you more options? Which one feels more modern? More useful? (There are certainly exceptions, particularly companies which require the employee to have the browser set to the company's or department's home page, other organizations such as libraries and community centers which have their home pages hard-set, and users who spend so much of their time working on a single site that for them, it wouldn't make sense to have a “home page” full of icons to different sites when they will always go to the same site first.)

The Future Is Now

[I]n the coming years, more and more websites will have mobile incarnations that look a lot like applications. [P]eople won't even realize that in the end, the next generation mobile web won.
— Kim Pimmel, Smashing Magazine

For now, the best way I see to prepare for this predicted oncoming mobile transformation is to combine the requirements of Apple's touch-screen devices and Opera's Speed Dial. Apple requires a PNG file of at least 57×57 for conversion to a touch-screen icon. Opera requires an icon at least 114×114. And Opera will recognize Apple's touch-screen HTML code. I'd say create a PNG icon of 114×114 or larger, not forgetting Opera's maximum size requirement of 256×160, and use the apple-touch-icon coding:
Another viable option is to use two strings of code:
to ensure full inclusion and forwards compatibility, especially if, as I suspect, Chrome or Firefox will incorporate client-side customization to their own Speed Dial (or dial extensions) in the near future. By doing it this way, you can design separate icons for the touch devices and the browser(s) that take advantage of each one's individual characteristics.
The 114×114 icon will be scaled down for different devices. The guys at DevDaily remind us that the iPhone 4 uses the 114×114 icon, whereas older iPhones will scale the icons down to 57×57. An iPad (v1) will scale it down to 72×72. The same 114×114 icon will work perfectly nicely on all these devices. (Bynens gives some instructions on forcing Apple's iOS4.2 to use multiple icons for different device resolutions, if you're interested.)
Here's the proof in that particular pot of pudding: a before-and-after pairing of my site's icon in Opera's Speed Dial. For the second go-round, I used the apple-touch-icon coding so that the icon will appear on Apple's touch-screen devices as well as in Opera's Speed Dial.

Comparison of my site's old and new Speed Dial icons.
The difference is marked. The first icon presents little more than icon gibberish; since I use text and not a graphic as an <h1> site heading in my site, Opera used some of the first graphics it came across (the three icon buttons) and went from there, providing a screen capture that does nothing whatsoever to identify my site as anything of consequence. It took me maybe ten minutes to whip out the new icon in Photoshop, write and insert the code line, and upload it. And that was with the assistance of tabby cats!
You guys could do it in less, I'm sure. I'm not entirely happy with it; it's smaller than the bookmark canvas, the corners arent't rounded, and where the icon canvas is rectangular, the icon itself is square (if the background were white, it wouldn't matter as much). But whereas the first icon is almost entirely meaningless, the second one conveys .
Side note : There are tutorials out there advising us to create icons for Apple devices in Photoshop that include the rounded edges, drop shadows, and “gel” overlays. Não faça isso. Keep the icon edges sharp and don't include the glossy overlays. Apple devices add those effects automatically. The icon I created will have the rounded edges, drop shadow, and glossy appearance on Apple devices. If you want to force Apple to use your own icon without modification, you can use this code:
allowing you to add your own effects as you desire.
Bynens writes: “I'd recommend to always use precomposed icons. It gives you full control over your icon, and it's the only kind of icon Android 2.1 supports.” He also notes that iOS1 and Blackberry's OS6 do not support precomposed icons. He gives a somewhat more broad-based, cover-all-your-mobile-bases code snippet, which I'll pass along:
Opera 11.10 supports precomposed icons as well as the Apple Touch icons.

Conclusão

Right now this works on Apple's touch-screen devices and on Opera's desktop browser. It's my educated guess that within a matter of months, it will work on Opera's Mobile browser and at a later time on the Mini as well. It wouldn't surprise me if, by this time next year, the code string works on new Speed Dial facilities in Webkit and/or Gecko desktop and mobile browsers (be they actual browser inclusions or extensions). We might even see something of the sort in new IE versions; it's never smart to count Redmond out. So: take a few minutes, steal a march on the competition, and add the feature to your sites right now. You and your clients will be glad you did.