Zijn zweeftoestanden nodig?

Ik stem “ja”! Het is waar dat hover events niet afhankelijk moeten zijn omdat touch-apparaten zo populair zijn. Jon lijkt echter te vragen naar visuele hover-statussen op knoppen, wat iets anders is.

Visuele zweeftoestanden bieden “clickablity” . U hoeft niet op iets te klikken om erachter te komen als het “een knop” is. Gebruikers op laptops en desktops verwachten dat “klikbare” dingen reageren op zweven, en een knop die oplicht is een nuttige aanwijzing.

Zie het als een vorm van progressieve verbetering . Het is handig voor degenen die kunnen gebruiken het, en onschadelijk voor degenen die kunnen “t!

Reacties

• Ik ‘ zou zelfs zo ver gaan om dat op een desktop te zeggen browse-omgeving, zou de gebruiker bijna kunnen denken dat er iets mis is als niets anders dan de cursor verandert – we zijn zo gewend geraakt om veranderingen aan te brengen.
• Dat was mijn sterkste argument / gedachte. We ‘ zijn er zo aan gewend geraakt dat het ‘ vreemd zou zijn om het niet te hebben.
• Goed punt op progressieve verbetering. Ik ‘ heb echter nog een ding toegevoegd aan "You shouldn't have to click something to find out if it's a button."; je hoeft niet ‘ over iets te zweven om erachter te komen of het ‘ sa-knop is.
• Ik zou ook willen zeggen dat het toevoegen van visuele hover-statussen aan knoppen de gebruiker positieve feedback geeft voor zijn actie of een gevoel van een mentale beloning.
• Overgegaan zijn van Windows 7, dat sterk afhankelijk was van hover-statussen en gebruikte vaak omtrekken of panelen om knoppen aan te duiden, naar Windows 8 die vaak geen van beide doet in de ” Metro ” stijlinterface, vond ik ‘ Win 8 soms ongelooflijk frustrerend om te gebruiken. Het is misschien wat MS wil dat ontwerpers coderen voor Win 8, maar IMX is het ‘ duidelijk onjuist om dit te doen.

Ik probeer hover statussen in het ontwerp zoveel mogelijk te vermijden. De belangrijkste reden hiervoor is dat ze geen betekenis hebben op aanraakapparaten.

Hoewel dit lijkt alsof het niet van toepassing is wanneer u niet ontwerpt voor mobiel, gebruiken veel mensen hun tablets of andere aanraakapparaten om blader door dezelfde websites of gebruik dezelfde applicaties die u traditioneel alleen zou gebruiken op een computer met een muis.

Door uzelf te beperken om geen hover-gebeurtenissen te gebruiken, maakt u niet alleen de ervaring goed, ongeacht welk apparaat u gebruikt, maar maakt u het ook gemakkelijker om later een aanraakspecifieke native applicatie te maken.

Opmerkingen

• Hover-statussen zijn nog steeds nuttig op mobiele websites. De CSS :hover wordt effectief behandeld als :active wanneer deze wordt bekeken op een mobiel apparaat. Dit geeft visuele feedback dat de vinger van de gebruiker ‘ het doel heeft geraakt. Deze feedback is veel nuttiger op mobiele ontwerpen vanwege parallax. Naarmate uw gezichtslijn afwijkt van de loodrechte lijn naar het scherm, neemt de kans op verkeerd tikken toe.
• @JoJo-zweeftoestanden zijn ‘ niet vindbaar op mobiel , en tikken is het equivalent van klikken op een computer.
• John, in mijn ervaring met het bekijken van sites die ik ‘ heb ontworpen voor desktop op mobiel, denk ik dat JoJo heeft gelijk als hij zegt dat de zweeftoestand [soms] fungeert als de actieve toestand. Ik zeg soms omdat het ‘ een beetje kieskeurig is en niet ‘ niet altijd wordt weergegeven.
• @Jon I ‘ m niet aan het argumenteren hoe het vertaalt, ik ‘ m ruzie over hoe het zinvol is om te vertalen. Als hover actief wordt, hoe selecteert u dan? Dubbeltik? Het doorbreekt het hele aanraakparadigma.
• @JoJo niet altijd, ik geloof niet ‘ dat Chrome op Android de hover-status helemaal activeert, en Safari ‘ De zweeftoestand is vaak lastig

