Jak popularny błąd popsuł czytelność opinii w Ceneo? [aktualizacja]
To chyba najczęściej popełniany błąd przy wyświetlaniu treści generowanej przez użytkowników. Popełniają go domorośli programiści i duże portale. Bywa szalenie irytujący, choć jego naprawienie wymaga często tylko jednej linijki kodu.
Kilka miesięcy temu kupiłem sobie netbooka Asus Eee PC 1000HE, co zresztą opisałem na swoim prywatnym blogu. Sprzęt mnie tak zachwycił, że po raz pierwszy w życiu opublikowałem recenzję na portalu Ceneo.pl. Wszystko poszło bez problemów, choć zdziwiłem się, że nie mogę się zalogować, aby na przykład w przyszłości swój tekst uaktualnić.
Dzisiaj o recenzji sobie przypomniałem i postanowiłem sprawdzić, co się z nią dzieje. Wszedłem na stronę produktu w Ceneo, który to serwis uruchomił niedawno nową wersję. Oto, co zobaczyłem:
Pisząc recenzję pracowicie wyliczałem powody dla których kupiłem netbooka. Wypowiedź podzieliłem na krótkie akapity. A nowe Ceneo całkowicie zignorowało moją pracę. Przy wyświetlaniu tekstu zapomniano o przełamaniu linii, czyli o wstawieniu znaczników XHTML odpowiadających nowym liniom. To, że w bazie tekst jest podzielony na wiersze i akapity, widać nawet w kodzie:
Jak wiadomo, przeglądarki wyświetlając tekst, ignorują nowe wiersze, dodatkowe spacje i inne tzw. białe znaki. O formatowanie tekstu trzeba zatroszczyć się na poziomie kodu XHTML.
W języku PHP znajduje się nawet dedykowana funkcja nl2br, której jedynym zadaniem jest wstawienie znaczników przełamania (<br />) w miejscu nowych wierszy. Tak więc błąd w Ceneo można prawdopodobnie naprawić jedną linijką kodu. Właściwie poprawniej jest zamieniać na <br /> tylko pojedyncze przełamania wierszy, a podwójne już na akapity. Ale to też załatwia jednolinijkowa funkcja…
Jak wspomniałem na początku, błąd ten spotykam nagminnie. Opinie użytkowników, o które tak pieczołowicie zabiegamy powinny wyglądać maksymalnie czytelnie i estetycznie. A tutaj mamy blok tekstu wyrzucany na ekran bez jakiejkolwiek obróbki. Jeśli to krótkie wypowiedzi – żaden problem. Nikt nie wymaga przełamania linii w wypowiedziach z Blipa. Ale im dłuższe – tym trudniej czytać.
Inne ciekawostki
Inna sprawa, że to nie jedyne dyskusyjne rozwiązanie webdeveloperów Ceneo. Po co na przykład wstawiać obrazek pros.gif w powyższym fragmencie kodu, skoro ikonkę ilustrującą nagłówek „Zalety produktu” można dołożyć za pośrednictwem CSS? Umieszczenie tekstu alternatywnego „zalety” sprawi, że użytkownik czytnika usłyszy „Zalety. Zalety produktu”, tak jakby strona Ceneo się jąkała.
Dodajmy do tego na przykład całą masę wspólnego kodu Javascript umieszczoną na każdej stronie, co zwykle wyrzuca się do zewnętrznych plików. Po co dodawać dodatkowe kilobajty razy setki tysięcy odsłon stron Ceneo miesięcznie?
Okazuje się, że określenie „Beta” nie jest przypadkowe, strona Ceneo wymaga wielu optymalizacji przed ostatecznym uruchomieniem. Szkoda tylko, że wyłączono już starą wersję, która nawiasem mówiąc, wyżej opisanego błędu z przełamaniem nie nie miała.
Aktualizacja z 26.10.
Dzisiaj zauważyłem, że błąd został poprawiony, ale … poprawiony został źle! Bo jedno przełamanie wiersza zastąpione zostało nie przez jeden, a przez dwa tagi <br />. W efekcie tekst jest teraz bardzo rozstrzelony. :-)
Podobne artykuły:
Być może zainteresują Cię następujące artykuły:
- Nic nowego: 3 stare zasady dotyczące ikon
- Trudny termin: afordancja [i recenzje na godi.pl]
- Sirius.pl – czy to jest jeszcze sklep internetowy?
- Kolejnych 5 porad – dokumenty: i ładne i użyteczne
- Za krótkie – źle, za długie – też źle
Zapisz się na kanał RSS bloga i dołącz do ponad 1500 czytelników RSS.
Komentarze czytelników
Komentarze z innych blogów
- O roli szczegółów w biznesie | WebQuatro
[…] Robert Drózd pisze o użyteczności Ceneo, Wojtek Kyciak przytacza Case Study o zaufaniu w e-commerce, Paweł Wimmer wypowiada się o MSN, a […]
- Podsumowanie roku 2009 : WebAudit Blog
[…] Jak popularny błąd popsuł czytelność opinii w Ceneo? […]
6 września 2009 23:43
Jeszcze coś… Na Webinside http://www.webinside.pl/news/6188 w notce prasowej z sierpnia przeczytałem:
i na dole zrzut ekranu pokazujący dokładnie ten błąd. Jakim cudem nikt z tego „zespołu usability” tego nie zauważył, a jeśli zauważył to dlaczego przepuszczono to na etapie wersji beta?
7 września 2009 02:04
Po prostu myślą, że użytkownik nie uczył się pisać w szkole i nie wie co to akapity więc ich nie używa. :)
Pozdrawiam
7 września 2009 06:50
Rzeczywiście, błąd ten jest dość popularny. Należy jednak pamiętać, że nie jest to jedyny, często popełniana i łatwa do uniknięcia usterka.
Obawiam się, że prawda jest niestety taka, że zespoły bardzo rzadko zwracają uwagę na drobne szczegóły (a jak wiadomo, to właśnie te szczegóły potem mają największe znaczenie)…
7 września 2009 08:07
Myślę że błąd jest dość trudny do zauważenia jeśli np. w prototypie zamiast prawdziwego tekstu używa się wypełniacza np. „lorem ipsum”. Zresztą jest tak zawsze – jaki by ten tekst nie był – kiedy się go nie czyta. Dopiero czytając te opinie widzi się, że coś jest nie w porządku.
9 września 2009 14:47
Niby blad, ale prowadzac na codzien dwie dosc duze strony z rzesza uzytkownikow jestem w stanie zaryzykowac stwierdzenie, ze webmasterzy/programisci zrobili to swiadomie. Przynajmniej z moich doswiadczen wynika ze zdecydowanie mniej osob uzywa entera do formatowania tekstu niz do 'rozwalenia’ strony (30 enterow i usmieszek; napisy w pionie). Wszelkie proby wycinania tego z poziomu skryptow koncza sie na ogromnej inwencji tworczej typu enter spacja enter kropka enter przecinek enter spacja spacja spacja (x20) enter. 'Zapomnienie’ nl2br doskonale rozwiazuje tu sprawe. A cala 'blednosc bledu’ weryfikuja uzytkownicy. Niestety…
9 września 2009 14:58
Nadmiarowe puste wiersze programiści mogą wycinać, więc trudno to uznać za usprawiedliwienie. Jeśli popatrzysz na recenzje w Ceneo – widać, że wiele osób robiło swiadomie podział na akapity czy wypunktowania.
Inna sprawa, że lepiej na 300 przypadków pokazać ludziom puste wiersze niż nie pokazywać ich wcale.
A wpisy na Ceneo są z tego co wiem moderowane.
9 września 2009 15:34
„Nadmiarowe puste wiersze programiści mogą wycinać,”
vide:
„ogromnej inwencji tworczej typu enter spacja enter kropka enter przecinek enter spacja spacja spacja (x20) enter.”
Sprawa powinna IMHO wyglądać tak:
– komentarze – bez enterów; ograniczenie do X znaków; wyświetlane jeden pod drugim na stronie – niczego nie popsujesz.
– recenzje – nie tylko entery ale ograniczone rich editing – boldy, listy ( obrazki to już przesada ); ograniczanie długości w ogóle, lub do np. 2000 znaków; wyświetlane jako zajawki (np. pierwsze 300 znaków i wielokropek + link [czytaj dalej..]) po kliknięciu cała strona na ładnie sformatowaną recenzje. Do tego limit jedna recenzja dla jednego produktu i flaga żeby ludzie mogli odsiewać „radosną twórczość”
tyle. :]
9 września 2009 15:37
philosophie: to co dla jednych jest złe, dla innych jest dobre. Nie ma dobrego dla każdego ;).
vide:
„Klient: Tu jest błąd!
Informatyk: Ależ Panie, to nie błąd, ale taka funkcja! ;]”
;)
9 września 2009 15:38
@Mateusz:
Znaczy te entery z Twojego komentarza mogę usunąć? ;-)
9 września 2009 17:03
a śmiało.. nie krepuj się. ;] Trochę to kogoś może zaboleć, że te wszystkie lata w podstawówce zmarnowane na naukę używania akapitów pójdą na marne, ale co tam.. też się może wkurzyć osoba, która to potem musi czytać.. i co 2 linijki wracać bo zgubiła się w tekście.. co tam..
Czego się nie robi i z czego nie rezygnuje dla naszego bezpieczeństwa ;]
Pozdrawiam :)
26 października 2009 23:53
Dzisiaj zauważyłem, że błąd został poprawiony, ale … poprawiony został źle! Bo jedno przełamanie wiersza zastąpione zostało nie przez jeden, a przez dwa tagi br. W efekcie tekst jest teraz bardzo rozstrzelony. :-)
17 stycznia 2010 12:15
A Ty niedobry. Ja tu wpisuje hasło „ceneo” a tu taki artykuł.
Czas na Nokaut.
11 lutego 2010 15:24
Robercie, mam takie dość proste pytanie. Czemu opiniujesz na Ceneo?
11 lutego 2010 15:31
@ekke: nie opiniuję, napisałem opinię jeden raz. :-)