Uczenie się od Microsoft: 10 pułapek projektowania, których należy unikać
Dzisiaj przyjrzymy się praktykom projektowania stron internetowych i trendom jednej największej marki w oprogramowaniu, aby sprawdzić, czy możemy dowiedzieć się czegoś o błędach, których należy unikać w naszej pracy.
Skomentuj, aby zgodzić się lub nie zgodzić z poniższymi sugestiami. Jako profesjonalni projektanci twój wgląd jest cenny i czekam na twoje przemyślenia.
Przeglądaj zasoby projektowe
Rant okazjonalny
Wszystkim, którzy nie znoszą artykułów wypełnionych rantami, przepraszam, że ten post jest czasem trochę trudny. Zwykle wolę chwalić dobry projekt niż krytykę złego, ale kiedy David Appleyard i ja postanowiliśmy napisać post na temat trendów projektowych Microsoftu, po prostu wydawało się, że jest o wiele więcej do nauczenia o niechlujnych, brzydkich i / lub niewskazanych rzeczach, które robią to niż alternatywa.
Aby odciąć cię od komentarzy, nie wspomnę ani nie dokonam ani jednego porównania z Apple w poniższej analizie. To nie ma być co najmniej argument na PC lub Mac, ale raczej spojrzenie na to, co uważamy za naprawdę kiepskie praktyki w projektowaniu i tworzeniu stron internetowych. Mówiąc szczerze, Microsoft jest niezwykle odnoszącą sukcesy firmą i nie ponosi porażki z powodu któregokolwiek z tych problemów. W rzeczywistości, jak wskazujemy poniżej, Microsoft naprawdę wydaje się mieć w zespole kilku znakomitych projektantów dla niektórych witryn, po prostu sugerujemy, aby wprowadzić wyższy poziom kontroli jakości we wszystkich obszarach.
Mając to na uwadze, przeanalizujmy kilka miejsc, w których Microsoft wydaje się nie mieć dobrych praktyk projektowych i programistycznych oraz jak możesz skorzystać z tej wiedzy.
# 1 Strzeż się mandowania niektórych wtyczek
Jeśli dowiedzieliśmy się czegoś z ostatnich sprzeczek między Apple a Adobe, to tworzenie witryn całkowicie zależnych od zamkniętych wtyczek stron trzecich może ostatecznie doprowadzić do poważnego wstrząsu. Microsoft wydaje się powtarzać ten sam błąd, ponieważ jego własna sieć witryn staje się coraz bardziej zależna od Silverlight.
Przeglądając różne witryny Microsoftu przygotowujące się do tego artykułu, nieustannie nękały mnie okna, które informowały mnie, że nie zainstalowałem Silverlight i dlatego nie mogłem zobaczyć strony internetowej w taki sposób, w jaki powinien być oglądany. Moje pytanie brzmi: „dlaczego wybrać tę trasę?” Zwłaszcza, gdy mówimy o prostych pokazach slajdów i animacjach, które można wykonać za pomocą bardziej wszechobecnych technologii. To prawda, że Microsoft jest właścicielem Silverlight, więc uzasadnienie biznesowe jest dla nich uzasadnienie ich inwestycji, ale to nie znaczy, że jest to najlepszy wybór, aby przejść na ich modę.
Niezależnie od tego, czy jesteś wielkim fanem Silverlight, czy nie, radzę bardzo ostrożnie opierać funkcjonalność swojej witryny na tej lub innej podobnej technologii. Ponieważ debata na temat tego, czy warto tworzyć witryny za pomocą Flasha, wciąż się rozgrzewa, systemy drugiego rzędu, takie jak Silverlight, stają się jeszcze bardziej ryzykowne. Tam, gdzie to możliwe, trzymaj się przeglądarki, kodu zgodnego ze standardami i narzędzi, które nie wymagają żadnych dodatkowych prac ani instalacji od odwiedzających.
# 2 Obserwuj swoją rozdzielczość
To jedna z moich największych skarg na Microsoft tylko dlatego, że wygląda na niechlujny projekt. Niewątpliwie istnieje cienka granica między zmniejszaniem rozmiaru pliku, aby zwiększyć użyteczność, a utrzymywaniem czystych i wyraźnych zdjęć, ale nie mogę nie myśleć, że Microsoft wydaje się bardziej skłonny do wyświetlania brzydkich, postrzępionych plików JPG niż dosłownie jakikolwiek inny profesjonalna strona, którą widziałem w ciągu ostatnich kilku lat.
Coraz mniejsza liczba użytkowników Internetu korzystających z połączeń modemowych stale podnosi i zwiększa dopuszczalne rozmiary obrazu. Nie oznacza to wcale, że nie powinieneś dołożyć szczególnych starań, aby wszystko było tak małe, jak to rozsądne, ale w momencie, gdy zacznie on ważyć tak mocno na projekt, że dramatycznie obniży to pozorną jakość strony, obrazy stają się samobójcze!
Żyjesz w czystej ironii, jeśli używasz obrazów, aby poprawić wygląd witryny, ale ostatecznie zmniejszyć estetykę. Jeśli to możliwe, wyświetl podgląd przetworzonych obrazów na różnych monitorach i zwróć szczególną uwagę na to, ile zniekształceń i artefaktów uważasz za dopuszczalne.
# 3 Zorganizowany bałagan
Czasami możesz przestrzegać wszystkich oczywistych zasad projektowania i nadal kończyć się czymś, co wydaje się wizualnie słabsze. Przeglądając witryny Microsoftu natknąłem się na niezliczone obszary, takie jak ten poniżej, które po prostu wydawały się zagracone pomimo prób organizacji organizacji opartej na kolumnach.
Więc w czym problem? Mówiąc najprościej, na stosunkowo małej przestrzeni dzieje się tona. Mimo że zdecydowanie próbowali zaaranżować zawartość i poprawić czytelność dzięki ikonom, efekt końcowy jest nadal niezrównoważony.
Jeśli przyjrzysz się bliżej temu, co się tutaj dzieje, masz wrażenie, że są to cztery kolumny informacji zaprojektowane przez cztery różne osoby, które zostały ze sobą zaciśnięte. Lewa strona wydaje się bardzo ciężka z obrazami w porównaniu do prawej, kolor tekstu jest nieco sporadyczny, treść jest niezręcznie rozłożona, a kolumny nie mają wystarczającej przestrzeni oddechowej, aby wyglądały jak niezależne obszary, którymi są.
Lekcja polega na tym, aby uważać na to, by nie zapakować jednego obszaru strony, który byłby zbyt różnorodny. Niewątpliwie wiele razy sytuacja będzie wymagała dużej ilości treści, ale organizacja powinna być traktowana w spójny i atrakcyjny sposób, jak widać na poniższych pięknych przykładach (z witryn innych niż Microsoft).
# 4 Niespójność
Zaczynając od Microsoft.com, otwórz ogromne menu rozwijane nawigacji i wybierz obszar witryny, który chcesz odwiedzić. Niezależnie od tego, który link klikniesz, wynikowa strona będzie wyglądać zupełnie inaczej niż strona główna i nadal różni się od większości innych linków dostępnych w tym samym menu rozwijanym.
Poznawanie witryny Microsoft jest jak kręcenie kołem ruletki. Nie masz praktycznie pojęcia, gdzie wylądujesz i czego możesz się spodziewać na następnej stronie. Niektóre strony mają rozmyte tło, podczas gdy inne używają miękkich gradientów, a nawet wybuchają kółka. Większość stron wydaje się faworyzować niebieski, ale niekoniecznie ten sam niebieski, a także istnieje wiele stron, które całkowicie ignorują niebieski trend.
Chodzi o to, czy twoja strona ma dwie strony czy dwieście, spójność jest koniecznością. Dzięki temu użytkownicy czują się bardziej komfortowo, gdy mogą zapoznać się ze sposobem działania i wyglądu witryny w ciągu kilku sekund. Dając im coś zupełnie odmiennego co kilka stron, przeglądanie jest bardziej mylące i mniej wydajne.
poza tym istnieje pomysł, że stworzenie silnej, spójnej marki jest po prostu dobrym biznesem, ponieważ pomaga klientom nawiązać kontakt z Twoją firmą w bardziej osobisty sposób. Wprawdzie Microsoft żongluje wieloma różnymi markami i mikrostronami, które wszystkie pochodzą ze strony głównej, ale nawet wśród tego, co można uznać za podstawowe strony Microsoft.com, motywy obrazu i metody nawigacji wydają się drastycznie zróżnicowane.
# 5 Projekt skoncentrowany na grafice
Ta sugestia jest oczywiście trochę absurdalna, biorąc pod uwagę, że obiekty clipart i pakiet Microsoft Office zawsze były ze sobą nierozerwalnie związane. Jednak projektowanie ikon przeszło długą drogę od 1995 roku i nadszedł czas, aby zrezygnować z tego konkretnego stylu na używanych obrazach.
Powyższe przykłady grafiki pobrane z różnych stron Microsoft po prostu powodują, że się kulę, szczególnie to okropne logo „Beginner Developer”. Nie mam pojęcia, dlaczego bumerang atakuje roślinę ani czy magiczny unoszący się monitor komputerowy pomaga w ataku, czy ucieka z miejsca zdarzenia. Wiem tylko, że komunikacja wizualna to nieczytelny bałagan.
Jest to jeden z głównych powodów istnienia galerii CSS takich jak nasza. Nie dlatego, że możesz ukraść projekty innych, ale możesz rzucić okiem na stan projektowania w dekadzie, w której się rozwijasz. Przeglądanie tych galerii jest jak odwiedzanie popularnych sklepów z odzieżą w centrum handlowym, aby pokazać swojej szalonej cioci, że nie musi się ubierać jak ktoś z serialu Sunny and Cher.
Zawsze możesz przekraczać granice i wychodzić poza aktualne trendy projektowania, rozpoczynając własne. Zachowaj ostrożność, aby pozostać upartym przez wiele lat, podczas gdy reszta świata się rozwija.
# 6 Niepoprawny przepełniony tekst
Kolejnym trendem, który trudno przeoczyć na stronach Microsoftu, są ciągle łamane kolumny tekstu, które przekraczają ich oczywiste granice.
Ten jest dość łatwy do naprawienia i naprawdę wymaga tylko trochę wysiłku i uwagi. Wystarczy skorzystać z bezpłatnych narzędzi, takich jak laboratorium przeglądarki Adobe, aby upewnić się, że układy nie ulegają zepsuciu podczas przeglądania w głównych przeglądarkach.
Chociaż układ CSS jest wprawdzie podstępną sztuczką, jeśli chodzi o spójność w różnych przeglądarkach, takie małe błędy naprawdę obniżają jakość witryny i są warte czasu na rozwiązanie problemu.
# 7 Słabe wyrównanie
Czasami dana strona stanowiła wyzwanie dla mnie, aby zdecydować, który projekt powinien zostać wskazany. Na przykład na poniższej stronie pierwotnie zastanawiałem się nad wybraniem małego zrzutu ekranu, który nie powiększa się po kliknięciu, ale im więcej patrzyłem na stronę, tym bardziej byłem zdezorientowany, co się dzieje Układ.
Jeśli w ogóle znasz podstawową teorię projektowania, wiesz, że nauka solidnego i spójnego dopasowywania jest kluczem do dobrego układu strony. Dziwna mieszanka lewego, środkowego i prawego wyrównania wizualnego zachodząca na powyższym miejscu, w połączeniu z niezręczną pustą przestrzenią u góry, zapewnia naprawdę dziwny wizualny przepływ prezentowanych informacji.
Ponadto, jeśli odwiedzisz powyższą stronę, zobaczysz, że treść jako całość wydaje się próbować być wyśrodkowana, ale tak naprawdę jest odrzucana przez pasek na środku, co sprawia, że strona wydaje się być na środku.
# 8 Bałagan reklamowy
Darmowe blogi projektowe, takie jak ten, muszą zawierać wiele reklam, to po prostu sposób, w jaki zarabiamy i nadal dostarczamy Ci treści. Jeśli jednak prowadzisz profesjonalną witrynę biznesową, musisz dokładnie rozważyć, czy nie chcesz negatywnie wpływać na przekaz i profesjonalizm reklam.
Strony Microsoft.com są wypełnione różnymi reklamami, które naprawdę obniżają estetykę strony, na której się znajdują. Czasami te reklamy wskazują bezpośrednio na inne strony Microsoft, czasem na inne firmy lub partnerów. Nie ma nic złego w koncepcji kierowania ruchu do innych części witryny, ale sposób, w jaki to osiągasz, może mieć ogromne znaczenie.
Jeśli jest jedna rzecz, którą większość internautów nauczyła się dostrzegać, ignorować, a być może nawet urazić, jest to reklama banerowa. Nie wspominając o tym, że tego typu reklamy nie działają przy właściwym kierowaniu i projektowaniu, ani nawet powiedzieć, że użytkownicy Microsoft nie klikają ich, ale zastanawiam się, czy nie ma lepszego sposobu.
Jeśli Microsoft chce przekierować ruch do swoich telefonów komórkowych i innych projektów, najłatwiejszym sposobem jest skonfigurowanie zaśmieconego, niestandardowego (reklamowego) systemu reklamowego, który przewija się przez całą witrynę. Wydaje się jednak, że zintegrowanie tej treści jako części rzeczywistej witryny miałoby znacznie lepszy współczynnik klikalności, ponieważ więcej użytkowników zauważyłoby wiadomość i nie musiałoby łamać żadnych wewnętrznych zasad dotyczących unikania reklam banerowych za wszelką cenę.
Ponadto taka integracja wymusiłaby większą spójność projektów, ponieważ są one tworzone jako pojedyncza jednostka, a nie przez oddzielne zespoły. Ponownie jest to scenariusz, w którym rozumiem opłacalność podejścia Microsoft, ale chcę cię ostrzec przed podążaniem za nim. Szanse są takie, że strony, które projektujesz, nie będą rywalizować z wielką siecią witryn Microsoft, a zatem bardziej prawdopodobne jest, że nadadzą się solidnemu, zintegrowanemu projektowi, dzięki czemu unikniesz wizualnego bałaganu nadmiaru reklam.
Oczywiście istnieje wiele gatunków witryn, w których nie ma to wcale zastosowania, ponieważ oczekuje się, że pojawią się reklamy. Tylko upewnij się, że zastanawiasz się, czy Twoja witryna powinna być przeznaczona do sprzedaży Twojego produktu lub usługi, czy też wymaga dodatkowego dochodu i rozproszenia reklamy.
# 9 Brak pokoju oddechowego
W druku, projektanci ustawiają każdą stronę z „obszarem na żywo”. Zwykle jest to prostokątna wstawka z obramowania strony, która określa obszar, w którym można bezpiecznie umieścić treść, aby uniknąć odcięcia strony lub zagęszczenia krawędzi. Większość projektantów stron internetowych robi to intuicyjnie, ponieważ jest dość oczywiste, że nie chcesz, aby twoje treści były zbyt mocno zatłoczone po stronie przeglądarki.
Jednak, jak pokazuje powyższy zrzut ekranu, istnieje kilka stron Microsoft, które nie wydają się stawiać takich opinii. Zamiast tego treść zaczyna się, gdy tylko strona zrobi z zerowym poziomym dopełnieniem lub marginesem (przynajmniej w przeglądarkach, z którymi sprawdzałem).
Panel nawigacyjny nie wydaje się być wbudowany z boku strony, wydaje się, że jest odcięty (znowu, może to robić ze względu na fakt, że nie mam IE). Lekcja tutaj jest prosta: zawsze pamiętaj o krawędzi okna przeglądarki. O ile nie złamiesz zasady oczywistego efektu krwawienia wizualnego, umieść swoje treści, zwłaszcza interaktywne części i linki, w bezpiecznym marginesie, aby użytkownicy nie czuli się zatłoczeni, gdy próbują z nich skorzystać.
Jeśli przyjrzysz się uważnie powyższemu zrzutowi ekranu, zobaczysz więcej przykładów projektantów Microsoftu, którzy po prostu nie zastanawiają się, czy ich tekst będzie poprawnie płynął we wszystkich głównych przeglądarkach. Jest to dość zabawny trend dla Microsoftu, ponieważ wielu projektantów stron internetowych spędza całe dnie próbując zrobić specjalne zakwaterowanie dla przeglądarki Microsoft Internet Explorer, ale wielomiliardowa firma nie może zadać sobie trudu, aby odwzajemnić przysługę, sprawdzając swoją pracę na innych systemach.
# 10 Nie wykorzystując swojego talentu
Chociaż powyżej jest wiele negatywnych komentarzy na temat projektantów stron internetowych w Microsoft, byłem mile zaskoczony, widząc, że w rzeczywistości mają całkiem sporo witryn i stron, które wyglądają po prostu niesamowicie.
Powyższe przykłady to tylko dwa z wielu miejsc, które - jak sądzę - Microsoft naprawdę wyeliminował z parku dzięki ich układowi, kolorom, grafice i kompatybilności z różnymi przeglądarkami. Mówi mi to, że gdzieś pośród ogromnej puli kabin w tej firmie znajdują się naprawdę utalentowane osoby, które są w stanie całkowicie wyprowadzić firmę z kryzysu.
Ci projektanci, kimkolwiek są, powinni awansować na stanowiska, które pozwolą im współpracować i ustanowić spójne standardy, do których dosłownie każdy projektant sieci Microsoft byłby zmuszony podążać. Zamiast labiryntu rozłączonych treści, mogli stworzyć silnie markową sieć pięknych witryn, które wyraźnie należą do tej samej rodziny.
Ostatnią propozycją, którą wam przedstawiam, jest znalezienie tego rodzaju wybitnych osób we własnej firmie i udzielenie im głosu. Zamiast lamentować z powodu braku talentu wśród innych członków zespołu, powoływaj najsilniejszych projektantów i programistów na stanowiska, na których mogą oni wpływać na każdy element komunikacji wizualnej rozwijanej w związku z określoną marką.
Można to zrobić wydajnie i skutecznie, tworząc jasne, spójne i ścisłe wytyczne dotyczące marki, które są dystrybuowane do każdego projektanta i programisty dla każdej wyraźnej marki, z którą współpracujesz.
Zamykanie myśli
Podsumowując, chociaż Microsoft posiada kilku bardzo utalentowanych projektantów stron internetowych, praca tych osób jest prawie całkowicie przyćmiona przez ogromną ilość treści, która nawet nie spełnia standardów, których moglibyśmy oczekiwać od początkujących projektantów i programistów w pierwszym roku .
Na szczęście możemy wykorzystywać firmy takie jak Microsoft jako pomoce instruktażowe, aby jasno zilustrować, że w rzeczywistości istnieje niewłaściwy sposób działania. Nigdy nie wyobrażaj sobie, że tylko dlatego, że jesteś samotnym freelancerem lub małą firmą projektową, nie możesz całkowicie przewyższyć wielkich korporacji i firm projektowych, jeśli chodzi o jakość wykonywanej pracy.
Przekonałem się, że często łatwiej jest znaleźć przykłady wysokiej jakości projektantów w biurach domowych na całym świecie niż siedzieć przy biurkach dużych firm. Pociesz się tym, że nie musisz koordynować i kontrolować jakości setek projektantów. Staraj się tworzyć jedne z najlepszych witryn w sieci z niewielką ilością zasobów, które posiadasz w połączeniu z dużą ilością osobistego dysku, aby tworzyć pięknie funkcjonalne projekty.
