Karuzele obrazów w projektowaniu stron internetowych - korzyści i najlepsze praktyki

Nie brakuje pokaz slajdów z funkcją karuzeli w sieci. W rzeczywistości ten trend nic nie zrobił, ale rosną w ciągu ostatnich 5-10 lat z większą obsługą przeglądarki niż kiedykolwiek wcześniej. Ale czy karuzele wizerunkowe są naprawdę warte wysiłku? Jakie korzyści przynoszą i jak powinny być produktywnie wykorzystywane w układzie?

Chciałbym się podzielić wspólne trendy, żywe przykłady i pomysły dla projektantów stron zainteresowanych karuzelami graficznymi. Te dynamiczne suwaki są mocno dyskutowane, ale myślę, że dodają wartości, gdy są tworzone w odpowiednim kontekście.

Karuzele produktów do handlu elektronicznego

Świat e-commerce jest pełen obrotowych karuzel na stronach głównych i stronach produktów. Celem jest utrzymać wyraźną gęstość informacji ze zdjęciami i tekstem opowiedz wyjątkową, ale cenną historię pomóc w sprzedaży produktów.

Tam są dwa podstawowe miejsca docelowe suwak produktu e-commerce:

1. Na stronie głównej sklepu
2. Na stronie produktu

Obie działają inaczej, ale służyć temu samemu celowi - sprzedawać produkty w sposób wizualny.

Przykład 1: Świetna pościel Au - strona główna

Spójrz na stronę główną Au Lit Fine Linens używa pełnoekranowej automatycznej karuzeli pochwalić się różnymi produktami, takimi jak kołdry, poduszki i narzuty na łóżka.

Obrazki zajmują całą szerokość strony głównej i one pojawiają się znacznie powyżej fałdu. W rzeczywistości ten suwak powinien być pierwszą rzeczą, która przyciągnie twoją uwagę podczas pierwszego lądowania na stronie. Każdy slajd prowadzi do innej strony w witrynie prowadzić klientów przez zakupy.

Ten suwak może być onieśmielający podczas pierwszego lądowania na stronie, ale za pomocą link do przycisku i tekst nakładki może to być również bardzo zachęcające dla odwiedzających, którzy chcą po prostu nurkować i robić zakupy.

Przykład 2: Obudowa na telefon Eden - strona produktu

Możesz zobaczyć bardziej szczegółowy przykład na stronie produktu do telefonu Eden. Używa automatyczny suwak aby pokazać obrazy produktu.

Uważam to za trochę “zbyt wiele” w świecie e-commerce. Patrząc na produkt, który chcę być w kontroli przełączania między obrazami.

Lepszym wyborem jest zrobienie galerii zdjęć z kontrolą nadaną odwiedzającemu. Na przykład strona Design by Human używa miniatury dla każdego zdjęcia co jest znacznie bardziej zachęcające i zapewnia użytkownikowi większą kontrolę.

Karuzele portfela internetowego

Portfele witryn internetowych są nieco inne, ponieważ te slajdy nie zawsze klikaj na inną stronę. Prawdą jest, że niektórzy doprowadzą do studium przypadku lub napiszą o projekcie, ale wiele karuzel na stronach portfolio ma na celu pokaż prace wizualne.

Przykład 1: Biboun - strona główna

Francuski artysta pracujący pod nazwą Biboun ma suwak karuzeli na stronie głównej z fragmentami dzieł sztuki. Poszczególne slajdy prowadzą do stron wewnętrznych w portfolio, które obejmować cały projekt z wieloma zdjęciami.

To prawdopodobnie najlepszy sposób na zrobienie suwaka na stronie portfolio. Pokazywanie losowej listy prac jest bezcelowe, chyba że te konkretne prace mają powód do pokazania.

Wszystkie kawałki są znakomity w suwaku Biboun'a i tym nie zajmuje dużo miejsca zarówno. Chociaż wiem, że niektórzy ludzie nienawidzą automatycznego obracania pokazów slajdów z uzasadnionego powodu, w tak minimalistycznym układzie mam trudności z narzekaniem na tę funkcję projektowania.

Przykład 2: strona internetowa Aarona Blaise'a - strona główna

Bardzo podoba mi się przykład znaleziony na stronie Aarona Blaise'a, ponieważ on prezentuje swoją pracę jako portfolio, ale głównie korzysta z tej strony sprzedawać swoje filmy artystyczne. Aaron Blaise pracował w Disneyu przez kilka dziesięcioleci i ma umiejętność udowodnienia tego.

Podczas gdy suwak strony głównej na jego stronie automatycznie się obraca, nie uważam go za bardzo irytujący lub nie na miejscu. Każdy slajd ma trochę treści związanych z obrazem, i to pomaga Aaronowi zwróć uwagę na jego najnowsze lekcje wideo które uczą młodych artystów, jak opanować określone umiejętności.

Świetna karuzela z portfolio skupia się na wizualizacjach, i prowadzi odwiedzających dalej na stronie internetowej. Jeśli możesz zdobyć te dwie rzeczy, nie byłbym przeciwny takiej funkcji na osobistej stronie portfolio.

Wspólne trendy projektowe

Jeśli spojrzysz na niektóre z moich powyższych przykładów, zauważysz, że są zazwyczaj dwa różne typy suwaków: pełny ekran i stała szerokość.

Te stylistyczne wybory często odnoszą się do układu i ile treści może pomieścić. Jeśli układ rozciąga się na całą szerokość strony, sensowne jest również poszerzenie suwaka. Ale to również zmusza do znaleźć wysokiej jakości obrazy które nadal dobrze wyglądają na pełnym ekranie na monitorach o dużej rozdzielczości.

Ja osobiście wolę styl o stałej szerokości, jaki zobaczysz w dwóch przykładach portfolio sztuki. To są dużo łatwiejszy do kontrolowania, i często są nie tak wysoki - ułatwiając odwiedzającym po prostu je ignoruj jeśli chcą.

Weź również pod uwagę wartość automatycznych slajdów i jak trudne może być dla użytkowników, aby złapać tę zawartość. Istnieje świetne studium przypadku grupy Nielsen Norman, które pokazuje, że jest lepiej nie mieć suwaków automatycznego przesuwania.

Jestem na pokładzie z takim podejściem w tym sensie, że jest mniej intensywna pamięć z mniejszą ilością animacji i ruchu w przeglądarce, a większość ludzi też nie lubi automatycznego obracania karuzel - i zawsze powinieneś zaspokoić odbiorców.

Nie mogę jednak powiedzieć, że nigdy nie warto dodawać suwaka automatycznego przesuwania, zwłaszcza, że ​​w przypadku suwaków statycznych nie uzyskaj tak wielu widoków, i ty też musisz uczyń swój pierwszy slajd najważniejszym tak wielu użytkowników nie przejdzie do następnego slajdu. Decydowanie, czy suwak ma być automatycznie obracany, czy nie, jest niestety niestety obszar prób i błędów.

Czego unikać za wszelką cenę

Oto ważna rzecz, którą osobiście uważam podpada pod “unikaj za wszelką cenę”. Obejrzyj lub kliknij poniższy zrzut ekranu i spróbuj odgadnąć, co to może być.

Strona internetowa kawiarni Yozenn wykorzystuje pełnoekranowy suwak nagłówka. Nie obraca się automatycznie, co jest świetne, ale także slajdy nie służą celom innym niż dekoracja.

Obrazki nie łącz w żadnym miejscu, i pokazują małą garść produktów. Mogli po prostu być dodane do tła strony głównej bez suwaka, aby zapisać zamieszanie i dodatkowe kilobajty JavaScript.

Twierdzę, że ta funkcja przesuwania tła nie wnosi większej wartości do już ciasnej witryny. Jeśli obrazy miały linki lub tekst towarzyszący, byłyby przynajmniej bardziej odpowiednie.

Możesz użyć obrazów w sekcji nagłówka, które zajmują całą stronę, jeśli jednak nie łącz w żadnym miejscu ani nie podawaj żadnych prawdziwych informacji potem nie zamieniaj ich w karuzelę.

Interaktywne funkcje

Sposób poruszania się użytkowników po karuzeli wpływa na sam projekt. Istnieją różnorodność stylów nawigacji, ale są to najbardziej popularne:

• Nawigacja punktowa
• Nawigacja strzałkowa
• Nawigacja miniatur
• Lista linków lub nagłówków

Najczęściej jest to nawigacja punktowa które znajdziesz na setkach nowoczesnych stron internetowych.

Przykład 1: Szyk w domu - strona główna

Szyk w domu to świetny przykład trzy małe kropki pod suwakiem oznaczyć nawigację. Każdy obraz obraca się automatycznie i odpowiadająca mu kropka w serii zapełnia się czernią. Pozostałe dwie puste kropki oznaczają potencjalne slajdy dla użytkowników do przeglądania.

To jest popularny wzór projektu że wielu użytkowników już to rozpoznaje. Należy do tej samej kategorii co menu hamburgerów, które wielu projektantów nie lubi, ale użytkownicy już go rozpoznają, i instynktownie wiem, jak go używać.

Przykład 2: Pure Cycles - strona główna

Strona domowa Pure Cycles wykorzystuje połączenie nawigacji po kropkach i strzałkach. W ten sposób użytkownicy mają nawigację do przodu i do tyłu, ale także zobacz “ogólny” nawigacja przez linki punktowe na dole.

W tym przykładzie odnośniki do kropek są trudne do zobaczenia. Trudność ze slajdami wizualnymi polega na tym, że wiele elementów nie jest łatwych do rozróżnienia, więc strzałki i kropki mogą łatwo wtapia się w tło.

Przykład 3: IGN - strona główna

Na stronie głównej IGN ​​znajdziesz inny karuzela z automatycznym obracaniem który używa linki tytułowe do nawigacji. Jest to bardzo powszechne dla wydawców, którzy chcą sprzedawać nagłówki zamiast produktów. Każde łącze przechodzi do indywidualnego slajdu, który ostatecznie prowadzi do strony artykułu.

Te linki można zastąpić miniaturami, lub nawet zawierać miniatury z każdej historii - jednak aspekt wizualny jest pokazany na karuzeli, więc pominięcie miniatury faktycznie oszczędza miejsce.

Różne strony internetowe używają różnych stylów nawigacji z różnych powodów. Rozważ cel (cele) swoich gości, i projekt dla najlepszego doświadczenia użytkownika.

Kluczowe dania na wynos

Powinieneś dążyć do produkować prawdziwą wartość lub dodatkowe informacje z karuzelą. Może to być informacja, której użytkownik nie miał wcześniej, lub może prowadzić do stron, których użytkownik mógł nie znaleźć w inny sposób.

Staraj się unikać automatycznego obracania karuzel i używaj ich tylko na głównych stronach docelowych (strona główna jest jednym z przykładów). Tak długo jak karuzela ma cel, i nie wygląda na reklamę, Twój projekt powinien dobrze działać.

Jeśli szukasz więcej informacji na temat karuzel internetowych, sprawdź niektóre z następujących postów:

• Karuzele od Brad Frost
• 8 Wymagania UX do projektowania przyjaznej dla użytkownika strony internetowej Karuzela
• Użyteczność karuzeli: projektowanie efektywnego interfejsu użytkownika dla stron internetowych z przeciążeniem treści