Komunikacja człowiek-komputer. Wykład 4

Transkrypt

1 Komunikacja człowiek-komputer Wykład 4

2 Typografia Typografia sztuka użytkowa mająca na celu graficzną interpretację drukowanej informacji, a więc ukształtowanie i układ elementów graficznych całej publikacji. Typografia operuje szeroką gamą środków wyrazu, do których należą: krój i wielkość pisma, płaszczyzna zadrukowana i wolna od druku, kolor oraz różnego rodzaju ornamenty lub związane z tekstem ilustracje. Do typografii należy również wybór metody drukowania oraz materiałów, głównie papieru. Celem typografii jako sztuki stosowanej jest znalezienie odpowiedniej formy dla przekazania konkretnej treści zawartej w książce, gazecie, itp. Ułatwia ona czytelnikowi odbiór wiadomości, a więc ma do spełnienia określone psychologiczne funkcje propagandowe i pedagogiczne. A. Tomaszewski Leksykon pism drukarskich, wyd. Krupski i S-ka, Warszawa 1996

3 Typografia Typografia kongenialne projektowanie ułatwiające czytanie, odbiór treści oraz orientację w strukturze informacji. J. Mrowczyk Niewielki słownik typograficzny, wyd. Czysty warsztat, Gdańsk 2008

4 Typografia Przejrzystość nadal stanowi poważny problem dzisiejszych stron internetowych. Nieważne, jak dobrze wygląda serwis. Jeżeli ludzie nie mogą łatwo odczytywać tekstu, to skazany jest on na zagładę Jakob Nielsen

5 Niska rozdzielczość ekranu O ile przy wydrukach z drukarek laserowych operuje się rozdzielczościami z zakresu dpi, przy druku książek rozdzielczościami dpi, o tyle typowa rozdzielczość ekranowa to dpi. Dla małych stopni pisma dysponuje się zatem niewielką ilością pikseli do oddania kształtu znaków.

6 Z innej beczki - ciekawostki Dzisiejsze komputery wyświetlają około punktów na cal (ang. dotperinch dpi), podczas gdy papier może pokazać od 600 dpi na wydruku z drukarki laserowej do 3000 dpi w magazynie ilustrowanym. Współczynnik dpi przenosi się bezpośrednio na klarowność znaków. Ze względu na to, że monitory komputerowe mają znacznie mniejsze rozdzielczości, tekst przez nie wyświetlany jest dużo bardziej zamazany. Jest to główny powód, dla którego należy unikać czcionek szeryfowych.

7 Z innej beczki - ciekawostki Monitory wykonały już pewien skok jakościowy, odkąd pierwszy monitor firmy Macintosh został przedstawiony w 1984 roku. Miał on rozdzielczość 72 dpi. Jednakże nie rozwijały się one tak szybko, jak inne części komputerów. Przeciętne komputery PC zwiększyły szybkość przetwarzania o około 16 tysięcy razy w stosunku do pierwszych komputerów firmy Macintosh i posiadają o około 8 tysięcy razy więcej pamięci. Ale przeciętny monitor jest jedynie około 4 razy większy niż ekran komputera firmy Macintosh zaprezentowany w 1984 i nawet nie zbliżył się do tego, by miał dwa razy tyle dpi.

8 Z innej beczki - ciekawostki Do 2025 roku powinniśmy w końcu używać na tyle porządnych monitorów, by uzyskać na nich jakość zbliżoną do typograficznej jakości papieru. Wyspecjalizowane branże prawdopodobnie będą z nich korzystać nawet wcześniej. Kiedy komputery będą już tak dobre, jak papier, prawdopodobnie wskazówki typograficzne związane z siecią ulegną zmianie, podobnie jak uległy zmianie te, które dawno temu zostały wypracowane z myślą o drukowaniu, łącznie z tym, by preferowane były czcionki szeryfowe.

9 Przykład Przykładowe litery kroju Georgia w stopniu 10 punktów zrastrowane w rozdzielczości 1200 i 85 dpi (w powiększeniu).

10 Antyaliasing Metodą poprawy czytelności czcionek ekranowych jest Antyaliasing (ang.anti-aliasing) służący zmniejszeniu błędów zniekształceniowych.

11 Antyaliasing Źródło:

