piątek, 27 grudnia 2013

Techniki UX: sortowanie kart

Dzięki tej technice słynne karteczki post-it dla zapominalskich zyskują nowe życie. Zatem, jak się domyślacie, kolejna technika UX to nie tylko kawałek dobrej roboty, ale też całkiem niezła zabawa.


Sortowanie kart umożliwia kategoryzowanie treści, znacznie efektywniejsze budowanie architektury informacji, segregowanie zawartości strony, czy produktów w e-sklepie. Pomaga także stworzyć czytelną nawigację, lepiej dobrać treści i funkcjonalności. Nie trzeba wspominać, że dublowanie popularnych i często powtarzających się struktur stron jest nie tylko nudne, ale może okazać się nieco zwodnicze, bo uniwersalne schematy i coś, co sprawdziło się gdzieindziej, nie musi działać dobrze u nas.


Kiedy warto stosować tą technikę? Przede wszystkim, gdy mamy dużą różnorodność elementów do zorganizowania, nie da się ich skategoryzować w prosty sposób, a ich podobieństwa utrudniają wyraźny podział na kategorie. Przydaje się ona również jako narzędzie testowe, gdy chcemy zweryfikować poprawność własnego grupowania pozycji, gdy obecna kategoryzacja nie sprawdza się, gdy elementy są do siebie zbyt podobne lub chcemy dodać coś nowego.


Co można sprawdzić w taki sposób? Przede wszystkim strukturę informacji, kategorie i etykiety, a także hierarchię elementów. Sortowanie kart może pomóc zweryfikować strukturę istniejącej strony, albo też pomóc podczas tworzenia od zera całkiem nowego serwisu.


Do zabawy warto włączyć jak największą ilość osób, przy czym nawet osobniki atechniczne powinny sobie poradzić z zadaniem. Sprawa jest prosta – zapisane karteczki, których treść przedstawia zawartość strony, należy połączyć w kategorie według podobieństwa. Praca może być zorganizowana w grupach lub pojedynczo. Według Nielsena dobre wyniki dają testy z 5 „sortowaczami” (lub grupami), a najbardziej wiarygodne – z 15 (korelacja na poziomie 0.90). Większa ilość sortujących nie zmienia zasadniczo ostatecznego wyniku testu. W zależności od możliwości najlepiej więc zmieścić się gdzieś w przedziale między 5 a 15 osób lub grup, ale przy naprawdę dużych projektach można pokusić się o okrągłą trzydziestkę „testerów”. Więcej na ten temat Nielsen napisał TUTAJ


Jak się za to zabrać? Podstawowa technika to wypisanie na karteczkach głównych elementów strony, wymieszanie i przekazanie ich „sortowaczom” z prośbą, aby połączyli je w kategorie według podobieństwa. Można poprosić także o ustalenie hierarchii wśród kart w danej kategorii, nadanie nazw poszczególnym kategoriom lub wymyślenie synonimów dla zaproponowanych opcji – pomaga to generować dodatkowe pomysły na organizowanie informacji. Inna odmiana tej metody - zamknięte sortowanie kart - to z kolei układanie ich w ściśle określonych, narzuconych z góry kategoriach.


Wyniki sortowania przedstawiane są w postaci dendrogramu, ilustrującego siłę relacji między elementami. Przy dużej ilości wyników wygodnym narzędziem do analiz statystycznych jest EzCalc, przy mniejszej – do wyciągnięcia trafnych wniosków czasem wystarczy obserwacja i słuchanie „testerów”.


I jeszcze mała podpowiedź jak zdalnie zorganizować grupę sortującą. Istnieje sprytne i darmowe narzędzie, pozwalające pracować na odległość – Stormboard. Umożliwia zabawę wirtualnymi karteczkami post-it, przeprowadzenie burzy mózgów, dyskutowanie nad projektami, nawet różnego rodzaju głosowania, a na koniec stworzenie raportu na przykład w postaci pliku pdf. Do tego jest ekologiczny, bo nie produkuje stert kolorowych śmieci. Program pobrać można TUTAJ

poniedziałek, 16 grudnia 2013

Techniki UX: paper prototyping

Chociaż przez chwilę się zawahałam, to jednak z pełną świadomością stwierdzić mogę, że prototypowanie to coś, co rzemieślnicy usability lubią najbardziej. Oczywiście można robić to przy użyciu różnych programów, złożonych mniej (np. Balsamiq Mockups) lub bardziej (np. Axure, o którym pisałam TUTAJ), ale chyba jednak w każdym designerze kryje się coś z dziecka – jakaś taka niedojrzała i niekonwencjonalna cząstka, która sprawia, że spontaniczne projekty okazują się tymi najlepszymi. I ta sama rzecz wywołuje dziką przyjemność, kiedy chociaż przez chwilę popracować można z kolorowymi karteczkami, nożyczkami, post-itami, czy zestawem kredek i zapomnieć o tych wszystkich oficjalnych „usztywniaczach”.


