Thoughts about business analysis and project management

...and Opera

Lightbox 2 - niezdrowa moda na wyświetlanie obrazków

Thursday, July 19, 2007 12:06:15 AM

, , , , ,

Od jakiegoś czasu obserwuję, że coraz więcej serwisów, zapewne chcących być "trendy" i "web 2.0", implementuje "efekciarski" sposób wyświetlania obrazków, taki jak tu: http://ludzie.playmobile.pl/photo/ranking. To biblioteka Lightbox, w wersji 2.

Po kliknięciu w obrazek, pokazuje on się nam na jakby wyższej warstwie, w obramowaniu, a reszta strony staje się przyciemnionym tłem. Może przy pierwszym wyświetlanym w ten sposób obrazku wrażenie jest ciekawe, ale później zaczyna to coraz bardziej irytować, przebijając pod tym względem chyba nawet strony we Flash. Ergonomia i funkcjonalność tego rozwiązania jest bowiem skrajnie fatalna. Dlaczego? Zobaczmy, jakie są konsekwencje takiego sposobu pokazywania obrazków.

  1. Niepotrzebnie ograniczona jest widoczność strony - od razu po kliknięciu w obrazek pojawia nam się biała ramka, w której będzie wyświetlony obrazek, a sama strona zostaje przyciemniona - od tego momentu zupełnie nie widzimy reszty strony, jedyne co pozostaje nam robić, to cierpliwie patrzeć się, jak "efekciarsko" ładuje się nam obrazek.
  2. Obrazek pokazuje się zupełnie nieefektywnie - najpierw czekamy na ściągnięcie się obrazka. Gdy został on pobrany (czyli właściwie już w tym momencie można by go pokazać), ramka zaczyna w kilku fazach płynnie, czyli powoli, dopasowywać swój rozmiar - najpierw na odpowiednią szerokość rozsuwana jest pionowa krawędź, dopiero później pozioma i dopiero w trzecim, ostatnim etapie pokazuje się dolny fragment z opisem i przyciskiem Zamknij. Czekać trzeba szczególnie długo, gdy kolejne obrazki są znacząco różnych rozmiarów, bowiem ramka zmienia rozmiar, zaczynając od rozmiaru obrazka poprzedniego. faint
  3. Nie można szybko i wygodnie zamknąć obrazka - trzeba czekać na możliwość jego zamknięcia do jego pełnego załadowania - dopiero wtedy pojawi się przycisk Zamknij. Przy tym przycisk Zamknij pojawia się za każdym razem w innym miejscu (w zależności od rozmiaru obazka, w dodatku nie zawsze tuż pod obrazkiem, przy małym obrazku pojawia się pod całym jego opisem). Nie można też kliknąć w obrazek, aby go zamknąć, trzeba kliknąć poza jego obszar.
Czyli ten efektowny, choć już po chwili nużący, sposób wyświetlania posiada całą masę utrudnień w obsłudze i użytkownik traci, zupełnie niepotrzebnie, mnóstwo czasu.

Co ciekawe, dużo lepszym rozwiązaniem, pozbawionym większości tych wad jest pierwsza wersja Lightboksa, której przykłady można zobaczyć bezpośrednio na tej stronie: http://www.huddletogether.com/projects/lightbox/

Inną, zdecydowanie bardziej ergonomiczną i funkcjonalną alternatywą jest (dotychczas i chyba nadal często stosowane) wyświetlanie obrazka w nowym oknie, które zamyka się po kliknięciu na ten obrazek. Polecam technikę opracowaną przez porneLa: http://pornel.net/pups/ - pop-upy proste, kompatybilne i semantyczne.

Jeśli zaś chodzi o Lightbox 2, to proponuję i apeluję, abyśmy wszyscy zgodnie wyrzucili go na śmietnik nietrafionych eksperymentów internetowej historii.

Opera Mini jednak rośnie - korekta na ranking.plGmail polubił Operę

Comments

M-Z Friday, July 20, 2007 8:23:50 PM

Wreszcie ktoś napisał to, o czym od dawna myślałem. Warto jeszcze dodać (choć to niepolityczne) że Opera jest w takich wypadkach dość powolna, co wkurza dodatkowo.

Unregistered user Wednesday, August 8, 2007 6:26:12 AM

