Dymecki.pl

WzorceUsability.pl

Bartłomiej Dymecki — Mon, 05 Jul 2010 11:45:42 +0000

Ponad rok temu zapowiadałem utworzenie serwisu z wzorcami projektowymi. Wreszcie się udało i serwis jest dostępny pod adresem WzorceUsability.pl.

Oczywiście 17 opisanych wzorców to wciąż niewiele, ale chyba dobry początek. Teraz trzeba solidnie uzupełniać treść. Według założonych planów w serwisie powinno się pojawiać kilka nowych wzorców każdego tygodnia. Jednak w praktyce może wyjść inaczej – w końcu przygotowanie tekstu to nie taka szybka sprawa.

Jeśli macie jakieś uwagi dotyczące serwisu to zapraszam do podzielenia się w komentarzu lub pisania pod adres bartek@dymecki.pl.

Dlaczego lubię papierowe prototypy i makiety?

Bartłomiej Dymecki — Tue, 29 Jun 2010 22:36:40 +0000

Niedawno pisałem o prototypowaniu. Moją ulubioną metodą budowy makiet i prototypów jest paper prototyping.

Najważniejsze zalety prototypowania papierowego to szybkość i łatwość ich tworzenia oraz modyfikowania (a to bardzo ważne). Stosuję techniki prototypowania papierowego w następujących sytuacjach:

Dokumentowanie idei, pomysłów, założeń.
W celu szybkiej oceny wymyślonej koncepcji.
Gdy chcę szybko porównać sposób kilka sposobów działania elementu serwisu.
Na początkowym etapie projektu, gdy nie ma sensu angażować takich narzędzi, jak Axure.
Na dalszych etapach zanim wykonam pracochłonne zmiany w makietach elektronicznych.

Z uwagi na tak szerokie zastosowania prototypowania papierowego obecnie kilka kartek papieru i długopis/ołówek/mazak to narzędzia bez których trudno wyobrazić mi sobie proces projektowy. Szczególnie na jego początkowym etapie, gdzie zderzać może się ze sobą duża liczba rozmaitych koncepcji.

Papierowe prototypy przyjmują różny stopień zaawansowania. Na początku procesu mogą to być tylko proste rysunki dokumentujące luźne pomysły. Potem ogólne makiety przedstawiające uproszczony schemat serwisu. I tak dalej. Takie rysunki możesz tworzyć błyskawicznie i szybko porównać je ze sobą.

Do papierowego prototypowania w sumie nie potrzeba żadnych “bajerów”. Wystarczające są podstawowe przybory do pisania i może linijka (choć niektórzy radzą darować sobie rysowanie idealnie prostych linii). Przydatne mogą być także kartki z nasienioną siatką. Osoby o wyższych wymaganiach estetycznych mogą posłużyć się np. kolorowymi pisakami :-)

Paper prototyping jest także dobrym rozwiązaniem dla pracy w grupie. Podoba mi się technika sketchboard stosowana przez Adaptive Path:

Rysowanie makiet to dla niektórych forma niemal sztuki i zabawa sama w sobie. Świadczą o tym zasoby tego serwisu. Ciekawe przykłady zawierają także grupy na Flickr, np. User Experience Sketches.

Trzy zmiany na blogu

Bartłomiej Dymecki — Tue, 29 Jun 2010 20:55:33 +0000

Dla formalności informuję o kilku zmianach na blogu. Po pierwsze, chętni do zapoznania się z polecanymi książkami mogą zajrzeć na przygotowaną listę. Po drugie, lista polecanych blogów i stron również znalazła się na osobnej podstronie. I na koniec – drobnymi linkami do polecanych materiałów dzielę się od jakiegoś czasu na miniblogu uruchomionym na Tumblr (swoją drogą: świetna usługa).

Branżowa terminologia

Bartłomiej Dymecki — Sun, 27 Jun 2010 18:41:52 +0000

Jakiś czas temu przymierzałem się do analizy terminologii używanej w branży “usability”. Miałem zamiar dość szeroko opisać dlaczego nie czuję się “ekspertem od użyteczności” lub “architektem informacji” (w klasycznym rozumieniu tego określenia), ale raczej projektantem interakcji. W dobrym zdefiniowaniu terminologii ubiegł mnie jednak Maciek Lipiec, więc polecam lekturę jego tekstu o problemach z terminologią.

Przemyślenia o e-learningu

Bartłomiej Dymecki — Tue, 22 Jun 2010 15:45:17 +0000

Nie trudno zauważyć, że współczesny system edukacyjny cierpi na wiele problemów (to już temat-rzeka na inną okazję i pewnie inne miejsce). Rozwój e-learningu może być remedium na niektóre z nich.

Oczywistą zaletą e-learningu jest możliwość powtarzania materiału przez uczniów do oporu we własnym tempie. Dlatego rozwój tej metody nauczania jest ważny zarówno dla edukacji pozaszkolnej, ale także jako uzupełnienie tradycyjnej edukacji.

Ogólnie można uznać, że do tej pory branża internetowa nie najlepiej sobie radzi z rozwojem e-learningu. Powstają systemy, powstają narzędzia, ale to jeszcze nie wpływa na możliwość powszechniejszego zastosowania e-learningu.

Przykład fatalnego podejścia do e-learningu to Akademia PARP – obowiązkowa rejestracja, multum zbieranych danych osobowych i przekombinowany system toporny w obsłudze i nie umożliwiający nauki interesujących użytkownika lekcji, ale zmuszający do przejścia nauki krok po kroku i zaliczania testów. Nie jest to wymarzona interakcja.

Na szczęście są pierwsze przebłyski, które pokazują niezwykle interesujące kierunki rozwoju. Bardzo dobry przykład, jak może wygląda edukacja przyszłości znajdziecie na e-zadania.pl. Znajdują się tam lekcje matematyki w postacji materiałów wideo. Najpierw przedstawione jest zadanie, następnie nauczyciel wyjaśnia jego wykonanie krok po kroku, a na ekranie pojawiają się obliczenia.

Teraz wyrobaźmy sobie, że taki serwis objąłby pełen program nauczania matematyki, fizyki i innych przedmiotów ścisłych, a dostępny byłby dla każdego chętnego. Nie trzeba chyba mówić, że ułatwiłoby to w ogromnym stopniu przyswajanie materiału i oczywiście jego powtarzanie po dłuższym czasie. Systemy testów i śledzenia postępu mogą także być przydatne, ale raczej w formie dodatku.

Również wykorzystanie samego dźwięku w nauczaniu zmienia jego jakość, co udowodnili twórcy kursów językowych na 6ka.pl. Można sprawdzić przykładową lekcję języka angielskiego.

Nie mam jednak złudzeń i nie sądzę, aby włodarze państwowej edukacji postawili na rozwój nowoczesnych systemów edukacji.

Część e-learningu to także udostępnianie materiałów nagrywanych w trakcie procesu edukacji.

Na YouTube EDU znajdują się kanały światowej renomy uniwersytetów udostępniające razem tysiące wykładów. Stanford – ponad 1000, Yale – niemal 400. Inne po kilkaset, czasem kilkadziesiąt. A przecież w większości są to prywatne uczelnie (a może nawet wszystkie są prywatne?). I udostępniają darmowe materiały szerokiej publiczności. Ktoś mógłby powiedzieć, że na tym “tracą”. Tymczasem polskie “publiczne” uczelnie nie udostępniły w internecie nawet jednego filmu. Ciekawy kontrast między tym co państwowe, a tym co prywatne.

Dzięki dostępnym dla każdego materiałom e-learning zamienia się wręcz w self-learning, a to coraz ważniejszy kierunek w przyspieszającym świecie.

Liczę, że rozwój e-learningu w postaci przyjaznej dla użytkownika będzie dalej postępować, a twórcy serwisów wezmą sobie do serca problemy obecnych narzędzi.

Kolekcja filmów o projektowaniu interakcji

Bartłomiej Dymecki — Tue, 25 May 2010 09:49:56 +0000

Na kanale Stanford University na YouTube znaleźć można kolekcję nagrań wykładów dotyczących projektowania interakcji. Jest to nie tylko ciekawy materiał, ale genialny przykład, jak we współczesnej edukacji można wykorzystać zalety technologii (to zresztą bardzo ciekawy i szerszy temat).

Tutaj np. występuje Bill Moggridge (twórca pierwszego laptopa, współzałożyciel słynnej firmy projektowej IDEO):

Dostępne są nagrania z trzech serii wykładów:

Wstęp do prototypowania

Bartłomiej Dymecki — Sun, 16 May 2010 14:18:14 +0000

Prototypowanie, tworzenie szkiców, budowa makiet i projektów funkcjonalnych – wszystkie te pojęcie odnoszą się do projektowania interfejsów, demonstrowania architektury informacji i koncepcji interakcji serwisów oraz aplikacji przed przystąpieniem do prac od strony graficznej oraz technicznej.

Ten tekst w założeniu ma być podręcznym przeglądem podstawowych zagadnień, a piszę go z bardzo egoistycznych pobudek, czyli chęci przedstawiania wszystkim zainteresowanym tematem zamiast każdorazowego wyjaśniania :)

Definicje

Po pierwsze, definicje i nazwy. Podstawowe pojęcie to makieta. Jest to wizualna reprezentacja zawartości serwisu demonstrująca jego elementy. Możemy uznać, że pojedyncza makieta to statyczny dokument. Makieta nie musi odzwierciedlać wszystkich szczegółów projektowanego serwisu, pozostawia miejsce na inwencję graficzną i na ogół jest czarno-biała. Od tej ostatniej zasady zdarzają się wyjątki, a przedstawienie niektórych elementów serwisu w kolorze jest wręcz wskazane.

Zestaw interaktywnych makiet to prototyp. Prezentowany często w formie plików HTML. Prototypy są na różnym poziomie interaktywne. Działać mogą linki i poszczególne funkcje. Oczywiście oprogramowanie do prototypowania posiada swoje ograniczenia, a przez to i interaktywność nie może w 100% odzwierciedlać docelowego działania serwisu.

Zarówno makiety, jak i prototypy są także nazywane projektami funkcjonalnymi.

Makiety mogą być przedstawione, jako lo-fi lub hi-fi. Te pierwsze są mniej, a te drugie bardziej szczegółowe. Makiety lo-fi mogą objąć tylko ogólną konstrukcję serwisu, a hi-fi nawet położenie każdego łącza i fragmentu tekstu. Polecam artykuł Roberta Drózda Makiety, prototypy i 6 popularnych błędów, który dobrze opisuje różnice między makietami hi-fi i lo-fi.

Makiety i prototypy mogą być przedstawiane nie tylko w postaci elektronicznej, ale także papierowej. Zresztą najprostszą formą prototypowania jest tworzenie podręcznych szkiców, rysunków, schematów, co jest dla wielu osób zawsze pierwszym krokiem podczas projektowania.

Tak więc samo prototypowanie to czynność wytwarzania różnego rodzaju makiety i prototypów.

Dodatkowo mamy do czynienia z takimi anglojęzycznymi słowami, jak mockup i wireframe. Słowo wireframe możemy uznać za polski odpowiednik makiety. Wireframes to oczywiście zestaw makiet. Mockup to z kolei wersja produktu, która nie jest skończona, ale obejmuje jego wygląd. W świecie WWW uwzględnia więc także projekt graficzny. Tak zrozumiałem pojęcia używane przez anglojęzycznych kolegów. Jeśli się mylę, to proszę o poprawienie.

Krótko podsumowując:

Makieta to statyczne przedstawienie jednej strony
Prototyp to zestaw makiet, które są interaktywne
Makiety i prototypy mogą być hi-fi lub lo-fi
Powstają w formie elektronicznej lub papierowej

Narzędzia

O narzędziach do prototypowania pisało już wiele osób. Obecnie preferuję Axure (kolejny temat na osobny tekst). Inne popularne programy wymienia na swojej liście narzędzi Marek Kasperski: Usability: narzędzia (zamiast CD). Natomiast Eryk Orłowski opisuje pokaźną listę programów działających online: Przegląd narzędzi do prototypowania. Odsyłam więc do kolegów. W końcu kilkukrotne opisywanie tego samego nie ma większego sensu.

Forma makiet i prototypów elektronicznych

Makiety i prototypy często powstają, jako strony w formacie HTML wygenerowane przy użyciu odpowiedniego programu. Jednak przyjmować mogą również postać plików graficznych w różnych formatach (np. PNG), a spotyka się również prezentacje PowerPointa i projekty tworzone w Microsoft Visio. Myślę jednak, że nie odbiegnę od prawdy, jeśli stwierdzę, że makiety HTML powoli zaczynają dominować.

