Kiedy duży klient zwraca się do ciebie z pytaniem, czy zrobisz dla niego coś, w czym się nie specjalizujesz, to jesteś w kropce. Zgodzić się - źle, odmówić - jeszcze gorzej.

Stanęliśmy przed takim dylematem prawie rok temu, kiedy w mojej skrzynce mailowej pojawiło się zaproszenie do konkursu. Zadanie było ambitne - stworzenie responsywnej platformy e-learningowej z CMS-em, systemem analitycznym oraz elementami grywalizacji, słowem duży projekt.

Skoro klientom się nie odmawia, a jak radzi Benedykt Chmielowski: "smoka pokonać trudno, ale próbować trzeba", postanowiliśmy stanąć do walki. Po kilku dniach wytężonej pracy powstał projekt interfejsu, który okazał się być na tyle atrakcyjny i dobrze odpowiadać na potrzeby briefu, że udało nam się wygrać konkurs. Hura. Ale kiedy emocje opadły nadszedł czas refleksji: czy na pewno koncepcja platformy okaże się funkcjonalna dla ostatecznego odbiorcy? Czy nie popełniliśmy jakiegoś błędu w założeniach. Czy nie pominęliśmy jakiejś kluczowej funkcjonalności?

Nie był to dla nas pierwszy tak złożony projekt, więc nauczeni doświadczeniem postanowiliśmy poprosić o konsultacje eksperta. Już po kilku minutach poszukiwań w sieci, natrafiłem na Piotra Peszkę. Zapoznanie się z paroma artykułami na jego blogu oraz webinarem na temat e-learningu przekonały mnie, że trafiłem na właściwą osobę. Piotr zgodził się na współpracę, a dzięki jego cennym uwagom dokonaliśmy ważnych korekt w projekcie i przystąpiliśmy do pracy nad docelowym modelem platformy.

System został podzielony na trzy moduły: administracja użytkownikami i zarządzanie treścią (CMS), analiza postępów studentów (Analityk) oraz e-learning (szkolenia i biblioteka).

Zrzut ekranu 2015-12-19 o 17.45.02
Zrzut ekranu 2015-12-19 o 17.45.02

Projektowanie interfejsu

Bardzo lubię ten etap pracy, ponieważ jest on doskonałym testem pomysłów i bezlitośnie obnaża wszelkie słabości myślenia oraz, co najważniejsze, jest czymś rzeczywistym i namacalnym. Na tym etapie dobrze jest "wejść w skórę" użytkownika.  Jak trudne jest to  zadanie wiedzą wszyscy, którzy spróbowali stworzyć aplikację lub stronę internetową. Liczba godzin, którą spędza się na rozmowach, projektowaniu, zmianach, nagłych olśnieniach i wpadaniu w ślepe uliczki jest nieprzewidywalna nawet przy najlepszym planowaniu.

Nasz projekt wymagał "wejścia w skórę" aż czterech różnych użytkowników: studenta, administratora, redaktora i analityka.

Zaczęliśmy od stworzenia widoku studenta, czyli miejsca, w którym użytkownicy mogą zapoznać się ze szkoleniami, zaliczać testy, śledzić swoje postępy w nauce. Powstała zakładka Szkolenia, w której umieściliśmy interaktywne kursy i testy.

Zrzut ekranu 2015-12-18 o 15.24.10
Zrzut ekranu 2015-12-18 o 15.24.10

W Bibliotece, znalazły się artykuły będące uzupełnieniem szkoleń.

Zrzut ekranu 2015-12-19 o 17.24.27
Zrzut ekranu 2015-12-19 o 17.24.27

W Moim programie student odnajdzie listę obowiązkowych materiałów.

Zrzut ekranu 2015-12-19 o 20.16.00
Zrzut ekranu 2015-12-19 o 20.16.00

W Dashboardzie - informacje na temat zdobytych przez siebie punktów.

Zrzut ekranu 2015-12-19 o 20.17.26
Zrzut ekranu 2015-12-19 o 20.17.26

A w Wiadomościach - maile z ważnymi informacjami.

System wyposażyliśmy również w funkcjonalną wyszukiwarkę, dzięki której można szybko dotrzeć do poszukiwanych treści.

Zrzut ekranu 2015-12-19 o 18.18.12
Zrzut ekranu 2015-12-19 o 18.18.12

Szczególną uwagę poświęciliśmy budowie interfejsu samego kursu. Student ma do dyspozycji kilka użytecznych funkcji: spis treści, FAQ, pliki do pobrania, zakładki oraz słownik.

1. spis treści
1. spis treści

Zadaniem administratora jest zarządzanie użytkownikami i ich uprawnieniami.

Zrzut ekranu 2015-12-18 o 16.09.47
Zrzut ekranu 2015-12-18 o 16.09.47

