Jak projektować dla sieci Web przy użyciu wzorców projektowych

Wzorce projektowe są podstawą dobrej użyteczności strony internetowej i są elementami, na których zbudowane są strony internetowe. To strategiczna decyzja projektowa, którą projektant stron internetowych podejmuje, aby zapewnić użytkownikom dobre wrażenia. Zadaniem projektanta jest rozwiązywanie typowych problemów użyteczności i tworzenie najbardziej intuicyjnych dla użytkownika rozwiązań, a wzorce tworzą przewidywalne, intuicyjne i zoptymalizowane wrażenia użytkownika. Niezależnie od tego, czy dopiero zaczynasz projektowanie, czy jesteś doświadczonym profesjonalistą, musisz być świadomy typowych wzorców projektowych interfejsu użytkownika i nadążać za ewolucją wzorców.

Przykłady wzorców projektowych

Prawdopodobnie słyszałeś o komponentach; rzeczy takie jak przyciski, pola formularzy, paski wyszukiwania itp. są ich przykładami. Aby z nich skorzystać, możesz je dobrze wykorzystać, tworząc wzory w swoim projekcie.

Należy pamiętać o jednej rzeczy: czasami terminy „komponenty” i „wzorce projektowe” są używane zamiennie. Na potrzeby tego artykułu komponenty to elementy składowe witryny internetowej, a wzorce to ustalone sposoby wykonywania zadań przez użytkowników.

Jak zobaczysz, wzór jest „większy” niż pojedynczy komponent. Wzorce to sposób optymalizacji tego, co zostało zrobione z poszczególnymi komponentami. Istnieje wiele tradycyjnych wzorców projektowych, takich jak:

• Logo, które prowadzi do strony głównej w nagłówku witryny
• Nawigacja Hamburger na stronach mobilnych
• Formularze logowania z linkiem „Resetuj hasło”.
• Breadcrumbs, które pozwalają użytkownikom śledzić ich lokalizację w witrynie
• Wózki z umieszczonymi na nich licznikami przedmiotów

Dlaczego projektanci powinni skupić się na wzorcach projektowych?

Stosowanie wzorców projektowych ma wiele zalet. Nie tylko sprawiają, że Twoja praca jako projektanta jest bardziej wydajna, ale co ważniejsze, wzorce ułatwiają korzystanie użytkownikom.

Wzorce projektowe budują zaufanie

Użytkownicy dokonują szybkich założeń w momencie, gdy pojawiają się na Twojej stronie. W ułamku sekundy decydują, czy warto wejść w interakcję z treścią, czy też powinni znaleźć inną opcję.

Czy Twoja witryna jest łatwa w nawigacji? Czy łatwo jest znaleźć informacje, których szukają Twoi użytkownicy? Nie będą mieli cierpliwości, aby klikać i rozwiązywać problemy. Bardzo ważne jest, aby zrobić dobre pierwsze wrażenie i zdobyć zaufanie użytkowników.

W historii internetu pewne wzorce stały się powszechne. Projektanci polegali na tych ustalonych elementach interfejsu użytkownika przy projektowaniu witryn internetowych, a użytkownicy przyzwyczaili się do oglądania tych wzorców projektowych. Rozpoznają podobieństwa między witrynami i ufają temu, co znajome.

Weźmy przykład ustalonego wzorca projektowego w witrynie eCommerce. Użytkownicy są przyzwyczajeni do oglądania małych podglądów produktów w siatce, a następnie klikania, aby dowiedzieć się więcej o poszczególnych produktach. Używając ustalonych wzorców w swoim projekcie i tworząc łatwe w obsłudze doświadczenie, budujesz zaufanie użytkowników, a ponadto zwiększa się prawdopodobieństwo, że będą oni powracać.

Wzorce projektowe są intuicyjne

Gdy użytkownicy wchodzą w interakcje z Twoją witryną, czynnik przewidywalności staje się bardzo ważny. [twitter_link]Przewidywalne wzorce zapewniają najbardziej intuicyjną obsługę.[/twitter_link] Znajomość wzorców jest kluczowa, ale ważne jest również upewnienie się, że są one konsekwentnie stosowane.

Jeden typowy, przewidywalny przykład wzorca znajduje się na formularzach. W szczególności wszystkie formularze zawierają komunikaty o sprawdzaniu poprawności i błędach. Czy wszystkie formularze w Twojej witrynie robią to konsekwentnie? Czy wszystkie wiadomości są w tym samym miejscu? A co z przyciskiem wysyłania? Czy pojawia się komunikat informujący, że formularz został wysłany?

Z punktu widzenia projektowania, użytkownicy wielokrotnie spotykali się z tymi wzorcami. Zapewnienie sprawdzania poprawności formularza z pomocnymi komunikatami wskazuje użytkownikowi, gdzie występują problemy, a komunikat informujący o wysłaniu formularza jest pomocnym wskaźnikiem, że działanie miało miejsce.

Może wydawać się zdrowym rozsądkiem, gdy słyszysz, że wzorce i przewidywalność są niezbędne do dobrego doświadczenia użytkownika. Jednak nie jest trudno znaleźć witryny, które łamią powszechne wzorce, co może powodować frustrację lub zamieszanie. Mając to na uwadze, projektuj dalej, korzystając z pomocnych wzorców interfejsu użytkownika. Im bardziej użytkownicy je znają, tym bardziej wiedzą, jakiego zachowania się spodziewać. Wzorce i konwencje zapobiegają dezorientacji użytkowników, a trzymanie się wzorców zapewnia przewidywalne wrażenia.

Wzorce projektowe zapewniają wspólny język między projektantami

[twitter_link]Wspaniałe doświadczenia zaczynają się od efektywnego projektu.[/twitter_link]

W wielu przypadkach projektanci pracują w zespole. Pomaga zespołowi pracować wydajniej, gdy istnieją ustalone wzorce projektowe. Nie ma potrzeby wymyślania koła na nowo, jeśli problem został już rozwiązany.

Utrzymywanie wszystkich wzorców w jednym centralnym przewodniku po stylach front-endu to świetne miejsce do przechowywania inwentarza. Jako globalny zasób, jest to szybki przewodnik dla wszystkich członków zespołu, aby zrozumieć przypadek użycia dla każdego wzorca. Nawet jeśli pracujesz w pojedynkę, śledzenie używanych wzorców projektowych pozwoli ci pracować wydajniej i spojrzeć na nie w przyszłości.

Faza planowania

Jest całkiem jasne, dlaczego należy wykorzystywać wzorce projektowe, ale w jaki sposób projektanci stron internetowych faktycznie je wdrażają podczas projektowania dla sieci? Oto kilka wskazówek, które ułatwią proces projektowania.

Użyj tego, co już wiesz, aby rozpocząć

Jeśli planujesz całkowite przeprojektowanie lub „rozszerzenie” witryny, warto sporządzić inwentaryzację i spojrzeć na to, co już wiesz. Kluczem jest znalezienie dobrego punktu wyjścia. Jeśli jest to zupełnie nowy projekt, ważne jest, aby przemyśleć te kwestie i spodziewać się, że niektóre pytania będą na początku nieznane. W tej sytuacji dobrym pierwszym krokiem jest skorzystanie z wcześniejszych doświadczeń projektowych. To wpływa na wstępne decyzje, ponieważ pracowali nad innymi projektami.

Rozpoczęcie badań

Badania są kluczem do solidnych podstaw projektu. Jak doskonale wiesz, użytkownicy zawsze będą szukać najłatwiejszego sposobu wykonania określonej czynności w witrynie. Zrozumienie problemów i zadań pod ręką zapewni, że zaprojektujesz właściwą rzecz. Na początek pomyśl o tych elementach:

• Kim są obecni użytkownicy? (Ich cele, dane demograficzne itp.)
• Czego jeszcze chcesz się dowiedzieć o tych użytkownikach?
• Z jakimi wzorami najczęściej wchodzą w interakcję?
• Czy są jakieś wzorce, z którymi ci użytkownicy mają problemy?
• Jakie ulepszenia można wprowadzić?
• Jakie nowe funkcje są projektowane?
• Czy jakiekolwiek obecnie ustalone wzorce mogą działać?

Faza badań to czas na określenie, co Twoi użytkownicy muszą osiągnąć podczas interakcji z Twoją witryną. Przykładem może być wyszukiwanie treści, zapisanie się do newslettera, dokonanie zakupu itp. W obliczu znajomych elementów użytkownicy będą potrzebować mniej czasu do namysłu i mieć więcej powodów do konwersji. Skoncentruj się na tworzeniu wzorców w sposób, który wydaje się znajomy dla użytkowników, w oparciu o ich dotychczasową wiedzę z tego, czego doświadczają w sieci.

Podczas rozwiązywania problemów projektowych zawsze liczy się czas i budżet, ale należy przeprowadzić jak najwięcej badań. Nadszedł czas, aby odkryć główne problemy użytkowników i przestudiować istniejące wzorce projektowe. Co jest powszechne w sieci? Jakie wzorce z powodzeniem stosowałeś w przeszłości? Po zdefiniowaniu problemów, które należy rozwiązać, przejrzyj witryny z wzorcami ukierunkowanymi na te same cele użytkowników. To posłuży jako dobra inspiracja dla projektu. Nie jest konieczne ich „kopiowanie”, ale warto zanotować, co tam jest.

Do tego momentu zalecałem, abyś był konsekwentny i przewidywalny. Warto wspomnieć, że istniejące wzorce można modyfikować i mogą pojawić się przypadki zrobienia czegoś nowego. Upewnij się tylko, że jeśli wprowadzasz nowy wzorzec, jest on uzasadniony danymi użytkownika i dobrze przetestowany.

Projektowanie dla sieci za pomocą wzorców projektowych

Prototyp i testowanie

Po fazie badawczej nadszedł czas, aby zacząć dobrze wykorzystywać to, czego się nauczyłeś. To tutaj projekt ożywa dzięki prototypowaniu. W zależności od procesu, prototypy mogą być prostymi szkieletami o niskiej wierności lub bardziej złożonymi projektami o wysokiej wierności.

Zacznij od istniejących wzorców z badań jako linii bazowej. Przechodząc przez ten proces, upewnij się, że prototyp obejmuje wszystkie potrzebne funkcje i uwzględnia wszystkie cele użytkownika. Dojście do dobrego punktu wyjścia może wymagać odrobiny przeglądu i dopracowania.

Gdy masz pewność, że wszystkie wymagania zostały uwzględnione w prototypie, nadszedł czas, aby przeprowadzić kilka testów, aby uzyskać wgląd w użyteczność projektu. Tutaj zweryfikujesz skuteczność wzorców projektowych wraz z ogólną funkcjonalnością.

Powodem, dla którego testowanie jest tak ważne w fazie prototypu, jest to, że w niektórych przypadkach klienci nie mogą wyrazić lub w pełni przewidzieć swoich myśli i potrzeb. Testy użytkowników pozwalają im pokazać zamiast mówić. Uczestnicy demonstrują, jak faktycznie korzystaliby z witryny, podczas gdy Ty obserwujesz i uczysz się na podstawie ich działań. Jest to przydatne zarówno dla uczestników, jak i dla Ciebie jako projektanta.

Ważne jest, aby podczas testowania robić notatki na temat głównych celów użytkownika, aby zachować koncentrację. Po zaproszeniu uczestników testu przedstaw projekt jak największej liczbie użytkowników. Jeśli ograniczenia czasowe są napięte, upewnij się, że testujesz z co najmniej pięcioma użytkownikami.

Temat testów użytkowników to temat sam w sobie. Wybierz najbardziej sensowną metodę w zależności od czasu i budżetu. Byłoby wspaniale mieć zawsze odpowiednią ilość czasu, ale nie zawsze jest to możliwe. W razie potrzeby przydatne mogą być testy użyteczności „na korytarzu” lub „w kafejce” (test użyteczności przeprowadzony w obszarze o dużym natężeniu ruchu pieszego, z wykorzystaniem przechodzących osób w celu przetestowania Twojego produktu). Nawet zaangażowanie kilku współpracowników jest zawsze lepsze niż brak testów.

Są szanse, że twoje wzorce projektowe nie będą idealne od razu. Konieczne będzie wprowadzenie zmian i więcej testów w celu zweryfikowania zaktualizowanego projektu. Zyskasz jednak więcej informacji z każdej fazy testowania i będziesz w stanie uwzględnić to, czego się nauczyłeś, aby kontynuować iterację i testowanie, aż projekt zostanie zoptymalizowany.

Wzorce projektowania stron internetowych zapewniają spójne wrażenia użytkownika. Poniżej znajdują się pomocne linki, które zawierają więcej informacji na początek:

• Kompleksowy przewodnik po testowaniu użytkowników
• Prosta operacja rakietowa Steve'a Kruga
• Przykłady przewodnika po stylach