Z grubsza tak wygląda paper prototyping – niezależnie od posiadanych akcesoriów, praca ma się zakończyć powstaniem w miarę jak najwierniejszego, oczywiście papierowego modelu strony czy aplikacji. To zbyt proste i ograniczone? O nie! Papierowe modele mogą być w pełni „interaktywne” – mogą uwzględniać zmieniające się ekrany, scrollowanie, czy nawet proste animacje. Papier zniesie wszystko, grunt to pomysłowość. Wykonanie takiego prototypu nie zabiera dużo czasu, jest tanie, a do tego pozwala wstępnie przetestować wiele funkcjonalności projektowanego produktu i wykryć jego wady, czy problemy jeszcze przed rozpoczęciem pisania kodu.


Najpopularniejsze rodzaje papierowych prototypów to makiety, storyboardy, compy (czyli prezentacje wizualne), wireframe’y (szkielety), ale bardzo często w trakcie intensywnych i kreatywnych prac powstają ich hybrydy i jedyne w swoim rodzaju, niepowtarzalne odmiany. Najważniejsze, by spełniały swoją funkcję (a ich twórcom pozwalały chociaż przez chwilę dobrze się bawić).


Warto dorzucić jeszcze kilka mądrości. Z papierowego prototypowania już w latach 80. korzystały firmy takiej jak Microsoft czy IBM. Stosowanie tej techniki polecane jest w szczególności, gdy inne narzędzia do tworzenia prototypów nie są dostępne (chwilowy brak prądu czy awaria komputera) lub gdy do pracy nad projektem chcemy wciągnąć osoby o ograniczonych umiejętnościach programistycznych. Nie trzeba też dodawać, że takie z pozoru luźne, „przedszkolne” zabawy poprawiają komunikację w zespolę i umożliwiają przeforsowanie wielu wartościowych pomysłów „u góry” czy w rozmowach z klientem (w grupie siła!).


Ponadto, jeżeli papierowy prototyp potraktuje się jako wizualną specyfikację oprogramowania to siłą rzeczy poprawia się także jakość produktu końcowego, a projekt interfejsu użytkownika czy architektura informacji są bardziej kompletne. Zatem nieważne jak dziecinna i niepoważna wydaje się w pierwszej chwili ta technika - istotne, że się sprawdza, a do tego szybko i skutecznie przybliża twórców do bardziej udanego produktu końcowego.


poniedziałek, 9 grudnia 2013

Techniki UX: scenariusz użycia

Kolejna niepozorna i dość błaha metoda stosowana w projektowaniu, na tyle, że precyzyjnego opisu mechanizmu jej działania nie znajdziecie w sieci tak łatwo. Tymczasem scenariusz użycia (user scenario) to nic innego jak opis przykładowego sposobu korzystania z systemu, programu, strony czy innego produktu. Metoda jest na tyle prosta i ogólnikowa, że zastosowanie jej jako jedynej podczas projektowania nie da absolutnie żadnego pozytywnego efektu. Z tematem wiążą się takie pojęcia jak:

Przypadek użycia (user case)
Określa funkcje systemu zgodne z potrzebami (np. elektroniczna rejestracja pacjentów).

Opowieść użytkownika (user story)
Odpowiada na pytania co, kto, dlaczego i po co? (osoba chora lub niedołężna chciałaby rejestrować się na wizytę lekarską tak by uniknąć oczekiwania i kolejek).

Scenariusz użytkownika (user scenario)
Pani Ania jest chora na grypę, ma gorączkę. Mając na uwadze jej złe samopoczucie i kolejki do rejestracji, a także ciągle zajęte linie telefoniczne w przychodni, chciałaby móc zarejestrować się na wizytę bez wychodzenia z domu, na przykład przez stronę lub smsem.


Stosowanie scenariuszy użycia ułatwia wczucie się w sytuację potencjalnego użytkownika, zrozumienie jego potrzeb i celów. Tu przydaje się zatem stworzenie persony, czyli określenie kim jest docelowy user, jakie ma potrzeby i jak je realizuje, w jakim środowisku funkcjonuje i jakich usług i narzędzi używa. Warto jednak podkreślić, że budowanie takiego scenariusza powinno być poparte badaniami terenowymi oraz analizą typowych i problemowych sytuacji.


Sam scenariusz oraz zebrane materiały bardzo przydają się podczas projektowania i budowania prototypów, umożliwiają zidentyfikowanie potencjalnych problemów jeszcze przed ich wystąpieniem. W pewien sposób definiuje to grupę docelową i ułatwia określenie zakresu testów użyteczności. To wszystko zapewnia także lepsze zrozumienie kontekstu i uzyskanie kompromisu między celami biznesowymi a usability – a chyba właśnie o to wszystkim chodzi! 

środa, 4 grudnia 2013

Techniki UX: persona

Persona to chyba jedna z najbardziej banalnych i tym samym jedna z bardziej niedocenianych technik UX. W dużym skrócie polega na tworzeniu fikcyjnej tożsamości, która odzwierciedlać ma jedną z grup użytkowników projektowanego produktu. Zwykle tworzy się więcej niż jedną „personę”, jednak projekt powinien być kierowany niejako tylko do jednej osoby.

