Czym jest makieta UX?

Zacznijmy od krótkiego wytłumaczenia, czym jest makieta strony internetowej. Jest to nic innego jak wstępny szkic strony, prezentujący główne założenia projektu zarówno wersji desktop, jak i aplikacji mobilnej naszej strony internetowej. Dobra makieta strony www prezentuje strukturę tej strony internetowej, wskazuje wszystkie jej najważniejsze elementy, czyli:

• układ elementów strony internetowej,
• hierarchię treści.

Wszystkie elementy strony www są na makiecie wstępnie zaprojektowane, dzięki czemu możemy już na tym etapie sprawdzić, czy taka strona internetowa będzie wygodna dla użytkowników. Na makiecie możemy określić położenie poszczególnych elementów strony, ich rozmiar i odstępy pomiędzy nimi. Również na etapie makiety UX ustalana jest kolorystyka strony internetowej oraz architektura informacji (omawialiśmy tę kwestię w osobnym materiale: Jak stworzyć architekturę informacji strony internetowej, sklepu internetowego czy portalu internetowego?). Makieta UX powinna być tworzona zawsze przed projektem graficznym strony internetowej.

Rodzaje makiet UX

Makiety stron internetowych dzielą się na dwa rodzaje – makiety lo-fi i hi-fi. Czym różnią się te rodzaje makiet? Przede wszystkim stopniem zaawansowania.

Makieta lo-fi (ang. low fidelity)

Ten rodzaj makiety to tzw. paper prototyping, czyli stworzenie prototypu strony internetowej w bardzo podstawowej wersji. Taka makieta UX może zawierać jedynie podstawy architektury informacji, czyli wskazywać, gdzie będzie znajdowało się menu oraz jaki będzie układ pozostałych elementów strony. Zazwyczaj ta makieta tworzona jest w jednej kolorystyce. Makietę lo-fi Klienci często wykonują samodzielnie, tworząc papierowe szkice na kartce lub w prostym programie graficznym i to właśnie tę pierwszą makietę zanoszą do profesjonalisty od tworzenia makiet.

Makieta hi-fi (ang. high fidelity)

Profesjonalista zajmuje się natomiast tworzeniem makiety UX o wyższym stopniu szczegółowości. Tutaj można już wprowadzić docelową kolorystykę projektu graficznego, można przeprowadzić badania z zakresu UI design na grupie docelowej oraz można docelowo zaprojektować wszystkie wymagane pola i architekturę informacji.

Makiety UX – dlaczego warto je zrobić?

Jest mnóstwo powodów do projektowania makiet przed rozpoczęciem projektowania strony internetowej już z zaangażowaniem programisty. Najważniejsze z tych powodów wskazujemy konkretnie poniżej.

Argument nr 1: Weryfikacja swoich pomysłów

Makieta strony internetowej pozwala przede wszystkim zweryfikować własne pomysły na stronę internetową. Celem makiety jest sprawdzenie, czy wymyślona przez nas strona internetowa może spełniać nasze oczekiwania i oczekiwania jej użytkowników. Jeżeli już na etapie makiet pierwsze wrażenie potencjalnego użytkownika będzie niekorzystne, będzie to znak, że projekt musi być poprawiony lub wręcz stworzony od nowa.

Argument nr 2: Oszczędność pieniędzy

Warto stworzyć makietę UX również ze względu na możliwe znaczące oszczędności. Choć wydawać się może, że przecież zatrudnienie projektanta makiety UX będzie dodatkowym kosztem, to warto zwrócić uwagę na to, jakiego (większego) kosztu pozwoli nam to uniknąć. Na makiecie wprowadzanie poprawek jest proste i kosztuje stosunkowo niewiele, a więc zaoszczędza nam niepotrzebnych poprawek na etapie projektowania strony przez programistę, gdzie wszystkie poprawki będą kosztować nas już dużo więcej. Zespół projektowy tworzący makiety UX wprowadzi poprawki dużo szybciej.

Argument nr 3: Szansa na porównanie różnych wersji projektu

Na etapie makiety można stworzyć wiele projektów alternatywnych wobec głównego projektu strony. Korzystając z programów do projektowania makiet można bardzo łatwo np.: skopiować cały wstępny projekt witryny internetowej i zupełnie go przeorganizować, przestawiając różne jego elementy w inne miejsca. W takim projekcie wykonanie tego działania zajmuje zaledwie kilka minut.

Argument nr 4: Oszczędność czasu

Projektowanie witryny poprzez makiety UX pozwala zatem również zaoszczędzić czas. Nawet jeżeli nie jesteśmy specjalistami z branży IT, możemy wyobrazić sobie, jak niewiele trudu kosztuje przesunięcie ręcznie danego elementu w programie graficznym. To po prostu jedno kliknięcie. Czym innym jest natomiast zmiana położenia elementu na etapie napisanego kodu strony – ta zajmuje już znacznie więcej czasu.

Argument nr 5: Precyzyjna wycena wdrożenia strony internetowej

