Lektionen vom mobilen Webdesign
Mobile Entwicklung ist in aller Munde, und die interaktive Branche ist in großen Turbulenzen, wenn unzählige Tablets und Smartphones auf den Markt kommen.
Die mobile App-Entwicklung bekommt die meiste Aufmerksamkeit, während das mobile Web etwas ruhig weiterschleicht. Aber das mobile Web macht jeden Tag Fortschritte, da immer mehr Entwickler mobile optimierte Schnittstellen einführen.
Das Tolle am mobilen Web ist, dass es grundsätzlich mit den gleichen Werkzeugen erstellt wird, die im herkömmlichen Webdesign und bei der Entwicklung verwendet werden.
Dies macht es weit zugänglicher als App-Entwicklung. Außerdem möchten viele Benutzer die Website eines Unternehmens von unterwegs besuchen, ohne unbedingt eine vollständige App zu benötigen.
Das Erstellen von Websites, die für Mobilgeräte optimiert sind, ist so ähnlich, aber so anders, als wenn Sie für den Desktop entwerfen. Bestimmte Faktoren spielen eine viel wichtigere Rolle. Zum Beispiel sind Bildschirmgrößenvariationen, Benutzeraufmerksamkeitsspannen und Verwendbarkeitsprobleme kritischer als überhaupt.
Dieselben Probleme sind immer auf dem Desktop vorhanden, sind aber manchmal leichter zu übersehen. Hier sehen wir uns einige Lektionen an, die wir aus der Optimierung im mobilen Web lernen können. Die Lektionen können direkt darüber informieren, wie wir gestalten und wie wir über traditionelles Webdesign und Webseitenarchitektur denken.
Vereinfachte Navigation auf mobilen Websites
Eines der ersten Dinge, die bei der Suche nach mobilen Websites offensichtlich werden, ist die extreme Vereinfachung der Navigation. Die Navigation wird nicht nur auf einer mobilen Website sehr wichtig und zentral, sondern wird auch oft erheblich reduziert, um sich nur auf die kritischsten Elemente zu konzentrieren.
Ich finde es erstaunlich, wie die Top-Level-Navigation auf den meisten mobilen Websites auf zwei bis vier Elemente reduziert werden kann. Natürlich ist mir klar, dass der Inhalt einer mobilen Website oft für die Zielgruppe optimiert ist. Beispielsweise, Wahrheits-Tabernakel-Kirche hat sechs Optionen in seiner Hauptnavigation, von denen nur eine in die Navigation für die mobile Version ; und derjenige, der es geschafft hat ("Kontakt"), steht im Mittelpunkt der gesamten Homepage.
Der Inhalt, der es nicht in die mobile Version geschafft hat, ist natürlich immer noch völlig relevant. Die mobile Schnittstelle soll Leute fangen, die versuchen, die Kirche zu finden, oder die Dienstzeiten überprüfen oder sie einfach kontaktieren. Dies sind die wahrscheinlichsten Ziele des mobilen Surfer. Diejenigen, die die gesamte Website auf einem Desktop-Computer aufrufen, wollen diese Dinge so gern haben wie sie, um die Kirche zu recherchieren, um zu sehen, ob es der Ort ist, den sie besuchen möchten.
Also, was ist die Lektion zu lernen? Bedeuten diese beiden Schnittstellen nicht völlig unterschiedliche Zielgruppen und haben sie völlig unterschiedliche Zwecke? Vielleicht, aber wir können viel von der extremen Konzentration der mobilen Schnittstelle lernen. Beachten Sie, wie alles um die Aktionen geht, die Sie ergreifen können? Die Kirche hat alle Navigationselemente eliminiert, die sich wie Kästchen zum Abhacken anfühlen.
Ein interessantes Element ist die Navigationsoption "About" auf der gesamten Website. Die mobile Website könnte für Menschen unterwegs optimiert sein, aber es gibt keinen Grund anzunehmen, dass sie nicht daran interessiert wären, über die Kirche und ihre Überzeugungen zu lesen. Vielleicht hat Ihnen jemand die Kirche im Vorbeigehen erwähnt und Sie aufgefordert, es auf Ihrem Telefon nachzuschlagen.
Daher sollte die Navigationsoption für dieses Element geändert werden. Was wäre, wenn stattdessen etwas wie "Was Sie über uns wissen sollten" kommuniziert wurde? Obwohl es ein bisschen lang ist, spiegelt es eine hilfreichere Einstellung wider. Ein allgemeiner "Über" -Buckel fühlt sich an wie ein Ort, an dem alle Informationen gespeichert werden, die niemand liest. "Ein Besucherführer für unsere Kirche" fühlt sich viel nützlicher und zielgerichteter an.
Die Einfachheit und Fokussierung der mobilen Benutzeroberfläche zeigt, dass alles einen Zweck erfüllen muss, um einen Platz auf der Website zu erhalten. Wenn das gleiche für die gesamte Website gilt, würden wir weniger geneigt sein, sie mit scheinbar wichtigen Inhalten zu füllen und mehr dafür zu sorgen, dass alles eine klare Funktion hat.
Dies spiegelt eine sehr aufgabenorientierte Mentalität wider. Jede Option fordert den Benutzer zu einem aktiven Schritt heraus. Es ist so, als ob jede passive Option bereinigt und auf verwertbare Elemente auf der mobilen Website reduziert wurde. Dies führt uns zur nächsten Lektion: Sei extrem aufgabenorientiert.
Mobile Websites sind aufgabenorientiert
Lassen Sie uns mit einer aufgabenorientierten Denkweise die gesamte Website überdenken. Während die Homepage schön gestaltet ist, ist der Aufruf zum Handeln viel weniger offensichtlich. Der Inhalt ist voll von Informationen, die darauf warten, dass Sie sich für ein Interesse entscheiden.
Zum Beispiel ruft das große Banner, das ein kommendes Ereignis hervorhebt, mich nicht zu einer Art Aktion auf; sehr passiv. Mit einer aufgabenorientierten Mentalität konnten wir den Aufruf "Lesen Sie mehr" deutlich verbessern. Dies könnte so einfach sein, wie den Aufruf zum Handeln viel prominenter zu machen; zum Beispiel eine große Taste in einer kontrastierenden Orange. Darüber hinaus könnte der Anruf zu "Weitere Informationen und Anmeldung" geändert werden.
Ein anderes Beispiel ist die Willkommensnachricht. Ich schätze die Absicht und die Botschaft, die hier kommuniziert wird. Die Nachricht zeigt, dass echte Menschen hinter der Website stehen und versucht, die Seite persönlich zu gestalten. Aber noch einmal, lassen Sie uns das mit einer aufgabenorientierten Mentalität analysieren. Eine großartige Fortsetzung einer solchen Einführung wäre ein klarer Aufruf zum Handeln, der die Besucher ermutigt, den nächsten Schritt zu tun. Die einzigen, die das hier lesen werden, sind Neuankömmlinge. Aktuelle Mitglieder überspringen das direkt auf Dinge wie den Veranstaltungskalender. Stellen Sie also einen Conversion-Point für Nutzer bereit, beispielsweise "Stellen Sie uns eine schwierige Frage" oder "Was Sie erwarten, wenn Sie uns besuchen".
Im Gegensatz dazu ist die Box "Special Guest" fantastisch. Es befasst sich mit Schlüsselthemen und treibt Menschen dazu an, tiefer zu graben. Ich frage mich nur, ob es ein prominenteres Element der Seite sein könnte. Wiederum werden die Mitglieder dahin gelangen, wo sie hingehen müssen. Die Konzentration auf diejenigen, die neu auf der Website und in der Kirche sind, würde einen langen Weg zur Maximierung der Möglichkeiten bieten.
Ich weiß, dass ich diese Website wirklich verprügele, aber das liegt nicht daran, dass ich es nicht mag oder denke, dass es seiner Funktion nicht dient. Mein Ziel ist nur, unser Denken und unsere vorgefassten Meinungen darüber, wie eine Website aussehen und tun soll, herauszufordern. Ich empfehle diese Kirche wirklich dafür, eine schöne und funktionelle Webseite zu haben, mit einer mobilen Erweiterung!
Mobile Websites verkleinern ihren Inhalt dramatisch
Eine andere offensichtliche Lektion, die sich auf die Reduzierung der Navigation bezieht, ist, dass mobile Websites ihren Inhalt immer verkleinern. Die Anzahl der Optionen wird nicht nur auf die Kernfunktionalität und den Zweck der Website reduziert, sondern auch die Anzahl der Optionen wird erheblich verringert.
In einigen Fällen wird ein Großteil der Kopie vollständig eliminiert! Dies wirft die Frage auf, ob diese Inhalte auf der gesamten Website benötigt werden, wenn die mobile Version ohne sie funktioniert? Divi Aruba ist ein großartiges Beispiel dafür. Das verlockende Marketing-Wort, das über das Foto gelegt wurde, mag für die Startseite ein unverzichtbares Element sein, aber es wurde auf der Micro-Mobile-Website .
In der mobilen Version ist das Logo auf dem gleichen Bild platziert, und dennoch vermittelt es die exakt gleiche Botschaft: Wenn Sie einen solchen Ort besuchen möchten, lesen Sie weiter. Warum nutzen Sie diesen prominenten Ort nicht, um Menschen zur gewünschten Aktion zu führen? Sicherlich wissen die Designer, was das wichtigste Element ist, um Besucher zu Kunden zu machen. Setzen Sie diese Informationen in die Tat um und treiben Sie die Menschen mit einem prominenten Aufruf zum Handeln statt mit flauschigem Marketing an.
All die guten Sachen, sans Flaum
Dies führt uns zur nächsten Lektion: den Fluff zu verlieren. Das nächste Beispiel ist eine positive Demonstration davon. Reisen Tex ist eine Reiseinformations-Website für den Bundesstaat Texas. Es hat einen klaren Zweck und ein klares Zielpublikum. Glücklicherweise haben die Designer die flauschig-lose Denkweise vollständig angenommen.
Nicht nur das Mini-Handy-Website Konzentrieren Sie sich ganz auf das Thema und die wichtigsten umsetzbaren Elemente, aber auch die gesamte Website! Was für eine Erleichterung, fast keinen Flaum zu sehen. Ein etwas düsteres wie eine Geschichte von Texas wäre zu verlockend. Wenn Menschen eine Geschichtsstunde wollten, würden sie diese Website nicht besuchen. Es wird Ihnen schwer fallen, Inhalte zu finden, die für den einzigartigen Zweck dieser Website nicht relevant sind.
Gewöhnen Sie sich an, alles in Frage zu stellen. Nur so kann eine Website wirklich auf ihre kritischen Elemente gebracht werden, was genau auf einer guten mobilen Website geschieht. Es werden harte Entscheidungen getroffen und ansonsten wertvolle Inhalte geschnitten, um die Website zu straffen. Nenne Flaum für das was es ist und nuke es!
Branding ist König im mobilen Web
Mir geht es um Kreativität im Internet. Viele der größten Veränderungen in der Branche sind in der Tat auf die Weigerung zurückzuführen, sich an den Status quo zu halten. Aber es gibt eine Zeit und einen Ort für alles. So viele Designer verwenden ihre Aufträge als Entschuldigung, um ihre kreativen Säfte freizugeben, zu keinem anderen Zweck, als etwas Kreatives zu tun. Dies macht die Website zu einem Design für den Designer, nicht für den Kunden und seine Bedürfnisse. Dies ist eine Sache, vor der das mobile Web eher mutig warnt.
Branding ist im mobilen Web unglaublich konsistent, und eines der beständigsten Teile ist die Platzierung des Logos. Auf mobilen Websites finden Sie unten keine verrückten Logos mit festen Fußzeilen. Funktionalität ist König, und Logos erscheinen immer an der Spitze. Können Sie sich vorstellen, eine mobile Website zu besuchen und das Logo nicht sofort zu sehen? Dies ist jedoch auf vielen vollständigen Websites üblich.
Hier sind ein paar Websites, die, obwohl minimal und ohne überwältigenden Stil, reich an Branding sind, die nicht verpasst werden können.
Die Lektion hier kann einen tiefgreifenden Einfluss darauf haben, wie Sie Ihre Arbeit angehen und auf den grundlegenden Wert, den Sie für Ihre Kunden darstellen. Für jeden Designer, der herausfindet, dass die Bedürfnisse des Kunden sein gesamter Zweck für das Projekt sein sollten, gibt es einen anderen, der der Welt zeigen möchte, wie kreativ und originell sie sind.
Wie jeder andere, der an der Produktion einer Website beteiligt ist, sollte der Webdesigner zielstrebig sein, dem Kunden zu dienen, seinem Geschäft zu helfen und das Endergebnis zu verbessern. Mit jedem Element, das Sie auf eine mobile Website setzen, werden seine Rolle und der damit verbundene Nutzen berücksichtigt. Wenden Sie diese Mentalität auf alles an, was Sie tun, und Sie werden bald einen starken Verbündeten in Ihrem Klienten finden.
Je mehr wir die Bedürfnisse des Kunden annehmen und alles tun, um Wert auf die Website zu bringen, desto mehr werden wir eine grundlegende Veränderung unserer Arbeit erleben. Wir werden vom "coolen Zeug" zur Betrachtung alles aus der Sicht des Kunden gehen. Erhöht diese Funktion ihren Gewinn? Wie kann das Design geändert werden, um das Geschäft zu verbessern? Wenn ein Nebenprodukt Ihrer Arbeit mehr Geld für den Kunden ist, dann werden Sie überall Gelegenheit finden.
Webseiten ohne die Gimmicks
Eine der größten Errungenschaften des mobilen Webs ist das völlige Fehlen von Gimmicks. Um fair zu sein, gibt es eine Zeit und einen Ort für Gimmicks im Internet. Tatsächlich widme ich ihnen ganze Teile meiner Bücher. Aber der Mangel an Gimmicks auf mobilen Websites zeigt, dass diese scheinbar großartigen Ideen keinen wirklichen Zweck erfüllen.
Alles, was auf einer mobilen Website läuft, sollte mehrere Filter durchlaufen. Ist der Inhalt relevant und äußerst nützlich? Ist der Inhalt entscheidend und dient er dem Hauptzweck der Website? Ist die Website einfach zu benutzen und zu verstehen? Ist die Navigation unkonventionell? Wenn ja, ist es für die Funktion der Website entscheidend? Die Antwort mag ja sein, aber meistens wird es ein entscheidendes Nein sein.
Einige Gimmicks, die in der mobilen Entwicklung merklich fehlen, sind Splash-Screens, ungewöhnliche Navigation, bedeutungslose Animationen und Interaktivität, Inline-Scroll-Regionen, ungerade Layouts und Layouts mit fester Breite. Die Effizienz des mobilen Webs ist erstaunlich.
Fazit
Wie Sie sehen können, haben wir eine Reihe von Lektionen aus dem mobilen Web zu lernen; insbesondere seine Fähigkeit, unnötige Elemente einer Website aufzudecken. Wie bei vielen Dingen im Leben, öffnet ein kleiner Perspektivwechsel oft unsere Augen für den wahren Wert von Dingen, die wir seit langem für selbstverständlich halten.
Ich behaupte nicht, dass wir den Zweck des Webs aus den Augen verloren haben. Ich schlage vielmehr vor, dass wir eine viel strategischere Mentalität annehmen.
Patrick McNeil ist freiberuflicher Schriftsteller, Entwickler und Designer. Insbesondere liebt er es, über Webdesign zu schreiben, Leute für Webentwicklung zu schulen und Websites zu erstellen. Patricks neuestes Buchprojekt ist Das Web-Handbuch des Designers ; Es enthält viele Themen in diesem Artikel. Sie können mehr darüber erfahren TheWebDesignersIdeaBook.com . Folge Patrick auf Twitter @designmeltown .
Dieser Beitrag wurde präsentiert von DudaMobile, a mobile Website Gründungsunternehmen.
Welche Aspekte des mobilen Designs versuchen Sie auf den Desktop zu übertragen? Siehst du Einfachheit und Geschwindigkeit im mobilen Web selbst?