Zapisz się!
Zapisz się!
Udało się!
Podaj e-mail!

Blog

Tu dowiesz się, jak zrobić stronę internetową.

Chcesz być na bieżąco?

Projektowanie stron internetowych polega między innymi na dobrej organizacji prezentowanych informacji.

Do uporządkowania treści możemy użyć wielu narzędzi i struktur interfejsu.

Na przykład okien modalnych, które zasadniczo są nakładkami „unoszącymi” się nad stroną.

To świetny sposób na przyciągnięcie uwagi czytelnika i dostarczenie mu ważnych informacji.

Dodatkowo nie uruchamiają nowych stron czy kart, co pozwala uniknąć przeładowania strony i poprawić jej użyteczność.

Ponadto okna modalne oszczędzają miejsce na stronie www, gdyż pozwalają pozbyć się dużych elementów, które wcale nie muszą się na niej znajdować w całości.

Na przykład zamiast umieszczać pełną galerię zdjęć, możemy np. wykorzystać przycisk lub miniaturę, która uruchomi po kliknięciu okno modalne i wyświetli pozostałe obrazy.

W tekście przyjrzymy się najlepszym sposobom i przykładom wykorzystania okien modalnych.

 

Uwaga! Poniższy wpis jest drugą częścią cyklu poświęconego oknom modalnym. W pierwszej części opisywaliśmy czym są okna modalne oraz co odróżnia je od pop-upów. Jeżeli trafiłeś na ten tekst bezpośrednio, zachęcamy do zapoznania się z poprzednim artykułem.

 

Najlepsze praktyki dla okien modalnych

Jak wspominaliśmy w pierwszym artykule, okna modalne niemal zastąpiły pop-upy, ale użytkownicy nadal próbują unikać wyskakujących okien. Przy odpowiednim podejściu możemy jednak wdrożyć okna modalne na swojej stronie www w efektywny i skuteczny sposób.

 

Korzystać w ostateczności

Kiedy zastanawiamy się nad umieszczeniem okna modalnego, powinniśmy najpierw poszukać innych narzędzi, dzięki którym zrealizujemy cel. Najlepiej uporządkować treść i architekturę strony tak, aby nasi użytkownicy mogli łatwo zrealizować cel.

Jeżeli nie znajdziemy prostego rozwiązania problemu, dopiero wtedy należy rozważyć użycie okien modalnych.

Pamiętajcie, żeby pokazywały się one dopiero po odpowiednim zdarzeniu wstępnym (np. kliknięciu w dany przycisk), w celu uniknięcia zamieszania w działaniach odwiedzających. Jeśli okno modalne pojawia się losowo, a użytkownik nie podjął żadnej czynności, wówczas zastosowanie tego rozwiązania nie ma sensu.

Użytkownik najpewniej zechce szybko zamknąć wyskakujące okienko, bez wczytywania się w zawartość, aby powrócić do przerwanej czynności.

Dołącz do ponad 110 tysięcy ludzi, którzy tworzą strony za darmo i bez kodowania

Zbuduj własną stronę www. Zacznij od pustego projektu lub wybierz
jeden z kilkudziesięciu darmowych szablonów. 


STWÓRZ SWOJĄ STRONĘ ZA DARMO 

Nie za często

Im częściej użytkownicy widzą wyskakujące okna, tym bardziej się irytują. Nie możemy wykorzystywać ich niemal przy każdym zadaniu ani na każdej stronie. Okna modalne przerywają kontakt z interfejsem i mogą spowodować, że dana osoba zapomni co przed chwilą robiła.

Użytkownicy muszą zająć się oknem modalnym przed kontynuowaniem dalszej pracy i nie mają aktywnego dostępu do wcześniejszego ekranu. Czasami jest to dobre rozwiązanie, np. gdy przeglądający muszą potwierdzić ważne działanie, ale w większości przypadków jest niepotrzebne i denerwujące.

 

Prostota, porządek i treść

Ponieważ okno modalne naprawdę rzuca się w oczy, niektórzy projektanci mogą pokusić się o umieszczenie w nim wielu rzeczy, co jest dużym błędem. Okna modalne powinny zawierać tylko taką treść, która jest istotna dla użytkownika w danym momencie i odpowiada jego czynnościom.

Gdy umieścimy w małym oknie wiele odnośników, ikon czy treści, powstanie spory bałagan i użytkownik z pewnością przegapi najważniejsze elementy lub też od razu zamknie kartę przeglądarki.

Wykorzystując okno modalne, np. do pozyskania subskrybentów na newsletter, powinniśmy poprosić ich jedynie o wpisanie adresu e-mail i ewentualnie wypełnienie pola z nazwą, zamiast straszyć ich rozbudowanym formularzem z dziesiątkiem pól.

okna.modalne.praktyczne.zastosowania.2Digg Store

 

Priorytet i przyciemnione tło

Przy otwieraniu okna modalnego ważne jest, aby ekran w tle był lekko przyciemniony. W ten sposób zwracamy uwagę użytkownika na nowe okno, a także informujemy go, że strona w tle jest aktualnie nieaktywna.

Należy przy tym uważać, ponieważ zbyt jasny obszar wokół naszego okna modalnego może powodować mylne wrażenie, że podstawowa strona jest nadal aktywna. Podobnie jest w przypadku zbyt ciemnego tła, które całkowicie przysłania poprzedni ekran użytkownikowi i może go zdezorientować w nawigacji.

okna.modalne.praktyczne.zastosowania.2

Imgur

 

Troska o mobilnych

O ile w przypadku dużych ekranów okna modalne naprawdę przyciągają wzrok i mają szerokie zastosowanie, o tyle w przypadku urządzeń mobilnych nie sprawdzają się zbyt dobrze. Przy tak małym ekranie nasza nakładka z reguły zajmuje całą jego szerokość, co utrudnia przeglądanie zawartości. Jeżeli jednak okno modalne jest niezbędne, należy zaimplementować w pełni responsywny moduł i przetestować jego wyświetlanie.

okna.modalne.praktyczne.zastosowania

 

Wyjście i inne elementy nawigacyjne

Przycisk „Zamknij” czy „X” są dla użytkowników najważniejszymi elementami okna modalnego. Oczywiście nie musimy tworzyć takiego przycisku w nielogicznie dużych wymiarach, ale powinien być on wystarczająco widoczny i umieszczony w miejscu, którego wszyscy się spodziewają.

Ponadto możemy umożliwić więcej sposobów zamknięcia naszego okna, np. przez kliknięcie poza jego obszarem czy naciśniecie klawisza Escape. Także nazwy pozostałych przycisków powinny być zrozumiałe: „Subskrybuj”, „Anuluj”, „Kontynuuj” czy „Prześlij” nie pozostawiają wątpliwości.

praktyczne zastosowanie okien modalnych

Amazon

 

Do jakich działań wykorzystywane są okna modalne?

 

Powiadomienie o błędzie

praktyczne wykorzystanie okien modalnych(Nawet jeśli samo zawiera błąd)

 

Formularze zapisów i logowania

praktyczne zastosowanie okien modalnychPinterest

 

Podjęcie akcji

praktyczne zastosowanie okien modalnych

iStock

Komunikaty i ostrzeżenia

praktyczne zastosowanie okien modalnych

Facebook 

Pole wyszukiwania

praktyczne zastosowanie okien modalnych

Apple 

Galerie zdjęć

W przypadku galerii zdjęć możemy odejść od niepełnego zaciemnienia w tle. Same zdjęcia w dobrej jakości, bez rozpraszających elementów pod oknem, lepiej spełnią swoją rolę, czyli skupią uwagę i zainteresują użytkowników.

praktyczne zastosowanie okien modalnych

Szablon Fotografa WebWave

Podsumowanie

Użytkownicy radzą sobie z nadmiarem informacji, a strony www próbują odwrócić kryzys uwagi, walcząc o zaangażowanie widza i konwersje m.in. przez okna modalne. Część z Was może słusznie zapytać, dlaczego w ogóle rozważać ich użycie, skoro już w pierwszej poradzie tego odradzamy?

Przy podejmowaniu decyzji powinniśmy zastanowić się czy naprawdę potrzebujemy takiego rozwiązania, a jeżeli już się na nie zdecydujemy, to musimy być pewni, że pomoże ono użytkownikom i nie będą mieli żadnych problemów z jego obsługą. Mamy nadzieję, że dzięki naszemu mini-cyklowi zrozumieliście istotę okien modalnych oraz dowiedzieliście się jak odpowiednio je wykorzystywać.

Przy skutecznych praktykach okna modalne przekonają do siebie użytkowników i spełnią oczekiwania jako właścicieli strony www.

Jak często trafiacie na okna modalne odwiedzając różne strony www? Czy macie ulubione lub znienawidzone przykłady ich zastosowania? Zapraszamy do dyskusji i dzielenia się spostrzeżeniami w komentarzach.

A może zrobisz okno modalne samodzielnie w WebWave?

Dowiedz się więcej o tworzeniu stron:

interfejs strony www
29 marca 2018

Blog

Darmowe szkolenie z tworzenia stron internetowych 

WYPRÓBUJ ZA DARMO

Wypróbuj nasz kreator stron internetowych i uzyskaj dostęp do darmowego szkolenia. Po rejestracji wyślemy Ci e-maila z linkiem do zapisu na szkolenie on-line. Na godzinnym szkoleniu dowiesz się jak samodzielnie stworzyć swoją stronę internetową!

Okna modalne na stronie www. Część #2 – przykłady zastosowania

 

Kreator stron www WebWave umożliwia tworzenie stron www z pełną swobodą. Strony internetowe możesz tworzyć zaczynając od czystej karty lub wykorzystując szablony www. Strona internetowa za darmo? To łatwe - zacznij już teraz.

Panel webmastera

KONTAKT

contact@webwavecms.com
tel. +48 731 395 898

KREATOR

OFERTA

DLA KLIENTÓW

WEBWAVE

MATERIAŁY

Ta strona została stworzona w całości przy użyciu naszego kreatora stron www WebWave. Na tej stronie wykorzystujemy ciasteczka. Dowiedz się więcej.

PL

EN

POZNAJ NAS BLIŻEJ W SIECI

Zacznij Teraz

RO

Porozmawiaj z nami na czacie.

ZACZNIJ TERAZ

PANEL WEBMASTERA

Logowanie