Att bleka kanten av texten kan vara ett användbart alternativ till ellipser, och jag skulle påstå att det är överlägset på vissa sätt.

Förväxla inte innehållet

Ellips ersätter textinnehåll för att göra sitt jobb, vilket kan orsaka förvirring om vad den faktiska texten är. Innehåller den ” … ”? Kommer jag att klippa / kopiera / klistra in? En toning ändrar hur innehållet visas .

På ett sätt överensstämmer blekningar med uppfattningen om en separering mellan visuell och semantisk kodning och ellipser gör inte.

I iOS 5 ändrade Apple adressfältet för mobil Safari för att använda en blekning istället för ellipser:

Inte o är det tydligare vad den faktiska webbadressen är, men (åtminstone känns det som) du kan se lite mer av den när den spårar av.

Vertikalt avkortad text

Ellipsen fungerar inte vertikalt. Här är ett exempel från JIRA, där det lägre innehållet rullas, men rubriken förblir på plats (den är också smart komprimerad precis innan detta händer – det är inte så janky som det kanske låter). Fade hjälper till att kommunicera att delen som rullar går någonstans .

När text flyter över behållaren men kan inte linda sig

Här i Gmail är kanten där överflödet skärs av svår. Bredden är dynamisk, så ellipsar skulle behöva infogas dynamiskt, vilket inte är praktiskt (jag antar att de inte kunde göra det snyggt). Jag skulle hävda att en uttoning, eller det är kusin ” tuck under ”, kan hjälpa till att kommunicera vad som händer.

Någon allmän bakgrund

I allmänhet är fadeout-effekten härrör från en skeumorfism som kommer från högre kontrast som är lättare att analysera och verkar ” närmare ” för användaren, och lägre kontrast blir svårare och verkar mer avlägsen – tänk ” bleknar i solnedgången ”. En mer konkret skeumorf-släkting från iOS lyfter fram idén:

Ytterligare en tuck-under från Gmaps:

Det här är helt klart inte en vanligt förekommande konvention, inställd på att ersätta textomslag eller ellipser. Jag bara hittade ett exempel på exakt vad du pratar om. Men jag tror att det är ett giltigt alternativ under vissa omständigheter.

Kommentarer

• +1 Att ´ en fin översikt över olika typer av övertoningar. Bör ´ ha varit ett blogginlägg;) Jag hoppas att du utökar slutsatsen till mer än » Men jag tror att det ’ är ett giltigt alternativ under vissa omständigheter. « eftersom du verkar som att du ´ Jag har funderat mycket på det. Btw: Den sista imho är en ” inre skugga ”.Åh, och jag antar att du måste tänka bilderna med åtta mellanslag för att listan ska fungera.
• @kaiser Tack för tankarna. Jag har omarbetat listorna. Förmodligen kan båda de sista kallas en ” inre skugga ”, även om nyckeln är att den ’ är en inre skugga på en behållare som avkortar text – därför försökte jag rita parallellen. Min formulering behöver revideras …

Sammanfattat:

peka med lutningar och uttoningar ²⁾ är alltid densamma: De spelar inte bra med dåliga bildskärmar / LCD-skärmar.

Kontrastproblemet

_{Vänster : ser bra ut på designers monitor || Höger : bleknar ut mycket tidigare.}

problem med färgintervall

Dålig bildskärm:

Bra bildskärm:

Som du kan se ovan kommer inte alla användare att dela din personliga upplevelse på din bildskärm. Om du fick solljus direkt på skärmen blir resultatet till och med vara värre.

Min åsikt:

Använd inte uttoningar och övertoningar tills du inte kan undvika det .

Kommentarer

• Detta är inte ’ t vad jag trodde ” bleknad text ” betyder. Mitt intryck var att det ’ är mer som: [~ 400 tecken med solid text] [~ 50-100 tecken med snabbt blekande text] – i vilket fall skillnad i visuell upplevelse på grund av blekna ” hastighet ” woudn ’ t är verkligen betydelsefull. Tills OP: n klargör vad hon menade är detta spekulation.
• Visst, den senare delen skulle avlägsnas, men det skulle inte ’ spela någon roll, eftersom kort mängd blekningstext innebär att den ’ inte är avsedd att läsas, men endast avsedd som en ikonisk representation av ” mer text ” som är tillgänglig.
• Gradienter har inga maskinvaruberoenden och skadas inte heller avsevärt av solljus eller dåliga bildskärmar. Du förväxlar ett designproblem med ett UX-problem. Vanligtvis visar du 4-10 rader utan överlagring alls, sedan 2-4 rader med en blekning från 100% till 0%. Det är irrelevant om den blekningen exakt representeras på användarens ’ s monitor; så länge användaren ser en blekning av något slag, har kontrollen tjänat sitt syfte att indikera ytterligare innehåll.
• Återigen missförstår du. Lutningen täcker inte all text , bara den nedre delen. Huruvida blekningen är hög eller låg på den sista delen är inte särskilt relevant för värdet som en indikator på att det finns mer innehåll tillgängligt. Majoriteten av innehållet är fullt synligt. Att vara medveten om att lutningen kan vara mindre synlig för vissa användare är viktigt (så att du kan designa i värsta fall), men det hindrar inte att den tjänar sitt syfte oavsett användarens kvalitet ’ s skärm.
• Nyckelpunkten är om OP menade att blekningen sker över 10 miles eller 10 mm. Jag tror inte ’ att det ’ är klart, med tanke på den kortare beskrivningen och bristen på exempel. Jag ’ Jag håller med om att stora lutningar över text är dåliga – de exempel du ser ser ganska hemska ut under de bästa förhållandena. Men bara för att beskrivningen är vag betyder inte ’ att du ska anta det värsta fallet. Jag ’ Jag vill vara nyfiken på vad du tycker om mitt svar som behandlar ett fall där antagandena kanske är mer optimistiska.

