Wyrwane z kontekstu – Why Map Service ecologies?

W sumie to można to powiedzieć o każdej metodzie badawczej :)

As an exercise, mapping a service ecology can be very effective in a client workshop as a means to broaden the project space. It helps people to think beyond their own business or organizational concerns and see how what they are doing fits into the wider context of people’s lives and society. At the same time, it is important not to fall in love with the mapping exercise itself. Service ecologies can grow infinitely large, and if you do not focus on the results you are looking for, you can end up having mapped the whole world and not know what to do with it. It is important to define the boundaries of the map so you do not continue on forever.

Źródło: Describing the Service Ecology, Andy Polain, Lavrans Løvlie, Ben Reaso, Service Design: From Insight to Implementation, p.83, Rosenfeld Media 2013

Relacja z warsztatów – Mapping the User Experience with Alignment Diagrams

Niniejszy tekst jest pierwszą z kilku relacji  przygotowanych przez Joannę Kwiatkowską w ramach konferencji CHI 2013. Asię możecie znać między innymi z jej badań w firmie Play, warsztatów związanych z personami, wykładu na ostatnim UX Poland, czy raportu Profil Specjalisty UX 2012.

W drodze na CHI 2013, które w tym roku odbywa się w Paryżu, miałam przyjemność uczestniczenia dzisiaj w warsztatach, w Kolonii ramach konferencji Df Experience Cologne 2013. Szczerze powiedziawszy, wydarzenie to było dla mnie wcześniej kompletnie nieznane, kojarzyłam tylko pojedyńcze nazwiska prelegentów: Andrea Resmini, czy Peter Dousa (uczestnicy Polish Information Architecture Summit). Postanowiłam jednak zaryzykować i kupiłam wejściówkę.

Warsztatem, który najbardziej mnie zainteresował były zajęcia prowadzone przez Jim’a Kalbacha, który obecnie pracuje na stanowisku Principal User Experience Designer w firmie Citrix. W Polsce znany jest głównie dzięki wydawnictwu Helion, które w 2008 roku wydało jego książkę Projektowanie nawigacji strony www. Optymalizacja funkcjonalności witryny.

Wprowadzenie

Czterogodzinne warsztaty były całkowicie poświęcone tematyce Alignment Diagrams, które wg Jima są najlepszym sposobem na “wypracowanie harmonii pomiędzy użytkownikami, biznesem, kontentem oraz technologią”. To z kolei umożliwia opowiedzenie “a story about an ideal interaction between an individual and an organization and about the benefits each realizes from the interaction” co stanowi podstawę Value Centred Design.

W niemiecko-holendersko-rosyjsko-polskim składzie zgłębialiśmy czym tak naprawdę są Alignment Diagrams. Definicją, która chyba spodobała mi się najbardziej podała Brigit Moger z International School of Design w Kolonii:

(It is a) tool to move from the creative playroom to the influential boardroom.

Do Alignment Diagrams można zaliczyć:

  • mapy doświadczeń (experience maps),
  • service blueprints,
  • mapy izometryczne (więcej na ten temat w prezentacji Paula Kahna),
  • modele mentalne (więcej na ten temat w książce Indi Young: Mental Models).

Kiedy należy z nich korzystać? Według Kalbacha bardzo wcześnie, czyli na etapie business strategy zanim przystąpimy do fazy projektowania, nie mówiąc już o implementacji.

jury_selection_oxford_p11

Przykład mapy doświadczeń – wybór ławy przysięgłych

Czym powinien charakteryzować się dobry Alignment Diagram?

  • holism  – przedstawienie doświadczeń użytkownika, nie produktów,
  • multiplicity – opisanie różnych przypadków z perspektywy klienta oraz biznesu,
  • interaction – prezentowanie touchpointów między klientem i bizensem,
  • visualization  – przedstawienie wszystkich zachowań użytkowników w graficznej, zagregowanej formie,
  • self evidence – diagram nie powinien wymagać tłumaczenia,
  • relevance – zaadresowanie prawdziwych problemów biznesowych,
  • validity – dane w diagramie pochodzą z badań, posiadamy dowody ich rzetelnej realizacji.

Jak wyglądają poszczególne etapy pracy z Alignment Diagrams

Zdefiniowanie problemu

Należy określić cele biznesowe oraz strategię:

  • segmenty użytkowników (grupy docelowe),
  • zakres (B2C, B2B, etc.),
  • obszar zainteresowania,
  • etc.

Przygotowanie briefu

Na opracowanie Alignment Diagrams, których podstawę stanowi research, powinniśmy zdaniem Jima przeznaczyć od 4 do 6 tygodni.

