Door Femme Taken

UX Designer

Vernieuwing van de Tweakers-smileys - Development-iteratie #270

17-10-2023 • 10:23

157

In de afgelopen week hebben we de eerste lichting nieuwe smileys geïntroduceerd. Nadat we de afgelopen 25 jaar dezelfde iconset hebben gebruikt, werd het hoog tijd om de lageresolutiebitmaps te vervangen door vectorbeelden. De nieuwe smileys worden in hoge kwaliteit weergegeven op high-dpi-beeldschermen en zijn geschikt voor weergave in zowel lichte als donkere modus.

25 jaar legacy

Tweakers smiley set 1999
Originele smileys uit 1999

De smileys zijn in de basis in gebruik sinds 1999. De exacte oorsprong van de originele set is niet meer bekend. In de loop der jaren is de set uitgebreid met smileys die door users zijn gemaakt in dezelfde stijl.

De smileys zijn herkenbaar voor tweakers en geliefd bij onze users, maar het zijn wel lageresolutiebitmaps in gif-formaat. De smileys worden pixelig weergegeven op high-dpi-beeldschermen zoals 4k-monitors en displays van smartphones en tablets. Voor dark mode zijn de smileys ook ongeschikt vanwege het ontbreken van alpha transparency. Omdat de smileys zijn gemaakt met antialiasing op een witte achtergrond, ontstaat er in dark mode een lichtgrijze, gekartelde rand rond de smileys.

Om de smileys geschikt te maken voor hogeresolutiebeeldschermen en dark mode, zit er niets anders op dan ze allemaal overtekenen. Vanwege hun iconische status hebben we ervoor gekozen om de oude smileys zo getrouw mogelijk na te maken.

Stapsgewijze uitrol

Het opnieuw maken van alle smileys is een behoorlijke klus. We zijn begonnen met de release van een eerste lichting statische smileys. Sinds vorige week kun je deze gebruiken in nieuwe posts. We zullen de resterende smileys stapsgewijs omzetten naar vector. Geanimeerde gifjes worden daarbij vervangen door SVG's met css-animaties. Omdat de nieuwe smileys een andere URL hebben en reacties en forumposts na het posten omwille van de prestaties worden geparset naar HTML, zijn de nieuwe smileys nog niet te zien in oude posts. Zodra de set compleet is, zullen we alle posts opnieuw parsen, zodat de nieuwe smileys overal zichtbaar worden.

Bitmap vs vector smiley
Bitmap- vs. vectorsmiley

En verder

  • De Buddies-functionaliteit op het forum is uitgefaseerd, omdat deze nauwelijks nog werd gebruikt.
  • De icoontjes onder de Links op MyReact (voorbeeld) hebben we vernieuwd, zodat ze ook goed leesbaar zijn in dark mode.
  • Het beoordelen van een gebruiker in Vraag & Aanbod is hersteld naar de originele werking, namelijk via een pop-up. Enige tijd geleden was de pop-up er per abuis uitgesloopt.
  • Er zat een bug in het 'Daling in procenten'-filter op de Prijsdalingen-pagina. Dat is nu verholpen.

Reacties (157)

157
157
133
1
0
16
Wijzig sortering
Afaik komt het grootste deel van de originele smiley’s uit de destijds met UBB meegeleverde standaardset, aangevuld met wat user generated creaties (ook een paar van Fok!, wat tot mijn verbazing nog steeds blijkt te bestaan)

[Reactie gewijzigd door Daniel op 22 juli 2024 16:46]

AuteurFemme UX Designer @Daniel18 oktober 2023 14:38
De smileys zijn niet de oorspronkelijke die werden meegeleverd met UBB, die waren erg lelijk en leken op deze https://steelguitarforum.com/faq.html .

Voor zover ik me kan herinneren heb ik de betere smileys gevonden in een post van iemand op het support forum van Ultimate Bulletin Board maar wie de maker is weet ik niet meer.
Ik herinner me een moment dat op IRC de gebruiker Firefox? (of net anders) de smileys liet ziet, voor het eerst. Maar ik twijfel of dat de hele set was, of dat hij een uitbreiding had getekend. Ik meen wel dat een van de kerngebruikers uit die tijd ze zelf had gemaakt, gebaseerd op iets dat gevonden was. Maar volgens mij zat er echt handwerk in van iemand...

