Het vervagen van de rand van tekst kan een handig alternatief zijn voor ellipsen, en ik zou zeggen dat het in sommige opzichten superieur is.

Verwar de inhoud niet

Ellipsen vervangen tekstinhoud om hun werk te doen, wat verwarring kan veroorzaken over wat de daadwerkelijke tekst is. Bevat het de ” … “? Als ik knip / kopieer / plak, gebeurt dat dan? Een vervaging verandert de manier waarop de inhoud wordt weergegeven .

In zekere zin voldoen fades aan het idee van een scheiding tussen visuele en semantische codering en ellipsen niet.

In iOS 5, heeft Apple de adresbalk gewijzigd voor mobiele Safari om een fade te gebruiken in plaats van ellipsen:

Niet o Alleen is het duidelijker wat de daadwerkelijke URL is, maar (het voelt tenminste als) je kunt er iets meer van zien als het wegglijdt.

Verticaal afgekapte tekst

Ellipsen werken niet verticaal. Hier is een voorbeeld van JIRA, waar de lagere inhoud wordt gescrold, maar de header blijft staan (hij is ook slim gecomprimeerd net voordat dit gebeurt – het is niet zo onhandig als dat misschien klinkt). De fade helpt communiceren dat het deel dat aan het scrollen is ergens heen gaat .

Wanneer tekst overloopt, is het een container maar kan het niet omwikkelen

Hier, in Gmail, is de rand waar de overloop wordt afgebroken moeilijk. De breedte is dynamisch, dus ellipsen zouden dynamisch moeten worden ingevoegd, wat niet praktisch is (ik neem aan dat ze het niet pittig konden maken). Ik zou zeggen dat een fade-out, of het is een neef van de ” plooi onder “, kan helpen communiceren wat er aan de hand is.

Enige algemene achtergrond

In het algemeen is het fade-out-effect komt voort uit een skeumorfisme dat voortkomt uit het feit dat een hoger contrast gemakkelijker te ontleden is en ” dichter ” lijkt voor de gebruiker, en een lager contrast moeilijker is en lijkt verder weg – denk aan ” vervagend in de zonsondergang “. Een meer concreet familielid van iOS benadrukt het idee:

Nog een, weggestopt uit Gmaps:

Het is duidelijk dat dit geen “super-gebruikelijke conventie is, ingesteld om tekstomloop of ellipsen te vervangen. Ik alleen heeft een voorbeeld gevonden van waar je het over hebt. Maar ik denk dat het “in sommige omstandigheden een geldige optie is.

Reacties

• +1 Dat ´ is een mooi overzicht van verschillende soorten verlopen. Mocht ´ een blogpost zijn geweest;) Ik hoop dat je de conclusie uitbreidt tot meer dan » Maar ik denk dat het ‘ is een geldige optie in sommige omstandigheden. « aangezien het lijkt alsof u ´ heb er veel over nagedacht. Btw: de laatste imho is een ” binnenschaduw “.Oh, en ik denk dat je de afbeeldingen met acht spaties moet plaatsen om de lijst te laten werken.
• @kaiser Bedankt voor je gedachten. Ik herwerkte de lijsten. Waarschijnlijk kunnen beide laatste ook een ” binnenschaduw ” worden genoemd, hoewel de sleutel is dat het ‘ s een innerlijke schaduw op een container die tekst afkapt – vandaar dat ik probeerde de parallel te trekken. Mijn formulering heeft enige herziening nodig …

Samengevat:

De punt met verlopen en fadeouts ²⁾ is altijd hetzelfde: ze spelen niet goed met slechte monitoren / LCDs.

Het contrastprobleem

_{Links : ziet er goed uit op de ontwerpersmonitor || Rechts : vervagen veel eerder.}

De kleurbereik probleem

Slechte monitor:

Goede monitor:

Zoals u hierboven kunt zien, zal niet elke gebruiker uw persoonlijke ervaring op uw monitor delen. Als u direct zonlicht op het scherm krijgt, zal het resultaat zelfs nog erger zijn.

Mijn mening:

Gebruik geen fade-outs en verlopen totdat je het niet kunt vermijden .

Opmerkingen

• Dit is niet ‘ t wat ik dacht dat ” vervaagde tekst ” betekent. Mijn indruk was dat het ‘ meer lijkt op: [~ 400 tekens aan vaste tekst] [~ 50-100 tekens aan snel vervagende tekst] – in welk geval verschil in visuele ervaring vanwege fade ” snelheid ” woudn ‘ t echt significant zijn. Echter, totdat het OP duidelijk maakt wat ze bedoelde, is dit speculatie.
• Zeker, het laatste deel zou worden gestript, maar dat zou ‘ er niet toe doen, aangezien de korte hoeveelheid vervagende tekst impliceert dat het ‘ s niet bedoeld is om te worden gelezen, alleen meer bedoeld als een iconische weergave van de ” meer tekst ” die beschikbaar is.
• Gradiënten hebben geen hardware-afhankelijkheden, noch worden ze significant geschaad door zonlicht of slechte monitoren. U verwart een ontwerpprobleem met een UX-probleem. Meestal geeft u 4-10 regels weer zonder overlay en vervolgens 2-4 regels met een fade van 100% naar 0%. Het is niet relevant of die fade exact wordt weergegeven op de monitor van de gebruiker ‘; zolang de gebruiker een een of andere soort vervaging ziet, heeft het besturingselement zijn doel gediend om verdere inhoud aan te geven.
• Nogmaals, je begrijpt het verkeerd. Het verloop omvat niet alle tekst , alleen het onderste gedeelte. Of de fade hoog of laag is op dat laatste deel, is niet bijzonder relevant voor de waarde als indicator dat er meer inhoud beschikbaar is. Het merendeel van de inhoud is volledig zichtbaar. Je bewust zijn van het feit dat het verloop voor sommige gebruikers misschien minder zichtbaar is, is belangrijk (zodat je kunt ontwerpen voor het ergste geval), maar dat belet niet dat het zijn doel dient, ongeacht de kwaliteit van een gebruiker ‘ s scherm.
• Het belangrijkste punt is of het OP betekende dat de fade plaatsvindt over 10 mijl of 10 mm. Ik denk niet dat ‘ het ‘ s duidelijk is, gezien de beknopte beschrijving en het gebrek aan voorbeelden. Ik ‘ ben het ermee eens dat enorme kleurovergangen over tekst slecht zijn – de voorbeelden die je opneemt, zien er in de beste omstandigheden behoorlijk slecht uit. Maar alleen omdat de beschrijving vaag is, betekent ‘ niet dat je moet uitgaan van het ergste geval. Ik ‘ zou benieuwd zijn naar wat je van mijn antwoord vindt dat betrekking heeft op een geval waarin de aannames misschien optimistischer zijn.

Ik zie de “vervaagde tekst” -techniek echt niet veel gebruikt, maar ik denk dat het doel van de gebruikerservaring is om te ontwerpen voor alles wat het de gebruiker gemakkelijk maakt . Als de gebruiker moet proberen te raden wat er aan de hand is, denk ik dat je het doel verslaat. In de meeste gevallen is het voldoende om de […] of [meer …] toe te voegen en een schoon, gemakkelijk te volgen pad te bieden. voor de gebruiker om meer informatie te krijgen … wat is toch het hele punt toch?

U vraagt of het gebruik van vervaagde tekst überhaupt is getest?

Zoals ik het zie is dit een voorbeeld van het idee om informatiegeur te gebruiken in een gebruikersinterface. Met andere woorden, hoe kunt u gebruikers visueel een idee geven van waar de gegevens zich bevinden in een informatiecentrum ce. In dit geval geeft het vervagen aan dat er meer informatie in deze richting is die u kunt krijgen als u scrollt of op een of andere manier interactie heeft.

