Mobiles Webdesign 10 Tipps zur Verbesserung der Benutzerfreundlichkeit

Das mobile Surfen im Internet wird voraussichtlich zur nächsten großen Internetplattform. Mit mobilen Geräten, die aufgrund der Technologie in eine Hand passen, ist es jetzt einfach, von nahezu überall aus im Internet zu surfen. Die Implementierung in mobiler Webdesign-Implementierung macht es schwierig, sich durch verschiedene beliebte mobile Websites zu bewegen. Das Entwerfen für mobile Geräte muss einfacher sein als die Standardwebsite und aufgabenorientierter sein, um die Arbeit zu erledigen, da die Benutzer nach etwas Bestimmtem suchen.

Sie sollten berücksichtigen, wie Sie den für Ihre wichtigsten Inhalte verfügbaren Speicherplatz so knapp wie möglich nutzen können und für mobile Benutzer interessant bleiben. Vermeiden Sie große Bilder und Flash-Animationen, da Ihre Website dadurch langsamer wird. Denken Sie daran, dass Funktionalität für mobile Websites wichtiger ist als der Stil. Wenn Ihre Website nicht codiert ist und das Design nicht korrekt ist, könnte sie auf einem Telefon besser aussehen, auf einem anderen schlecht oder gar nicht, und es wird überhaupt nicht angezeigt. Testen, prüfen und prüfen, ob es mit allen mobilen Geräten kompatibel ist.

Um Sie bei der Erstellung einer Website zu unterstützen, die nicht nur auf Desktop- oder Laptop-Computern, sondern auch auf mobilen Geräten verfügbar ist, sollten Sie im mobilen Webdesign einige Beispiele beachten, die Beispielbilder zusammen mit dem direkten Link der mobilen Website-Version enthalten.

1. Legen Sie die Bildschirmauflösung fest

In der mobilen Welt gibt es eine Vielzahl von Designaspekten, von verschiedenen Bildschirmgrößen und Auflösungen bis hin zu verschiedenen Formen. Streben Sie nach einem Gleichgewicht zwischen ausreichender Bildschirmbreite und Zuschauergröße. Ermitteln Sie die Spezifikationen aktueller mobiler Geräte und verwenden Sie Ihr bestes Urteilsvermögen. Für mobile Entwickler besteht die Herausforderung darin, eine Anzeige über verschiedene Bildschirmgrößen hinweg zu erstellen, ohne Seiten für verschiedene Plattformen neu erstellen zu müssen.

Im Folgenden finden Sie eine Liste der im Februar 2011 auf mobilen Geräten verbreiteten Webauflösungen, die von Uxbooth.com mit ihrem veröffentlichten Artikel präsentiert wurden, Überlegungen zum mobilen Webdesign (Teil 2): ​​Abmessungen, von David Leggett. Der Autor erläutert einige Punkte zu Anzeigeabmessungen und Lösungen für die Layoutgestaltung.

2. Teilen Sie Webseiten in kleine Teile auf

Lange Textabschnitte können schwer zu lesen sein. Wenn Sie sie auf mehreren Seiten platzieren, wird der Bildlauf in eine Richtung begrenzt. Beseitigen Sie Inhalte mit niedriger Priorität. Halten Sie sich an eine einzelne Spalte mit umlaufendem Text, so dass kein horizontaler Bildlauf möglich ist.

Für das Beispiel unten zeigt die mobile Website-Version von CBS News nur den Hauptteil der Nachrichten und unterteilt die Nachrichtenartikel in kleine Teile. Während Treehugger sich mit seinen neuesten Artikeln und neuesten Tweets mit einigen Funktionen der gesamten Website präsentiert. Auf beiden Websites muss der Benutzer auf einen Textlink klicken, um den Rest des Artikels anzuzeigen.

CBS-Nachrichten

Baumumarmer

3. Vereinfachen Sie das Design

Einfachheit bedeutet Benutzerfreundlichkeit. Lassen Sie sie sich problemlos auf der Baustelle bewegen. Vermeiden Sie die Einbeziehung von Tabellen, Frames und anderen Formatierungen. Wenn Sie das Auffüllen verwenden, denken Sie daran, dass es auf ein absolutes Minimum beschränkt ist, das weitaus geringer ist als bei einer normalen Webseite. Im Vergleich zu Desktop-Computern gilt: Je mehr Sie auf die Links auf mobilen Websites klicken, desto länger warten Sie aufgrund der Ladezeit. Damit müssen Sie Ihre Website mit einem Gleichgewicht zwischen Inhalt und Navigation auseinandersetzen und vereinfachen.

In unserem Beispiel für die mobile Version der Best Buy-Liste werden nur die wichtigsten Produktkategorien aufgeführt, die die Hierarchieebene für Inhalte reduzieren. Während die mobile Homepage von YouTube nur die vier neuesten Spotlight-Videos zeigt.

Bester Kauf

Youtube

4. Option zum Anzeigen der vollständigen Website

Bieten Sie Ihren mobilen Besuchern einen Link zum Zurückkehren zu Ihrer vollständigen Website, damit der Benutzer andere Inhalte und Funktionen finden und anzeigen kann, auf die nur die Desktopversion der Website zugreifen kann. Ihre Zuschauer werden sicherlich viel vertikales Scrollen durchführen. Helfen Sie ihnen daher mit "Zurück nach oben" -Link, damit sie an den Anfang der Seite springen können.

Als Beispiel hat Ars Technica einen Link-Button zur Standard-Website in der Überschrift. Während die Shangri-La ihren vollständigen Website-Link in der Fußzeile platziert haben.

Ars Technica

Shangri-La

5. Platzierung der Navigation

Lernen Sie Ihr Publikum kennen und machen Sie sich bewusst, wonach Sie suchen. Finden Sie heraus, wie sie auf Ihrer Website navigieren möchten. Positionieren Sie Ihr Navigationsmenü unter dem Inhalt, wenn Ihre anvisierten mobilen Benutzer schnell sehen möchten, dass sich der Inhalt schnell ändert. Der Inhalt und die Überschrift müssen zuerst sichtbar sein, um den Seiteninhalt nicht zu beeinträchtigen. Für Benutzer, die direkt zu einer bestimmten Kategorie navigieren möchten, platzieren Sie die Navigation oben auf der Seite. Nachfolgend finden Sie verschiedene Beispiele für Navigationsplatzierungen, die im mobilen Webdesign verwendet werden.

D & G

Politico

tägliches Horoskop

6. Verwenden Sie Textlinks

Ihre Hauptwebsite kann flinke Flyout-Menüs, Rollover oder andere ausgefallene Spielereien verwenden, ein mobiler Browser wird dies jedoch wahrscheinlich nicht tun. Beachten Sie, dass dynamische Seitenelemente und grafische Links Ressourcen verbrauchen. Entscheiden Sie sich also für gut beschriftete Textlinks.

Eine Liste getrennt

Reddit

7. Unterscheiden Sie den ausgewählten Link

Wenn Sie den Cursor nach unten bewegen, scrollen Sie die Seite und markieren Sie alle Links auf einmal. Daher ist es wichtig, den Benutzer klar zu sagen, welcher Gegenstand im Fokus ist. Dies kann durch Ändern der Schriftart- und Hintergrundfarbe von Links und Schaltflächen oder durch einfaches Hinzufügen von Füllzeichen um Links bewirkt werden, um den anklickbaren Bereich um 44px um 44px zu vergrößern. Geek Squad und Diesel verwendeten große Schriftarten für anklickbaren Text.

Geek Squad

Diesel

8. Balance links

Jeder Seiten-Download beansprucht Zeit und Systemressourcen, von denen letztere knapp sind. Versuchen Sie also nicht, den Seitenbesucher zu zwingen, eine Vielzahl von Seiten zu durchsuchen, um auf die gesuchten Informationen zuzugreifen. Treffen Sie ein Gleichgewicht zwischen der Anzahl der Links auf jeder Seite und der Tiefe der Site.

Flickr

Twitter

9. Benutzertexteingabe reduzieren

Es ist schwierig, Text in mobile Versionen von Websites einzugeben. Ersetzen Sie sie stattdessen mit Optionsfeldern oder einer Liste, damit Sie leicht entscheiden können, was sie benötigen. Denken Sie daran, dass Benutzer von Handys keinen Zugriff auf herkömmliche Tastaturen und Mäuse haben. Je kürzer die URL, desto besser, weil es lange dauert, lange URLs einzugeben.

Für unser Beispiel unten hat Fedex Checklisten und Dropdown-Menüs verwendet. Während Tumblr erstellt wurde, wählen Sie Ihre Sprache über das Dropdown-Menü aus.

Fedex

Tumblr

10. Keine Pops oder Aktualisierungen

Mobile Browser unterstützen normalerweise keine Popups. Und wenn, dann hätten sie sehr engen Raum, in den sie eintauchen könnten. Vermeiden Sie die Verwendung, um unvorhersehbare Ergebnisse zu vermeiden. Lassen Sie die Seiten nicht regelmäßig aktualisieren, um zu vermeiden, dass der Speicher des Geräts begrenzt wird. Lassen Sie den Benutzer den Inhalt aktualisieren.

In einer Nussschale

Werden Sie kreativ und wenden Sie Ihr mobiles Webdesign auf neue Weise an. Machen Sie Ihre Inhalte überzeugend genug und nutzbar. Geben Sie Ihren Benutzern das, was sie wollen, wann sie es wollen. Benutzer möchten nicht tiefer in die Website einsteigen, um nur zu finden, wonach sie im mobilen Web suchen.

Haben Sie bevorzugte mobile Sites, die Sie wirklich inspiriert haben? Können Sie einige Ihrer mobilen Webdesign-Tipps mitteilen? Lass uns wissen!

Lesen Sie weiter

1. Sich anpassendes Webdesign (alistapart.com)
2. Machen Sie Ihre Website mobil (thinkvitamin.com)
3. W3C mobileOK Checker (w3.org)
4. iPhone Simulator