Design de Formulário da Web: Vitrines E Soluções

O Smashing Editorial

Sobre O Autor

O Esmagamento da equipe gosta de conteúdo de alta qualidade, e se preocupa com os pequenos detalhes. Através de nossos artigos online, Quebrando Livros, e-books, bem como Smashing …Mais sobre Smashing Editorial↬

  • 11 min de leitura
  • Guardada para leitura off-line
  • Compartilhar no Twitter, o LinkedIn

Esta visão apresenta uma escolhidos e organizados de seleção dos mais úteis e populares do Smashing Magazine artigos relacionados ao design de formulário da Web e publicados aqui ao longo de todos os anos.

Visão geral Rápida

  • Ideias Úteis E Orientações Para um Bom Design de Formulário da Web
  • Design de Formulário da Web: Mostra de Soluções E
  • Design de Formulário da Web: Soluções Modernas e Criativas Ideias
  • Um Extenso Guia Para o Formulário da Web Usabilidade
  • Em Busca Do Perfeito
  • Validação de Formulário da Web: Melhores Práticas e Tutoriais
  • Formulário de Validação de Campo: Os Erros-Abordagem exclusivamente
  • Formulário da Web e Padrões de Projeto: os Formulários de inscrição
  • Formulário da Web e Padrões de Projeto: Os Formulários de inscrição, Parte 2
  • Novas Abordagens Para a criação de Log-In Formulários
  • de Técnicas Inovadoras Para Simplificar Sign-Ups e Log-Ins
  • de CSS Baseada em Formulários: Soluções Modernas
  • Formulários Em Dispositivos Móveis: Soluções Modernas
  • Removendo pedras de Tropeço No Celular Formas
  • Download Gratuito: Planilha de informações Para a Concepção de Formulários da Web

Ideias Úteis E Orientações Para um Bom Design de Formulário da Web

O formulário de entrada é um elemento essencial de praticamente qualquer site ou aplicativo estes dias. A entrada é um método Central de interação, e em muitos casos representa o ponto de conversão difícil entre sucesso e fracasso. Com a quantidade de tempo e esforço que colocamos em trazer usuários para nossos formulários de inscrição e contato, é surpreendente que tendemos a não gastar uma quantidade proporcional de tempo nos formulários em si.

Best Practices of Web Form Design

a number of techniques and elements can be used in Web forms to turn them from abject failures into successful conversion points. Neste artigo, apresentaremos alguns exemplos interessantes e orientações úteis para o design de formulários Web.

Read more…

An Extensive Guide To Web Form Usability

Contrary to what you may read, peppering your form with nice buttons, color and typography and plent of jQuery plugins will not make it usable. Na verdade, ao fazê-lo, você estaria abordando (de uma forma não estruturada) apenas um terço do que constitui usabilidade forma.

neste artigo, vamos fornecer orientações práticas que você pode facilmente seguir. Estas diretrizes foram elaboradas a partir de testes de usabilidade, testes de campo, Rastreamento de sites, rastreamento de olhos, análise da Web e reclamações reais feitas ao pessoal de suporte ao cliente por usuários descontentes.

Read more…

Web Form Design: Modern Solutions and Creative Ideas

Web form is often the main communication channel between visitors and site owners. Feedback é sempre importante, e é por isso que é necessário ter certeza de que os formulários web são fáceis de entender e intuitivos de usar. No entanto, mesmo na forma design pode-se dar ao luxo de alguma parte saudável da criatividade.

os formulários Web não têm que ser aborrecidos e, usando CSS ou Flash, você pode facilmente se certificar de que eles são atraentes e eficazes. Para ser notado, você precisa chegar a algo único e interessante-símbolos, ícones, cores, posição ou o tamanho da web form são muitas vezes usados para alcançar soluções de design interessantes. Procurámos alguns exemplos e encontrámo-los. Formas criativas, originais e incomuns da web.

Screenshot