Jag har verkligen inte sett att ”bleknad text” -tekniken används mycket, men jag tror att poängen med användarupplevelsen är att utforma för allt som gör det enkelt för användaren Om användaren måste försöka gissa vad som händer, tror jag att du besegrar syftet. I de flesta fall räcker det bara att lägga till […] eller [mer …] och ge en ren, lätt att följa vägen för att användaren ska få mer information … vilken är egentligen hela poängen rätt?

Frågar du om användningen av blek text har testats alls?

Som jag ser det är detta ett exempel på tanken att använda ”informationsdoft” i ett användargränssnitt. Med andra ord hur kan du visuellt ge användarna en känsla av var data ligger i ett informationsbad ce I detta fall indikerar blekningen att det finns mer information i den riktningen som du kan komma till om du rullar eller interagerar på något sätt.

Vi diskuterade begreppet informationsdoft mycket i visualiseringsgemenskapen i slutet av nittiotalet. Det fanns mycket forskningslitteratur i CHI-samhället, kom ut Xerox Parc: s informationssökande teorier …. de gjorde massor av studier inom detta område. Peter Pirolli och Stu Cards papper kommer att tänka på.

Du kan också tillämpa informationsdoft på frågor. Så till exempel använde jag informationsdoft i vissa visualiseringar som jag designade med gråskalor för att visa hur data uppfyllde vissa kriterier som sattes på skjutreglagen (svart misslyckades en, mörkgrå misslyckades två osv.) Med andra ord är svarta datapunkter sådana som ligger precis utanför din fråga … så att du snabbt kan flytta skjutreglaget för att inkludera dem.

Bob Spence skrev ett papper som sammanfattar massor av dessa tekniker för informationsdoft / rester .

Så även om jag inte kan tillhandahålla data om just den här tekniken finns det verkligen många studier om hur att tillhandahålla den här typen av ledtrådar stöder folk i informationsbaserade uppgifter.

Kommentarer

• Hur relaterar minikartor sig till att innehållet marginaliseras som ’ inte passar i displayen?
• redigerad för att klargöra … det är det underliggande konceptet jag hänvisar till.
• Det är ett stapeldiagram med färger per fel. Jag gör fortfarande inte ’ t se hur detta är relevant. Också varför är det genomgående rött och de flesta misslyckanden den lättaste och med den bakre z-ordningen?

Det fina med att använda blekningstext (för de som inte vet vad detta betyder: gradient transparent overlay så att texten ”bleknar bort” i bakgrundsfärgen under kursen om ett par rader) är att det är mycket större och svårare att missa än ellips. Dessutom, medan ellips nästan alltid fungerar för att indikera, ibland verkar texten bara sluta korrekt på rätt plats, så det finns inget dinglande koncept som uppmuntrar användare att leta efter ytterligare ord. Ellips är också ganska små och lätta att sakna, särskilt för dem med nedsatt syn (som äldre).

Jag har ingen erfarenhet av att använda den själv, och även om jag kan komma ihåg en webbplats jag använder som har den … jag kan inte komma ihåg vilken webbplats jag använder som har den. Jag ber om ursäkt. Jag kan säga att jag gillar den konceptet och jag tror att det fungerar bra för sitt syfte. Var medveten om att det inte ersätter en ”More” -knapp, det ger helt enkelt en mycket större och tydligare indikation på ytterligare innehåll. Du måste fortfarande ha ett område som ger klick (fönsterfärg, knappen Mer) som användarna kommer att dra till när de ser blekningseffekten.

Detta verkar fungera bra med begreppet formläsning, http://www.microsoft.com/typography/ctfonts/WordRecognition.aspx och ordigenkänning. Men i teorin kan jag bara se detta användbart för horisontella (vänster till höger) blekningar och inte också med Amazon ”s vertikal blekning. http://softwareas.com/pure-css-solution-to-avoid-cutting-off-text/ Vi kan jämföra detta med en viskning, även om viskningen är auditiv är detta en liknande effekt på en visuell nivå. Så vitt jag vet har det inte varit några studier, men om någon hittar en, vänligen posta här.

Här ”är ett blekprov jämfört med standardellipsen. http://www.theuxunicorn.com/fade_sample.png