zertaul writes: Większość rzeczy na tym świecie ma swoje wady i zalety. Te "problemy", o których piszesz da się w prosty sposób wyeliminować - zerknij na moją stronę: http://serviam.pl/index2.php?action=galery i zauważ, że zadna z opisanych przez Ciebie niedogodność nie ma tu miejsca.

Wojciech EysymonttNasty Friday, August 10, 2007 7:36:56 AM

Skoro zlikwidowałeś te problemy, to oczywiste, że nie występują na Twojej stronie. Ja nie pisałem o tym, że się ich nie da usunąć, tylko że standardowe zachowanie Lightboksa 2 - które zazwyczaj jest traktowane jako wzorowe i używane bez przeróbek - jest beznadziejne funkcjonalnie.

Czy to zachowanie się Lightboksa to wynik Twoich autorskich przeróbek, czy można pobrać tę wersję z jakiegoś oficjalnego źródła?

Unregistered user Monday, December 31, 2007 9:28:17 PM

Drake writes: Takze posiadam galerie w internecie i uzywam lightboxa 2. Dlaczego? Bo jest wygodny zarowno dla autora jak i dla odwiedzajacego. I Tak samo jak zertaul uwazam, ze skrypt zamieszczony na mojej stronie pozbawiony jest wymienionych przez Ciebie wad. Przerobek? Jakich przerobek? Nie miales czasem na mysli konfiguracji? To, ze trzeba sie danego ustawienia doszukac w pliku tekstowym zamiast w bajerancko podanym GUI nie znaczy od razu, ze dokonujemy jakiegos hackowania. Najzwyklejsza w swiecie konfiguracja. Galeria oparta na popupach? Tzn ze mialbym sie nastawic wylacznie na odwiedzajacych uzywajacych IE? Kazda przegladarka posiada dzis mniej lub bardziej efektywne blokowanie takich "bajerow", ze o antywirusach nie wspomne. A co do wolno chodzacej opery - czy to napewno dzialka autorow skryptu/strony? Ja uwazam ze wolne dzialanie niektorych skryptow jest sprawa autorow przegladarki. Kogo winicie za niepoprawne wyswietlanie stron pod IE? Microsoft. Kogo winic za zle dzialanie skryptow w Operze? Odpowiedzcie sobie sami :)

Wojciech EysymonttNasty Sunday, January 6, 2008 4:12:35 PM

Tak, miałem na myśli konfigurację, w ogóle nie zajmowałem się nim od strony webmasteringu, więc nie wiedziałem, że posiada możliwości konfiguracji sposobu działania. OK, jeśli Lightbox jest skonfigurowany w sposób pozbawiony opisanych przeze mnie problemów, to w porządku. Jak już napisałem, mówię o standardowym zachowaniu Lightbox 2, które widzę na 9/10 stron, a które jest dalekie od bycia wygodnym dla użytkownika.

Co do pop-up'ów, to IE też posiada blokowanie, więc jeśli miałyby być tak jak mówisz, blokowane, to w każdej przeglądarce. Ale niektóre - wywołane na życzenie użytkownika - nie są. Przeczytaj artykuł na temat dobrej techniki ich implementacji, do którego podlinkowałem we wpisie.

Co do powolności otwierania się okna, to widzę, że źle zrozumiałeś - chodzi tu o celowo zaimplementowaną w Lightboksie 2 płynną "animację" rozszerzania obszaru podglądu obrazka, a nie o to, że w przeglądarce wolno działają skrypty.

Unregistered user Friday, January 25, 2008 10:04:57 AM

Anonymous writes: a ja lubie lightbox'a :-)

Unregistered user Wednesday, February 6, 2008 2:25:14 PM

jurek writes: > Ja nie pisałem o tym, że się ich nie da usunąć, tylko że standardowe > zachowanie Lightboksa 2 - które zazwyczaj jest traktowane jako > wzorowe i używane bez przeróbek - jest beznadziejne funkcjonalnie. I to jest fachowe podejście Software Engineer'a? n/c

Unregistered user Wednesday, February 13, 2008 8:09:31 AM

Tomek writes: A mi ten wpis i komentarze bardzo pomogły. Dziękuje! :-)

Unregistered user Tuesday, March 18, 2008 9:31:02 PM

Łukasz writes: Jak dla mnie to jesteś głupi i szukasz problemów w nie wiadomo czym, używam lightbox od dawna i jestem bardzo zadowolony... Rezygnować z tego bo coś tam nie tak? Dużo lepsze to niż otwieranie obrazka w nowym oknie... A jak jesteś taki mądry to zrób lepsze...

Wojciech EysymonttNasty Sunday, March 30, 2008 5:42:17 PM

jurek: Niefachowe jest to, że Lightbox domyślnie jest skonfigurowany bardzo nieergonomiczne i niefachowe jest jego używanie w takiej domyślnej konfiguracji - z czym spotkałem się często, więc o tym napisałem.

Łukasz: Z całym szacunkiem, ale nie chodzi o to, żebyś Ty był zadowolony, a osoby odwiedzające Twoją stronę. Nie trzeba z niego rezygnować - jak zostało wyjaśnione, da się go skonfigurować ergonomicznie, przeczytaj artykuł i komentarze.

Unregistered user Monday, April 28, 2008 8:35:00 AM

Anonim writes: Gdzie widzisz tą NIEERGONOMICZNOŚĆ ? 1. Czy bardziej ergonomiczne jest klikanie w każdy obrazek i czekanie aż otworzy ci się kolejne okno przeglądarki? 2. Klikasz w obrazek, którego nie chcesz oglądać? Gratuluję logiki działania. 3. Lightbox2 jest wygodnym sposobem na zamieszczenie miniaturki i "jednocześnie" pe lnej wersji fotki, a "tanie efekciarstwo", no cóż dziwne ,masz do tego podejście, bo kierując się tą logiką strony wyglądałyby nadal jak w 95 roku, zero drobnych wodotrysków-umilaczy oglądania. 4. Jak sam napisałeś - nie zaglądałeś w opcje Lightbox`a - więc czemu go oceniasz? Najpierw sprawdć o czym piszesz, a potem krytykuj. Widzisz... zmiana tych irytujących drobiazgów zajmuje 10 sek., ale tzreba chcieć. 5. Sposób wyświetlania i rzekome oczekiwanie na cokolwiek - bzdura, to wg Ciebie lepiej jest załadować kolejną stronę tylko dla jednej fotki, zresztą na tej stronie i tak przeglądarka najpierw zarezerwuje miejsce na obrazek, czyli dostaneisz pusta ramkę, a dopiero po wczytaniu fotki zostanie ona wstawiona. Twój argument o szybkości zawiera w zasadzie wniosek, że lightbox spowalnia ładowanie stron.

Unregistered user Monday, June 16, 2008 11:35:22 AM

yanoo writes: jak ci lightbox nie pasuje, to zawsze możesz otwierać zdjęcia w nowym oknie - szybko i bez efektów

Unregistered user Tuesday, June 17, 2008 12:00:29 PM

Naglfar writes: Lighbox2 jest moim zdaniem bardzo wygodny, jednak poważnym mankamentem jest powolność animacji, nawet na bardo dobrych komputerach. Można na to łatwo zaradzić - usunąć animacje. Wystarczy w kilku miejscach kodu wstawić funkcje show() i hide() zamiast funkcji tworzących animacje.

Unregistered user Tuesday, August 5, 2008 8:11:43 PM

Anonymous writes: "Nie można szybko i wygodnie zamknąć obrazka - trzeba czekać na możliwość jego zamknięcia do jego pełnego załadowania - dopiero wtedy pojawi się przycisk Zamknij." Istnieje taki przycisk maiczny jak ESC i się zamyka nawet jak się wczytuje zdjęcie. Zamiast pisa bzdury lepiej doczytaj dokumentację

Unregistered user Monday, August 18, 2008 10:27:12 AM

WiruSSS writes: lub wystarczy kliknąc poza obrazkiem i animacja zostaje przerwana ;) ...lightbox to jedna z tych rzeczy które posunęły ergonomię przeglądania obrazków do przodu a zarzuty tutaj przedstawione są conajmniej śmieszne i do tego bezpodstawne ...jakkolwiek lightbox bylby ustawiony i taj wolałbym oglądac obrazki w ten sposób niż w idiotyczny moim zdaniem w nowym oknie. PS. komentarze tutaj także świadczą o wyższości ligtboxa nad kazdym innym rozwiązaniem.

Paweł Ziołozielski Sunday, November 30, 2008 9:58:15 AM

Nasty.
A środkowego klawisza myszki (po mojemy kółkoklika) na tych obrazkach nie mozesz użyć? bigsmile I masz obrazki w osobnych kartach otwarte.
Widzę sens lightboxa w galeriach, w końcu to są strony o zdjęciach :} do tego można go obejść SAMODZIELNIE otwierając zdjęcia w osobnych oknach albo kartach.

Unregistered user Sunday, November 30, 2008 7:15:30 PM

Anonymous writes: lighbox ma wady akurat nie te ktorych piszesz bo to ze trzeba zaczekac na zaladowani sie zdjecia to chyba nie jest wada lighboxa a Twojego lacza. Natomiast lighbox w wersji 2 jest duzo bardziej przyjazna niz wersja 1 obsluga jest szybsza animacja, ladna i bardziej naturalna - czekam tylko az pojawi sie mozliwosc uzycia scroolbarow dla niskich rozdzielczosci pulpitow klony lighboxa takie cos maja ale z kolei nie maja tego co ma lighbox

Unregistered user Friday, December 5, 2008 12:38:35 PM

Anonymous writes: Chciałem zauważyć, że otwieranie linków w nowych oknach (w tym przypadku obrazków) jest niezgodne z wytycznymi W3C, element _blank został usunięty ze specyfikacji XHTML.

Unregistered user Saturday, December 6, 2008 8:28:00 PM

el_passo writes: Te problemy są dosłownie wyssane z palca. Po pierwsze możesz anulować ładowanie obrazka poprzez kliknięcie na przyciemnionym obszarze, nie trzeba czekać na załadowanie. Po drugie efekty ładowania nietrwają tak długo, nie przesadzajmy ;)

Unregistered user Tuesday, January 6, 2009 7:31:45 PM

olo writes: Co wy tacy nadgorliwi. Lightbox w wersji 2 z domyślnymi ustawieniami jest irytujący. Jeszcze ta animacja wolna, wrr, trzeba podłubać w kodzie by nadawało się do użytku. Takie efekty są interesujące ale tylko w pierwszej chwili, potem zaczynają drażnić. O wiele bardziej przypadł mi do gustu lightbox1, ewentualnie highslide po przeróbkach.

Unregistered user Saturday, February 7, 2009 11:57:28 PM

Zawodowy Webdesigner/ Developer Amator writes: BUUUUU!!!! BUUUUU !!!!! Artykuł napisany bez sprawdzenia możliwości skryptu... Krytykuj amatorskich webdesignerów a nie developerów... Amatorka... tyle na ten temat. PS. Czekam na LB3 twojego autorstwa, bo jest tam jedna rzecz do poprawy, ale nie zdradzę jaka... :]

Unregistered user Thursday, November 19, 2009 10:31:29 AM

Jakub Kukuryk writes: Lightbox 2 jest typu open source i każdy element można zmienić, od prędkości po rozmieszczenie elementów na stronie i gdzie trzeba kliknąć. "przebijając pod tym względem chyba nawet strony we Flash" Flash to technologia która współpracuje równie dobrze z javą, php i MySQL itp. Chyba cierpisz na syndrom "ja wiem najlepiej i to czego używam jest najlepsze a wszystko inne to blee.

Unregistered user Wednesday, December 9, 2009 2:09:18 PM

Anonim writes: A ja mam dosc slaby laptop i otwieram lightoxa opera i nie widze zadniego spowolnienia. Chyba ze ktos ma bardzo archaiczny sprzet, to wtedy ma problem ale nie tylko z lightboxem ale i wszechobecnym flashem. Niektorym sie moze zwoje przegrzaly i koniecznie chca udowodnic ze lightbox jest beeee. Niech nie uzywaja lightoxa, nie wchodza na takie strony i bedzie ok.

Unregistered user Wednesday, January 13, 2010 3:04:45 PM

Bart writes: "Ciekawe dlaczego Lightbox działa płynnie w FF, Chrome i nawet IE." No właśnie w moim Chrome powiększony obraz jest bardzo nisko na stronie i trzeba zjechac scroll`em w dół, by go zobaczyć. Jak to zmienić, da się?

Write a comment

You must be logged in to write a comment. If you're not a registered member, please sign up.

Recommended reading about Business Analysis

Recommended reading about Facilitation

Recommended books