Blog

Wypróbuj nasz kreator stron internetowych i uzyskaj dostęp do darmowego szkolenia. Po rejestracji wyślemy Ci e-maila z linkiem do zapisu na szkolenie on-line. Na godzinnym szkoleniu dowiesz się jak samodzielnie stworzyć swoją stronę internetową!

Darmowe szkolenie z tworzenia stron internetowych 

Tu dowiesz się, jak zrobić stronę internetową.

Blog

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’u 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.

Więcej informacji na temat UX designu poznasz między innymi z dzięki temu artykułowi. Jeśli jednak potrzebujesz jeszcze większej dawki szczegółów dotyczących relacji UX z UI designu oraz ich sprawdzonych praktyk, możesz skorzystać z naszego darmowego e-book’a.

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 rozpocząć tworzenie darmowej witryny www w WebWave.

Koniecznie przeczytaj te artykuły:

• Design Thinking- czym jest i jak go wykorzystać
• Trendy w web designie na 2022
• Typografia i jej użycie w web designie

Autor: Kaja Rowicka

POZNAJ NAS BLIŻEJ W SIECI

Polub nasz profil na Facebooku, aby otrzymywać powiadomienia o nowych funkcjach, postach na blogu, szkoleniach i materiałach edukacyjnych.

Porozmawiaj z nami na czacie

Ta strona została stworzona w całości przy użyciu naszego kreatora stron www WebWave. Na tej stronie wykorzystujemy ciasteczka. Dowiedz się więcej.

MATERIAŁY

WEBWAVE

DLA KLIENTÓW

OFERTA

KREATOR

KONTAKT

contact@webwavecms.com
+48 731 395 898

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.