abaixo apresentamos mais de 40 (realmente) belos exemplos de formas web, bem como soluções modernas e ideias criativas relacionadas com o design de formas web. Alguns dos exemplos são baseados em Flash; no entanto, na maioria dos casos você pode facilmente criar projetos similares com CSS puro e HTML (X).

Read more…

In Search Of the Perfect

s, or Completely Automated Public Turing Tests to Tell Computers and Humans Apart, exist to ensure that user input has not been generated by a computer. Estes quebra-cabeças peculiares são comumente usados na Web para proteger formulários de registro e comentários de spam. Para ser honesto, eu tenho sentimentos mistos sobre S. Eles me irritaram em muitas ocasiões, mas eu também implementei-os como correções rápidas em sites.

re

este artigo segue a busca da solução perfeita para o problema do aumento de quantidades de spam gerado pelo homem. Vamos ver como e por que s são usados e seu efeito na usabilidade , a fim de responder a perguntas chave: o que é perfeito, e eles são mesmo desejáveis?

leia mais…

validação do formulário Web: melhores práticas e tutoriais

idealmente, os utilizadores irão preencher o formulário web com as informações necessárias e terminar o seu trabalho com sucesso. No entanto, muitas vezes as pessoas cometem erros. É aqui que entra em jogo a validação do formulário web. O objetivo da validação do formulário web é garantir que o Usuário forneceu informações necessárias e devidamente formatadas necessárias para completar com sucesso uma operação. Neste artigo iremos além da própria validação e exploraremos diferentes técnicas, métodos e abordagens de validação e feedback de erros.

formulário de inscrição no Facebook

a entrada do utilizador pode ser validada no servidor e no cliente (navegador web). Assim, temos validação do lado do servidor e do lado do cliente. Discutiremos prós e contras de cada um. Na validação do lado do servidor, as informações estão sendo enviadas para o servidor e validadas usando uma das linguagens do lado do servidor. Se a validação falhar, a resposta é então enviada de volta para o cliente, página que contém o formulário web é refrescada e um feedback é mostrado.

ler mais…

validação de forma-campo: As páginas de erro para validação de formulário-campo são terríveis. Você acabou de preencher 20 campos de formulários, mas você recebe a mesma página inchada jogado de volta em sua cara porque um único campo não validou.Lembro-me claramente dos fortes suspiros de desespero durante o nosso último estudo de usabilidade cada vez que um sujeito de teste encontrava uma página de erro de validação.

também notamos que os sujeitos de teste que tinham sido expostos a erros de validação começaram a tomar medidas preventivas para evitá-los em etapas subsequentes, escrevendo coisas como “N/A” no campo “Nome da empresa” se em dúvida sobre se o campo era opcional.

 BlueNile.com

no Instituto Baymard, refletimos sobre este problema e temos uma ideia que chamamos de “campos de erro apenas” — que é exatamente o que este artigo é sobre. Antes de explorar esta ideia, vamos olhar para três tipos tradicionais de técnicas de validação: “same page reload”, “optimized same page reload” e ” live inline validation.”

Read more…

Web Form Design Patterns: Sign-Up Forms

If you want to maximize the revenue of your service you need to maximize completion rates of your web forms. A menos que você tenha algumas idéias revolucionárias para impressionar seus visitantes à primeira vista, não é suficiente simplesmente permitir que os usuários se inscrevam em seu site. Para tornar possível que o serviço alcance uma exposição máxima, nós, designers, precisamos fornecer aos usuários uma boa experiência de usuário. Temos de os convidar, descrever-lhes como funciona o serviço, explicar-lhes porque devem preencher o formulário e sugerir os benefícios que receberão em troca. E, é claro, devemos também tornar extremamente fácil a sua participação.

no entanto, desenhar formas web eficazes não é fácil. E tem uma razão simples: ninguém gosta de preencher formulários — nem offline nem online. Portanto, como designers, precisamos descobrir decisões de design de som para tornar a conclusão do formulário fácil, intuitiva e indolor.

