BLOG
UX - 18 lipca 2024 10:45 Autor: Ola Gradowska

Czym jest UI design?

W poprzednim artykule zapoznaliśmy się z terminem User Experience. Wiemy już dzięki temu, że UX to projektowanie usług i produktów skoncentrowane na użytkowniku. 

Dziś zapoznamy się z równie ważnym dla projektowanego produktu User Interface. Zarówno UX jak i UI są ściśle powiązane z procesem projektowania i ze sobą nawzajem. Ciężko byłoby zaprojektować UX bez UI i odwrotnie. Czym zatem jest UI i jak wpływa na projekt? 

W tym artykule przybliżę Ci:
  • Definicja UI design
  • Jak projektować UI?
  • Tekst w projekcie
  • Priorytetyzacja informacji
  • Dostępność (Web Content Accessibility Guidelines)

User interface

UI czyli User Interface to, najprościej mówiąc, elementy (najczęściej graficzne, choć nie zawsze) danego projektu, które pozwalają użytkownikowi na interakcję z produktem. Na stronach internetowych czy w aplikacjach będą to zatem wszystkie przyciski, okienka, formularze, układ tekstu, rozmiar i rodzaj fontów czy zdjęcia i animacje. Elementy te mają ułatwić użytkownikowi osiągniecie zamierzonego celu w sposób łatwy i intuicyjny. Wszystkie elementy powinny być również spójne wizualne i estetyczne tak, aby kontakt użytkownika z produktem był nie tylko prosty, ale też wzbudzający pozytywne emocje. Konieczne jest również pamiętanie o tym, do kogo projekt jest kierowany. Nadal obracamy się w świecie skoncentrowanym na użytkowniku, więc musimy kłaść szczególny nacisk na to, aby nasz docelowy użytkownik otrzymał odpowiedni dla siebie produkt. Przykładowo – inaczej wyglądać będzie aplikacja czy strona www skierowana do osób starszych, a inaczej dla dzieci.

Ogólne wskazówki projektowania UI

Projektowanie UI to proces złożony i wymagający czasu oraz zaangażowania całego zespołu. Istnieją jednak ogólne wskazówki, które powinni znać wszyscy twórcy i projektanci, zajmujący się tworzeniem produktów cyfrowych – stron www, aplikacji, czy sklepów www.

Korzystaj ze sprawdzonych rozwiązań

Nie ma potrzeby wymyślania koła na nowo. Jeśli jakieś rozwiązanie jest powszechnie znane, lubiane i rozumiane przez użytkowników, nie staraj się być na siłę oryginalnym. Nie bez powodu, portale społecznościowe skonstruowane są podobnie, a menu na stronach internetowych umieszczone jest zazwyczaj w tym samym miejscu. Istnieją standardy, które wynikają z wieloletnich badań, więc warto się ich trzymać.

Prostota przede wszystkim

Nie komplikuj niepotrzebnie projektu. Im prościej, tym lepiej. Zbyt wiele ozdobników czy fikuśnych fontów sprawi, że projekt będzie nieczytelny. Warto zachować umiar i elegancką, przejrzystą prostotę. Użytkownicy Ci za to podziękują 🙂

Funkcjonalność ponad estetykę

Nawet najpiękniejsza strona czy aplikacja nie będzie lubiana przez użytkowników, jeśli nie będzie funkcjonalna i intuicyjna. Pamiętaj zatem, aby w pierwszej kolejności skupić się na takiej budowie projektu, który będzie prosty i przyjemny w obsłudze.

Tekst w projekcie

Treści zawarte na stronie czy w aplikacji są bardzo ważne dla zrozumienia wykonywanych czynności czy odnalezienia właściwej informacji. Dlatego też zadbaj, aby teksty były odpowiednio przygotowane. Zwróć uwagę na czytelność, kolor i wielkość fontów, odstępy i interlinie, wyrównanie i kontrast. Możesz również wyróżnić najważniejsze elementy tekstu na przykład przez jego pogrubienie.

Priorytetyzacja informacji

Priorytetyzacja informacji to ustalenie hierarchii w sposobie zarządzania treścią w projekcie. Ma wskazywać użytkownikowi, gdzie ma zacząć, jak znaleźć odpowiednią informację, jak osiągnąć zamierzony w projekcie cel.

Wskazówki:

1. Zadbaj o czytelne fonty i przejrzystość.

2. Pamiętaj o prostocie i korzystaniu ze znanych wzorców.

4. Oznacz łącza jako interaktywne.

5. Pokazuj użytkownikowi, gdzie się znajduje

6. Uprość powrót na każdym etapie.

7. Nie twórz zbyt wielu kliknięć.

Dostępność

Na koniec najważniejsze zagadnienie w zakresie UI. Jest nim dostępność czyli takie tworzenie stron www i aplikacji aby były one dostępne dla jak największej liczby użytkowników. W szczególności dla osób, które są zagrożone wykluczeniem cyfrowym.

Zbiór zasad, które opisują dobre praktyki przy prezentacji treści w produktach cyfrowych zawarty jest w dokumencie Web Content Accessibility Guidelines. Warto się z nim dobrze zapoznać, ponieważ jego stosowanie będzie obowiązkowe w krajach Unii Europejskiej od 2025 roku. Ogólne zasady opisane są na stronach rządowych.

Autor:

Ola Gradowska

Mniszka w BOK zenbox.pl. Autorka wielu publikacji w Internecie i prasie. W zenbox.pl od prawie 6 lat. Poza pracą w BOK, wspiera oraz rozbudowuje bazę wiedzy dla Klientów i Mnichów zenbox.pl. Dumna posiadaczka dyplomu z projektowania UX/UI. Prywatnie - nałogowo podróżuje, najczęściej w stronę słońca. W wolnych chwilach pochłania literaturę faktu w każdej formie, spaceruje z psem i gra w gry :)

Może ci się spodobać również

UX - 31 października 2024 16:32

Architektura informacji

Czym jest Architektura Informacji? Architektura informacji (AI) jest fundamentem, na którym buduje się strukturę produktów cyfrowych – aplikacji mobilnych i stron www. Jest to metoda organizowania treści w taki sposób, aby użytkownicy mogli łatwo nawigować, odnaleźć potrzebne informacje i osiągnąć zamierzony przez produkt cel . Architektura informacji jest więc zagadnieniem zajmującym się organizacją i prezentacją […]

Więcej →

Comments
WordPress - 25 października 2024 12:10

Jak wyłączyć komentarze w WordPressie?

Komentarze na WordPress mogą być dobrym sposobem na interakcję z użytkownikami. Niemniej w przypadku niektórych stron mogą one być zupełnie niepotrzebne. Jeśli chcesz całkowicie lub częściowo wyłączyć komentarze w WordPressie, ten poradnik jest właśnie dla Ciebie. Jeżeli jednak borykasz się ze spamerskimi komentarzami i chciałbyś je zablokować, polecamy artykuł pt. Jak zablokować spam w komentarzach […]

Więcej →

Bez kategorii - 24 października 2024 18:18

Persony

W poprzednich artykułach wiele razy wspominałam o tym, jak ważny w każdym projekcie jest użytkownik i jego potrzeby. Rozmawialiśmy też o badaniach i o tym, jak stworzyć produkt najlepiej dopasowany do oczekiwań użytkownika. Kim jednak jest nasz użytkownik? Jak go zidentyfikować? Persona jest właśnie taką reprezentacją naszego użytkownika i dziś przybliżę nieco ten termin. Kim […]

Więcej →