Met de opkomst van Omdat touch een belangrijke manier is om met software te communiceren, zou ik zeggen dat op hover gebaseerde interacties nu zijn gedegradeerd tot “leuk om verbeteringen te hebben”, maar nooit een vereiste zouden moeten zijn om met de software te communiceren.

Ik dupliceer vaak de: hover state voor: focus, aangezien dit een handige manier is om focus aan te geven voor een gebruiker die alleen toetsenbord gebruikt (wat vereist is om te voldoen aan WCAG2 Het geeft aan dat een item op de een of andere manier interactief is, zonder dat er een klikgebeurtenis nodig is die een actie activeert die de gebruiker nog niet heeft besloten te starten. Je kunt gewoon stylen voor: focus without: hover, maar naar mijn mening is de bedoeling van de twee acties hetzelfde en zouden ze waar mogelijk hetzelfde visuele effect moeten hebben.

Ik ben het er ook mee eens in het standpunt van Sam dat hover states kunnen worden beschouwd als progressieve verbetering . Ik zou dat een beetje willen verduidelijken.

Vanuit een mobile first -perspectief hebben zweeftoestanden niet echt een doel voor de server. De gebruikersinterface kan zich dus beter klikbaar gedrag veroorloven voor klikbare objecten zonder zweeftoestand (dwz knoppen moeten zoals knoppen).

Als u dat idee op een mobiel apparaat kunt ondersteunen, wordt datzelfde idee ook ondersteund op desktop- / laptopapparaten, zelfs voordat hover-statussen worden geïntroduceerd.

Het opnemen van een hover-status op apparaten die hover ondersteunen – laptops, desktops, enz. – bevestigt de reeds bestaande perceptie van de gebruiker dat een specifiek UI-element in feite klikbaar is.

Kort samengevat:

1. Bouw UI-elementen die klikbaar zijn, zodat ze klikbaar gedrag voor elk apparaat mogelijk maken.
2. Gebruik hover-statussen op apparaten die zweven naar ondersteunen verder het idee dat op een element kan worden geklikt.

+1 aan Sam voor het noemen van progressieve verbetering.

Ik zou aanraden om hover states te gebruiken als ze enig nut bieden dat de gebruikersinterface verbetert, maar ze zouden nooit nodig moeten zijn om een taak te voltooien.

Gebruik ze bijvoorbeeld op een productlijstpagina om een beetje informatie over het item te geven wanneer de muis over de afbeelding beweegt, voordat de gebruiker eroverheen navigeert. Die informatie zou dan ook beschikbaar moeten zijn op de productpagina zelf. Daarom doet niets af aan de ervaring van de touchscreengebruiker, maar voegt wat extra bruikbaarheid toe voor degenen die het doen het zien. 🙂

Alleen omdat u “ontwerpt voor zowel desktop als mobiel” betekent niet dat de ontwerpen de dezelfde. Interactie waaraan mobiele gebruikers misschien gewend zijn, is misschien niet duidelijk voor desktopgebruikers.

Bijvoorbeeld witte kaarten met een caret aan de rechterkant. Voor mobiele gebruikers is dit natuurlijk iets waarop u kunt tikken. Voor desktopgebruikers, niet zozeer (vooral als de kaart breder is op een desktop), maar wanneer ze zweven en een hover-status zien, is het ineens duidelijk dat erop kan worden geklikt.

Vooral nu die animatie komt steeds vaker voor, een zweeftoestand is een basisanimatie die gebruikers feedback geeft dat ze doen wat ze wilden doen.

Het niet gebruiken van een zweeftoestand voor desktop is lui en maakt mensen verdrietig.

Ik geloof niet dat :hover toestanden essentieel zijn; UI-elementen op de desktop hebben het voor altijd zonder ze gedaan en objecten die duidelijk zijn ontworpen om klikken te veroorloven (zoals de “Post Your Answer” -knop hier op UX.SE) testen prima in mijn eigen ervaring. Dat wil niet zeggen dat het niet nuttig is; alleen dat het niet essentieel is.

Ik beschouw echter :focus en vooral :active als essentieel; de met name het laatste is er een die ik op veel te veel sites genegeerd zie. Een duidelijke actieve status helpt de gebruiker te weten dat de klik op de knop onmiddellijk werd geregistreerd ( wat buitengewoon belangrijk is om gebruikers te helpen voelen dat ze manipuleren rechtstreeks een object in de gebruikersinterface ). Systeembesturingen zoals knoppen en menus hebben die toestand ook allemaal gemaakt, waardoor het nog onvergeeflijker wordt om ze te vergeten.

Ik zou willen voorstellen dat hover states positieve feedback geven op de verwachting van de gebruiker dat het element in kwestie interactief is, waardoor het potentieel voor meer negatieve gevoelens van twijfel en ambiguïteit wordt weggenomen .

Ontwerpen leveren een aantal aanwijzingen dat een element interactief is – vorm, grootte, positie, kleur, een onderstreping, enz. Verschillende gebruikers hebben verschillende aanwijzingen nodig s, en misschien het cumulatieve effect van een ander aantal cues, om waar te nemen (en er zeker van te zijn dat) het element interactief is. Het veranderen van een element tijdens het zweven is een kans om meer aanwijzingen te geven.

De meeste (zo niet alle) browsers leveren standaard cues bij zweven door de cursor in een aanwijzer te veranderen. Natuurlijk hebben we hier controle over en kunnen we de zweeftoestand verwijderen door dit effect te verwijderen. Maar ik kan me voorstellen dat dit voor de meesten van ons (neem even de tijd om het voor te stellen) aanzienlijke twijfel zou zaaien in onze browse-ervaring. Browsers (en vervolgens ontwerpers) hebben zon precedent geschapen voor extra aanwijzingen bij het zweven dat het niet leveren van aanwijzingen een significante tegenspraak zou zijn met alle eerder waargenomen aanwijzingen dat het element interactief is.

Verwijdering van de standaardinstelling van de browser cue is dus een handig voorbeeld van de waarde van hover state. Voor mij wordt de vraag dus niet of visuele cues van interactiviteit bij hover waardevol zijn, maar welke en hoeveel cues optimaal zijn.

Er zijn enkele nuttige bekende precedenten, maar het antwoord op deze vraag hangt af van de toepassing en de doelgroep.

Ik zou willen voorstellen zweven wanneer er geen pictogram in de knop staat. Als er op dat moment een pictogram in de knop is dat kleurrijk is, is het niet essentieel om de zweeftoestand aan de knop te geven. Bijvoorbeeld: meld u aan met de Google-knop.

Hovers zijn een must voor alle websites die online een goede respons willen. Ik heb een aantal websites gebruikt die de hover-status op mijn laptop gedumpt, en het was erg frustrerend.Elke goede ontwerper weet dat mensen online haast hebben om te vinden wat ze willen, en als een knop u niet vertelt of het er een is of niet en u deze op een nieuw tabblad moet openen om erachter te komen – dat is een grote mislukking!

Correct, zweeftekst is niet vereist voor mobiel. Maar u kunt ze altijd uitschakelen voor mobiel. Laten we trouwens niet vergeten dat knoppen voor mobiel veel groter moeten zijn dan die voor online. En zijn ze toch niet op twee verschillende stylesheets gemaakt?

Reacties

• Voor websites is het veranderen van de cursorstijl naar een hand (of equivalent) het zweefeffect waarop ik actie doe.
• Ik denk dat het nog steeds moet worden weergegeven met hover, alleen een hand verwart de gebruiker, omdat we willen dat het web zo levensecht mogelijk werkt, en wanneer we op dingen klikken als het echte leven is, weerspiegelen ze. Vanuit het standpunt van een strateeg ‘ zou u ook willen dat uw website veiliger aanvoelt en ‘ een feit dat de meeste zwendelwebsites nemen ‘ niet de moeite om het hover-effect te installeren – daarom, wanneer gebruikers het effect niet zien ‘, beginnen ze zich van binnen vreemd te voelen.