Sam nie mogę wyjść nadal z podziwu, jakie możliwości dają wszelkie biblioteki oparte np. na jQuery. Dzięki niej zaczęła się upowszechniać nowa, lepsza i wygodniejsza forma popupu – lightbox. Coraz częściej możemy zobaczyć także wygodne zastosowania zwijania i rozwijania elementów, tooltipy, wygodną walidację pól, przegląd listy zdjęć jako slideshow.

Rozwiązania oparte na zaawansowanym wykorzystaniu Java Scriptu już dawno weszły pod strzechy przybornika projektanta (a jeśli nie, to należy to jak najszybciej nadrobić). Kilka dni temu zobaczyłem kolejne rozwiązanie, które mnie zaciekawiło na tyle, aby o tym napisać.

Mowa tutaj o dosyć ciekawym rozwiązaniu, jakie ostatnio miałem okazje zobaczyć na serwisie mashable.com. Umożliwia ono przesyłanie, polecanie, linkowanie wybranych elementów contentu serwisu (zdjęcia, video) za pośrednictwem skonfigurowanych kanałów społecznościowych jak np. Facebook, Twitter, komunikatory czy E-mail. A wszystko to w bardzo wygodny sposób – za pomocą drag & drop. I właśnie to mnie urzekło w tym rozwiązaniu – totalna prostota w udostępnianiu elementów serwisu swoim znajomym.

Aby udostępnić wybrany element np. zdjęcie, najeżdżamy na niego kursorem myszki. Element oprawia się w ramkę, zaś na zdjęciu pojawia się napis (ku mojemu zaskoczeniu) w języku polskim „przeciągnij aby udostępnić”. Następnie wciskamy lewy przycisk myszy i nie puszczając go, przesuwamy kursor. W tym momencie treść serwisu się wygasza i naszym oczom ukazują się ikony symbolizujące wybrane kanały społecznościowe. Pozostaje nam tylko upuścić element na wybrana ikonę. Prawda, że proste?

Przyznam się, że bardzo pozytywnie zaskoczyło mnie to rozwiązanie. W pozytywnym znaczeniu. Mało tego, uważam, że jest ono nie tylko efektowne, ale także użyteczne, ponieważ:

• pokazuje użytkownikowi, co może być udostępnione
• wygasza na ekranie wszystko, co jest w danym momencie nie potrzebne
• nawiązuje do modelu mentalnego dotyczącego obsługi ikon, do którego jesteśmy przyzwyczajeni
• korzystaniu z narzędzia towarzyszy wysoki UX
• umożliwia realizację celu użytkownika

A co Wy o tym sądzicie?

Na dobrą sprawę, można by było dodać do tego gesty w przeglądarkach czy czytnikach kart. Można popuścić wodze fantazji. Zapraszam na rewelacyjną porcję wiedzy!

NYC IxDA – Tap is the New Click – Dan Saffer from Interaction Design Association on Vimeo.

Ze strony vimeo.com:

„Tap is the New Click”

Even though the technology has been around for decades, only now are we starting to see mass production and adoption of touchscreen and gestural devices for the public. Jeff Han’s influential 2006 TED demonstration of his multitouch system, followed by the launches of Nintendo’s Wii, Apple’s iPhone, and Microsoft Surface, have announced a new era of interaction design, one where gestures in space and touches on a screen will be as prominent as pointing and clicking.

But how do you create products for this new paradigm? While most of us know how to design desktop and web applications, what do you need to know to design for interactive gestures?

This introduction to designing gestural interfaces will cover the basics: usability and ergonomics; a brief history of the technology; some elemental patterns of use; prototyping and documenting; and how to communicate that a gestural interface is present to users.

ABOUT DAN SAFFER
Dan Saffer is an experience design director for Adaptive Path. An international speaker and author, his writing on design has appeared in BusinessWeek and many online publications. His acclaimed book Designing for Interaction: Creating Smart Applications and Clever Devices has been called „a bookshelf must-have for anyone thinking of creating new designs” and has been translated into several languages. His new book on interactive gestures will be published by O’Reilly in October 2008.

Dan is a member of the Industrial Designers Society of America (IDSA) and the Interaction Design Association (IxDA). He received his Master of Design in Interaction Design from Carnegie Mellon University.

E-commerce to w dużym uproszczeniu przeniesienie koncepcji sprzedaży na pole Internetu. Jednak życie użytkownika jest o wiele trudniejsze niż życie klienta sklepu wielobranżowego. Zobacz, jakie najczęściej popełniane błędy spotykają użytkownicy i jakie to wywołuje w nich reakcje. Stać cię na nieświadomość?

Ile razy czuliście się zagubieni w wielkim supermarkecie? Ile razy przemierzaliście po raz kolejny wszystkie działy w poszukiwaniu jednego produktu (a przecież miało to zająć tylko chwilkę)? Ile razy…

W sumie można by tak wymieniać jeszcze długo przypadki, gdy market, w którym aktualnie robicie zakupy, nie ułatwiał wam zadania (a wręcz je utrudniał). Podobnie jak w realnym świecie, dzieje się w internetowych sklepach. Ślepe zaułki, przytłaczające reklamy, niezrozumiały rozkład produktów w działach, nieaktualne ceny – to brutalna codzienność internetowego konsumenta.

Można by się tym nie przejmować. Skoro w realnym sklepie konsument radzi sobie z jego niedoskonałościami, to dlaczego miałby sobie nie poradzić w Internecie. Otóż w tym miejscu bardzo łatwo  o błąd. W Internecie o wiele łatwiej zmienić sklep. W realnym świecie musimy wykonać cały ciąg czynności: przejść do kas (najpierw je znaleźć), odłożyć koszyk, wydostać się z marketu, wystawić się na działanie nieprzychylnej aury (w lecie jest może troszeczkę przyjemniej), znaleźć następy sklep i zacząć wszystko od początku. To wszystko wymaga czasu. W sieci zamykamy stronę www i przechodzimy zwyczajnie do innej.

Z tego też powodu każda usterka, która generuje negatywne emocje w użytkowniku, każde poczucie zagubienia czy dyskomfort odczuwany w trakcie procesu zakupowego, niesie za sobą drastyczniejsze w skutkach reakcje i konsekwencje.

Chciałbym się posłużyć tutaj konkretnymi przykładami. Wyborną ich ilustrację zaprezentowała firma Elastic Path Software.

Poprawnie działająca wyszukiwarka

Poprawnie działająca wyszukiwarka to podstawa w e-commerce. Nie chodzi tutaj wcale o samo działanie jako takie (przecież to oczywiste). Kruczek w tym, aby zrozumieć potrzeby użytkownika i to, czego on szuka. Wyświetlanie całego asortymentu w wynikach wyszukiwania nie ma większego sensu (kto to przejrzy). Z kolei w przypadku braku wyników, wyświetlanie pustej listy także jest dalekie od ideału (zachęcam zapoznać się z moim wcześniejszym artykułem Wynik wyszukiwania powinien być… no właśnie. Jaki?).

Dobrze działający silnik wyszukiwania to taki, który wyświetla optymalną liczbę wyników o jak najwyższym wskaźniku relewancji, zaś w przypadku, gdy nie znaleziono obiektów odpowiadających zapytaniu, estymuje i dopasowuje wyniki o możliwie bliskim podobieństwie (lub rekomenduje inne) – oczywiście informując o tym użytkownika.

Ilustracja sytuacji:

Zagubieni w nawigacji

Podobnie jak w realnym świecie nikt nie lubi wejść do działu, w którym nie chciał być, tak w Internecie uczucie trafienia na stronę, na którą nie chcieliśmy trafić, powiązane jest z frustracją, odczuciem zagubienia czy rezygnacją. Należy bezwzględnie unikać tzw. ślepych zaułków czy też elementów niejasno komunikujących stronę, na którą prowadzą.

Kupić i wyjść

Proces zakupowy jest wystarczająco skomplikowaną czynnością i nie warto go jeszcze bardziej utrudniać. Proponowanie nowych produktów w obrębie koszyka (tuż przed akcją przejdź do kasy)  jest potencjalnym elementem powodującym rezygnację z zakupu. Na wszystko jest czas i pora. Produkty możemy proponować w trakcie przeglądania i poszukiwania przez użytkownika odpowiedniego asortymentu. Stronę pokazującą zawartość koszyka pozostawmy bez dodatkowych rozpraszaczy (szczególnie należy się wystrzegać reklam). Poniższy przykład ilustruje dlaczego na stronie koszyka nie należy umieszczać elementów rekomendacji produktów.

Moja prywatność to najwyższa wartość

Wymaganie podawania danych w niezrozumiałych sytuacjach jest niczym ukłucie delikwenta igłą w tyłek. Każdy ceni sobie swoją prywatność. Dlatego jeśli już wymagasz od użytkownika podania danych osobistych, to rób to TYLKO w uzasadnionych sytuacjach i poinformuj go o celu podawania tych danych. Warto także zastanowić się, czy wszystkie dane, o które prosimy, są absolutnie niezbędne. Rozmiar buta twojego klienta na prawdę jest Ci zbędny (o ile nie prowadzisz sklepu obuwniczego).

Rozpraszacze

Zarówno wolne działanie serwisu jak i czynniki zewnętrzne działają podobnie na użytkownika – rozpraszają go a nawet sprawiają, że zapomina on o czynności, którą przed chwilą wykonywał (np. o zakupie produktów). Na pierwszy przypadek mamy wpływ (i należy zająć się tym jak najszybciej). Na drugi niestety nie mamy niestety mocnych argumentów, jednak przestroga płynie taka: nie dodawać takich czynników z własnej strony (nachalne reklamy, niezrozumiałe elementy, niepoprawnie działająca nawigacja itp.).  Po co strzelać sobie we własną nogę?

Reasumując, e-commerce jest wystawiony na wiele czynników, których istnienia należy być świadomym. Rozważne planowanie i unikanie powyższych negatywnych sytuacji to jeden z elementów składających sie na zapewnienie należytej jakości udostępnianych usług.

Planowanie przekuwamy na użyteczne rozwiązania umożliwiające realizację celów użytkownika – ot i cała tajemnica. Jednak nikt nie powiedział, że jest to łatwe ;)

Materiały zaprezentowane w artykule pochodzą z kanału firmy Elastic Path Software. Zachęcam do zapoznania się z pozostałymi ich nagraniami. Mim zdaniem zebrali tam świetny materiał dla każdego, kto interesuje się e-commercem.

Warto także przeczytać artykuł: Reducing Friction in the Sales Process.

Wiemy już czym jest persona i co na nią się składa. Jednym z takich elementów charakterystycznych jest nazwa (najczęściej imię i nazwisko) persony. No właśnie – jak ją nazwać, aby było dobrze? Różne osoby stosują różne nazewnictwo. Jedni nazywają je w nawiązaniu do typu charakteru, usposobienia, zainteresowań czy też zawodu np. Zofia Uparta, Karol Paker, Kamila Oziębła itp. Jeszcze inni stosują nazwy śmieszne lub zupełnie wymyślne – tak, by się jakoś wyróżniało lub kojarzyło.

Czy jest to dobre podejście? Jak większość rzeczy w terminologii projektantów interfejsów „to zależy”. Zależy od grupy osób jakie będą miały kontakt z personą, od ich znajomości na temat projektu i ich użytkowników. Zależy to także od indywidualnych „czynników skojarzeniowych”, na co niestety nie mamy już wpływu (i dobrze :D).

Ja uparcie hołduję podejściu, że persony powinien znać każdy członek zespołu projektowego: poczynając od marketera a na programiście skończywszy. Klient także powinien je poznać (i to możliwie jak najlepiej) aby był w pełni świadomy, dla kogo tworzymy aplikację czy serwis. Dla tego powinno się je nazywać normalnie, naturalnie, bez zbędnych udziwnień i skojarzeń. Zwróćmy uwagę, że wspomniana grupa osób zaangażowanych w projekt, to bardzo dużo osób zaangażowanych myślowo co daje pole do popisu dla wspomnianych wcześniej „czynników skojarzeniowych”. No i właśnie w tym miejscu dochodzę do konkluzji. Czy wybrana przez nas nazwa będzie dobra? Czy będzie adekwatna i czy nie będzie wprowadzać niepożądanych skojarzeń lub błędnych interpretacji?

Pozwolę sobie zacytować tutaj fragment artykułu pochodzącego ze strony www.cooper.com:

The term “Joe Six Pack” has frequently been used in the 2008 presidential campaign. This is a good example of how using “soundbite” names for your persona work against your need for a specific design target that keeps everyone on the team focused on the same idea.

In NPR’s Morning Edition program “York Voters Untangle Rhetoric On Race” Renee Montagne, Steve Inskeep, Michele Norris asked 15 voters from York Pennsylvania what they thought of when they heard the term “Joe Six Pack.” The got a variety of responses:

Mohammad Khan, an immigrant from Bangladesh, owns a diner with a giant American flag painted on the building. „Joe Six-Pack is people just like me — work every day, pay their taxes.”

„When I think Joe Six-Pack, I think of the hunter and his gun and his dog, and that’s a definite white man out in the countryside,” says Blanche Hake, a retired teacher who is white.

Margie Orr, who’s black, says „The others are lazy. They don’t work as hard, so that’s where the Joe Six-Pack comes in. He’s a hard-working white man.”

Bazując na tym przykładzie oraz własnych doświadczeniach, nadal upieram się, że średnich i dużych zespołów, nazewnictwo naturalne jest mniej ryzykowne aniżeli tworzenie nazw skojarzeniowych. Oczywiście, ciężej jest skojarzyć na początku konkretny profil z odpowiednim imieniem i nazwiskiem, ale to kwestia czasu i samodyscypliny pamięciowej. Dla mniejszych grup projektowych lub ludzi znających się bardzo dobrze (w małym gronie), można swobodnie stosować nazwy skojarzeniowe z mniejszym ryzykiem błędnej interpretacji. Jednak jeśli o mnie chodzi, to i w tym wypadku postawił był minimalizację ryzyka nad odrobinę pamięciowego lenistwa. Poza tym mały trening pamięciowy jeszcze nikomu nie zaszkodził.

Aby nie musieć wymyślać nazwisk, polecam zbiór popularnych nazwisk polskich (PDF 752KB). Sam z powodzeniem z niego korzystam i bardzo dobrze mi służy :)

Sam osobiście podejmowałem kilka prób korzystania ze słownika T9 i szczerze mówiąc, nie potrafiłem do niego przywyknąć. Ograniczeniem był jeden problem – potrzeba wprowadzenia i zapamiętywania (przebrnięcia przez ten etap) niestandardowych skrótów słownych, których często na codzień w komunikacji SMS-owej używałem. Dodatkowo jako uczeń szkoły średniej, a później student, często starałem się eliminować objętość SMS-ów przez pozbywanie się białych znaków oraz znaków interpunkcyjnych Pozwalało to zaoszczędzić czasami przynajmniej kilkadziesiąt znaków na 1 SMS-a, a co za tym idzie – pieniądze ;)

Słownik T9 niedawno pozyskał godnego pretendenta do bycia następcą jego dorobku. Mowa tutaj o technologii Swype.

Technologia Swype - wygląd interfejsu (źródło: www.swypeinc.com)

Technologia Swype wymaga posiadania dotykowego ekranu (bądź w przyszłości innego rodzaju klawiatur). Idea działania opiera się na koncepcji słownika T9. Na podstawie kolejno wprowadzanych liter, dopasowywane sa słowa, które najbardziej pasują do podanych znaków. Cechą, która zasadniczo różni technologię Swype od staruszki T9 jest sposób wprowadzania kolejnych znaków. Nie ma potrzeby wprowadzania liter jedna po drugiej. Dane wejściowe są dostarczane za pomocą płynnego ruchu wskaźnikiem, kursorem, palcem po klawiaturze. Oprogramowanie określa i dopasowuje najlepszą ścieżkę przejścia urządzenia wskazującego i dopasowywuje, które znaki mogłyby być wprowadzone. Na tej podstawie, już podobnie jak w słowniku T9, oprogramowanie proponuje najlepiej dopasowane słowa do podanych liter.

Wszystko wygląda dosyć ciekawie i interesująco. Widzę tylko jedno ale. Mianowicie klawiatury, dopasowane do technologii Swype powinny być wąskie, zaś pewne znaki powinny być połączone w jeden klawisz. Powodem takiego sposobu rozwiązania problemu (o ile dobrze się domyślam), jest minimalizacja potencjalnych błędów przy korzystaniu z przeciwlegle znajdujących się znaków. Dobrym przykładem jest próba wyobrażenia sobie wprowadzenia za pomocą takiego interfejsu słowa this na normalnej klawiaturze od komputera.

Niemniej jednak pomysł wydaje mi się bardzo ciekawy. Pytanie tylko, co z usprawnieniem sposobu wprowadzania nowych niestandardowych słów (np. bez polskich znaków) lub pisaniem bez znaków interpunkcyjnych i białych? O ile drugi problem jest do obejścia (niższe ceny za SMS-a), to pisanie bez znaków ortograficznych wydaje mi się ciężkie do pozbycia. Ilu z Was pisze choćby na GG lub forach poprawna polszczyzną? A co z młodymi, którzy już przywykli do takiego wyrażania się w Internecie?

Poniżej macie możliwość obejrzeć kilka ciekawych screenshotów o technologii Swype. Zachęcam do syskusji!

Prosta wersja interfejsu Swype (źródło: www.swypeinc.com)

Zaawansowana wersja interfejsu Swype (źródło: www.swypeinc.com)

Numeryczna wersja interfejsu Swype (źródło: www.swypeinc.com)

Klawatura edycji (źródło: www.swypeinc.com)

Oraz video:

Warto odwiedzić:

• www.swypeinc.com – strona główna projektu