Autor: Kaja Rowicka
Podstawy UI design
Z określeniem UI mogliśmy spotkać się już pewnie wiele razy. Szczególnie jeśli mówimy o tworzeniu stron internetowych i aplikacji. Temu pojęciu towarzyszy również bardzo często UX. Czym jest UI design? Jakie jego rodzaje wyróżniamy? Jaki ma związek z UX i jakie praktyki projektowe powinniśmy stosować? Sprawdźmy to!
UI- definicja
User Interface (czyli w języku polskim interface użytkownika) dotyczy wszystkich elementów jakiegoś programu, urządzenia, czy też aplikacji etc., które umożliwiają interakcję z użytkownikiem. Będzie to więc m.in. ogólny wygląd, styl, czy chociażby rozmieszczenie elementów na stronie internetowej.
UI, czyli nasz interface użytkownika operuje na zmysłach odbiorcy (węch, słuch, dotyk itd.), wykorzystując do tego różnego rodzaju formy przekazu, urządzenia. Może to być mikrofon, ekran dotykowy, ale też i aparat.
Rola UI design’u:
Samym celem UI designu jest stworzenie takiego interface’u, który będzie zarówno “ładny”, prosty i przyjemny (intuicyjny) w obsłudze, a poza tym efektywny (np. względem celu właściciela strony). Rzecz jasna musi być też dopasowany do tematu i przeznaczenia programu, strony lub innego projektu.
Elementy wizualne interface’u
Nie wymienimy może wszystkich, ale do tych najważniejszych, które z pewnością możemy zauważyć na stronach internetowych czy np. aplikacjach, z których korzystamy należą:
-
widgety (suwaki)
-
sekcje/formularze wprowadzania danych
-
buttony (np. z CTA, pola wyboru)
-
galerie zdjęć (lub pojedyncze grafiki)
-
powiadomienia (okna komunikatów)
-
wyszukiwarki
-
listy rozwijane, akordeon
-
pola tekstowe (np. komunikaty na stronie, opisy ofert lub inne treści, które użytkownik ma przeczytać)
W związku z tym, że wszystkie elementy mają odzwierciedlenie wizualne (graficzne), ten typ nazywamy Grafical User Interface, czyli w skrócie GUI. Czy są jeszcze inne rodzaje UI? Oczywiście.
Rodzaje UI
Graficzny interface użytkownika, czyli GUI
Przed chwilą już poznaliśmy znaczenie GUI. Składają się one z elementów graficznych, które są łatwo dostrzegalne przez użytkowników. Komputer Xerox Alto był pierwszym systemem, w którym zademonstrowano taki interface w 1973 roku.
Do przykładów graficznych interfejsów użytkownika należą m.in. systemy operacyjne takie jak Microsoft Windows, Mac OS, strony internetowe i aplikacje i wiele więcej.
Głosowy interface użytkownika (VUI)
W ten sposób określane są interface’y, które umożliwiają interakcję człowieka z komputerem za pomocą głosu. Mają one na celu w celu szybkie i proste zrealizowanie jakiejś usługi lub procesu, czy chociażby odpowiedzenie na pytanie. Wyszukiwarki głosowe już po raz kolejny pojawiają się w trendach web designu. Z udogodnień komend głosowych korzystamy najczęściej, aby zadać pytanie, sprawdzić prognozę pogody, ustawić alarm czy muzykę.
Sam sposób komunikacji powinien być dość swobodny, aby odbiorca nie odniósł wrażenia, że rozmawia z botem. Do najpopularniejszych reprezentantów w tej kategorii należeć będzie SIRI, Alexa i asystent Google.
Interface wiersza poleceń (CLI)
Stare interfejsy, które działają na komendy. Wymagają od użytkownika zapamiętania wielu komend i umiejętności programistycznych, aby działać efektywnie. Najczęściej są używane w branży technicznej, operatorskiej, czy u menedżerów sieci.
Interface języka naturalnego (NLI)
Ten rodzaj interface’u użytkownika wyróżnia się tym, że tak naprawdę im lepiej jest wykonany, tym mniej jest zauważalny. Powinien być prosty i naturalny w obsłudze. Nie wymaga od nas wcześniejszej jego nauki, ponieważ przebiega ona płynnie wraz z procesem naszej podróży po urządzeniu.
Interface oparty na menu
Interface oparty na stworzeniu okoliczności wyboru spośród kilku opcji. Spotkamy go zarówno na stronach internetowych, aplikacjach jak i w postaci, chociażby przycisków umieszczonych na bankomacie lub automatach samoobsługowych z przekąskami, lub napojami.
Interface oparty na formularzach
Ja sama nazwa wskazuje, przedstawiają się w postaci formularzy. Wykorzystywane są w momencie gdy potrzebujemy wprowadzić większą ilość informacji. Mogą to byś pola tekstowe, pola wyboru etc. Rodzajów formularzy jest wiele- w tym np. rejestracyjny, wniosku czy kontaktowy, który znajdziemy na większości stron internetowych przedstawiających ofertę.
Mobilne interface’y użytkownika
W związku z coraz częstszym korzystaniem z urządzeń mobilnych ten typ interface’u użytkownika stał się niezwykle istotny. Nie mamy do dyspozycji aż tyle przestrzeni jak w przypadku desktopu, ale treści powinny byś maksymalnie przejrzyste. Do tego aby stworzyć jak najlepszy projekt potrzebny jest nam właśnie mobile UI design, który poza aspektem wizualnym skupia też swoją uwagę na ulepszaniach innych funkcji, takich jak sterowanie dotykowe- np. rozmieszczenie elementów klikalnych, tak aby można było “trafić” w ten, który chcemy oraz sam zabieg umieszczenia ich “w zasięgu kciuka” Już samo wyznaczenie tego typu UI design’u świadczy o tym jak istotna jest responsywność projektowanych przez nas stron internetowych.
UI a UX
Jeśli chcemy wyjaśnić różnicę pomiędzy UI a UX, powinniśmy zacząć od uzupełniania naszej wiedzy o definicję tego drugiego skrótu.
-
UX- definicja
User experience (czyli po polsku doświadczenie użytkownika), to projektowanie skupione na doświadczeniu użytkownika, czyli stworzenie takiego projektu produktu, bądź też usługi, który uwzględni m.in. potrzeby, oczekiwania, przyzwyczajenia i umiejętności użytkownika. UX designerzy tworzą makiety, które są przekłuwane w realny, wizualny produkt przez UI designerów. Poza tym zajmują się oni również przeprowadzaniem badań i testów A/B. Podczas gdy UX koncentruje się na celu i funkcjonalności produktu, UI skupia swoją uwagę na jakości interakcji użytkownika z produktem.
Podsumowując, możemy powiedzieć, że UI designerzy podejmują decyzje na temat wyglądu interface’u użytkownika, a z kolei specjaliści od UX określają sam jego sposób działania oraz to jak użytkownik będzie najprawdopodobniej poruszał się po naszym produkcie.
Dołącz do ponad 513 tysięcy ludzi, którzy tworzą strony za darmo i bez kodowania
Podstawowe praktyki UI design, które powinniśmy wdrożyć na stronie
-
Rozmieszczenie i przejrzystość- odpowiednio dobrane proporcje pozwalają uniknąć przesytu informacji, który prowadzi do stracenia koncentracji odbiorcy na tym co ważne. W przypadku strony internetowej rolę odegra tutaj m.in. RWD.
-
Hierarchia komunikatu- odpowiedni dobór typografii i ustawienie nagłówków pomoże zrozumieć wagę przekazu.
-
Operowanie kolorem i symboliką -10 heurystyk Nielsena promuje przewagę rozpoznawania nad zapamiętywaniem. Odpowiednie manewrowanie kolorem działa na skojarzenia. Nie należy jednak zapominać o osobach mających problem lub w ogóle nierozróżniających kolorów. W takim przypadku odpowiednim zastępstwem bądź też uzupełnieniem mogą być np. ikony.
-
Bieżące komunikowanie procesu- jeśli przebiegnie pomyślnie, użytkownik powinien otrzymać komunikat zwrotny, informujący o sukcesie. Z kolei w przypadku niepowodzenia również istotne jest wyjaśnienie jego okoliczności. Pomocne mogą okazać się również komunikaty na temat poszczególnych kroków np. składania zamówienia
-
Zapewnienie użytkownikowi poczucia kontroli (i komfortu) nad interfacem- poruszanie się po nim powinno być proste i logiczne. Pomóc nam w tym może odpowiednia nawigacja, pasek menu i udostępnienie możliwości cofnięcia danej czynności.
-
Spójność całego UI design’u- nie możemy dopuścić do sytuacji, w której zgubimy naszą identyfikację i odbiorca może nabrać wątpliwości czy np. dana podstrona również jest częścią witryny, którą oryginalnie odwiedził.
-
Wygoda odbioru przekazu- należy zwrócić uwagę zarówno na rozmieszczenie, wielkość, kolorystykę, odpowiedni kontrast, aby zadbać o wygodę dla oczu odbiorców naszych treści. Poza tym same komunikaty powinny być proste. Nie musimy być tu aż tak kreatywni, aby użytkownicy nie mieli problemu z ich zrozumieniem.
-
Dostosowanie produktu do różnych poziomów umiejętności- jeśli np. z naszego urządzenia lub platformy internetowej korzystają zarówno “nowicjusze” jak i profesjonaliści powinniśmy zadbać o ich jak najwyższy komfort użytkowania.
-
Równowaga między użytecznością a oprawą wizualną- niezwykle istotna jest funkcjonalność naszego projektu. Nie może on być przekombinowany i przeciążony efektami, ale przy okazji powinien wyglądać atrakcyjnie.
UI design, a SEO
Z jednej strony interface użytkownika nie jest bezpośrednio powiązany z SEO, ale zdecydowanie na nie wpływa.
Pierwsza kwestia to sam wygląd - im bardziej atrakcyjny, tym większą przyciąga uwagę odbiorców, co biorą pod uwagę wyszukiwarki. Należy jednak pamiętać, że sam wygląd to nie wszystko. Liczy się również funkcjonalność. Podstawowymi aspektami, na które należy zwrócić uwagę, podczas tworzenia interface’u użytkownika sprzyjającemu pozycjonowaniu są:
Responsywność
Tego mogliśmy się już spodziewać po poznaniu kilku rodzajów UI designu. Mobilne wersja strony internetowej zyskuje na ważności. Google Search Console traktuje ją jako tą główną. Interface, który nie jest dostosowany do smartfonów, tabletów etc. traci nie tylko z perspektywy wyszukiwarek, ale też (a raczej przede wszystkim) użytkowników. Takie witryny są opuszczane przez nich znacznie częściej niż te posiadające RWD.
Sposób nawigacji
Tworząc interface strony, odpowiadający zasadom UX i UI design’u powinniśmy przede wszystkim pamiętać o potrzebach docelowych odbiorców- mają być proste do odnalezienia. To samo tyczy się stworzenia odpowiedniej ścieżki, jaką ma przejść użytkownik, aby zrealizować cel strony (np. rejestracja, zakup, zapis na kurs itp.)
Jakość i lekkość
Prawidłowy UI design to taki, który wygląda dobrze, materiały wizualne są najwyższej jakości, ale przy okazji nie przeciążają też strony. W tej kwestii musimy zachować balans i przemyśleć cały projekt i użyte w nim elementy. Do podstaw możemy zaliczyć optymalizacje np. poprzez kompresje, czy też wybór odpowiedniego formatu grafik.
Wolne ładowanie strony to coś, czego zdecydowanie chcemy uniknąć.
Odpowiednio dobrane nagłówki
Odpowiednie wykorzystanie nagłówków pozwoli botom wyszukiwarek na właściwe zrozumienie treści strony- co ma do zaoferowania. Istotne będzie umieszczenie w niektórych z nich naszych słów kluczowych. Dzięki temu witryna www będzie miała szansę znaleźć się na wyższej pozycji w wyszukiwarce. Oczywiście dla użytkowników również ma to duże znaczenie, ponieważ w ten sposób dostają pewnego rodzaju zapowiedź tego co otrzymają np. w danej sekcji tekstu artykułu.
Podsumowanie
UI design kryje w sobie wiele tajemnic. Wraz UX pozwala na stworzenie projektów o jak najlepszych rezultatach. Warto spróbować zastosować te praktyki np. u siebie na stronie lub na ich podstawie założyć własną stronę internetową w kreatorze stron www w WebWave.
Dowiedz się więcej o najlepszych praktykach tworzenia stron:
Popularne artykuły.
Kreator stron www WebWave umożliwia tworzenie stron www z pełną swobodą. Strony internetowe możesz tworzyć zaczynając od czystej karty lub wykorzystując szablony www. Strona www bez kodowania? To łatwe - zacznij już teraz.
contact@webwavecms.com
+48 731 395 898
Porozmawiaj z nami na czacie
Od godziny 08:00 do 24:00
Ta strona została stworzona w kreatorze WebWave.
Znajdziesz nas na:
