Esmaecer a borda do texto pode ser uma alternativa útil para as reticências, e eu diria que é superior em alguns aspectos.

Não confunda o conteúdo

As reticências substituem o conteúdo do texto para fazer seu trabalho, o que pode causar confusão sobre o que o texto real é. Inclui o ” … “? Se eu cortar / copiar / colar, isso vem junto? Um esmaecimento muda a forma como o conteúdo é exibido .

Em certo sentido, os esmaecimentos estão de acordo com a noção de uma separação entre a codificação visual e semântica e as elipses não.

No iOS 5, a Apple alterou a barra de endereço do Safari móvel para usar um esmaecimento em vez de reticências:

Não o Apenas fica mais claro qual é o URL real, mas (pelo menos parece) você pode ver um pouco mais à medida que vai diminuindo.

Texto truncado verticalmente

As elipses não funcionam na vertical. Aqui está um exemplo do JIRA, onde o conteúdo inferior é rolado, mas o cabeçalho permanece no lugar (ele também é compactado de forma inteligente logo antes de acontecer – não é tão estranho quanto pode parecer). O esmaecimento ajuda a comunicar que a parte que está rolando está indo para algum lugar .

Quando o texto transborda, é um contêiner, mas não pode ser quebrado

Aqui, no Gmail, a borda onde o transbordamento é cortado é difícil. A largura é dinâmica, portanto, as elipses precisariam ser inseridas dinamicamente, o que não é prático (suponho que não poderiam torná-lo rápido). Eu diria que um fade out, ou seu primo ” dobrar sob “, poderia ajudar a comunicar o que está acontecendo.

Alguns antecedentes gerais

Em geral, o efeito de esmaecimento origina-se de um ceticismo que vem do alto contraste sendo mais fácil de analisar e parecendo ” mais próximo ” do usuário, e menor contraste sendo mais difícil e parecendo mais distante – pense em ” desaparecendo no pôr do sol “. Um ceticismo mais concreto relativo ao iOS destaca a ideia:

Outro, escondido do Gmaps:

Claramente, esta não é uma convenção supercomum, definida para substituir a quebra automática de texto ou elipses. Eu apenas encontrei um exemplo exatamente do que você está falando. Mas acho que é “uma opção válida em algumas circunstâncias.

Comentários

• +1 Isso ´ uma boa visão geral de diferentes tipos de gradientes. Deveria ´ ter sido uma postagem de blog;) Espero que você estenda a conclusão para mais do que » Mas acho que ‘ uma opção válida em algumas circunstâncias. « como você parece que ´ pensei muito sobre isso. Aliás: o último imho é uma ” sombra interna “.Ah, e acho que você precisa planejar as imagens em oito espaços para fazer a lista funcionar.
• @kaiser Obrigado pelos comentários. Refiz as listas. Além disso, provavelmente os dois últimos poderiam ser chamados de ” sombra interna “, embora a chave seja que ‘ s uma sombra interna em um contêiner que trunca o texto – por isso eu estava tentando desenhar o paralelo. Minha redação precisa de revisão …

Resumido:

O apontar com gradientes e fadeouts ²⁾ sempre é o mesmo: eles não funcionam bem com monitores / LCDs ruins.

O problema de contraste

_{Esquerda : fica bem no monitor de designers || Certo : desaparecendo muito mais cedo.}

O problema de faixa de cores

Monitor ruim:

Bom monitor:

Como você pode ver acima, nem todo usuário compartilhará sua experiência pessoal em seu monitor. Se a luz do sol estiver diretamente na tela, o resultado será uniforme ser pior.

Minha opinião:

Não use fadeouts e gradientes até que você não possa evitá-los .

Comentários

• Este isn ‘ o que eu pensei ” texto esmaecido ” significa. Minha impressão foi que ‘ é mais parecido com: [~ 400 caracteres de texto sólido] [~ 50-100 caracteres de texto que desaparece rapidamente] – nesse caso, diferença na experiência visual devido a fade ” velocidade ” woudn ‘ t ser realmente significativo. No entanto, até que o OP esclareça o que ela quis dizer, isso é especulação.
• Claro, a parte posterior seria removida, mas isso não ‘ t importa, já que o uma pequena quantidade de texto esmaecido implica que ‘ não se destina a ser lido, mas apenas como uma representação icônica do ” texto adicional ” que está disponível.
• Gradientes não têm dependências de hardware, nem são significativamente prejudicados pela luz solar ou monitores ruins. Você está confundindo um problema de design com um problema de UX. Normalmente, você exibirá 4-10 linhas sem nenhuma sobreposição e, em seguida, 2-4 linhas com um fade de 100% a 0%. É irrelevante se esse desvanecimento está exatamente representado no monitor do usuário ‘; contanto que o usuário veja um desvanecimento de algum tipo, o controle cumpriu seu propósito de indicar mais conteúdo.
• Novamente, você está entendendo mal. O gradiente não cobre todo o texto , apenas a parte inferior. Se o fade é alto ou baixo na parte final, não é particularmente relevante para o valor como um indicador de que há mais conteúdo disponível. A maior parte do conteúdo é totalmente visível. Estar ciente do fato de que o gradiente pode ser menos visível para alguns usuários é importante (para que você possa projetar para o pior caso), mas isso não o impede de servir ao seu propósito, independentemente da qualidade de um usuário ‘ s.
• O ponto principal é se o OP significava que o desvanecimento acontecia ao longo de 10 milhas ou 10 mm. Não ‘ não acho que ‘ seja claro, dada a descrição concisa e a falta de exemplo. Eu ‘ d concordo que gradientes enormes sobre o texto são ruins – os exemplos que você inclui parecem horríveis nas melhores condições. Mas só porque a descrição é vaga, não ‘ significa que você deve assumir o pior caso. Eu ‘ ficaria curioso para saber o que você acha da minha resposta que aborda um caso em que talvez as suposições sejam mais otimistas.

