Projektowanie interfejsu użytkownika witryny: Przewodnik dla początkujących

Interfejsy użytkownika, w skrócie UI, są niezwykle ważną częścią projektowania stron internetowych, która zajmuje się tym, jak odwiedzający mogą poruszać się po wielu różnych stronach i materiałach interaktywnych, które ma do zaoferowania witryna. Interfejs użytkownika był znacznie prostszy we wczesnych dniach Internetu, ponieważ HTML był gwiazdą programu, a wybór artystyczny był stosunkowo niewielki. Jednak technologia tworzenia stron internetowych i oczekiwania użytkowników Internetu wzrosły wykładniczo w ciągu ostatnich kilku dekad, co sprawia, że ​​fizyczny wygląd i użyteczność projektowania interfejsu internetowego są absolutnie krytyczne.

Dla tych, którzy chcą zwiększyć ruch i poprawić SEO, interfejs witryny jest jednym z najważniejszych czynników. Posiadanie estetycznej, łatwej w użyciu witryny internetowej jest gwarantowanym sposobem, aby odwiedzający nie tylko klikali różne strony internetowe, ale także ponownie odwiedzali witrynę i polecali ją innym.

Podstawy dobrego projektowania interfejsu internetowego

Chociaż wygląd jest ważny, łatwość korzystania z witryny jest głównym sposobem na zwiększenie popularności i stworzenie dedykowanej bazy użytkowników. Kluczem jest połączenie różnych elementów interfejsu, aby układy stron internetowych były jak najbardziej niezmienne i logiczne. Użytkownicy nie chcą się zbytnio zgadywać ani przeciążać, gdy próbują poruszać się po stronach w witrynie. Konieczne jest, aby było jasne, gdzie znajdują się elementy interfejsu na stronie, mają opis tych elementów

od razu zrozumiałe i sprawić, by rozmieszczenie elementów było jak najbardziej identyczne na każdej stronie. Chociaż ostatnie wymaganie może być trudne do spełnienia, posiadanie spójnego sposobu przeglądania witryny, takiego jak uniwersalny pasek nawigacyjny, jest istotną częścią dobrego projektu witryny.

Typowe elementy projektu internetowego interfejsu użytkownika, na które należy zwrócić szczególną uwagę, to:

• Podpowiedzi
• Paski kart (specjalnie dla użytkowników mobilnych)
• Steppery/Suwaki
• Pola wyszukiwania
• Paski boczne
• guziki
• Bułka tarta (trasy linków)
• Selektory daty/godziny
• Ikony
• Powiadomienia
• Menu (kebab, hamburger, bento, doner, klopsik)
• Sekcje komentarzy
• Paski postępu
• Przyciski kontrolne/radiowe
• Akordeon

Właściwa kombinacja elementów interfejsu może znacznie poprawić wrażenia użytkownika, chociaż najlepiej nie komplikować wszystkiego. Na przykład kolor może być skutecznie wykorzystany do skierowania uwagi ludzi na określone części strony internetowej, ale jeśli odbywa się to kosztem utrudnienia czytania strony lub odwrócenia uwagi od innych elementów, ostatecznie prawdopodobnie nie jest tego wart.

Projekt interfejsu użytkownika powinien być stosunkowo płynny i zapewniać poczucie zaufania, że ​​twórcy witryn internetowych są autorytetem w każdym temacie, dla którego tworzą treści. Powinna brać pod uwagę to, czego użytkownicy szukają podczas poruszania się po stronach, aby nie musieli się zbytnio zastanawiać nad strukturą witryny. Treść witryny powinna być ustrukturyzowana logicznie, z rozsądną hierarchią informacji i usług.

Złożone zadania muszą być skondensowane w proste struktury, do których użytkownicy mają łatwy dostęp. Na przykład posiadanie rozwijanego menu z najważniejszymi informacjami wymienionymi u góry, a wszystko inne wymienione w porządku malejącym według ważności. Byłaby to świetna alternatywa dla po prostu umieszczania kilku losowych linków lub funkcji obok siebie na pasku bocznym lub pasku nawigacyjnym. Na przykład:

(Źródło zdjęcia: średnie)

