Fading av kanten av tekst kan være et nyttig alternativ til ellipser, og jeg vil hevde at det er overlegen på noen måter.

Ikke forvirre innholdet

Ellipser erstatter tekstinnhold for å gjøre jobben sin, noe som kan føre til forvirring om hva den faktiske teksten er. Inkluderer den » … «? Hvis jeg klipper / kopierer / limer inn, kommer det med? En fade endrer måten innholdet vises vises .

I en viss forstand falmer fader i samsvar med forestillingen om en separasjon mellom visuell og semantisk koding og ellipser ikke.

I iOS 5 endret Apple adressefeltet for mobil Safari for å bruke en fade i stedet for ellipser:

Ikke o det er tydeligere hva den faktiske nettadressen er, men (i det minste føles det som) du kan se litt mer av den når den strekker seg.

Vertikalt avkortet tekst

Ellipser fungerer ikke loddrett. Her er et eksempel fra JIRA, der det nedre innholdet blir rullet, men toppteksten blir liggende (den er også smart komprimert like før dette skjer – den er ikke så janky som det kan høres ut). Fade hjelper til med å kommunisere at delen som ruller går et sted .

Når tekst flyter over, er det beholderen, men kan ikke pakke inn

Her, i Gmail, er kanten der overløpet er avskåret vanskelig. Bredden er dynamisk, så ellipser må settes inn dynamisk, noe som ikke er praktisk (jeg antar at de ikke kunne gjøre det snappy). Jeg vil hevde at en fade out, eller det er kusinen » tuck under «, kan hjelpe til med å kommunisere hva som skjer.

Noe generell bakgrunn

Generelt er fadeout-effekten stammer fra en skeumorfisme som kommer av at høyere kontrast er lettere å analysere og virker » nærmere » til brukeren, og lavere kontrast blir vanskeligere og synes mer fjernt – tenk » falmer i solnedgangen «. En mer konkret skeumorf-slektning fra iOS fremhever ideen:

En annen, tuck-under fra Gmaps:

Dette er tydeligvis ikke en super vanlig konvensjon, satt til å erstatte tekstinnpakning eller ellipser. Jeg bare fant et eksempel på nøyaktig hva du snakker om. Men jeg tror det er et gyldig alternativ under noen omstendigheter.

Kommentarer

• +1 At ´ en fin oversikt over forskjellige slags graderinger. Skulle ´ ha vært et blogginnlegg;) Jeg håper du utvider konklusjonen til mer enn » Men jeg tror det ‘ er et gyldig alternativ i noen tilfeller. « da du ser ut til at du ´ har tenkt mye på det. Btw: Den siste imho er en » indre skygge «.Åh, og jeg antar at du må tenke bildene med åtte mellomrom for å få listen til å fungere.
• @kaiser Takk for tankene. Jeg bearbeidet listene. Sannsynligvis kan begge de siste kalles en » indre skygge «, selv om nøkkelen er at den ‘ er en indre skygge på en beholder som avkorter tekst – derfor hvorfor jeg prøvde å tegne parallellen. Min ordlyd trenger litt revisjon …

Oppsummert:

The punkt med stigninger og uttoninger ²⁾ er alltid det samme: De spiller ikke bra med dårlige skjermer / LCD-skjermer.

Kontrastproblemet

_{Venstre : ser bra ut på designermonitoren || Høyre : falmer ut mye tidligere.}

fargeområde problem

Dårlig skjerm:

God skjerm:

Som du kan se ovenfor, vil ikke alle brukere dele din personlige opplevelse på skjermen. Hvis du fikk sollys direkte på skjermen, vil resultatet til og med vær verre.

Min mening:

Ikke bruk fadeouts og gradienter til du ikke kan unngå det .

Kommentarer

• Dette er ikke ‘ t det jeg trodde » falmet tekst » betyr. Mitt inntrykk var at det ‘ er mer som: [~ 400 tegn med solid tekst] [~ 50-100 tegn med raskt falmende tekst] – i så fall forskjell i visuell opplevelse pga. falme » hastighet » woudn ‘ t være virkelig viktig. Inntil OP avklarer hva hun mente, er dette imidlertid spekulasjoner.
• Visst, den senere delen ville bli fjernet, men det ville ikke ‘ t saken, siden kort mengde falmende tekst innebærer at den ‘ ikke er ment å bli lest, men bare ment som en ikonisk fremstilling av » mer tekst » som er tilgjengelig.
• Gradienter har ingen maskinvareavhengigheter, og blir heller ikke skadet betydelig av sollys eller dårlige skjermer. Du forveksler et designproblem med et UX-problem. Vanligvis vil du vise 4-10 linjer uten overlegg i det hele tatt, deretter 2-4 linjer med en fade fra 100% til 0%. Det er irrelevant om den falmingen er nøyaktig representert på brukerens ‘ s skjerm; så lenge brukeren ser en falming av noe slag, har kontrollen tjent sitt formål å indikere ytterligere innhold.
• Igjen, du misforstår. Gradienten dekker ikke all teksten , bare den nederste delen. Hvorvidt blekningen er høy eller lav på den siste delen, er ikke spesielt relevant for verdien som en indikator på at det er mer innhold tilgjengelig. Størstedelen av innholdet er fullt synlig. Å være klar over at gradienten kan være mindre synlig for noen brukere er viktig (slik at du kan designe i verste fall), men det forhindrer ikke at den tjener formålet, uavhengig av brukerens kvalitet ‘ s skjerm.
• Nøkkelpunktet er om OP mente at fade skjer over 10 miles eller 10 mm. Jeg tror ikke ‘ det ‘ er klart, gitt den kortfattede beskrivelsen og mangelen på eksempler. Jeg er ‘ enig i at store graderinger over tekst er dårlige – eksemplene du inkluderer, ser ganske forferdelig ut under de beste forholdene. Men bare fordi beskrivelsen er vag, betyr ikke ‘ at du bør anta det verste tilfellet. Jeg ‘ ville være nysgjerrig på hva du synes om svaret mitt som adresserer en sak der kanskje antagelsene er mer optimistiske.

Jeg har virkelig ikke sett at «falmet tekst» -teknikken brukes mye, men jeg tror poenget med brukeropplevelsen er å designe for det som gjør det enkelt for brukeren Hvis brukeren må prøve å gjette hva som skjer, tror jeg du beseirer formålet. I de fleste tilfeller vil bare å legge til […] eller [mer …] være tilstrekkelig og gi en ren og enkel å følge banen for at brukeren skal få mer informasjon … hva er egentlig poenget?

Du spør om bruken av falmet tekst i det hele tatt er testet?

Som jeg ser det er dette et eksempel på ideen om å bruke «informasjonsduft» i et brukergrensesnitt. Med andre ord hvordan kan du visuelt gi brukerne en følelse av hvor dataene ligger i et informasjonsspa ce I dette tilfellet indikerer fading at det er mer informasjon i denne retningen som du kan komme til hvis du blar eller samhandler på en eller annen måte.

Vi diskuterte begrepet informasjonsduft mye i visualiseringssamfunnet på slutten av nittitallet. Det var mye forskningslitteratur i CHI-miljøet, kom ut Xerox Parc s informasjonsforingsteorier …. de gjorde mange studier på dette området. Peter Pirolli og Stu Card sine papirer kommer til å tenke.

Du kan også bruke informasjonsduft på spørsmål. Så for eksempel brukte jeg informasjonsduft i noen visualiseringer jeg designet med grå skalaer for å vise hvordan data oppfylte visse kriterier satt på glidebrytere (svart mislyktes en, mørk grå mislyktes to osv.). Med andre ord er svart datapunkt de som ligger rett utenfor spørringen din … slik at du raskt kan flytte glidebryteren for å inkludere dem.

Bob Spence skrev et papir som oppsummerer mange av disse teknikker for informasjonsduft / restmateriale .

Så selv om jeg ikke kan gi data om denne spesifikke teknikken, er det virkelig mange studier om hvordan å tilby denne typen signaler støtter folk i informasjonsbaserte oppgaver.

Kommentarer

• Hvordan forholder minikart seg til å falme ut av margene på innholdet som ikke ‘ ikke passer i skjermen?
• redigert for å avklare … det er det underliggende konseptet jeg henviser til.
• Det er et søylediagram med farger per feil. Jeg har fortsatt ikke ‘ t se hvordan dette er relevant. Også hvorfor er den gjennomgående røde og de fleste feil den letteste og med den bakerste z-rekkefølgen?

Det fine med å bruke falmende tekst (for de som ikke vet hva dette betyr: gradient gjennomsiktig overlegg slik at teksten «blekner bort» i bakgrunnsfargen over løpet hvis et par linjer) er at det er mye større og vanskeligere å savne enn ellips. I tillegg, mens ellips nesten alltid fungerer for å indikere, ser det ut til at teksten bare ender riktig på riktig sted, så det er ikke noe dinglende konsept som oppfordrer brukerne til å lete etter flere ord. Ellipsis er også ganske liten og lett å savne, spesielt for de med nedsatt syn (som eldre).

Jeg har ingen erfaring med å bruke det selv, og selv om jeg kan huske et nettsted jeg bruker som har det … Jeg kan ikke huske hvilket nettsted jeg bruker som har det. Jeg beklager. Jeg kan si at jeg liker konseptet, og jeg tror det fungerer bra for formålet. Vær oppmerksom på at det ikke erstatter en «Mer» -knapp, det gir ganske enkelt en mye større og tydeligere indikasjon på tilleggsinnhold. Du må fortsatt ha et område som gir deg muligheten til å klikke (vinduskygge, Mer-knapp) som brukerne vil henvende seg til når de ser falmende effekt.

Dette ser ut til å fungere godt med begrepet formlesing, http://www.microsoft.com/typography/ctfonts/WordRecognition.aspx , og ordgjenkjenning. Imidlertid kan jeg i teorien bare se dette nyttig for horisontale (fra venstre til høyre) blekninger og ikke også med Amazons vertikal fade. http://softwareas.com/pure-css-solution-to-avoid-cutting-off-text/ Vi kan likestille dette med en hvisking, selv om hvisken er auditiv, er dette en lignende effekt på et visuelt nivå. Så vidt jeg vet, har det ikke vært noen studier, men hvis noen finner en, så legg inn her.

Her «er en falmeprøve mot standard ellips. http://www.theuxunicorn.com/fade_sample.png