UI i UX. Czy używasz tych terminów zamiennie?

Interfejs użytkownika (UI) i User Experience (UX) to słowa kluczowe w przestrzeni tworzenia stron internetowych i prawdopodobnie w każdej dziedzinie kreatywnej i opartej na technologii. Możesz nie wiedzieć, że te pojęcia, jako pojęcia, istnieją już od bardzo dawna.

Prawdopodobnie wiesz, czym są UI i UX, ale nadal łatwo jest je niewłaściwie wykorzystać. Oferty pracy i wymagania czasami mieszają dwie role, a nawet połącz oni. Prawdopodobnie dlatego, że UI i UX są harmonijne, a wielu projektantów i programistów biegle posługuje się nimi. Ale są to bardzo różne koncepcje – zarówno pod względem obiektywnym, jak i zakresem.

W rzeczywistości lepsze zrozumienie interfejsu użytkownika i UX oraz ich zastosowanie do Ciebie, jako programisty WordPress, jest kluczem do budowania lepszego produktu i marki – co dokładnie omówimy w tym artykule.

Czym Jest User Experience?

Wyróżniającą definicję UX w tworzeniu i projektowaniu stron internetowych jest:

Kultywowanie satysfakcji i lojalności klientów poprzez optymalne rozwijanie użyteczności i pozytywnej reakcji emocjonalnej, którą użytkownik doświadcza z Twoją witryną.

Czy Twoja strona jest łatwa w użyciu? Czy twoi klienci cieszą się z interakcji z Twoją witryną i marką? Są to kluczowe pytania do rozważenia w projektowaniu UX.

Aby stworzyć dobry UX, musisz przede wszystkim dokładnie zrozumieć swoją bazę użytkowników. Celem jest zrozumienie, jak najlepiej dostosować cele biznesowe do potrzeb użytkownika. Aby w pełni to zrozumieć, musisz nieustannie testować i udoskonalać każdy aspekt swojej witryny, aż Twoi użytkownicy (i Ty) będą w pełni zadowoleni.

Aby lepiej zrozumieć tę koncepcję, przyjrzyjmy się temu, co robi Projektant UX.

Projektanci UX zapewniają, że makijaż Twojej witryny logicznie płynie z jednego kroku do drugiego. Przeprowadzają testy zachowania użytkownika, aby zidentyfikować wyzwania, z którymi użytkownik może się zmierzyć, i kontynuują testowanie, dopóki nie wyeliminują tych problemów, aby stworzyć “idealny” UX. Jeśli chodzi o praktyczny przykład, spójrz na opis stanowiska UX Designer w Google.

Najlepszym sposobem na zrozumienie UX jest rdzeń Twojej marki. Definiuje Twoją markę – doświadczenia, które Twoi odwiedzający mają z Twoją witryną. Słowo kluczowe to doświadczenie; Nie strona i jej elementy, ale doświadczenie jako całość.

Mówiąc prościej, gdy twój UX jest dobry, pomaga Twojej marce i firmie prosperować.

Dlaczego UX ma znaczenie dla programistów i projektantów WordPress

Nie można wystarczająco podkreślić, jak UX jest kluczem do Twojej firmy i marki. W tej erze cyfrowej użytkownicy spędzają kilka sekund na lądowaniu w Twojej witrynie, aby zdecydować, czy jest warta ich czasu. Jak przejrzysta, łatwa w użyciu i zorganizowana witryna odgrywa ogromną rolę w określaniu jej sukcesu.

Podróż użytkownika przez witrynę i jego ogólne doświadczenie musi być przyjemne i znaczące. Muszą być całkowicie zanurzone w Twojej witrynie i Twoim produkcie przez cały czas pobytu. Oznacza to, że musisz nadać swojej witrynie “osobowość”, z którą użytkownicy mogą się identyfikować, a także ułatwić korzystanie z niej. Połącz się głęboko ze swoimi użytkownikami w ten sposób lub ryzykuj ich utratę.

Znaczenie to wykracza poza pierwszą stronę każdej witryny, którą projektujesz. Ważne jest również doświadczenie użytkownika lub klienta (jeśli ma dostęp). Muszą być w stanie używać go z ich perspektywy, w sposób, który wydaje im się naturalny. Dostosowanie jest tutaj kluczowe. Obecnie możesz dostosować panel administracyjny w WordPress za pomocą różnych wtyczek (takich jak nasz własny ostateczny Branding).

Bezpośrednią korzyścią dla Ciebie, oprócz wzrostu działalności, jest zmniejszenie kosztów rozwoju, wsparcia i konserwacji. Możesz spędzić czas na opracowywaniu nowych i lepszych produktów lub usług, aby rozwijać swoją firmę i lepszą markę.

Och, i dbaj o zadowolenie odwiedzających witrynę i klientów.

Illustration of various devices

Jak poprawić UX

Zacznijmy tę sekcję od przykładu tego, co zły UX na to wygląda.

Czy pamiętasz uruchomienie HealthCare.Gov? stała się ikoną dobrego doświadczenia użytkownika nie jest. Przestoje w witrynie, przeciążone serwery, złożona nawigacja w witrynie i inne awarie funkcji były jego charakterystycznymi cechami.

Nie chcesz tego.

Mając powyższe na uwadze, najpilniejszym sposobem poprawy UX jest utrzymanie go na wszystkich etapach rozwoju produktu. Strona offline reprezentuje najgorsze możliwe doświadczenie UX. Może to wydawać się oczywiste, ale jak ciasny jest uchwyt na czas pracy i ile pracujesz, aby zapewnić maksymalny czas pracy witryny?

Teraz rozważmy niektóre z kluczowych aspektów pozytywne doświadczenie użytkownika:

  • Pozytywna reakcja emocjonalna
  • Poczucie kontroli
  • Trafność
  • Zrozumienie

Przyjrzyjmy się obecnym trendom UX, które obejmują powyższe cechy.

Responsive Web Design

Dzięki zwiększonemu wykorzystaniu urządzeń mobilnych, UX koncentruje się teraz w dużym stopniu na zapewnianiu doskonałych wrażeń responsywnych.

Google zdecydowanie zaleca stosowanie responsywnego projektu w celu dostosowania go do standardów usług. Celem jest stworzenie ujednoliconego doświadczenia użytkownika na wszystkich urządzeniach.

Content-Focused Design

Układy skoncentrowane na treści są niezbędne dla UX. Użytkownicy angażują się i znajdują wartość dzięki twoim treściom. Upewnij się, że jest on wyświetlany w widocznym i estetycznym miejscu, aby zapewnić użytkownikom cenne wrażenia.

Określenie wspaniałego UX jest w miarę subiektywne, dlatego nadmierne testowanie UX jest dobrym pomysłem. Rzućmy okiem na wypróbowany i przetestowany dobry UX w WordPress.

Przykłady UX w WordPress

Amax jest jednym z najbardziej responsywnych motywów. Jest elastyczny i adaptacyjny, zapewniając użytkownikom wspaniałe i przyjemne wrażenia. Układ jest zarówno zorganizowany, jak i płynny. Świetny projekt do przedstawienia każdej historii.

Responsive and easy to use AMAX WordPress theme
Responsywny i łatwy w użyciu motyw AMAX WordPress

Prostota. Nazwa mówi wszystko. Jest to motyw płaskiej siatkówki, który koncentruje się na wizualnym tworzeniu najlepszej historii dla użytkowników. Każdy może zrozumieć i łatwo wchodzić w interakcje z witryną, która przyjmuje ten motyw.

Clean flat retina Simplicity WordPress theme
Clean flat Retina Simplicity WordPress theme

Deweloperzy zawsze traktowali UX bardzo poważnie, teraz bardziej niż kiedykolwiek.

Sprawdź naszą listę witryn 15 WordPress, które zmieniają grę projektową, aby zobaczyć więcej przykładów zarówno UX , jak i UI.

Co To jest interfejs użytkownika (UI)?

Interfejs użytkownika to fizyczne i techniczne elementy, które umożliwiają użytkownikowi interakcję z technologią lub produktem, tj. elementy sterujące, przyciski itp. Interfejs wizualnie przedstawia elementy UX, które zostały opracowane w celu zapewnienia znaczącej i przyjemnej interakcji z użytkownikiem.

Co robią projektanci UI?

Projektują układy produktów, aby wizualnie komunikować to, co zaprojektował UX. Tworzą typografię, ikony i inne interaktywne elementy, które rozwiązują bezpośrednie problemy z interakcją dla użytkownika. Na przykład projektant interfejsu użytkownika odpowiedzialny za utworzenie panelu administracyjnego WordPress może zdecydować, czy użyć suwaka, przycisku lub strzałki do wykonania zadania, czy przejść do innej sekcji. Są one również odpowiedzialne za zapewnienie, że wszystkie elementy techniczne są spójne i stosowane we wszystkich dziedzinach.

Zapoznaj się z opisem stanowiska projektanta interfejsu użytkownika w KPMG.

Dlaczego interfejs użytkownika ma znaczenie dla programistów i projektantów WordPress

Dobry interfejs użytkownika może stworzyć lub złamać witrynę WordPress. Ważne jest, aby użytkownik mógł wchodzić w interakcję z witryną w intuicyjny i wydajny sposób bez żadnych zakłóceń. Skoncentruj się w równym stopniu na projekcie i funkcji, aby uzyskać czystą, intuicyjną i wydajną witrynę.

W WordPress interfejs użytkownika jest również Panel użytkownika backend admin i narzędzia, które umożliwiają całą zawartość i produkcję internetową. Ważne jest, aby Programiści WordPress zbudowali funkcjonalny pulpit nawigacyjny z wysoce operacyjnym i sprawnym interfejsem użytkownika.

Rozważmy na przykład dwa motywy WordPress lub wydarzenia, które mają tę samą funkcjonalność, ale różne interfejsy użytkownika. Który z nich byłby lepszy pod względem uzyskiwania większej liczby pobrań lub użytkowników? Prosty: ten, który ma łatwiejszy, szybszy, bardziej intuicyjny i interaktywny interfejs użytkownika.

Twoi klienci chcą korzystać z czegoś czystego, zorganizowanego, przejrzystego i intuicyjnego.

Jak poprawić swój interfejs użytkownika / Kluczowe cechy

Tworzenie dobrego interfejsu użytkownika jest wymagające i wymaga dużo organizacji.

Co sprawia, że dobry interfejs użytkownika? To trudne pytanie, a odpowiedź nie jest tak prosta. (Poniższe przykłady dadzą ci bardziej wizualne zrozumienie.) Oto niektóre cechy dobrego interfejsu użytkownika:

  • Konsekwentny: projekt i zachowanie w całej witrynie powinny być spójne
  • Intuicyjny: powinien działać tak, jak użytkownik racjonalnie tego oczekuje i nie powinien przechodzić krzywej uczenia się
  • Responsive: projekt i układ powinny być elastyczne na różnych urządzeniach
  • Znajomy: zmiany w projekcie i zachowanie nie powinny być zbyt drastyczne lub nieznane użytkownikowi
  • Czyste: zorganizowana, płaska i prosta konstrukcja i funkcja
  • Elegancki: estetyczny design i układ
  • Wydajny: efektywność jest kluczowa szczególnie, jeśli użytkownik musi spędzać dużo czasu na swojej stronie
  • Content-focused: treść, tekst lub obraz, jest potężny i dodaje wartość

Top Trendy UI

Projektowanie Materiałów

Projekt materiałowy Google to nowy rodzaj “płaskiego” projektu, którego używają Apple i Microsoft. Projektowanie materiałów, podobnie jak płaska konstrukcja, jest skoncentrowane na treści, elastyczne i usprawnione, łącząc jednocześnie ruch wizualny i projektowanie interakcji. Sprawia, że strona wygląda czystiej i poprawia wydajność. Wielu programistów internetowych tworzy witryny oparte na tej koncepcji.

Układy Kart

Układy kart są powszechnie przyjmowane ze względu na ich prosty, czysty, wszechstronny wygląd. Jest to również dobry sposób na przetrawienie i udział w twojej historii. Można go łatwo zintegrować z responsywnymi układami, aby uzyskać doskonałą interakcję z użytkownikiem.

Mikro-interakcje

Mikro-interakcje są zawarte momenty produktu, które wykonują jedno małe zadanie. Ustawienie alarmu, wyciszenie telefonu i przesyłanie pliku to przykłady mikro interakcji. Mimo że mikro-interakcje są małe, prawie niewidoczne, mogą znacznie poprawić interfejs użytkownika i UX, jeśli są dobrze zaimplementowane. Klasycznym tego przykładem jest przycisk Lubię to na Facebooku. Wielu programistów internetowych wykorzystuje ten interfejs użytkownika, ponieważ użytkownicy oczekują prostych i skutecznych mikro-interakcji.

Typografia

Typografia odgrywa ogromną rolę w projektowaniu interfejsu użytkownika. Usługi czcionek internetowych, takie jak Google Fonts i Typekit, oferują szeroką gamę wysokiej jakości czcionek w celu ulepszenia interfejsu użytkownika.

Ikony

Ikony są używane wszędzie. Stały się idealnym zamiennikiem ciężkich obrazów i tekstów. Mogą stworzyć zabawną i czystą atmosferę na stronie. Więcej programistów używa ich w ulepszeniach interfejsu użytkownika.

Przewijanie

