WUD 2009 - Krótko i na temat - słów klika o pisaniu do Internetu

Krótko i na temat – słów klika o pisaniu do Netu

Plan na dzisiaj Trochę o typografii Trochę o pisaniu treści

Typografia Zadanie typografii: czytelnie i estetycznie zaprezentować i przekazać treść Ułatwić skanowanie i zrozumienie hierarchii wizualnej elementów tekstowo-graficznych Ułatwić czytanie

Typografia – hierarchia wizualna 1 - Skanowanie

Typografia – hierarchia wizualna 2 - Czytanie Typography Typography is the balance and interplay of letterforms on the page—a verbal and visual equation that helps the reader understand the form and absorb the substance of the page content. Typography plays a dual role as both verbal and visual communication. When readers scan a page they are subconsciously aware of both functions: first they Typography Typography is the balance and interplay of letterforms on the page—a verbal and visual equation that helps the reader understand the form and absorb the substance of the page content. Typography plays a dual role as both verbal and visual communication. When readers scan a page they are subconsciously aware of both functions: first they Typography Typography is the balance and interplay of letterforms on the page—a verbal and visual equation that helps the reader understand the form and absorb the substance of the page content. Typography plays a dual role as both verbal and visual communication. When readers scan a page they are subconsciously aware of both functions: first they Typography is the balance and interplay of letterforms on the page—a verbal and visual equation that helps the reader understand the form and absorb the substance of the page content. Typography plays a dual role as both verbal and visual communication. When readers scan a page they are subconsciously aware of both functions: first they

Typografia – hierarchia wizualna

Ekran monitora a papier Monitor: Mniejsza rozdzielczość (96-120ppi) 25% wolniejsze czytanie Różne platformy – mobilne, przeglądarki, OS’y Możliwość zmiany rozmiaru tekstu Interaktywność Specyficzny sposób czytania na www Nieograniczona przestrzeń

Proces czytania Fiksacje – gdy przesuwamy wzrok wzdłuż wierszy tekstu zatrzymujemy wzrok, aby oczy mogły zobaczy a mózg zrozumieć słowo lub grupę słów. Fiksacja to ok. 1/4s. Czytanie odbywa się w stanie fiksacji (spoczynku oka) Pole widzenia – podczas fiksacji w dany punkt widzimy dane słowo a także słowa otaczające je. Wprawna osoba widzi 2-2.5 słów na raz. Obrazy – słowa rozpoznawane są jako obrazy – dlatego nie czytamy litera po literze. Regresja – wsteczne ruchy oczy lub wsteczne fiksacje. 0.7% osób biegle czytających wykonuje ruchy wsteczne.

Czcionka Szeryfowa Dobre do długich tekstów drukowanych Bezszeryfowa Zoptymalizowane pod kątem czytelności na ekranie

Czcionka Czcionki szeryfowe i bezszeryfowe w nagłówkach Szeryfowe 40% Bezszeryfowe 60% http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/

Czcionka Czcionki szeryfowe i bezszeryfowe w tekście Szeryfowe 34% Bezszeryfowe 66% http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/

Formatowanie tekstu - zalecenia Nie pisz długich tekstów pogrubieniem Lorem ipsumdolor sit amet, consecteturadipisicing elit, sed do eiusmodtemporincididuntutlabore et dolore magna aliqua. Utenim ad minimveniam, quisnostrudexercitationullamcolaborisnisiutaliquip ex ea commodo consequat. Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur. Excepteursintoccaecatcupidatat non proident, suntinculpa qui officiadeseruntmollitanim id estlaborum. Lorem ipsumdolor sit amet, consecteturadipisicing elit, sed do eiusmodtemporincididuntutlabore et dolore magna aliqua. Utenim ad minimveniam, quisnostrudexercitationullamcolaborisnisiutaliquip ex ea commodo consequat. Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur. Excepteursintoccaecatcupidatat non proident, suntinculpa qui officiadeseruntmollitanim id estlaborum.

Formatowanie tekstu - zalecenia Nie pisz długich tekstów z pochyleniem Lorem ipsumdolor sit amet, consecteturadipisicing elit, sed do eiusmodtemporincididuntutlabore et dolore magna aliqua. Utenim ad minimveniam, quisnostrudexercitationullamcolaborisnisiutaliquip ex ea commodo consequat. Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur. Excepteursintoccaecatcupidatat non proident, suntinculpa qui officiadeseruntmollitanim id estlaborum. Lorem ipsumdolor sit amet, consecteturadipisicing elit, sed do eiusmodtemporincididuntutlabore et dolore magna aliqua. Utenim ad minimveniam, quisnostrudexercitationullamcolaborisnisiutaliquip ex ea commodo consequat. Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur. Excepteursintoccaecatcupidatat non proident, suntinculpa qui officiadeseruntmollitanim id estlaborum.