12 Windows Mac OS

13 Krój o jak najprostszych kształtach znaków Do prezentacji w niskich rozdzielczościach najlepiej nadają się litery o prostych kształtach.

14 Krój o dużym stosunku wysokości minuskuł do wysokości majuskuł Im stosunek minuskuł do majuskuł jest większy, tym więcej pikseli jest do dyspozycji dla zrealizowania litery minuskułowej (a stanowią one większą część tekstu ciągłego). Stosunek ten nie może być jednak zbyt duży, dłuższy tekst może być mniej czytelny.

15 Majuskuły, minuskuły Litery: duże (majuskuły) inaczej wersaliki, wielkie litery alfabetuł, mieszczące się między górną a podstawową linią pisma. małe (minuskuły) inaczej litera tekstowa; mała litera alfabetu, jej górna i dolna krawędź mieści się między podstawową, a środkową linią pisma, natomiast jej wydłużenia między dolną i górną linią pisma.

16 Złudzenia optyczne w typografii Majuskuła musi być pisana węższym narzędziem niż minuskuła. Poprzeczki należy pisać cieniej niż piony. Poprzeczki piszemy w środku optycznym strony.

17 Krój o odpowiednio dużych odległościach międzyliterowych Odstęp jest to światło między dwiema literami tego samego wyrazu. Odstępy między literami, których sąsiadujące kreski są pionowe, powinien być większy niż między kreską pionową jednej litery a łukiem drugiej. Mniejszy odstęp jest między literami zbudowanymi z łuków. Litery wyświetlane na ekranie monitora nie powinny się stykać ze sobą w żadnej sytuacji (nawet dla bardzo małych wielkości). Oczywiście odległości między literowe nie powinny być zbyt duże nie mogą zakłócać czytelności odległości między wyrazowych.

18 Jeśli tekst jest pisany majuskułą odległości między wyrazami powinny wynosić szerokość litery A

19 Jeśli tekst jest pisany minuskułą bez szeryfów odległość między wyrazami powinna wynosić ⅓ szerokości dwóch liter a lub litery n

20 Jeśli tekst jest pisany minuskułą z szeryfami odległość między wyrazami powinna wynosić szerokość litery t

21 Iluzja wielkości

22 Iluzja koloru

23 Iluzja koloru

24 Siatka Hermana

25 Najczęstsze problemy Pokazywany tekst jest za mały lub nieczytelny. Nie można zmieniać rozmiaru tekstu. Kolor tekstu nie zapewnia dostatecznego kontrastu względem tła. Tekst jest zaciemniony przez otaczające elementy projektu.

26 Pamiętaj! I. Należy korzystać z powszechnych czcionek o rozmiarze nie mniejszym niż 10 punktów. II. Należy unikać zagmatwanego tła. III.Należy stosować tekst o dużym kontraście. IV.Należy unikać tekstu ruchomego, pisanego wersalikami lub zawartego w grafice.

27 Rozmiar czcionki

28 Oba teksty poniżej zajmują taką samą powierzchnię i niosą podobną porcję informacji. Tylko czy ktoś przeczytał ten niżej?

29 Zalecane rozmiary czcionek

30 Uwagi Warto sprawdzić różne kroje czcionek i upewnić się, że wraz z nimi używamy odpowiednich rozmiarów. Ta sama wielkość czcionki może wyglądać na większą lub mniejszą w zależności od tego, jaki krój został wybrany, na przykład: Tekst pisany czcionką Georgia. Tekst pisany Times New Roman. Tekst pisany Arial.

31 Rodzaje czcionek Czcionki szeryfowe charakteryzują się poziomymi kreskami na końcówkach każdej litery lub innych złożeń. AaBaCcDdEeFf... Czcionki bezszeryfowe są proste i nie mają elementów dekoracyjnych. Od czcionek szeryfowych różnią się grubością kresek. AaBaCcDdEeFf...

32 Ze względu na to, że czcionki szeryfowe mają wiele detali, doskonale sprawdzają się w książkach i magazynach, które cechują się typografią o bardzo wysokiej jakości. Badania czytelności pokazują, że tekst wydrukowany czcionką szeryfową większość ludzi czyta szybciej niż tekst wydrukowany czcionką bezszeryfową. Niestety ekrany komputerów nie oferują jakości typografii porównywalnej z drukiem, tak więc dokładne detale wcale nie wyglądają tak dobrze w ostatecznym rozrachunku. Badania czytania z ekranu pokazują, że tekst pisany czcionką bezszeryfową jest czytany szybciej, czyli na odwrót niż w przypadku materiałów drukowanych.

