7 Fragen an Usability-Expertin Uli Thiel von Thieldesign zu Design & Usability von Facebook Apps

image

Uli Thiel ist für mich DIE Expertin für Usability-Design in München. Sie arbeitet unter dem Namen ThielDesign für renommierte Unternehmen wie SwissRe, GSA, ProSieben und viele mehr. Auf Ihrer Homepage http://www.ThielDesign.de zeigt sie Ihr sehr komplexes Fachgebiet, das sich nicht so schnell durchforsten lässt: Uli beantwortet uns heute 7 Fragen rund um Facebook-Apps und gibt dabei praktische Tipps.

Viel Spaß beim Lesen!
Sandra Staub

1. Was macht Deiner Meinung nach eine gute Facebook-App aus?

Eine gute App frustriert den Benutzer nicht, sondern ist selbst erklärend und leicht verständlich in der Benutzung. Wir erreichen spielerisch einfach das, was wir wollen – zum Beispiel an einem Gewinnspiel teilnehmen. Es werden keine unverständlichen Datenübergaben verlangt. Eine sehr gute App bringt noch einen kleinen Kick für den Nutzer mit – wenn man in der Benutzung etwas Neues lernt oder etwas entdecken kann, das man toll findet.

2. Wie stehst Du dazu, dass manche Apps viele Datenfreigaben verlangen?

Manchmal werden von uns Daten verlangt, wenn wir eine App nutzen wollen. Zum Beispiel so etwas wie ein Registrierungsprozess, in welchem wir – bei Facebook Apps häufig – Zugriff auf unsere Daten erlauben sollen. Manche Daten können nötiger Weise verlangt werden, etwa, um zu verhindern, dass jemand mehrmals an einem Gewinnspiel teilnimmt. Durch die Erfassung des Profils werden gerechter Weise für alle Teilnehmer gleiche Chancen hergestellt. Klar, kann jemand sich trotzdem mehrere Profile anlegen, das wird nicht entdeckt, ebenso wie mehrere Mailadressen. Aber so häufig kommt das nicht vor.

Im Idealfall bekommen wir im Begleittext der App nett erklärt, warum von uns diese Daten gebraucht oder gewünscht werden – und wir verstehen das und geben unsere Daten gerne heraus. Wenn wir das nicht wollen, zum Beispiel, weil es nicht nachvollziehbar ist, dann verzichten wir lieber auf die Nutzung der bis dahin spannenden App und brechen hier den Prozess ab. Die App erhält so weniger Reichweite und weniger Nutzer.

Gut ist also, wenn vom Benutzer möglichst wenig Datenfreigaben angefordert werden, das heißt, diese Popups, die wir alle kennen – wo wir gebeten werden die App etwas ausführen zu lassen unter unserem Namen oder welche Daten aus unserem Profil nutzen wollen – ohne solche Vorgänge fühlen wir uns doch alle wohler. Wo es nötig ist und sinnvoll – sollte das gut erklärt werden. Ich bin für möglichst wenige Datenfreigaben.

3. Oft erschrecken Teilnehmer bei kryptischen Hinweistexten. Hast Du einen Verbesserungs-Tipp?

Da hilft nur, dass die Anbieter solcher Apps mit diesen kryptischen Erklärungen lernen aus dem mangelnden Erfolg ihrer Aktionen. Ich stoppe konsequent meine Teilnahme bei Apps mit unverständlichen Informationen. Man kann auch auf die Pinnwand des App Anbieters einen hilfreichen, gutgemeinten Hinweis posten. Das hab ich schon öfters gelesen. Darauf wird immer sofort positiv reagiert. Denn die Betreiber/ Inhaber einer Gruppe kaufen die App ja auch ein und es ist Ihnen selbst vielleicht beim Testing nicht aufgefallen, dass etwas nicht perfekt ist. Das hab ich kürzlich auf Röckls Facebook Pinnwand gelesen, da wurde Seitens Röckl umgehend reagiert und man war absolut bemüht den Fehler sofort zu beheben.