Redaktor odpowiada za materiały: dodaje kursy, tworzy testy i artykuły, układa programy szkoleń oraz definiuje dostęp do konkretnych materiałów.

Zrzut ekranu 2015-12-18 o 16.10.33
Zrzut ekranu 2015-12-18 o 16.10.33

Analityk ma wgląd w postępy studentów, w wyniki testów oraz rankingi.

Zrzut ekranu 2015-12-19 o 20.11.20
Zrzut ekranu 2015-12-19 o 20.11.20

Projektowanie szkolenia

Nawet najlepiej pomyślany system e-learningowy jest wart tyle, ile zamieszczone w nim treści. Dlatego przy opracowaniu pierwszego szkolenia zwróciliśmy się o pomoc do Piotra. Zadanie polegało na stworzeniu interaktywnego kursu nt. żywienia niemowląt w pierwszym 1000 dni życia. Materiał, który otrzymaliśmy od klienta był bardzo obszerny i specjalistyczny - wymagał redakcji i uporządkowania a przede wszystko zrozumienia skomplikowanej tematyki.

Pierwszym etapem pracy było opracowanie storyboardu, czyli wymyślenie struktury szkolenia oraz koncepcji każdego slajdu. Zdecydowaliśmy się rownież na stworzenie postaci, która pełniła funkcję przewodnika po szkoleniu oraz wyznaczała studentowi konkretne zadania.

Kolejnym etapem było opracowanie projektu graficznego, który, poza samą szatą graficzną poszczególnych slajdów, musiał uwzględniać również wszystkie interakcje. W efekcie cały kurs został podzielony na 8 lekcji, każda składała się z kilkunastu slajdów. Zaakceptowany projekt przekazaliśmy do kodowania. Równolegle opracowaliśmy pytania testowe wraz z feedbackiem, słownik, faq oraz skrypty.

Niestety, ze względu na poufność, nie możemy przedstawić tutaj efektów naszej pracy, ale dla ilustracji posłużę się tutaj innym kursem, który stworzyliśmy w celach demonstracyjnych. Zasady, którymi kierujemy się przy projektowaniu kursu są dość oczywiste.

Zrzut ekranu 2015-12-18 o 15.50.36
Zrzut ekranu 2015-12-18 o 15.50.36
Zrzut ekranu 2015-12-18 o 15.50.49
Zrzut ekranu 2015-12-18 o 15.50.49
Zrzut ekranu 2015-12-18 o 15.51.05
Zrzut ekranu 2015-12-18 o 15.51.05
Zrzut ekranu 2015-12-20 o 22.15.57
Zrzut ekranu 2015-12-20 o 22.15.57

Prostota. Projektując slajd musimy wiedzieć jaki jest jego cel, czyli, które informacje są kluczowe i powinny zostać zapamiętane. Warto zdać sobie sprawę z prostej zasady, że nasze możliwości poznawcze nie są nieograniczone oraz, że każdy bodziec (element na slajdzie) wpływa na percepcję pozostałych. Dlatego złożone informacje powinno się dzielić na mniejsze elementy i prezentować sekwencyjnie.

Intuicyjność. Według Krugera, autora książki o tworzeniu przyjaznych interfejsow, podstawową zasadą, którą powinni  kierować się projektanci, jest "don't let me thing", innymi słowy nie zmuszajmy użytkownika do zastanawiania się, co oznacza ten krzyżyk, albo jak można przejść do następnego slajdu. Każda taka wątpliwość zniechęca i może wywoływać negatywne emocje, które z kolei obniżają efektywność nauki. Dlatego warto poświęcić czas nie tylko na opracowanie treści, ale rownież na stworzenie jasnych i intuicyjnych elementów interfejsu.

Zaangażowanie. Nic tak nie pomaga w nauce jak zaangażowanie. Jeśli poprosimy użytkownika o wykonanie jakiejś prostej operacji na slajdzie, np. dopasowania etykiet do butelek możemy być pewni, że takie zadanie będzie bardziej efektywne, niż gdybyśmy wyświetlili na slajdzie zwykłą, statyczną informację.

Na koniec

Praca nad systemem e-learningowym, to setki godzin rozmów, miesiące ciężkiej pracy grafików i informatyków. Michał, Marcin - bez waszej determinacji, wiedzy i profesjonalizmu ten projekt nigdy by nie powstał.

Czy nasz e-learningowy eksperyment się powiedzie, czas pokaże. Póki co, korzysta z niego kilkuset studentów, którzy wysoko oceniają system.  Na pytanie "Jak oceniasz możliwości platformy?" 93% stwierdziło, że dobrze i bardzo dobrze. To zobowiązuje.

Jeśli chciałbyś/chciałabyś drogi czytelniku lub droga czytelniczko poznać możliwości platformy i dowiedzieć się kilku ciekawych rzeczy o winie, daj nam znać w komentarzu lub tutaj.

Comment