Elementy UI powinny zawsze znajdować się obok siebie w sposób maksymalizujący zainteresowanie użytkowników. Jeśli witryna ma zainstalowaną funkcję wyszukiwania, zawsze dobrym pomysłem jest umieszczenie przycisków wyszukiwania obok miejsc, w których użytkownicy wybierają lub wprowadzają wyszukiwane hasła. Kodowanie kolorami może ogromnie pomóc w takich sytuacjach, ale tylko wtedy, gdy nie koliduje z resztą układu strony.

Dobrym pomysłem jest również unikanie umieszczania zbyt wielu informacji na jednej lub tylko kilku stronach. Nawet jeśli ogólnie w witrynie dostępnych jest wiele dobrych informacji lub narzędzi, jeśli zbyt wiele z nich jest skompresowanych na zbyt małej przestrzeni, użytkownikom będzie trudno się poruszać, co skutkuje słabym doświadczeniem i chęcią uniknięcia przyszłych wizyt . Chociaż użytkownicy mogą być nieświadomi niektórych funkcji witryny, jeśli wszystko jest rozmieszczone bardziej równomiernie, zostanie to z nadwyżką zrekompensowane przez ułatwienie zrozumienia treści.

Przetestuj SEO i wydajność swojej witryny w 60 sekund!

Dobry projekt witryny ma kluczowe znaczenie dla zaangażowania użytkowników i konwersji, ale powolna witryna lub błędy wydajności mogą sprawić, że nawet najlepiej zaprojektowana witryna internetowa będzie działać gorzej. Diib to jedno z najlepszych na świecie narzędzi do monitorowania wydajności i SEO. Diib wykorzystuje moc big data, aby szybko i łatwo zwiększyć ruch i rankingi. Jak widać w Przedsiębiorcy!

• Łatwe w użyciu automatyczne narzędzie SEO
• Monitorowanie słów kluczowych i linków zwrotnych + pomysły
• Zapewnia szybkość, bezpieczeństwo, + śledzenie Core Vitals

• Inteligentnie sugeruje pomysły na poprawę SEO
• Ponad 250 000 000 członków na całym świecie
• Wbudowane testy porównawcze i analiza konkurencji

Na przykład „www.diib.com”

Zarejestruj się za darmo

Używany przez ponad 250 tys. firm i organizacji:

• 
• 
• 
• 

Synchronizuje się z

Rzeczy do wdrożenia w projektowaniu interfejsu użytkownika strony internetowej

Po usunięciu podstaw projektowania internetowego interfejsu użytkownika, warto przyjrzeć się bardziej zaawansowanym czynnikom, które mogą znacznie poprawić wrażenia użytkownika.

• Zapewnij opcje opinii o witrynie : Chociaż niektórzy mogą dokładnie określić, co użytkownicy będą cieszyć się lub nienawidzić w układzie witryny, w rzeczywistości większość ludzi jest taka, że ​​będą niezliczone problemy, o których będą całkowicie nieświadomi .

Realistycznie rzecz biorąc, jedynym sposobem, w jaki nastąpią ulepszenia witryny, jest stały strumień informacji zwrotnych od odwiedzających witrynę, stwierdzających, co im się podobało lub czego nie podobało się w ich doświadczeniu użytkownika. Większość odwiedzających nie będzie się starać, aby powiedzieć administratorom, co sądzą o witrynie, dlatego bardzo ważne jest, aby mieć opcję przesyłania opinii, która jest łatwa do znalezienia i łatwa w użyciu. Oto przykład szablonu opinii o witrynie, który jest łatwy w użyciu:

(Źródło zdjęcia: Mopinion)

• Pamiętaj o urządzeniach mobilnych : w dzisiejszym świecie coraz więcej wyszukiwań internetowych odbywa się na telefonach i tabletach. Niestety, dobry projekt interfejsu internetowego, który wydaje się bezbłędny na komputerze, niekoniecznie będzie wyglądał tak dobrze na urządzeniu mobilnym. W niektórych przypadkach strona internetowa może być niemożliwa do użycia na telefonie. Analiza witryny byłaby w tym przypadku nieoceniona, ponieważ mogłaby ujawnić, czy duży odsetek odwiedzających korzysta z urządzeń mobilnych jako głównej opcji wyszukiwania w sieci. W przypadku, gdy te informacje są nieznane, dobrym pomysłem byłoby zachowanie ostrożności i stworzenie układu interfejsu użytkownika, który będzie pamiętał o telefonach i podobnych urządzeniach. Istnieją narzędzia, które mogą pomóc w ustaleniu, czy Twoja witryna jest przyjazna dla urządzeń mobilnych, takie jak Test optymalizacji mobilnej Google:

(Źródło obrazu: Pomoc Google)

• Zawsze umieszczaj zmiany ustawień we właściwym miejscu : chociaż strony internetowe można projektować fachowo, nieuchronnie będą istniały opcje dotyczące układu i projektu, które są całkowicie w rękach użytkowników. Mogą to być takie rzeczy, jak informacje biograficzne, zdjęcia profilowe i opcje przesyłania wiadomości. W przypadku, gdy użytkownik chce coś zmienić, opcje, aby to zrobić, powinny być oczywiste i łatwo dostępne. Zwykle wiąże się to z dodaniem znajomej, łatwej do rozpoznania ikony w rogu sekcji strony internetowej, w której będą miały miejsce zmiany, np. umieszczenie ikony ołówka w prawym górnym rogu sekcji „o mnie”.
• Użyj pasków postępu dla formularzy : Łatwość użycia jest absolutnie kluczowa, aby strona była atrakcyjna. W wielu przypadkach może być konieczne, aby użytkownicy wypełnili formularze w celu uzyskania dostępu do usług. Chociaż projektowanie formularzy tak, aby były jak najbardziej wszechstronne i odpowiednie, powinno być priorytetem, tak naprawdę nie wystarczy zmaksymalizować doświadczenie klienta. W przypadku formularzy, które zawierają zbyt dużo informacji, dobrym pomysłem jest rozbicie ich na sekcje.

Ludzie nie lubią być przytłoczeni zbyt wieloma zadaniami na raz, więc podzielenie próśb o przesłanie na łatwe do naśladowania i spójne tematycznie części przekona ludzi do trzymania się procesu znacznie dłużej niż w innym przypadku. Tej sekcji formularza zgłoszeniowego powinien również towarzyszyć pasek postępu wskazujący, jak daleko użytkownik musi przejść, zanim zostanie wypełniony. Skutkuje to nie tylko łagodnym poczuciem spełnienia, gdy każda sekcja zostanie ukończona, ale także da wskazówkę, jak daleko ktoś musi przejść, zanim zadanie zostanie ukończone. Na przykład:

(Źródło zdjęcia: Drybling)

• Zastosuj zabezpieczenia, aby zapobiec błędom użytkowników : Zwłaszcza jeśli witryna internetowa zawiera wiele informacji finansowych lub jest bardzo czasochłonna, może to być niewygodne lub frustrujące dla użytkowników, jeśli każdy mały błąd, który popełnią, może mieć poważne konsekwencje. Zrozumienie, jakie błędy mogą popełniać ludzie, i znalezienie sposobów na ich zapobieganie lub danie możliwości ich naprawienia znacznie poprawi satysfakcję odwiedzających z witryny. Tego rodzaju zabezpieczenia często można spotkać w witrynach e-commerce, gdy proszą klientów o potwierdzenie, że chcą dokonać zakupu lub jeśli naprawdę chcą pozbyć się produktów z koszyka. Bardziej powszechnie stosuje się zabezpieczenia, które mają przypominać użytkownikom, że nie wypełnili całkowicie wszystkich niezbędnych sekcji formularza.
• Zostaw mnóstwo pustej przestrzeni : Ludzie często myślą, że „więcej znaczy lepiej”, jeśli chodzi o projektowanie stron internetowych; jednak nic nie może być dalsze od prawdy. Zbyt duża ilość informacji na stronie internetowej może być bardzo przytłaczająca dla odwiedzających. Interfejs użytkownika najlepiej zaimplementować, gdy wyświetlane są tylko najpotrzebniejsze informacje i to w rozsądny sposób. Podczas gdy zbyt dużo miejsca może sprawić, że strona internetowa będzie wydawać się pusta, posiadanie odpowiedniej wielkości przestrzeni może być bardzo przydatne do wyróżniania informacji. Ludzie mają tendencję do przeglądania informacji, a nie dokładnej ich analizy, więc pozostawienie pustych miejsc w odpowiednich sekcjach da ludziom znacznie lepsze wrażenie, jakie informacje są naprawdę ważne na stronie internetowej.

Czego należy unikać w projektowaniu interfejsu użytkownika strony internetowej

Chociaż istnieje wiele sposobów na ulepszenie projektowania interfejsu internetowego, istnieje również wiele rzeczy, których zdecydowanie należy unikać, aby strona internetowa nie stała się koszmarem w użyciu.

• Nie rób ikon niejednoznacznych : Chociaż z pewnością będzie to wyzwanie w przypadku niektórych rzeczy, zawsze upewnij się, że ikony są tak łatwe do rozpoznania, jak to tylko możliwe. Nierzadko zdarza się, że strony internetowe zmieniają lub łączą powszechnie używane funkcje w coś graniczącego z nierozpoznawalnością i otrzymują wiele pytań dotyczących tego, co stało się z interfejsem użytkownika. Przynajmniej to najlepszy scenariusz; często wielu użytkowników nawet nie zadaje sobie trudu, aby sprawdzić, co stało się z poprzednio używaną ikoną lub co ma reprezentować nowa ikona. Jeśli zmiana ikony jest związana z udostępnianiem w mediach społecznościowych, wynik końcowy może poważnie zaszkodzić SEO. Jeśli wydaje Ci się, że Twoje ikony są zbyt niejednoznaczne, spróbuj zrobić z nich etykietę tekstową, na przykład:

(Źródło zdjęcia: Thomas Byttebier)

• Unikaj podejmowania ważnych działań nadmiernie niejasnych : Podobnie jak w przypadku zmiany łatwo rozpoznawalnych ikon, ważne funkcje witryny powinny być naprawdę oczywiste. Jeśli głównym celem witryny jest umożliwienie użytkownikom współpracy na otwartym forum, należy zadbać o to, aby ludzie mogli ze sobą rozmawiać tak dobrze, jak to tylko możliwe. Może to obejmować wyjątkowo duże lub kontrastujące kolory ikon publikowania wątków lub odpowiedzi, aby zwrócić na nie uwagę użytkowników. Jeśli ludzie nie są pewni, co mają zrobić w witrynie w krótkim czasie, prawdopodobnie szybko zrezygnują z jej używania.
• Nie rób konieczności zmiany ustawień domyślnych : Ludzie często nie zauważają domyślnych ustawień programów lub urządzeń, gdy z nich korzystają, ponieważ zakłada się, że wszystko powinno działać poprawnie od samego początku. Podczas gdy niektórzy ludzie lubią dużą elastyczność, jeśli chodzi o ustawienia, większość ludzi chce po prostu korzystać z usługi tak szybko i łatwo, jak to możliwe. Kiedy ktoś zaczyna korzystać z witryny, konieczne jest, aby nie był wymagany lub czuł się zmuszony do bałaganu z opcjami ustawień, aby zacząć używać wszystkiego zgodnie z przeznaczeniem. Nawet jeśli otrzymanie większej liczby opcji wydaje się plusem z obiektywnego punktu widzenia, nie będzie tak wyglądać z punktu widzenia użytkownika.
• Unikaj bycia zbyt wyjątkowym : kreatywność to dobra rzecz i zwykle jest powodem, dla którego wiele przedsięwzięć kończy się sukcesem, ale jest wiele razy przereklamowane. Wiele osób korzysta z szablonów stron internetowych i podobnych struktur interfejsu użytkownika z jakiegoś powodu: użytkownicy po prostu je wolą. Istnieje tylko tak wiele sposobów, w jakie pojedyncza strona internetowa może być skonfigurowana tak, aby wyglądała inaczej niż wszystkie inne przy zachowaniu funkcjonalności. Większość stron internetowych ma nieco podobny układ i ikony, ponieważ udowodniono, że najlepiej zaspokajają potrzeby użytkowników.

Zasoby i dodatkowe wskazówki

Chociaż skompilowanie listy rzeczy, które znacznie poprawiają projekt interfejsu użytkownika, może być całkowicie możliwe, faktyczne wdrożenie ich na stronie internetowej może być niezwykle trudne. Na szczęście istnieje wiele różnych sposobów, w jakie ludzie mogą dowiedzieć się, co działa, a co nie. Dobrym pierwszym krokiem jest przyjrzenie się już istniejącym witrynom ze świetnymi układami interfejsu użytkownika, takimi jak Airbnb lub Dropbox, i zainspirowanie się ich ogólnymi projektami. Na przykład spójrz na przyjazny dla urządzeń mobilnych projekt Airbnb:

(Źródło obrazu: projekt Google)

Istnieje również wiele firm, które dostarczają swoim klientom szablony, które uwzględniają wiele różnych punktów odniesienia, z których korzystają większe witryny internetowe, aby dotrzeć do ich bazy użytkowników. Wiele z tych szablonów jest przyjaznych dla urządzeń mobilnych i są często aktualizowane, aby były jak najbardziej atrakcyjne i aktualne. Ponadto szablony te można zawsze uzupełnić o własny, kreatywny talent projektanta, co zapewnia maksymalny stopień elastyczności i inspiracji.

Mamy nadzieję, że ten artykuł okazał się przydatny.

Jeśli chcesz dowiedzieć się więcej o kondycji swojej witryny, uzyskać osobiste rekomendacje i alerty, przeskanuj swoją witrynę przez Diib. Zajmuje to tylko 60 sekund.

Wejdź na swoją stronę internetową

Na przykład „www.diib.com”

Zarejestruj się za darmo

Naprawdę podoba mi się SEO i inne formy optymalizacji witryny dla mojej witryny kontraktowej KoffeeKlatch. Nigdy nie sądziłem, że powiem te słowa za każdym razem. Lubię regularne aktualizacje e-maili dotyczące moich numerów i zadań, które mają je poprawić. Uwielbiam otrzymywać liczby, które są istotne i które mogę zrozumieć ORAZ coś z tym zrobić.

Annabel Kaye
Zweryfikowany recenzent Google z pięcioma gwiazdkami

Mając na uwadze inspirację, istnieje wiele zasobów publicznych, które można wykorzystać do opracowania unikalnego formatu i wyglądu. Obecnie Pinterest jest siedliskiem ludzi, którzy chcą pochwalić się swoją twórczością i potencjalnie istnieją miliony różnych wzorów i układów, które można zobaczyć całkowicie za darmo. Dodatkowe miejsca, które mogą być warte obejrzenia, to Dribble i Ui Movement. Poniższy obrazek pokazuje, jak wygląda ruch Ui:

(Źródło zdjęcia: Poszukiwanie produktu)

Diib: podstawowe wskaźniki do tworzenia kopii zapasowych projektu interfejsu użytkownika

Jeśli tworzenie projektu strony internetowej od podstaw jest zbyt przytłaczające, dostępna jest również duża liczba programów, które uczą prawidłowego projektowania interfejsu użytkownika. CareerFoundry i Treehouse mają ugruntowaną pozycję i są bardzo polecane. Zawierają również dodatkowe zasoby, które pomagają w projektowaniu stron internetowych, które wykraczają poza sam interfejs użytkownika. Jak zawsze, Diib oferuje panel użytkownika specjalnie zaprogramowany, aby uzupełniać projekt interfejsu użytkownika i śledzić techniczne aspekty SEO witryny. Oto niektóre z funkcji, które, jak wiemy, docenisz:

• Narzędzia do monitorowania i śledzenia słów kluczowych, linków zwrotnych i indeksowania
• Doświadczenie użytkownika i optymalizacja prędkości mobilnej
• Monitorowanie i naprawa współczynnika odrzuceń
• Integracja i wydajność mediów społecznościowych
• Zepsute strony, na których masz linki zwrotne (kontroler 404)
• Monitoring techniczny SEO

Kliknij tutaj, aby uzyskać bezpłatny skan lub po prostu zadzwoń pod numer 800-303-3510, aby porozmawiać z jednym z naszych ekspertów ds. rozwoju.