4. Welche Usability-Fehler gibt es im Backend von Facebook-App?

Damit ist ein Backend einer App gemeint, wie zum Beispiel Formularfelder, die ein Nutzer ausfüllen muss, wenn er an etwas teilnehmen möchte.

Nehmen wir mal an es geht um einen Wettbewerb für den leckersten Apfelkuchen. Da soll ein Rezept zu lesen sein, eine Liste der Zutaten, ein Foto des fertigen Kuchens und ein Foto der Bäckerin oder des Bäckers, gerne mit futternden Kindern, denen der Kuchen schmeckt. Also 2 Fotos, der Text des Rezeptes, eine Liste für die Zutaten. 

Dazu brauchen wir die Zustimmung des Teilnehmers, dass wir sein Foto im Rahmen der Veranstaltung verwenden dürfen, dass er das Rezept selbst „erfunden“ hat im Zweifelsfall, und seinen Namen und Vornamen. Und eine Checkbox, die angewählt werden muss, wenn der Teilnehmer die Teilnahmebedingungen gelesen hat und zustimmt. Erst dann wird er zum Ausfüllen des Formulars zugelassen. Usability ist, wenn er die Teilnahmebedingungen jederzeit später auch noch lesen kann, zusätzlich. Da hat man ein gutes Gefühl. Auch Richtlinien zum Datenschutz. Dann weiß der Teilnehmer, dass mit seinen Daten verantwortungsvoll umgegangen wird.

Das Backend muss für alle nötigen Angaben einzelne Felder zur Eingabe bereitstellen und auf eine mögliche Zeichenbegrenzung hinweisen im Formularfeld. Die Zeichenbegrenzung ist wichtig. Damit die Texte „auf dem Punkt“ bleiben

Es sollten erklärende Texte in Fehlermeldungen bereitgehalten werden, falls mal vergessen wird etwas auszufüllen – dann sollte ein Hinweis auftreten. Und es sollte möglich sein zwischen zu speichern und zu einem späteren Zeitpunkt weiter zu machen. Auch sollte nach dem letzten Klick auf den Button „Absenden“ ein Dankeschön-Text für einen schönen Abschluss sorgen.

5. Es gibt in Facebook mehrere Technologien wie iframe, Integration usw. Welche Technik verwendest Du und warum?

Du hast Recht, es gibt 2 maßgebliche Technologien derzeit, um Inhalte als Apps in die Umgebung von Facebook zu integrieren. Wir haben die Einbindung als Canvas oder als Tab / Integration. Beide Arten können jeweils technisch als „iframe“ programmiert werden. iFrame kann man sich so vorstellen wie ein Blatt Papier, auf dem etwas abgebildet ist. Dieses Blatt legt man – als Beispiel – über eine Zeitungsseite drüber und keiner sieht mehr die darunterliegende Zeitungsseite und denkt mein Blatt ist diese Zeitungsseite. Weil das Blatt natürlich die Umgebung der Zeitung perfekt imitiert oder sich nur über einem Rahmen in einem Ausschnitt befindet. Solch ein iFrame kann jede Breite haben. Das Format „Canvas“ bedeutet, dass mein Blatt beliebig breit ist, und nicht nur so breit wie die Pinnwand in Facebook, sondern auch noch die Werbung in der rechten Spalte überlagert. Das Format „Tab/ Integration“ bedeutet, dass die App nur so breit ist wie die Pinnwand und nicht wie ein Blatt über Facebook gelegt wird, sondern in Facebook integriert wird durch Programmierung.

Ich bevorzuge die iFrame Technik im Canvas Format, weil wir da besser auf die verschiedenen Bildschirmgrößen und Geräte Typen eingehen können. Wir können durch die Programmierung eine Abfrage machen und wissen dann, auf welchem Endgerät die App angesehen werden soll. Auf einem großen Bildschirm am PC, auf einem Tablet oder auf einem Smartphone. Und dann können wir die Ausgabegröße im Idealfall anpassen und die Nutzer sehen eine schöne App. Nicht zu klein und ohne endlos scrollen zu müssen.