W briefie powinniśmy uwzględnić:

  • overview,
  • goals,
  • approach,
  • deliverables,
  • roles & responisibilities,
  • costs.

Należy również dokonać wyboru typu Alignment Diagram, który będzie najbardziej odpowiedni do rozwiązania danego problemu biznesowego:

What story do you want to tell?

  • Experience Map: overall brand experience; chronology of customer activity, moments of thruth, pain points
  • Service Blueprints: interaction with a service; chronology of touchpoints; improving back-end processes
  • Mental Models: Detailed model of human behaviours, hierarchical (finding opportunities, but you cannot cut corners)
  • Isometric Map: detailed view of content and systems, including back-office roles and processes; spatial.

Koszt takiego przedsięwzięcia (uwzględniając rekrutację użytkowników, podróże, transkrypcję materiałów) wynosi 8000-17500 Euro (Niemcy & Holandia).

Research

Jim proponuje, aby badania przeprowadzać w następujący sposób:

  1. Zapoznaj się ze wszystkimi istniejącymi raportami i badaniami (wewnętrznymi oraz zewnętrznymi)
  2. Przeprowadź wywiady wewnętrzne
    • zweryfikuj postawione przez siebie hipotezy,
    • zidentyfikuj braki wiedzy dotyczące użytkowników.
  3. Przeprowadź wywiady zewnętrzne
    • 4-6 użytkowników per segment,
    • 60-90 minutowe sesje,
    • spotkania powinny odbyć się twarzą w twarz,
    • zadawaj pytania otwarte,
    • skupiaj się na zadaniach, celach i problemach.

Podczas prowadzenia wywiadów warto korzystać z następujących technik:

  • critical incident,
  • typical day,
  • recommendations,
  • 5 whys.

Interviewing people – it is getting hundreds of pages, but the most important is to cut everything into two dimentions. (Jim Kalbach)

Jeden z uczestników warsztatów zareklamował mającą wkrótce się ukazać książkę Interviewing users autorstwa Steve’a Portigall’a, poruszającą bardzie szczegółowo tematykę przeprowadzania wywiadów.

Analiza danych i przygotowanie diagramu

Diagramy stanowią composite pictures of a customers journey. Rolą badacza/projektanta jest zagregowanie odpowiednich obrazów. Można tego dokonać na dwa sposoby:

  • the long way: wykorzystanie odpowiedniego oprogramowania, które umożliwi nam kodowanie odpowiednich insightów. Wybrane fragmenty są następnie grupowane, a dzięki temu możemy wyróżnić odpowiednie wzorce oraz przepływy (patterns & flows),
  • the short way: stworzenie arkusza, np. w Excelu, który przed realizacją badania został podzielony na fazy (np. activities, goals, moments of truth, pains, etc.) i typy interakcji. Taki arkusz jest uzupełniany w trakcie zapoznawania się z notatkami pochodzącymi z wywiadów i w miarę potrzeby rozbudowywany.

Podsumowane w ten sposób dane mogą być przedstawione w postaci:

  • tabeli,
  • timeline,
  • flow-chart.

Dla wzmocnienia pewnych elementów przedstawianej historii warto zastosować różne kolory, ikony.

Experience map – it is art, not science (Jim Kalbach)

Przykładowe mapy:

Ewangelizacja

Moim zdaniem była to najciekawsza i najbardziej wartościowa część warsztatów. Jim podkreślił, że bazując na swoim doświadczeniu, odradza nam tworzenie długich raportów podsumowujących badania, czy też przedstawiających wnioski wynikające z Alignment Diagrams, których i tak nikt nie czyta. Co warto/należy zrobić w zamian?

  • Wysłać zaproszenia do udziału w warsztatach do wszystkich zainteresowanych danymi przedstawionymi na diagramach. Można załączyć krótkie podsumowanie otrzymanych wyników.
  • Przygotować ćwiczenia kreatywne, które pomogą nam zaangażować uczestników warsztatów, np. czytanie diagramu (poszczególne sekcje przez daną grupę), nadawanie punktacji poszczególnym problemom, ocena company’s performance w poszczególnych fazach przedstawionych na Experience Map, zaznaczenie tzw. moments of truth, analiza SWOT, etc.
  • Przeprowadzić warsztaty, których ostatnim krokiem powinno być ustalenie planu działania poprawy sytuacji/wdrożenia nowych rozwiązań,
  • Przesłać do wszystkich uczestników warsztatów podsumowanie wraz z listą priorytetów.

Jakie korzyści może odnieść z takiego podejścia biznes:

  • zidentyfikowanie słabości, braków,
  • wyróżnienie tzw. opportunities,
  • zdobycie przewagi konkurencyjnej.

