Użyteczność i narzędzie, a nie projekt wizualny, decydują o sukcesie lub porażce witryny. Ponieważ odwiedzający stronę jest jedyną osobą, która klika myszą i dlatego decyduje o wszystkim, projektowanie zorientowane na użytkownika stało się standardowym podejściem do udanego i nastawionego na zysk projektowania stron internetowych. W końcu, jeśli użytkownicy nie mogą korzystać z funkcji, równie dobrze mogą nie istnieć.

Nie będziemy omawiać szczegółów implementacji projektu (np. Gdzie pole wyszukiwania powinno zostać umieszczone), tak jak zostało to już zrobione w wielu artykułach; zamiast tego skupiamy się na głównych zasadach, heurystykach i podejściach do efektywnego projektowania stron internetowych – podejścia, które właściwie stosowane, mogą prowadzić do bardziej wyrafinowanych decyzji projektowych i uprościć proces postrzegania prezentowanych informacji.

Zasady dobrego projektowania stron internetowych i efektywne wytyczne dotyczące projektowania stron internetowych

Aby właściwie korzystać z zasad, musimy najpierw zrozumieć, w jaki sposób użytkownicy wchodzą w interakcję ze stronami internetowymi, jak myślą i jakie są podstawowe wzorce zachowań użytkowników.
Jak myślą użytkownicy?

Zasadniczo nawyki użytkowników w sieci nie różnią się od nawyków klientów w sklepie. Odwiedzający przeglądają każdą nową stronę, skanują część tekstu i klikają na pierwszy link, który przyciąga ich zainteresowanie lub niejasno przypomina to, czego szukają. W rzeczywistości są duże części strony, na które nawet nie patrzą.

Większość użytkowników szuka czegoś interesującego (lub użytecznego) i klikalnego; jak tylko znajdą się obiecujący kandydaci, użytkownicy klikają. Jeśli nowa strona nie spełnia oczekiwań użytkowników, kliknięty zostaje przycisk Wstecz i proces wyszukiwania jest kontynuowany.

Użytkownicy doceniają jakość i wiarygodność. Jeśli strona zapewnia użytkownikom wysokiej jakości treści, chętnie narażają zawartość na reklamy i projekt witryny. To jest powód, dla którego nie tak dobrze zaprojektowane strony internetowe o wysokiej jakości treści od lat zyskują duży ruch. Treść jest ważniejsza niż projekt, który ją obsługuje.
Użytkownicy nie czytają, skanują. Analizując stronę internetową, użytkownicy szukają pewnych stałych punktów lub kotwic, które poprowadzą ich przez zawartość strony.

Użytkownicy sieci są niecierpliwi i nalegają na natychmiastowe zadowolenie. Bardzo prosta zasada: jeśli strona internetowa nie jest w stanie spełnić oczekiwań użytkowników, projektantowi nie udało się prawidłowo wykonać swojej pracy, a firma traci pieniądze. Im wyższy jest ładunek poznawczy, a nawigacja jest mniej intuicyjna, tym chętniej użytkownicy opuszczają witrynę i szukają alternatyw.

Użytkownicy nie dokonują optymalnych wyborów. Użytkownicy nie szukają najszybszego sposobu znalezienia poszukiwanych informacji. Nie skanują strony internetowej w sposób liniowy, przechodząc kolejno od jednej sekcji witryny do drugiej. Zamiast tego zadowoleni są użytkownicy; wybierają pierwszą rozsądną opcję. Gdy tylko znajdą link, który wydaje się prowadzić do celu, istnieje duża szansa, że ​​zostanie natychmiast kliknięty. Optymalizacja jest trudna i zajmuje dużo czasu. Satisficing jest bardziej wydajny.

Użytkownicy podążają za intuicją. W większości przypadków użytkownicy mdleją, zamiast czytać informacje dostarczone przez projektanta. Według Steve’a Kruga podstawowym powodem jest to, że użytkownicy nie dbają o to. „Jeśli znajdziemy coś, co działa, trzymamy się go. Nie ma dla nas znaczenia, jeśli rozumiemy, jak działają rzeczy, o ile możemy z nich korzystać. Jeśli twoi odbiorcy będą zachowywać się tak, jakbyś projektował billboardy, zaprojektuj wspaniałe billboardy. ” Użytkownicy chcą mieć kontrolę. Użytkownicy chcą mieć możliwość kontrolowania swojej przeglądarki i polegać na spójnej prezentacji danych w całej witrynie. Na przykład. nie chcą, aby nowe okna pojawiały się niespodziewanie i chcą być w stanie wrócić z przyciskiem „Wstecz” do witryny, w której byli wcześniej: dlatego dobrą praktyką jest nigdy nie otwierać linków w nowych oknach przeglądarki.

Nie zmuszaj użytkowników do myślenia

Zgodnie z pierwszym prawem Kruga dotyczącym użyteczności strona internetowa powinna być oczywista i zrozumiała. Podczas tworzenia witryny Twoim zadaniem jest pozbycie się znaków zapytania – decyzji, które użytkownicy muszą podejmować świadomie, biorąc pod uwagę zalety, wady i alternatywy.

Jeśli nawigacja i architektura witryny nie są intuicyjne, liczba znaków zapytania rośnie i utrudnia użytkownikom zrozumienie działania systemu oraz sposobu przejścia z punktu A do punktu B. Wyraźna struktura, umiarkowane wskazówki wizualne i łatwo rozpoznawalne linki mogą pomóc użytkownikom znaleźć drogę do celu.

Spójrzmy na przykład. Beyondis.co.uk twierdzi, że jest „poza kanałami, poza produktami, poza dystrybucją”. Co to znaczy? Ponieważ użytkownicy mają tendencję do eksplorowania stron internetowych zgodnie ze wzorcem „F”, te trzy instrukcje byłyby pierwszymi elementami, które użytkownicy zobaczą na stronie po załadowaniu.

Chociaż sam projekt jest prosty i intuicyjny, aby zrozumieć, na czym polega strona, użytkownik musi znaleźć odpowiedź. Oto, co jest niepotrzebnym znakiem zapytania. Zadaniem projektanta jest upewnienie się, że liczba znaków zapytania jest bliska 0. Wyjaśnienie wizualne znajduje się po prawej stronie. Już sama wymiana obu bloków zwiększyłaby użyteczność.

Wytyczne dotyczące projektowania stron internetowych

ExpressionEngine używa tej samej struktury, co Beyondis, ale unika niepotrzebnych znaków zapytania. Ponadto hasło staje się funkcjonalne, ponieważ użytkownicy otrzymują opcje wypróbowania usługi i pobrania bezpłatnej wersji.

Zmniejszając obciążenie poznawcze, ułatwiasz odwiedzającym zrozumienie idei systemu. Po osiągnięciu tego celu możesz poinformować, dlaczego system jest przydatny i jak użytkownicy mogą z niego korzystać. Ludzie nie będą korzystać z Twojej strony internetowej, jeśli nie będą w stanie jej znaleźć.

Nie marnuj cierpliwości użytkowników

W każdym projekcie, gdy zamierzasz zaoferować swoim gościom jakąś usługę lub narzędzie, staraj się minimalizować wymagania użytkowników. Im mniej działań wymaga się od użytkowników, aby przetestować usługę, tym bardziej prawdopodobne jest, że przypadkowy użytkownik będzie go wypróbować. Odwiedzający po raz pierwszy chętnie korzystają z usługi, nie wypełniając długich formularzy internetowych dla konta, którego nigdy nie będą mogli używać w przyszłości. Pozwól użytkownikom eksplorować witrynę i odkryć swoje usługi bez zmuszania ich do udostępniania prywatnych danych. Nie jest uzasadnione zmuszanie użytkowników do wprowadzania adresu e-mail w celu przetestowania funkcji.

Gdy Ryan Singer – twórca zespołu 37Signals – twierdzi, użytkownicy prawdopodobnie chętnie podadzą adres e-mail, jeśli zostaną o to poproszeni po obejrzeniu dzieła, więc mieli pewne pojęcie o tym, co otrzymają w zamian.

Stikkit jest doskonałym przykładem przyjaznej dla użytkownika usługi, która nie wymaga prawie nic od gościa, który jest dyskretny i pocieszający. I to właśnie chcesz, aby Twoi użytkownicy czuli się na Twojej stronie.

Najwyraźniej Mite wymaga więcej. Jednak rejestracja może zostać wykonana w mniej niż 30 sekund – ponieważ formularz ma orientację poziomą, użytkownik nie musi nawet przewijać strony.

Najlepiej usunąć wszystkie bariery, nie wymagaj najpierw subskrypcji ani rejestracji. Tylko rejestracja użytkownika stanowi przeszkodę w nawigacji użytkownika w celu ograniczenia ruchu przychodzącego.

Zarządzaj, aby skupić uwagę użytkowników

Ponieważ strony internetowe zapewniają zarówno statyczną, jak i dynamiczną zawartość, niektóre aspekty interfejsu użytkownika przyciągają uwagę bardziej niż inne. Oczywiście obrazy są bardziej przyciągające wzrok niż tekst – tak jak zdania oznaczone jako pogrubione są bardziej atrakcyjne niż zwykły tekst.

Humanizowane doskonale wykorzystuje zasadę skupienia. Jedynym elementem, który jest bezpośrednio widoczny dla użytkowników, jest słowo „wolny”, które działa atrakcyjnie i pociągająco, ale wciąż spokojne i czysto informacyjne. Subtelne wskazówki dostarczają użytkownikom wystarczających informacji, jak znaleźć więcej informacji o „darmowym” produkcie.

Skupienie uwagi użytkowników na określonych obszarach witryny przy umiarkowanym wykorzystaniu elementów wizualnych może pomóc odwiedzającym przejść z punktu A do punktu B bez zastanawiania się, jak to faktycznie ma być zrobione. Im mniej znaków zapytania mają goście, tym lepsze jest ich poczucie orientacji i im więcej zaufania mogą rozwijać w stosunku do firmy, którą reprezentuje strona. Innymi słowy: im mniej myśli musi się wydarzyć za kulisami, tym lepsze jest doświadczenie użytkownika, które jest celem użyteczności.

Dąż do ekspozycji funkcji

Nowoczesne projekty stron internetowych są zazwyczaj krytykowane ze względu na ich podejście polegające na kierowaniu użytkowników atrakcyjnymi wizualnie krokami 1-2-3, dużymi przyciskami z efektami wizualnymi itp. Ale z perspektywy projektowania te elementy nie są wcale złe. Wręcz przeciwnie, takie wytyczne są niezwykle skuteczne, ponieważ prowadzą użytkowników przez zawartość strony w bardzo prosty i przyjazny dla użytkownika sposób.

Luźny
Połącz swój zespół ze Slackiem, centrum współpracy do pracy.
Ucz się więcej

Ludzkie oko jest urządzeniem wysoce nieliniowym, a użytkownicy sieci mogą natychmiast rozpoznawać krawędzie, wzory i ruchy. Dlatego reklamy wideo są bardzo denerwujące i rozpraszające, ale z perspektywy marketingowej doskonale wykonują zadanie przyciągnięcia uwagi użytkowników.

Enso

Humanizowane doskonale wykorzystuje zasadę skupienia. Jedynym elementem, który jest bezpośrednio widoczny dla użytkowników, jest słowo „wolny”, które działa atrakcyjnie i pociągająco, ale wciąż spokojne i czysto informacyjne. Subtelne wskazówki dostarczają użytkownikom wystarczających informacji, jak znaleźć więcej informacji o „darmowym” produkcie.

Skupienie uwagi użytkowników na określonych obszarach witryny przy umiarkowanym wykorzystaniu elementów wizualnych może pomóc odwiedzającym przejść z punktu A do punktu B bez zastanawiania się, jak to faktycznie ma być zrobione. Im mniej znaków zapytania mają goście, tym lepsze jest ich poczucie orientacji i im więcej zaufania mogą rozwijać w stosunku do firmy, którą reprezentuje strona. Innymi słowy: im mniej myśli musi się wydarzyć za kulisami, tym lepsze jest doświadczenie użytkownika, które jest celem użyteczności.

Dąż do ekspozycji funkcji

Nowoczesne projekty stron internetowych są zazwyczaj krytykowane ze względu na ich podejście polegające na kierowaniu użytkowników atrakcyjnymi wizualnie krokami 1-2-3, dużymi przyciskami z efektami wizualnymi itp. Ale z perspektywy projektowania te elementy nie są wcale złe. Wręcz przeciwnie, takie wytyczne są niezwykle skuteczne, ponieważ prowadzą użytkowników przez zawartość strony w bardzo prosty i przyjazny dla użytkownika sposób.

Zrzut ekranu

Dibusoft łączy atrakcyjność wizualną z przejrzystą strukturą strony. Strona zawiera 9 głównych opcji nawigacji, które są widoczne na pierwszy rzut oka. Wybór kolorów może być jednak zbyt jasny.

Umożliwienie użytkownikowi wyraźnego sprawdzenia dostępnych funkcji jest podstawową zasadą udanego projektowania interfejsu użytkownika. Nie ma znaczenia, jak to się osiągnie. Liczy się to, że treść jest dobrze zrozumiana, a odwiedzający czują się komfortowo w sposobie interakcji z systemem.

Korzystaj ze skutecznego pisania

Ponieważ sieć różni się od druku, konieczne jest dostosowanie stylu pisania do preferencji użytkowników i zwyczajów przeglądania. Pismo promocyjne nie będzie czytane. Długie bloki tekstu bez obrazów i słów kluczowych zaznaczonych pogrubieniem lub kursywą zostaną pominięte. Przesadny język zostanie zignorowany.

Rozmowy biznesowe. Unikaj słodkich lub sprytnych nazw, nazw marketingowych, nazw firmowych i nieznanych nazw technicznych. Na przykład, jeśli opisujesz usługę i chcesz, aby użytkownicy utworzyli konto, „zarejestruj się” jest lepsze niż „zacznij teraz!”, Co jest lepsze niż „eksploruj nasze usługi”.

Optymalnym rozwiązaniem dla skutecznego pisania jest


używaj krótkich i zwięzłych zwrotów (dojdź do sedna tak szybko, jak to możliwe),
użyj skanowalnego układu (kategoryzuj zawartość, użyj wielu poziomów nagłówków, użyj elementów wizualnych i list punktowanych, które przerywają przepływ jednolitych bloków tekstu),
używaj prostego i obiektywnego języka (promocja nie musi brzmieć jak reklama; daj swoim użytkownikom uzasadniony i obiektywny powód, dla którego powinni korzystać z Twojej usługi lub pozostać na swojej stronie internetowej)

Dąż do prostoty

Zasada „zachowaj to proste” (KIS) powinna być głównym celem projektowania witryny. Użytkownicy rzadko korzystają z projektu; ponadto w większości przypadków szukają informacji pomimo projektu. Dąż do prostoty zamiast złożoności.

Z punktu widzenia odwiedzających najlepszy projekt strony jest czystym tekstem, bez reklam ani dalszych bloków treści pasujących dokładnie do użytych przez użytkowników zapytań lub treści, których szukali. Jest to jeden z powodów, dla których przyjazna dla użytkownika wersja stron internetowych jest niezbędna dla dobrego doświadczenia użytkownika.

Finch wyraźnie przedstawia informacje o stronie i daje odwiedzającym wybór opcji bez przepełniania ich niepotrzebnymi treściami.

Nie bój się białej przestrzeni

Właściwie to naprawdę trudno przecenić znaczenie białej przestrzeni. Pomaga to nie tylko zmniejszyć obciążenie poznawcze odwiedzających, ale także pozwala dostrzec informacje prezentowane na ekranie. Gdy nowy użytkownik zbliża się do układu projektu, pierwszą rzeczą, którą próbuje zrobić, jest zeskanowanie strony i podzielenie obszaru treści na strawne fragmenty informacji.

Złożone struktury są trudniejsze do odczytania, skanowania, analizy i pracy. Jeśli masz wybór między oddzieleniem dwóch segmentów projektu widoczną linią lub białymi znakami, zazwyczaj lepiej jest użyć rozwiązania z białymi znakami. Hierarchiczne struktury zmniejszają złożoność (prawo Simona): im lepiej uda ci się zapewnić użytkownikom poczucie wizualnej hierarchii, tym łatwiej będzie postrzegać treść.

Biała przestrzeń jest dobra. Cameron.io używa białej przestrzeni jako podstawowego elementu projektu. Rezultatem jest dobrze skanowalny układ, który nadaje treści dominującą pozycję, na jaką zasługuje.

Skuteczna komunikacja za pomocą „widocznego języka”

W swoich artykułach dotyczących skutecznej komunikacji wizualnej Aaron Marcus określa trzy podstawowe zasady związane z użyciem tak zwanego „języka widocznego” – treści, które użytkownicy widzą na ekranie.

Organizuj: zapewnia użytkownikowi przejrzystą i spójną strukturę koncepcyjną. Spójność, układ ekranu, relacje i żeglowność to ważne koncepcje organizacji. Te same konwencje i zasady powinny być stosowane do wszystkich elementów.
Oszczędź: zrób najwięcej z najmniejszą ilością wskazówek i elementów wizualnych. Cztery główne punkty do rozważenia: prostota, jasność, odrębność i nacisk. Prostota obejmuje tylko te elementy, które są najważniejsze dla komunikacji. Przejrzystość: wszystkie elementy powinny być zaprojektowane tak, aby ich znaczenie nie było dwuznaczne. Charakterystyczność: ważne właściwości niezbędnych elementów powinny być rozróżnialne. Nacisk: najważniejsze elementy powinny być łatwo postrzegane.
Komunikuj: dopasuj prezentację do możliwości użytkownika. Interfejs użytkownika musi utrzymywać równowagę w czytelności, czytelności, typografii, symbolice, wielu widokach, kolorze lub teksturze, aby skutecznie komunikować się. Użyj max. 3 kroje w maksymalnie 3 punktach - maksymalnie 18 słów lub 50-80 znaków na wiersz tekstu.

Konwencje są naszymi przyjaciółmi

Konwencjonalny projekt elementów strony nie prowadzi do nudnej strony internetowej. W rzeczywistości konwencje są bardzo przydatne, ponieważ zmniejszają krzywą uczenia się, potrzebę określenia, jak to działa. Na przykład byłby koszmar użyteczności, gdyby wszystkie strony internetowe miały inną wizualną prezentację kanałów RSS. To nie tak różni się od naszego zwykłego życia, w którym zazwyczaj przyzwyczajamy się do podstawowych zasad organizowania danych (folderów) lub robienia zakupów (umieszczanie produktów).

Dzięki konwencjom możesz zyskać pewność siebie, zaufanie, niezawodność i udowodnić swoją wiarygodność. Śledź oczekiwania użytkowników – zrozum, czego oczekują od nawigacji w witrynie, struktury tekstu, miejsca wyszukiwania itp.

Typowym przykładem sesji usability jest tłumaczenie strony w języku japońskim (zakładając, że użytkownicy Internetu nie znają japońskiego, np. Babelfish) i dostarczają testerom użyteczności zadanie znalezienia czegoś na stronie innego języka. Jeśli konwencje będą dobrze stosowane, użytkownicy będą mogli osiągnąć cel niezbyt konkretny, nawet jeśli nie będą w stanie tego zrozumieć.

Steve Krug sugeruje, że lepiej jest wprowadzać innowacje tylko wtedy, gdy wiesz, że naprawdę masz lepszy pomysł, ale korzystaj z konwencji, gdy tego nie robisz.

Testuj wcześnie, testuj często

Ta tak zwana zasada TETO powinna być stosowana do każdego projektu strony internetowej, ponieważ testy użyteczności często dostarczają istotnych informacji na temat znaczenia problemy i problemy związane z danym układem.

Przetestuj nie za późno, nie za mało i nie z niewłaściwych powodów. W tym drugim przypadku konieczne jest zrozumienie, że większość decyzji projektowych ma charakter lokalny; oznacza to, że nie można powszechnie odpowiedzieć, czy dany układ jest lepszy niż drugi, ponieważ trzeba go przeanalizować z bardzo konkretnego punktu widzenia (biorąc pod uwagę wymagania, interesariuszy, budżet itp.).

Kilka ważnych punktów, o których należy pamiętać:

Według Steve’a Kruga testowanie jednego użytkownika jest w 100% lepsze niż testowanie go, a testowanie jednego użytkownika na początku projektu jest lepsze niż testowanie 50 pod koniec. Zgodnie z pierwszym prawem Boehm, błędy są najczęstsze podczas wymagań i działań projektowych i są tym droższe, im później są usuwane. testowanie jest procesem iteracyjnym. Oznacza to, że coś projektujesz, testujesz, naprawiasz, a następnie testujesz ponownie. Mogą wystąpić problemy, które nie zostały wykryte w pierwszej rundzie, ponieważ użytkownicy byli praktycznie zablokowani przez inne problemy. testy użyteczności zawsze dają użyteczne wyniki. Albo zwrócisz uwagę na problemy, które masz, albo zwrócisz uwagę na brak poważnych wad projektowych, co w obu przypadkach jest użytecznym wglądem w projekt. zgodnie z prawem Weinberg, deweloper nie nadaje się do testowania swojego kodu. Dotyczy to również projektantów. Po kilku tygodniach pracy nad witryną nie możesz już obserwować jej z nowej perspektywy. Wiesz, jak to jest zbudowane i dlatego dokładnie wiesz, jak to działa – masz mądrość niezależnych testerów i użytkowników Twojej witryny, których nie mieliby.