Bei der Integration oder Tab-Technik oder mittlerweile Pulldown in Facebook wird die App zusammen mit der gesamten Facebook Seite skaliert – also in der Größe auf das Zielgerät angepasst. Und das ist nicht immer optimal. Die App ist da in Abhängigkeit der Facebookseite.

Die Entwicklung von Facebook Apps für mobile Endgeräte ist generell derzeit noch mit Vorsicht zu sehen. Da die meisten Nutzer Facebook selbst als eine App auf ihrem Handy nutzen. Und eine App in einer App wird – bei Facebook – nicht angezeigt. Somit ist die App auf Mobile Devices nicht zu sehen. Anders mit Canvas Apps in iFrame Technik, die im Browser angezeigt werden können – außerhalb von Facebook und somit außerhalb der Facebook App. Da müsste aber auch ein Link auf der Pinnwand von Facebook gezeigt werden, der dann den Browser anspricht.

6. Wie wichtig ist heute Responsive Design bei Facebook-Apps?

Responsive Design heißt, dass sich der Inhalt an die Bildschirmgröße anpasst. Dass durch den Browser das Endgerät übermittelt wird und das – bereitgestellte – Design im richtigen Format dann von Server an das Endgerät gesendet wird. Responsive Design gibt es in vielen Größen, wichtig sind diese 5 Größen: Für den Desctop Bildschirm, für Tablet im Landscape Format (quer) und im Portrait Format (hoch) und dito für Smartphones. Dazu unzählige Auflösungen und Formate für Bildschirme. Mit dem entsprechenden Budget wird dafür jeweils ein Konzept zu den modifizierten Inhalten erstellt, das Design angepasst und das Template (die App) programmiert. Um dann versenden zu können auf Anforderung- also als Antwort auf die Browsermeldung zum Endgerät. Responsive Design heißt, dass nicht eine Website einfach nur in der Größe angepasst wird, sondern, dass eine Variante der Website oder App – also auch modifizierte Inhalte und Aussehen – versendet wird. Denn auf einem Desctop Screen hat man mehr Platz als auf einem Mobile Screen.

7. Du stellst die These auf, dass heute jedes Logo in ein Quadrat passen muss, warum?

Ein wichtiger Punkt ist das Format eines Logos. Denn wir alle suchen nach Informationen fast ausnahmslos online, in Communities, bei Facebook, Xing etc. Und wir erhalten Ergebnisse aufgelistet und geordnet nach unterschiedlichen Relevanz-Kriterien. In diesen Listen wird fast immer – und zunehmend – ein kleines Bild oder Logo an erster Stelle gezeigt bei jedem Ergebnis. Bei Xing ist es das Foto des Einzelunternehmers oder das Logo des Unternehmens, bei Facebook ebenso und in unzähligen Portalen genauso. Diese Bildchen haben immer ein quadratisches Format und das Foto oder Logo wird automatisiert an diese Stelle geholt aus dem Kontext des Zielortes. Das Logo wird dann entweder auf das Quadrat-Format beschnitten oder klein skaliert, so, dass man es meist nicht mehr erkennt, wenn es dann komplett in das Quadrat eingepasst ist.Bei Logo Neukreationen achte ich daher darauf, dass die Bildmarke gleichseitige Abmessungen hat.

P.S.: ThielDesign ist natürlich auch auch auf Facebook

P.P.S: Ich soll Sie interviewen? Schreiben Sie mir kurz Ihr Thema und einen Terminvorschlag an info@sandra-staub.de

Ich bin Sandra Staub. Ex-Journalistin, Marketing-Ausbrecherin, Autorin von ‘Facebook für Frauen’ und ‘Emoji Boost‘. Unternehmerin & Macherin von UnternehmerInnen im Web. Als Agenturinhaberin versorge ich mit meinem Team Unternehmen mit Social Media-Leistungen, Blogposts & E-Mail Marketing.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.