Czego potrzeba, aby prototypować

Projektowanie różni się od wymyślania mniej więcej tym, czym różni się tworzenie planu architektonicznego budynku przez profesjonalistę od rysowania kolorowych domków przez amatora :) Czyli niemal wszystkim. Projektowanie:

Jest oparte na analizie potrzeb, celów, kontekstu, grupy docelowej, konkurencji.
Opiera się na wiedzy i doświadczeniu, ale także intuicji.
To proces, który może być złożony z wielu iteracji.

Tak więc, aby skutecznie projektować trzeba wyposażyć się w wiedzę dotyczącą samego projektowania oraz informacje i dane związane z samym projektem.

Umiejscowienie w procesie projektowym

Rola prototypowania nie będzie zawsze taka sama w różnego rodzaju projektach. We flashowym serwisie produktowym stworzonym na potrzeby kampanii reklamowej wystarczające mogą być ogólne szkice i konsultacje grafika z projektantem. Z kolei w zaawansowanej aplikacji ważne będzie przedstawienie wszystkich szczegółów działania interfejsu.

Prototypowanie to zawsze część procesu projektowego składającego się z wielu etapów. Jest wykorzystywane zarówno, jako podstawa pracy nad nowymi serwisami, jak i podręczne narzędzie do szybkiego projektowania zmian. Prototypowanie jest oczywiście ważną częścią metodyki User Centered Design.

Jaką wybrać formę?

Dobór formy makiet/prototypu to dla każdego projektu bardzo indywidualna kwestia. Pod uwagę trzeba brać:

Koszta. Stworzenie dokładnego prototypu większego serwisu/aplikacji to wbrew pozorom sporo pracy, a więc i większy koszt.
Rodzaj projektu. Dla prostej strony firmowej wystarczające mogą być statyczne makiety i to nawet lo-fi.
Sposób realizacji. Czego innego potrzeba, gdy zamawia się prototyp u zewnętrznego konsultanta, a czego innego, gdy projektant jest częścią zespołu i może na bieżąco wyjaśniać wszystkie wątpliwości, a nawet przeprojektowywać fragmenty projektu.

Polecane książki

Literatura poruszająca temat prototypowania:

Effective Prototyping for Software Makers
Prototyping: A Practitioners guide
A Project Guide to UX Design – kilkadziesiąt stron dotyczących projektowania
Projektowanie stron WWW. Użyteczność w praktyce – także kilkadziesiąt stron dotyczących prototypowania, m.in. przy użyciu PowerPointa.

Materiały w internecie

Kilka interesujących adresów z wiedzą i darmowymi narzędziami:

Czym naprawdę jest wzorzec projektowy?

Bartłomiej Dymecki — Sat, 27 Mar 2010 16:31:42 +0000

Temat wzorców projektowych pojawił się na blogu dobre pół roku temu. Zacytuję siebie samego:

Dobre, sprawdzone wzorce projektowe możemy uznać za coś w rodzaju standardów usability. Oznacza to dla mnie, że rozwiązania podawane przez autorów wzorców nie są jedynymi słusznymi, ale najczęściej powinny być skuteczne i na tyle uniwersalne, aby stosować je przy różnych typach serwisów.

Dzisiejsze pytanie: czy ze stosowania wzorca można się wyłamać?

Tak. Oczywiście. Nikt nie opracowuje wzorców projektowych po to, aby z szaleństwem w oczach atakować wszystkich, którzy je ignorują :-) Możesz nazywać je tylko inspiracją i czerpać z nich to co jest dla Ciebie przydatne. Tu przy okazji warto wspomnieć, że różne zbiory rozmaitych wzorców projektowych nie zawierają prawd uniwersalnych, a tylko pewien punkt widzenia autora lub autorów serwisu czy książki.

Pamiętajmy także, że nie wszystkie wzorce projektowe są sobie równe. Jeden wzorzec może być uznanym internetowym standardem (np. sposób stosowania zakładek) i naprawdę trudno się z niego wyłamać bez negatywnego wpływu na użyteczność. Taki wzorzec “utarł się” na bazie doświadczeń bardzo dużej liczby ludzi. Ignorowanie go jest po prostu niezbyt mądre.

Inne wzorce nie będą “standardem” aż do tego stopnia. Za relatywnie nowy można np. uznać wzorzec endless scrolling. Trudno w jego przypadku mówić o jakimś utartym standardzie. Jest raczej poradą, inspiracją, przykładem, a pole do wprowadzania innowacji wciąż jest bardzo duże.

Może rozwiązanie które opracujesz będzie kopiowane przez innych i w końcu zostanie uznane za najlepszy, wzorcowy przykład poradzenia sobie z danym problemem?

Niektóre wzorce z samej swojej natury muszą być bardzo ogólne, na przykład dashboard. Przecież różne rodzaje serwisów zbyt mocno różnią się od siebie, aby mówić o najlepszej formie kokpitu.

Żaden wzorzec nie jest “jedynym słuszym rozwiązaniem”. Niemniej aby z sensem wyłamywać się z ich stosowania warto najpierw dobrze je poznać i wiedzieć dlaczego istnieją w takiej właśnie postaci. Wtedy możesz przeanalizować swoją indywidualną sytuację i w razie potrzeby zaprojektować serwis inaczej. Niech jednak decyzje zarówno o przyjęciu, jak i odrzuceniu danego rozwiązania będą przemyślane i świadome.

A idąc jeszcze dalej – tak naprawdę to w ogóle niczego nie musisz. Twórz tylko użyteczne rzeczy :-) Jeśli stosowanie wzorców projektowych lub ignorowanie ich pomoże Ci w tym, to świetnie!

Jak ulepszyć wyszukiwanie?

Bartłomiej Dymecki — Tue, 23 Mar 2010 06:44:15 +0000

Wyszukiwanie, choć wydaje się być bardzo prostą funkcją, w rzeczywistości może być mocno skomplikowane. Spora jest liczba możliwych problemów, a mnogość potencjalnych rozwiązań nie ułatwia podejmowania decyzji.

Zapraszam do dalszej lektury w serwisie InternetMaker.pl

Spróbuj i zapłać

Bartłomiej Dymecki — Fri, 05 Mar 2010 12:50:27 +0000

Premiera Solaris Gate wywołała małe poruszenie. Oglądałem relację z konferencji i muszę przyznać, że wiele rzeczy było mocno niezrozumiałych. Zrzuty ekranu, które już ktoś wrzucił na flickr także nie zachwycają. Ale krytyce poddano także całkiem sensowny model biznesowy. Jak to? Płacić za dostęp do serwisu?!

Jest to warte omówienia, bo taki problem pojawia się w wielu firmach uruchamiających nowe serwisy lub szukających drogi rozwoju dla już istniejących. Otóż model płatności za dostęp do usługi jest jednym z lepszych modeli biznesowych w internecie. Takie np. “zrobię serwis i jak się rozwinie to na pewno zarobię na reklamach” jest kiepskim modelem biznesowym. Nie koniecznie nierealnym, ale na pewno ryzykownym.

Niemniej sprzedaż dostępu do serwisu musi dobrze zaprojektowana. Jako użytkownik powinieneś wiedzieć za co płacisz, jakie da Ci to korzyści i dlaczego w ogóle powinieneś zapłacić, skoro istnieją darmowe usługi. Prawdopodobniej najlepszym rozwiązaniem tej kwestii jest metoda “spróbuj i zapłać”. Daj użytkownikowi dostęp do serwisu na tydzień lub nawet miesiąc, a jeśli mu się spodoba, to wykupi dostęp. Taką metodę stosuje chociażby 37signals w swoich aplikacjach. Oczywiście istnieją także inne rozwiązania – uruchomienie konta demo dostępnego dla wszystkich lub udostępnienie darmowych kont z ograniczonymi funkcjami.

Tymczasem w Solaris Gate przyjęto model płatności przed wypróbowaniem, a to kiepski pomysł nie tylko ze względu na to, że jest “nie fer”. To tylko i aż biznesowy strzał w stopę, bo o ile duża liczba użytkownik może zapłacić za dostęp do dobrej usługi, o tyle mało kto zapłaci w ciemno za coś, czego nie widział i nie rozumie.