Jim wspomniał ponadto, że dodatkowym rezultatem wynikającym z opracowania Alignment Diagrams są tzw. supplementary documents, które zawsze przekazuje klientowi (zestaw obserwacji/insightów związanych np. z produktem klienta, które nie dotyczyły danej dziedziny problemu, dlatego nie mogły znaleźć się na diagramie). Nie ukrywam, że bardzo ucieszyła mnie ta uwaga,  ponieważ było to jednym z tematów mojej prezentacji na UXPoland.

Podsumowanie

Dlaczego warto korzystać z diagramów?

  • pomagają nam w prosty sposób zwizualizować złożone dane,
  • przedłużają czas życia zgromadzonych informacji,
  • ułatwiają zdiagnozowanie problemów,
  • pomagają zidentyfikować punkty, w których należy stworzyć wartość,
  • dzięki nim otrzymujemy tzw. big picture, 
  • dostarczają opportunities for growth.

Jedną z warości, którą wyniosłam z warsztatów Jima Kalbacha była możliwość uczestniczenia w ćwiczeniu, którego celem było nabycie umiejętności prowadzenia dialogu z klientem, którego miałam przekonać do sfinansowania mapowania UX z wykorzystaniem Alignment Diagrams. Korzystając z bardzo pomocnej tabeli zawierającej obiekcje (np. We already do market research) oraz arguments, pozytywnie (do usunięcia) udało mi się przekonać mojego oponenta-partnera pochodzącego z Moskwy.

Warsztaty z Jimem są godne polecenia. Wkrótce kolejna okazja: IA Konferenz 2013 (2 maja), Berlin: UX Strategy: Design to Solve Business Problems.

UI Stencils – Szablon przeglądarki do tablic

Jedną z rzeczy, która zaskakuje mnie w firmie UI Stencils to umiejętność tworzenia i promocji kompletnie niepotrzebnych gadżetów, które aż chciałoby byłoby posiadać. Po wzornikach do Androida i iPhone-a, responsywnych linijkach przyszła pora Browser Whiteboard Stencil, czyli mówiąc bardziej po polsku: szablony do tablic. Wygląda to trochę dziwnie, co możecie zobaczyć na zdjęciu poniżej. Cena produktu to “jedyne” 59 dolarów + koszty przesyłki (11$).

whiteboard-stencil-3

UI Stencils – Responsywna linijka

UI Stencils – mój ulubiony producent gadżetów dla projektantów, podążając za modą  zapotrzebowaniem rynku, wyprodukował kolejny element do absolutnie zbędnego przybornika. Tym razem jest to Pixel ruler – linijka ułatwiająca projektowanie responsywne dla wielu rozmiarów ekranów. Cena: 24$ + 6.5$ dostawa. Miłego oglądania.

Wcześniej opisywane w tej serii: UI Stencils dla Androida, UI Stencils dla iPhone4.

UI Stencils dla Androida

Mniej więcej półtora roku temu pisałem o szablonach firmy UI Stencils wspomagających “ręczne” prototypowanie dla iPhone-a 4. Dziś pojawił się analogiczny szablon dla Androida 4 w cenie 27 dolarów.  Czy planuję jego zakup? Raczej nie – szkicowanie nie wymaga takiej dokładności, a podobnym nakładem czasu i środków mozna uzyskać klikalne prototypy wykorzystując Keynote czy PowerPointa. Ciekawy gadżet, interesujący pomysł na prezent – ale nie narzędzie pracy.

Krótko – Prototypowanie na urządzenia mobilne w Axure

Prototypowanie dla urządzeń mobilnych w programach służących do prezentacji od co najmniej dwóch lat nie w niczym szczególnym. Co ciekawe, jedna ze sztandardowych aplikacja do prototypowania – Axure  – nie miała właściwie do tej pory żadnej interesującej propozycji, która rozwiązywałaby ten problem.

Kilka dni temu pojawił się pakiet widgetów (i plików PNG) dla Axure z elementami interfejsów mobilnych  o jakże prostej do wymówienia nazwie Axutopia. Cena zestawu jest nieco zaporowa, wynosi bowiem 97 dolarów, ale można też kupić pakiety na poszczególne “platformy” po 25 dolarów. Ciekawe.

scatchApp – prototyp aplikacji do zapisywania szkiców

W ostatni weekend (28-30.10) odbyła się w Szczecinie impreza z cyklu Startup Weekend (tag na Twitterze #swsz) której zwyciezcą został zespół, który zbudował prototyp aplikacji konwertujacej szkice na wersję cyfrową – scatchApp. Demonstracyjny film można zobaczyć poniżej.

Link – UX Job Title Generator

UX Job Title Generator  – Komentarz jest zbędny. Polecam ;)

Zbiór inspiracji – Lovely UI

Lovely UI to świetny zbiór kilkuset inspirujących, ciekawych, balnalnych a czasem futurystycznych screenshotów aplikacji mobilnych. Strona zdecydowanie godna uwagi w pracy, podczas przerwy do kawy. Zdecydowanie polecam ;)

The Game of Graphic Design

Fatimah Kabba, projektantka z Nowego Jorku wpadła na pomysł nowatorskiego produktu – gry poświęconej projektowaniu, której celem ma być wciągniecię nietechnicznych klientów i kooperantów do wspólnego projektowania i planowania.

Solution: Create the game of graphic design. A game that allows everyone, not just designers or creatives, but your younger brother, your grandma who can’t click a computer mouse or your best friend who’s an economics major, to better understand and engage in the creative process.

Fatimah, aby projekt zakończył się sukcesem i nie pozostał jedynie w fazie prototypu, postanowiła skorzystać z popularnego ostatnio serwisu Kickstarter, stawiając sobie za cel zebranie 10 tysięcy dolarów w ciągu 30 dni (w momencie pisania tego tekstu, było zebrane około 10% kwoty). Donator, który przekaże więcej niż 90 dolarów, otrzyma na własność egzemplarz gry, a przekazujac 160 dolarów, otrzyma dwa egzemplarze.

Bez wątpienia, taka gra to ciekawa koncepcja, która – być może – w przyszłości będzie stanowić jakieś uzupełnienie już istniejących gier projektowych (vide prezentacja Donny Spencer), zwłaszcza w ramach rozgrzewek i burz mózgów). Zastanawiam się na ile istnieje zapotrzebowanie na tego typu produkty (jak norm Trading Cards czy magnesy AppMagnet) które ciężko jest zakwalifikować do kategorii innej niż gadżety. Porażka lub sukces tego pomysłu w serwisie Kickstatrer, może być jakąś odpowiedzią na to pytanie.

Source: http://i22.photobucket.com/albums/b332/productionz/website%20april%202011/9-1.jpg

Narzędzie – PDF Accessibility Checker

Szwajcarska fundacja The Access for all razem z xyMedia.ch stworzyła bardzo dobre, darmowe narzędzie o nazwie PDF Accessibility Checker (w skrócie PAC), do weryfikowania dostępności plików PDF.

Program na podstawie rekomendacji WCAG2.0 dla PDF, bada listę kontrolną (checklistę) dla wskazanego dokumentu. Całość testu, nawet dla dużych plików trwa kilkanaście sekund. Jako rezultat, otrzymujemy widoczny poniżej ekran z wynikami oraz szczegółowy raport w przeglądarce.

Wynik działania programu na pliku PDF

Dlaczego piszę o tym narzędziu? Większość tworzonych obecnie plików PDF jest tworzonych bez żadnych reguł ani wskazań. Sądzę, że warto przetestować, nawet w niewielkim zakresie, stworzone przez siebie, a dostępne w sieci dokumenty, dokonać w nich zmian i uczynić sieć nieco bardziej dostępną.

Niestety, wg  mojej wiedzy  nie istnieje w Polsce ustawodawstwo, które nakazywałoby przestrzeganie rekomendacji WCAG/WCAG2.0 ani dla administracji plubicznej ani dla biznesu. W Wielkiej Brytanii w obrębie normy PAS 78 istnieje sekcja dla plików PDF a w Stanach Zjednoczonych, dobrze znana sekcja 508 obejmuje również pliki PDF. Ciekawe, kiedy doczekamy się prawnych wymogów tego typu w Polsce…

Aplikację można ją pobrać ze strony fundacji poświęconej programowi, do działania wymaga minimum systemu Microsoft Windows XP oraz Microsoft .NET Framework 2.0 SP2.

Freestyle na sobotę – Projekt Placekitten

Czasem w prototypach lub różnego rodzaju content-boxach istnieje potrzeba zamarkowania reklam lub obrazków, które mają wystąpić w docelowej wersji serwisu.

Nie do końca poważną, ale bardzo pocieszną propozycją jest projekt {placekitten}, gdzie podając rozmiar obrazka, dostajemy zdjęcie małego kota.

Dobrym przykładem działania projektu, jest poniższe wywołanie:

<img title="Project Placekitten" src="http://placekitten.com/580/320" alt="cat photo" width="580" height="320" />

czego efektem jest poniższy obrazek: