Czytelność w grafice webowej
0 likes615 views
Prezentacja Anny Sorbian, Projektanta User Experience Design w Grupie Unity.
Czytelność w grafice webowej
- 1. Anna Sorbian | anna.sorbian@unity.pl Czytelność w grafice webowej
- 2. CZARNY NA BIAŁYM Nagłówki 1 i 3 mają największy kontrast i najłatwiej je przeczytać. Dla oka przyjemniejsze są jednak niższe kontrasty (2,4).
- 3. SZARY NA SZARYM Stąd też część grafików sięga po szarości. #SEXYNagłówki 1 i 3 mają największy kontrast i najłatwiej je przeczytać. Dla oka przyjemniejsze są jednak niższe kontrasty (2,4).
- 4. SZARY NA SZARYM Stąd też część grafików sięga po szarości. ?Nagłówki 1 i 3 mają największy kontrast i najłatwiej je przeczytać. Dla oka przyjemniejsze są jednak niższe kontrasty (2,4).
- 5. Stąd też część grafików sięga po szarości.
- 6. SEXY?
- 7. SPIS TREŚCI A.KONTRASTY 1. WCAG 2.0 2. BENEFICJENCI 3. DODATKI DO PRZEGLĄDAREK 4. NARZĘDZIA ON-LINE 5. NARZĘDZIE DESKTOPOWE B. ROZMIAR FONTU
- 8. NORMA DOSTĘPNOŚCI ISO/IEC 40500:2012 Normy tworzenia treści cyfrowych z uwzględnieniem potrzeb osób niepełnosprawnych. WCAG 2.0
- 9. A RÓŻNICĘ WIDZI KAŻDY
- 10. KTO SKORZYSTA? użytkownicy czytający w pośpiechu słabowidzący daltoniści seniorzy użytkownicy drukujący treści internetowe użytkownicy małych i monochromatycznych wyświetlaczy
- 11. KTO SKORZYSTA? użytkownicy czytający w pośpiechu Użytkownik szybciej podejmie decyzję o zakupie, jeżeli będzie miał swobodny dostęp do treści oferty! Dotyczy to zwłaszcza Słabych wyświetlaczy Ekranów w miejscach bardzo jasnych
- 12. OZNACZENIE KONTRASTU biały na białym czarny na białym 1 : 1 21 : 1
- 13. WCAG 2.0 – KONTRAST MINIMALNY Teksty duże (ponad 18 punktów lub 14 punktów boldem) oraz duże grafiki tekstowe. 4,5 : 1 3 : 1 Tekst lub grafiki tekstowe standardowe
- 14. WCAG 2.0 – TEKSTY ZWOLNIONE Z OGRANICZEŃ Nie posiadają wymagań minimalnych: komponenty nieaktywnego interfejsu, dekoracje grafiki lub zdjęcia, których znaczenie jest wizualne logotypy lub znaki handlowe
- 15. WCAG 2.0 – KONTROLKI KONTRASTU A A AA Jeżeli grafika nie spełnia wymogów WCAG 2.0 należy zapewnić kontrolki, które przełączą serwis w wysoki kontrast. Kontrolki muszą być w kontraście min. 4,5:1 Wersja w wysokim kontraście musi : posiadać taką samą funkcjonalność, posiadać taką samą zawartość, spełniać wymagania kontrastu 4,5:1
- 16. WCAG 2.0 – KONTROLKI KONTRASTU Jeżeli grafika nie spełnia wymogów WCAG 2.0 należy zapewnić kontrolki, które przełączą serwis w wysoki kontrast. Kontrolki muszą być w kontraście min. 4,5:1 Wersja w wysokim kontraście musi : posiadać taką samą funkcjonalność, posiadać taką samą zawartość, spełniać wymagania kontrastu 4,5:1 A A AA Klient może nie być zachwycony obecnością takiego elementu w centralnym miejscu na każdej stronie serwisu.
- 17. WCAG 2.0 – KONTROLKI KONTRASTU Jeżeli grafika nie spełnia wymogów WCAG 2.0 należy zapewnić kontrolki, które przełączą serwis w wysoki kontrast. Kontrolki muszą być w kontraście min. 4,5:1 Wersja w wysokim kontraście musi : posiadać taką samą funkcjonalność, posiadać taką samą zawartość, spełniać wymagania kontrastu 4,5:1 A A AA Klient może nie być zachwycony obecnością takiego elementu w centralnym miejscu na każdej stronie serwisu. Warto więc postawić na dobry design o właściwym kontraście.
- 20. DODATKI DO PRZEGLĄDAREK 1 2 3 4 ALT + SHIFT + I
- 22. DODATKI DO PRZEGLĄDAREK ALT + C Uwzględnienie wymogów różnych wad wzroku Kontrola stosowanych kontrastów poszczególnych elementów z uwzględnieniem wymogów WCAG 2.0
- 28. INNE NARZĘDZIA ON-LINE http://webaim.org/resources/ contrastchecker/ 1. WEB AIM CONTRAST CHECKER
- 29. INNE NARZĘDZIA ON-LINE http://www.checkmycolours.com/ 2. CHECK MY COLOURS
- 30. INNE NARZĘDZIA ON-LINE http://www.snook.ca/technical /colour_contrast/colour.html 3. SNOOK SLIDER
- 31. INNE NARZĘDZIA ON-LINE http://gmazzocato.altervista.or g/colorwheel/wheel.php 4. ACCESSIBILITY COLOR WHEEL
- 32. INNE NARZĘDZIA ON-LINE http://juicystudio.com/services /luminositycontrastratio.php 5. JUICY STUDIO
- 34. PODCZAS TWORZENIA GRAFIKI Choose View > Proof Setup > Color Blindness ADOBE PHOTOSHOP – COLOR UNIVERSAL DESIGN Funkcja umożliwiająca sprawdzenie jak tworzoną grafikę widzą osoby z protanopią i deuteranopią.
- 35. PODCZAS TWORZENIA GRAFIKI Deuteranopia (daltonizm) Nierozpoznawanie zieleni (lub mylenie z czerwienią). Nierozróżnianie koloru czerwonego, pomarańczowego, żółtego i zielonego. Percepcja jaskrawości nie zmienia się. Odbiór fioletu i cyjanu jako ten sam kolor. Protanopia Nierozpoznawanie czerwieni (lub mylenie z zielenią). Niska percepcja jaskrawości barwy czerwonej, pomarańczowej i żółtej - czerwony może stać się ciemnoszarym, wręcz czarnym kolorem. Odbiór różu i fioletu jako kolor niebieski.
- 41. Dorośli font czytają 14 pkt szybciej, niż 12 pkt (szeryfowy oraz bezszeryfowy). Bernard, Liao, and Mills, 2001 Mniejszy font obniża tempo czytania tekstu. Bernard, 2002 Uczestnicy badań niezależnie od wieku woleli font 12 pkt od 10 pkt. Bernard and Mills, 2003
- 42. Większe fonty poprawiają czytelność tekstu oraz tempo czytania
- 43. TEGO NIE ROBIMY
- 51. Tytuł prezentacji Imię Nazwisko Unity S.A. ul.Przedmiejska 6-10, 54-201 Wrocław www.unity.pl Znajdź nas na FB: www.unity.pl/facebook