Share
Wir haben kürzlich einen Artikel über die derzeitige Umstellung des Tablet-Browsings auf das Webdesign veröffentlicht. Dies ist eine wichtige Änderung für die Technologiebranche, aber auch für Webdesigner, die nun aufgefordert werden, die Tablet-Plattform auf Kompatibilität zu prüfen. Gleichzeitig gibt es jedoch eine weitere Verschiebung: der Übergang von mauszentrierten Schnittstellen zu Schnittstellen, die sich an Apps orientieren.
Eine Web-App ist, vereinfacht gesagt, eine Anwendung, die auf einer Internetverbindung basiert, um funktionieren zu können. Nichts wird lokal gespeichert und alles ist in der Cloud. Dies hat eine Reihe von Vorteilen: Alles ist überall zugänglich, es gibt nur geringe Leistungsprobleme, Festplattenausfälle bedeuten keinen Arbeitsverlust und die meisten sind plattformübergreifend. Für Anwendungsentwickler ist dies daher ein attraktiver Vorschlag, der dazu führen könnte, dass Apps einem breiteren Segment ihrer potenziellen Zielgruppe zur Verfügung stehen.
Es gibt einen deutlichen Unterschied zwischen einem Web App und ein WebSeite? ˅. Diese Debatte ist jedoch nicht das Thema des Artikels. Stattdessen betrachten wir eine weitere Verschiebung im Webdesign, da das app-zentrierte Design für mehrere Plattformen immer beliebter wird und alles von der Navigation bis hin zu Formularen betroffen ist.
Dies ist vielleicht die größte Bedeutung in dieser Verschiebung. Der Fall bei jeder App ist, dass sie so einfach wie möglich sein muss, um einen Benutzer nicht zu frustrieren. Jede App hat jedoch ein Ziel und ein Ziel, das nach einer Benutzerinteraktion erreicht werden kann. Daher müssen sich Web-Apps viel mehr auf die Schlüsselfunktionen konzentrieren als auf einer herkömmlichen Website.
Der Homescreen von Facebook beim Abmelden. Diese Betonung zeigt sich nicht nur in Web-Apps selbst, sondern auch auf deren Splash-Seiten vor einem Login. Wenn wir Facebook als Beispiel nehmen, ist der größte Teil der Seite das Anmeldeformular, da dies auf der primären Seite vorgesehen ist: mehr Benutzer gewinnen.
Es gibt auch eine sekundäre, benutzerorientierte Variante dieser Theorie. Wenn zum Beispiel jemand ein Formular auf der Webseite ausfüllt, besteht eine geringe Chance, dass er dieses Formular zurücksetzen möchte. Die Wahrscheinlichkeit, dass sie ihren Namen bei der ersten Runde richtig buchstabieren, ist größer, und daher sollte der Einreichungsbutton stärker betont werden.
Das Anmeldeformular von ThemeForest enthält eine ziemlich große Schaltfläche für die Übermittlung, da dies die meisten Benutzer möchten. Es gibt jedoch auch die Links "Passwort vergessen / Benutzername" für diejenigen, die sie benötigen, aber diese sind kleiner.
Diese Idee ist eine Belastung der visuellen Hierarchie, da das Hauptziel einer bestimmten Webseite das prominenteste und auffälligste Element auf dieser Seite ist.
Eine weitere Konsequenz ist die Zunahme eines bestimmten Designstils von Web-Apps. Haben Sie jemals eine Website getroffen, die so aussieht, als würde sie zu Ihrem Dock (oder dem Startmenü unter Windows) gehören? Nun, es gibt eine Reihe von Beispielen, die eine Web-App auf elegante Weise nativ über Plattformen wirken lassen, indem verschiedene schöne Farbverläufe und Schatten verwendet werden.
Dies zeigt sich nicht nur bei Web-Apps für Desktop-Anwendungen, sondern auch bei mobilen Anwendungen. Viele kleinere Entwickler entscheiden sich für die Erstellung mobiler Webanwendungen über native Apps, um Kosten und Lernkurven zu sparen. Diese Methode funktioniert nicht nur beim Erstellen von Original-Web-Apps, sondern auch beim Design beliebter Apps wie WordPress (wie in dieser MobileTuts + -Sitzung beschrieben)..
Zeigen Sie dem Benutzer, was er braucht, nicht alles, was er nicht braucht.
Früher gab es eine Zeit, in der Sie, wenn Sie eine Aktion in einer komplexen Web-App ausführen möchten, durch mehrere verschiedene "Ebenen" scrollen und durchlaufen müssen, bevor Sie so etwas erreichen. Bei kontextspezifischer Navigation ist dieser Vorgang jedoch wesentlich einfacher. Die allgemeine Theorie dahinter ist, dass ein Benutzer nicht zu jeder Zeit auf jede Option zugreifen muss und dass nur diejenigen angezeigt werden sollten, die für seine aktuelle Situation relevant sind.
Diese szenariospezifische Navigation wird im Allgemeinen durch die Navigation auf der zweiten Ebene erreicht. Die nächste nicht webbasierte Analogie, die ich finden kann, betrifft Microsoft Office und die Verwendung eines Ribbon-Layouts. Die wichtigsten Abschnitte sind mit einem Titel versehen und auf einen einfachen Mausklick werden alle relevanten Optionen angezeigt.
Eine einfache Möglichkeit, dies zusammenzufassen, besteht darin, dem Benutzer zu zeigen, was er braucht, nicht alles, was er nicht tut. Die gleiche kontextbasierte Theorie kann auch auf andere Elemente angewendet werden, z. B. auf Popup-Modalboxen, die nur Elemente anzeigen, die der Benutzer nur benötigt, wenn dies gewünscht wird.
Microsoft Office ist ein Beispiel für die weit verbreitete Verwendung eines Kontextmenüs. Dies scheint ein wenig von den zuvor besprochenen Themen abzuweichen, aber diese drei Elemente können einen großen Einfluss auf das Webdesign haben. Durch das Hinzufügen von Schatten zu einer Schaltfläche wird es zum Beispiel als Popout und fast als nicht mehr flaches Design erscheinen.
Fügen Sie dann Schatten zu einem modalen Fenster hinzu und sehen Sie, wie ein Definitionsgefühl zwischen dem ursprünglichen Inhalt und dem neuen Rahmen entsteht. Nur so kann eine Website interaktiver aussehen, da sie wie eine native App zu mehreren Ebenen wird. Berücksichtigen Sie dann die Auswirkungen, da die Deckkraft des Inhalts unter verschiedenen Umständen geändert wird, um dem Inhalt selbst eine neue Dimension zu verleihen.
Die Entscheidung für Farbverläufe kann sich auch nachhaltig auf das endgültige Design auswirken. Genauso wie sich Farbverläufe aufbauen, "knallt" das Design nur noch mehr und erscheint 3D, wenn es zusammen mit der inneren Schattierung verwendet wird.
Beachten Sie, dass das rechte Bild so aussieht, als hätte es zwei Ebenen, das linke Bild nicht. Da eine Webanwendung als lokal installierte Software fungieren soll, ist das Gefühl, dass alles zusammenarbeitet, von entscheidender Bedeutung. Und in erster Linie können Entwickler diesen Sinn über das Design vermitteln. Ich würde Sie herausfordern, eine Webanwendung zu finden, deren gesamte Benutzeroberfläche aus reinen HTML-Elementen ohne benutzerdefiniertes Styling besteht.
Du kannst nicht Keine Überraschung da! Tatsache ist, dass Webdesigns durchweg durchgängig gestaltet werden müssen. In Web-Apps sind die Verwendung von Steuerelementen und Eingabebereichen wichtige Elemente. Etwas so einfaches wie das Hinzufügen einer benutzerdefinierten Hintergrundfarbe und das Überschreiben des Rahmens einer Einreichungsschaltfläche kann einen großen Einfluss auf die Einheit Ihres Designs haben.
Beachten Sie im GMail-Screenshot, wie sich nur das Design der Tasten-Dropdown-Menüs und -Schaltflächen in das Gesamtdesign "einfügt". Oh und ja, ich habe eine Bestellung aus dem Angry Birds Store! ; P
Bestandselemente neu zu gestalten ist eine Sache, aber das Erstellen neuer Elemente ist noch besser. Nehmen Sie MyBankTracker als Beispiel, das einen benutzerdefinierten Schieberegler verwendet, der noch zu seinem gesamten weißen und blauen Design passt.
Bei der Suche nach einer alternativen Perspektive für das Design von Web-Apps fand ich ein interessantes Zitat von Chris Capossela, einem ehemaligen Microsoft Office-Marketingmanager. Er sagte etwas in der Richtung: "Als wir [die Funktionen der Benutzer] in Office gefragt haben, neunmal von zehn nannten sie bereits etwas im Produkt, sie konnten es einfach nicht finden ". Diese Art von Links verweist auf die gesamte situationsoptimierte Navigationsidee.
Bei der Frage nach den [von den Benutzern gewünschten] Funktionen von Office (neun von zehn) benannten sie bereits etwas im Produkt. Sie konnten es einfach nicht finden.
Fakt ist: Wenn Sie versuchen, viele Features auf kleinem Raum zu stopfen, wird jedes Feature weniger bedeutsam. Und der Benutzer wird viel länger damit verbringen, nach der gewünschten Funktion zu suchen. Und der Benutzer wird frustriert. Und der Benutzer wird gehen. Du willst das nicht. Um dies besser in die richtige Perspektive zu bringen, reduzieren Sie die Auflösung Ihres Bildschirms auf das kleinstmögliche und starten Sie die Anwendung, die Sie mit der höchsten Benutzeroberfläche verwenden. Versuchen Sie es und verwenden Sie es und Sie werden meinen Drift danach fangen.
Ein weiterer Vorschlag ist, auf Ihre Benutzer zu hören, aber nicht zu viel. Wenn Benutzer immer mehr Funktionen anfordern, neigen Sie vielleicht dazu, hier und da neue Optionen zu verwenden.
Gehen wir weg von dem, was Sie verwenden sollten / können, lassen Sie uns nur drei wichtige Dinge besprechen sollte nicht Wenn Sie an einer App-zentrierten Benutzeroberfläche arbeiten.
Stellen Sie sich vor, Sie treffen jemanden auf der Straße. Du fragst sie, wo der nächste Starbucks ist und sie antworten in einer anderen Sprache. Sie scheinen ein Wort aufzugreifen, das Sie als verwandt wahrnehmen, aber das stellt sich als falsch heraus und hat eine völlig verzerrte Bedeutung. Das klingt für eine Anologie etwas langatmig, aber der Punkt, den ich betonen möchte, ist, dass Sie aufgrund Ihrer natürlichen Zunge etwas wahrnehmen können, der Designer jedoch möglicherweise etwas ganz anderes anstrebt. Wenn Sie zum Beispiel Ihre Überschriften so erzeugen, dass sie wie Schaltflächen aussehen, kann der Benutzer versuchen, darauf zu klicken, da er der Meinung ist, dass er Teil der Web-App ist, und er kann weiterhin frustriert sein, weil er keine Funktion und verwirrende Erfahrung hat.
Mein erster Beitrag hier auf WebDesignTuts + behandelte die Formularvalidierung und es ist wichtig für die Benutzer. Als Nutzer möchte ich gerne wissen, was ich falsch mache, wenn ich mit Ihrer App nicht arbeiten kann. Es ist immer ratsam, Platz für Feedback von Anfang an einzubauen.
Designinkonsistenz ist eine frustrierende Erfahrung, da sich ein Benutzer gerade an eine Vorgehensweise gewöhnt und mit einer anderen konfrontiert wird. Ein sehr einfaches Beispiel ist auf Expedia, wo der abgehende und zurückgehende Kalender die Monate wechselt, wenn Sie ein Datum auswählen.
Im Folgenden finden Sie eine kurze Liste von sechs Websites und Webanwendungen, die einige der in diesem Artikel besprochenen Gestaltungsprinzipien vom nativen App-Design bis zum Schwerpunkt aufzeigen.
Zusammenfassend lässt sich festhalten, dass der Artikel von traditionellen, nativen Anwendungen eindeutig beeinflusst wird. Jede Designentscheidung, die Web-Apps beinhaltet, hängt jedoch von der Benutzerfreundlichkeit ab. Anwendungen müssen einfach sein, sie müssen sich auf die wichtigsten Funktionen konzentrieren, damit der Benutzer die Website problemlos durchlaufen kann.
.
Accentsconagua