33

34 Popularne czcionki i ich rodziny Nazwa czcionki Rodzina czcionek Arial Bezszeryfowa Arial Black Bezszeryfowa Comic Sans MS Kursywa Courier New Stała szerokość Georgia Szeryfowa Impact Bezszeryfowa Times New Roman Szeryfowa TrebuchetMS Bezszeryfowa Verdana Bezszeryfowa

35

36

37 Przy wyborze kroju pisma masz do dyspozycji wszystkie kroje zainstalowane na Twoim komputerze. Pamiętaj jednak, że inni użytkownicy wcale nie muszą nimi dysponować! Z tego powodu powinieneś ograniczać się do standardowych rodzin krojów pisma: serif czcionka szeryf owa, np. Times New Roman, sans-serif czcionka bezszeryfowa, np. Arial, cursive oraz fantasy ozdobne czcionki pochyłe (rzadko używane, gdyż każda przeglądarka może podstawić w ich miejsce całkowicie inne kroje pisma często w ogóle nieprzystające do zamysłu autora strony), mono czcionka nieproporcjonalna (o stałej szerokości wszystkich znaków) używana najczęściej do zapisywania tekstu programów komputerowych, tworzenia prymitywnych tabel lub wyróżniania poleceń programów; np. Courier New.

38 MAC WINDOWS

39 Używanie niestandardowych czcionek Użycie bitmapy - rozwiązanie to posiada jednak pewne wady. Po pierwsze, bitmapa ma dużo większą objętość, niż ten sam tekst przeznaczony do wyświetlenia przez przeglądarkę bezpośrednio. Po drugie, większość tekstów w małych wielkościach wymaga antyaliasingu. Dołączenie fontów do witryny - istnieją systemy pozwalające na użycie dowolnego fontu w tworzonej witrynie, a następnie wysłanie go razem ze ściąganą witryną (WEFT firmy Microsoft czy TrueDocfirmy Bitstream). Jest to sposób także zwiększający znacznie objętość witryny, szczególnie gdy wykorzystywanych jest kilka fontów.

40 Wskazówki Zarówno rodzina szeryfowa, jak i bezszeryfowa posiada czcionkę zaprojektowaną specjalnie do wykorzystania w sieci - odpowiednio Georgia oraz Verdana. Czcionki bezszeryfowe są bardziej nowoczesne i bardziej przejrzyste przy małych rozmiarach. Jeżeli nie mamy pewności, z której skorzystać, lepiej zdecydować się na czcionkę Verdana. (Jest ona powszechna na wszystkich komputerach, działa szczególnie dobrze przy mniejszych rozmiarach i jest najbardziej wygodna do czytania na ekranach.) Czcionki szeryfowe dają wrażenie elegancji, czy też oficjalności. Dobrym wyborem jest tu Georgia, gdyż również dobrze sprawdza się przy przeglądaniu w sieci. Czcionka Impact sprawdza się w nagłówkach wyróżnia tekst lepiej niż pogrubienie

41 Mieszanie czcionek i kolorów

42 Na stronie internetowej należy ograniczać liczbę różnych czcionek i stosować je w sposób konsekwentny. Elementy pokazywane od strony graficznej w podobny sposób mają taki sam poziom akcentowania (wpływu na użytkownika). Używanie różnorodnych czcionek i ich atrybutów może pomóc odwiedzającym w rozróżnieniu stopnia ważności nagłówków oraz informacji. Aby podkreślić pewne akcenty, należy korzystać z różnych atrybutów, takich jak pogrubienie, kolor oraz rozmiar. Trzeba to jednak robić oszczędnie. Gdy wszystko jest wyróżnione, nic nie jest akcentowane. Te same reguły dotyczą koloru.

43 Wskazówka Zaleca się, aby na stronie w głównych obszarach nie było więcej niż: cztery różne kolory, trzy kroje tekstu, W przeciwnym razie będzie ona wyglądała na nieustrukturyzowaną i nieprofesjonalną.

