Autor: Kaja Rowicka
Data publikacji: 25 stycznia 2024
Podstawy UI design - jak projektować intuicyjny i użyteczny interfejs?
Tworzysz strony internetowe lub aplikacje. Słyszałeś o UI designie.
Ale czy możesz powiedzieć dokładnie, czym jest UI design? Jaki ma związek z UX? I które praktyki warto stosować?
Jeśli jeszcze nie czujesz się pewnie w tym temacie, koniecznie przeczytaj ten artykuł!
UI: co to?
User Interface (czyli w języku polskim interfejs użytkownika) dotyczy wszystkich elementów jakiegoś programu, urządzenia, czy też aplikacji, które umożliwiają interakcję z użytkownikiem. Będzie to więc m.in. ogólny wygląd, styl, lub rozmieszczenie elementów na stronie.
UI operuje na zmysłach odbiorcy (węch, słuch, dotyk itd.), wykorzystując do tego różne formy przekazu, urządzenia. Może to być mikrofon, ekran dotykowy, ale też i aparat.
Rola UI designu i UI designera:
Samym celem UI designu jest stworzenie takiego interface’u, który będzie zarówno “ładny”, prosty i przyjemny (intuicyjny) w obsłudze, jak i efektywny (np. względem celu strony). Rzecz jasna musi być też dopasowany do tematu i przeznaczenia programu, strony lub innego projektu.
Elementy wizualne interfejsu użytkownika
Do tych najważniejszych elementów wizualnych należą:
-
widgety (suwaki),
-
sekcje/formularze wprowadzania danych,
-
przyciski (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ć).
Rodzaje UI
Graficzny interface użytkownika, czyli GUI
GUI składa się 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.
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 szybkie i proste zrealizowanie jakiejś usługi lub procesu lub odpowiedź na pytanie. Wyszukiwarki głosowe już po raz kolejny pojawiają się w trendach web designu.
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, przebiega płynnie wraz z procesem podróży użytkownika 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 przycisków umieszczonych na bankomacie lub automatach samoobsługowych z przekąskami.
Interface oparty na formularzach
Ja sama nazwa wskazuje, przedstawia się w postaci formularzy. Te wykorzystywane są, gdy potrzebujesz wprowadzić większą ilość informacji. Mogą to byś pola tekstowe, pola wyboru etc. Rodzajów formularzy jest wiele, np. rejestracyjny, wniosku czy kontaktowy, który znajdziesz na większości stron internetowych przedstawiających ofertę.
Mobilne interface’y użytkownika
W tym wypadku nie masz do dyspozycji aż tyle przestrzeni, co na ekranie komputera, a treści nadal powinny być maksymalnie przejrzyste. Do tego potrzebny jest 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ć” 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 design a UX design
UX: definicja
User experience (po polsku doświadczenie użytkownika), to projektowanie skupione na doświadczeniu użytkownika, czyli stworzenie takiego projektu produktu, który uwzględni m.in. potrzeby, oczekiwania, przyzwyczajenia i umiejętności użytkownika. UX designerzy tworzą makiety, a te są przekłuwane w realny, wizualny produkt przez UI designerów. 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, 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 produkcie.
Ponad 600 000 ludzi tworzy strony za darmo, bez kodowania i przy wsparciu AI. Zobacz, jakie to proste
Podstawowe praktyki UI design, które warto wdrożyć na stronie
-
Rozmieszczenie i przejrzystość: odpowiednio dobrane proporcje pozwalają uniknąć przesytu informacji. Ten prowadzi do utraty koncentracji odbiorcy na tym, co ważne. W przypadku strony internetowej rolę odegra tutaj jej responsywność.
-
Hierarchia komunikatu: odpowiedni dobór typografii i ustawienie nagłówków pomaga zrozumieć wagę przekazu.
-
Operowanie kolorem i symboliką: 10 heurystyk Nielsena promuje przewagę rozpoznawania nad zapamiętywaniem. Odpowiednie manewrowanie kolorem działa na skojarzenia. Nie zapominaj jednak o osobach mających problem lub w ogóle nierozróżniających kolorów – odpowiednim 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 okażą 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. Pomaga w tym odpowiednia nawigacja, pasek menu i możliwość cofnięcia danej czynności.
-
Spójność całego UI design’u: nie dopuść do sytuacji, w której zgubimy swoją identyfikację, a odbiorca nabierze 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, jak i proste komunikaty. Nie bądź aż tak kreatywny, że staniesz się niezrozumiały dla użytkowników.
-
Dostosowanie produktu do różnych poziomów umiejętności: jeśli np. z urządzenia lub platformy internetowej korzystają zarówno “nowicjusze” jak i profesjonaliści zadbaj o najwyższy komfort obu tych grup.
-
Równowaga między użytecznością a oprawą wizualną: projekt nie może on być ani przekombinowany, ani przeciążony efektami. Wystarczy, że będzie atrakcyjny wizualnie.
Projektowanie interfejsu użytkownika a SEO
Z jednej strony interface użytkownika nie jest bezpośrednio powiązany z SEO, a z drugiej 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. Po drugie: liczy się również funkcjonalność. Jak zadbać o obydwa elementy?
Responsywność
Mobilna wersja strony internetowej to obecnie ta najważniejsza. 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 designu, przede wszystkim pamiętaj 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, a jednocześnie strona ładuje się szybko. W tej kwestii musisz zachować balans i przemyśleć cały projekt oraz użyte w nim elementy. Do podstaw zaliczają się tutaj optymalizacje np. poprzez kompresje, czy też wybór odpowiedniego formatu grafik.
Wolne ładowanie strony to coś, czego zdecydowanie warto unikać.
Odpowiednio dobrane nagłówki
Optymalne 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 słów kluczowych. W ten sposób witryna 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 artykułu.
Zasady projektowania - podsumowanie
UI design wraz z UX pozwala na stworzenie projektow cyfrowych osiągających najlepsze rezultaty. Spróbuj zastosować te praktyki 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:
Kreator WebWave.
Oferta.