Ett förslag om ikoner på bilder

Permalänk
99:e percentilen

Ett förslag om ikoner på bilder

Det verkar som att om en bild är över en viss storlek får den en ikon på sig som visar att det går att förstora den. Detta är inte alltid så snyggt; ett bra exempel är loggan i Better SweClockers-tråden:

Live-exempel:

Om en bild ligger i en länk får den dessutom en ikon som användaren kan klicka på för att följa länken:

Mitt förslag är att istället låta ikonerna dyka upp när användaren hovrar över bilden. Det är inte helt lätt att förmedla i text precis hur det skulle bli, men frukta icke! Ett konkret proof of concept finns i Better SweClockers, aktiverat direkt ur boxen. SASS-källkoden ser ut så här och den resulterande CSS:en enligt nedan:

.bbImage .imgControls { opacity: 0; transition: opacity 250ms; } .bbImage:hover .imgControls, .bbImage:focus .imgControls { opacity:1 }

Det behöver säkert funderas ytterligare kring detta ur perspektiv relaterade till touchskärmar och dylikt, men min implementation fungerar bra för mig på både iOS och Android.

En schysst bieffekt med detta förslag är att det kanske faktiskt skulle göra det lättare att upptäcka förstorings- och länkikonerna på bilder där de inte syns så tydligt idag. Man tenderar ju som människa att reagera på förändringar.

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Hedersmedlem

Hej!

Det låter spontant som ett bra förslag men vi behöver undersöka lite vad det skulle innebära i praktiken innan vi kan göra några förändringar. Till exempel hur det ska lösas på mobila enheter som inte har hover. Hur menar du att du har löst det?

Permalänk
Medlem
Skrivet av Alling:

En schysst bieffekt med detta förslag är att det kanske faktiskt skulle göra det lättare att upptäcka förstorings- och länkikonerna på bilder där de inte syns så tydligt idag. Man tenderar ju som människa att reagera på förändringar.

Inget illa menat men hur är det tänkt att man ska veta att bilden är vare sig förstoringsbar eller innehåller en länk om det inte framgår förrän man hovrar över bilden? De flesta är nog inte vana vid att man kan få fram menyer genom att hovra över bilder och jag tror att det snarare skulle leda till motsatt effekt där folk gnäller över för små bilder (vilket förekommer redan idag i t.ex. prestandaindex trots att det till och med finns ett förstoringsglas).

Det kanske kan tillämpas som ett valfritt alternativ genom better Sweclockers?

Skickades från m.sweclockers.com

Visa signatur

NZXT H5 | Asus Strix B550-F | 5800X3D | NZXT Kraken Elite 240 | 32GB Kingston Fury 3600MHz CL18 | Corsair RM850x Shift | Kingston Fury 2TB NVMe | 4070 Super FE | Dell G2724D 165Hz

Permalänk
99:e percentilen
Skrivet av Gurt:

Hej!

Det låter spontant som ett bra förslag men vi behöver undersöka lite vad det skulle innebära i praktiken innan vi kan göra några förändringar. Till exempel hur det ska lösas på mobila enheter som inte har hover. Hur menar du att du har löst det?

Det behöver sannerligen undersökas och testas! De flesta mobila webbläsare stöder dock :hover, om än ofta inte fullt så naturligt som skrivbordsplattformar, av naturliga skäl. Min nuvarande lösning fungerar utmärkt på iOS, bra i Firefox på Android och dåligt i Chrome på Android. Installera Violentmonkey och Better SweClockers, så kan du se med egna ögon.

Skrivet av ågren:

Inget illa menat men hur är det tänkt att man ska veta att bilden är vare sig förstoringsbar eller innehåller en länk om det inte framgår förrän man hovrar över bilden? De flesta är nog inte vana vid att man kan få fram menyer genom att hovra över bilder och jag tror att det snarare skulle leda till motsatt effekt där folk gnäller över för små bilder (vilket förekommer redan idag i t.ex. prestandaindex trots att det till och med finns ett förstoringsglas).

Jättebra att du lyfter detta! Jag tror nog att de allra flesta är vana vid att man kan klicka på en bild för att se den i större format; det är ju nästan en universell standard på webben. En bild inuti en länk är kanske en annan femma, och jag skulle inte ha något emot om länkikonen fortfarande syntes, för syftet med förslaget är enbart att man ska kunna använda (olänkade) bilder för att skapa snyggare trådar enligt ovan.

Känner inte igen klagomålen du nämner angående till exempel prestandaindex, men brukar inte heller lusläsa de trådarna.

Citat:

Det kanske kan tillämpas som ett valfritt alternativ genom better Sweclockers?

Yes! Det gör det redan. Men det hjälper inte om man till exempel vill ha en bild som rubrik i en tråd, eller till något annat. Då vill man ju att den ska se snygg ut för alla, inte bara för någon procent av besökarna.

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Medlem

@Alling, @Gurt: Det finns redan ett sätt att hantera det här problemet för enskilda specialfall där man av en eller annan anledning inte vill att ikornerna ska dyka upp, men det är nog bara en högst privilegierad grupp med två medlemmar som känner till det i dagsläget (hej @Biberu! <3). Hemligheten är att slänga på en static på sin img-tagg så blir man av med ikoner av alla de slag.

[img static]https://lalalalala.se/bildpåkatt.png[/img]

Klicka för mer information
Visa mer

Detta dök upp för lite drygt tre år sedan (räknade jag rätt på tiden där? tusan vad snabbt det går) när jag ville snygga upp mina prisjaktlistor så att ikonerna inte blockerade hela thumbnailen totalt.

Nu är vi fyra som känner till detta, åtminstone fram till dess att @Alling glömmer bort att han vet det igen.

EDIT: Tycker även det är värt att dra in cursor: zoom-in (och kanske även zoom-out) i tråden när @Alling ändå varit inne på spåret att det är universell standard att klicka på bilder för att förstora. Jag tycker definitivt att lämpliga markörer ska användas när det finns något att förstora för att förtydliga ytterligare.

Visa signatur

Spela Swemantle! Du vet att du vill.

Ibland har jag fel, men då är det någon annans fel.

Permalänk
99:e percentilen
Skrivet av LemonIllusion:

@Alling, @Gurt: Det finns redan ett sätt att hantera det här problemet för enskilda specialfall där man av en eller annan anledning inte vill att ikornerna ska dyka upp, men det är nog bara en högst privilegierad grupp med två medlemmar som känner till det i dagsläget (hej @Biberu! <3). Hemligheten är att slänga på en static på sin img-tagg så blir man av med ikoner av alla de slag.

[img static]https://lalalalala.se/bildpåkatt.png[/img]

Klicka för mer information
Visa mer

Detta dök upp för lite drygt tre år sedan (räknade jag rätt på tiden där? tusan vad snabbt det går) när jag ville snygga upp mina prisjaktlistor så att ikonerna inte blockerade hela thumbnailen totalt.

Nu är vi fyra som känner till detta, åtminstone fram till dess att @Alling glömmer bort att han vet det igen.

EDIT: Tycker även det är värt att dra in cursor: zoom-in (och kanske även zoom-out) i tråden när @Alling ändå varit inne på spåret att det är universell standard att klicka på bilder för att förstora. Jag tycker definitivt att lämpliga markörer ska användas när det finns något att förstora för att förtydliga ytterligare.

Men du skojar – har det varit så här enkelt i alla år?! Du är ju kung!

Visa signatur

Skrivet med hjälp av Better SweClockers