Verbesserung der Benutzerfreundlichkeit mit zusätzlichen Navigationsschlüssel

Key Takeaways

• zusätzliche Navigationsschlüssel wie Page-up, Page-Down, Home und Ende verbessern die Usabilität erheblich, indem sie mehr Kontrolle bereitstellen und die schnelle Navigation über große Datengruppen ermöglichen. Diese Tasten können besonders effektiv bei Schieberegleitern sein, bei denen sie verwendet werden können, um die Werte durch größere Anteile zu erhöhen oder zu verringern oder den Schieberegler auf sein Minimum und Maximum einzustellen.
• Die Interpretation von Tastenanschlägen ist kontextabhängig und sollte beim Skript sorgfältig berücksichtigt werden. Im Allgemeinen bedeutet Home Minimum, Start oder First; Ende bedeutet maximal, enden oder zuletzt; Page-up bedeutet Inkrementierung durch ein Stück oder wechseln zur nächsten Abteilung oder Gruppe. Page-down bedeutet eine Abnahme durch ein Stück oder wechseln Sie zur vorherigen Abteilung oder Gruppe.
• zusätzliche Navigationstasten verbessern die Benutzererfahrung und -aufzugsfunktion und führen möglicherweise zu einem erhöhten Benutzerbetrieb, reduzierten Absprungraten und verbesserten Conversion -Raten. Sie sollten jedoch intuitiv und ohne überwältigend den Benutzer implementiert werden, um die Nutzererfahrung zu vermeiden.

Bei der Behandlung von Tastaturereignissen in JavaScript halten sich die meisten Skripte und Anwendungen in der Regel an den grundlegenden Tastenbereich, die eine Kernzugriffsbetriebs bieten-die TAB-Schlüssel für die serielle Navigation, die Pfeiltasten für das Bohren oder für die zweidimensionale Navigation und für die zweidimensionale Navigation und Die Eingabetasten und Space -Tasten zum Klicken und Auswahl von Dingen.

Dies ist alles gut, aber es gibt auch einige andere gängige Schlüssel, die Sie möglicherweise in Betracht ziehen, die die Benutzerfreundlichkeit durch mehr Kontrolle erheblich verbessern können. Die Tasten von Page-Up- und Page-Down können zur schnellen Navigation über große Gruppen von verwendet werden Daten, während die Heim- und Endschlüssel als Verknüpfung zum ersten und letzten Wert verwendet werden.

Die meisten Windows -Tastaturen haben dedizierte Tasten dafür, arbeiten aber auch über Modifikator -Kombinationen auf dem Mac. In meinem MacBook gibt es beispielsweise eine zusätzliche FN (Funktion) Taste, die in Kombination mit den vier Pfeiltasten verwendet wird (z. B. Fn-up für Page-up und FN links für zu Hause).

Schieberegler steuert

Slider -Steuerelemente sind ein perfektes Beispiel dafür, wo diese Schlüssel zu einem guten Effekt verwendet werden können. Die Pfeiltasten werden normalerweise verwendet, um einen Schieberegler durch einen einzelnen Wert zu erhöhen und zu verringern. Wir können jedoch auch die Tasten mit den Seiten- und Page-Down-Tasten verwenden Der Schieberegler bis zum Minimum und Maximum.

Der folgende Code ist ein Auszug aus dem Such -Slider eines Video -Players:

<span>switch(true)
</span><span>{
</span>  <span>case (e.keyCode == 38 || e.keyCode == 39) : 
</span>    
    <span>if(++value > max) 
</span>    <span>{ 
</span>      value <span>= max; 
</span>    <span>}
</span>    <span>break;
</span>    
  <span>case (e.keyCode == 37 || e.keyCode == 40) : 
</span>    
    <span>if(--value < 0) 
</span>    <span>{ 
</span>      value <span>= 0; 
</span>    <span>}
</span>    <span>break;
</span>    
  <span>case (e.keyCode == 33) : 
</span>    
    <span>if((value = value + Math.round(max / 10)) > max)
</span>    <span>{
</span>      value <span>= max;
</span>    <span>}
</span>    <span>break;
</span>    
  <span>case (e.keyCode == 34) : 
</span>    
    <span>if((value = value - Math.round(max / 10)) < 0)
</span>    <span>{
</span>      value <span>= 0;
</span>    <span>}
</span>    <span>break;
</span>    
  <span>case (e.keyCode == 36) : 
</span>    
    value <span>= 0;
</span>    <span>break;
</span>    
  <span>case (e.keyCode == 35) : 
</span>    
    value <span>= (max - 1);
</span>    <span>break;
</span><span>}</span>

