Czym jest UI Design?

W dzisiejszych czasach niemal na każdym kroku mamy do czynienia z guziczkami, przyciskami, pokrętłami i interfejsami. To właśnie projektowaniem tych „łączników” pomiędzy urządzeniem a człowiekiem zajmuje się UI Design!

Jako że sami zajmujemy się projektowaniem interfejsów cyfrowych, głównie tych na stronach internetowych, to właśnie im poświęcimy dzisiaj trochę czasu. Pokrętłami, wajchami i guziczkami zajmiemy się innym razem…

Zapraszamy!

Czym jest UI Design?

UI to skrót od User Interface. Określenie to po polsku oznacza interfejs użytkownika. UI  Design, to w wielkim skrócie projektowanie interfejsów. Mają one być atrakcyjne wizualnie, przyciągać wzrok, ale też cechować się wysoką funkcjonalnością i łatwością użytkowania.  Powinny być również intuicyjne w obsłudze oraz zrozumiałe. Na atrakcyjność wizualną składa się dobrze dobrana kolorystyka, typografia i całość kompozycji.

Interfejsy to zestaw środków i narzędzi, które mają na celu komunikować urządzenie z odbiorcą, czyli człowiekiem — mamy z nimi do czynienia każdego dnia! Interfejsy posiadają smartfony, komputery, laptopy, tablety, pralki i wiele innych urządzeń elektronicznych. Wyróżniamy interfejsy graficzne, dotykowe, głosowe i mieszane. Jako że nasza agencja specjalizuje się w projektowaniu stron internetowych, najczęściej zajmujemy się projektowaniem interfejsów graficznych.

Interfejs graficzny to sposób prezentacji treści na stronie, będący jednocześnie pewnego rodzaju przewodnikiem, nawigującym użytkownika po stronie. Poruszanie się po stronie następuje za pomocą kursora myszki, klawiatury, a w przypadku urządzeń mobilnych dotyku.

Co wchodzi w skład interfejsu graficznego?

  • ikony
  • przyciski
  • okienka
  • widgety
  • pola wyboru
  • suwaki
  • pola tekstowe
  • galerie zdjęć
  • kolorystyka
  • animacje
  • hierarchie elementów

Oto przykład interfejsu graficznego. To interfejs niezwykle popularnej aplikacji mobilnej, czyli Instagrama.

interfejs graficzny aplikacji instagram

Czy jest to przykład dobrze wykonanego projektu pod względem UI/UX? Naszym zdaniem, jak najbardziej! Interfejs jest przejrzysty, intuicyjny, prosty i spójny.

Wyniki opublikowane przez firmę Statista 29 marca 2022 podają, że obecnie z Instagrama korzysta prawie 1,2 miliarda użytkowników! Zawrotna liczba!

UI Designer a UX Designer

Praca UI Designera jest bardzo podobna do pracy grafika, czy projektanta stron www. Jego zadaniem jest zadbanie o to, aby każda ścieżka, na jaką wejdzie użytkownik, była łatwa do pokonania i przyjemna, zarówno wizualnie, jak i technicznie oraz o to, aby prowadziła ona wprost do wybranego celu. Na tej ścieżce nie ma miejsca na ślepe zaułki, głęboki kałuże, czy inne przeszkody. Natomiast wcześniejszym zaprojektowaniem tej metaforycznej ścieżki zajmuje się UX designer.

UX (user experience)  i UI (user interface) to pojęcia dotyczące tej samej dziedziny, jaką jest tworzenie produktów cyfrowych, a działania podejmowane przez UI i UX designerów często pokrywają się. Wyznaczenie konkretnej granicy nie jest więc możliwe, a nawet nie jest wskazane. Istnieją jednak pewne różnice, które pozwalają rozróżnić działania UI od UX.

Już same nazwy tych dziedzin są dla nas pewną wskazówką — w obu z nich występuje słowo user, które w języku polskim oznacza użytkownika, którego UI i UX stawia  na pierwszym miejscu, szukając wizualnych i technicznych rozwiązań, które umożliwią mu przyjemne korzystanie ze strony, czy aplikacji.

W wielkim uproszczeniu, designerzy:

  • UI zajmują się aspektem technicznym na stronach internetowych czy w aplikacjach. Ich zadaniem jest zbadanie i zrozumienie, jakich elementów używają użytkownicy w komunikacji z produktem. Większość czasu poświęcają oni na projektowanie graficzne, bazując na informacjach dostarczonych im przez specjalistów od UX.
  • UX zajmują się aspektem psychologiczno-emocjonalnym. Ich zadaniem jest zbadanie, czego doświadczają użytkownicy podczas korzystania ze stron lub aplikacji i zrozumienie ich potrzeb. W dobrze funkcjonującym zespole to UX designer opracowuje rozwiązania, które UI designer może przełożyć na finalny produkt graficzny.

Oczywiście UI i UX designerzy działają w ścisłej współpracy. Często zdarza się, że projektant UI i projektant UX to ta sama osoba.

UX Designer bada i obserwuje zachowania użytkowników, a na podstawie swoich obserwacji opracowuje rozwiązania, które technicznie wdraża UI Designer.

Metaforycznie…

UX Designer na podstawie zgromadzonych przez siebie doświadczeń i obserwacji wykonuje projekt mostu, który ma doprowadzić użytkownika do określonego celu.