Eu realmente não vejo a técnica de “texto esmaecido” muito usada, mas acho que o objetivo da experiência do usuário é projetar para o que quer que seja mais fácil para o usuário . Se o usuário tiver que tentar adivinhar o que está acontecendo, acho que você está frustrando o propósito. Na maioria dos casos, apenas adicionar o […] ou [mais …] será suficiente e fornecerá um caminho limpo e fácil de seguir para o usuário obter mais informações … que é o ponto principal, certo?

Você pergunta se o uso de texto esmaecido foi testado?

A meu ver, este é um exemplo de a ideia de usar “cheiro de informação” em uma interface de usuário. Em outras palavras, como você pode dar aos usuários uma ideia visual de onde estão os dados em um spa de informações ce. Nesse caso, o desbotamento indica que há mais informações nessa direção que você pode obter se rolar ou interagir de alguma forma.

Discutimos muito o conceito de cheiro de informação na comunidade de visualização no final dos anos noventa. Havia muita literatura de pesquisa na comunidade CHI, surgiram as teorias de busca de informações da Xerox Parc … eles fizeram muitos estudos nesta área. Os artigos de Peter Pirolli e Stu Card vêm à mente.

Você também pode aplicar o perfume da informação às consultas. Então, por exemplo, usei o cheiro da informação em algumas visualizações que projetei usando escalas de cinza para mostrar como os dados preencheram certos critérios definidos nos controles deslizantes (preto falhou em um, cinza escuro falhou em dois, etc.). Em outras palavras, os pontos de dados pretos são aqueles que ficam fora de sua consulta … portanto, você pode mover rapidamente o controle deslizante para incluí-los.

Bob Spence escreveu um artigo resumindo muitos destes técnicas de informação de cheiro / resíduo .

Portanto, embora eu não possa fornecer dados sobre esta técnica em particular, existem muitos estudos sobre como fornecer este tipo de dicas ajuda as pessoas em tarefas baseadas em informações.

Comentários

• Como os minimapas se relacionam com o esmaecimento das margens do conteúdo que não ‘ cabem na exibição?
• editado para esclarecer … é o conceito subjacente ao qual estou aludindo.
• É um gráfico de barras com cores por falhas. Ainda não ‘ veja como isso é relevante. Além disso, por que o vermelho aprovado e a maioria das falhas são os mais claros e com a ordem z mais atrás?

O bom de usar texto esmaecido (para aqueles que não sabem o que isso significa: sobreposição transparente de gradiente para que o texto “esmaeça” na cor de fundo ao longo do curso se algumas linhas) é que é muito maior e mais difícil de perder do que reticências. Além disso, embora as reticências quase sempre funcionem para indicar, às vezes o texto apenas parece terminar corretamente no local correto, portanto, não há nenhum conceito pendente que incentive os usuários a procurar palavras adicionais. As reticências também são muito pequenas e fáceis de perder, especialmente para pessoas com visão reduzida (como os idosos).

Não tenho experiência em usá-las, e embora me lembre de um site que uso e que as tenha … Não consigo me lembrar de qual site que uso. Peço desculpas. Posso dizer que gosto do e acredito que funciona bem para o seu propósito. Esteja ciente de que ele não substitui um botão “Mais”, ele simplesmente fornece uma indicação muito maior e mais clara de conteúdo adicional. Você ainda precisa ter uma área que permita clicar (sombra da janela, botão Mais) para a qual os usuários gravitarão quando virem o efeito de esmaecimento.

Este tipo de efeito seria apropriado para rolar o conteúdo (ou seja, tickers, feeds de notícias, etc.), onde eles rolam de um lado (fade in) e fade out para o outro lado.

Isso parece funcionar bem com o conceito de leitura de formas, http://www.microsoft.com/typography/ctfonts/WordRecognition.aspx e reconhecimento de palavras. No entanto, em teoria, só consigo ver isso útil para fades horizontais (da esquerda para a direita) e não também com Amazon “s desvanecimento vertical. http://softwareas.com/pure-css-solution-to-avoid-cutting-off-text/ Poderíamos equiparar isso a um sussurro, embora o sussurro seja auditivo, este é um efeito semelhante em a nível visual. Que eu saiba, não houve nenhum estudo, mas se alguém encontrar um, por favor poste aqui.

Aqui está um exemplo de esmaecimento versus reticências padrão. http://www.theuxunicorn.com/fade_sample.png