Fading af kanten af tekst kan være et nyttigt alternativ til ellipser, og jeg vil hævde, at det er overlegen på nogle måder.

Forvirrer ikke indholdet

Ellipse erstatter tekstindhold for at udføre deres job, hvilket kan forårsage forvirring om, hvad den faktiske tekst er. Indeholder den ” … “? Hvis jeg klipper / kopierer / indsætter, kommer det med? En fade ændrer den måde, som indholdet vises vises .

I en vis forstand falmer falder i overensstemmelse med forestillingen om en adskillelse mellem visuel og semantisk kodning og ellipser don t.

I iOS 5 ændrede Apple adresselinjen til mobil Safari for at bruge en fade i stedet for ellipser:

Ikke o nly er det mere klart, hvad den aktuelle URL er, men (i det mindste føles det som) du kan se lidt mere af den, når den stiger af.

Vertikalt afkortet tekst

Ellipser fungerer ikke lodret. Her er et eksempel fra JIRA, hvor det nedre indhold rulles, men headeren forbliver på plads (det er også kløgtigt komprimeret lige før dette sker – det er ikke så janky som det måske lyder). Fade hjælper med at kommunikere, at den del, der ruller, går et sted .

Når tekst overløber, er den beholder, men kan ikke pakke ind

Her, i Gmail, er kanten, hvor overløbet er afskåret, hård. Bredden er dynamisk, så ellipser skal indsættes dynamisk, hvilket ikke er praktisk (jeg antager, at de ikke kunne gøre det snappy). Jeg vil hævde, at en udtoning, eller det er fætter “, der sidder under “, kan hjælpe med at kommunikere, hvad der foregår.

En generel baggrund

Generelt er fadeout-effekten stammer fra en skeumorfisme, der kommer fra højere kontrast, der er lettere at parse og synes ” tættere ” til brugeren, og lavere kontrast er vanskeligere og synes mere fjernt – tænk ” falmer i solnedgangen “. En mere konkret skeumorf-slægtning fra iOS fremhæver ideen:

En anden, tuck-under fra Gmaps:

Dette er tydeligvis ikke en super-almindelig konvention, indstillet til at erstatte tekstindpakning eller ellipser. Jeg kun fandt et eksempel på præcis, hvad du taler om. Men jeg synes, det er en gyldig mulighed under visse omstændigheder.

Kommentarer

• +1 At ´ en flot oversigt over forskellige slags gradienter. Skulle ´ have været et blogindlæg;) Jeg håber, du udvider konklusionen til mere end » Men jeg tror, det ‘ er en gyldig mulighed under visse omstændigheder. « da du ser ud til at du ´ Jeg har tænkt meget over det. Btw: Den sidste imho er en ” indre skygge “.Åh, og jeg antager, at du har til hensigt at tage billederne med otte mellemrum for at få listen til at fungere.
• @kaiser Tak for tankerne. Jeg har omarbejdet listerne. Desuden kunne begge de sidste sandsynligvis kaldes en ” indre skygge “, selvom nøglen er, at den ‘ er en indre skygge på en beholder, der afskærer tekst – derfor prøvede jeg at tegne parallellen. Min ordlyd har brug for en vis revision …

Sammenfattet:

punkt med gradienter og udtoninger ²⁾ er altid det samme: De spiller ikke godt med dårlige skærme / LCD-skærme.

Kontrastproblemet

_{Venstre : ser godt ud på designermonitor || Højre : falmer meget tidligere ud.}

farveområde problem

Dårlig skærm:

God skærm:

Som du kan se ovenfor, deler ikke alle brugere din personlige oplevelse på din skærm. Hvis du fik sollys direkte på skærmen, vil resultatet endda vær værre.

Min mening:

Brug ikke fadeouts og gradienter indtil du ikke kan undgå det .

Kommentarer

• Dette er ikke ‘ t hvad jeg troede ” falmet tekst ” betyder. Mit indtryk var, at det ‘ ligner mere: [~ 400 tegn med fast tekst] [~ 50-100 tegn med hurtig falmende tekst] – i hvilket tilfælde forskel i visuel oplevelse på grund af falme ” hastighed ” woudn ‘ t virkelig være signifikant. Indtil OP afklarer, hvad hun mente, er dette spekulation.
• Sikker på, den senere del ville blive fjernet, men det ville ikke ‘ t noget, da kort mængde falmende tekst indebærer, at den ‘ ikke er beregnet til at blive læst, kun beregnet mere som en ikonisk repræsentation af ” mere tekst “, der er tilgængelig.
• Gradienter har ingen hardwareafhængigheder, og de er heller ikke væsentligt skadet af sollys eller dårlige skærme. Du forveksler et designproblem med et UX-problem. Typisk viser du 4-10 linjer uden overlay overhovedet, derefter 2-4 linjer med en fade fra 100% til 0%. Det er irrelevant, om denne fade er nøjagtigt repræsenteret på brugerens ‘ s skærm; så længe brugeren ser en falmning af en eller anden art, har kontrollen tjent sit formål med at indikere yderligere indhold.
• Igen misforstår du. Gradienten dækker ikke hele teksten , kun den nederste del. Om fade er høj eller lav på den sidste del, er ikke særlig relevant for værdien som en indikator for, at der er mere tilgængeligt indhold. Størstedelen af indholdet er fuldt synligt. At være opmærksom på, at gradienten måske er mindre synlig for nogle brugere, er vigtig (så du kan designe i værste fald), men det forhindrer ikke den i at tjene sit formål uanset kvaliteten af en bruger ‘ s skærm.
• Nøglepunktet er, om OP betød, at falmningen sker over 10 miles eller 10 mm. Jeg tror ikke ‘ det ‘ er klart, givet den kortfattede beskrivelse og manglende eksempel. Jeg ‘ er enig i, at enorme gradienter over tekst er dårlige – de eksempler, du inkluderer, ser ret forfærdelige ud under de bedste forhold. Men bare fordi beskrivelsen er vag, betyder det ikke ‘, at du skulle antage det værste tilfælde. Jeg ‘ ville være nysgerrig efter, hvad du synes om mit svar, der behandler en sag, hvor antagelserne måske er mere optimistiske.

Jeg har virkelig ikke set “falmet tekst” -teknikken brugt meget, men jeg tror, at pointen med brugeroplevelsen er at designe til det, der gør det nemt for brugeren Hvis brugeren skal prøve at gætte, hvad der foregår, tror jeg, du besejrer formålet. I de fleste tilfælde er det bare nok at tilføje […] eller [mere …] og give en ren, nem at følge stien for brugeren at få mere information … hvilket er det hele i det hele taget rigtigt?

Du spørger, om brugen af falmet tekst overhovedet er testet?

Som jeg ser det, er dette et eksempel på ideen om at bruge “informationsduft” i en brugergrænseflade. Med andre ord, hvordan kan du visuelt give brugerne en fornemmelse af, hvor dataene ligger i et informationsspa ce I dette tilfælde indikerer falmningen, at der er flere oplysninger i denne retning, som du kan komme til, hvis du ruller eller interagerer på en eller anden måde.

Vi diskuterede begrebet informationsduft meget i visualiseringssamfundet i slutningen af halvfemserne. Der var en masse forskningslitteratur i CHI-samfundet, kom ud af Xerox Parc s informationssøgningsteorier …. de gjorde masser af undersøgelser på dette område. Peter Pirolli og Stu Cards papirer kommer i tankerne.

Du kan også anvende informationsduft på forespørgsler. Så for eksempel brugte jeg informationsduft i nogle visualiseringer, jeg designede ved hjælp af grå skalaer for at vise, hvordan data udfyldte bestemte kriterier, der var angivet på skyderne (sort mislykkedes en, mørk grå mislykkedes to osv.). Med andre ord er sorte datapunkter dem, der ligger lige uden for din forespørgsel … så du hurtigt kan flytte skyderen for at inkludere dem.

Bob Spence skrev et papir, der opsummerede mange af disse teknikker til informationsduft / restprodukter .

Så selvom jeg ikke kan give data om denne særlige teknik, er der virkelig mange undersøgelser af, hvordan man leverer denne slags tegn understøtter folk i informationsbaserede opgaver.

Kommentarer

• Hvordan relaterer minikort til udtoning af margenerne på indhold, der ikke ‘ ikke passer i displayet?
• redigeret for at afklare … det er det underliggende koncept, jeg henviser til.
• Det er et søjlediagram med farver pr. fejl. Jeg har stadig ikke ‘ t se, hvordan dette er relevant. Også hvorfor er den gennemgåede røde og de fleste fejl den letteste og med den bageste z-rækkefølge?

Det pæne ved at bruge falmende tekst (for dem der ikke ved hvad dette betyder: gradient gennemsigtig overlay, så teksten “falmer væk” i baggrundsfarven i løbet af løbet et par linjer) er, at det er meget større og sværere at gå glip af end ellipsis. Derudover, mens ellipsis næsten altid virker for at indikere, synes teksterne undertiden bare at ende korrekt på det rigtige sted, så der er ikke noget dinglende koncept, der tilskynder brugerne til at søge efter flere ord. Ellipsis er også ret lille og let at gå glip af, især for dem med nedsat syn (såsom ældre).

Jeg har ingen erfaring med at bruge det selv, og mens jeg kan huske et sted, jeg bruger, som har det … Jeg kan ikke huske hvilket site, jeg bruger, der har det. Jeg undskylder. Jeg kan sige, at jeg kan lide koncept, og jeg tror, det fungerer godt til sit formål. Vær opmærksom på, at det ikke erstatter en “Mere” -knap, det giver simpelthen en meget større og klarere indikation af yderligere indhold. Du skal stadig have et område, som giver klik (vinduesskygge, knap Mere), som brugerne vil tiltrække, når de ser den falmende effekt.

Dette ser ud til at fungere godt med begrebet formlæsning, http://www.microsoft.com/typography/ctfonts/WordRecognition.aspx , og ordgenkendelse. Imidlertid kan jeg i teorien kun se dette nyttigt til vandret (venstre mod højre) falmning og ikke også med Amazons lodret fade. http://softwareas.com/pure-css-solution-to-avoid-cutting-off-text/ Vi kunne sidestille dette med en hvisken, skønt hvisken er auditiv, er det en lignende effekt på et visuelt niveau. Efter min viden har der ikke været nogen undersøgelser, men hvis nogen finder en, bedes du skrive her.

Her er “en fade-prøve i forhold til standardellipsen. http://www.theuxunicorn.com/fade_sample.png