Kolejny efekt zwiększonego wykorzystania urządzeń mobilnych. Kliknięcie to wczorajsze zadanie, użytkownik 2015 chce przewijać, nie tylko na urządzeniach mobilnych, ale na wszystkich urządzeniach. Dzieje się tak, ponieważ przewijanie paralaksy tworzy wspaniałe wrażenia z treści i znacznie skraca czas ładowania sieci. Jest to element dobrego interfejsu użytkownika, który programiści muszą przyjąć.

Przykłady UI w WordPress

Chociaż poniższe motywy nie mają potężnych interfejsów administracyjnych, są przykładami świetnego interfejsu użytkownika w WordPress.

Domyślny motyw dwudziestu piętnastu jest ucieleśnieniem Wielkiego interfejsu użytkownika. Jest czysty, prosty, wydajny, responsywny, intuicyjny i skoncentrowany na treści-to wielka poprawa w stosunku do poprzedniej wersji, Twenty Fourteen.

Twenty Fifteen WordPress theme in yellow.
Czysty, skoncentrowany na treści motyw Twenty Fifteen WordPress w Kolorze Żółtym.

Kolejny płaski projekt i w pełni responsywny czysty motyw to Themeforest Forest WordPress theme. Ma wiele elementów dostosowywania, aby dodać elegancji i zwiększyć wydajność.

Themeforest Forest Theme
Forest-płaski motyw WordPress

Podsumujmy

Podsumowanie i ustalenie charakterystycznej definicji UX i UI: UI to komponenty, które umożliwiają użytkownikowi efektywne korzystanie z produktu, A UX jest kulminacyjnym efektem wszystkich tych komponentów dla użytkownika. Innymi słowy, interfejs użytkownika jest narzędziem do osiągnięcia lepszego doświadczenia użytkownika.

Bardzo ważne jest, aby nie mylić tych dwóch. Jeśli jesteś na rynku dla projektanta lub zarządzasz zarówno jako programista, musisz mieć bardzo jasne zrozumienie tego, co projekt interfejsu i projektowanie user experience pociągają za sobą. Zacieranie linii między nimi może być kosztowne dla Twojego produktu, firmy i marki.

Co z panelem administracyjnym WordPress?

Panel administracyjny WordPress przeszedł długą drogę pod względem UI i UX. Wyobraź sobie aktualną wersję interfejsu użytkownika WordPress z mnóstwem funkcji, układów, kategorii, wtyczek itp. Teraz rozbierz to nagie, aż do minimalnych funkcji i jednej kategorii postów. To była wersja 2003 panelu administracyjnego WordPress.

WordPress circa 2003.
WordPress około 2003 roku.

Został opracowany przez lata z dodanymi funkcjami, takimi jak sprawdzanie pisowni; tysiące wtyczek; przekierowania URL i struktury; edytory wizualne; edycja wsadowa (wtyczek, motywów itp.); widżety; API; nowe i ulepszone projekty pulpitów nawigacyjnych; Automatyczna konserwacja; lepsze wsparcie; lepsze wyszukiwanie; funkcjonalność wielu urządzeń; i mnóstwo innych funkcji. WordPress nadal w dużej mierze zależy od różnych wtyczek dla lepszych funkcji UI i UX.

The current WordPress backend.
Obecny backend WordPress.

To, co chcemy zobaczyć z WordPress w najbliższej przyszłości, to bardziej przejrzysty panel administracyjny, który umożliwia łatwe wizualne dostosowanie całej witryny. Byłoby idealnie, gdyby WordPress UX były wysoce spersonalizowane i dostosowane do indywidualnego użytkownika, bez potrzeby stosowania wtyczek.

UX i UI: gdzie dalej?

Oto kilka dalszych informacji, które pomogą Ci w pełni zrozumieć i wdrożyć UI i UX na swojej stronie:

  • Fundamenty UX (Envato UX Foundations course)
  • Lynda.com tutoriale UX (54 Lynda.com kursy wideo UX dla początkujących, średniozaawansowanych i doświadczonych programistów i projektantów)
  • Samouczek przepływu pracy dla programistów: dostarczaj lepszy UI / UX na czas (przewodnik po tworzeniu przepływu pracy projektowej UX / UI, który działa najlepiej dla Twojego zespołu)
  • 12 interaktywnych samouczków do projektowania UX dla początkujących (12 pokazów slajdów, które szczegółowo opisują UX)

 

Kredyty na zdjęcie: WPBeginner.

Czy przegapiliśmy któryś z Twoich ulubionych zasobów UX/UI? Czy ten artykuł wpłynął na zmianę elementów projektu? Daj nam znać w komentarzach poniżej.

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…