Hover wordt al jaren op websites gebruikt als een manier om bezoekers informatie te verstrekken zonder een actie te activeren. Nu smartphones en tablets het internet geleidelijk overnemen, moeten we ze meer aandacht geven bij het ontwerpen van een website. Omdat aanraakschermen niet kunnen omgaan met zweven, moeten we kijken naar alternatieven voor zwevende effecten. Als u uw eigen website opzet of niet over de middelen beschikt om een professionele webdesigner in dienst te nemen, is deze zelfstudie iets voor u.
U kunt hover-effecten beheren met aanraakschermen, maar het kan een beetje lastig zijn. Misschien is het beter om ze helemaal te ontwerpen en iets anders te gebruiken. Als je ze op je desktopsite wilt gebruiken, heb je over het algemeen drie alternatieven voor hover-effecten op mobiele websites:
- Verwijder ze helemaal en vervang ze door de primaire actie.
- Voeg een secundair menu toe waar u één keer kunt tikken voor het zweefeffect en nog een keer voor de primaire actie.
- Plaats de zweefinformatie op zijn eigen pagina.
Alles werkt goed op touchscreens en desktops, maar vereist enkele ontwerpaanpassingen om te implementeren binnen een bestaand ontwerp. Je kunt er ook omheen werken met JavaScript of slimme jQuery-code als je de vaardigheden hebt, maar als je het allemaal zelf probeert te berekenen, ben je misschien beter af als je ontwerpalternatieven gebruikt dan code. Als u code-alternatieven voor hover-effecten wilt verkennen, bezoekt u deze pagina.
Verwijder hover-effecten uit uw ontwerp
Tenzij u een freelance webdesigner in dienst kunt nemen om u te helpen, is het misschien beter om hover-effecten helemaal te verwijderen. Natuurlijk zien ze er netjes uit en kunnen ze nuttige aanvullende informatie bieden, maar er zijn altijd andere manieren om hetzelfde effect te bereiken.
U kunt de menu-actie als primaire actie behouden en de aanvullende informatie elders op de pagina opnemen. U kunt breakout boxes, pop-ups gebruiken, de descriptorinhoud verhogen voor het punt dat u probeert te maken of iets anders. Als u niet over de vaardigheden beschikt om jQuery te implementeren, is dit waarschijnlijk de eenvoudigste optie.
Voeg een secundair menu toe
Een secundair menu bevat de eerste tik die een hovereffect zou simuleren. U kunt de informatie in het menu opnemen en een tweede menu binnen hetzelfde element weergeven. Dat tweede menu fungeert als de daadwerkelijke selectie zoals het zou gebeuren op een desktop. De eerste druk simuleert de muisaanwijzer en de tweede druk simuleert de gebruiker die de primaire actie uitvoert.
Dit is een goed alternatief voor hover-effecten, maar wordt beperkt door de schermgrootte en beperkt de hoeveelheid informatie die u aan uw effect kunt toevoegen. Zweefeffecten zijn beperkt door hun aard, maar zijn beperkter op mobiel door het schermvastgoed waarmee u te maken heeft. Als u echt aanvullende gegevens op een niet-standaard manier wilt opnemen, kan dit het zijn.
Plaats de zweefinformatie op zijn eigen pagina
Misschien is een eenvoudigere optie om de zweefinformatie op te nemen in de eigen pagina met een tekstlink. Dit vereenvoudigt uw menu en houdt de navigatie eenvoudig. Hyperlinking werkt op verschillende apparaten en u krijgt een extra pagina voor sitegrootte en SEO. Het nadeel is dat je de aanvullende inhoud met minstens 300 woorden moet verhogen om het te laten werken.
Zolang u de informatie zorgvuldig genoeg kunt opvullen zodat deze goed leest en waarde toevoegt aan de lezer, denk ik persoonlijk dat dit het beste alternatief is. U bepaalt zelf waar u die links naar de aanvullende gegevens plaatst en hangt af van uw ontwerp, maar extra pagina's geven u een extra mogelijkheid om call-to-actions toe te voegen, uw telefoonnummer, e-mailadres en eventuele extra informatie toe te voegen om een verkoop te doen.
Blijven hangen
Als u een soort hover-effect op uw hoofdwebsite wilt gebruiken, moet u dit op uw mobiele site of op zijn minst de mobiele versie verwerken. Er zijn wisselmenu-alternatieven of JavaScript-oplossingen, maar hiervoor is een expert vereist. Deze pagina bespreekt uw alternatieven als u ze verder wilt verkennen.
Een van de gemakkelijkste valstrikken om in te vallen als je alleen begint of je eerste website bouwt, is het ontwerpen voor jezelf en niet voor je publiek. Je moet zeker iets ontwerpen dat je leuk vindt, maar als je de bruikbaarheid in overweging neemt, moet je het publiek prioriteit geven. Je moet ook rekening houden met de apparaten die ze zullen gebruiken en de manier waarop ze waarschijnlijk het beste met je website omgaan.
Als je publiek jong is, zullen ze mobiel gebruiken. Als ze mobiel gebruiken, zijn hover-effecten en andere soortgelijke ontwerpopties niet de beste optie.
