Poučení od společnosti Microsoft: 10 návrhů, kterým je třeba se vyhnout
Dnes se podíváme na postupy webového designu a trendy jediného největšího jména v softwaru, abychom zjistili, zda se můžeme dozvědět něco o některých chybách, kterým se ve své vlastní práci vyhnout.
Nebojte se vyjádřit, zda souhlasíte nebo nesouhlasíte s níže uvedenými návrhy. Jako profesionální návrháři je váš přehled cenný a těším se na vaše myšlenky.
Prozkoumejte zdroje návrhu
Příležitostný Rant
Všem, kdo nenávidí články plné výprasků, se omlouvám, že tento příspěvek je občas trochu krutý. Normálně upřednostňuji chválení dobrého designu před kritizováním špatného, ale když jsme se s Davidem Appleyardem rozhodli udělat příspěvek o trendech designu společnosti Microsoft, zdálo se, že se toho mnohem více dozví o chaotických, ošklivých a / nebo nepředvídatelných věcech, které dělají než alternativa.
Abych vás přerušil v komentářích, nebudu v níže uvedené analýze zmínit ani provést jediné srovnání s Apple. To nemá být přinejmenším argumentem PC versus Mac, nýbrž spíše pohledem na to, co považujeme za skutečně špatné postupy v oblasti webdesignu a vývoje. Microsoft je ve všech spravedlivých případech nesmírně úspěšná společnost a nevyvíjí náročný neúspěch kvůli některému z těchto problémů. Ve skutečnosti, jak zdůrazňujeme níže, se zdá, že Microsoft ve skutečnosti pro některé weby má v týmu nějaké hvězdné designéry, pouze navrhujeme, aby byla ve všech úrovních implementována vyšší úroveň kontroly kvality.
S ohledem na to analyzujme několik míst, která Microsoft podle všeho zaostává ve svých postupech při navrhování a vývoji a jak můžete z těchto znalostí těžit.
# 1 Dejte si pozor na pověření určitých pluginů
Pokud jsme se dozvěděli něco z nedávných škrábanců mezi společnostmi Apple a Adobe, je to, že vytváření webů, které jsou zcela závislé na uzavřených zásuvných modulech třetích stran, může nakonec vést k nějakému vážnému selhání. Zdá se, že Microsoft opakuje stejnou chybu, protože jeho vlastní síť webů se na Silverlight stále více deponentuje.
Když jsem procházel různé weby společnosti Microsoft, které se připravovaly na tento článek, byl jsem neustále obtěžován okny informujícími, že jsem nenainstaloval Silverlight, a nemohl jsem tak zažít webovou stránku tak, jak má být prohlížen. Moje otázka zní: „proč jít touto cestou?“ Obzvláště když mluvíme o jednoduchých prezentacích a animacích, které lze provádět pomocí všudypřítomnějších technologií. Je pravda, že Microsoft vlastní Silverlight, takže je pro ně dobrý obchodní smysl, aby zálohovali své investice, ale to neznamená, že je to nejlepší volba, abyste skočili na jejich rozjetý vůz.
Ať už jste velkým fanouškem Silverlightu nebo ne, moje rada má být velmi opatrná, pokud jde o to, aby funkčnost vašeho webu byla založena na této nebo jakékoli podobné technologii. Vzhledem k tomu, že debata o tom, zda má smysl vyvíjet weby s Flashem, má smysl, se i nadále zahřívá, druhý systém v řadě, jako je Silverlight, se stává ještě více hazardem. Pokud je to možné, držte se křížového prohlížeče, standardů a nástrojů, které vyhovují standardům a které nevyžadují od vašich návštěvníků žádnou další práci ani instalaci.
# 2 Sledujte své rozlišení
Toto je jedna z mých největších stížností na Microsoft jednoduše proto, že to vypadá jako nedbalý design. Mezi udržováním velikosti souboru dolů je nepochybně jemná linie, která zvyšuje použitelnost a vaše obrázky jsou čisté a ostré, ale nemůžu si pomoct, ale cítím, že Microsoft se zdá být náchylnější k zobrazení ošklivých, zubatých JPG než doslova jakýkoli jiný profesionální stránky, které jsem viděl v posledních několika letech.
Stále se snižující počet uživatelů telefonického připojení k internetu stále tlačí přijatelné velikosti obrázků nahoru a nahoru. To v žádném případě neznamená, že byste neměli věnovat zvláštní péči tomu, aby bylo všechno tak malé, jak je rozumné, ale v okamžiku, kdy se začne vážit na designu tak, že to dramaticky sníží viditelnou kvalitu webu, se obrazy stanou sebepoškozující!
Žijete čistě ironicky, pokud používáte obrázky, aby vaše stránky vypadaly lépe, ale nakonec v tomto procesu snižujete estetickou přitažlivost. Pokud je to možné, zobrazte náhled zpracovaných obrázků na různých monitorech a věnujte zvýšenou pozornost tomu, jak velké zkreslení a artefakty považujete za přijatelné.
# 3 Organizovaný nepořádek
Někdy můžete dodržovat všechna zřejmá pravidla návrhu a stále skončit s něčím, co vypadá vizuálně. Při procházení webů společnosti Microsoft jsem narazil na nesčetné oblasti, jako jsou níže uvedené oblasti, které se zdály přeplněné navzdory jejich pokusům o organizaci založenou na sloupcích.
Tak co je za problém? Jednoduše řečeno, tady se v relativně malém prostoru děje tuna. I když se určitě pokusili zařídit obsah a zlepšit vizuální čitelnost pomocí ikon, konečný výsledek je stále docela nevyvážený.
Pokud se blíže podíváte na to, co se zde děje, je to jako čtyři sloupce informací navržené čtyřmi různými lidmi, které byly nacpané dohromady. Levá strana se zdá být opravdu těžká u obrázků ve srovnání s vpravo, barva textu je trochu sporadická, obsah je nepříjemně rozložený a ve sloupcích chybí dostatek prostoru pro dýchání, aby vypadaly jako nezávislé oblasti, které jsou.
Lekce zde je opatrná při zabalení jedné oblasti vaší stránky příliš plnou nesourodých informací. Nepochybně existuje spousta případů, kdy bude situace vyžadovat spoustu obsahu, ale s organizací by se mělo zacházet konzistentně a atraktivně, jak je vidět na krásných příkladech níže (z webů jiných společností než Microsoft).
# 4 Nekonzistence
Počínaje webem Microsoft.com otevřete rozbalovací nabídky navigace gargantuan a vyberte část webu, kterou chcete navštívit. Bez ohledu na to, na který odkaz kliknete, bude výsledná stránka vypadat docela jinak než domovská stránka a bude se lišit od většiny ostatních odkazů dostupných ve stejné rozbalovací nabídce.
Prozkoumání webu společnosti Microsoft je jako roztočení kola rulety. Nemáte vůbec ponětí, kam se chystáte přistát a co můžete očekávat od další stránky. Některé stránky mají swooshy pozadí, zatímco jiné používají měkké přechody nebo dokonce explodující kruhy. Zdá se, že většina stránek upřednostňuje modrou, ale ne nutně stejnou modrou, a existuje také spousta stránek, které úplně ignorují modrý trend.
Jde o to, zda váš web má dvě stránky nebo dvě stě, konzistence je nutností. Uživatelé se tak budou cítit pohodlněji, když se během několika sekund seznámí s tím, jak web funguje a jak vypadá. Pokud jim na několika málo stránkách poskytnete něco drasticky odlišného, bude procházení matoucí a méně efektivní.
kromě toho je tu myšlenka, že vytvoření silné a konzistentní značky je jen dobrý obchod, protože pomáhá zákazníkům více oslovovat vaši společnost. Je pravda, že Microsoft žongluje s mnoha různými značkami a microsite, které pramení z domovské stránky, ale i mezi tím, co lze považovat za hlavní stránky Microsoft.com, se motivy obrázků a navigační metody zdají být drasticky rozmanité.
# 5 Grafický design
Tento návrh je očividně poněkud absurdní, protože klipart a Microsoft Office byly vždy neúprosně propojeny. Ikonový design však od roku 1995 prošel dlouhou cestou a je na čase vzdát se tohoto specifického stylu v obrázcích, které používáte.
Výše uvedené příklady umění vycházející z různých stránek společnosti Microsoft mě prostě dělají krupobitím, zejména to hrozné logo „Beginner Developer“. Nemám ponětí, proč bumerang útočí na rostlinu nebo zda magický vznášející se počítačový monitor pomáhá při útoku nebo prchá ze scény. Vím jen to, že vizuální komunikace je zde nerozluštitelným nepořádkem.
To je jeden z hlavních důvodů, proč galerie CSS, jako je ta naše, existují. Ne tak, abyste mohli ukrást design druhých, ale abyste mohli nahlédnout do stavu designu v desetiletí, ve kterém se vyvíjíte. Procházení těmito galeriemi je jako návštěva populárních obchodů s oblečením v obchoďáku a ukázání šílené tety, že nemusí se oblékat jako někdo ze show Sunny a Cher.
Vždy klidně překonejte hranice a přesuňte se za současné trendy deisgn tím, že začnete svůj vlastní. Jen buďte opatrní, abyste zůstali roky tvrdohlavě stojatí, zatímco zbytek světa se pohybuje dál.
# 6 Nesprávně přetékající text
Dalším trendem, který je na stránkách Microsoftu těžko minout, jsou neustále přerušované sloupce textu, které přetékají jejich zřejmé hranice.
Tento je poměrně snadno opravit a opravdu vyžaduje jen trochu úsilí a pozornosti. Nezapomeňte využít bezplatné nástroje, jako je prohlížečová laboratoř společnosti Adobe, abyste zajistili, že se vaše rozložení při prohlížení na jakýchkoli hlavních prohlížečích nezlomí.
Ačkoli rozvržení CSS je sice příšerně komplikované, pokud jde o konzistenci mezi prohlížeči, malé chyby, jako je tato, skutečně snižují kvalitu vašeho webu a stojí za to vyřešit čas potřebný k řešení problémů.
# 7 Špatné zarovnání
Někdy mi daná stránka představovala výzvu rozhodnout, který design je schopen poukázat. Například na níže uvedené stránce jsem původně uvažoval o použití malé obrazovky, která se po kliknutí na ni nezvětší, ale čím více jsem se na stránku díval, tím více jsem byl zmaten, co se děje s rozvržení.
Pokud jste vůbec obeznámeni se základní teorií designu, víte, že naučit se implementovat solidní a konzistentní zarovnání je klíčem k dobrému rozvržení stránky. Zvláštní směs levého, středního a pravého vizuálního zarovnání, která se odehrává na výše uvedeném místě, ve spojení s nepříjemným prázdným prostorem nahoře, vytváří skutečně podivný vizuální tok prezentovaných informací.
Dále, pokud navštívíte výše uvedenou stránku, uvidíte, že obsah jako celek vypadá, že se snaží soustředit, ale je opravdu hoden pruhem napříč středem, což způsobí, že se stránka jeví zcela vpravo od středu.
# 8 Ad Clutter
Bezplatné designérské blogy, jako je tento, musejí obsahovat spoustu reklam, je to prostě způsob, jakým vyděláváme a nadále vám poskytujeme obsah. Pokud však provozujete profesionální obchodní web, musíte pečlivě zvážit, zda se chcete vzdát vaší zprávy a profesionality s reklamou.
Stránky Microsoft.com jsou poseté různými reklamami, které skutečně snižují estetiku stránky, na které jsou. Tyto reklamy někdy směřují přímo na jiné stránky společnosti Microsoft, jindy na jiné společnosti nebo partnery. S konceptem řízení provozu do jiných částí vašeho webu není nic špatného, ale to, jak toho dosáhnete, může mít obrovský rozdíl.
Pokud existuje jedna věc, kterou se většina uživatelů webu naučila rozpoznat, ignorovat a případně dokonce rozzuřit, jedná se o bannerovou reklamu. Nemluvě o tom, že tento typ reklamy nefunguje se správným zacílením a designem, ani s tím, že uživatelé Microsoftu na ně neklikají, ale zajímalo by mě, jestli neexistuje lepší způsob.
Pokud chce společnost Microsoft přesměrovat provoz na své mobilní telefony a další projekty, nejjednodušší cestou je nastavení nepřehledného, nestandardního (designového) reklamního systému, který se převaluje po celém webu. Zdá se však, že integrace tohoto obsahu jako součásti skutečného webu by měla mnohem lepší míru prokliku, protože více uživatelů by tuto zprávu vzalo na vědomí a nemuselo porušovat žádná interní pravidla o vyhýbání se bannerovým reklamám za každou cenu.
Navíc by taková integrace nutila návrhy, aby byly soudržnější, protože jsou vytvořeny spíše jako jedna jednotka než oddělené týmy. Opět je to scénář, ve kterém chápu nákladovou efektivitu přístupu Microsoftu, ale chci vás varovat před následováním jejich vedení. Je pravděpodobné, že weby, které navrhujete, nebudou konkurovat mega-síti webů společnosti Microsoft, a proto se s větší pravděpodobností hodí k solidnímu a integrovanému designu, takže se můžete vyhnout vizuálnímu přeplnění nadměrných reklam.
Je zřejmé, že existuje spousta žánrů stránek, kde to vůbec neplatí, protože se očekává, že bude přítomna reklama. Nezapomeňte zvážit, zda by měl být váš web věnován prodeji vašeho produktu nebo služby, nebo vyžaduje další příjem a rozptýlení reklamy.
# 9 Nedostatek dechové místnosti
V tiskovém designu návrháři nastavují každou stránku pomocí „živého prostoru“. Toto je obvykle obdélníkový výřez z ořezu stránky, který definuje oblast, do které je bezpečné umístit obsah, aby nedošlo k odříznutí stránky nebo vytlačení okrajů. Většina webových designérů to dělá intuitivně, protože je zcela zřejmé, že nechcete, aby byl váš obsah příliš nacpaný na straně prohlížeče.
Jak však ukazuje výše uvedený snímek obrazovky, existuje několik stránek společnosti Microsoft, u nichž se nezdá, že by do takových názorů vkládaly zásoby. Místo toho se obsah spustí, jakmile stránka provede nulovou vodorovnou výplň nebo okraj (alespoň v prohlížečích, které jsem zkontroloval).
Navigační panel nemá pocit, že je vestavěn do boku stránky, má pocit, že se dostává do meze (opět to může být právě kvůli tomu, že nemám IE). Lekce je jednoduchá: vždy si uvědomte okraj okna prohlížeče. Pokud nedodržíte pravidlo viditelného vizuálního krvácení, umístěte svůj obsah, zejména interaktivní části a odkazy, na bezpečnou hranici, aby se uživatelé při pokusu o použití necítili přeplněné.
Pokud se podrobně podíváte na výše uvedený snímek obrazovky, uvidíte několik dalších příkladů návrhářů společnosti Microsoft, kteří jednoduše nezvažují, zda jejich text bude správně proudit ve všech hlavních prohlížečích. To je pro společnost Microsoft docela zábavný trend, protože mnoho webových designérů tráví své dny pokusem o zvláštní přizpůsobení aplikace Internet Explorer společnosti Microsoft, ale společnost s miliardovým dolarem se nemůže obtěžovat vrátit laskavost kontrolou své vlastní práce na jiných systémech.
# 10 Nepodařilo se využít váš talent
Přestože existuje spousta negativních komentářů o webových designérech více než u společnosti Microsoft, byl jsem příjemně překvapen, když vidím, že ve skutečnosti mají poměrně málo stránek a stránek, které vypadají prostě úžasně.
Výše uvedené příklady jsou pouze dvěma z mnoha míst, o kterých se domnívám, že je Microsoft opravdu vyřadil z parku s jejich rozvržením, výběrem barev, grafikou a kompatibilitou mezi prohlížeči. To mi říká, že někde mezi obrovským fondem kabin v této společnosti sedí někteří opravdu talentovaní jedinci, kteří jsou schopni společnost zcela vymanit ze svého konstrukčního propadu.
Tito návrháři, ať už jsou kdokoli, by měli být povýšeni na pozice, které by jim umožnily spolupracovat a stanovovat jednotné standardy, které by doslova každý webový designér společnosti Microsoft musel být nucen se řídit. Namísto labyrintů nespojitých smíšených obsahů mohli vytvořit silně značkovou síť krásných webů, které všechny jednoznačně patří do stejné rodiny.
Konečný návrh, který vám představuji, je najít tyto typy vynikajících jedinců ve vaší společnosti a dát jim hlas. Namísto nářku nad nedostatkem talentu mezi ostatními členy vašeho týmu jmenujte nejsilnější designéry a vývojáře na pozice, kde mohou ovlivnit každý kus vizuální komunikace, která se objevuje ve spojení s konkrétní značkou.
Toho lze dosáhnout efektivně a efektivně vytvořením jasných, konzistentních a přísných pokynů pro značku, které jsou distribuovány každému návrháři a vývojáři pro každou odlišnou značku, se kterou pracujete.
Závěrečné myšlenky
Abych to shrnul, ačkoli Microsoft vlastní poměrně málo velmi talentovaných webdesignérů, práce těchto jednotlivců je téměř úplně zastíněna obrovským množstvím obsahu, který nesplňuje ani standardy, které bychom očekávali od nováčků a vývojářů v prvním roce. .
Naštěstí můžeme použít společnosti jako Microsoft jako instruktážní pomůcky, abychom jasně ukázali, že ve skutečnosti existuje špatný způsob, jak dělat věci. Nikdy si to nepředstavujte jen proto, že jste osamělý nezávislý pracovník nebo malá designérská firma, že nemůžete úplně překonat mega-korporace a designérské firmy, pokud jde o kvalitu vaší práce.
Zjistil jsem, že je často snazší najít příklady kvalitních designérů v domácích kancelářích po celém světě než sedět u stolů velkých firem. Využijte pohodlí v tom, že nemusíte koordinovat a kontrolovat kvalitu stovek návrhářů. Snažte se vytvořit některé z nejlepších webů na webu s malým množstvím zdrojů, které vlastníte, spolu s velkým množstvím osobního disku k vytvoření krásně funkčních návrhů.