padrões de Design de formulários Web

mas como é que podemos determinar exactamente estas decisões? Onde deve ser colocado o link para o formulário no layout? Como devemos projetá-lo? Como devemos destacar os rótulos e como devemos alinhá-los? Como os padrões de design de formulários web se parecem em sites modernos? Estas foram exactamente as perguntas que fizemos a nós próprios. E para obter as respostas, fizemos uma pesquisa.

abaixo apresentamos os resultados da nossa pesquisa sobre os actuais padrões de design de formulários web — os resultados de uma análise de 100 Web-sites populares em que os formulários web (devem) importam. Decidimos começar com os formulários de inscrição. Apresentamos a primeira parte dos nossos resultados abaixo; a segunda parte dos resultados da pesquisa será publicada na próxima semana.

Update: a segunda parte dos resultados do inquérito é agora também publicada: Web Form Design Patterns: Sign-Up Forms Part 2.

leia mais…

padrões de Design de formulários Web: Formulários de inscrição, Parte 2

na semana passada apresentámos as primeiras conclusões da nossa pesquisa de formulários web. O principal objetivo da pesquisa foi fornecer designers e desenvolvedores com alguma intuição de como os formulários web eficazes são projetados; nós também apresentamos algumas diretrizes de como um formulário web eficaz e fácil de USAR Pode ser alcançado.

Imagem

temos focado em formulários de inscrição como queríamos considerar mais crucial formas (por exemplo, formulários de pagamento) separadamente. Depois passamos por cada uma das formas de inscrição dos sites selecionados e analisamos as abordagens de design implementadas nesses formulários. Abaixo apresentamos a segunda parte de nossas descobertas — os resultados de nossa pesquisa entre web-formas de 100 Web-sites populares onde web-formulários (deve) importam.

por Favor, note que este post não é sobre formulários de pagamento — isso é assunto para outra discussão, podemos considerá-los separadamente em um dos próximos posts. Gostaríamos de agradecer ao Wufoo por nos fornecer um quadro para realizar nossa pesquisa.

Read more…

New Approaches To Designing Log-In Forms

For many of us, logging into websites is a part of our daily rotine. Na verdade, provavelmente o fazemos tantas vezes que deixamos de ter que pensar sobre como é feito… isto é, até que algo corra mal: esquecemos nossa senha, nosso nome de usuário, o endereço de E-mail com que nos inscrevemos, como nos inscrevemos, ou mesmo se alguma vez nos inscrevemos.

estas experiências não são apenas frustrantes para nós, mas também são más para as empresas. Quão mau? A análise 1 da User Interface Engineering de um grande varejista online descobriu que 45% de todos os clientes tinham vários registros no sistema, 160.000 pessoas pediram sua senha todos os dias, e 75% dessas pessoas nunca completaram a compra que começaram assim que pediram sua senha.

Gowalla
o sinal em forma sobre Gowalla.

para completar, os visitantes que não estão conectados não vêem uma visão personalizada do conteúdo e recomendações de um site, o que reduz as taxas de conversão e engajamento. Então, fazer login é importante?—?grande o suficiente para que alguns sites começaram a explorar novas soluções de design para o velho problema.

leia mais …

técnicas inovadoras para simplificar as inscrições e Log-Ins

existem muitas formas de desenhar inscrições e log-in formulários. A maioria dos designers estão familiarizados com as formas convencionais. Mas compreender e aplicar algumas técnicas inovadoras poderia tornar seus formulários mais simples e mais eficiente de preencher. Neste artigo, gostaríamos de apresentar algumas novas idéias que podem ser úteis para seus próximos projetos. Por favor, observe que antes de usar estas técnicas, você deve se certificar de que elas fazem sentido no contexto em que você vai usá-las. Gostaríamos de ouvir sobre seus estudos de caso e testes de usabilidade que afirmam ou descartam as sugestões propostas abaixo.

