Design = Emoce + použitelnost
Zatímco výtvarné umění je subjektivní pole, grafický design je ve své podstatě mnohem formálnější. Efektivní návrh by měl lidem cítit určitý způsob a učinit určitou akci . V tomto článku bych chtěl sdílet Gravity Switch zásady návrhu webu a naše myšlení za nimi.
Tato pravidla jsou: definovat cíle jako první; zaměření na druhé uživatele; design pro emoce; dodržovat pravidla vizuálního designu; budovat jasnou vizuální hierarchii; být konzistentní; porušuje pravidla (v případě potřeby); nepoužívejte příliš mnoho triků; a nakonec testovat, měřit a zlepšovat.
1. Nejprve definujte cíle
Vsadím se, že jste si mysleli, že se budu říkat "zaměřte se na uživatele nejprve", to je to většinalidéříci. Zapomeňte na to, začněte s vašimi cíli. Začněte s každým designem webových stránek s brainstorming session, který nastiňuje jasné, realistické cíle webových stránek, které posilují vaše podnikatelské cíle .
Pro lepší ilustraci se podívejme na Amazon. Jejich cílem je maximalizovat prodej produktů. Prostřednictvím "upsellingu" a "cross-sellingu" mohou maximalizovat kupní sílu každého uživatele, ale v tomto případě zpomalují nákupní proces. Na rozdíl od mnoha svých konkurentů nemá Amazon v jejich výsledcích vyhledávání tlačítko "zakoupit". Uživatelé musí před provedením nákupu navštívit ještě jednu stránku (s potenciálním upsells). Jedná se o dokonalý příklad toho, jak design webu může splňovat jasné obchodní cíle.
Většina moderních webů elektronického obchodu odstranila ze svých výsledků vyhledávání tlačítko "koupit nyní", ačkoli některé zděné a maltové zásuvky stále obsahují.
2. Zaměřte se na uživatele sekundy
Se svými jasnými cíli nejdůležitější, pak budete muset definovat a upřednostnit uživatele . Být co nejpřesnější. Některé příklady otázek, které je třeba položit, jsou:
- Rozdělení mužů a žen?
- Stupeň vzdělání?
- Umístění v zemi?
- Související koníčky?
- Příjmová skupina?
- Kdo řídí nákupy produktů pro děti? Děti? Rodiče? Prarodiče?
Klíčovým bodem je, že návrháři by si měli být vědomi uživatelů, aby mohli zajistit, že jejich návrhy nebudou blokovat klíčové způsoby využití.
3. Design pro emoce
Ujistěte se, že jste pochopili, jaké emoce by vaše značka měla mít . Brainstorm. Klást otázky. Získejte souhlas. A co je nejdůležitější, zaměřte se na tyto emoce, když se prezentujete zpátky svým klientům. Nikdy se neptejte, zda se váš klient "líbí" designu. Když dodáváte návrhy, měli byste místo toho klást otázky jako "Který z těchto způsobů se cítíte nejvíce profesionální?" Nebo "Když porovnáte tyto dva návrhy, uvidíte, že tento je modernější, zatímco ten je dynamičtější. Byly to oba emoce, které byly pro vás důležité, když je vidíte vizuálně, což podle vás je nejdůležitější emocí, kterou můžete předvést svému cílovému publiku? "
Která z těchto organizací je zábavná? Relaxační? Inovační? Zaneprázdněný? Nemovitý? (Designy od @ JessicaShiner a Christine Mark)
4. Dodržujte pravidla vizuálního designu
Existuje mnoho malých prvků, které uživatelé webových stránek vědomě a podvědomě používají k tomu, aby rozhodli, zda budou důvěřovat webové stránce. Nejdůležitější jsou:
- Oříznutí: výběr fotografií je pouze polovina bitvy, oříznutí fotografií je to, co dělá nebo rozbíjí rozložení stránky.
- Negativní prostor: věnovat zvláštní pozornost okrajům, polstrování a výšce čáry je rozdíl mezi vypadáním jako New York Times versus vysokoškolský informační bulletin.
- Písma: každý si oblíbí výběr písem, ale skvělý návrhář může rychle zaznamenat profesionální písmo a má omezení, aby počet písem na webu zůstal 1-2 (nezahrnuje logo, které je často jeho vlastní písmo).
- Barvy: barvy jsou jednou z nejtěžších věcí, které mohou návrháři efektivně využít. Existuje tolik pravidel, jak vybírat dobrou barevnou paletu a zároveň je lákavé používat online generátory barevných palet , trávit čas navrhováním své vlastní palety barev.
- Rozložení: vytvořte dobrý vizuální "tok" stránky tak, aby uživatelovy oči šly tam, kam chcete, aby se dostaly na stránku bez dalších prvků, které vizuálně zakrývají vaše cíle.
5. Vytvořte jasnou vizuální hierarchii
Návštěvníci webových stránek skim. Nečtou. Uchopte jejich pozornost a přiveďte je k nejdůležitějším informacím s jasně definovanou, dobře promyšlenou vizuální hierarchií . Dobře promyšlený design - stránka> stránka> - vede uživatele přes stránku tak, jak chcete. Uživatelé by měli být schopni se podívat na vaši stránku a pochopit ji ve zlomku sekundy.
Podívejte se na následující příklad článku a všimněte si, jak je pro vaše oko těžké zjistit, na čem je stránka nebo kde začíná článek!
Níže je ukázka, kterou jsem vytvořil změnou asi tuctu řádků CSS, abych vytvořil jasnější vizuální hierarchii na této stránce následujícími způsoby:
- Název článku by měl být nejvýznamnějším prvkem na stránce. V současné době je menší velikost písma než nadpis nad stránku! Tak jsem zvýšil velikost názvu článku a snížil velikost okruhů.
- Nadpis dále na stránce byl také odpojen od obsahu, který byl vizuálně nadpisem, a tak jsem také zpřísnil mezeru pod záhlavím a zároveň ponechal mezeru nad nadpisem, aby uživatelé věděli, že jde o nadpis pod odstavcem .
- Také jsem přesunul malý obrázek napravo od titulu namísto levého, takže když uživatel skenuje levou stranu stránky, aby se orientoval, je název článku v jejich vidění.
- Odstranil jsem okraje a pozadí na modrém bloku, takže už nekonkuruje s nadpisem a neodstraní horní okraj. Byla již zavedena třída, která je šedá, což v tomto případě funguje dobře.
- Také jsem odstranil rušivý text a obrázek, který zdůrazňuje, že se jedná o článek o opakování, stejně jako o některé prázdné odstavce a
značky.
Záměrně jsem nechal všechny reklamy, jak byly původně kódovány, za předpokladu, že to je kritická část této stránky.
6. Buďte konzistentní
Nezaměňujte své uživatele. Linky by měly být konzistentní a odlišné. Pokud se rozhodnete použít ikony, fotografie a ilustrace, ujistěte se, že vypadají a vypadají, že patří jako soudržná souprava. Nekonzistence odvrátí vašeho uživatele a zakryje vaši zprávu. Nepoužívejte více než 3 písma - je to nejlepší, pokud jsou všichni ve stejné rodině. Omezit se na 5-6 barev (Poznámka: logo může být jiné písmo a často by mělo být).
7. Rozdělit pravidla (je-li to nutné)
Pokud je něco zvlášť jedinečné nebo důležité , které je třeba zvýraznit, možná budete muset "porušovat pravidla." Můžete použít jednu nebo dvě kontrastní barvy, které vám pomohou vyniknout. Například webová stránka Spojeného království pod ní zdůrazňuje daňovou sazbu tím, že se z něj stává větší prvek s popovou barvou.
Když lidé navštíví informační stránku o DPH, návrháři firmy GOV.UK se ujistili, že informace, které většina lidí potřebují, je přední a střední.
8. Nepřepínejte triky
Udělejte si zábavu v designu, ale ujistěte se, že tyto prvky podporují to, co se snažíte na webu dosáhnout. Například Inze místo je nádherné podívat se a nádherné na mobilu, ale když jsem ji navštívil na svém stolním počítači, byl jsem ztracen. Ukazuje se, že navigace je skrytá, dokud nezačnete procházet, což bohužel vzalo mé oko do dolní části stránky. Jako výsledek jsem si ani nevšiml jemné navigace, která se objevila nahoře. Nejprve jsem prošel hlavou dolů, než jsem si uvědomil, že na vrcholu je (konečně) navigace. "Skrytá" navigace je čistý efekt, ale "návrh" mi zabránil v přijetí požadované akce. Nakonec to přináší zmatený, neomylný obraz značky.
Porovnejte Inse s tím, co se stane přímo v tomto článku Web Designer Depot když přejdete přes odkaz na stolním počítači. Máme úhledný efekt, ale nevytváří pro uživatele zábranu kvůli triku. Degraduje také ladně, takže se nezlomí na mobilních nebo starších prohlížečích.
9. Test. Opatření. Zlepšit
Webové stránky se vyvíjejí. Design pro flexibilitu a přizpůsobivost. Shromažďování a analýza probíhajících dat testů bude neustále zlepšovat. Nezapomeňte, je to všechno o vytvoření designu, který splňuje vaše cíle.
Pečlivým měřením výsledků řady drobných změn v návrhu na původní vstupní stránku (vlevo) jsme přišli s novým designem (vpravo), který zvýšil procento registrací o 60%!
Pamatovat
Efektivní grafický design potřebuje emocionálně spojit uživatele s značkou a současně je přimět k tomu, co děláte. To lze udělat.
Souhlasíte s těmito pravidly pro návrh? Přidali byste ještě víc? Dejte nám vědět své názory v komentářích.