Formatowanie tekstu - zalecenia Nie podbijaj wyrazów podkreśleniem Lorem ipsumdolor sit amet, consecteturadipisicing elit, sed do eiusmodtemporincididuntutlabore et dolore magna aliqua. Utenim ad minimveniam, quisnostrudexercitationullamcolaborisnisiutaliquip ex ea commodo consequat. Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur. Excepteursintoccaecatcupidatat non proident, suntinculpa qui officiadeseruntmollitanim id estlaborum. Lorem ipsumdolor sit amet, consecteturadipisicing elit, sed do eiusmodtemporincididuntutlabore et dolore magna aliqua. Utenim ad minimveniam, quisnostrudexercitationullamcolaborisnisiutaliquip ex ea commodo consequat. Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur. Excepteursintoccaecatcupidatat non proident, suntinculpa qui officiadeseruntmollitanim id estlaborum.

Formatowanie tekstu - zalecenia Nie pisz wielkimi literami (spowalnia czytanie o 15%) Pismo To co widzimy Krótko i na temat KRÓTKO I NA TEMAT Krótko i na temat KRÓTKO I NA TEMAT Janice Reddish - „Letting Go of the Words: Writing Web Content that Works.”

Formatowanie tekstu - zalecenia Nie piszemy wielkimi literami Słowniki języka polskiego i wcześniejsze opracowania używają w tym znaczeniu słowa "funkcjonalność". Termin "użyteczność" wynika z chęci upodobnienia terminów polskich do angielskich. Obecnie w środowisku informatyków i pokrewnych przyjęło się rozumieć "funkcjonalność" jako określenie ilości funkcji, opcji czy możliwości danego programu/strony WWW, a "użyteczność" jako łatwość korzystania z tychże. Słowniki języka polskiego i wcześniejsze opracowania używają w tym znaczeniu słowa "funkcjonalność". Termin "użyteczność" wynika z chęci upodobnienia terminów polskich do angielskich. Obecnie w środowisku informatyków i pokrewnych przyjęło się rozumieć "funkcjonalność" jako określenie ilości funkcji, opcji czy możliwości danego programu/strony WWW, a "użyteczność" jako łatwość korzystania z tychże.

Formatowanie tekstu - zalecenia Długość linii Balans pomiędzy zbyt długimi fiksacjami a niezakłóconym przez skakanie po liniach przekazaniem myśli Ok 2 długości alfabetu Aąbcćdeęfghijklłmnńoóprsśtuwxyzżźaąbcćdeęfghijklłmnńoóprsśtuwxyzżź Ok. 50-60 znaków lub 2x rozmiar czcionki = długość wiersza w picach (1 pica = 1/6”= 4.23mm). Czyli dla czcionki 12pt, dł. wiersza = 12 * 2 * 1/6 = 4”*96ppi = 384px

Formatowanie tekstu - zalecenia Długość linii – za krótka

Formatowanie tekstu - zalecenia Długość linii – za długa Lorem ipsumdolor sit amet, consecteturadipisicing elit, sed do eiusmodtemporincididuntutlabore et dolore magna aliqua. Utenim ad minimveniam, quisnostrudexercitationullamcolaborisnisiutaliquip ex ea commodo consequat. Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur. Excepteursintoccaecatcupidatat non proident, suntinculpa qui officiadeseruntmollitanim id estlaborum.

Formatowanie tekstu - zalecenia Długość linii - przykład

Formatowanie tekstu - zalecenia Odpowiednia wysokość linii (zwykle 1.5x rozmiar czcionki) Słowniki języka polskiego i wcześniejsze opracowania używają w tym znaczeniu słowa "funkcjonalność". Termin "użyteczność" wynika z chęci upodobnienia terminów polskich do angielskich. Obecnie w środowisku informatyków i pokrewnych przyjęło się rozumieć "funkcjonalność" jako określenie ilości funkcji, opcji czy możliwości danego programu/strony WWW, a "użyteczność" jako łatwość korzystania z tychże. Słowniki języka polskiego i wcześniejsze opracowania używają w tym znaczeniu słowa "funkcjonalność". Termin "użyteczność" wynika z chęci upodobnienia terminów polskich do angielskich. Obecnie w środowisku informatyków i pokrewnych przyjęło się rozumieć "funkcjonalność" jako określenie ilości funkcji, opcji czy możliwości danego programu/strony WWW, a "użyteczność" jako łatwość korzystania z tychże.

Formatowanie tekstu - zalecenia Ograniczamy ilość rodzajów czcionek

Formatowanie tekstu - zalecenia Wyraźnie odróżniaj linki od tekstu Lorem ipsumdolor sit amet, consecteturadipisicing elit, sed do eiusmodtemporincididuntutlabore et dolore magna aliqua. Utenim ad minimveniam, quisnostrudexercitationullamcolaborisnisiutaliquip ex ea commodo consequat. Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur. Excepteursintoccaecatcupidatat non proident, suntinculpa qui officiadeseruntmollitanim id estlaborum. Lorem ipsumdolor sit amet, consecteturadipisicing elit, sed do eiusmodtemporincididuntutlabore et dolore magna aliqua. Utenim ad minimveniam, quisnostrudexercitationullamcolaborisnisiutaliquip ex ea commodo consequat. Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur. Excepteursintoccaecatcupidatat non proident, suntinculpa qui officiadeseruntmollitanim id estlaborum.

Typografia - formatowanie Unikaj poszarpanych tekstów Lorem ipsumdolor sit amet, consecteturadipisicing elit, sed do eiusmodtemporincididuntutlabore et dolore magna aliqua. Utenim ad minimveniam, quisnostrudexercitationullamcolaborisnisiutaliquip ex ea commodo consequat. Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur. Excepteursintoccaecatcupidatat non proident, suntinculpa qui officiadeseruntmollitanim id estlaborum. Lorem ipsumdolor sit amet, consecteturadipisicing elit, sed do eiusmodtemporincididuntutlabore et dolore magna aliqua. Utenim ad minimveniam, quisnostrudexercitationullamcolaborisnisiutaliquip ex ea commodo consequat. Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur. Excepteursintoccaecatcupidatat non proident, suntinculpa qui officiadeseruntmollitanim id estlaborum.

Typografia - formatowanie Ostrożnie z wyrównaniem obustronnym (możliwe dziury) Lorem ipsumdolor sit amet, consecteturadipisicing elit, sed do eiusmodtemporincididuntutlabore et dolore magna aliqua. Utenim ad minimveniam, quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat. Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur. Excepteursintoccaecatcupidatatnon proident, suntinculpaquiofficiadeseruntmollitanim id estlaborum. Lorem ipsumdolor sit amet, consecteturadipisicing elit, sed do eiusmodtemporincididuntutlabore et dolore magna aliqua. Utenim ad minimveniam, quisnostrudexercitationullamcolaborisnisiutaliquipexeaommodoconsequat. Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur. Excepteursintoccaecatcupidatat non proident, suntinculpa qui officiadeseruntmollitanim id estlaborum.

Typografia - formatowanie Duże nie znaczy czytelne

Typografia - formatowanie Rozmiar czcionki Rozmiar tekstu Występowanie Rozmiar czcionki

Typografia - formatowanie Kontrast – zalecenia WCAG 2.0 Minimalny kontrast dla czcionki 18pt i większej lub 14pt pogrubionej i większej – RGB (149 149149) na białym tle Minimalny kontrast dla czcionki mniejszej niż 18pt RGB (118 118118) na białym tle – WCAG 2.0 AA Zalecany jest RGB (89 8989) na białym tle– WCAG 2.0 AAA

Typografia - formatowanie Co jest źle? Słowniki języka polskiego i wcześniejsze opracowania używają w tym znaczeniu słowa "funkcjonalność". Termin "użyteczność" wynika z chęci upodobnienia terminów polskich do angielskich. Obecnie w środowisku informatyków i pokrewnych przyjęło się rozumieć "funkcjonalność" jako określenie ilości funkcji, opcji czy możliwości danego programu/strony WWW, a "użyteczność" jako łatwość korzystania z tychże. W wyniku tych terminologicznych nowinek, jeśli informatyk porozumiewa się z nieinformatykiem, zdanie ”coś jest mało użyteczne, ale wysoce funkcjonalne” jest rozumiane na opak. Nową propozycją jest zastąpienie terminu "użyteczność" słowem "używalność", pozwoliłoby to zarówno na zgodność z angielskim nazewnictwem jak i zachowanie terminu zgodnego polskim rozumieniem tego słowa.

Typografia - formatowanie Co jest źle? Słowniki języka polskiego i wcześniejsze opracowania używają w tym znaczeniu słowa "funkcjonalność". Termin "użyteczność" wynika z chęci upodobnienia terminów polskich do angielskich. Obecnie w środowisku informatyków i pokrewnych przyjęło się rozumieć "funkcjonalność" jako określenie ilości funkcji, opcji czy możliwości danego programu/strony WWW, a "użyteczność" jako łatwość korzystania z tychże. W wyniku tych terminologicznych nowinek, jeśli informatyk porozumiewa się z nieinformatykiem, zdanie ”coś jest mało użyteczne, ale wysoce funkcjonalne” jest rozumiane na opak. Nową propozycją jest zastąpienie terminu "użyteczność" słowem "używalność", pozwoliłoby to zarówno na zgodność z angielskim nazewnictwem jak i zachowanie termitu zgodnego polskim rozumieniem tego słowa.

Typografia - formatowanie Co jest źle? Słowniki języka polskiego i wcześniejsze opracowania używają w tym znaczeniu słowa "funkcjonalność". Termin "użyteczność" wynika z chęci upodobnienia terminów polskich do angielskich. Obecnie w środowisku informatyków i pokrewnych przyjęło się rozumieć "funkcjonalność" jako określenie ilości funkcji,

Efektywne pisanie do sieci Parę faktów Jedynie 28% tekstu czytane jest przy pierwszej wizycie Prawie 80% osób wchodząc na stronę skanuje tekst (bez czytania) 16% osób czyta Medium klikalne (anty-statyczne): 1 miejsce – Link 2 miejsce – przycisk (z uwagi na dużą ilość aplikacji webowych) 3 miejsce – „Wróć” (koło ratunkowe dla większości z nas) Dla stron zorientowanych na treść jest to najważniejszy element odpowiedzialny za postrzeganą użyteczność strony www.alertbox.com

Efektywne pisanie do sieci Parę faktów Nie czytamy długich wstępów („Witaj w naszym serwisie. Mamy nadzieję, że…”) Za to krótkie wstępy mogą być OK Odrzucamy informacje na nas ‘pchane’ – www to medium użytkownika a nie autora tekstu Sklejamy kawałki informacji w całość

Efektywne pisanie do sieci Wzorzec F – co wynika z badań eyetrackingu

Efektywne pisanie do sieci Wzorzec F – co wynika z badań eyetrackingu Użytkownicy nie czytają twojego tekstu dokładnie a jedynie pobieżnie. Czytanie dokładnie jest rzadkie, szczególnie gdy użytkownik wstępnie ‘bada sprawę’ Pierwsze 2 paragrafy muszą zawierać czyste fakty, aby maksymalnie zaangażować użytkownika i przekazać, że tutaj na pewno znajdzie lub nie znajdzie szukanej informacji Należy rozpoczynać nagłówki, tytuły podsekcji słowami zawierającymi informacje. Zostanie to wychwycone przez użytkowników skanujących pionowo tekst (w dół litery F) Uwaga – czasami można zastosować stronę bierną

Efektywne pisanie do sieci - zalecenia Usuń połowę istniejącego tekstu Następnie… usuń znowu połowę (Zalecenie Kruga)  Stosuj zasadę odwróconej piramidy – od ogółu do szczegółu Przykład z publikacji naukowych Raporty Konkrety, konkrety, konkrety Jeden paragraf na jedną ideę Unikamy strony biernej, zdań z wielokrotnym zaprzeczeniem i zaimków „który, kto, komu”.

Efektywne pisanie do sieci - zalecenia Nagłówki sekcji/Tytuły artykułów Krótkie Jednoznacznie podsumowujące artykuł Słowa-klucze, niosące sedno sprawy na początku nagłówka Zrozumiałe, bez treści artykułu (wyszukiwarki, listy )

Efektywne pisanie do sieci - zalecenia Nie tworzymy nowych terminów na istniejące rzeczy: „Podręczny nabierak na płyny = łyżka” Nie korzystamy z ‘wewnętrznego’ słownictwa Nazwy brandingowe powinny mieć wyjaśnienia („Baby-Assistance” ??) Liczby jako numery (nie tekst) Eliminujemy błędy ortograficzne i stylistyczne Uwaga na akronimy

Efektywne pisanie do sieci Osoby, którym czytanie przychodzi trudno czytają zupełnie inaczej! Brną przez tekst Wyjątkowo skupieni na czytaniu – omijają wszystko dookoła tekstu Nie skanują jak większość Mały próg niezrozumiałości – kontynuacja trudności powoduje przeskakiwanie i omijanie istotnych informacji

Efektywne pisanie do sieci http://www.useit.com/alertbox/20050314.html

Efektywne pisanie do sieci - zalecenia Zatem dla osób nie czytających biegle: Odpowiedni priorytet dla informacji najważniejszych Unikamy tekstu, który się rusza lub zmienia (rozsuwanie, pokazywanie całości) Zawartość w pojedynczej kolumnie (skanowanie tylko w 1 wymiarze – góra dół)

Efektywne pisanie do sieci - podsumowanie Konkrety, konkrety, konkrety Prosty język (szczególnie dla osób mających trudności z czytaniem – a jest ich ok. 40% populacji – dane z USA) Tekst nie niosący informacji złodziejem uwagi No i czytelnie…

WUD 2009 - Krótko i na temat - słów klika o pisaniu do Internetu

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Mehr von World Usability Day Tour 2009

Mehr von World Usability Day Tour 2009 (20)

WUD 2009 - Krótko i na temat - słów klika o pisaniu do Internetu