leia mais …

CSS-Based Forms: Modern Solutions

Registration and feedback forms can be found everywhere. Cada start-up tenta atrair a atenção dos visitantes, de modo que os Web-forms estão se tornando cada vez mais importantes para o sucesso de qualquer empresa. No final, exatamente esses web-formulários são responsáveis pelo primeiro contato com potenciais clientes. Vamos dar uma olhada, que soluções modernas um web-developer pode usar, projetando sua próxima forma baseada em css. Ligações verificadas: Maio / 08 2008.

Read more…

Forms On Mobile Devices: Modern Solutions

Mobile forms tender to have significantly more constraints than their desktop cousins: Teles are smaller; connections are slower; text entry is trickier; the list goes on. Então, limitar o número de formulários em suas aplicações móveis e sites é geralmente uma boa idéia. Quando você quer a entrada de usuários em dispositivos móveis, botões de rádio, checkboxes, selecionar menus e listas tendem a funcionar muito melhor do que campos de texto abertos.

mas as restrições geram inovação, e as formas móveis não são diferentes. As limitações dos dispositivos móveis forçaram desenvolvedores e designers a encontrar novas maneiras de permitir que os usuários introduzam dados mais rápido e facilmente. Graças às soluções modernas contempladas neste artigo, o espaço móvel pode não ser um lugar para evitar formas por muito mais tempo. Em vez disso, pode tornar-se o lugar para encorajá-los.

leia mais …

removendo obstáculos em formas móveis

algumas semanas atrás, fiquei bastante surpreso quando vi o pavimento se aproximando rapidamente enquanto estava fora para uma caminhada. Deitado ali atordoado, percebi logo o que tinha acontecido: eu caí. Ai. B-menos. Normalmente tento ser o mais atencioso possível, mas desta vez uma grande fenda no pavimento pegou meu sapato e me jogou completamente fora de equilíbrio.

tropeço móvel

quando se trata de preencher formulários num telemóvel, tenho observado muitos utilizadores a depararem-se com uma experiência semelhante, apenas menos dolorosa no seu aspecto físico. Muitos elementos dentro de uma forma móvel afetam o quão suavemente os usuários vão chegar a um serviço ou produto escondido atrás de uma forma de qualquer tipo.

existem vários factores que podem ser considerados obstáculos ao longo da viagem de preenchimento de um formulário. Especificamente em um dispositivo portátil, esta jornada é complicada pelo fato de que temos que considerar parâmetros contextuais como tempo, localização ou opções de entrada limitadas, em comparação com uma experiência de desktop firme. Neste post vamos olhar para os obstáculos mais comuns para dispositivos móveis. Além disso, vou discutir estratégias de design para evitar tropeções e facilitar um passeio seguro e rápido através de formulários para usuários móveis.

Read more…

Free Download: Cheat Sheet For Designing Web Forms

Forms, forms, forms: so often overlooked in design. Neste post, temos o prazer de lançar o formulário design Cheat Sheet, Criado por Joe Leech e lançado para a revista Smashing e seus leitores. Esta folha de berço contém um modelo Omnigraffle, bem como exemplos de Photoshop (PSD) e PDF para você baixar e usar como quiser. Imprime a folha, coloca – a na parede, envia-a aos clientes, e geralmente ajuda a melhorar os formulários de todos.

Design Da Forma

os designers da folha de presépios passaram anos desenhando e testando formulários, e eles decidiram resumir os problemas e questões mais comuns que surgem em seus projetos.

Leia mais…

Você pode estar interessado nos seguintes “Best of” seleções bem:

  • Web Design Elementos: Exemplos E Melhores Práticas
  • Web Design de Navegação Apresenta
  • Usabilidade & Experiência do Usuário

Deixe uma resposta

O seu endereço de email não será publicado.