Ten argument może przekonać szczególnie tych, którzy zastanawiają się, ile kosztuje strona internetowa. Koszt jest bowiem bardzo różny, a zależy głównie od stopnia skomplikowania naszego projektu. Dzięki makiecie UX i zaangażowaniu zespołu projektującego już na tym etapie będziemy mogli dowiedzieć się, czy na pewno warto wdrażać niektóre z naszych pomysłów, bo może okazać się, że wywindują one koszty wdrożenia strony o kilkanaście tysięcy złotych w górę. UX designer będzie w stanie doradzić nam dogodne alternatywy projektu, które będą równie efektowne albo będą spełniały podobną funkcję, ale będą mniej kosztowne we wdrożeniu. Dzięki temu już na etapie makiety UX będziemy mogli uzyskać precyzyjną wycenę naszej strony internetowej.

Jak stworzyć makietę UX samodzielnie?

Samodzielnie najłatwiej stworzyć prototyp makiety na zwykłej kartce papieru. O wiele lepszą jakość wykonania zapewni nam projekt graficzny strony stworzony w programie internetowej. Na rynku istnieje wiele programów do tworzenia makiet UX. Jednym z najpopularniejszych jest Figma, której ogromną zaletą jest prostota obsługi. Figma jest intuicyjnym świetnym narzędziem, wykorzystywanym nie tylko przez amatorów, ale i profesjonalistów.

Kolejnym bardzo popularnym programem jest Adobe XD oraz inne, na przykład: Sketch, Axure, Atomic czy InVision. Niektóre wskazane tu programy zapewniają darmowy okres próbny, który zdecydowanie wystarczy nam na zaprojektowanie makiety jednej strony internetowej. Jeżeli chcemy rozpocząć swoją przygodę z projektowaniem na dłuższy czas, będziemy musieli wykosztować się na zakup wybranego programu.

Dlaczego warto tworzyć makietę strony internetowej? Podsumowanie

1. Makiety UX pozwalają obniżyć koszty projektu strony internetowej.
2. Dzięki zaprojektowaniu makiet UX można uniknąć czasochłonnych i kosztownych poprawek strony na etapie jej programowania lub wdrażania.
3. Dzięki makietom UX możemy już na wczesnym etapie projektu stwierdzić, czy spełnia on nasze kluczowe założenia i czy będzie funkcjonalny dla użytkowników.
4. Projekt makiety UX pozwala na doprecyzowanie oczekiwań Klienta co do wyglądu i funkcjonalności projektowanej strony.
5. Dzięki projektowi UX software house lub freelancer wdrażający stronę jest w stanie dość precyzyjnie wycenić koszt tego wdrożenia.

Czym jest UI Design?

UI (z angielskiego – user interface, czyli interfejs użytkownika) to szeroka dziedzina informatyki, skupiona wokół interakcji użytkownika z systemem. Interfejsy cyfrowe to w praktyce najczęściej wygląd aplikacji czy strony internetowej. UI obejmuje wizualną i funkcjonalną sferę produktu. Do UI zaliczamy chociażby:

• rozkład elementów,
• układ treści,
• układ menu,
• kolorystykę,
• animacje.

Projektowanie interfejsów polega na stworzeniu kompleksowych projektów graficznych, projektów mających na uwadze rzeczywiste potrzeby użytkowników Internetu. Kluczowa oprócz warstwy wizualnej jest dla UI designera funkcjonalność wszystkich elementów strony internetowej czy aplikacji mobilnej.

Czym zajmuje się UI Designer?

Głównym zadaniem UI designera jest stworzenie takiej strony lub aplikacji mobilnej, która będzie miała interface atrakcyjny wizualnie. UI designer to po prostu projektant interfejsów, czyli głównie produktów cyfrowych. Nie jest to jednak frywolny zawód pozwalający na danie upustu swoim fantazjom graficznym.

Warto zdawać sobie sprawę z tego, że projektowanie zawsze polega na sprostaniu czyimś oczekiwaniom (a najczęściej oczekiwaniom wielu osób). Z jednej strony na UI designerach ciążą oczekiwania Klienta, z drugiej oczekiwania osób z firmy zlecającej projekt, a jeszcze z trzeciej – jego indywidualne odczucia w kwestii danego projektu.

Często bywa tak, że ten pierwiastek indywidualny w projektach niestety się zatraca i trzeba być na to gotowym. Kluczowe są zawsze oczekiwania Klienta, ponieważ – jakby nie patrzeć – to on ostatecznie płaci za projekt. I choćby UI designer przekonywał, że bardziej funkcjonalny będzie button niż slider, że lepsze są kolory kontrastowe i jednolite, to i tak ostatecznie będzie zmuszony pójść na ustępstwa, żeby doprowadzić projekt do końca.

Osoba, która chce zostać UI designerem, musi być świadoma tego, że jej wiedza i zmysł estetyczny będą bardzo ważne w powstawaniu projektów, ale rzadko będą najważniejsze. Głównie zadanie UI designera to spełnienie oczekiwań Klienta, a nie swoich własnych. Warto to podkreślić, ponieważ często złe nastawienie bywa przyczyną frustracji osób pracujących w tym zawodzie.

UI design a UX design – czym się różnią?

UI design skupia się wyłącznie na projektowaniu interfejsów, czyli wyglądu stron internetowych. UX design skupia się natomiast na funkcjonalności tych interfejsów. UX designer jest z reguły specjalistą analityki internetowej – analizuje ścieżki użytkownika, sposób, w jaki poruszać się on będzie po danej stronie internetowej. Współcześnie tworzone dobre strony internetowe są bowiem przemyślane od podszewki. UX designerzy projektują makiety funkcjonalne, a następnie UI designerzy tworzą w oparciu o nie swoje projekty graficzne.

Osoby dopiero wchodzące w branżę z reguły zastanawiają się, czy więcej zarabia UX designer, czy UI designer. Jeżeli kwestią decydującą mają być finanse, to w praktyce nie ma dużej różnicy pomiędzy stanowiskami. UX design jest natomiast bardziej skomplikowany niż UI design i łatwiej w nim o stanowiska bardziej specjalistyczne, np.: desk reasercher. Jeżeli chodzi o UI design, to jest to dziedzina raczej jednolita i zarobki w niej zależą od doświadczenia i umiejętności danej osoby.

UI designer musi współpracować z UX designerem

Zawody UX designera i UI designera łączą się, mieszają i wzajemnie uzupełniają. Tak naprawdę projektant interfejsów nie może funkcjonować bez UX designera, chyba że wcześniej sam wykona pracę w zakresie user experience. Bez tego kroku stworzenie user interface jest po prostu niemożliwe.

Z tego wynika fakt, że często możemy spotkać się ze stanowiskiem pracy UI/UX designer. Osoba pracująca przy UX oraz UI danej strony internetowej oczywiście poświęci na projekt więcej czasu, ale zaoszczędzony zostaje czas komunikacji pomiędzy dwiema osobami. Poza tym osoba zajmująca się UX/UI jest w stanie stworzyć kompleksowy projekt, w którym nie ma miejsca na błędy – makiety i szata graficzna są zgodne. Końcowy produkt powstaje w takim układzie szybciej i jest z reguły lepszy, dlatego bardzo często osoba zajmująca się UX/UI jednocześnie jest jednym z najbardziej pożądanych pracowników branży IT. W środowisku branżowym mówi się też jednak o tym, że zatrudnianie jednej osoby od UX/UI jest przejawem oszczędności danej firmy.

Jak zostać UI designerem?

Żeby zostać UI designerem, trzeba przede wszystkim mieć… zmysł estetyczny. Tak, to nie błąd. Studia, wykształcenie i ukończone kursy mają drugorzędne znaczenie. Bez wyjątkowego poczucia estetyki nie osiągnie się nic w branży UI/UX. Oczywiście dobrze, kiedy owe poczucie estetyki jest potwierdzone wykształceniem, ale coraz częściej można spotkać się z tym, że nie jest to obligatoryjny wymóg do zatrudnienia na stanowisku UI designera. Wielu zleceniodawcom z branży UX/UI wystarczy doświadczenie w postaci portfolio. To doskonała opcja dla osób, które wiedzę i umiejętności zdobyły w praktyce.

Jeżeli natomiast myślimy o zdobyciu wiedzy od podstaw w trakcie edukacji, najlepiej poszukać studiów. Taki kierunek dostępny jest jedynie w ramach studiów podyplomowych, więc – by się na nie zapisać – najpierw trzeba mieć ukończony co najmniej pierwszy stopień innych studiów (z reguły wymagany jest tytuł ze studiów powiązanych z informatyką lub grafiką). Studia podyplomowe w zakresie projektowania graficznego dostępne są na przykład na uczelniach:

• SWPS (User Experience Design),
• WSE (UX & Business Design),
• Dolnośląska Szkoła Wyższa (Projektant UX – User Experience Design)
• AGH (User Experience & Product Design).

UI designer – podstawowe wymagania

UI designer, a raczej kandydat na UI designera, musi przede wszystkim doskonale pracować w programach graficznych. Najczęściej na tym stanowisku wymagana jest znajomość programów takich jak:

• Figma,
• Adobe Photoshop,
• Adobe XD,
• Adobe Illustrator,
• Sketch.

Sama obsługa wymienionych wyżej programów nie wystarczy. Grafik zatrudniony na stanowisku UI designera musi doskonale orientować się w trendach estetycznych, potrafić dobrać kolory, stworzyć typografię i w odpowiedni sposób rozmieścić elementy na grafice. Musi znać reguły rządzące projektowaniem np.: reguły grupowania czy reguły symetrii. Projektowanie graficzne polega na umiejętnym wykorzystaniu dostępnych w programie narzędzi i opcji. Kandydat na UI designera musi także umieć umieszczać w odpowiednich miejscach poszczególne elementy (np.: buttony, hovery, pola tekstowe, listy, ramki, checkboxy) i rozumieć ich rolę.

Ponadto cenna będzie także znajomość HTML, CSS oraz JavaScript. W praktyce przydać się może także umiejętność pracy z frameworkami (np.: ReactJS, AngularJS, VueJS). Oczywiście UI designer nie zajmuje się programowaniem zaprojektowanych widoków, ale wyobraźnia o możliwościach kodowania zdecydowanie przydaje się w projektowaniu. Dzięki temu UI designer może zaproponować rozwiązania optymalne – estetyczne graficznie, ale jednocześnie nie dość trudne do późniejszego zakodowania dla programisty. To tyle jeżeli chodzi o umiejętności twarde.

Umiejętności miękkie UI designera

W pracy UI designera bardzo ważne są jednak także umiejętności miękkie, w szczególności:

• kreatywność,
• wyczucie trendów,
• poczucie estetyki,
• cierpliwość,
• stanowczość,
• samodyscyplina,
• pewność siebie.

Wskazany wyżej zestaw cech pozwoli UI designerowi na wykonywanie codziennych obowiązków zawodowych, polegających na tworzeniu projektów zgodnie z wytycznymi Klienta. Tylko samodyscyplina pozwoli zrealizować projekty na czas, a tylko stanowczość i cierpliwość pomoże przetrwać konfrontację gotowej propozycji projektu z wyobrażeniami Klienta. 

Niejednokrotnie podczas spotkań z Klientem dochodzi do całkowitej zmiany koncepcji po jego stronie, na co UI designer musi zareagować spokojnie i profesjonalnie podejść do nowych propozycji Klienta. Nikt nie będzie chciał współpracować z projektantem, który rzuci krótkim „ale tak pan chciał” i nie wyjdzie z inicjatywą poprawy projektu (choćby była to już setna poprawka, a niestety i takie projekty się zdarzają).

UI designer – zarobki

To, ile zarabia UI designer, wydaje się być owiane tajemnicą. Krążą pogłoski o niebotycznych sumach sięgających kilkudziesięciu tysięcy złotych. I rzeczywiście – można znaleźć takie oferty pracy, ale często zawierają one w warunkach pracy całodobową dostępność lub niekorzystny sposób rozliczenia. Większość ofert etatowych waha się w okolicach 40/50 zł brutto za godzinę pracy.

Projektantom UX/UI o wiele bardziej – pod względem finansowym – opłaca się praca na zasadach freelancerskich. Łapanie dobrze płatnych zleceń jest o wiele korzystniejsze niż praca przeliczana na godziny. Mimo tego wiele osób rezygnuje z tej drogi, ponieważ ma świadomość, że praca freelancera to ciągłe poszukiwanie kolejnych zleceń, a etat – choć mniej płatny – daje tę pewność ciągłości zleceń. Warto jednak mieć na uwadze, że w tej branży często wystarczy jedno większe zlecenie w miesiącu, by na warunkach freelancerskich zarobić tyle, ile inni na tym samym stanowisku na etacie.

WCAG 2.1 – najnowsza wersja ustawy o dostępności cyfrowej stron internetowych

Przede wszystkim warto wskazać, że ustawa o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych nie jest jedna i niezmienna od lat. Przeciwnie – ewoluuje ona tak samo, jak ewoluuje Internet. Jeżeli nasz sposób korzystania ze stron internetowych i aplikacji mobilnych się zmienia, automatycznie zmieniane są także zalecenia ustawy. Najnowsza wersja zaktualizowanych wytycznych WCAG to WCAG 2.1 (a poprzednio przez długi okres obowiązywała wersja WCAG 2.0, sporo jednak różniąca się od obecnej).

Wytyczne WCAG 2.1 wyjaśniają wprost, jak tworzyć strony internetowe w celu zaspokajania potrzeb wszystkich użytkowników, w szczególności tych, którzy zmagają się z niepełnosprawnościami (zarówno niepełnosprawnością ruchową, jak i niepełnosprawnościami intelektualnymi). Te strony, które spełniają wytyczne WCAG, nazywane są stronami dostępnymi cyfrowo. 

Struktura wytycznych WCAG 2.1 – wykaz

Obecnie zalecenia WCAG opierają się na 4 zasadach. Te zasady to:

• postrzegalność,
• funkcjonalność,
• zrozumiałość,
• solidność (nazywana też kompatybilnością).

Każda z powyższych zasad podzielona jest na konkretne wytyczne, a każda wytyczna podzielona jest na konkretne wymagania (tzw. kryteria sukcesu). Dopiero spełnienie wszystkich kryteriów sukcesu z każdej wytycznej gwarantuje pełną realizację danej zasady.

Zasady WCAG – wykaz

Zasady WCAG 2.1 dotyczą wszystkich elementów wizualnych i aspektów budowy strony. Większość zasad możliwych jest do wprowadzenia jedynie poprzez ingerencję w kod strony, a zatem najczęściej wymaga ingerencji programisty. Warto jednak mieć na uwadze fakt, że każda taka zmiana jest warta pochylenia się nad nią, ponieważ stanowi odpowiedź na realne problemy użytkownika. Na co więc powinniśmy zwrócić uwagę? Poniżej dokonujemy skrótowego przeglądu wszystkich zasad WCAG.

Zasada 1: postrzegalność

Aby zrealizować zasadę „postrzegalność”, przedstawiaj użytkownikom informacje w taki sposób, by był on dostępny dla wszystkich zmysłów użytkownika. Szczególnie miej na uwadze osoby, które nie mogą korzystać z myszy i mogą posługiwać się komputerem tylko za pomocą klawiatury oraz osoby niewidome lub słabowidzące, które potrzebują powiększonego widoku tekstów lub obrazów.

Przykładowe wytyczne WCAG 2.1, aby spełnić kryteria sukcesu tej zasady dotyczące:

• alternatywy tekstowej (czyli zapewniania tekstowych zamienników wszystkich treści nietekstowych, aby dawały się zamienić na inne oraz informowania o treściach mających cel jedynie dekoracyjny),
• multimediów (czyli zapewniania rozwiązań alternatywnych, w szczególności w zakresie wprowadzania napisów rozszerzonych, audiodeksrypcji lub alternatywy tekstowej dla mediów oraz opcji języka migowego lub rozszerzonej autodeskrypcji i opcji tylko audio),
• możliwości adaptacji (czyli tworzenia treści internetowych, które mogą być prezentowane na różne sposoby bez utraty informacji i struktury, np.: w zakresie kolejności, orientacji czy właściwości zmysłowych),
• rozróżnialności (czyli tworzenia treści ułatwiających oglądanie i słuchanie treści, w tym także oddzielanie informacji od tła, szczególnie w zakresie odpowiedniego użycia koloru, kontroli odtwarzania dźwięku, odpowiedniego poziomu kontrastu, opcji zmiany rozmiaru tekstu, opcji niskiej głośności lub bez dźwięków w tle, prezentacji wizualnej, dopasowania do ekranu, kontrastu elementów nietekstowych czy odstępów w tekście).

Zasada 2: funkcjonalność

Aby zrealizować zasadę „funkcjonalność”, spraw, aby komponenty interfejsu użytkownika były w pełni gotowe do użycia, zarówno na urządzeniach mobilnych, jak i komputerze stacjonarnym czy laptopie.

Przykładowe wytyczne WCAG 2.1, aby spełnić kryteria sukcesu tej zasady dotyczące:

• dostępności z klawiatury (czyli zapewnienia dostępności wszystkich funkcjonalności strony z poziomu klawiatury, bez użycia myszy, w tym w zakresie zaplanowania odpowiednich jednoznakowych skrótów klawiaturowych),
• wystarczającego czasu (czyli zapewnienia użytkownikom optymalnego czasu na przeczytanie i skorzystanie z treści internetowych i aplikacji mobilnych, w szczególności w zakresie informacji poruszających się, przesuwających się lub migających),
• możliwości wystąpienia ataku padaczki (czyli takiego prezentowania treści internetowych, aby nie było żadnego ryzyka, że wywołają one atak padaczkowy, np.: błyskanie częściej niż trzy razy w ciągu jednej sekundy),
• możliwości nawigacji (czyli zapewnienia narzędzi pomagających w nawigacji i znalezieniu treści na stronie, w tym znalezienia samej strony, np.: poprzez jej odpowiedni tytuł, nadawanie nagłówków i etykiet oraz istnienie wielu dróg dotarcia do treści),
• metod obsługi (za pomocą sposobów innych niż obsługa klawiaturą, np.: poprzez gesty dotykowe czy aktywowanie ruchem).

Zasada 3: zrozumiałość

Aby zrealizować zasadę „zrozumiałość”, postaraj się o to, by informacje zawarte na stronie były zaprezentowane w sposób jasny i logiczny, żeby obsługa interfejsu była ze strony użytkownika w pełni zrozumiała.

Przykładowe wytyczne WCAG 2.1, aby spełnić kryteria sukcesu tej zasady dotyczące:

• możliwości odczytania (strony mają zawierać treści możliwe do odczytania i zrozumienia, szczególnie w zakresie języka strony, języka części, mechanizmu rozumienia nietypowych słów, skrótów, odpowiedniego poziomu umiejętności czytania czy mechanizmu do sprawdzania wymowy słów),
• przewidywalności (strony mają działać i wyglądać w sposób zupełnie przewidywalny, szczególnie warto zwrócić tu uwagę na przyjęcie fokusu, wprowadzanie danych, nawigację, spójną identyfikację i aspekt zmian na żądanie użytkownika),
• pomocy przy wprowadzaniu informacji (strony mają pomagać użytkownikom unikać błędów, szczególnie w zakresie ich identyfikacji, etykiet lub instrukcji, korekty tychże błędów i pomocy oraz zapobiegania im).

Zasada 4: solidność (kompatybilność)

Aby zrealizować zasadę solidności, dbaj o zgodność z aktualnymi i przyszłymi programami, z których korzysta i będzie korzystał użytkownik. Miej na uwadze także technologie asystujące.

Przykładowe wytyczne WCAG 2.1, aby spełnić kryteria sukcesu tej zasady:

• dbaj o poprawność kodu, w szczególności żeby wszystkie elementy wizualne posiadały kompletne znaczniki początkowe i końcowe
• wszystkie komponenty interfejsu użytkownika muszą mieć programowo określoną nazwę i rolę, właściwości i wartości również mogą być ustawione programowo,
• zadbaj o odpowiednio wyświetlające się komunikaty o stanie.

Wytyczne WCAG 2.1 dla urządzeń mobilnych

Na urządzeniach mobilnych spełniać trzeba te same kryteria sukcesu, które wskazujemy powyżej, dbając o poziomy zgodności. Ponadto WCAG 2.1 wprowadziła także 17 nowych dodatkowych wytycznych skierowanych tylko do twórców treści przeznaczonych na urządzenia mobilne. 

Zalecenia te dotyczą na przykład dostępności opcji oglądania obrazu na urządzeniach mobilnych w obu orientacjach – poziomej i pionowej. Zgodnie z nowymi wytycznymi trzeba również zapewnić dopasowanie treści strony do ekranu urządzenia bez konieczności przewijania. Istnieją również wytyczne dotyczące interlinii czy wielkości kontenera tekstowego.

Czy trzeba spełniać wytyczne WCAG?

Warto dodać, że dbanie o aspekt dostępności treści internetowych jest istotny szczególnie dla podmiotów publicznych. Zgodnie z prawem, jeżeli podmioty publiczne posiadają strony internetowe lub aplikacje mobilne, to muszą gwarantować ich dostępność cyfrową. Pozostałe strony internetowe mogą spełniać kryteria ustawy o dostępności cyfrowej stron internetowych, ale nie muszą tego robić. Niemniej jednak z pewnością przyniesie to stronie czy aplikacji same korzyści – zwiększenie dostępności internetowej wpływa korzystnie na ocenę strony przez wyszukiwarki internetowe.

Kary za niespełnianie wytycznych WCAG dla podmiotów publicznych

Kara za niespełnianie wytycznych wynosi od 5 do 10 tysięcy – zależy w jakim aspekcie i z jaką częstotliwością zalecenia wytycznych nie są spełniane. Warto podkreślić, że karom podlegają tylko podmioty publiczne, nie osoby prywatne.

Art.  19.  [Kara pieniężna]

1.  Karze pieniężnej podlega podmiot publiczny, który:

1) w sposób nieuzasadniony i uporczywy nie zapewnia dostępności cyfrowej strony internetowej lub aplikacji mobilnej; 

2) nie sporządza i nie publikuje deklaracji dostępności albo nie zawiera w deklaracji dostępności elementów wskazanych w art. 10 ust. 3-5; 

3) nie zapewnia dostępności cyfrowej strony podmiotowej Biuletynu Informacji Publicznej, o której mowa w art. 8 ust. 2 pkt 1, oraz elementów i funkcji strony internetowej lub aplikacji mobilnej, o których mowa w art. 8 ust. 2 pkt 2. (…)

5. Wysokość kary pieniężnej, o której mowa w ust. 1:

1) pkt 1, wynosi do 10 000 zł;

2) pkt 2 i 3, wynosi do 5000 zł.

Kary te obejmują jednak tylko podmioty publiczne, czyli zgodnie z prawem przez „osoby prawne utworzone w szczególnym celu zaspokajania potrzeb o charakterze powszechnym niemających charakteru przemysłowego ani handlowego, jeżeli podmioty, o których mowa w tym przepisie, oraz jednostki sektora finansów publicznych i inne państwowe jednostki organizacyjne nie posiadające osobowości prawnej, pojedynczo lub wspólnie, bezpośrednio lub pośrednio przez inny podmiot:

• finansują je w ponad 50%, lub
• posiadają ponad połowę udziałów albo akcji, lub
• sprawują nadzór nad organem zarządzającym, lub
• mają prawo do powoływania ponad połowy składu organu nadzorczego lub zarządzającego,

– o ile osoba prawna nie działa w zwykłych warunkach rynkowych, jej celem nie jest wypracowanie zysku i nie ponosi strat wynikających z prowadzenia działalności”, jak wskazuje art. 3 ust. 1 pkt. 3 ustawy z dnia 29 stycznia 2004 r. – Prawo zamówień publicznych.

Najczęstsze pytania i odpowiedzi

Poniżej odpowiadamy w skrócie na najczęstsze pytania użytkowników dotyczące tematu WCAG 2.1 i WCAG 2.0.

Co to jest WCAG 2.0? Wypisz i wyjaśnij jego wymagania.

WCAG 2.0 to poprzednia wersja WCAG 2.1, czyli ustawy o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych (ang. web content accessibility guidelines). Wymagania tej ustawy dotyczą głównie kodu stron internetowych i aplikacji mobilnych. Kod ten ma być w pełni dostosowany do użytkownika, szczególnie użytkownika z niepełnosprawnościami. Ma mu umożliwiać i ułatwiać korzystanie z treści internetowych. W sektorze publicznym strony i aplikacje muszą spełniać wymagania ustawy, w przeciwnym razie mogą zapłacić karę finansową.

Czego dotyczą wytyczne – zalecenia WCAG 2.1?

Wytyczne WCAg 2.1 dotyczą postrzegalności, funkcjonalności, zrozumiałości i solidności stron internetowych i aplikacji mobilnych. Zalecenia te mówią wprost, jak powinna być skonstruowana strona, by była czytelna i jasna dla użytkownika.

Czy instytucje publiczne muszą spełniać standard WCAG 2.1 na poziomie AAA?

Zdefiniowane są trzy poziomy zgodności: A (najniższy), AA (pośredni) i AAA (najwyższy). Od stron i aplikacji instytucji publicznych wymagane jest spełnianie standardu WCAG na poziomie AAA, czyli najwyższym. 

Jak sprawdzić, czy dokument jest dostępny cyfrowo?

Podstawowe ustalenia można poczynić na podstawie funkcji programu Word – wystarczy skorzystać z opcji inspektora dostępności, dostępnego pod nazwą „Sprawdź ułatwienia dostępu”.

Co stanowi o dostępności strony?

O dostępności cyfrowej stron internetowych i aplikacji mobilnych stanowi spełnianie przez nią wszystkich aktualnych zasad WCAG, w tym zawartych w nich szczegółowych kryteriów sukcesu.

Jak sprawdzić, czy strona spełnia WCAG?

Najprościej można sprawdzić to poprzez zlecenie audytu WCAG. Tamago może wykonać go dla Ciebie – zgłoś się do nas.

Korzystając z naszego wieloletniego doświadczenia, przygotowaliśmy listę rzeczy, na które musisz zwrócić szczególną uwagę, jeżeli chcesz zbudować skuteczną i użyteczną stronę www. Poznaj TOP 6 aspektów, których nie możesz pominąć.

1. Właściwi ludzie

Nie zbudujesz dobrej strony, jeżeli nie zatrudnisz specjalistów. Najlepsze technologie i najlepsze rozwiązania ustępują doświadczeniu i kompetencjom specjalistów w danej dziedzinie.

Wielu zleceniodawców zawodzi się, otrzymując finalny projekt od Freelancera, który podejmuje się samodzielnie realizacji całego projektu. Nie jest możliwe skuteczne połączenie kompetencji technicznych (Programista) z kompetencjami kreatywnymi (Projektant UX/UI) czy też z kompetencjami zarządczymi (Project Manager). Projekt realizowany przez jedną osobę może znacznie się przedłużać, ponieważ nie można równocześnie precyzować i omawiać poszczególnych elementów projektu (Project Manager) oraz projektować i kodować.

Do zbudowania strony www potrzebujesz co najmniej programisty i projektanta UI. Zwróć tylko uwagę na fakt, że zaprojektować stronę internetową powinien projektant interfejsów użytkownika, a nie grafik projektujący ulotki. Inaczej otrzymasz nieużyteczny projekt, który po zakodowaniu będzie mało intuicyjny dla użytkowników.

W Tamago nasz zespół składa się zawsze z Project Managera, Projektanta UX/UI, Programisty i Testera. Okazjonalnie w projektach uczestniczy także UX Researcher.

2. Przemyślany plan

Zleceniodawcy bardzo często nie doceniają aspektu planowania projektów. Chcą skupić się na projektowaniu i pracować nad wyglądem, pomijając aspekt pracy nad architekturą i strukturą serwisu. Powoduje to bardzo często poprawki i zmiany zaraz po wykonaniu projektu i zebraniu feedbacku. Oczywiście za tym idą zawsze dodatkowe koszty.

Proces planowania powinien być adekwatny do celów strony internetowej, budżetu marketingowego i ogólnie wielkości organizacji. Przykładowo: wydając na marketing 300-500 tys. zł rocznie, możesz wydać na stronę internetową między 25-50 tys. zł, przy czym proces planowania powinien wynieść między 10 a 20% wartości budżetu projektu.

Jak zabrać się do planowania?

W Tamago korzystamy z wielu narzędzi wspierających proces planowania.

Jednym i najbardziej podstawowym jest Architektura Informacji. Określa ona strukturę podstron oraz menu i stopkę.

Kolejnym narzędziem są makiety UX. Pozwalają doprecyzować układ elementów, sekcji i treści w ramach poszczególnych podstron. Jest to kluczowy element w procesie planowania. Pozwala oszacować pracochłonność projektu. Na jego podstawie wykonywane są wyceny oraz harmonogramy projektów.

Tak wygląda fragment zaprojektowanej przez nas makiety strony głównej:

A tak prezentuje się fragment zaprojektowanego przez nas projektu graficznego strony głównej na podstawie opracowanej makiety:

Przy bardziej rozbudowanych projektach w proces projektowania warto włączyć badania i analizy danych na temat użytkowników obecnego serwisu (starej wersji strony).

W naszych realizacjach często analizowaliśmy dane pochodzące z Google Analytics, HotJar oraz przeprowadzaliśmy badania klientów pod kątem użyteczności obecnej strony internetowej (poniżej fragment badania).

3. Użyteczny i atrakcyjny dla użytkownika design oparty o identyfikację wizualną

Strona ma nie tylko dobrze wyglądać, ale ma być spójna z wizerunkiem firmy. Bardzo ważne, aby podczas projektowania strony wykorzystywać w tym procesie elementy związane z opracowaną identyfikacją wizualną i logotypem.

Powyższy przykład pokazuje element projektu graficznego dla producenta wycieraczek Polentex w ramach którego zaprojektowana sekcja zawiera elementy znaku znajdujące się w logotypie (strzałki).

Pod nią znajdują się ikony zaprojektowane dla producenta produktów Konopnych nawiązujące do znaku w ramach logotypu.

Spójność czcionek kolorów i elementów sprawia, że projekty są nie tylko bardziej estetyczne, ale także wzbudzają większe zaufanie i wiarygodność.

Poniżej kilka przykładowych zaprojektowanych przez nas widoków podstron.

4. Czysty kod otwarty na rozwój i optymalizację

Jakościowy kod to bardzo istotny aspekt funkcjonowania i rozwoju strony internetowej. Większość tzw. builderów, czyli narzędzi do „wyklikiwania” stron bez wiedzy programistycznej oraz gotowych szablonów obciąża strony, powoduje problemy związane z wydajnością (szybkością ładowania), rozwojem (modyfikacjami w kodzie) i bezpieczeństwem, stąd też ważne, aby upewnić się, że Wykonawca jest naprawdę programistą, a nie „klikaczem”.

W software house’ach (i tak samo u nas w Tamago) programiści nie mają innej możliwości pisania kodu w sposób inny w pełni uporządkowany i wydajny. Dlaczego?

Bo jeżeli by tak nie pisali, to nie poszliby na urlop, bo nikt inny nie mógłby przejąć po nich projektu. To plus współpracy z agencjami i software house’ami, które dbają o zastępowalność w zespole.

Co jest jeszcze ważne na etapie kodowania? Aby strona była edytowalna za pomocą panelu zarządzania treścią. Nikt nie chce płacić za każdą drobną zmianę, a większość tych standardowych zmian może wykonać osoba nietechniczna korzystająca z panelu zarządzania treścią.

5. Regularnie wymieniany olej, czyli serwisowanie po wdrożeniu

Nie można mówić o skutecznej stronie, jeżeli nie zwrócimy uwagi na jej skuteczne utrzymanie.

W dobie ataków hakerskich i wirusów aktualizowanie systemu zarządzania i wtyczek jest wymogiem koniecznym. Bez tego nasza strona może paść ofiarą ataku hakerskiego. Skutkiem mogą być przekierowania na strony pornograficzne czy rozsyłanie spamerskich maili poprzez serwer, na którym znajduje się strona. Koszt takiej usługi to między 150 a 400 zł netto miesięcznie, więc warto wydać tę kwotę, aby nie narazić się na ewentualny problem.

6. Nastawienie na rozwój, testy i wprowadzanie zmian

Tak jak etap planowania jest bardzo często bagatelizowany, tak też bywa i z etapem poprodukcyjnym. Zleceniodawcy liczą, że wystarczy raz dobrze zrobić stronę i już więcej nic nie trzeba w niej zmieniać. Niestety prawda jest inna i wcale nie chodzi tu o to, żeby traktować stronę jako skarbonkę i cały czas coś modyfikować.

Ważne, żeby w po zebraniu danych na temat zachowania użytkowników wprowadzać zmiany, które sprawią, że łatwiej znajdą oni informacje, których poszukują.

Świetnie sprawdzają się dane pozyskane za pomocą Google Analytics oraz Hotjar.

Po co się tak spinać ze stroną internetową?

Czy nie wystarczy zwykła tania wizytówka na szablonie?

Otóż nie. A dlaczego? Najlepiej obrazuje to poniższa tabela.

Posiadanie słabej strony internetowej oznacza utratę potencjalnych klientów, którzy nie zostawią zapytania z uwagi na utrudnienia w ścieżce zakupowej. Zaledwie 1% różnicy w konwersji może być 3-krotną różnicą w ostatecznym wyniku.

Pamiętaj! Strona internetowa jest najważniejszym miejscem dla firmy w internecie, bo to właśnie dzięki niej osoby poszukujące rozwiązania swoich problemów stają się klientami.

Jeżeli chciałbyś skonsultować lub dokonać wyceny projektu, zapraszamy do kontaktu.