Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

Webwriting

Autor: Piotr Karpiuk o wtorek 16. Listopad 2010


Jakiś czas temu wpadła mi w ręce mała objętościowo i droga w przeliczeniu na stronę, ale naprawdę niezła książka J.Wryczy-Bekier pt. Webwriting. Profesjonalne tworzenie tekstów dla Internetu – pełna ciekawych zaleceń dla osób chcących publikować teksty w internecie. Poniżej moje notatki.

Funkcjonalność stron internetowych

Eyetracking


Ścieżka poruszania się wzroku po ekranie

Badania ruchu gałek ocznych internautów pokazują (patrz rysunki obok) że:

  • lewy górny róg jest kluczowym elementem na stronie,
  • górna część ekranu jest ważniejsza od części dolnej,
  • dolna część ekranu jest najmniej ważną strefą.

Nawigacja

Dobrze zaprojektowana nawigacja umożliwia użytkownikowi znalezienie odpowiedzi na pytania: „Gdzie jestem?”, „Gdzie byłem?” oraz „Dokąd mogę pójść?”.

Nawigacja obejmuje:

  • logo (lewy górny róg, na wszystkich stronach witryny, zawsze jako łącze do strony głównej, nigdy nie animowany) – pod logo zalecany krótki wiersz podsumowujący czym firma się zajmuje,
  • wyszukiwarka (górna część ekranu, pod banerami, pole wyszukiwania powinno mieć biały kolor, szerokość min. 30 znaków, po jego prawej stronie przycisk Szukaj),
  • narzędzia użytkownika (np. koszyk – prawy górny róg ekranu, pomoc – górna prawa strona ekranu, łącze do rejestracji/autoryzacji),
  • pasek nawigacyjny – kategorie (pionowy i lewostronny, najpierw najważniejsze kategorie),
  • nawigacja lokalna – pojawiająca się na podstronach, w szczególności ścieżka powrotu.

Witryna ma nie tyle zwracać uwagę, ile poświęcać uwagę użytkownikowi.
Tylko 10% internautów przewija strony, czyli kluczowe informacje powinny znaleźć się ponad linią zanurzenia.

Ślepota banerowa

nie widzimy tego co znajduje się ponad bannerami


Strefy ekranu wyodrębnione pod względem ważności

Wprowadzenie do webwritingu

Internet jest pierwszym medium, dzięki któremu ekran i tekst zaczęły współistnieć.

Tekst drukowany na papierze a tekst w internecie
Tekst drukowany Tekst w Internecie
materialny, przytwierdzony do kartki pozbawiony atrybutów fizycznych
stabilny, niezmienny może być w każdej chwili zmieniony
spójny jako całość spójny na poziomie fragmentu
trwały ulotny
statyczny dynamiczny
linearny hipertekstowy
samowystarczalny multimedialny

Czytanie z monitora jest o mniej więcej 25% wolniejsze niż czytanie z papieru.

Strony w internecie czytamy nieuważnie i niecierpliwie – właściwie tylko je przeglądamy. Czytanie internetu ma zwykle charakter użytkowy a nie rekreacyjny. Najważniejsze jest pierwsze 10 sekund obcowania z tekstem. W internecie czyta się teksty raczej pionowo (z góry na dół) niż poziomo (z lewej do prawej). Kształt w który układa się obszar czytelniczej uwagi przypomina kształt litery F (patrz rysunek obok).

Zasada odwróconej piramidy

Najważniejsze informacje na początku tekstu

Obszar czytelniczej uwagi przypomina literę F

Cechy tekstu użytkowego

Zwięzły i rzeczowy

  • Krótki, szanujący czas użytkownika, „mniej znaczy więcej”
  • warto usuwać: powtórzenia, szczegóły (możesz je podpiąć jako link), słowa nie wnoszące nic nowego lub podkreślające szczerość (bowiem, bez wątpienia),

