Podstawy projektowania interfejsu użytkownika: wszystko, co musisz wiedzieć jako początkujący

Opublikowany: 2021-11-19

Być może widziałeś, jak pojawiają się w Twoim kanale informacyjnym, a projektanci i osoby nie będące projektantami gorączkowo dzielą się swoją opinią. Dlaczego tak jest?

Przez większość naszych dni wszyscy pracujemy w jakimś interfejsie. Kiedy otwieramy telefon, uruchamiamy laptopa w pracy, wchodzimy w interakcję ze znajomymi przez media społecznościowe lub robimy zakupy online: wszyscy mają – miejmy nadzieję – przemyślany interfejs.

Projekt interfejsu użytkownika wpływa na nas wszystkich. Dlatego wszyscy mamy na ten temat swoje zdanie, świadomie lub nie. Na szczęście coraz więcej marek zwraca uwagę na znaczenie dobrego interfejsu użytkownika, a nasze doświadczenia online stają się coraz przyjemniejsze.

Ponieważ świetny projekt nie tylko dobrze wygląda — działa dobrze. Jest częścią marketingu i jest napędzany wiedzą na temat zachowań użytkowników i psychologii konsumenckiej.

Tak więc, niezależnie od tego, czy jesteś początkującym projektantem, przedsiębiorcą lub menedżerem, który chce zatrudnić swojego kolejnego wielkiego projektanta, będziesz chciał poznać podstawy. Aby stworzyć coś więcej niż tylko ładny obrazek, zapewnić lepsze opinie, uszczęśliwiać użytkowników i pomagać im lepiej.

Zacznijmy więc od podstaw. Omówimy:

  • Czym jest projekt interfejsu użytkownika i czym różni się od projektowania interfejsu użytkownika
  • Dlaczego projektowanie interfejsu użytkownika jest tak ważne
  • Jakie elementy w projekcie tworzą fundament?
  • Jak zacząć efektywnie projektować za pomocą Design Thinking

Zawartość

  • 1 Czym są projektowanie UI i projektowanie UX?
  • 2 Dlaczego solidny interfejs użytkownika jest ważny?
  • 3 Najważniejsze elementy interfejsu użytkownika
    • 3.1 Sterowanie wejściem
    • 3.2 Elementy nawigacyjne
    • 3.3 Komponenty informacyjne
    • 3.4 Kontenery
  • 4 Jak zacząć projektować: użyj metody myślenia projektowego
    • 4.1 Krok 1: Empatyzuj
    • 4.2 Krok 2: Zdefiniuj
    • 4.3 Krok 3: Ideuj
    • 4.4 Krok 4: Prototyp
    • 4.5 Krok 5: Testowanie
  • 5 Czy jesteś gotowy, aby stworzyć swój pierwszy projekt interfejsu użytkownika?

Czym są projektowanie interfejsu użytkownika i projektowanie UX?

Możesz być zdezorientowany terminami UI i UX design: interfejs użytkownika i doświadczenie użytkownika. Zacznijmy od tego, żeby to zrobić dobrze. Czym jest projektowanie interfejsu użytkownika , a czym nie?

Wyobraź sobie układanie boiska do piłki nożnej na wzgórzu ze skałami. Może wyglądać imponująco, ale nie jest to praktyczne.

Interfejs to podstawa, na której można budować doświadczenie.

Obaj powinni ze sobą współpracować. Oczywiście jest tam pewne nakładanie się, ale na razie skupmy się na projektowaniu interfejsu użytkownika.

UI oznacza interfejs użytkownika: jest to miejsce, w którym użytkownik porusza się po stronie internetowej, aplikacji lub dowolnym rodzaju oprogramowania. Projektowanie interfejsów użytkownika polega zatem mniej na wyglądzie, a bardziej na projektowaniu pod kątem działań.

Oczywiście musi wyglądać świetnie i pasować do przewodnika po stylu marki, ale projektowanie interfejsu użytkownika polega na stworzeniu platformy lub strony, na której użytkownicy mogą wykonywać pożądane działania tak szybko i płynnie, jak to możliwe.

Dodaj do koszyka, umów się na spotkanie, pobierz e-booka: projekt interfejsu użytkownika ma na celu wyeksponowanie wszystkich tych wezwań do działania. Najlepiej bez rozpraszania uwagi.

