�ݺ�ߣ

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

Plan na dzisiajTrochę o typografiiTrochę o pisaniu treści

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

Typografia – hierarchia wizualna1 - Skanowanie

Typografia – hierarchia wizualna2 - CzytanieTypographyTypography 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 TypographyTypography 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 TypographyTypography 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 papierMonitor:Mniejsza rozdzielczość (96-120ppi)25% wolniejsze czytanieRóżne platformy – mobilne, przeglądarki, OS’yMożliwość zmiany rozmiaru tekstuInteraktywnośćSpecyficzny sposób czytania na wwwNieograniczona przestrzeń

Proces czytaniaFiksacje – 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.

CzcionkaSzeryfowaDobre do długich tekstów drukowanychBezszeryfowaZoptymalizowane pod kątem czytelności na ekranie

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

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

Formatowanie tekstu - zaleceniaNie pisz długich tekstów pogrubieniemLorem 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 - zaleceniaNie pisz długich tekstów z pochyleniemLorem 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 - zaleceniaNie podbijaj wyrazów podkreśleniemLorem 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 - zaleceniaNie pisz wielkimi literami (spowalnia czytanie o 15%)PismoTo co widzimyKrótko i na tematKRÓTKO I NA TEMATKrótko i na tematKRÓTKO I NA TEMATJanice Reddish - „Letting Go of the Words: Writing Web Content that Works.”

Formatowanie tekstu - zaleceniaNie piszemy wielkimi literamiSł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 - zaleceniaDługość liniiBalans pomiędzy zbyt długimi fiksacjami a niezakłóconym przez skakanie po liniach przekazaniem myśli Ok 2 długości alfabetuAąbcćdeęfghijklłmnńoóprsśtuwxyzżźaąbcćdeęfghijklłmnńoóprsśtuwxyzżźOk. 50-60 znakówlub2x 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 - zaleceniaDługość linii – za krótka

Formatowanie tekstu - zaleceniaDługość linii – za długaLorem 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 - zaleceniaDługość linii - przykład

Formatowanie tekstu - zaleceniaOdpowiednia 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 - zaleceniaOgraniczamy ilość rodzajów czcionek

Formatowanie tekstu - zaleceniaWyraźnie odróżniaj linki od tekstuLorem 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 - formatowanieUnikaj poszarpanych tekstówLorem 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 - formatowanieOstroż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 - formatowanieDuże nie znaczy czytelne

Typografia - formatowanieRozmiar czcionkiRozmiar tekstuWystępowanieRozmiar czcionki

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

Typografia - formatowanieCo 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 - formatowanieCo 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 - formatowanieCo 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 sieciParę faktówJedynie 28% tekstu czytane jest przy pierwszej wizyciePrawie 80% osób wchodząc na stronę skanuje tekst (bez czytania)16% osób czytaMedium klikalne (anty-statyczne):1 miejsce – Link2 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ść stronywww.alertbox.com

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

Efektywne pisanie do sieciWzorzec F – co wynika z badań eyetrackingu

Efektywne pisanie do sieciWzorzec 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 informacjiNależ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 - zaleceniaUsuń połowę istniejącego tekstuNastępnie… usuń znowu połowę (Zalecenie Kruga) Stosuj zasadę odwróconej piramidy – od ogółu do szczegółuPrzykład z publikacji naukowychRaportyKonkrety, konkrety, konkretyJeden paragraf na jedną ideęUnikamy strony biernej, zdań z wielokrotnym zaprzeczeniem i zaimków „który, kto, komu”.

Efektywne pisanie do sieci - zaleceniaNagłówki sekcji/Tytuły artykułówKrótkieJednoznacznie podsumowujące artykułSłowa-klucze, niosące sedno sprawy na początku nagłówkaZrozumiałe, bez treści artykułu (wyszukiwarki, listy )

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

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

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

Efektywne pisanie do sieci - zaleceniaZatem dla osób nie czytających biegle:Odpowiedni priorytet dla informacji najważniejszychUnikamy 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 - podsumowanieKonkrety, konkrety, konkretyProsty 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 uwagiNo i czytelnie…

�ݺ�ߣ

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

More Related Content

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