Advitum.de auf Google+

jQuery UI – intuitive Interaktion zwischen Nutzer und Anwendung

jQuery UI – intuitive Interaktion zwischen Nutzer und Anwendung
VN:F [1.9.22_1171]
Bewertung: 3.4/5 (5 Stimmen abgegeben)
Von am
Kategorien: CSS, Design, JavaScript, jQuery, PHP, Tutorials

Usability gehört zu den wichtigsten Kriterien für gutes Webdesign. Egal wie toll eine Internetseite aussieht, wenn der Benutzer die Navigation nicht versteht oder es nicht schafft, seine Bestellung abzuschicken, hat die Seite ihren Zweck verfehlt.

Mithilfe von JavaScript lassen sich viele Aufgaben für den Nutzer drastisch vereinfachen. In diesem Artikel geht es darum, wie man mit jQuery UI intuitive und einfach zu bedienende Benutzeroberflächen schaffen kann.

jQuery UI - intuitive Interaktion zwischen Nutzer und Anwendung, 3.4 out of 5 based on 5 ratings

Elemente sortieren

Elemente zu Sortieren ist ein wichtiger Aspekt, wenn es um intuitive Bedienung geht. Denn wie sieht Sortieren in der Realität aus? Der Sortierende hat etwas, dass er anfassen, aufheben und in Stapeln oder Haufen sortieren kann.

In vielen, teilweise auch nützlichen Anwendungen sieht das Sortieren von Elementen aber so aus:

Sortierung mittels Pfeilen.
Sortierung mittels Pfeilen.

Der Nutzer muss also die Elemente der gewünschten Reihenfolge nach nummerieren. Eine andere Alternative, die leider auch viel zu oft vorzufinden ist, sieht so aus:

Sortierung durch Nummerierung
Sortierung durch Nummerierung

Der größte Nachteil ist, dass man, wenn man ein Element nach ganz oben verschieben will, X mal auf diesen Pfeil klicken muss, bis es am oberen Ende angekommen ist. Das ist nicht nur lästig, es macht einfach überhaupt keinen Spaß, etwas so zu sortieren!

Dabei ist die Lösung dieses Dilemmas ziemlich simpel und benötigt auch nicht viel Programmieraufwand. jQuery UI liefert hierfür die Funktion sortable.

Sortierung mit jQuery UI
Sortierung mit jQuery UI

Wie schon gesagt, ist die Umsetzung nicht mit besonders viel Arbeit verbunden. Als erstes wird natürlich etwas zum Sortieren benötigt. jQuery UI erwartet standardmäßig die zu sortierenden Elemente als Listenelemente.

<ul id="sortThis">
	<li id="elements_1">Element 1</li>
	<li id="elements_2">Element 2</li>
	<li id="elements_3">Element 3</li>
	<li id="elements_4">Element 4</li>
	<li id="elements_5">Element 5</li>
</ul>

Dem Nutzer soll also die Möglichkeit gegeben werden, die fünf Listenelemente zu sortieren. Bei der Vergabe der IDs ist es wichtig darauf zu achten, dass sie einen Unterstrich erhalten. Vor dem Unterstrich muss der Gruppenname, hinter dem Unterstrich ein Name für das Element stehen.

Als Nächstes bringen wir JavaScript ins Spiel.

$(document).ready(function()
{
	$('#sortThis').sortable();
}

Wir fügen das Script hier mit $(document).ready() ein, weil es ansonsten ausgeführt würde, bevor die Liste geladen wird. Deshalb hätte das Script keinen Effekt auf die Liste. Mit ready() wird aber erreicht, dass das Script nach dem vollständigen Laden der Seite erst ausgeführt wird – die Liste ist dann logischer Weise schon da.

Das eigentlich interessante ist aber die Funktion .sortable(). Sie bewirkt schon jetzt, dass sich die Liste sortieren lässt. Bisher wird aber leider noch nichts von der Sortierung gespeichert.

Die Elemente der Liste lassen sich sortieren.
Die Elemente der Liste lassen sich sortieren.

Mit ein bisschen CSS lässt sich das natürlich noch weiter verschönern, aber in diesem Artikel geht es nur um die Sortierung selbst, nicht um das Design.

Vielleicht an dieser Stelle ein kleiner Hinweis: Mit der CSS-Eigenschaft „cursor“ kann der Mauszeiger über einem Objekt verändert werden. So ist dem Nutzer sofort klar: Hier kann ich etwas umher ziehen…

#sortThis li
{
	cursor: move;
}

Irgendwie muss die Sortierung zurück zum Server gesendet werden. Dafür binden wir jetzt an das update-Event der Liste eine Funktion, in der die Sortierung per Ajax versendet wird. Das update-Event wird jedes mal abgefeuert, wenn sich die Reihenfolge der Elemente ändert. Die Sortierung wird also automatisch gespeichert, sobald sich etwas ändert.

$(document).ready(function()
{
	$('#sortThis').sortable(
	{
		update: function(event, ui)
		{
			alert("Sortieren...");
		}
	});
});

Durch dieses Javascript wird jedes Mal »Sortieren…« ausgegeben, wenn sich die Sortierung ändert. Hier muss die aktuelle Sortierung jetzt per Ajax zum Server. Dazu benutzen wir die Methode »serialize«. Diese Methode wandelt die Sortierung in einen String um, der als GET-Parameter an eine URL angehängt werden kann. Und genau das machen wir jetzt.

$(document).ready(function()
{
	$('#sortThis').sortable(
	{
		update: function(event, ui)
		{
			$.get("index.php?" + $(this).sortable('serialize'));
		}
	});
});

In der PHP-Datei kann der Übergabewert nun weiter verarbeitet werden. In der Variable $_GET[‚elements‘] sind die Namen der Elemente in der sortierten Reihenfolge enthalten. Nur zur Erinnerung: Die ID der einzelnen Listenelemente setzten sich aus der Gruppenbezeichnung und dem Elementnamen, getrennt von einem Unterstrich, zusammen. In diesem Fall sind die IDs »elements_1« bis »elements_5«. Daher kommt also der Bezeichner »elements« und die Namen der Elemente.

Um zu zeigen, wie die Speicherung der Sortierung aussehen könnte, zeige ich dies am folgenden Beispiel:

foreach($_GET['elements'] as $position => $name)
{
	mysql_query("UPDATE `elements` SET `position` = " . $position . " WHERE `name` = '" . $name . "'");
}

Wie schon gesagt, ist es sehr einfach, die Reihenfolge auszuwerten, man muss nur alle Elemente im Array mit foreach abarbeiten, der Schlüssel ist die Position und der Wert ist der Name des Elements.

Elemente in Kategorien oder Ordner einordnen

In meinem Artikel »Fotos in Alben ordnen – Drag & Drop mit jQuery« bin ich schon auf das Einordnen von Elementen in Kategorien oder Ordner eingegangen.

Fotos mit Drag&Drop sortieren
Fotos mit Drag&Drop sortieren

Das Speichern der Ergebnisse ist auch hier sehr einfach. Zunächst verstecken wir das verschobene Element, dann senden wir wieder per Ajax die Informationen an den Server.

$('#albums li').droppable(
{
    accept: '.photos img',
    tolerance: 'pointer',
    hoverClass: 'ui-state-hover',
    drop: function(ev, ui)
    {		
		ui.draggable.hide();
		
		var id = ui.draggable.attr('id');
		var teile = id.split("_");
		var element = teile[1];
		var id = $(this).attr('id');
		var teile = id.split("-");
		var target = teile[1];
		
		$.get("index.php?move&element=" + element + "&target=" + target);
    }
});

Danach kann in PHP mit $_GET auf die übergebenen Parameter zugegriffen werden. Dort kann die neue Position dann gespeichert werden.

Autovervollständigung von Formularfeldern

Wenn der Nutzer Vorschläge für den Inhalt eines Formularfeldes bekommt, muss er vielleicht nicht alles eintippen, sondern nur einen Teil des Inhaltes, der Rest wird ihm vorgeschlagen. Wie so etwas mit jQuery UI erreicht werden kann, habe ich in meinem Artikel »Vervollständigung von Namen mit jQuery« geschrieben.

Fazit

Je einfacher und schneller ein Nutzer eine Oberfläche bedienen lernt, desto besser ist sie. Leider werden in den meisten Online-Anwendungen noch nicht alle Möglichkeiten ausgenutzt, um die Usability zu verbessern. An dieser Stelle sollten Programmierer immer sehr viel Zeit investieren, um eine gute Benutzeroberfläche zu entwerfen. jQuery UI liefert einem hierfür viele nützliche Funktionen an die Hand. Ich hoffe, dass sich im Punkt der Usability in Zukunft noch einiges tut, denn Anwendungen müssen eindeutig viel intuitiver werden.

Was sagt ihr?

Wie geht ihr vor, um die Usability eurer Webanwendungen zu maximieren? Welche Erfahrungen habt ihr mit UserInterfaces gesammelt? Was haltet ihr von jQuery UI? Lasst es mich in den Kommentaren wissen!

jQuery UI - intuitive Interaktion zwischen Nutzer und Anwendung, 3.4 out of 5 based on 5 ratings

Links zum Thema

Jetzt seid ihr dran!

Teilt eure Meinung mit uns in den Kommentaren, gebt eine Bewertung für diesen Artikel ab und teilt ihn in Social Networks!

Über

Ich bin ein junger Webdesigner und Programmierer aus Siegen und blogge auf Advitum.de über meine Erfahrungen im Web. Meine Themenschwerpunkte liegen im Bereich der Web-Entwicklung mit PHP, JavaScript, HTML und anderen Script-, Programmier- und Markup-Sprachen, der Nutzung von Content Management System wie Typo3, Wordpress etc. und der Effekt-Hascherei mit Photoshop. Seit 2008 blogge ich auf Advitum.de – mal mehr, mal weniger regelmäßig – über alles, was mich so interessiert. Wenn dir mein Blog gefällt, freue ich mich immer sehr über Feedback in Form von Kommentaren und E-Mails.

Kommentare zu diese Artikel

Schreibe jetzt einen Kommentar!

Mediaroo schrieb am Antworten

Danke für die Anleitung :- )

Meistens hören wir was Interfaces betrifft „kann das nicht so aussehen wie im Windows Computer drin“ :- )

lg

    Lars Ebert schrieb am Antworten

    Genau deshalb setze ich mich eben für intuitiv bedienbare Oberflächen ein. Programme müssen sich an den Nutzer, nicht die Nutzer an die Anwendung anpassen.

Michael schrieb am Antworten

Hallo Lars,

hab vorhin deinen Blog gefunden und ich war sofort begeistert.

Vielen Dank für deinen Beitrag bzw. deine Beiträge.

Ich habe deine Anregungen in diesem Artikel sogleich umgesetzt, echt genial. freu freu freu.

Sag mal, kennst Du einen guten Link zu einem Artikel übers Foto-Taggen?

Viele Grüße und nochmals herzlichen Dank

Grüße

    Lars Ebert schrieb am Antworten

    Hallo Michael,

    es freut mich, dass dir mein Blog gefällt.

    Also auf Anhieb fällt mir kein Artikel zum Thema Tagging von Bildern ein, welche Aspekte würden dich denn daran interessieren?

      Michael schrieb am Antworten

      Hallo Lars,

      Welche Aspekte?

      Der Eigentümer müsste das Foto taggen können (normale Funktionalität). Ein Besucher schaut sich das Foto des Eigentümers an. Wenn er mit den Maus über das Bild fährt erscheinen die getagten Bereiche des Eigentümers. Sagen wir, an der rechten Seite (außerhalb des Bildes) kann der Nutzer aus einer Liste von anderen Nutzern, deren getagte Bereiche aufrufen, und nacheinander ansehen bzw. voten. Also, es soll sowohl der Eigentümer, als auch der Besucher [i] das Foto taggen können.

      Ich hab noch ne Frage zu jQuery ui sortable:

      Also mit Hilfe von Ajax feuere ich in ein von mir angegebenes Script.

      Frage: Wie bekomme ich mögliche Fehlermeldungen im angegebenen Script mit?

      Ich meine, ich habe ein ErrorHandling implementiert, welches Fehler in die Datenbank schreibt. Doch einen „Fatal Error“ bekomme ich in keinsterweise mit. Gut an dieser Stelle könntest Du sagen: Halt das Script einfach! Dennoch:

      Gibt es eine Möglichkeit, in der update-Anweisung z.B. ein ‚target: „#msg“‚ für Fehlermeldungen zu setzen?

      Grüße

        Lars Ebert schrieb am Antworten

        Zum Tagging: Ich werde mir darüber mal Gedanken machen und einen Artikel darüber schreiben, wenn ich die Zeit dafür finde.

        Zum jQuery-Debugging: Da habe ich extra für dich jetzt einen Artikel geschrieben 😉 http://advitum.de/blog/2011/05/ajax-scripts-kinderleicht-debuggen-jquery-quick-tip/ Dort verliere ich einige Worte über Ajax-Debugging. Wenn du das in deine update-Anweisung einbaust, sollten dir die Fehler geliefert werden.

          Michael schrieb am

          Hallo Lars,

          jetzt bin ich aber platt. Danke :=)

          Grüße

          Lars Ebert schrieb am

          Gern geschehen 😉

Diese Artikel könnten dir auch gefallen