Die Switch-Anweisung passt den Wert des Schiebereglers (und folglich die Suchposition des Videos) gemäß dem Ereignisschlüsselcode an-um einen einzelnen Schritt für die Pfeiltasten, um 10% für die Tasten von Seite-Up- und Page-Down-Tasten oder zu Der Beginn oder das Ende des Videos für die Heim- und Endschlüssel. Gegebenenfalls sind die Wertänderungen eingeschränkt, sodass sie ihre Grenzen nicht überschreiten (z. B. können Sie nicht über das Ende suchen).

In diesem Fall wurde der Schieberegler von Grund auf neu geschrieben, um diese zusätzlichen Schlüssel einzuschließen. Dies ist jedoch die Art Scripting-Verbesserung, die leicht nachzurotten, da alles, was es erfordert, zusätzliche Bedingungen für den Schlüsselhandlingscode benötigt, den das Skript bereits enthalten muss.

Umgang mit den Schlüsselereignissen

als Referenz, hier sind alle im vorherigen Beispiel verwendeten Ereignisschlüsselcode -Werte:

• 33 = Page-up
• 34 = Page-down
• 35 = Ende
• 36 = Home
• 37 = links-arm
• 38 = Up-Arms
• 39 = rechts-Arms
• 40 = Down-Arms

Umgang mit diesen Schlüsseln unterscheidet sich nicht als die Behandlung anderer Navigationsschlüssel. Wenn Sie weitere Informationen dazu wünschen, lesen Sie meinen früheren Artikel: Practical JavaScript Barrierefreiheit.

Das einzige, was ich hier ausdrücklich innehalten würde, ist, dass Navigationsschlüssel nur mit Schlüsseldown- und Schlüsselereignissen behandelt werden können und nicht mit TastePress -Ereignissen (die nur für Schlüssel verwendet werden, die tatsächlich a einfügen a Zeichen wie Buchstaben und Zahlen). Die Schlüsseldown -Ereignisse können auch verwendet werden, um Standardaktionen zu blockieren.

Interpretieren von Schlüsselverhalten

Bei Verwendung dieser zusätzlichen Schlüssel - oder irgendwelchen Schlüssel - ist es wichtig, anzuhalten und zu überlegen, was die Tastenanschläge

im Kontext Ihres Skripts bedeuten werden. Obwohl wir eine klare Vorstellung davon haben, was beispielsweise der Home-Schlüssel im Kontext eines Text-Editors oder Wortprozessors bedeutet, ist es in einem anderen Verhaltenskontext möglicherweise nicht ganz so offensichtlich.

Der Schieberegler ist ein gutes Beispiel, da es offensichtlich ist

Zuhause bedeutet Minimum, Start oder erste

• Ende bedeutet maximal, enden oder letztes
• Page-up bedeutet inkrementiert durch einen Stück oder wechseln Sie zur nächsten Abteilung oder Gruppe
• Seite-down bedeutet, durch einen Stück zu dekrementieren oder zur vorherigen Abteilung oder Gruppe zu wechseln
In dem Kontext der Nachrichtenansicht einer E -Mail -Anwendung kann der Heimtaste beispielsweise nach oben auf der Liste und der Endschlüssel bis zum Ende springen. Oder im Kontext des Volumenkontrolls eines Musikplayers kann das Page-up das Volumen um ein oder eine Hälfte erhöhen, während Page-down das Gegenteil tut.

Sie werden die beste Vorstellung davon haben, wie solche Schlüssel zu Ihrer eigenen Anwendung in Beziehung stehen. Es gibt keine harten und schnellen Regeln dafür und keine absoluten Konventionen. Es ist nur ein Fall, über das vorhanden ist, was vorhandene Tastaturaktionen erzielen und wie diese zusätzlichen Tastenanschläge verwendet werden könnten, um dies zu erleichtern oder schneller zu machen.

häufig gestellte Fragen zur Verbesserung der Benutzerfreundlichkeit mit zusätzlichen Navigationstasten

Welche Vorteile haben die Nutzung zusätzlicher Navigationschlüssel auf einer Website? Sie bieten den Benutzern mehr Kontrolle über ihr Browsing -Erlebnis, sodass sie effizienter durch die Website navigieren können. Dies kann zu einem erhöhten Benutzerbetrieb, einer verringerten Absprungraten und einer verbesserten Conversion -Raten führen. Zusätzlich können zusätzliche Navigationschlüssel eine Website für Benutzer mit Behinderungen zugänglich machen und ihre Reichweite und Benutzerfreundlichkeit weiter erweitern.

Wie kann ich zusätzliche Navigationschlüssel auf meiner Website implementieren? Auf Ihrer Website beinhaltet eine Kombination aus Webdesign und Codierung. Sie können HTML, CSS und JavaScript verwenden, um die Navigationsschlüssel zu erstellen und zu stylen. Es ist auch wichtig sicherzustellen Navigationstasten können Funktionen wie "Back to Top" -tasten, "zu Inhaltslinks überspringen" und Tastaturverknüpfungen enthalten. Diese Funktionen können den Benutzern helfen, Ihre Website effizienter zu navigieren, insbesondere auf langen oder komplexen Seiten. Alternative Möglichkeiten zur Navigation durch die Website. Beispielsweise können Tastaturverknüpfungen für Benutzer mit Mobilitätsstörungen, die möglicherweise Schwierigkeiten haben, eine Maus zu verwenden, besonders nützlich sein. In ähnlicher Weise können Benutzer -Links "zu Inhalten" -Links mit Bildschirmlesern helfen, Navigationsmenüs und andere sich wiederholende Inhalte zu umgehen.

Können zusätzliche Navigationstasten SEO verbessern? SEO können sie indirekt zu verbesserten Suchmaschinenrankings beitragen, indem sie die Benutzererfahrung verbessern. Suchmaschinen wie Google berücksichtigen die Metriken für die Benutzerbindung, wie z. B. Absprungrate und Zeit, die auf der Website aufgewendet werden, bei der Rangliste von Websites. Durch die Verbesserung der Benutzererfahrung können zusätzliche Navigationsschlüssel dazu beitragen, diese Metriken zu verbessern und möglicherweise zu höheren Suchmaschinen -Rankings zu führen. Verbessert die Benutzererfahrung stark und müssen sorgfältig implementiert werden, um verwirrende oder überwältigende Benutzer zu vermeiden. Zu viele Navigationsoptionen können eine Website veranlasst, überfüllt und schwer zu navigieren und möglicherweise die Benutzererfahrung zu beeinträchtigen.

Wie kann ich die Effektivität meiner zusätzlichen Navigationschlüssel testen? Dies kann Usability -Tests beinhalten, bei denen Benutzer beobachten, die mit Ihrer Website interagieren, oder A/B -Tests, bei denen Sie verschiedene Versionen Ihrer Website vergleichen, um zu sehen, welche besser abschneiden. Mobile Benutzerfreundlichkeit? Auf kleineren Bildschirmen kann die Navigation anspruchsvoller sein, und zusätzliche Navigationsschlüssel können den Benutzern helfen, Ihre Website leichter zu navigieren. Es ist jedoch wichtig sicherzustellen, dass diese Schlüssel auf eine Weise entworfen und implementiert werden, die auf mobilen Geräten gut funktioniert. Navigationsschlüssel intuitiver, berücksichtigen Sie die Erwartungen und Gewohnheiten Ihrer Benutzer. Verwenden Sie vertraute Symbole und Platzierungen für Ihre Schlüssel und stellen Sie sicher, dass sie eindeutig beschriftet sind. Benutzertests können auch ein wertvolles Instrument sein, um zu verstehen, wie Benutzer mit Ihren Navigationsschlüssel interagieren und die erforderlichen Anpassungen vornehmen. Wenn Sie Ihre Website leichter zu navigieren, können zusätzliche Navigationsschlüssel möglicherweise zu höheren Conversion -Raten führen. Wenn Benutzer finden, wonach sie einfacher suchen, ist es wahrscheinlicher, dass sie die gewünschten Aktionen ausführen, z. B. einen Kauf oder eine Anmeldung für einen Newsletter.

Das obige ist der detaillierte Inhalt vonVerbesserung der Benutzerfreundlichkeit mit zusätzlichen Navigationsschlüssel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!