Erstellen Sie das Browserfenster neu

    Vor zwei Monaten schrieb Henrik Enerot, ein Designer des schwedischen Webstudios Antrop, einen wunderbaren Beitrag - Das Browserfenster neu gestalten - darüber, wie ein moderner Browser aussehen sollte. Dieser Text hat uns sehr gut gefallen - genau solche Ideen verbessern das Internet für den Durchschnittsnutzer erheblich. In Runet haben nur wenige auf diesen Beitrag geantwortet. Da wir Gleichgesinnte suchen, die auch Henriks Ideen mögen, haben wir beschlossen, ihn vollständig für Habr-Benutzer zu übertragen.






    Erstellen Sie das Browserfenster neu


    Wie Sie wissen, hat Apple kürzlich einen Löwen aus seinem Käfig herausgebracht, Mac OS X Lion. Die Reaktion auf das neue Betriebssystem war uneinheitlich. Die Autoren von Gizmodo.com nannten den X Lion beispielsweise "Apple Vista". Und der Besitzer von Winsupersite.com, Paul Turrot, gab zwar eine positive Bewertung ab, aber mit offensichtlicher Zurückhaltung. Der AppStore X Lion erhält überwiegend gute Noten. Etwa 8% der Nutzer bewerteten drei Sterne oder weniger. Die meisten schlechten Bewertungen sind Beschwerden über Stabilität, Leistung und Kompatibilität mit den verwendeten Anwendungen. Einige hatten jedoch Schwierigkeiten mit dem neuen Gestensystem. Hier ist, was einer der Benutzer schreibt: "Warum sollte ich lernen, in die falsche Richtung zu scrollen, in die ich seit 20 Jahren scrolle?"





    Ich habe Lion letzte Woche installiert und bis jetzt gefällt es mir sehr gut. Gleichzeitig sehe ich auch eine Reihe von Problemen, von denen das wichtigste eine Mischung aus dem alten und dem neuen Paradigma der Benutzerinteraktion ist.

    Dies ist keine Überprüfung von Mac OS X Lion. Eigentlich werde ich eine spezielle Frage analysieren, die sich während meiner Arbeit mit diesem Betriebssystem stellte, und eine Lösung vorschlagen.

    Vollbild-Buzz?

    In dieser Version des Betriebssystems entschied sich Apple für die direkte iOS-spezifische direkte Steuerung ( siehe Direkte Manipulation in Wikipedia - ca. Per. ) Mit dem Verhalten von Programmen traditioneller für den Desktop. So entstand unter anderem die Idee, Anwendungen auf dem Desktop im Vollbildmodus zu bearbeiten .

    Vollbildanwendungen funktionieren mit wenigen Ausnahmen recht gut. Mail, iCal und iPhoto eignen sich besonders gut für die Nutzung des gesamten sichtbaren Bereichs des Bildschirms - der Inhalt, den sie anzeigen, wird perfekt skaliert.

    Das Durchsuchen von Websites in Safari auf dem Apple Cinema Display ist jedoch der Fall, wenn der Vollbildmodus nicht so gut ist, wie wir es uns wünschen. Werfen Sie einen Blick:



    Der Vollbildmodus von Safari funktioniert auf Laptops hervorragend, auf größeren Bildschirmen sieht er jedoch nicht so gut aus. Auf einem großen Bildschirm wird die Schnittstelle fast unbrauchbar. Das Wichtigste ist, dass es unmöglich ist, mit Registerkarten auf einem solchen Bildschirm zu arbeiten. Der 20-Pixel-Punkt unter der Adressleiste in der Abbildung oben ist eine Registerkartenleiste. Beim Anklicken geht es darum, wie man mit dem Mauszeiger Darts spielt.

    Dieses Problem ist Safari sehr ähnlich zu denen, die mit adaptivem Webdesign gelöst werden ( responsives Webdesign - siehe Artikel im Smashing Magazine - ca. Per. ). Die Idee des reaktionsschnellen Webdesigns ist, dass Programmierer und Designer nach Möglichkeiten suchen, Websites zu erstellen, die sich dynamisch anpassenauf fast jede Bildschirmgröße, vom Smartphone bis zum hochauflösenden Monitor. Anstatt Sites für eine bestimmte Berechtigung oder für einen kleinen Bereich von Berechtigungen zu erstellen.

    Der moderne Benutzer erwartet, dass die von ihm verwendeten Anwendungen im Vollbildmodus korrekt angezeigt werden. In diesem Fall kann der Vollbildmodus eine beliebige Auflösung haben. Daher ist es an der Zeit, die Prinzipien des Responsive Designs gründlicher zu studieren und sie auf die Erstellung von Desktop-Anwendungen anzuwenden, genau so, wie wir dies mit Websites begonnen haben.

    Änderung des Browserfensters in den Vollbildmodus

    Bei der Erstellung von Anwendungen stehen wir vor dem Problem der Bildschirmgrößen und Auflösungen. Besonders wenn es um Browser geht. Ihre Benutzeroberfläche erinnert uns an jene Zeiten, in denen Sie, um einen Monitor mit den Abmessungen und der Auflösung des Zauberwürfels zu kaufen, auf Ihren Erstgeborenen verzichten mussten. Dann konnten wir es uns einfach nicht leisten, die Tab-Leiste und die Adressleiste zumindest ein wenig länger zu gestalten. So ist die Browseroberfläche nach und nach absolut minimalistisch geworden, obwohl die Bildschirmgröße seit langem gewachsen ist.

    Die Unannehmlichkeiten beim Anzeigen von Seiten in Safari auf dem Apple Cinema Display lassen darauf schließen, dass wir bei unseren Bemühungen, die Browseroberfläche immer minimaler zu gestalten, einen Wendepunkt erreicht zu haben scheinen.
    Die Bildschirmgröße ist natürlich immer noch wichtig, um Websites im Internet anzuzeigen. Viele Websites sind "länger" als die Höhe unseres Bildschirms. Und je weniger Benutzeroberflächenelemente vertikal platziert werden, desto besser. Aber die meisten Bildschirme sind heutzutage Breitbildschirme. Warum verwenden wir nicht die linke und rechte Seite des Bildschirms, um die Effizienz zu steigern?

    Warum stopfen wir stattdessen alles in einen Streifen im oberen Bereich des Bildschirms?



    Moderne Browser verwenden die linke Seite des Bildschirms für eine begrenzte Anzahl von Funktionen: Browserverlauf, Lesezeichen, Leseliste in Safari in Lion OS. Sie können eine bessere Anwendung für diesen Ort finden, indem Sie dort beispielsweise Browser-Registerkarten platzieren. Lesezeichen-Panels und ähnlicher Unsinn werden unvergleichlich seltener verwendet als Tabs. Ich verstehe, die Idee ist nicht neu, aber aus irgendeinem Grund wurzelt immer noch nicht alles.

    Nachdem ich mich entschlossen hatte zu untersuchen, wie die linke Browseroberfläche aussehen und funktionieren könnte, zeichnete ich einige Modelle in Antetype . Entschuldigung im Voraus, es wird viele Details geben.

    Mocapas verwenden iOS / OS X-ähnliche Grafiken (da ich selbst ein Mac-Benutzer bin). Aber lassen Sie sich davon nicht stören. Das gesamte Konzept ist perfekt für Linux, Windows und BeOS.

    Mocapas

    Das habe ich bekommen. Bilder sind anklickbar. Ein bisschen näher. Die Anordnung der Laschen auf der linken Seite bietet neben dem Auftreten von vertikalem Freiraum mehrere Vorteile. Das erste Plus ist, dass die Registerkarten viel größer geworden sind. Gleichzeitig passen sie ziemlich gut auf einen Browser-Bildschirm - besonders im Vollbildmodus wie in Lion. Zweitens können Sie die Registerkarten durch die größere Größe mit Grafiken und zusätzlichen Beschreibungen versehen. Dies vereinfacht die Auswahl eines Registers unter den anderen. Sie hören auf, ununterscheidbare graue Flecken vor dem Hintergrund anderer ununterscheidbarer grauer Flecken zu sein.










    Wenn die Farben zu ablenkend sind, ist es sinnvoll, den Kontrast der Registerkartenleiste zu verringern, wenn sie inaktiv ist. Es ist wahrscheinlich auch empfehlenswert, die Option hinzuzufügen, das Paneel kompakter zu machen oder es vollständig zu entfernen.

    Keine Rock'n'Roll- Adressleiste mehr

    Wie Sie sehen, habe ich mir erlaubt, die Adressleiste zu entfernen. Eine Handlung, die sich anbietet, nicht wahr? Google experimentiert auch damit.

    Wie oft ändern Sie die Site-URL nach der Eingabe? In der Regel bedeutet das Navigieren auf einer bereits geladenen Seite, dass Sie auf die Links klicken und manchmal ein Kennwort eingeben. Daher ist es eine Priorität, die URL kaum zu ändern. Natürlich sollte diese Option auf Anfrage verfügbar sein, z. B. durch Drücken von ⌘ + L (STRG + L unter Windows und Linux).



    Neue Tabs

    Neue Registerkarten werden, wie Sie vermutet haben, mit Tastenkombinationen oder durch Klicken auf "Neue Registerkarte" erstellt. Sie können eine Adresse oder eine Suchanfrage in die Zeile eingeben.

    Heutzutage macht es keinen Sinn, die Adress- und Suchzeichenfolgen zu trennen. Kenne ich die genaue Adresse der Website oder stelle ich mir nur vor, was ich finden möchte - beide sind nur zwei verschiedene Ausgangspunkte, die zum gleichen Ziel führen. Kombinieren wir sie also, wie es einige Browser bereits getan haben.

    In diesem Beispiel suchen wir nach „UX-Design-Prinzipien“ - etwas, das alle fortgeschrittenen Typen heute tun. Und das Ergebnis.







    Weitere Details: Warnungen, Beschreibungen und Namen

    Warnungen . Sie haben wahrscheinlich Zahlen neben den Namen der Registerkarten Facebook, Twitter und LinkedIn bemerkt. Dies sind Benachrichtigungszähler. Seien wir ehrlich: Webanwendungen können heute nicht mehr verwendet werden.
    Es gibt solche Sites, die zum Zeitpunkt ihrer Verwendung oder auch dann dynamisch aktualisiert werden, wenn die entsprechende Registerkarte inaktiv ist. Lassen Sie sie uns auf die gleiche Weise über Änderungen informieren. Bei Twitter kann die Anzahl der Nutzer-Erwähnungen und bei Google Mail die Anzahl der ungelesenen E-Mails angezeigt werden.

    Beschreibungen. Der Untertitel oder die Beschreibung der Registerkarte wiederholt im Grunde nur die Beschreibung, die der Eigentümer für die Site ausgewählt hat. In einigen Fällen kann der Browser jedoch eine effektivere Unterüberschrift auswählen. Beispielsweise kann für einen Google-Tab eine Suchphrase zu einer Unterüberschrift werden, wodurch die Suche nach einem Tab unter ähnlichen vereinfacht wird. Namen . In den meisten Fällen ist der Name der Site die wichtigste Information, die im Titel der Registerkarte angezeigt wird. Aber nicht immer. Wenn Sie einen Artikel lesen, ist sein Titel wichtiger als der Name der Site. Dies sollte sich in der Registerkarte widerspiegeln. Soweit mir bekannt ist, trennt der HTML-Standard das Konzept des "Seitennamens" nicht vom "Site-Namen". Daher wurden Seitentitel wie "Das Medium ist die Nachricht - Smashing Magazine" gefunden. Wobei zwei Informationsobjekte in einer Zeile zusammengefasst werden.







    Ich sage nicht, dass Smashing Magazine durch diese Formatierung des Seitentitels etwas falsch macht. Tatsächlich ist dies sogar gut, da die meisten Browser auf der Registerkarte nur den ersten Teil der Phrase anzeigen (aufgrund der Größe der Registerkarte). Und wenn der Titel des Registers "Smashing Magazine - Das Medium ist die Nachricht" lauten würde, hätten Sie diesen Artikel nicht von anderen Artikeln dieser Site unterschieden, die Sie möglicherweise geöffnet haben, ohne ihn vollständig zu sehen. Daher ist es sinnvoller, diese beiden Namen zu trennen und den Browser entscheiden zu lassen, wie sie besser angezeigt werden sollen. Wenn der Name der Site, der für alle Seiten gleich ist, vom Namen der Seite oder des Artikels getrennt werden kann (und sich diese Information von Seite zu Seite ändert), kann der Browser selbst entscheiden: wann der Titel des Artikels angezeigt wird und wann - der Name der Site.









    So könnte die Registerkarte aussehen, wenn der Titel des Artikels Vorrang vor dem Namen der Site hat:



    Registerkarte Kontextgruppen

    Lassen Sie uns einen Moment abschweifen und das menschliche Nervensystem genauer betrachten, das kontextabhängige Modell des Gehirns. Ihre Studie hilft zu verstehen, wie Menschen Informationen organisieren.

    Die Essenz des Kontextmodells: Alle Ihre Emotionen, Erinnerungen und Erfahrungen werden kontextuell gespeichert. Wenn Sie bemerken, dass glückliche Erinnerungen leichter in den Sinn kommen, wenn Sie glücklich sind, dann kennen Sie bereits die kontextbezogene Natur des Gehirns in Aktion.

    Der Kontext ist ein Regime, eine Umgebung, in die sich das Nervensystem einfügt. Wenn Sie sich in einem bestimmten „Modus“ befinden, sind einige spezifische Informationen zugänglicher als die anderen, die das Gehirn als weniger relevant erachtet (dh vom aktuellen Kontext weiter entfernt).

    Je mehr Informationen aus dem aktuellen Kontext entfernt werden, desto schwieriger ist der Zugriff, bis die Erinnerungen fast nicht mehr voneinander zu unterscheiden sind (zum Beispiel bei psychisch traumatisierten Menschen).

    Um Benutzerinteraktionen zu gestalten, ist es wichtig zu verstehen, wie Menschen ihre Erfahrungen und Erlebnisse in Bezug auf Kontexte organisieren. Was ist für Benutzer in einem bestimmten Kontext relevant und wie erfolgt der Wechsel von einem Kontext zu einem anderen. Dann können Sie alles ausschließen, was für den aktuellen Kontext nicht relevant ist, und sich nur auf das konzentrieren, was für den Benutzer gerade wichtig ist. Gleichzeitig hilft er ihm bei Bedarf, schnell zwischen den Kontexten zu wechseln. Und eine solche Strategie ist mehr gerechtfertigt als die Schaffung einer riesigen Benutzeroberfläche, die alles auf einmal beinhaltet. Mit seiner Hilfe muss der Benutzer das Wechseln zwischen Kontexten unabhängig und ohne Hilfe einer Benutzeroberfläche verwalten.

    In Bezug auf die Zusammenhänge sind moderne Browser, gelinde gesagt, alles andere als ideal. Ich kann beispielsweise zuerst die sozialen Netzwerke aufrufen, in denen ich registriert bin, und dann nach Websites mit Informationen zum Webdesign suchen. Für mich sind dies zwei völlig unterschiedliche Kontexte, aber der Browser hat keine Ahnung davon.

    Letztendlich sind in meinem Browser mindestens ein halbes Dutzend Kontexte geöffnet, was natürlich zu einem Durcheinander von Registerkarten führt. Dann schließe ich den Browser und beginne von vorne, weil es einfacher ist, all diese Registerkarten zu verstehen.

    Mozilla experimentiert auch mit Registerkartengruppen, um Kontexte darzustellen. Ihre Lösung erscheint mir jedoch nicht besonders intuitiv. Ich scheine hier nicht alleine zu sein. Auf Anforderung von "Mozilla-Registerkartengruppen" zeigt eine Google-Suche zunächst einen Hilfeabschnitt auf der Mozilla-Website und eine Seite "Wo befinden sich die Registerkartengruppen?" An. Obwohl sie, wie mir scheint, die Idee im Allgemeinen richtig verstanden haben, müssen sie sie nur ein wenig verfeinern.

    Tab-Gruppen für Linkshänder

    Das Design der linken Registerkartenleiste kann durch Hinzufügen einer Kontextverwaltung verbessert werden. Das Gruppieren von Registerkarten ist hierfür eine gute Möglichkeit. Aber alles sollte intuitiv sein. Um eine Gruppe zu erstellen, ziehen Sie eine Registerkarte auf eine andere. In etwa so: Sie können der Gruppe einen Namen geben, während der Browser automatisch die wahrscheinlichste Option anbietet (dazu später mehr). Sie können eine Gruppe beispielsweise "Social Networking" (soziale Netzwerke) nennen. Bitte beachten Sie, dass nach der Gruppierung die Zähler für Facebook und Twitter addiert wurden. Mit einer detaillierten Ansicht der Gruppeninhalte sollten alle redundanten Informationen gelöscht oder unauffälliger gemacht werden. Lassen Sie uns dieser Gruppe LinkedIn hinzufügen.















    Danach werden wir Smashing Magazine und Daring Fireball auf die gleiche Weise gruppieren und die neue Gruppe "Design" nennen. Jetzt können Sie alle interessanten Dinge zum Thema „UX-Designprinzipien“ speichern. Unter keinen Umständen werden Informationen aus dieser Gruppe mit Registerkarten aus sozialen Netzwerken gemischt. Es sollte möglich sein, die Gruppe zu schließen. Geschlossene Gruppen schaffen Platz für den Aufbau eines neuen Kontexts (Erforschung eines anderen Themas) und stören nicht viel. Der Gruppenzähler für soziale Netzwerke wird weiterhin im Hintergrund aktualisiert.








    Gruppen speichern

    Wenn Sie sich die Zeit genommen haben, die Seiten zu gruppieren (und ihnen sogar Namen zu geben), scheint es, als wären Sie sehr an deren Inhalten interessiert. Und Sie möchten diese Kontexte wahrscheinlich weiterhin für mehr als eine Browsersitzung verwenden. Möchten Sie diese Kontexte nach einem Neustart des Browsers jedes Mal neu erstellen? Nein.
    Es muss wahrscheinlich eine Möglichkeit geben, Kontexte aufrechtzuerhalten. Zum Beispiel: In Ermangelung eines geeigneteren Begriffs werde ich das obere Bedienfeld als „Gruppenpalette“ bezeichnen. Die Gruppenpalette hat folgende Bedeutung: Vielleicht möchten Sie die Gruppen speichern, aber nicht, dass sie immer in der Registerkartenleiste angezeigt werden. Daher ist es notwendig, dass es einen Ort gibt, an dem Gruppen von Registerkarten dauerhaft gespeichert werden und von dem aus sie wiederhergestellt werden können.







    Wenn Sie eine Gruppe auf die Gruppenpalette ziehen, wird sie dort gespeichert, bis Sie sie selbst löschen. Alle an der Gruppe vorgenommenen Änderungen wirken sich automatisch auf die in der Gruppenpalette gespeicherte Version aus. Eine kleine Zeitmaschine (Verlauf speichern) ermöglicht es Ihnen, ohne großen Aufwand zu einer früheren Version der Gruppe zurückzukehren oder eine Registerkarte zu finden, die einmal Teil der Gruppe war.

    Wir speichern weiterhin Gruppen. Beide Gruppen werden gespeichert.







    Standardmäßig speichern?

    Wenn Sie eine Gruppe erstellen, sollte diese möglicherweise automatisch gespeichert werden. Wenn ich mir die Mühe machen würde, eine Gruppe zu gründen, und einen Namen dafür finden würde, würde ich ihn höchstwahrscheinlich gerne behalten. Ich bin mir jedoch nicht zu 100% sicher. Es ist schwierig, über die Angemessenheit der Standardeinstellungen zu spekulieren, ohne sie an Benutzern zu testen.

    In der Wolke

    Gruppen sollten dem Benutzer überall folgen. Denken Sie daran, dass sie sich auf den Benutzer und nicht auf den Browser beziehen. Das Synchronisieren von Gruppen mit der Cloud hat eine Reihe von Vorteilen (abgesehen von dem offensichtlichen: einfachem Zugriff von überall).

    Übereinstimmender Gruppenname

    Im Backend kann der Browser-Entwickler Gruppennamen als Tags für Sites in dieser Gruppe verwenden. Wenn viele Gruppen gespeichert sind, können Sie die am häufigsten zugewiesenen Namen auswählen und diese Informationen für verschiedene Zwecke verwenden:

    • Der Browser schlägt einen Namen für die Gruppe basierend auf ihrem Inhalt vor. Je mehr Gruppen von Benutzern auf der ganzen Welt erstellt werden, desto mehr geeignete Namen werden vom Browser angeboten.
    • Suchergebnisse verbessern;
    • Die Möglichkeit, dem Benutzer zusätzliche Seiten und andere Ressourcen anzubieten, basierend auf dem, was bereits in der Gruppe enthalten ist. Auf Wunsch natürlich - bitte nicht am Benutzer ziehen.


    Und schließlich (nicht wirklich)

    Dieses Konzept ist noch nicht vollständig ausgearbeitet. Ich habe eine lange Liste von Add-Ons und Schnittstellenfragen, die beim Zeichnen dieser Skizzen entstanden sind. Die meisten von ihnen können ohne ein Minimum an Benutzerverhalten nicht beantwortet werden. Und natürlich habe ich eine Reihe verschiedener Fallstricke und Extremfälle noch nicht berücksichtigt.

    Es ist schwer vorherzusagen, wie Menschen beispielsweise Gruppen verwenden werden. Wollen sie beispielsweise Gruppen gemeinsam nutzen oder Gruppen mit anderen Benutzern erstellen? Nicht sicher. Verschiedene Browser haben bereits versucht, soziale Funktionen zu implementieren, von denen die meisten (wie mir scheint) nicht besonders Fuß gefasst haben.

    Ich denke, dass die Grundprinzipien dieses Konzepts leicht für iPad und andere Geräte anwendbar sind. Der linke Bereich der Registerkarten kann angezeigt werden, wenn Sie zwei oder drei Finger von links nach rechts auf dem Bildschirm halten, und die Gruppenpalette, wenn Sie von oben nach unten halten.

    Die Basis der Benutzeroberfläche muss ebenfalls entwickelt werden. Ich weiß nicht, wie ich die Bands besser repräsentieren kann. Ich habe verschiedene Optionen ausprobiert, zum Beispiel:



    Wir bleiben in Kontakt

    Wenn Sie eine Meinung oder Kritik zu diesem Thema haben und sie mir mitteilen möchten, dann bin ich auf Twitter @henrik_eneroth oder schreibe an henrik.eneroth@antrop.se. Oder Sie können einfach einen Kommentar zu dem Beitrag hinterlassen .

    98% der Prototypen wurden in Antetype erstellt, die Bildformatierung erfolgte in Pixelmator oder Photoshop und andere kleine Dinge in Omnigraffle.

    Vielen Dank an Robert Landberg für seine Rückmeldungen und Anregungen bei der Entwicklung all dessen.

    Und vieles mehr. Diese Ideen sollen auf der ganzen Welt verbreitet werden. Nehmen Sie sie und machen Sie mit ihnen, mit oder ohne kommerziellen Gewinn, was immer Sie wollen. Ich verspreche, dass ich Sie nicht verklagen werde, weil ich gegen dumme und unnötige Gewaltakte bin, die Innovationen an der Wurzel abschneiden.

    Jetzt auch beliebt: