Von Microsoft lernen: 10 zu vermeidende Design-Fallstricke
Heute werden wir uns mit den Webdesign-Praktiken und -Trends des größten Einzelnamens in der Software befassen, um herauszufinden, ob wir etwas über einige Fehler lernen können, die wir in unserer eigenen Arbeit vermeiden sollten.
Fühlen Sie sich frei zu kommentieren, um den folgenden Vorschlägen entweder zuzustimmen oder nicht zuzustimmen. Als professionelle Designer sind Ihre Erkenntnisse wertvoll und ich freue mich auf Ihre Gedanken.
Entdecken Sie Designressourcen
Das gelegentliche Geschwätz
Ich entschuldige mich bei allen, die mit Scherzen gefüllte Artikel hassen, dass dieser Beitrag manchmal etwas hart ist. Normalerweise lobe ich gutes Design lieber als schlechtes, aber als David Appleyard und ich beschlossen, einen Beitrag über die Designtrends von Microsoft zu verfassen, schien es einfach viel mehr zu geben, um etwas über die chaotischen, hässlichen und / oder nicht zu empfehlenden Dinge zu lernen Sie tun als die Alternative.
Um Sie in den Kommentaren abzuschneiden, werde ich in der folgenden Analyse keinen einzigen Vergleich mit Apple erwähnen oder vornehmen. Dies ist nicht im geringsten ein Argument zwischen PC und Mac, sondern vielmehr ein Blick auf das, was wir für wirklich schlechte Praktiken im Bereich Webdesign und -entwicklung halten. Um ehrlich zu sein, ist Microsoft ein äußerst erfolgreiches Unternehmen und scheitert nicht an einem dieser Probleme. Wie wir weiter unten hervorheben, scheint Microsoft tatsächlich einige herausragende Designer für bestimmte Websites im Team zu haben. Wir schlagen lediglich vor, ein höheres Maß an Qualitätskontrolle auf der ganzen Linie zu implementieren.
Lassen Sie uns vor diesem Hintergrund einige Stellen analysieren, an denen Microsoft in seinen Entwurfs- und Entwicklungspraktiken offenbar zu kurz kommt und wie Sie von diesem Wissen profitieren können.
# 1 Achten Sie darauf, bestimmte Plugins nicht zu beauftragen
Wenn wir aus den jüngsten Auseinandersetzungen zwischen Apple und Adobe etwas gelernt haben, kann das Erstellen von Websites, die vollständig von geschlossenen Plugins von Drittanbietern abhängig sind, zu ernsthaften Fehlzündungen führen. Microsoft scheint diesen Fehler zu wiederholen, da sein eigenes Netzwerk von Websites immer mehr von Silverlight abhängig wird.
Beim Durchsuchen der verschiedenen Websites von Microsoft, die sich auf diesen Artikel vorbereiteten, wurde ich ständig von Windows belästigt, die mich darüber informierten, dass ich Silverlight nicht installiert hatte und die Webseite daher nicht so sehen konnte, wie sie angezeigt werden sollte. Meine Frage ist: "Warum diesen Weg gehen?" Besonders wenn es um einfache Diashows und Animationen geht, die mit allgegenwärtigeren Technologien erstellt werden können. Zugegeben, Microsoft besitzt Silverlight, daher ist es für sie wirtschaftlich sinnvoll, ihre Investition zu sichern. Dies bedeutet jedoch nicht, dass es die beste Wahl für Sie ist, auf ihren Zug zu springen.
Egal, ob Sie ein großer Fan von Silverlight sind oder nicht, ich rate Ihnen, äußerst vorsichtig zu sein, wenn Sie die Funktionalität Ihrer Website auf diese oder eine ähnliche Technologie stützen. Während sich die Debatte darüber, ob es sinnvoll ist, Websites mit Flash zu entwickeln, weiter verschärft, werden Second-in-Line-Systeme wie Silverlight noch mehr zum Glücksspiel. Halten Sie sich nach Möglichkeit an browserübergreifenden, standardkonformen Code und Tools, für die Ihre Besucher keine zusätzlichen Arbeiten oder Installationen benötigen.
# 2 Beobachten Sie Ihre Auflösung
Dies ist eine meiner größten Beschwerden über Microsoft, einfach weil es nur nach schlampigem Design aussieht. Es gibt zweifellos eine feine Grenze zwischen der Reduzierung der Dateigröße, um die Benutzerfreundlichkeit zu verbessern, und der Sauberkeit und Schärfe Ihrer Bilder, aber ich kann nicht anders, als das Gefühl zu haben, dass Microsoft anfälliger für die Anzeige hässlicher, gezackter JPGs zu sein scheint als buchstäblich alle anderen professionelle Seite, die ich in den letzten Jahren gesehen habe.
Die ständig abnehmende Anzahl von DFÜ-Internetnutzern erhöht weiterhin die akzeptablen Bildgrößen. Dies bedeutet keineswegs, dass Sie nicht besonders darauf achten sollten, alles so klein wie möglich zu machen, aber sobald das Design so stark belastet wird, dass die scheinbare Qualität der Website drastisch verringert wird, werden die Bilder selbstzerstörerisch!
Sie leben pure Ironie, wenn Sie Bilder verwenden, um Ihre Website besser aussehen zu lassen, aber letztendlich Ihre Ästhetik reduzieren. Zeigen Sie nach Möglichkeit eine Vorschau Ihrer verarbeiteten Bilder auf verschiedenen Monitoren an und achten Sie genau darauf, wie viel Verzerrung und Artefakte Sie für akzeptabel halten.
# 3 Organisierte Unordnung
Manchmal können Sie alle offensichtlichen Designregeln befolgen und trotzdem etwas erhalten, das visuell unterdurchschnittlich erscheint. Beim Durchsuchen der Microsoft-Websites stieß ich auf unzählige Bereiche wie den folgenden, die trotz ihrer Versuche einer spaltenbasierten Organisation nur überladen zu sein schienen.
Also, was ist das Problem? Einfach gesagt, hier ist auf relativ kleinem Raum eine Menge los. Obwohl sie definitiv versucht haben, den Inhalt anzuordnen und die visuelle Lesbarkeit durch Symbole zu verbessern, ist das Endergebnis immer noch ziemlich aus dem Gleichgewicht geraten.
Wenn Sie sich genau ansehen, was hier vor sich geht, fühlen Sie sich wie vier Informationsspalten, die von vier verschiedenen Personen entworfen wurden, die zusammengepfercht wurden. Die linke Seite scheint im Vergleich zur rechten Seite sehr schwer mit Bildern zu sein, die Textfarbe ist etwas sporadisch, der Inhalt ist unangenehm versetzt und die Spalten haben nicht genügend Raum zum Atmen, um sie wie die unabhängigen Bereiche erscheinen zu lassen, die sie sind.
Die Lektion hier besteht darin, darauf zu achten, dass ein einzelner Bereich Ihrer Seite nicht mit unterschiedlichen Informationen gefüllt wird. Es gibt zweifellos viele Fälle, in denen die Situation viele Inhalte erfordert, aber die Organisation sollte auf konsistente und attraktive Weise gehandhabt werden, wie in den folgenden schönen Beispielen (von Websites, die nicht von Microsoft stammen) dargestellt.
# 4 Inkonsistenz
Öffnen Sie ausgehend von Microsoft.com die gigantischen Dropdown-Menüs für die Navigation und wählen Sie einen Bereich der Website aus, den Sie besuchen möchten. Unabhängig davon, auf welchen Link Sie klicken, sieht die resultierende Seite ganz anders aus als die Startseite und unterscheidet sich immer noch von den meisten anderen Links, die in derselben Dropdown-Liste verfügbar sind.
Das Erkunden der Microsoft-Website ist wie das Drehen eines Roulette-Rads. Sie haben praktisch keine Ahnung, wo Sie landen werden und was Sie auf der nächsten Seite erwarten können. Einige Seiten weisen einen swooshy Hintergrund auf, während andere weiche Verläufe oder sogar explodierende Kreise verwenden. Die meisten Seiten scheinen Blau zu bevorzugen, aber nicht unbedingt das gleiche Blau, und es gibt auch viele Seiten, die den blauen Trend insgesamt ignorieren.
Der Punkt ist, ob Ihre Website zwei oder zweihundert Seiten hat, Konsistenz ist ein Muss. Benutzer fühlen sich wohler, wenn sie sich innerhalb weniger Sekunden mit der Funktionsweise und dem Erscheinungsbild einer Website vertraut machen können. Wenn Sie ihnen alle paar Seiten etwas drastisch anderes geben, wird das Surfen verwirrender und weniger effizient.
Darüber hinaus besteht die Idee, dass die Schaffung einer starken, konsistenten Marke nur ein gutes Geschäft ist, da Kunden dadurch persönlicher mit Ihrem Unternehmen in Beziehung treten können. Zwar jongliert Microsoft mit vielen verschiedenen Marken und Microsites, die alle von der Homepage stammen, aber selbst unter den Kernseiten von Microsoft.com scheinen die Bildthemen und Navigationsmethoden drastisch unterschiedlich zu sein.
# 5 Clipart-zentriertes Design
Dieser Vorschlag ist offensichtlich etwas absurd, da ClipArt und Microsoft Office immer unaufhaltsam miteinander verflochten waren. Das Icon-Design hat jedoch seit 1995 einen langen Weg zurückgelegt, und es ist an der Zeit, diesen bestimmten Stil in den von Ihnen verwendeten Bildern aufzugeben.
Die obigen Kunstbeispiele, die von verschiedenen Microsoft-Seiten stammen, lassen mich einfach zusammenzucken, insbesondere das schreckliche „Beginner Developer“ -Logo. Ich habe keine Ahnung, warum ein Bumerang eine Pflanze angreift oder ob der magisch schwebende Computermonitor den Angriff unterstützt oder aus der Szene flieht. Ich weiß nur, dass die visuelle Kommunikation hier ein nicht zu entzifferendes Durcheinander ist.
Dies ist einer der Hauptgründe, warum es CSS-Galerien wie unsere gibt. Nicht, damit Sie das Design anderer stehlen können, sondern um einen Einblick in den Stand des Designs in dem Jahrzehnt zu erhalten, in dem Sie sich entwickeln. Das Durchsuchen dieser Galerien ist wie der Besuch beliebter Bekleidungsgeschäfte im Einkaufszentrum, um Ihrer verrückten Tante das zu zeigen Sie muss sich nicht wie jemand aus der Sunny and Cher Show kleiden.
Sie können jederzeit Grenzen überschreiten und über die aktuellen Designtrends hinausgehen, indem Sie Ihre eigenen starten. Seien Sie nur vorsichtig, wenn Sie jahrelang hartnäckig stagnieren, während der Rest der Welt weiterzieht.
# 6 Falsch ausgerichteter überlaufender Text
Ein weiterer Trend, der auf den Websites von Microsoft kaum zu übersehen ist, sind die ständig unterbrochenen Textspalten, die ihre offensichtlichen Grenzen überschreiten.
Dieser ist ziemlich einfach zu reparieren und erfordert wirklich nur ein wenig Mühe und Aufmerksamkeit. Nutzen Sie kostenlose Tools wie das Browserlabor von Adobe, um sicherzustellen, dass Ihre Layouts bei der Anzeige in den wichtigsten Browsern nicht beschädigt werden.
Obwohl das CSS-Layout in Bezug auf die browserübergreifende Konsistenz zugegebenermaßen eine heikle Angelegenheit ist, beeinträchtigen kleine Fehler wie diese die Qualität Ihrer Website erheblich und sind die Zeit für die Fehlerbehebung wert, die sie zur Behebung benötigen.
# 7 Schlechte Ausrichtung
Manchmal stellte mich eine bestimmte Seite vor die Herausforderung, zu entscheiden, auf welches Design ich hinweisen sollte. Zum Beispiel habe ich auf der folgenden Seite ursprünglich überlegt, einen winzigen Screenshot zu verwenden, der nicht größer wird, wenn Sie darauf klicken. Je mehr ich mir die Seite ansah, desto verwirrter wurde ich darüber, was los war das Layout.
Wenn Sie mit der grundlegenden Designtheorie überhaupt vertraut sind, wissen Sie, dass das Erlernen der Implementierung solider, konsistenter Ausrichtungen der Schlüssel zu einem guten Seitenlayout ist. Die seltsame Mischung aus linken, mittleren und rechten visuellen Ausrichtungen, die an der obigen Stelle stattfinden, in Verbindung mit dem unangenehmen leeren Raum in der Nähe der Oberseite sorgt für einen wirklich seltsamen visuellen Fluss der präsentierten Informationen.
Wenn Sie die obige Seite besuchen, werden Sie feststellen, dass der Inhalt als Ganzes versucht zu zentrieren scheint, aber wirklich durch den Streifen in der Mitte abgeworfen wird, wodurch die Seite ganz rechts in der Mitte erscheint.
# 8 Ad Clutter
Kostenlose Design-Blogs wie dieses müssen viele Anzeigen enthalten. Auf diese Weise erzielen wir einfach ein Einkommen und stellen Ihnen weiterhin Inhalte zur Verfügung. Wenn Sie jedoch eine professionelle Business-Site betreiben, müssen Sie sorgfältig überlegen, ob Sie Ihre Botschaft und Professionalität durch Werbung beeinträchtigen möchten.
Die Seiten von Microsoft.com sind mit verschiedenen Anzeigen übersät, die die Ästhetik der Seite, auf der sie sich befinden, wirklich beeinträchtigen. Manchmal verweisen diese Anzeigen direkt auf andere Microsoft-Seiten, manchmal auf andere Unternehmen oder Partner. Es ist nichts Falsches an dem Konzept, den Verkehr auf andere Teile Ihrer Website zu leiten, aber wie Sie dies erreichen, kann einen großen Unterschied machen.
Wenn es eine Sache gibt, die die meisten Webbenutzer gelernt haben, zu erkennen, zu ignorieren und möglicherweise sogar erneut zu senden, dann ist es ein Werbebanner. Um nicht zu sagen, dass diese Art von Werbung nicht mit der richtigen Ausrichtung und Gestaltung funktioniert, oder um zu sagen, dass Microsoft-Benutzer nicht auf diese klicken, aber ich frage mich, ob es keinen besseren Weg gibt.
Wenn Microsoft den Datenverkehr auf seine Mobiltelefone und andere Projekte leiten möchte, besteht der einfache Ausweg darin, ein überfülltes, nicht standardmäßiges (designbezogenes) Anzeigensystem einzurichten, das sich über die gesamte Website erstreckt. Es scheint jedoch, als hätte die Integration dieses Inhalts als Teil der eigentlichen Website eine viel bessere Klickrate, da mehr Benutzer die Nachricht zur Kenntnis nehmen und keine verinnerlichten Regeln zur Vermeidung von Bannerwerbung um jeden Preis brechen müssen.
Außerdem würde eine solche Integration die Entwürfe zwingen, konsistenter zu sein, da sie als einzelne Einheit und nicht von separaten Teams erstellt werden. Auch dies ist ein Szenario, in dem ich die Kosteneffizienz des Microsoft-Ansatzes verstehen kann, Sie jedoch davor warnen möchte, ihrem Beispiel zu folgen. Die Chancen stehen gut, dass die von Ihnen entworfenen Websites nicht mit dem Mega-Netzwerk von Microsoft-Websites konkurrieren und sich daher eher für ein solides, integriertes Design eignen, sodass Sie die visuelle Unordnung übermäßiger Anzeigen vermeiden können.
Offensichtlich gibt es viele Genres von Websites, bei denen dies überhaupt nicht zutrifft, da erwartet wird, dass Werbung vorhanden ist. Stellen Sie nur sicher, dass Sie überlegen, ob Ihre Website dem Verkauf Ihres Produkts oder Ihrer Dienstleistung gewidmet sein soll oder ob Sie zusätzliche Einnahmen und Ablenkung durch Werbung benötigen.
# 9 Ein Mangel an Raum zum Atmen
Im Druckdesign richten Designer jede Seite mit einem „Live-Bereich“ ein. Dies ist normalerweise ein rechteckiger Ausschnitt aus dem Seitenrand, der den Bereich definiert, in dem Inhalte sicher platziert werden können, um Seitenausschnitte oder Kantenüberfüllungen zu vermeiden. Die meisten Webdesigner tun dies intuitiv, da es ziemlich offensichtlich ist, dass Sie nicht möchten, dass Ihre Inhalte zu weit gegen die Seite des Browsers gedrückt werden.
Wie der obige Screenshot zeigt, gibt es jedoch einige Microsoft-Seiten, die solche Meinungen nicht zu berücksichtigen scheinen. Stattdessen beginnt der Inhalt, sobald die Seite keine horizontale Auffüllung oder einen horizontalen Rand aufweist (zumindest in den Browsern, mit denen ich überprüft habe).
Das Navigationsfeld fühlt sich nicht so an, als wäre es an der Seite der Seite integriert, es fühlt sich an, als würde es abgeschnitten (wieder kann es genau das tun, weil ich keinen IE habe). Die Lektion hier ist einfach: Achten Sie immer auf den Rand des Browserfensters. Platzieren Sie Ihre Inhalte, insbesondere interaktive Bereiche und Links, innerhalb eines sicheren Bereichs, damit Benutzer sich nicht überfüllt fühlen, wenn sie versuchen, sie zu verwenden, es sei denn, Sie verstoßen gegen die Regel für einen offensichtlichen visuellen Ausbluteffekt.
Wenn Sie sich den Screenshot oben genau ansehen, sehen Sie einige weitere Beispiele von Microsoft-Designern, die einfach nicht berücksichtigen, ob ihr Text in allen gängigen Browsern ordnungsgemäß fließt oder nicht. Dies ist ein ziemlich amüsanter Trend für Microsoft, da viele Webdesigner ihre Tage damit verbringen, spezielle Anpassungen für den Internet Explorer von Microsoft vorzunehmen, aber das Milliarden-Dollar-Unternehmen kann sich nicht die Mühe machen, den Gefallen zu erwidern, indem es seine eigene Arbeit auf anderen Systemen überprüft.
# 10 Ihr Talent nicht nutzen
Obwohl es oben viele negative Kommentare zu den Webdesignern bei Microsoft gibt, war ich angenehm überrascht zu sehen, dass sie tatsächlich einige Websites und Seiten haben, die einfach fantastisch aussehen.
Die obigen Beispiele sind nur zwei der vielen Orte, von denen ich glaube, dass Microsoft sie mit ihrem Layout, ihrer Farbauswahl, ihren Grafiken und ihrer browserübergreifenden Kompatibilität wirklich aus dem Park geworfen hat. Dies sagt mir, dass irgendwo in dem riesigen Pool von Kabinen in diesem Unternehmen einige wirklich talentierte Personen sitzen, die in der Lage sind, das Unternehmen vollständig aus seiner Designkrise herauszuholen.
Diese Designer, wer auch immer sie sind, sollten in Positionen befördert werden, die es ihnen ermöglichen, zusammenzuarbeiten und einheitliche Standards zu setzen, denen buchstäblich jeder Microsoft-Webdesigner folgen müsste. Anstelle eines Labyrinths unzusammenhängender Inhalte könnten sie ein stark markengebundenes Netzwerk schöner Websites schaffen, die eindeutig alle zur selben Familie gehören.
Der letzte Vorschlag, den ich Ihnen vorlege, ist, diese Art von herausragenden Personen in Ihrem eigenen Unternehmen zu finden und ihnen eine Stimme zu geben. Anstatt über den Mangel an Talent unter den anderen Mitgliedern Ihres Teams zu klagen, ernennen Sie die stärksten Designer und Entwickler zu Positionen, in denen sie jede visuelle Kommunikation beeinflussen können, die mit einer bestimmten Marke verbunden ist.
Dies kann effizient und effektiv erfolgen, indem klare, konsistente und strenge Markenrichtlinien erstellt werden, die an jeden Designer und Entwickler für jede einzelne Marke, mit der Sie arbeiten, verteilt werden.
Gedanken schließen
Zusammenfassend lässt sich sagen, dass Microsoft zwar einige äußerst talentierte Webdesigner besitzt, die Arbeit dieser Personen jedoch fast vollständig von der enormen Menge an Inhalten überschattet wird, die nicht einmal den Standards entsprechen, die wir von Anfängern und Entwicklern im ersten Jahr erwarten würden .
Glücklicherweise können wir Unternehmen wie Microsoft als Lehrmittel verwenden, um deutlich zu machen, dass es tatsächlich einen falschen Weg gibt, Dinge zu tun. Stellen Sie sich niemals vor, dass Sie, nur weil Sie ein einsamer Freiberufler oder eine kleine Designfirma sind, Mega-Unternehmen und Designfirmen in Bezug auf die Qualität Ihrer Arbeit nicht vollständig übertreffen können.
Ich habe festgestellt, dass es oft einfacher ist, Beispiele für Qualitätsdesigner in Home Offices auf der ganzen Welt zu finden, als an den Schreibtischen großer Unternehmen zu sitzen. Seien Sie beruhigt, dass Sie die Qualität von Hunderten von Designern nicht koordinieren und kontrollieren müssen. Geben Sie Ihr Bestes, um einige der besten Websites im Web mit der geringen Menge an Ressourcen zu erstellen, die Sie in Verbindung mit einer großen Menge an persönlichem Antrieb besitzen, um wunderschön funktionale Designs zu erstellen.