44 Kontrast między tekstem i tłem

45

46 Kontrast między tekstem i tłem

47 Wskazówka Nic nie wygląda bardziej amatorsko niż zagmatwane tło. Nie wolno go używać! Nie tylko wygląda ono źle, ale tekst ustawiony na takim tle cechuje się niższą czytelnością. Oszczędzajmy bólu głowy i sobie, i osobom odwiedzającym witrynę! Przykład:

48

49 Barwy zestawienia kolorystyczne około 96% informacji nt. świata zyskujemy w ramach percepcji wzrokowej. Ludzkie oko jest wyposażone w aparaturę umożliwiającą widzenie barw oraz widzenie jasności resztę roboty wykonuje już mózg. To wyspecjalizowanie nadwrażliwość na kolory powoduje, że podczas oceny tego, co widzimy, olbrzymią rolę odgrywa to, czy dana rzecz spełnia nasze oczekiwania kolorystyczne. Zatem: lepiej mieć nad tym panowanie, niż zdawać się na przypadek. McLuhan w ramach teorii mediów twierdził, że sposób prezentowania treści zawiera już w sobie treść. Nic dodać, nic ująć, w przypadku sposobu prezentacji treści wykorzystującego kolory. Źródło: Marek Kasperski

50 Barwy zestawienia kolorystyczne Przy pomocy kilku zasad tworzenia zestawów kolorystycznych, otrzymujemy schematy kolorów harmonijnych: zarówno monochromatyczne, pastelowe, jak i kontrastowe. W ramach tworzenia zestawów harmonijnych korzysta się m.in. z zasad: komplementarności: weź dowolne dwa kolory leżące naprzeciw siebie w kole barw, triady: weź dowolne trzy kolory leżące na kole barw od siebie w jednakowych odległościach, tworząc tym samym trójkąt, weź cztery dowolne kolory leżące na kole barw, które leżą od siebie tak, że tworzą wierzchołki prostokąta, i innych. Korzystając ze strony możemy przekonać się jak to działa.

51 Zestawy kolorów monochromatycznych np. weź dowolny kolor i, z jednej strony, dodawaj do niego +20%, +40%, +60%, +80% białego oraz, z drugiej strony, +20%, +40%, +60%,+80% koloru czarnego. Jednak w przypadku kolorów monochromatycznych pamiętajmy o odpowiednim kontraście, który będzie ważny ze względu na czytelność tekstu i tła, na którym tekst się znajduje.

52 Zestawy barw pastelowych Uzyskujemy je z odległych od siebie barw ale posiadających podobne cechy, na przykład niski stopień nasycenia.

53 Schematy kontrastowe Wystarczy połączyć ze sobą barwy dopełniające się.

54

55 Funkcjonalność to nie to samo co estetyka. Estetyka pomaga, lecz nie jest niezbędna. Trzeba przyznać, że niektóre z serwisów są naprawdę piękne i że stworzone zostały przez bardzo uzdolnionych projektantów. Gdyby były pokazane w gablotach w charakterze dzieł sztuki, byłyby wychwalane. Jednak w przeciwieństwie do dzieł sztuki umieszczanych w muzeum, strony internetowe są używane przez bardzo dużą liczbę osób. Aby mogły być efektywne, muszą podążać za kilkoma praktycznymi wskazówkami.

56 Częścią funkcjonalności jest czytelność a ona nie zawsze idzie w parze z koncepcją eteryczną Większość stron prywatnych, które są absolutnie nieczytelne, jest taka, gdyż autor chciał coś zrobić żeby było ładnie i oryginalnie. Porównując do sztuki: projektując funkcjonalną stronę, która ma na siebie zarabiać, dążymy do estetyki typu Jeleń na rykowisku, a nie w stronę: artystycznego performance, odbiór którego wymaga prawie tyle geniuszu co jego tworzenie

57 Uwaga na modę! Ludzie często wymyślają różne udziwniwnia, np. nigdy nie stosujmy się do mody panującej na wielu blogach, czyli tekstu pisanego w ten sposób: cześć! OtOmOjapIErwSzaStRoNA! FajNA, nie? Proszę sobie teraz wyobrazić 3 strony ekranowe takiego tekstu... ;)