Design = Emocje + użyteczność
Podczas gdy sztuka jest dziedziną subiektywną, projektowanie graficzne ma bardziej formalne podstawy. Skuteczny projekt powinien sprawić, że ludzie poczują się w określony sposób i podejmą określone działania . W tym artykule chciałbym udostępnić Gravity Switch's zasady projektowania stron internetowych i nasze myślenie za nimi.
Zasady te to: najpierw określ cele; skupić się na użytkownikach po drugie; projekt dla emocji; postępuj zgodnie z zasadami projektowania wizualnego; zbuduj jasną, wizualną hierarchię; być konsekwentnym; złamać zasady (jeśli to konieczne); nie nadużywaj sztuczek; i wreszcie przetestuj, zmień i popraw.
1. Najpierw określ cele
Założę się, że myślałeś, że zamierzam powiedzieć "najpierw skup się na użytkownikach", to właśnie większośćludziemówić. Zapomnij o tym, zacznijmy od twoich celów. Rozpocznij każdy projekt strony internetowej od sesji burzy mózgów, która przedstawia jasne, realistyczne cele witryny, które wzmacniają twoje cele biznesowe .
Aby lepiej zilustrować to, spójrzmy na Amazon. Ich celem jest maksymalizacja sprzedaży produktów. Dzięki "upsellingowi" i "cross-sellingowi" mogą zmaksymalizować siłę nabywczą każdego użytkownika, ale aby odnieść sukces, spowalniają proces kupowania. W przeciwieństwie do wielu konkurentów, Amazon nie ma przycisku "Kup teraz" w swoich wynikach wyszukiwania. Przed dokonaniem zakupu użytkownicy muszą odwiedzić jeszcze jedną stronę (z potencjalnymi upsellami). Jest to doskonały przykład tego, jak projekt witryny może spełniać jasne cele biznesowe.
Większość nowoczesnych witryn e-commerce usunęło przycisk "Kup teraz" z wyników wyszukiwania, chociaż niektóre placówki z cegły i zaprawy nadal je mają.
2. Skup się na użytkownikach na drugim miejscu
Mając jasno określone cele, będziesz musiał zdefiniować i ustalić priorytety użytkowników . Bądź tak konkretny, jak to możliwe. Oto kilka przykładów pytań, które należy zadać:
- Rozpad mężczyzn i kobiet?
- Poziom edukacji?
- Lokalizacje w kraju?
- Powiązane hobby?
- Wspornik dochodów?
- Kto prowadzi zakupy produktów dziecięcych? Dzieci? Rodzice? Dziadkowie?
Najważniejsze jest to, że projektanci powinni być świadomi użytkowników, aby mogli zagwarantować, że ich projekty nie blokują kluczowych ścieżek użytkowania.
3. Projektowanie emocji
Upewnij się, że rozumiesz, jakie emocje powinna marka zinterpretować. Burza mózgów. Zadawać pytania. Uzyskaj zgodę. I co najważniejsze, skup się na tych emocjach, gdy zwracasz się do swoich klientów. Nigdy nie pytaj, czy Twój klient "lubi" projekt. Kiedy dostarczasz projekty, powinieneś zadać pytania typu "Które z nich sprawia, że czujesz się najbardziej profesjonalny?" Lub "Kiedy porównasz te dwa projekty, zobaczysz, że ten jest bardziej nowoczesny, a ten jest bardziej dynamiczny. To były zarówno emocje, które były dla ciebie ważne, skoro widzisz je wizualnie, co według Ciebie jest najważniejszą emocją, którą możesz zaprezentować swojej grupie docelowej? "
Które z tych organizacji są zabawne? Odprężający? Innowacyjne? Zajęty? Real? (Projekty @JessicaShiner i Christine Mark)
4. Postępuj zgodnie z zasadami projektowania wizualnego
Istnieje wiele małych elementów, które użytkownicy serwisu świadomie i podświadomie wykorzystują do decydowania, czy chcą zaufać stronie. Najważniejsze to:
- Przycinanie: wybieranie zdjęć to tylko połowa sukcesu, a przycinanie zdjęć tworzy lub łamie układ strony.
- Negatywna przestrzeń: zwracanie uwagi na marginesy, wypełnienie i wysokość linii to różnica między wyglądem przypominającym New York Times a biuletynem szkół średnich.
- Czcionki: wszyscy uwielbiają wybierać czcionki, ale świetny projektant potrafi szybko rozpoznać profesjonalną czcionkę i ma ograniczenia, aby utrzymywać liczbę czcionek na stronie do 1-2 (nie licząc logo, które często jest własną czcionką).
- Kolory: kolory są jedną z najtrudniejszych rzeczy, które projektanci mogą efektywnie wykorzystać. Jest tak wiele reguł, aby wybrać dobrą paletę kolorów, a jednocześnie kuszące jest korzystanie z Internetu generatory palet kolorów , spędź czas na projektowaniu własnej palety kolorów.
- Układ: twórz dobry "przepływ" strony wizualnej, aby oczy użytkownika trafiały tam, gdzie chcesz, aby pojawiały się na stronie bez innych elementów wizualnie zaciemniających twoje cele.
5. Twórz przejrzystą, wizualną hierarchię
Odwiedzający stronę internetową. Oni nie czytają. Chwyć ich uwagę i przekaż im najważniejsze informacje z jasno określoną, dobrze przemyślaną hierarchią wizualną . Przemyślany projekt - strona> strona> sekcja - prowadzi użytkownika przez stronę tak, jak chcesz. Użytkownicy powinni mieć możliwość spojrzenia na swoją stronę i zrozumienia jej w ułamku sekundy.
Spójrz na następujący przykład artykułu i zauważ, jak trudno jest twojemu oku powiedzieć, o czym jest strona lub gdzie zaczyna się artykuł!
Poniżej znajduje się makieta, którą stworzyłem, zmieniając około tuzina linii CSS, aby uzyskać jaśniejszą hierarchię wizualną na tej stronie w następujący sposób:
- Tytuł artykułu powinien być najbardziej widocznym elementem na stronie. Jest to obecnie mniejszy rozmiar czcionki niż nagłówek w dalszej części strony! Dlatego zwiększyłem rozmiar tytułu artykułu i zmniejszyłem rozmiar nagłówków.
- Nagłówek w dalszej części strony również został odłączony od treści, do której był skierowany wizualnie, więc również zaostrzyłem odstępy pod nagłówkiem, pozostawiając miejsce nad nagłówkiem, aby poinformować użytkowników, że jest to nagłówek akapitu poniżej. .
- Przesunąłem też obrazek po prawej stronie tytułu zamiast po lewej, aby użytkownik skanował po lewej stronie strony, aby zorientować się, że tytuł artykułu znajduje się w ich wizji.
- Usunąłem klasy granicy i tła z niebieskiego blurbu, aby nie konkurować z nagłówkiem i usunąć górny margines. Była już klasa, która sprawiała, że była szara, co w tym przypadku działa dobrze.
- Usunąłem także rozpraszający tekst i obraz, który podkreśla, że jest to artykuł przedrukowy, a także niektóre puste akapity i
tagi.
Celowo zostawiłem wszystkie reklamy tak, jak zostały pierwotnie zakodowane, zakładając, że jest to istotna część tej strony.
6. Bądź konsekwentny
Nie mylcie swoich użytkowników. Linki powinny być spójne i wyraźne. Jeśli zdecydujesz się używać ikon, zdjęć i ilustracji, upewnij się, że wyglądają i czują się jak spójny zestaw. Niespójności rozproszą Twojego użytkownika i zasłonią Twoją wiadomość. Nie używaj więcej niż 3 czcionki - najlepiej, jeśli wszystkie należą do tej samej rodziny. Ogranicz się do 5-6 kolorów (Uwaga: logo może być inną czcionką, a często powinno być).
7. Łamać zasady (jeśli to konieczne)
Jeśli jest coś wyjątkowego lub ważnego , co musisz podkreślić, może być konieczne "złamanie zasad". Możesz użyć jednego lub dwóch kontrastujących kolorów, aby element wyróżnił się. Na przykład na poniższej brytyjskiej stronie internetowej podkreślono stawkę podatku, dzięki czemu jest to większy element z pop kolorowym.
Kiedy ludzie odwiedzają stronę informacyjną o VAT, projektanci GOV.UK upewnili się, że informacje, których większość ludzi potrzebuje, to front i centrum.
8. Nie nadużywaj sztuczek
Rozwijaj swój projekt, ale upewnij się, że te elementy wspierają to, co chcesz osiągnąć w witrynie. Na przykład Inze strona jest piękna i wygląda świetnie na komórce, ale kiedy ją odwiedziłem na moim komputerze, zagubiłem się. Okazuje się, że nawigacja jest ukryta, dopóki nie zaczniesz przewijać, co niestety przykuło moją uwagę do dolnej części strony. W rezultacie nie zauważyłem nawet subtelnej nawigacji pojawiającej się na górze. Przeszedłem większość drogi na dół, zanim zdałem sobie sprawę, że nawigacja na górze była (ostatecznie). "Ukryta" nawigacja to zgrabny efekt, ale "projekt" uniemożliwił mi wykonanie pożądanego działania. W końcu przekazuje mylący, niechlujny wizerunek marki.
Porównaj Inze z tym, co dzieje się tutaj w tym artykule Web Designer Depot po przewinięciu łącza na komputerze stacjonarnym. Mamy fajny efekt, ale nie tworzy on "bariery" dla użytkowników w celu uzyskania sztuczek. To także degraduje się z wdziękiem, aby nie zepsuł się w przeglądarkach mobilnych lub starszych.
9. Test. Zmierzyć. Ulepszać
Strony internetowe ewoluują. Zaprojektuj dla elastyczności i zdolności adaptacyjnych. Zbieranie i analizowanie bieżących danych testowych będzie prowadzić do ciągłych ulepszeń. Pamiętaj, wszystko zależy od stworzenia projektu, który spełni Twoje cele.
Starannie mierząc wyniki mniejszych zmian w projekcie na pierwotnej stronie docelowej (po lewej) pojawił się nowy projekt (po prawej), który zwiększył procent rejestracji o 60%!
Zapamiętaj
Efektywny projekt graficzny musi emocjonalnie połączyć użytkownika z marką, a jednocześnie sprawić, by robili to, co chcesz. Można to zrobić.
Czy zgadzasz się z tymi zasadami projektowania? Czy mógłbyś dodać więcej? Daj nam znać swoje poglądy w komentarzach.
Wyróżniony obraz / miniatura, obraz emocji przez Shutterstock.