Bazą takiej kreacji powinny być jakościowe i ilościowe analizy, ankiety, wywiady i sesje testowe typowych użytkowników, czyli grupy docelowej. W profilu powinna być uwzględniona krótka biografia, charakterystyka demograficzna, profil zawodowo-społeczny oraz potrzeby i cele. Warto też zastanowić się, co cieszy, a co irytuje naszą fikcyjną postać. To wszystko nadaje kreacji bardziej realistyczny charakter - można rzec, że całemu projektowi nadaje ludzką twarz.


Technika ta stosowana jest nie tylko przy konstruowaniu interakcji UX, ale również coraz częściej w celach marketingowych. Persona, jako hipoteza celów i zachowań potencjalnych użytkowników, znaczenie ułatwia podejmowanie strategicznych decyzji i projektowanie, czy redesign usług. Stworzenie persony zapobiega także jednemu z najczęściej powielanych błędów – projektowaniu dla siebie i wdrażaniu do produktu własnych schematów myślenia, oderwanych od faktycznych potrzeb potencjalnego użytkownika.


Wielu projektantów uważa, że persony powinny być oparte na jak najpełniejszych nadaniach, a nie jedynie na wyobraźni twórców. To pozwala projektantom uniknąć generowania stereotypów, które często maja się nijak do rzeczywistości i świata potencjalnych użytkowników.


czwartek, 28 listopada 2013

Wszechmogący druk 3D - będą wyzwania dla UX designerów?

Czasami czuję się jak w jakiejś historyjce Terrego Pratchetta – u niego dziwaczne maszyny potrafiły zrobić wszystko, góry, lasy, ubrania, jedzenie… My mamy drukarki 3D. Do zagadnienia podchodziłam dość sceptycznie, wielki szum medialny, a tak naprawdę po co to komu – rękodzieło ponad wszystko. Rzecz zmieniła obrót o 180 stopni w momencie, gdy jedną taką maszynkę zobaczyłam na własne oczy.

Nie będę się rozpisywać o umiejętnościach tego urządzenia. Imponująca jest możliwość tworzenia dosłownie wszystkiego i to w domowym zaciszu, bez rzeszy małych chińskich rączek stojących za produktem. Wystarczy umiejętność tworzenia wirtualnych modeli i świat jest nasz! Sporą nadzieję dają zastosowania medyczne, na przykład szkieletowe usztywnienie kości (zamiast gipsu), różnego rodzaju protezy, czy kiedyś wreszcie narządy do przeszczepów i skóra (tak, to też już wkrótce będzie możliwe).

Czy w tej dziedzinie znajdzie się miejsce dla UX designerów? Z pewnością tak, bo najlepsze projekty muszą być przyjazne dla użytkownika, a nie każdy ma odpowiedni zmysł, by zadbać o to samodzielnie.


Tymczasem w domowym zaciszu można ustawić sobie urządzenie takie jak ten MakerBot i „wydrukować” na przykład Mistrza Jodę. 










poniedziałek, 25 listopada 2013

Oculus Rift - czyżby kolejna bezduszna maszyna?

Wirtualne hełmy i okulary to przebrzmiały temat, który wzbudzał przeogromne emocje jeszcze kilka lat temu, ale umarł śmiercią naturalną, trochę podobnie jak moje zamiłowanie do gier komputerowych i konsol. Temat głębszego przenoszenia się „oczami” do świata gier został odsunięty na dalszy plan i zastąpiony przez granie całym sobą dzięki kamerom, czy kontrolerom. Poza tym chyba nadal jesteśmy pod wrażeniem efektów HD i 3D. To również ma swój urok, a zapotrzebowanie na ruch, szczególnie u statycznych z natury maniaków komputerowych, miało chyba nieco wyższy priorytet niż wrażenia wizualne. Tymczasem to właśnie wśród geeków notuje się najwyższy odsetek osób uprawiających sport, czyżby stąd pomysł ponownego posadzenia ich na czterech literach? Zatem uwaga maniacy, nadchodzi Oculus Rift, czyli okulary wirtualnej rzeczywistości.


Spotkałam się ze stwierdzeniami, że Oculus to nadzieja, rewelacja i w ogóle same superlatywy. Ja dość przypadkowo trafiłam na prezentację wersji developerskiej (wyświetlającej obraz w 720 p, docelowo ma to być 1080 p, a później może nawet 4K). Trochę wstyd się przyznać, ale wcześniej nawet nie wiedziałam o istnieniu takiego urządzenia, tym bardziej moje user experience będzie obiektywne. Nie doznałam miłości od pierwszego wejrzenia, ani nie przeżyłam jakiegoś wielkiego zauroczenia. Rzecz jest nieco toporna, niedopracowana i wymaga sporo pracy, ale… cieszy.



Z dostępnych dwóch prezentacji, wybrałam wędrówkę po Toskanii. Rollercoaster wydał mi się zbyt ryzykowny zwłaszcza, że ostrzegano przed zawrotami głowy i mdłościami przy pierwszym, zbyt długim kontakcie. Faktycznie, obserwowane zmiany wysokości (np. wchodzenie lub schodzenie schodami) wywołują dość dezorientujące uczucie. Jazda kolejką to już mocniejsze wrażenie – wszystko dzieje się szybciej i bardziej dynamicznie, ale w świecie rodem z 16-bitowych konsol, więc trudno się dać oszukać. No właśnie, bo koniecznie trzeba dodać, że rzecz, na którą wszyscy zwracają uwagę to kiepska grafika, niska rozdzielczość i rozmywanie się niektórych obiektów. Po chwili obecności w wirtualnym świecie oczywiście przestaje się zwracać na to uwagę, ale jednak nie jest to jeszcze Full HD (ale w przyszłości ma być!). Odwzorowanie ruchu i przestrzeni jest dość wierne, wrażenie robi możliwość obrócenia się za siebie, spojrzenia w górę lub pod nogi – efekt jest bardzo autentyczny. Chodzenie i wykonywanie bardziej złożonych czynności wymaga użycia rąk, czyli operacji na klawiaturze lub padzie, a z zasłoniętymi oczami jest to dość trudne.


„Okulary”, choć duże i toporne, okazały się całkiem wygodne i niezbyt ciężkie. Developerski Oculus Rift kosztuje 300 dolarów (ponad 900 zł) i z pewnością nie warto się na niego porywać, ale zaczekać na w pełni dopieszczoną wersję konsumencką.


czwartek, 21 listopada 2013

WUD WRO – krótka relacja

Nie poczuwam się do bycia typowym blogerem i właściwie żadnej relacji nie planowałam (podobno powinno się je pisać na gorąco, ale warunki były niesprzyjające, zwłaszcza w pociągu z zamarzającymi niemal szybami), jednak skoro wszyscy pytają jak było na WUD WRO, to chyba łatwiej będzie coś napisać.



Przede wszystkim, i tu ukłon w kierunku organizatorów, wydarzenie miało niecodzienną formę. W przeciwieństwie do typowo konferencyjnych WUDów, które ostatnio odbywają się dość intensywnie w większych miastach całej Polski, tutaj część konferencyjną połączono z warsztatami – zatem wiedzę zebraną na krótkich, dosłownie 15 – 20 minutowych wykładzikach, można było natychmiast wypróbować w praktyce.



Tegoroczny motyw przewodni to branża Healthcare, więc jako temat do przemyśleń przedstawiono nam zagadnienie wyzwań dla eZdrowia w Polsce i inspiracje UX dla eZdrowia. Następnie polecono na wędrówkę do właściwych sal – w taki sposób około 100 uczestników podzielono na 14 grup roboczych. Ja, Królewna Śnieżka, trafiłam do grupy z pięcioma krasnoludkami z branży IT. Czego by nie mówić – super team, kreatywność 150% normy. Mieliśmy godzinę na ogólne określenie kierunku działań, a naprawdę genialne pomysły posypały się jak z rękawa, bez kłótni i złośliwości. Zażartowaliśmy nawet, że w zasadzie to możnaby się zwinąć i z taką ekipą (i pomysłami) zrobić całkiem sensowny startup.



Po godzinie rozmyślań zostaliśmy zaproszeni na krótkie wykłady dotyczące technik UX. Tutaj niestety pojawiło się pewne rozczarowanie, bo trzeba było wybrać jeden z „pakietów” tematycznych w różnych salach. Szkoda, bo chętnie posłuchałabym o wszystkim (i pewnie nie tylko ja), ale wtedy z pewnością całe warsztaty nie zamknęłyby się w jednym dniu. Swoją drogą, może to ciekawy pomysł na kolejną edycję – tym razem dwudniową. Do wyboru był zestaw technik popularniejszych: persona (Rafał Kołodziej), scenariusz użycia (Jarosław Królewski), paper prototyping (Szymon Boniecki), sketchboard (Barbara Rogoś – Turek) i drugi, technik rzadziej stosowanych: experience journey (Hubert Anyżewski), business model canvas (Joanna Sieniawska), affinity diagrams (Tomasz Skórski), design studio (Iga Mościchowska). Wybrałam, trudniejszy moim zdaniem, zestaw numer dwa, ale w grupie sprytnie podzieliliśmy się po połowie - po 3 osoby udały się na każdy pakiet wykładów, więc ogólną wiedzę mieliśmy pełną.



Później, jak natchnieni, wzięliśmy się do pracy. Niestety z pierwotnego pomysłu, który w brutalnym świecie biznesu miałby rację bytu i całkiem sensowne perspektywy dochodowe, musieliśmy zrezygnować. Projekt portalu medycznego był wielopoziomowy i zbyt obszerny, by ogarnąć go w 4 godziny, które nam pozostały. Poza tym był jednak trochę mało „gadżeciarski”, aby zdobyć uznanie jury i wygrać wyścig zbrojeń z pozostałymi grupami – tak stwierdziliśmy. Zabraliśmy się więc za tworzenie projektu naszpikowanej czujnikami bransolety, która miałaby ułatwiać życie ludziom starszym (a w dalszej perspektywie także uprawiającym sporty ekstremalne). Bransoleta umożliwiałaby wezwanie pomocy (numeru pogotowia ratunkowego lub zdefiniowanego kontaktu), geolokalizację, a także monitorowałaby podstawowe parametry życiowe (puls, ciśnienie, temperaturę, czy rejestrowała gwałtowne uderzenia lub zmiany wysokości), a więc w razie wypadku lub pogorszenia stanu zdrowia, mogłaby sama wezwać pomoc. Prace toczyły się konsekwentnie, ale w pewnym twórczym bałaganie, więc odwiedzającym nas jurorom zapewne trudno było wysnuć właściwe wnioski i docenić nasz pomysł. Gdy ułożyliśmy wszystko jak należy, do oficjalnej prezentacji, niestety nikt już się nie pojawił, aby zobaczyć nasze dzieło.





Podczas uroczystego zamknięcia warsztatów dowiedzieliśmy się, że przegranych nie było, a wygrał projekt bardzo podobny do naszego (?!), może nieco prostszy i mniej wizjonerski. Trudno, ale my i tak wiemy, kto był najlepszy. Potem na dyskusje branżowe przenieśliśmy się do niedużej, wrocławskiej klubokawiarni Lot Kury. Szkoda, że do naszej szczecińsko-trójmiejskiej ekipy dyskusyjnej nie dołączył nikt z Wrocławian. Następnym razem z pewnością będzie lepiej.


Pełną fotorelację można zobaczyć TUTAJ.

środa, 13 listopada 2013

Spotkajmy się na WUDzie

Dość tego mentorzenia, teraz czas się podszkolić. Działacze i miłośnicy branży UX’owej zapewne doskonale znają cykliczne wydarzenie WUD WRO (World Usability Day from WrocLOVE). Tym razem tematem warsztatów będzie szeroko pojęta branża Healthcare. Posłuchać będzie można kilku ciekawych wykładów (m.in. o paper prototyping, sketchboardingu, experience journey, affinity diagrams, czy design studio) i wspólnymi siłami coś zmajstrować pod okiem ekspertów z firm takich jak WitFlowSygnity, BLStream, czy Divante. Co można zrobić w 10 godzin z grupą nieznających się osób? To się okaże, niech UX zwycięży!


Przyznam, że dostać się na warsztaty nie było łatwo. Zainteresowanie było ogromne, miejsc tylko 96, a mi nie poszczęściło się przy rejestracji, pozostała więc lista rezerwowa (na którą oczywiście nie ma co liczyć) i konkursy z nagrodami w postaci ostatnich wejściówek. Los uśmiechnął się do mnie ze strony AdMonkey. Pytano o aplikacje, których brakuje w obszarze ochrony zdrowia. Zainspirowana historią opowiedzianą przez koleżankę, rzekłam tak:

„Podstawowym problemem służby zdrowia, a tym samym pacjentów, są kolejki do lekarzy specjalistów. Nie chodzi jednak o kolejki w klasycznym tego słowa znaczeniu, bowiem przy obecnym systemie całość przybiera raczej kształt drzewka – ze względu na długi czas oczekiwania, ludzie zapisują się do kilku specjalistów tej samej dziedziny na raz, ale siłą rzeczy skorzystać mogą z „usługi” tylko jednego. Nie byłoby w tym nic złego, jednak bardzo rzadko odwoływane są wizyty, z których pacjent nie zamierza skorzystać. Lekarz zatem oczekując na pacjenta, który nie pojawi się, traci czas, z którego mógłby skorzystać ktoś inny. Ciekawym rozwiązaniem byłby mobilny system monitorowania kolejek do specjalistów z łatwym rezerwowaniem i rezygnacją rezerwacji wizyty. Takie rozwiązanie znacznie skróciłoby czas oczekiwania na wizytę i zwiększyło efektywność pracy lekarzy”.

Oczywiście podobne rozwiązania stosują niektóre prywatne przychodnie, ale nie jest to powszechne, a z pewnością przydałoby się w państwowej służbie zdrowia. Organizatorom konkursu spodobało się, że mój pomysł jest odpowiedzią na realny problem i wynika z poczynionych obserwacji. Ja mam nadzieję, że temat uda się pociągnąć dalej.


Takim oto sposobem zyskałam możliwość poszerzenia swojej wiedzy i poznania ludzi z branży. W miarę możliwości podzielę się z Wami wrażeniami. A ktoś z Was wybiera się?


czwartek, 7 listopada 2013

Czerp inspirację z otoczenia


Żyjemy w czasach, w których bardzo trudno jest wymyślić coś całkowicie nowego. Dlatego wszyscy zachęcają by korzystać z gotowych rozwiązań, szablonów, szkieletów, pomysłów by tworzyć nową jakość – mówiąc górnolotnie. Do takich zabiegów uciekał się sam Leonardo da Vinci – on szukał inspiracji w naturze, ale w swoich czasach miał jeszcze wiele czystych kart techniki i nauki do wypełnienia.



A gdzie inspiracji szukają jej wielcy tego świata? Weźmy chociażby firmę Apple i jej genialne pomysły czy koncepcje designerskie. Idea koła, które przewija się w wielu jej produktach czy interfejsach – kojarzyć się może z najdoskonalszą formą natury, nieskończonością, życiowym cyklem (cytuję fanatyków, do których raczej nie należę).


Zaskoczyła mnie jednak wyszperana informacja, że pomysł nie był cudownym objawieniem, ale został zaczerpnięty z innego rozwiązania. Okazuje się bowiem, że wygląd iPoda został zainspirowany kieszonkowym radiem T3 marki Braun (projekt Dietera Ramsa) – obydwa urządzenia wyglądają do złudzenia podobnie.



Projektanci Apple twierdzą, że inspirację znaleźli zupełnie gdzieś indziej – w bezprzewodowym telefonie 6000 BEOCOM marki Bang & Olufsen (projekt Henrika Søriga Thomsena) z intuicyjnym panelem w kształcie koła, który daje dostęp do wszystkich podstawowych funkcji.



To nie jedyny przykład na to, że warto korzystać z gotowych rozwiązań, a koła wcale nie trzeba wynajdować na nowo, ironizując nieco przypadek firmy Apple. O tym jak wiele możliwości daje korzystanie z gotowych zasobów i oprogramowania open source, w ujmujący sposób, podczas jednego z eventów TED Talks, opowiadał młody architekt Alastair Parvin. Musicie to zobaczyć.


poniedziałek, 4 listopada 2013

Prototypowanie w Axure

Wireframing i szybkie prototypowanie to „bezpieczne” i skuteczne metody budowania aplikacji, stron www i innych produktów w UXowym tonie. Dlaczego „bezpieczne”? Chyba nikt nie przepada za żmudnym przebudowywaniem gotowego produktu, zwłaszcza, gdy na jego tworzenie poświęciło się wiele tygodni. Prototyp w zupełności wystarcza by zaprezentować kształt i podstawowe funkcjonalności tworzonej aplikacji, by przeprowadzić testy, nanieść ewentualne poprawki i w formie szkieletu przekazać do produkcji – wszystko dzieje się szybciej, jest bardziej płynne, bez wnikania w szczegóły, które na etapie projektowania są zupełnie zbędne.


Niekwestionowanym liderem prototypowania medium-fidelity (średniej wierności) jest Axure. Jest dość rozbudowany, ale osoby, które miały kiedykolwiek do czynienia z programami graficznymi lub jeszcze lepiej - pakietem Adobe, nie powinny mieć problemu z jego opanowaniem. Zaawansowane funkcje, których stosowanie wymaga dobrej znajomości języków programowania ubrano tutaj w proste w stosowaniu widgety. Często używane funkcje, nagłówki lub elementy można zamieniać w mastery, czyli szablony wielokrotnego użytku – modyfikacja w masterze automatycznie wprowadza taką samą zmianę we wszystkich miejscach, gdzie został użyty. Każdemu elementowi można przypisać działanie, interakcję z innym i adnotację, co zespołowi projektowemu ułatwia dalszą pracę nad finalnym produktem.

Działanie Axure najlepiej prześledzić w akcji. Znalazłam ciekawy tutorial, którego autor zaledwie w godzinę tworzy prototyp istniejącego, dość złożonego serwisu dribbble.com. Przyznacie, że to dość imponujące?


niedziela, 3 listopada 2013

Teksty kontentowe kontra teksty UXowe

Pisaniem na potrzeby różnych mediów zajmuję się od pawie 10 lat, przyznam jednak, że słowo drukowane jakoś nie znalazło się w kręgu moich zainteresowań. Podobno wszyscy piszący marzą żeby pisać do gazet, czy kiedyś wydać książkę – ja miewam takie zapędy, ale kiedy uzmysłowię sobie, że jedną historię musiałabym ciągnąć przez kilkadziesiąt czy kilkaset stron, to skutecznie odechciewa mi się. Pocieszam się tym, że w takim razie UX mam we krwi, bo to jest właśnie pisanie kontentowe…

Pisząc na potrzeby mediów elektronicznych trzeba zdać sobie sprawę z jednej, bardzo istotnej rzeczy – czas możliwego zatrzymania czytelnika jest znacznie krótszy niż w przypadku mediów drukowanych, zatem informacja musi być przekazana w możliwie mocno skondensowanej formie. Zauważcie, że news mobilny to w zasadzie nagłówek z krótkim komentarzem, a nie felieton czy dłuższy artykuł. Ten pierwszy ma tylko kilka sekund by zainteresować czytelnika, który łapie za smartfona stojąc na przykład w korku czy jadąc w windzie (swoją drogą, czy nie wkurzają Was mylące lub „zbyt chwytliwe” nagłówki do beznadziejnych tekstów?). Z gazetą fajnie jest usiąść, wypić kawę, chociaż to tez nie jest gwarancja, że czytelnik przeczyta wszystko od deski do deski. Poza tym, kto dziś jeszcze kupuje gazety?


Jaki wyglądać powinien dobry tekst w mediach cyfrowych? Powinien być przede wszystkim nie za długi, pisany prostymi słowami i w taki sposób, by w poszukiwaniu znaczeń nie trzeba było przekopywać Wikipedii. Zdania powinny być krótkie, w miarę możliwości pojedynczo złożone z wytłuszczonymi kluczowymi słowami lub informacjami. O poprawności gramatycznej, stylistycznej, czy ortograficznej chyba nie muszę wspominać, ale mnie na przykład dodatkowo strasznie irytuje używanie emotikonek – to wszystko (czyli błędy i swojego rodzaju zdziecinnienie) w moich oczach odbiera piszącemu wizerunek profesjonalisty. A zwłaszcza, gdy profesjonalistą się nie jest (co można niestety powiedzieć o 80% osób piszących w sieci), to warto chociaż spróbować zachować pozory. Czytelnicy to bardzo doceniają, choć nie pochwalą, ale za to każdą wpadkę lub pomyłkę do bólu i szczerze wytkną w komentarzach. Dziennikarze prasowi mają ten komfort, że taka informacja zwrotna do nich nie dociera – mogą sobie bezkarnie obrastać w piórka, przekonani o swojej językowej doskonałości i nieomylności.


Do tematu pisania UXowego można dorzucić jeszcze kilka przydatnych reguł. Gdy w pisaniu kontentowym mniej znaczy więcej, to w UXowym – jeszcze mniej znaczy jeszcze więcej. Zatem przyzwyczaić się trzeba do skracania (zamiast rozbudowywania) i „kompaktowania” istniejących tekstów. Jest to bolesne zwłaszcza, że chyba większość z nas pamięta czasy dzieciństwa i polonistki stawiające lepsze oceny za dłuższe wypracowania. Nawet w budowaniu makiet coraz rzadziej korzysta się z kultowego „Lorem Ipsum” – nikt nie potrzebuje już tak długich tekstów. Często powtarzające się słowa, czy etykiety warto zastępować ikonami (ale mam na myśli raczej cały interfejs, a nie... emotki na końcu zdania).

W przypadku tekstów marketingowych, pisanie kontentowe mówi więcej o formie produktu, niż o jego funkcji, natomiast UXowe musi być niemal stopione z produktem, niezauważalne i oczywiście musi opierać się na intuicji czytelnika. Co więcej, w pisaniu UXowym kontent w zasadzie nie istnieje, istnieje tylko doświadczenie, a więc liczą się nie pojedyncze słowa, a ogólne wrażenie. Miłośników literatury zmartwi być może fakt, że język „elektroniczny” przypomina coraz bardziej język techniczny, a nie beletrystykę, ale chyba wkraczamy właśnie w taką epokę – przeciętny śmiertelnik nie ma dziś czasu na czytanie felietonów, tym bardziej na czytanie „prawdziwych” książek, a informacyjny chaos trzeba jakoś, w miarę bezboleśnie ogarnąć. 


niedziela, 27 października 2013

10 heurystyk Nielsena w usability

Heurystyka nie musi być określeniem zarezerwowanym dla filozofów. Ja swoją pierwszą styczność z tym terminem zaliczyłam podczas studiów na wydziale humanistycznym. „Zjawisku” dedykowano cały przedmiot, niestety niewiele z niego pamiętam, chyba było zbyt sympatycznie. Generalnie chodziło o twórcze metody rozwiązywania problemów. Heurystyki Jakoba Nielsena, czyli zasady interakcji człowiek-maszyna, sformułowane w 1990 roku to coś, czego nie da się przeskoczyć w procesie projektowania. Albo inaczej – nie opłaca się przeskakiwać! Teoria ma już ładnych parę lat, ale dzięki bardzo ogólnemu i uniwersalnemu ujęciu jeszcze długo będzie aktualna. Zatem chcąc stworzyć produkt o nienagannym usability:

1.      Pokazuj status systemu.
Informuj użytkownika o tym, co się dzieje, czy gdzie się znajduje. Dotyczy to zarówno najprostszej nawigacji po stronie, procesu zamawiania produktu, usługi czy każdej innej funkcjonalności.

2.      Zachowaj zgodność pomiędzy systemem a rzeczywistością.
Strona, czy aplikacja ma być przede wszystkim zrozumiała dla jak najszerszej grupy odbiorców. Warto więc posługiwać się nie tylko zwrotami technicznymi, ale logiką, uproszczeniami i językiem stosowanym w codziennym życiu.

3.      Daj użytkownikowi pełną kontrolę.
To dość oczywiste. Każda wykonana funkcja powinna być odwracalna, a wyjście z pomyłkowo zastosowanych rozwiązań, czy operacji – łatwe i intuicyjne. Sprawnie działające funkcje „cofnij” i „ponów” są na wagę złota.

4.      Trzymaj się standardów i zachowaj spójność.
Te same słowa, zwroty, funkcje, czy ikony zawsze powinny oznaczać to samo i działać tak samo. Kreatywność jest wartościowa, ale miejsca uwieszania logotypów, wyszukiwarek czy menu oraz wielu innych rzeczy są standaryzowane, by zachować poprawne działanie w jak największej ilości środowisk (reguluje je organizacja W3C).

5.      Zapobiegaj błędom.
Błędy to coś, co zniechęca użytkownika i burzy wrażenie profesjonalności. Ale nie chodzi tylko o klasyczne bugi, czy komunikaty błędu wyrzucane użytkownikowi „na twarz”. Jako błąd może być również postrzegana widoczność funkcji lub produktu, który nie jest dostępny dla użytkownika.