Przejrzysty

  • Właściwy tytuł
    • rzeczowy i konkretny,
    • zdanie max. 60 znaków które streszcza cały tekst,
    • mocniejsze słowa kluczowe najpierw,
  • podział na akapity
    • akapitów powinno być więcej i znacznie krótszych (2-3 wierszowych) niż w tekście drukowanym,
    • jeden akapit ma zawierać tylko jedną główną myśl
    • im wyższej umieszczony akapit tym ważniejsza zawartość; słowa kluczowe możliwie jak najbardziej po lewej
    • pierwszy akapit to często tzw. lead – wytłuszczone wprowadzenie dostarczające czytelnikowi wszelkich informacji potrzebnych do podjęcia decyzji o dalszym czytaniu („Jeśli tytuł jest haczykiem, to lead jest żyłką”),
  • umieszczanie nagłówków nad akapitami
    • nagłówek powinien mieć większą czcionkę lub pogrubienie,
    • w tekście internetowym nagłówków powinno być więcej niż to wydaje się rozsądne, najlepiej przed każdym akapitem,
    • nagłówek jest streszczeniem akapitu; jeśli nie umiemy wymyśleć nagłówka dla akapitu to prawdopodobnie akapit nie jest spójny treściowo,
    • nagłówki powinny mieć jednolitą formę gramatyczną (same pytania, same równoważniki, same zdania) – skuteczne są nagłówki w formie pytań zadanych z perspektywy użytkownika,
    • unikaj powtarzania tego samego słowa na początku (np. „jak…?”), lepszy jest tryb przypuszczający („Chciałbym wymienić bilet papierowy”) lub rozkazujący („Zamów e-bilet”), unikaj sformułowań typu „Zamawianie e-biletu” (forma rzeczownikowa powoduje że zdanie traci dynamikę)
  • wyliczenia – pozwalają uporządkować myśli, pomagają w zapamiętywaniu, wnoszą przejrzystość, umożliwiają szybkie wyszukanie informacji; jednolita budowa gramatyczna elementów
    • stosuj zawsze gdy to jest możliwe – częściej niż w tekstach drukowanych,
    • lista wypunktowana nie powinna być zbyt długa (max. kilka elementów, jeśli trzeba to podziel listę wypunktowaną na kilka mniejszych list), wytłuszczone nagłówki elementów listy, najdłuższy element wyliczenia umieszczamy na końcu,
    • lista numerowana dla instrukcji gdy ważna jest kolejność,
  • tabele – unikaj dużej ilości kolumn (najlepiej dwie-trzy); internauci przewijają poziomy suwak jeszcze rzadziej niż pionowy

Czytelny

  • wyrównanie tekstu – zawsze do lewej,
  • kolor tła – jasny,
  • rodzaj czcionki
    • ciemna,
    • bezszeryfowa (Arial, Helvetica, Tahoma, Verdana, Trebuchet MS; wyjątkiem jest Georgia stworzona z myślą o publikacjach elektronicznych),
    • między 10 a 14pt, najlepiej 12,
    • unikaj LITER DRUKOWANYCH (zajmują o 30% więcej miejsca i czyta się je o 15% wolniej) i kursywy,
    • wyróżniaj za pomocą pogrubienia lub koloru)

Napisany prostym językiem

  • krótkie zdania (zwłaszcza pojedyncze) średnio po 10-20 słów
  • upraszczać zdania:
    • podmiot blisko orzeczenia („Webwriter używa prostych zdań”),
    • przysłówek blisko czasownika („Webwriter używa często prostych zdań”),
    • przymiotnik przed rzeczownikiem („Dobry webwriter używa często prostych zdań”),
    • zaimek możliwie najbliżej rzeczownika („Ten dobry webwriter używa często prostych zdań”).
  • unikać:
    • synonimów – w tekstach użytkowych nie bój się użyć dwa razy tego samego słowa w jednym zdaniu jeśli poprawi to zrozumienie zdania,
    • zaimków, zwłaszcza osobowych – w tekstach użytkowych lepiej powtórzyć to samo słowo („Linki wstawiamy wewnątrz tekstu i pod tekstem” zamiast „Linki wstawiamy wewnątrz tekstu i pod nim”),
    • zaprzeczeń – zdania powinny mieć wydźwięk pozytywny („Webwriter może używać powtórzeń” zamiast „Webwriter nie stosuje synonimów”),
    • rzeczowników odczasownikowych (np. „pisanie”) – czasowniki wnoszą do zdań dynamikę (np. „pisać”),
    • łańcuchów rzeczowników (np. „sposoby wzbudzania zainteresowania czytelnika”) – wynika to często z nadużywania dopełniacza,
    • cyfr i liczb pisanych słownie

Hipertekstowy

  • linki przyczyniają się do zwięzłości i rzeczowości tekstu (wyjaśniają terminy, uzupełniają informacje), staraj się by zawierały streszczenie informacji do których prowadzą (unikaj linków typu „Kliknij tutaj” czy „Więcej”),
  • w sieci działa zasada odwrotna niż w tekstach drukowanych: najpierw patrzymy na tekst, potem na zdjęcia

Konwersacyjny

  • przechodź z czytelnikiem na „ty” – gwarantuje to życzliwą, bezpośrednią komunikację, a jednocześnie może dać odbiorcy poczucie wyjątkowości,
  • staraj się przewidzieć pytania na które odpowiedzi szuka czytelnik; używaj słów które spodziewasz się u czytelników we frazie Googla mającej znaleźć Twój artykuł (tzw. słowa pragnień),
  • używaj czasowników – są najbardziej nośne informacyjnie i wiążą się z działaniem, są punktami orientacyjnymi dla niecierpliwych użytkowników; używaj zwłaszcza strony czynnej (w znaczeniu nakłaniania czy wezwania do czynu, np. „Nie martw się”) i trybu rozkazującego, najlepiej w ogóle nie używaj strony biernej,
Share and Enjoy:
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Śledzik
  • Blip
  • Blogger.com
  • Gadu-Gadu Live
  • LinkedIn
  • MySpace
  • Wykop

Zostaw komentarz

XHTML: Możesz użyć następujących tagów: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>