Najlepsze praktyki dla 6 elementów wspólnego interfejsu użytkownika
Wygląd i użyteczność niektórych elementów interfejsu i funkcjonalności są kluczowe dla sukcesu każdej strony internetowej na dzisiejszym rynku.
Badania wykazały, że nawet sekundowe opóźnienie w myśleniu ze strony użytkownika osłabi ich percepcję i zainteresowanie witryną internetową, a ostatecznie obniży współczynnik konwersji strony internetowej.
W pewnych niszach i branżach, elementy UI, które nie są oczywiste w ich zastosowaniu, mogą być całkowicie dopuszczalne. Branża blogowania i tworzenia stron internetowych to doskonałe przykłady.
Ale kiedy projektujemy interfejsy użytkownika dla osób, które nie znają technologii, co zwykle ma miejsce w przypadku pracy z klientem, musimy upewnić się, że niektóre elementy interfejsu użytkownika nie oddalają się zbytnio od tego, do czego są przyzwyczajeni.
W tym artykule omówiono niektóre najlepsze praktyki i cechy użyteczności sześciu elementów interfejsu użytkownika i konwencji dla każdego, tak aby programiści mogli tworzyć doświadczenia użytkowników, które są zarówno piękne, jak i proste.
1. Wygląd pola wyszukiwania
Na dużych witrynach z bogatymi zasobami informacji lub witrynami o dużej ilości produktów wyszukiwarka jest królem. W tym przypadku użytkownicy zwykle rezygnują z konwencjonalnych pasków nawigacyjnych na rzecz pola wyszukiwania.
Pole wyszukiwania, które nie jest od razu widoczne, będzie miało jeden z dwóch efektów: 1) użytkownik uzna, że żadna funkcja wyszukiwania nie jest dostępna, lub 2) użytkownik znajdzie funkcję wyszukiwania po opóźnionym i prawdopodobnie drażniącym okresie.
Upewnij się, że pole wyszukiwania w Twojej witrynie jest dobrze widoczne. Ciemne tło i fantazyjna grafika pogorszą użyteczność , dlatego najlepiej jest utrzymywać kolor biały lub jasnoszary. Upewnij się również, że pole wyszukiwania jest wystarczająco duże w stosunku do innych ważnych elementów na stronie, dzięki czemu zachowuje swoją pozycję w hierarchii wizualnej.
Pole wyszukiwania w Domena według adresu IP dobrze pasuje do wizualnego tematu strony internetowej, jest pomarańczowy i graficznie zgodny z otoczeniem. Ale jeśli pole wyszukiwania na bardziej ruchliwej witrynie zostało poddane temu zabiegowi, byłoby to prawdopodobnie trudne do wykrycia.
Projekt nie jest przeszkodą dla domen przez IP, ponieważ strona internetowa ma jedną funkcję: wyszukiwanie, które znajduje się na samym środku strony. Dodatkowo, będąc w niszy technologicznej, jej twórcy mają mniejszą motywację do trzymania się konwencji. Ale tego stopnia kreatywności należy unikać na większych stronach internetowych , których docelowi odbiorcy mogą nie być tak doświadczeni technicznie.
Czas przygody Tymczasem pole wyszukiwania jest białe, wygodne i łatwe do znalezienia na stronie:
Pomimo, że jest w obcym języku, Adventure Time ma bardzo przejrzyste pole wyszukiwania, nawet dla użytkowników anglojęzycznych. Rozmiar i kolor pudełka jest uzupełniony szkłem powiększającym, które stało się uniwersalnym symbolem wyszukiwania w Internecie. Użytkownik szukający tej funkcji nie będzie miał tutaj problemu.
Ten wzorzec powinien być przestrzegany we wszystkich projektach skierowanych do zróżnicowanej grupy użytkowników.
Dalsze czytanie:
2. Wyraźnie zaznaczona składana / rozwijana zawartość
Witryny korzystają ze składanych paneli i rozwijalnych menu, ponieważ zapewniają czystsze i mniej zaśmiecone układy. Ukryta zawartość w tych elementach interfejsu może jednak pogorszyć użyteczność witryny, jeśli ich obecność nie jest wyraźnie wskazana.
Gdy użytkownik kliknie odsłonięty link lub przycisk, oczekuje, że zostanie przeniesiony na nową stronę. Ale gdy użytkownik kliknie link lub przycisk, który ma ukryty wskaźnik treści, oczekuje, że nowa zawartość zostanie natychmiast wyświetlona (za pośrednictwem JavaScript lub AJAX) i będzie miała możliwość późniejszego jej ukrycia. W związku z tym strona internetowa powinna zdecydowanie odróżniać normalne linki i linki, które ujawniają nową treść za pomocą JavaScript .
Składaną zawartość, na przykład w panelach bocznych i drzewach menu, można wyświetlić za pomocą strzałki, trójkąta lub wskaźnika plus / minus podobnego do Eksploratora Windows. Panel, na którym zalogowani użytkownicy widzą CSS Globe wyraźnie wskazuje, że jest składany:
Poniżej znajduje się ta sama strona po rozwinięciu panelu, aby wyświetlić grupę funkcji:
Po rozszerzeniu zawartości panelu, strzałka jest obracana o 90 stopni, co sugeruje, że ta sama zawartość może teraz zostać ukryta lub zwinięta. Ta sama zasada może być zastosowana do menu rozwijanych lub wysuwanych, chociaż nie wymagałoby to obracającej się strzałki. Co zaskakujące, ta funkcja jest często pomijana nawet na profesjonalnie zaprojektowanych stronach internetowych.
Dalsze czytanie:
3. Wskaźnik ładowania AJAX
Aby poprawić wygodę użytkownika, ładując zawartość za pomocą asynchronicznych żądań, należy poinformować użytkownika, że przetwarzane jest żądanie AJAX. Bez tego wskaźnika użytkownik może przestać czekać lub zastanawiać się, dlaczego nic się nie stało w odpowiedzi na kliknięcie.
Możesz to osiągnąć na wiele sposobów; Jednym ze sposobów jest wyróżnienie "Ładowanie" lub podobnej wiadomości w miejscu lokalizacji działania lub w jego pobliżu, tak jak czytnik RSS Google:
U góry ekranu znajduje się żółty podświetlony tekst, który pojawia się po kliknięciu przycisku "Oznacz wszystkie jako przeczytane", informując użytkownika, że coś się dzieje.
Innym sposobem wskazania tego jest animacja lub obrotowa klepsydra, która jest znana użytkownikom systemu Windows. Animowany wskaźnik jest używany na wielu stronach internetowych, w tym Świergot , gdzie użytkownicy klikają przycisk "Więcej", aby wyświetlić starsze tweety:
Po kliknięciu przycisku i w zależności od szybkości połączenia klienta z serwerem pojawia się znana animowana mieszana grafika, informująca użytkownika, że przetwarzane jest jego żądanie.
Grafiki ładujące AJAX są dostępne bezpłatnie na wielu różnych stronach internetowych, z których wiele pozwala dostosować grafikę do rozmiaru, koloru i innych opcji.
Ten typ wskaźnika wizualnego jest ważny dla asynchronicznych żądań, które nie dostarczają wskazówek po stronie klienta dotyczących ładowania aktywności.
Wskaźnik podobny do AJAX może być również użyty do ulepszenia funkcji innych niż AJAX, które zachowują się jak AJAX i potrzeba czasu na załadowanie. Może to obejmować galerię zdjęć, która ładuje większy obraz po kliknięciu miniatury.
Grafika ładująca AJAX i inne wskaźniki w rzeczywistości nie przyspieszają strony, ale poprawiają "spostrzegany" czas ładowania , który jest często tak samo cenny jak poprawa faktycznego czasu ładowania.
Dalsze czytanie:
4. Lokalizacja koszyka, logowanie i rejestracja funkcji
Gdy użytkownicy zeskanują stronę przycisku "Koszyk" lub link "Zarejestruj się teraz", pierwsze miejsce, na które patrzą, to prawy górny róg strony. Jeśli nie masz do tego nieodpartego powodu, zachowaj tę funkcjonalność w znajomym miejscu lub ryzykuj spowolnienie i zakłócenie komfortu użytkowania.
Opcje i funkcje należące do tej kategorii to "Wyświetl koszyk", "Sprawdź", "Zaloguj się", "Wyloguj się", "Zarejestruj się", "Prześlij łącze", "Zapomniałeś hasła?", A nawet "Skontaktuj się z nami. "Ten ostatni element będzie zazwyczaj ostatnim na poziomym pasku nawigacyjnym.
TasteBook zawiera cztery takie linki w prawym górnym rogu jego układu:
Biżuteria nurków Maui to kolejny dobry przykład, a także zawiera grafikę torby na zakupy:
5. Format daty wygaśnięcia na formularzach kart kredytowych
Gdy formularz zażąda daty ważności karty kredytowej, format jest zawsze taki sam: miesiąc, reprezentowany przez dwie cyfry, a następnie rok, reprezentowany przez dwie lub cztery cyfry (np. 03/11 lub 03/2011). Czterocyfrowy format określa, w jaki sposób data wygaśnięcia pojawia się na samej karcie kredytowej.
Najlepszym sposobem, aby zebrać te informacje i wzmocnić wrażenia użytkownika, jest użycie dwóch oddzielnych pól wyboru, jednego dla miesiąca i drugiego dla roku. Nie pozwól, aby użytkownik wpisał datę wygaśnięcia w jednym polu tekstowym, nawet jeśli podasz instrukcje.
Oto dobry przykład z strona płatności of Maui Divers Jewelry:
Oto przykład źle zaprojektowanego pola daty wygaśnięcia:
Co więcej, selektor miesiąca nie powinien wyświetlać nazw miesięcy, ale powinien wyświetlać liczby od 01 do 12. Nie ma powodu, aby spowalniać użytkowników, ponieważ ustalili, że "08" oznacza "sierpień".
6. Łatwo identyfikowalne linki
To nigdy nie powinno być problemem, ale niestety niektóre witryny wciąż nie rozróżniają linków od zwykłego tekstu w głównej treści.
W większości przypadków najlepszym sposobem na wskazanie tej różnicy jest utworzenie linków o innym kolorze i podkreślenie ich. W niektórych przypadkach wystarczy tylko mocno kontrastujący kolor; ale tylko podkreślanie lub tylko nieznaczna zmiana koloru rzadko wystarcza i często pogarsza dostępność.
Cameron.io czyni to rozróżnienie dobrze:
Linki te nie byłyby tak widoczne, gdyby były tylko podkreślone, ale nie zmienione w kolorze. Nie zaprojektowałbyś przycisku, który nie wyglądałby jak przycisk, więc dlaczego łącza tekstowe wtapiają się w ciało główne? Ponieważ większość użytkowników skanuje tekst w Internecie, projektanci powinni upewnić się, że wszystkie linki są rozpoznawalne na długo przed umieszczeniem myszy nad nimi.
Dalsze czytanie:
Wniosek
Wszystkie elementy interfejsu użytkownika i funkcje omówione w tym artykule mają kluczowe znaczenie dla użyteczności witryny i odgrywają ważną rolę w postrzeganiu marki przez użytkownika.
Wiele drobnych ulepszeń może znacząco wpłynąć na postrzeganą prędkość i może powstrzymać użytkowników od frustracji lub dyskomfortu.
Ułatwiają i upraszczają elementy interfejsu użytkownika, przestrzegając konwencji, jeśli to możliwe. Zobaczysz zmniejszone współczynniki odrzuceń, lepsze konwersje i ciągły ruch powracającego ruchu.
Napisany specjalnie dla WDD przez Louisa Lazarisa, niezależnego pisarza i programistę. Louis ucieka Imponujące sieci , gdzie publikuje artykuły i samouczki dotyczące projektowania stron internetowych.
W jaki sposób można poprawić niektóre z tych lub innych elementów interfejsu użytkownika? Podziel się swoimi przemyśleniami w komentarzach poniżej.