6.      Pozwalaj wybierać zamiast zmuszać do pamiętania.
Pamiętanie nie boli, ale zmusza użytkownika do pewnego wysiłku i odbiera przyjemność korzystania z serwisu. Dlatego łatwiej dawać wybór niż zmuszać do pamiętania ścieżek. Czasem przydaje się też łatwy dostęp do instrukcji obsługi lub pomocy.

7.      Zapewnij elastyczność i efektywność.
Możliwość personalizacji, różne parametry wyszukiwania, autouzupełnianie, czy pamiętanie wcześniejszych wyborów użytkownika, to coś, co sprawia, że uda się zadowolić większą ilość użytkowników. Każdy użytkownik jest inny, ma inne preferencje i doświadczenia, ale łączą ich przynajmniej 2 cechy: lenistwo i skłonność do kłamania, czy może raczej… wyrażania się w nieprecyzyjny sposób.

8.      Dbaj o estetykę i umiar.
Mniej znaczy więcej. Warto ograniczyć się więc do wyświetlania jedyne informacji, które są kluczowe w danym momencie. Natomiast im prostszy design, tym większa jest szansa, że spodoba się większej ilość użytkowników, będzie bardziej czytelna i łatwiej zrozumiała.

9.      Zapewnij skuteczną obsługę błędów.
Komunikaty o błędach powinny być wyświetlane w prosty, zrozumiały sposób i precyzyjnie informować o niewłaściwie przeprowadzonej operacji lub braku niezbędnej informacji. Wyrażanie błędów kodami lub cyframi może irytować. Projektantowi przyda się natomiast informacja zwrotna, czyli funkcja „zgłoś błąd”. Dla niektórych użytkowników korzystanie z niej to sposób na w miarę bezbolesne wyładowanie frustracji.

10.  Zadbaj o pomoc i dokumentację.
Błędy zdarzają się najlepszym, poza tym nic i nikt (również użytkownik) nie jest doskonały, dlatego system pomocy, FAQ, czy dokumentacja na pewno się przyda, a być może mocno ułatwi komuś życie i korzystanie z produktu.

piątek, 18 października 2013

“Glass! Take a picture” i UX dla odważnych

Projektowanie interfejsów na urządzenia mobilne, a tym bardziej dostosowywanie istniejących rozwiązań webowych do wymagań drobnego sprzętu wymaga… odwagi. Przyzwyczailiśmy się bowiem do obfitych menu i dostępności wielu opcji na raz. Tymczasem w wersjach mobilnych menu zastępowane są ikonami, a funkcje i użyteczności (w tym reklamy czy grafika) ograniczane. To właśnie, czyli swojego rodzaju designerski i projektowy downshift, wykonany nieumiejętnie może całkowicie zepsuć produkt finalny. Pionierskie posunięcia i cięcia, a takie są najbardziej potrzebne, wymagają właśnie największej odwagi. Wychwycenie tych najważniejszych funkcjonalności daje natomiast pole do rozwoju dla drobnych urządzeń peryferyjnych. Miłośnicy tematu być może nieco się oburzą, ale mam tu na myśli przede wszystkim Google Glass, z którymi miałam okazję „porozmawiać” wczoraj.



Urządzenie w zasadzie nie ma racji bytu bez wsparcia laptopa czy smartfona, bo samo w sobie nie jest wyposażone w moduł GPS, czy w coś, co mogłoby zastąpić klawiaturę (przydatną chociażby do wprowadzenia hasła WI-FI), oczywiście nie ma też slotu na kartę SIM. Ale mniejsza o sprawy techniczne, fascynujące jest coś zupełnie innego.


Po pierwsze intuicyjność ich działania – w zasadzie wrzucasz na nos, akomodujesz oko i jedziesz. Ich serce to nic innego jak Android 4.0.3, obsługa odbywa się za pomocą dotykowej konsolki, gestów i komend głosowych (są w zasadzie jedynie dodatkiem). A druga rzecz to przeogromne uproszczenie interfejsu i minimalizacja informacji, jakie można uzyskać. Oczywiście robienie zdjęć na komendę “OK Glass! Take a picture”, całkowicie bez użycia rąk i bezpośrednie wrzucanie ich na portale społecznościowe robi wielkie wrażenie, choć po chwili namysłu wydać się może nieco przyziemne.


Do tego trzeba dodać, że projektowanie aplikacji na takie urządzenia, o ile faktycznie upowszechnią się w codziennym użyciu, a nie zaginą w elektronicznym wszechświecie jak hełmy czy okulary interaktywne (tworzone z myślą o świecie gier kilka lat temu), będzie wymagało sporego wyczucia. Kafelkowe menu i maleńki projektor jest w stanie dostarczyć oku jeszcze mniej informacji niż ekran smartfona. Na szczęście chyba nie chodzi o to, aby takie urządzenie miało smartfona zastąpić, przynajmniej jeszcze nie teraz. Na razie jest też bardzo, ale to bardzo kruche. Być może to przedsmak całkiem sensownie działającej bioniki? A co na to Matka Natura, mistrzyni usability? Jeżeli glassy staną się produktem masowym, to pewnie w którymś upgrade pozbawi nas jednego oka i kawałka… mózgu. Więc póki co cieszmy się tym, co mamy!