Natomiast UI Designer wdraża ten projekt w życie i „buduje” konstrukcję, dbając o jej estetykę i funkcjonalność.

Jeśli chcecie dowiedzieć się nieco więcej na temat UX Designu, to zapraszamy Was do lektury artykułu: UX Design – co to jest i dlaczego warto go wykorzystać?

Dobry UI design, czyli jaki?

Jak już wcześniej wspominaliśmy, osoba zajmująca się UI designem ma na celu stworzyć projekt, który będzie łatwy w nawigacji, intuicyjny, przejrzysty i likwidujący możliwości „błądzenia” podczas korzystania z gotowego już produktu np. strony internetowej, aplikacji, czy nowoczesnej pralki z elektronicznym interfejsem.

Przykłady UI Designu

(tego przyjaznego i tego mniej przyjaznego) 

  • Zalecane jest używanie maksymalnie 2 rodzajów fontów. Wybrane style, grubości i rozmiary należy stosować konsekwentnie w całym projekcie.
    przykład niepoprawnego i poprawnego ui designu
  • Warto unikać bloków tekstów, w których tekst jest wycentrowany lub wyjustowany. Dlaczego? Wzrok czytelnika nie lubi nierównych odstępów pomiędzy słowami, a kiedy napotyka zbyt duże światła w bloku tekstu, gubi się i traci rytm skanowania.
    drugi przykład niepoprawnego i poprawnego ui designu
  • Należy konsekwentnie wykorzystywać ustalone odstępy od poszczególnych elementów i wśród elementów w ramach jednego projektu.
    trzeci przykład niepoprawnego i poprawnego ui designu
  • Hierarchia poszczególnych elementów powinna być zaznaczona również w sposób graficzny.
    czwarty przykład niepoprawnego i poprawnego ui designu
  • Wizualne wyróżniki, takie jak podkreślenia, czy pogrubienia pomagają użytkownikom w zlokalizowaniu ważnego elementu, na jakim powinni skupić uwagę. Dzięki nim użytkownik wie również, w jakim miejscu strony się znajduje.
    piąty przykład niepoprawnego i poprawnego ui designu

Oczywiście te przykłady to tylko wierzchołek ogromnej, UI/UX’owej góry lodowej! Chcemy również zaznaczyć, że nie stosowanie się do zaprezentowanych zasad nie przekreśla szans strony internetowej, na bycie dobrą i przyjazną dla użytkowników!

W sieci znajdziemy dziesiątki poprawnych, funkcjonalnych stron, na których zastosowano na przykład środkowanie tekstu — to nie koniec świata! Z drugiej strony na pewno znajdzie się nie jedna strona, na której zrealizowano wszystkie wymienione zasady, a mimo tego, nie służy ona użytkownikom dobrze.

Dlaczego UI Design jest ważny?

Niestety atrakcyjny design, świetnie skomponowane elementy i urzekająca całość na stronie internetowej, czy w aplikacji mogą nie wystarczyć…

Prawdziwa gra toczy się o to, aby użytkownik mógł łatwo odnaleźć się na stronie i dotrzeć do elementu, który go interesuje. Załóżmy, że szuka on jakiegoś produktu — wchodzi na stronę, jednak przytłacza go ilość migających fragmentów, a sama droga do owego produktu nie jest intuicyjna.

Osoba taka zgubi się na stronie i po prostu ją opuści. Strona internetowa powinna zachęcać i zatrzymywać użytkownika.

Netview Agency — Twoja strona internetowa od podstaw

Jako firma oferujemy kompleksową obsługę. Każdy z działów funkcjonujących w naszej firmie składa się z profesjonalistów w konkretnej dziedzinie. Działanie każdej grupy nadzoruje lider, który dba o jakość wykonywanych usług.

Stawiamy na długoterminową współpracę i dbamy o dobre relacje z klientami. Będziemy dla Ciebie dostępni również po zrealizowaniu przez nas projektu, aby pomóc Ci z każdym napotkanym problemem.

Skontaktuj się z nami na naszej stronie lub Facebooku!

Spis treści

Wycena

    Imię:

    Adres e-mail:

    Numer telefonu (opcjonalnie):

    Wybierz usługę z której chcesz skorzystać:

    Jaki typ strony chcesz stworzyć?

    Czy posiadasz aktualnie stronę internetową?

    Podaj link aktualnej strony:

    Jakie języki powinna obsługiwać strona?

    Jakie podstrony powinna posiadać nowa strona?

    Czy posiadasz listę stron która przypada Ci wizualnie do gustu?

    Podaj linki do stron, które przypadają Ci wizualnie do gustu:

    Dodatkowe uwagi (opcjonalnie)

    Czy posiadasz aktualnie sklep internetowy?

    Podaj link aktualnego sklepu:

    Jakie języki powinien obsługiwać sklep?

    Jakie podstrony powinien posiadać nowy sklep?

    Ile orientacyjnie planujesz mieć produktów w sklepie?

    Czy posiadasz listę sklepów które przypadają Ci wizualnie do gustu?

    Podaj linki do sklepów, które przypadają Ci wizualnie do gustu:

    Dodatkowe uwagi (opcjonalnie)

    Czy wiesz, że...

    Jesteśmy agencją, która posiada ceny konkurencyjne nawet dla freelancerów?