Tak więc, jeśli chcesz być dobrym projektantem interfejsu użytkownika, powinieneś wiedzieć, że ludzie niekoniecznie zauważą twój projekt. Surowe, tak, ale najlepsze interfejsy użytkownika to te, o których ledwo można powiedzieć, że tam są – nie ma blokad dróg ani czkawek. To wszystko płynnie płynie.

Dlaczego solidny interfejs użytkownika jest ważny?

Jeśli kiedykolwiek będziesz potrzebować obrony, dlaczego naliczasz określoną stawkę jako projektant interfejsu użytkownika, oto jedna: 70% firm internetowych, które upadają, upada z powodu złej użyteczności w swojej witrynie lub aplikacji.

Niektóre projekty po prostu nie są kwestią gustu, to kwestia psychologii. Dobry projekt interfejsu użytkownika bezpośrednio wpływa na współczynniki konwersji i satysfakcję użytkownika.

Chcesz, aby ktoś jak najszybciej kupił, zarezerwował lub wykonał jakąkolwiek inną czynność — zanim stracisz jego uwagę.

Chcesz ułatwić te interakcje, projektując interfejs, który jest responsywny, logiczny i wydajny.

Użytkownicy mają wysokie oczekiwania: wystarczy spojrzeć na liczbę doskonale zaprojektowanych aplikacji, z których wszyscy korzystamy na co dzień.

Frustracja i złe doświadczenia są tym, czego chcesz uniknąć: słowa rozchodzą się szybko, a negatywne słowa jeszcze szybciej: 44% kupujących powie swoim znajomym o złym doświadczeniu online. 88% kupujących online twierdzi, że nie wróciłoby po takim doświadczeniu.

Najważniejsze elementy interfejsu użytkownika

Zanim zaczniesz projektować swoją pierwszą stronę internetową lub aplikację, przejrzyj listę kontrolną wszystkich ważnych elementów, które możesz znaleźć w interfejsie i co powinieneś o nich wiedzieć.

Możemy podzielić elementy dowolnego interfejsu użytkownika na mniej więcej cztery kategorie.

  1. Kontrola wejścia
  1. Komponenty nawigacyjne
  2. Komponenty informacyjne
  3. Kontenery

Oto, jakie elementy można znaleźć w tych czterech kategoriach.

Kontrola wejścia

To wszystko, co umożliwia użytkownikowi umieszczenie informacji w systemie. Pomyśl o polu, w którym mogą zostawić swój adres e-mail, polu wyboru, w którym wyrażają zgodę na pliki cookie lub kalendarzu, w którym mogą wybrać datę spotkania.

Ważne jest, aby zachować równowagę. Chcesz uniknąć budowania interfejsu, który prosi o zbyt wiele informacji i wymaga zbyt wielu działań.

Spróbuj ograniczyć je do minimum i zbieraj tylko dane, których naprawdę potrzebujesz. Ponadto upewnij się, że udostępnianie informacji jest wystarczająco łatwe, zarówno na telefonach komórkowych, jak i komputerach stacjonarnych. Rozwijane menu może działać na dużym ekranie, ale nie na smartfonie.

Elementy nawigacyjne

Te elementy pomagają użytkownikom poruszać się po aplikacji lub stronie internetowej. Na przykład trzy kropki w prawym górnym rogu strony w chromie. Lub trzy wiersze po lewej stronie witryny, które wskazują, że pod nią jest ukryte menu.

Projektując z tymi elementami, wybieraj ikony i kształty, które ludzie rozpoznają. Dom wskazuje na dom. Trójkąt oznacza „zabawę”. To nie jest ta część, w której powinieneś być zbyt kreatywny, chcesz, aby była prosta i zrozumiała dla mas.

Komponenty informacyjne

Elementy informacyjne służą do udostępniania informacji użytkownikom. Pomyśl o pasku postępu, który pokazuje, ile czasu zajmie załadowanie czegoś. Lub podpowiedzi, które pojawiają się po najechaniu kursorem na przycisk, a nawet okno komunikatu z informacjami.

Sztuczka polega na tym, aby wiedzieć, co wymaga wyjaśnienia, a co nie. Nie wyjaśniaj za bardzo prostych rzeczy, ale jeśli wprowadzisz coś „nowego”, upewnij się, że użytkownicy wiedzą, jak tego używać.

Kontenery

