Checklist Design – Najlepsze praktyki przy projektowaniu UI/UX
Obecne czasy można zdefiniować jako erę rozkwitu technologicznego. Dzisiejsi odbiorcy chcą mieć dostęp do najlepszych funkcji technologicznych bez zbytniego namysłu. Użytkownicy na bieżąco szukają zróżnicowanych interfejsów, jednak skłonni są szybko się poddać, gdy tylko sprawy robią się zbyt skomplikowane. Dzieje się tak zwłaszcza w przypadku stron i aplikacji mobilnych.
W tej sytuacji kluczowym staje się dopasowanie interfejsu do standardowych, znanym odbiorcom wzorców. Z odpowiednim punktem referencyjnym, designerzy są w stanie odwzorować proste i dobrze znane elementy interfejsu użytkownika, a przy okazji zadbać o innowacyjny wygląd, dzięki interaktywnej naturze tychże elementów.
Jest kilka narzędzi i zasobów, z których twórcy UI/UX mogą czerpać inspirację. Narzędzia te odgrywają istotną rolę w tworzeniu prototypów i finalizacji projektów. Jednym z najlepszych z takich narzędzi jest Checklist Design.
Checklist Design: Lista, której potrzebujesz przy swoich projektach
Checklist Design stawia sobie za cel uzbrojenie projektantów w rzetelny punkt odniesienia, wymieniając przy okazji wszystkie elementy interfejsu, niezbędne, aby zachować odpowiednie proporcje między bogactwem a prostotą projektów. Przyjrzyjmy się kilku punktom, które Checklist Design przygotowało dla designerów:
- Kilka wątków takich jak Reaktywność i typografia — najlepszych praktyk, jakie każdy deweloper powinien wdrożyć w swoim projekcie.
- Zbiór okien i ekranów dla stron internetowych i aplikacji mobilnych, takich jak strona logowania, rejestracja, kontakt i tak dalej.
- Lista komponentów UI takich jak przyciski, modele, tabele i ikony, które są wiążące dla każdej aplikacji komputerowej i mobilnej.
- Zapis standardowego ruchu klientów wewnątrz aplikacji — krok po kroku. Dla przykładu, jeśli chcemy w efektywny sposób powiadomić użytkowników, że zastosowali niepoprawną pisownię, możemy zrobić to wedle instrukcji wskazanej w Checklist Design.
Checklist Design pomaga określić, w jaki sposób możemy osiągnąć płynny ruch na stronie i podarować naszym użytkownikom czytelny interfejs.
Jak to działa
Designerzy UI/UX często popełniają błędy podczas projektowania aplikacji. Dostęp do listy standardowych praktyk, które można wdrożyć stanowi niesamowite ułatwienie. Checklist Design to znakomity punkt odniesienia, dzięki któremu designerzy mogą skupić się na innowacjach, zamiast zawracać sobie głowę detalami.
Przyjrzyjmy się zatem narzędziu, które jest aż takim ułatwieniem dla designerów UI/UX.
- Zacznijmy od strony internetowej. Strona posiada prosty interface. Strona główna wyposażona jest we wszystkie istotne elementy, o których należy pamiętać w trakcie tworzenia projektu.
- Scrollując stronę główną, nie sposób nie zwrócić uwagi na nagłówki, wymieniające kilka elementów designerskich, takich jak części interfejsu, ruch w aplikacji itd.
- Pierwszą rzeczą, od jakiej designerzy zwykle rozpoczynają pracę, jest wykonaniu szkicu stron lub okien aplikacji. W tym celu należy zjechać w dół ekranu do działu „Website and apps” (ang. Strona i aplikacje), gdzie znajdziemy listę podstron typowych dla aplikacji.
- Na przykład, jeśli zależy nam, aby pierwszym oknem naszej aplikacji była strona logowania, możemy po prostu przejść do wspomnianego działu i odnaleźć sekcję ze stronami logowania. Następnie należy kliknąć „Login”, a przejdziemy do nowej strony.
- W pierwszej kolejności powinniśmy zwrócić uwagę na wszelkie detale, jakich nie może zabraknąć na stronie logowania. Będą nimi logo, nazwa, dane identyfikacyjne konta i hasło; znajdziemy tam pełną listę. Dodatkowo po prawej stronie znajdziemy listę kilku źródeł, z których możemy czerpać inspirację.
- Korzystając z listy na stronie głównej, możemy wykonać szkic kilku różnych stron tego typu.
- Po tym, jak już przejrzymy się stronom i skończymy ze szkicem, powinniśmy zapoznać się z niezbędnymi elementami interfejsu aplikacji. Są one wymienione na stronie głównej, w tym samym miejscu co strony. Elementami UI są, chociażby przyciski, pola tekstowe, ikony, tabele, ale pełna lista jest o wiele dłuższa.
- Kiedy zaprojektujemy już indywidualny wygląd podstron z interaktywnymi elementami interfejsu, nie pozostaje nam nic innego jak przyjrzeć się drodze, jaką poszczególni klienci odbyli w naszej aplikacji.
- Informacje te znajdziemy w zakładce „Flows” na stronie głównej. Są tam wymienione kroki, jakie ma do pokonania użytkownik naszej aplikacji. W skład typowej ścieżki użytkownika wchodzi otwarcie/zamknięcie konta, pomoc techniczna i resetowanie hasła.
- Kiedy zadbamy już o podstawowe elementy naszej aplikacji, powinniśmy również wdrożyć nieco bardziej rozbudowane funkcje, takie jak choćby elastyczny design czy tryb ciemny. Z pomocą ponownie przyjdzie nam lista Checklist Design.
- Konieczne jest, by wszelkie aplikacje były responsywne i elastyczne niezależnie od urządzenia, z jakiego korzystamy. W tym celu należy kliknąć „Responsiveness” pod nagłówkiem „Topic” na stronie głównej. Zaprowadzi nas to na następną stronę, gdzie znajdziemy listę funkcji, sporządzoną w formie checklisty punktów, które należy spełnić, by mieć pewność, że nasza aplikacja pozostanie reaktywna.
- Po prawej stronie znajdziemy dział „Resources”, do którego możemy się udać, aby poszerzyć naszą wiedzę. Zawiera on listę kilku artykułów i narzędzi, które mogą być przydatne w naszym projekcie.
I to by było na tyle. Narzędzie Checklist Design umożliwia wdrożenie wszystkich podstawowych i standardowych elementów projektu, dzięki czemu nie musimy się martwić o komplikacje, jakie mogłyby spotkać klienta na jego drodze.
Zalety
- Standardowa checklista z konkretnymi elementami UI i projektami UX.
- Płynny ruch użytkowników i lista kroków, jakie przebywają w aplikacji.
- Zasoby i artykuły z linkami zewnętrznymi.
- Zupełnie za darmo – po prostu przechodzimy na stronę i korzystamy jej dobrodziejstw.
Słowem zakończenia
Projektowanie UI/UX to coraz bardziej wymagające wyzwanie. Zwłaszcza jeśli chodzi o projektowanie aplikacji wyposażonych w najnowsze elementy technologiczne, a przy tym prostych w obsłudze. Niezależnie od naszego stopnia zaawansowania w procesie projektowania, błędy są rzeczą ludzką – zwłaszcza przy projektowaniu wysoce responsywnych aplikacji. To właśnie w takich sytuacjach pomoc w postaci checklisty ze standardami czyni cuda.
Checklist Design skutecznie określa podstawowe wymagania aplikacji, abyśmy my mogli skupić się na interaktywnej naturze elementów projektu.
