Skrót UI jest teraz równie popularny co UX. I nic dziwnego patrząc na rosnące zapotrzebowanie na projektantów rozwiązań cyfrowych. Dziś zatem krótko o tym czym jest ten UI i czego warto się uczyć jeśli chcielibyście zająć się tym tematem.
Jak co poniedziałek łapcie również filmik na kanale: zebzowy kanał na YouTube
UI Design to dziedzina projektowania, która zajmuje się interfejsami. Czym jest interfejs – to taki łącznik między człowiekiem, a maszyną. I to nie tylko ekran monitora czy urządzenia mobilnego, ale również pokrętła pralki, przyciski w lodówce czy na desce rozdzielczej samochodu. Niemniej jednak, najczęściej poszukiwanymi projektantami, są Ci, projektujący interfejsy cyfrowe, dlatego właśnie temu tematowi poświęcę dzisiaj czas.
UI to warstwa najbliżej użytkownika, dlatego oprócz czysto wizualnej strony trzeba zadbać o jej funkcjonalność. Więc jeśli podejmujecie decyzję o zajmowani się interfejsami, musicie również przybliżyć sobie tematykę projektowania user experience, usability i dobrych i złych praktyk w projektowaniu UI.
Czy projektowanie UI jest proste?
UI design z pozoru to prosta sprawa. Nic bardziej mylnego. W projektowaniu interfejsów nie chodzi tylko o zrobienie efekciarskiej grafiki do appki czy wypasionych animacji przycisków. UI designer jest odpowiedzialny za to, czy użytkownik połapie się w ogóle co może z interfejsem zrobić.
Co stanie się kiedy wcisnę ten przycisk? Czy użytkownik rozumie co ma teraz zrobić? Jak zachowa się to pole formularza, kiedy pojawi się błąd? Jak mogę to cofnąć? Czy to w ogóle ma sens? To tylko kilka z pytań, które zadaję sobie w codziennej pracy. UI Design to nie projektowanie trzech ekranów aplikacji, ale projektowanie całego wachlarza scenariuszy, które mogą mieć miejsce, kiedy użytkownik zacznie z tego korzystać.
Co trzeba umieć by zajmować się UI?
Przede wszystkim projektowanie graficzne. Kluczowa jest praca z typografią i kolorem. UI designer musi rozumieć na czym polega budowanie hierarchii informacji, w jaki sposób zaznaczać te ważniejsze, a jak ukrywać te mniej istotne dla użytkownika elementy. Zerknijcie też na wpis o Gestalcie, który pojawił się już na blogu.
Następnie warto wziąć się za elementy interfejsu. Popularne komponenty, z których budujemy te wszystkie strony i aplikacje. Trzeba zrozumieć jak działają przyciski, czym różnią się radio buttons od checboxów i jakie typy formularzy możemy budować. Dobre poznanie tych komponentów nie tylko sprawi, że unikniemy podstawowych błędów z zakresu usability, ale również dużo łatwiej będzie tworzyć nam własne kontrolki.
Kolejna sprawa to standardy, frameworki, platformy i tak zwane patterns, czyli hm… wzorce. To już wiedza specjalistyczna związana z materiałami i narzędziami, na których się pracuje. Jeśli robimy aplikacje musimy wiedzieć jakie są standardy i dobre praktyki platformy, na której będzie bazowała. Czy obsługiwanym systemem będzie iOS, Android, a może robimy aplikację na Windows Phone?
Na początek zapoznajcie się z jednym systemem (najwygodniej tym, który macie na swoim smartfonie). Pobierzcie kilka aplikacji, przejrzyjcie strony internetowe i zobaczcie jak zachowuje się interfejs. Jak wyglądają poszczególne elementy, być może mają wspólne cechy (jak na przykład sposób rozwijania, miejsce ułożenia, animacje)?
Zapoznajcie się również z pojęciem Design Systems (mam nadzieję poruszyć ten temat jeszcze na blogu). Najpopularniejszy z nich Material Design zyskał bardzo szybko dużą popularność. Poszukajcie również innych i zobaczcie w jaki sposób są zbudowane. Na początek warto na nich pracować, jednak z biegiem czasu zachęcam Was do tworzenia swoich własnych systemów.
Na dodatek wspomniany User Experience. Nie musicie zaraz zapoznawać się z całą psychologią poznawczą, ale musicie znać choćby podstawy związane z usability. Co sprawia, że użytkownicy się gubią, jak zoptymalizować pewne procesy, czy użytkownicy będą wiedzieli do czego służy interfejs i jak można go używać?
Na koniec możecie zająć się animacją. Jeśli już pewniej poczujecie się w projektowaniu warto poświęcić chwilę na zapoznanie się z podstawami animacji, zwłaszcza tej w interfejsach.
Wiedzy do przyswojenia jest całkiem sporo, ale to wszystko przychodzi z czasem. Grunt żeby nie zniechęcić się od razu i stopniowo przyswajać sobie informacje. Pierwsze projekty, które zrobicie i tak będą miały wiele błędów, nie unikniecie tego. I nie powinniście się tego bać. Lepiej zrobić kilka projektów i uczyć się na nich, niż w nieskończoność przeglądać artykuły w internecie i nie robić nic.
Materiały, które mogą się przydać
Książki:
Don’t make me think – Steve Krug
About Face – Alan Cooper, Robert Reimann, David Cronin, Christopher Noessel
Smashing UX Design – Jesmond Allen, James Chudley
darmowe ebooki UXPin
Blogi i strony:
Smashing magazine
LukeW
Mockplus
Web Design Blog
Design systems
Material Design
IBM Design Language
Carbon Design System
Fluent Design System
Kursy
Interaction Design Foundation – Większość to kursy z obszaru szerszego UX, ale znajdziecie też kilka stricte związanych z interfejsami
Komponenty UI – mój kurs o komponentach UI dla Eduweb
