Kreatywność z użytecznością
Jeśli chodzi o projektowanie naprawdę intuicyjnej, responsywnej i spójnej strony internetowej, która jest również wyjątkowa i interesująca, często wydaje się, że trudno jest pogodzić dwa zestawy priorytetów. Ale w rzeczywistości nic nie jest dalsze od prawdy: istnieje tylko kilka podstawowych idei, które należy zastosować, aby łatwo dokonać najlepszego wyboru w twoich projektach.
Najistotniejsze z tych koncepcji jest to, że piękne, użyteczne projekty nie są trudne do wykonania, gdy UX ma pierwszeństwo, a projekt jest dostosowany do tego. Wszakże natura doświadczenia użytkownika dyktuje, że istnieją pewne sztywne reguły, podczas gdy projekt jest prawie nieskończenie elastyczny. Kiedy nauczysz się sposobów i środków, dzięki którym powinieneś dostosować swoje projekty, powinieneś być na najlepszej drodze do przekształcenia walki w traktat pokojowy.
Przewiduj błąd użytkownika; zmniejszyć irytację użytkownika
Zawsze zastanawiaj się, co może się stać, jeśli użytkownik zboczy z Twojej strony. Komunikaty o błędach nie powinny być ukryte w żargonie technicznym, ale raczej powinny wyjaśnić, na czym polega problem, oraz, w stosownych przypadkach, gdzie powinny się udać, aby uzyskać pomoc. Zrównuj te rozważania z tym, co można poprawić na końcu. Niezależnie od tego, jak piękna może być strona, jeśli ładowanie jej trwa zbyt długo, nie jest to warte wysiłku. Eksperci twierdzą, że jeśli załadowanie strony trwa ponad 3 sekundy, należy ją uprościć.
Utrzymuj formy tak krótkie i niezmieniające, jak to możliwe; jeśli informacje nie są potrzebne, nie pytaj o to. Jeśli jeszcze tego nie zrobiłeś, rozważ opcjonalne logowanie przez Facebooka lub Twittera; Witryny oferujące takie usługi często uzyskują wzrost współczynników konwersji, ponieważ użytkownik uważa, że jest to wygodniejsze, a zatem jest bardziej prawdopodobne, że poświęci czas na zarejestrowanie się. Ponadto upewnij się, że reszta witryny ma zintegrowaną obecność w mediach społecznościowych, która nie jest w konflikcie z projektem lub go przytłacza, ale jest również łatwa do zidentyfikowania, np. Pracuj w Play stronie internetowej. Małe dodatki, takie jak te, składają się na kumulatywne usprawnienie działania użytkownika.
W tym celu należy pamiętać o kilku standardach, które powinny być dość spójne dla każdego typu witryny.
Utrzymuj standardy internetowe
Niektóre typowe elementy witryny, takie jak linki stopki lub pasek wyszukiwania, mogą aktywnie cierpieć z powodu nadmiernej kreatywności. Chociaż w wielu z tych elementów jest miejsce na oryginalność, ważne jest, aby zachować je w mniej więcej takiej samej formie, jaką widzisz na każdej innej stronie, ponieważ są one na tyle wszechobecne, że użytkownicy mogą oczekiwać, że będą prezentowani w określony sposób. . Postępuj zgodnie z tymi wytycznymi:
- Upewnij się, że klikalne obszary są natychmiast identyfikowalne (np. Linki włączone) ta strona ) i są wystarczająco duże, aby łatwo aktywować;
- Rozbijaj bloki tekstu za pomocą obrazów i innej stymulacji wizualnej;
- Posługiwać się bułka tarta gdy dotyczy;
- Staraj się unikać rozprzestrzeniania tego samego artykułu lub wyszukiwania produktu na wielu stronach;
- Twórz informacje kontaktowe, często zadawane pytania, pasek wyszukiwania i inne standardowe funkcje łatwe do znalezienia i wykorzystania.
Mimo że Grip Limited strona internetowa jest przyciągająca wzrok i ekscytująca, jest też niesamowicie myląca. Chociaż istnieje wyjaśnienie, w jaki sposób przeciągnąć kolumny, aby odsłonić zawartość, jest ona zagubiona w zbieraninie innej typografii. Tradycyjne menu jest dostępne, ale tylko wtedy, gdy śledzisz maleńkie menu rozwijane. To taki fajny projekt strony, że niektórzy użytkownicy nie dbają o to, jak trudno jest z nich korzystać, ale wielu innych byłoby zniechęconych. Ale jeśli strona uwzględniłaby powyższe sugestie w swoim projekcie, mogłaby utrzymać swój czynnik chłodny i zapewnić dobry UX.
Na przykład, chociaż Komiksowa soda inne elementy projektu strony internetowej dość rozpraszają, użytkownik wciąż może łatwo znaleźć pasek wyszukiwania; to znakowanie i pozycja jest wystarczająco jasna, aby zminimalizować zamieszanie. Te małe przesłania do zamieszania użytkownika są tym, co robi różnicę.
Gdzie narysować linię
Istnieją inne reguły UX, które można zginać, ale nie łamać. Ale w którym momencie projektant posuwa się za daleko? Elementy nawigacyjne są dobrym przykładem do pracy, ponieważ każda strona ma jakąś formę. Zwykle są one zorganizowane na jeden z dwóch sposobów:
- Poziomo u góry strony; pozwala to na przestronne spojrzenie na krótkie listy;
- Pionowo po lewej stronie strony; ten układ może pomieścić dłuższe listy.
Są jednak inne style i systemy nawigacji, które mogą działać, jeśli są używane ostrożnie i starannie. Na przykład, ta strona portfolio ma listę nawigacyjną, która zajmuje większość strony, a każde słowo jest częściowo zasłonięte. Ponadto elementy nie pozostają w bezruchu; opuszczają i oddzielają się, aby wyświetlić zawartość każdej sekcji. Wszystkie te kwiaty mogły się połączyć, tworząc chaotyczny system, który szybko zniechęciłby użytkownika. Jednak konstrukcja nie stwarza problemów dzięki temu, że jest tak prosta; słowa są nadal czytelne; listy rozwijane zawierają tak małą ilość informacji, że reszta listy nawigacji nie grozi jej zagubieniem. Podsumowując, jest to odważnie inny system, który wąsko unika problemów.
Po drugiej stronie linii jest pojęcie, które zostało określone jako tajemnicza nawigacja mięsa, w którym względy estetyczne projektu całkowicie przytłaczają użyteczność. W przypadku Strona FlatPak, nawigacja musi zostać przeniesiona, aby przeczytać, o czym jest mowa; straszna funkcja użyteczności, która nigdy nie powinna być emulowana.
Znajomość a funkcjonalność
Pod wieloma względami prawdziwa bitwa współczesnego projektowania stron internetowych wydaje się znajdować między nowymi pomysłami, które powodują mniej intuicyjną interakcję, a starymi praktykami, które mogą nie być najlepszym rozwiązaniem, ale są tym, do czego są przyzwyczajeni. Przykład tego problemu często pojawia się, gdy rozważa się skosomorficzne projektowanie; który jest stylem, który imituje poprzednika elementu, który został wykonany w innym medium.
Ten rodzaj projektowania dzieje się przez cały czas w Internecie, od kalkulatora, który wygląda i funkcjonuje jak jego prawdziwy odpowiednik, po przyciski na stronie internetowej, które mają realistyczny efekt cienia i efektu cieniowania. Ma to sens w pewnym momencie, ponieważ znajomość tych projektów sprawia, że użytkownicy czują się natychmiast komfortowo z ich używania. Jednak niekoniecznie są najlepszym rozwiązaniem, ponieważ są niewiarygodnie ograniczone.
Zderzenie tych dwóch priorytetów można zilustrować za pomocą realistycznej technologii "przewracania strony" firmy Apple, która służy do odczytu cyfrowego. Jest to ciekawy pomysł, ponieważ sprawia, że odczucia przypominają raczej przekształcanie fizycznych, papierowych stron, co może być dla nich komfortowo znajome. Jednak pomimo tego raczej śmieszne długości firma udała się, aby stworzyć ten efekt, co pogorszyło wrażenia użytkownika. Załadowanie zajmuje nieco więcej czasu, a poruszanie się po stronie jest trudniejszym ruchem, aby wykonać proste naciśnięcie; nieporęczny ruch może wysłać użytkownika w niewłaściwy sposób.
Użyj przezroczystej ścieżki konwersji
Jeśli pracujesz nad złożoną stroną internetową z wieloma ścieżkami nawigacyjnymi, bardzo ważne jest, aby pozwolić użytkownikowi logicznie poruszać się po witrynie i informować ich, gdzie są w mapie witryny jako całości. To tutaj przydają się okruszki i inne urządzenia nawigacyjne. Dziwne purpurowe domyślne linki nie muszą być używane, aby pokazać użytkownikowi, że już odwiedzili; istnieje wiele innych atrakcyjniejszych rozwiązań, które zapewniają ten sam efekt.
Witryny e-commerce to zazwyczaj te, które są ostro krytykowane za źle skonstruowane ścieżki konwersji, ale istnieje wiele świetnych przykładów pięknych, zaprojektowanych zoptymalizowanych pod kątem UX sklepów internetowych. Weźmy na przykład Fruit of the Loom witryna, która ma czysty, przyjazny interfejs, który jest nadal logicznie skonstruowany. Nie jest to nawet wynikiem niestandardowego i skomplikowanego rozwoju backendu; strona została stworzona przy użyciu prostego Oprogramowanie e-commerce Amazon, że każdy mały biznes mógłby skorzystać.
Pomaga w skanowaniu i dodaje zainteresowanie wizualne
Pamiętaj, że ludzie czytają strony internetowe w inny sposób niż media drukowane. Badania śledzenia oczu pokaż, że użytkownicy przeglądają całą stronę (koncentrując się najpierw na treści w lewym górnym rogu), szukając przyciągających wzrok elementów, takich jak nagłówki, cytaty z ciągnięcia lub obrazy. Następnie zagłębiają się w sekcje, które wyglądają interesująco. Ważne jest, aby zaprojektować ten sposób myślenia i upewnić się, że używasz wizualnej hierarchii, która kieruje użytkownika tam, gdzie chcesz, aby był.
The Blog Thrive Solo ma mnóstwo treści, ale zachowuje przestronny, ciekawy wygląd, wykorzystując dużo białej przestrzeni, duże obrazy, ikony i różnorodne kroje pisma. Duże, wyśrodkowane tytuły są szczególnie pomocne przy skanowaniu widzów.
Dolna linia
Podczas gdy estetyka strony tworzy pierwsze wrażenie, ta funkcjonalność daje użytkownikowi trwałe doświadczenie, do którego, mam nadzieję, wrócimy. Nie ma sytuacji, w której nie można byłoby pogodzić kwestii projektowania i funkcjonalności; w rzeczywistości jest to wzajemne oddziaływanie między tymi dwoma priorytetami, które kończy się tworzeniem wszystkich najlepszych, najbardziej zapadających w pamięć witryn w sieci.
Czy kiedykolwiek kompromisujesz użyteczność dla estetyki? Czy projekt może być dobry bez użyteczności? Daj nam znać swoje myśli w komentarzach.
Wyróżniony obraz / miniatura, obraz funkcjonalny przez Shutterstock.