Leuk om te zien dat ze al die tijd nog gebruikt worden...
8)7

Ik voel me oud bij de constatering dat ik de gekartelde randjes wel wat vindt hebben.. is n.m.m. onderdeel van het iconische. Maar snap de beslissing wel
ik ken het ook, maar ik realiseer me ook dat om dat soort dingen jongere personen naar ouderen als achtergebleven idioten kijken, die hangen aan totaal overbodige nonsens.

en laten we wel zijn, dat soort ideeen werden vijfentwintig jaar ook uitgesproken door mensen die absoluut de PCM en C't wilden blijven kopen als papieren magazine om zich bij te lezen over computers en dat internet maar nieuwerwets iets vonden. ;)

[Reactie gewijzigd door RM-rf op 22 juli 2024 16:46]

Volgens mij was het de C't waar ik vroeger nog wel eens BASIC(?) code uit over aan het typen ben geweest... 8-)
Oh man... Ik krijg nu nog de rillingen als ik daaraan denk.

Niet direct vanuit de C!T, maar de (voor mij) voorganger 64'er. Dit was een Duits blad specifiek (hoe kan het ook anders) voor de C64 (en vic20).
Zij hebben op een gegeven moment een eigen interpreter geschreven zodat mensen sneller code konden overkloppen uit het blad. Dit heette MSE (MachinenSpracheEditor). Zie ook: https://www.c64-wiki.de/wiki/MSE.
Urenlang niks anders dan (in het begin) hex codes overkloppen. In V2.0 maakten ze het efficienter door alle alfanummerieke karakters te gaan gebruiken. Hierdoor hoefde je minder te typen (nja, de programma's die ze konden publiceren werden vooral groter). Gelukkig zat er op elke regel een checksum....

Tegenwoordig duik je ff op Github en klaar :)
Goeie herinneringen aan. De 64-er kwam vanuit de personeelsvereniging (?) van de PTT Telefonie bij ons thuis. Mooi blad! Die broncodes waren de gruwel. Ik had die editor niet en zonder die checksum was het eigenlijk onbegonnen werk
Same here. Is iets nostalgisch denk ik. Of we worden gewoon oud :p
Tijd voor een 8-bits style sheet? :P
Love it, laat maar komen :D
inderdaad, het is juist stukje nostalgie om die oude smiley's te behouden
Ik word ook oud, ik vond de knulligheid van de vorige wel leuk. :o
Gekarteld is tof maar helaas wordt het wat blurry op hogere resoluties. Overigens op te lossen met image-rendering: pixelated.
Ik ben oud en vindt de nieuwe mooier :P
deze vind ik eerlijk gezegd niet zo goed gelukt.. op een of andere manier staan de oogjes niet goed uitgelijnd.
Dat zie je ook in de afbeelding onder het artikel.
de normale smiley is wel okay, kijkt wat opzij ofzo.. het knipoogje vind ik minder
In de grote afbeelding onder het artikel zie je ook dat de ogen in het origineel (links) niet precies gecentreerd konden worden op 16x16 pixels*. Daaraan zijn we gewend geraakt. Maar nu hij zo goed mogelijk is nagemaakt valt het toch weer op.

*) Waarschijnlijk zijn de originele smileys groter ontworpen en daarna geschaald naar 16x16 pixels.
Deze vind ik eerlijk gezegd ook niet echt geslaagd? Die bril is gewoon raar... 8-)
Oef ik vind die nieuwe helemaal niks :')
|:(

Nu de gifjes nog

[Reactie gewijzigd door Chilly_Willy op 22 juli 2024 16:46]

:) :( :o :D ;) :+ }> :'( :P :9 :*) O+ :O }:O :Y) :z ;( 8-) :? |:( :9~ :> :/ :| :X 8)7 O-) _/-\o_

Spieken, het zal aan mij liggen, maar somehow vind ik een boel nog steeds kartelig uit zien, maar misschien moet ik opnieuw naar specsavers dan 8)7

zit wel op een 1080p scherm en donker layout

[Reactie gewijzigd door smv op 22 juli 2024 16:46]

AuteurFemme UX Designer @smv17 oktober 2023 11:12
Op een standaard dpi beeldscherm gaan de nieuwe smileys alleen een verbetering zijn in dark mode. Nog niet alle smileys zijn omgezet dus bij sommigen zie je nog een grijze rand in dark mode. Light mode op een std dpi beeldscherm gaat niet beter worden. Op high dpi beeldscherm zie je wel een groot verschil in scherpte.
Zelfs de nieuwe smilies hebben onbedoelde randen. De gele kleur komt achter de rand van de smilies uit: https://www.imgdumper.nl/...hot_2023-10-17_123737.png
Ik zie dat hier ook, of zou dat express zijn. :)
Dank je wel voor je uitleg, had inderdaad begrepen dat niet alles is omgezet, dat zie ik ook terug.

Mooi excuus om te sparen voor een high dpi scherm :-)
Nog niet alle emoji's zijn aangepast:
We zijn begonnen met de release van een eerste lichting statische smileys. Sinds vorige week kun je deze gebruiken in nieuwe posts. We zullen de resterende smileys stapsgewijs omzetten naar vector. Geanimeerde gifjes worden daarbij vervangen door SVG's met css-animaties.
even in je browser flink inzoomen, dan beginnen de verschillen wel duidelijk de overhand te hebben. Hoewel niet een zeer noodzakelijke update, snap ik het wel en is daarmee de kwaliteit van weergave wel verhoogd.
Ze waren sowieso al klein.
Heb een CSS snippet gemaakt zodat de nieuwe emojis wat groter zijn in reacties en het forum :)

Grotere nieuwe Emojis
Deze smiley vind ik persoonlijk de minst gelukte. Lijkt wel dat ie huilt ipv een happy-face trekt.
Ik zag net opeens dat het geen mond is maar een ringbaard, en nu kan ik het niet meer niet zien... #help
Nou bedankt hoor! :(
Nah ben ik het niet mee eens, ik vind dat ie doet wat ie hoort te doen en dat is absoluut niet huilen…
Ja het lijkt een soort clown nu
Het zou mooi zijn als de legacy smilies ook beschikbaar blijven. Deze vind ik toch wat toffer en past wat meer bij Tweakers imo :)
Je zou ze via WayBackMachine of vergelijkbaar kunnen "redden" en dan met wat Custom CSS de nieuwe door de oude kunnen vervangen.
custom css:
img[alt=":)"] {
content: url(https://tweakers.net/g/s/smile.gif);
}
img[alt=";)"] {
content: url(https://tweakers.net/g/s/wink.gif);
}
oude smileys staan gewoon (nog) op t.net, dus je hoeft ze verder niet te redden via externe sources.
ik weet ook niet zeker of ze daar blijven staan (maar dat kan best mogelijk zijn)

[Reactie gewijzigd door RM-rf op 22 juli 2024 16:46]

Zodra we alle content hebben geherparsed, halen we de oude gifjes van de servers af; we gebruiken ze immers niet meer. Als je de gifjes als fallback zou willen blijven gebruiken zou je ze dus elders moeten gaan hosten om te voorkomen dat je straks kruisjes krijgt.
Of je typt gewoon : )
Dat is pas legacy ; )
Of, met wat magie, zonder spatie: :)
Ik kan niet wachten tot mijn favoriete smiley is aangepast :')
Ik ben benieuwd hoe deze wordt:
7(8)7 en 8)7
Vooral de uiting met de draaiende oogjes zijn prachtig.

[Reactie gewijzigd door AW_Bos op 22 juli 2024 16:46]