Dopasuj i dopasuj. Kontenery służą do utrzymywania powiązanej treści blisko siebie i upewniania się, że odpowiada ona rozmiarowi ekranu użytkownika.

Możesz mieć tylko tyle działań na jednym ekranie w tym samym czasie. Tego nauczą Cię kontenery. Nie próbuj pokazywać wszystkiego na raz.

Sprawdź także: Projektowanie i tworzenie stron internetowych – wszystko, co musisz wiedzieć

Jak zacząć projektować: użyj metody myślenia projektowego

Nie możesz się już doczekać, aby zacząć projektować? Możesz sobie wyobrazić świetny projekt, ale nie wiesz, od czego zacząć.

Podsumowując, pokażemy, czym jest myślenie projektowe i jak zapewnia doskonałe ramy, w których można tworzyć niesamowite projekty — które dobrze się sprawdzają.

Design Thinking to proces projektowania, który obraca się wokół tego, jak użytkownik zrozumie, użyje i przyjmie projekt oraz zachowa się w nim.

Czy ludzie będą musieli nauczyć się korzystać z Twojego projektu? A może przyjdzie im to naturalnie, prowadząc do szybszej i większej liczby konwersji?

Myślenie projektowe pomaga stworzyć coś, co spełnia potrzeby użytkowników i zapobiega zbytniemu skupianiu się na szalonych pomysłach projektowych — zarówno własnych, jak i klienta.

Ponieważ jedna rzecz, o której należy pamiętać, kiedy zaczynasz projektować: robisz to dla użytkownika.

Design Thinking przebiega w pięciu fazach. Przeprowadzimy Cię przez nie.

Krok 1: Okaż empatię

Czas poznać przyszłych użytkowników. Czego szukają, otwierając Twoją aplikację lub klikając na Twoją stronę internetową? Co motywuje ich do bycia tam, jakich doświadczeń poszukują i jak się zachowują? Ta informacja ma kluczowe znaczenie dla kontynuowania procesu.

Krok 2: Zdefiniuj

Jaki problem rozwiąże Twój projekt? W ten sposób należy podejść do projektów, które mają być używane. Zdefiniuj kluczowe problemy i wyzwania, z jakimi borykają się Twoi użytkownicy oraz którym z nich należy nadać priorytet w procesie projektowania.

Krok 3: Pomysł

Czas rzucić na stół wszystkie swoje pomysły – związane ze zdefiniowanymi wcześniej wyzwaniami i problemami. Znajdź rozwiązania tych problemów i zacznij myśleć o tym, jak to będzie wyglądać na ekranie. Burza mózgów, mapa myśli, szkic — użyj dowolnej techniki, która rozbudzi Twoje kreatywne soki, ale nie straci z oczu Twoich prawdziwych celów.

Krok 4: Prototyp

Połącz pomysły, które najlepiej wyglądają na papierze i stwórz prototyp. Może to być uproszczona i zmniejszona wersja, a na pewno nie musi być jeszcze klikalna. Każdemu rozwiązaniu przydziel miejsce na stronie i sprawdź, czy rozwiązałeś wszystkie problemy.

Krok 5: Testowanie

Między krokami czwartym i piątym będziesz kilkakrotnie poruszać się tam iz powrotem, ponieważ będziesz musiał aktywnie przetestować swój interfejs. Najlepiej z prawdziwymi użytkownikami. Zbieraj opinie i obserwuj, jak ludzie reagują na interfejs, aby znaleźć i wyeliminować wszelkie przeszkody.

Czy jesteś gotowy, aby stworzyć swój pierwszy projekt interfejsu użytkownika?

Jeśli jesteś entuzjastą projektowania interfejsu użytkownika, zacznij od postawienia się w sytuacji użytkownika. Odwiedzaj strony internetowe i aplikacje i aktywnie staraj się znajdować punkty poprawy oraz staraj się zrozumieć, dlaczego dokonano pewnych wyborów. Zawsze mając to w pamięci, na dłuższą metę staniesz się świetnym projektantem interfejsu użytkownika.

Czytaj więcej:

  • Hootsuite vs Buffer – co jest lepsze do zarządzania mediami społecznościowymi?
  • Przegląd i raporty to moduły w ramach którego produktu Hootsuite?
  • Jak zostać twórcą treści w mediach społecznościowych i zarabiać?
  • Jak przyciągnąć użytkowników mediów społecznościowych do udostępniania treści wideo online?