Skocz do linków, Skocz do treści

Jak popularny błąd popsuł czytelność opinii w Ceneo? [aktualizacja]

6 września 2009 23:34. Autor: Robert Drózd. 16 komentarzy

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:

Tekst na stronie Ceneo bez przełamania linii - jednolity, trudno czytelny blok

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:
Kod HTML w którym widać podział na wiersze i akapity

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:

Zapisz się na kanał RSS bloga i dołącz do ponad 1500 czytelników RSS.

Zostań fanem WebAudit na Facebooku.

Komentarze czytelników

Śledź komentarze do tego artykułu: format RSS
  1. Robert Drózd

    Jeszcze coś… Na Webinside http://www.webinside.pl/news/6188 w notce prasowej z sierpnia przeczytałem:

    „Serwis powstawał przy współpracy z Zespołem Usability i Projektów Graficznych Allegro. Przez kilka najbliższych dni Ceneo.pl będzie prowadzić testy porównawcze, stąd jedynie losowo wybrana grupa użytkowników zobaczy wersję BETA Ceneo.”

    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?

  2. Mateusz Kulesza

    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

  3. Krzysztof Dróżdż

    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)…

  4. Robert Drózd

    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.

  5. Łukasz B

    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…

  6. Robert Drózd

    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.

  7. Mateusz Kulesza

    „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. :]

  8. Mateusz Kulesza

    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. Robert Drózd

    @Mateusz:

    komentarze ? bez enterów; ograniczenie do X znaków; wyświetlane jeden pod drugim na stronie ? niczego nie popsujesz.

    Znaczy te entery z Twojego komentarza mogę usunąć? ;-)

  10. Mateusz Kulesza

    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 :)

  11. Robert Drózd

    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. :-)

  12. Jola

    A Ty niedobry. Ja tu wpisuje hasło „ceneo” a tu taki artykuł.
    Czas na Nokaut.

  13. ekke

    Robercie, mam takie dość proste pytanie. Czemu opiniujesz na Ceneo?

  14. Robert Drózd

    @ekke: nie opiniuję, napisałem opinię jeden raz. :-)

Komentarze z innych blogów

  1. 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 […]

  2. Podsumowanie roku 2009 : WebAudit Blog

    […] Jak popularny błąd popsuł czytelność opinii w Ceneo? […]

Zostaw komentarz

W komentarzu można (choć nie trzeba) używać podstawowych znaczników XHTML. Komentarze zawierające w podpisie słowa kluczowe mogą zostać potraktowane jako spam i usunięte.