Jak korzystać z wzorców projektowych interfejsu użytkownika
Wzorce projektowe są optymalnymi rozwiązaniami dla typowych problemów projektowych. Ponieważ wspólne problemy są rzucane wokół społeczności i są rozwiązywane, często pojawiają się powszechne rozwiązania. Ostatecznie, najlepsze z nich wznoszą się ponad hałas, identyfikują się i stają się wyrafinowane, aż osiągną status wzoru.
Nie nazwałabym strony wzorcowej trendem w projektowaniu stron internetowych, wzorce projektowe wydają się raczej dotyczyć tego, jak wspólne projekty są klasyfikowane retrospekcyjnie, zamiast tworzyć nowy obszar lub szukać miejsca, do którego zmierza.
Jak powinieneś podchodzić do wzorców projektowych interfejsu użytkownika?
Cały czas używamy wzorów, jeśli ich nie znasz, prawdopodobnie nie zauważyłeś, że są wokół ciebie.
A co z klasycznym przykładem posiadania zbyt dużej ilości treści do wyświetlenia na jednej stronie? Zwracamy naszą uwagę na "Tabs", wzór, który pozwala nam obsługiwać wszystkie treści, które chcemy, bez konieczności znikania użytkownika w morzu linków.
Typowe korzyści z zastosowania wzoru to:
- pokazywanie początkującym, jak korzystać z najlepszych praktyk w projektowaniu stron internetowych;
- nauka dostosowania się do zbiorowego zrozumienia projektantów;
- umożliwienie lepszej komunikacji, zmniejszenie ryzyka związanego z nieznanymi wyborami;
- ograniczenie niezbędnych przepływów czasu i kosztów w celu wykonania określonych zadań;
- unikanie zmarnowanego czasu na zbudowanie czegoś, co zostało wcześniej zbudowane;
- dając użytkownikowi doświadczenie, które zna i ma doświadczenie (charakter wzorców projektowych).
W powyższym przykładzie widzimy Clicky Media za pomocą dwóch bardzo popularnych wzorów dzisiaj:
- Navicon - uniwersalny symbol menu, zwany inaczej nawigacją w witrynie, staje się coraz bardziej popularny w nowoczesnych projektach stron internetowych, ale został już w pełni dostosowany do urządzeń mobilnych.
- Parallax Scrolling - unikalny wzór projektu, który pozwala na jedną stronę strony, z łatwym w użyciu mechanizmem przewijania, ale zawiera również listę ikonek tła, które nadają stronie żywy charakter.
Chociaż zarówno menu Navicon, jak i ogólne menu na górze strony mają podobne opcje - rozpraszanie wszystkich linków na tym samym pasku nagłówka byłoby bardzo rozpraszające - staje się jasne, że małe wybory mogą mieć duże znaczenie.
Oto, o czym musisz pomyśleć, oceniając wzór projektu i dostosowując go do własnych potrzeb:
- Podsumowanie problemu: jaki problem rozwiązujesz? Bądź skupiony i wyrażaj go jak historię użytkownika - tylko w jednym zdaniu.
- Rozwiązanie: w jaki sposób inni rozwiązali ten problem? Kilka rzeczy do szczegółu to nawigacja użytkownika (w tym skróty), uzyskiwanie danych wejściowych użytkownika, obsługa danych i integracji z innymi usługami lub aplikacjami oraz wyświetlanie informacji i treści (w tym ustawień domyślnych).
- Przykład: świetnie, możesz mi pokazać? Czasami wystarczy zrzut ekranu lub makieta; innym razem, przepływy użytkownika i / lub dodatkowe notatki są niezbędne do wyraźnego przekazania wzorca.
- Użycie: kiedy ten wzór (nie) powinien być używany? Kilka szczegółów: architektura produktu, układ interfejsu, urządzenie (urządzenia), język programowania, brak lub istnienie innych wzorców projektowych, typ użytkownika i podstawowe zastosowania.
To wymaga praktyki i dyscypliny, aby myśleć o wzorcach w ten sposób, jeśli jeszcze tego nie zrobiłeś. Poświęć trochę czasu, aby odpowiedzieć na te pytania podczas projektowania swojego produktu, ponieważ może to pomóc zaoszczędzić wiele czasu na refaktoryzacji na drodze, gdy Twoi użytkownicy i zespół poprosić o podobne szczegóły.
Wzrost liczby zestawów narzędzi interfejsu użytkownika
Wzorce projektowe interfejsu użytkownika od zawsze ułatwiały użytkownikowi poruszanie się po witrynie, aplikacji lub systemie. Jeśli użytkownik nauczy się, jak przesłać komentarz po raz pierwszy, jest szansa, że natychmiast będzie wiedział, jak wysłać e-mail za pomocą formularza kontaktowego, jest to ta sama powtarzająca się koncepcja wprowadzania informacji.
W ostatnich latach zaobserwowaliśmy ogromny wzrost rynku narzędzi interfejsu użytkownika. Zestaw narzędzi interfejsu użytkownika można po prostu rozumieć jako zestaw widżetów, które umożliwiają tworzenie w pełni graficznej aplikacji od zera. Twitter Bootstrap to doskonały przykład udanego zestawu narzędzi interfejsu użytkownika. W dzisiejszych czasach duża część projektantów stron internetowych będzie polegać na funkcjach Bootstrap w celu ułatwienia ich własnego przepływu pracy. W pewnym sensie nie trzeba wymyślać koła!
3 wzorce projektowe interfejsu użytkownika do zapamiętania
W skrócie, wzorce projektowe są rozwiązaniem powtarzających się problemów. Wykorzystując wzorce możemy przezwyciężyć proste problemy z interfejsem użytkownika. Jeśli będziemy uważnie obserwować, zauważymy, że wokół nas są wzory. Nie ma nic szczególnego w tym konkretnym projekcie, to sposób, w jaki został zastosowany, że jesteś podekscytowany!
Crystal Clear wzywa do działania
Najprostsze formularze internetowe (a także najczęściej używane) zwykle mają tylko jeden przycisk do działania: w tym przypadku "Utwórz witrynę". To dość oczywiste, o co nam chodzi.
O ile łatwiej można to zdobyć, prawda? Zawsze idź na łatwą opcję, nie wymyślaj ponownie koła, aby wyróżnić się z tłumu.
Bułka tarta na ratunek
Ścieżka nawigacyjna pokazuje ścieżkę od strony głównej witryny do bieżącej lokalizacji użytkownika w hierarchii stron witryny. Są formą pomocniczej nawigacji, która pomaga użytkownikom zrozumieć hierarchię i strukturę witryny. Bułki tartej zaczynają się od strony głównej i kończą na stronie aktualnie oglądanej.
W tym przykładzie przez Fares Farhan, widzimy, jak wykorzystuje dwa wzorce projektowe interfejsu użytkownika w tym samym czasie. Po pierwsze, ma wzór kart na górze, a drugi wzór nawigacyjny na dole. Łącząc je ze sobą, sprawia bardzo przyjemne wrażenia podczas przeglądania.
Rejestracja powinna być łatwa
Jeśli nie żyjesz pod kamieniem, będziesz świadomy społecznej rejestracji. Rejestracja na stronie internetowej jest powszechną czynnością i dlatego powinna być tak łatwa i przyjemna, jak to tylko możliwe.
To jedna z moich ulubionych stron rejestracyjnych w tej chwili. To jest GitHub stronę główną, a jak widać na zrzucie ekranu, wszystko, co oznacza firma, jest przedstawione w mniej niż stu słowach. Masz również możliwość rejestracji w drodze, a proces ten zajmuje mniej niż minutę. Otrzymasz e-mail z potwierdzeniem Twojego konta, ale jest to coś, do czego jesteśmy przyzwyczajeni!
Ostatnie słowa
Przez osiem lat tworzyłem strony internetowe i przez te osiem lat zdałem sobie sprawę, że prostota jest kluczem do wielu problemów projektowych.
Doszedłem do wniosku, że bałagan w projektowaniu, wypełniony niepotrzebnymi elementami i formami, jest najbardziej frustrującym doświadczeniem, jakie można znaleźć w Internecie. Tak, design jest dokładnie taki, jak coś działa, więc dlaczego nie sprawić, by działał poprawnie? Interfejs użytkownika (UI) jest niezwykle ważny dla sukcesu Twojej firmy lub przedsięwzięcia.
Najlepszym sposobem na zapewnienie pomyślnego projektowania witryn jest nauka i wykorzystanie istniejących wzorców projektowych.