Ja die 2 smilies moeten echt blijven. Ze zijn iconisch.
Misschien ook een mooi tijdstip voor het introduceren van de dansende banaan op Tweakers?
je was me net voor }>
Precies! Ik zag de .plan en hoopte dat deze misschien ook aangepast zou zijn en kreeg helemaal een versnelde hartslag van het idee, wat ironisch genoeg best wel :') is :+

[Reactie gewijzigd door Patriot op 22 juli 2024 16:46]

Ik had het al gezien ja! Goed werk! Ik hoop dat de rest ook gauw komt. Zoals *O* en 8)7
*O* is nog een oude. Is nog een .gif en geen .svg ;)
De blije en treurige pompom is wel één van de leukste oOo

Ben ook blij dat ze de originele smileys blijven gebruiken. Vind ze stukken spontaner en authentieker dan bv de Whatsapp/Windows/Facebook/enz smileys

-O-

Misschien nog wat meer vlaggetjes ivm de mondialisering? :)F :)B
"Het opnieuw maken van alle smileys is een behoorlijk klus."

Hoe is dit niet een kwestie van een half uurtje werk met behulp van DALL-E of Midjourney? (waarvan 20 minuten de juiste prompt fine-tunen).

Zelfs helemaal opnieuw maken kan toch niet veel werk zijn als je een origineel hebt om na te maken, de kleur, stijl en looks staan voor 80% al vast? Ik bedoel, vectoren en extra scherp zijn leuk en er zal vast wat finetuning aan te pas komen, maar het blijven icoontjes die bijna nooit groter dan een paar milimeter worden weergegeven.

(Of is Tweakers zo bureacratisch dat er over ieder nieuw ontwerp meerdere keren vergaderd en gestemd moet worden?)
Zelfs helemaal opnieuw maken kan toch niet veel werk zijn als je een origineel hebt om na te maken, de kleur, stijl en looks staan voor 80% al vast? Ik bedoel, vectoren en extra scherp zijn leuk en er zal vast wat finetuning aan te pas komen, maar het blijven icoontjes die bijna nooit groter dan een paar milimeter worden weergegeven.
Probeer het maar eens.
Ok, binnen 1 minuut vind ik deze site: vectr.com/ en 30 seconden later heb ik een geel cirkeltje met twee stippen en een gebogen lijn als mond...

Als je dat iemand met een grafische achtergrond en een goede tekentablet laat doen heb je een perfect acceptabel resultaat. Het is een smiley waarvan de stijl al vast staat, je hoeft niets te verzinnen/creatief te zijn.

Ik heb zelf een aantal keren logo's ontworpen en het enige moeilijke was door de bomen het bos te zien in de beschikbare software met 10.001 opties (en werken met een muis ipv een pen/stylus). Als professional moet je dit volgens mij ongeveer letterlijk met je ogen dicht kunnen doen. Nogmaals, het is niet meer dan een gele cirkel met wat lijntjes en stipjes...

Dus als iemand me serieus uit kan leggen wat er precies waarom echt veel tijd en moeite kost (als dat niet de bureacratie is), graag, maar zo'n opmerking 'probeer het maar eens' is toch echt te makkelijk.

[Reactie gewijzigd door Alxndr op 22 juli 2024 16:46]

Ik heb zelf een aantal keren logo's ontworpen en het enige moeilijke was door de bomen het bos te zien in de beschikbare software met 10.001 opties (en werken met een muis ipv een pen/stylus). Als professional moet je dit volgens mij ongeveer letterlijk met je ogen dicht kunnen doen. Nogmaals, het is niet meer dan een gele cirkel met wat lijntjes en stipjes...
Aha, dus kennelijk mogen wij elkaar collega noemen want toevallig heb ik een grafische achtergrond van tientallen jaren, ik heb veel ontworpen waaronder ook logo's. Ik stel voor dat je jouw "gele cirkel met wat lijntjes en stipjes" razendsnel publiceert want jij bent blijkbaar een natuurtalent.

Het is ook mogelijk dat je geen oog hebt voor wat andere Tweakers wel begrijpen: dat het namaken van dat vertrouwde kleine gifje naar een schaalbare vectorafbeelding helemaal niet zo simpel is als je karakter en uitdrukking exact wilt treffen.
Waarom ga je niet serieus op mijn serieuze vraag in, in plaats van ridiculiserende reacties te plaatsen? Met je tientallen jaren ervaring heb je toch kans genoeg gehad om te leren uit te leggen wat je baan precies is.

Als je al een oudere versie hebt en daar alleen maar een hogere resolutie vector afbeelding van moet maken, hoe precies is dat dan 'een behoorlijke klus' en niet iets wat je in één werkdag af kunt hebben?
Mijn reactie is inderdaad ridiculiserend omdat je nogal arrogant en neerbuigend overkomt. In mijn vorige reactie heb ik in de laatste alinea duidelijk uitgelegd wat volgens mij het moeilijkste is.
Maar ik zie ook vooruitgang, want in een eerdere post had je het over "met je ogen dicht", nu denk je dat het in één werkdag moet kunnen.
Als je terug leest zie je dat ik gewoon uit onwetendheid een normale vraag stel, waar jij nergens een serieus antwoord op geeft anders dan dat het 'helemaal niet zo simpel is'.

En dan ga je mij arrogant en neerbuigend noemen? Laat maar, hoop dat je vandaag wel met je goede been uit bed gestapt bent en wens je een fijne dag.

[Reactie gewijzigd door Alxndr op 22 juli 2024 16:46]

hoop dat je vandaag wel met je goede been uit bed gestapt bent
Over benen gesproken: jij ging er meteen in je eerste post met gestrekt been in, ging prat op ervaring etc. Des te opmerkelijker dat je vandaag "onwetendheid" aanvoert.

Jij ook een fijne dag gewenst.
Simpelweg gezegd: je moet rekening houden met schaling. Als je iets gaat vergroten kan het zijn dat de verhoudingen ineens net slecht lijken te zijn en het doel van een vector afbeelding is dat ze net kunnen meeschalen als je gaat inzoomen. Daar moet je dus al rekening mee houden.,

Bijkomend, van enkele pixels een vector afbeelding maken die goed is kost gewoon tijd. Er zit te weinig detail in het origineel om het gewoonweg goed te doen. Er is dus ruimte voor interpretatie, en die moet je zelf, handmatig afvangen.

Het is niet dat je broncode hebt en denkt van even te gaan hercompileren tegen een nieuwere compiler. Het is dat je hier effectief informatie moet gaan toevoegen die er niet in zit. En dat kost simpelweg tijd.
Het is even wennen.
Bij de ene smiley ziet het door de conversie er beter uit dan bij de andere.
Maar op den duur moeten ze allemaal (en wij allemaal) eraan geloven.

Van mij had de omlijning van de smiley niet zwart hoeven te zijn, maar donkergeel. Maar dat is design-keuze van degene die het om moet zetten.

Ik ben benieuwd of het gelijk goed wordt gedaan en B) (dat is B met de ) ) en B-) (combinatie B + - + ) ) een andere mapping krijgen. Vooral met het typen van lijsten wil je dit.
Oh, toch (nog) niet :')

En de vraag is of :r blijft behouden, want het wordt door FrontPage-mods als excuus gebruikt voor automatisch een punt aftrek van de moderatiescore te geven.

[Reactie gewijzigd door RoestVrijStaal op 22 juli 2024 16:46]

En de vraag is of :r blijft behouden
De juistheid van je reactie in het midden latend, er is meer dan alleen de front-page he :)
[...]
De juistheid van je reactie in het midden latend
Als je het over die ene zin hebt: Ik spreek uit ervaring.
er is meer dan alleen de front-page he :)
Jazeker, maar dat neemt niet weg dat op die plekken dezelfde redenering kan worden toegepast ;)

[Reactie gewijzigd door RoestVrijStaal op 22 juli 2024 16:46]

Ik kom er nu pas achter hoeveel Emoji er zijn op Tweakers 8)7

[Reactie gewijzigd door MK.II. op 22 juli 2024 16:46]

Volgens mij zijn er ook een paar onzichtbare bij.
Die moet je met braille lezen

Op dit item kan niet meer gereageerd worden.