We hebben het concept van informatiegeur eind jaren negentig veel besproken in de visualisatiegemeenschap. Er was veel onderzoeksliteratuur in de CHI-gemeenschap, kwam uit de informatiefoerageertheorieën van Xerox Parc … ze deden veel studies op dit gebied. Ik denk aan de papers van Peter Pirolli en Stu Card.

U kunt ook informatiegeur op zoekopdrachten toepassen. Dus ik gebruikte bijvoorbeeld informatiegeur in sommige visualisaties die ik ontwierp met behulp van grijze schalen om te laten zien hoe gegevens voldeden aan bepaalde criteria die op schuifregelaars waren ingesteld (zwart mislukt, donkergrijs mislukt twee, enz.). Met andere woorden: zwarte gegevenspunten zijn punten die net buiten uw zoekopdracht liggen … dus u kunt de schuifregelaar snel verplaatsen om ze op te nemen.

Bob Spence schreef een paper met een samenvatting van veel van deze informatie geur / residu technieken .

Dus hoewel ik geen gegevens kan verstrekken over deze specifieke techniek, zijn er inderdaad veel studies over hoe het verstrekken van dit soort aanwijzingen mensen ondersteunt bij op informatie gebaseerde taken.

Opmerkingen

• Hoe verhouden minikaarten zich tot het vervagen van de marges van inhoud die niet ‘ niet in het scherm passen?
• bewerkt om te verduidelijken … het is het onderliggende concept waarnaar ik verwijs.
• Het is een staafdiagram met kleuren per mislukking. Ik heb nog steeds geen ‘ zie je niet hoe dit relevant is. En waarom is het rode-geslaagd-rood en de meeste mislukkingen het lichtst en met de achterste z-volgorde?

Het leuke van het gebruik van vervagende tekst (voor degenen die niet weten wat dit betekent: transparante overlay met verloop zodat de tekst “vervaagt” in de achtergrondkleur over de cursus als een paar regels) is dat het veel groter en moeilijker te missen is dan ellips. Bovendien, hoewel ellips bijna altijd werkt om aan te geven, lijkt de tekst soms gewoon op de juiste plek te eindigen, dus er is geen bungelend concept dat gebruikers aanmoedigt om naar extra woorden te zoeken. Ellipsis zijn ook vrij klein en gemakkelijk over het hoofd te zien, vooral voor mensen met verminderd gezichtsvermogen (zoals ouderen).

Ik heb er zelf geen ervaring mee, en hoewel ik me een site kan herinneren die ik gebruik … ik kan “me niet herinneren welke site die ik gebruik heeft. Mijn excuses. Ik kan zeggen dat ik de concept en ik denk dat het goed werkt voor zijn doel. Houd er rekening mee dat het geen “Meer” -knop vervangt, het geeft gewoon een veel grotere en duidelijkere indicatie van aanvullende inhoud. U moet nog steeds een gebied hebben waarop u kunt klikken (vensterscherm, knop Meer) waar gebruikers naartoe zullen trekken als ze het vervagende effect zien.

Dit type effect zou alleen geschikt zijn voor het scrollen van inhoud (bijv. tickers, nieuwsfeeds enz.), waar ze van de ene kant scrollen (fade-in) en fade-out naar de andere kant.

Dit lijkt goed te werken met het concept van het lezen van vormen, http://www.microsoft.com/typography/ctfonts/WordRecognition.aspx , en woordherkenning. In theorie kan ik dit echter alleen nuttig zien voor horizontale (van links naar rechts) fades en niet ook met Amazon s verticale fade. http://softwareas.com/pure-css-solution-to-avoid-cutting-off-text/ We zouden dit kunnen gelijkstellen aan een gefluister, hoewel het gefluister auditief is, is dit een soortgelijk effect op een visueel niveau. Voor zover ik weet zijn er geen studies geweest, maar als iemand er een vindt, plaats dan hier een bericht.

Hier “een vervagingsvoorbeeld versus de standaard ellipsis. http://www.theuxunicorn.com/fade_sample.png