Małe po-mocne słowa, czyli rola microcopy w projektowaniu interfejsów

Wszystkie ilustracje pochodzą ze strony icons8.com/ouch.

O roli małych po-mocnych słów opowiadałam pewnego zimowego wieczoru we Wrocławiu w ramach spotkania zorganizowanego przez UX/UI Space Wrocław. Teraz chciałabym opowiedzieć o tym również Tobie.

Popularne stwierdzenie, które słyszę najczęściej, to takie, że treści są mało ważne, że przecież nikt nie czyta w internecie. Czy to znaczy, że słowa są niepotrzebne?

Bynajmniej! Słowa to podstawa komunikacji. To dzięki nim porozumiewamy się ze sobą, unikamy nieporozumień, rozwiązujemy problemy. Bez słów skazani bylibyśmy na same domysły.

Słowa mają moc, a w kontekście interfejsów, mają moc szczególną: zwiększają zadowolenie, budują zaufanie, ułatwiają podejmowanie decyzji, usprawniają interakcję.

Chcesz się o tym przekonać? Czytaj dalej!


microcopy_2

To obco brzmiące słowo robi coraz większą karierę. Ukute kilka lat temu, wdarło się na salony. Używane jest w różnych kontekstach, rozumiane jest na różne sposoby. Znienawidzone przez jednych, miłowane przez innych. Ale co tak naprawdę znaczy?

Najlepiej będzie, jak zacznę od początku.


microcopy_3

W 2009 roku Joshua Porter opublikował artykuł, w którym po raz pierwszy użył terminu „microcopy”. artykule tym opisał pewną kłopotliwą sytuację z internetowym formularzem płatności.

Formularz zawierał jedno pole, które przysparzało problemów. Użytkownicy wprowadzali niepoprawny adres rozliczeniowy, co uniemożliwiało pomyślne zakończenie transakcji. Adres, który wprowadzali, był inny niż ten na karcie kredytowej.


microcopy_4

Rozwiązanie okazało się banalnie proste. Dodanie jednego zdania, bezpośrednio obok feralnego pola.

„Upewnij się, że wprowadzony adres rozliczeniowy jest taki sam, jak adres przypisany do Twojej karty kredytowej”.

Po dodaniu tej jednej, krótkiej informacji błędy zniknęły, jak za dotknięciem magicznej różdżki. Joshua zrozumiał, że tego typu treści muszą stać się nieodzownym elementem interfejsu, i że mają one wielką moc.


microcopy_5

Ile osób, tyle interpretacji terminu „microcopy”. Jedni uważają, że są to tylko te treści, które oddają charakter marki. Inni, że są to tylko te zabawne sformułowania, które wywołują uśmiech na twarzy użytkownika. A jeszcze inni, że głównym celem „microcopy” jest zwiększanie zadowolenia użytkowników i budowanie wśród nich zaufania. 

Ja myślę o „microcopy” jak o słowach, które: prowadzą użytkownika przez interfejs, pomagają w chwili zawahania, uspokajają w stresujących sytuacjach oraz motywują do działania.

Jest to dla mnie taki element interfejsu, który wprowadza do niego czynnik ludzki. Jest namiastką rozmowy z drugim człowiekiem.


microcopy_6
Jak w przykładzie z formularzem, okazuje się, że zaledwie kilka słów może mieć olbrzymi wpływ na to, czy użytkownik zderzy się ze ścianą czy odniesie sukces.

Te kilka słów potrafi przemienić frustrującą sytuację w przyjemne doświadczenie, zwiększyć użyteczność i zaangażować.

Jednak żeby magia „microcopy” zadziałała, należy przestrzegać kilku zasad, które znajdziesz poniżej.


microcopy_7

Zasada nr 1

„Odpowiednie słowa, w odpowiednim miejscu, w odpowiednim czasie”

Musisz wiedzieć: co, gdzie i kiedy powiedzieć.

Odpowiednio dobrane słowa zadziałają idealnie: pomogą użytkownikowi podjąć świadomą decyzję, wykonać zadania szybciej, bez frustracji, bez szukania odpowiedzi w Google’u.

Pewnie zastanawiasz się, skąd masz wziąć odpowiedzi na te trzy pytania. Jest na to kilka sposobów.

Po pierwsze, sprawdź, gdzie w interfejsie mogą wystąpić przeszkody: opóźnienia, niezrozumienia, nieporozumienia, wątpliwości, gdzie użytkownik zatrzyma się, by myśleć, co ma zrobić.

Po drugie, przeprowadź badania z użytkownikiem. Zobacz, z czym ma trudności, gdzie potrzebuje wyjaśnienia, a gdzie podpowiedzi.

Po trzecie, użyj narzędzi do analityki i sprawdź, jak użytkownicy korzystają z Twojego produktu.

Nie musisz od razu stosować tych wszystkich trzech sposobów na raz. Skorzystaj z jednego z nich. Z tego, który jest dla Ciebie najbardziej odpowiedni w danej chwili.


microcopy_8

Zasada nr 2

„Nic nie jest tak bezpośrednie jak słowa”

Wiele osób uważa, że słowa zaśmiecają interfejs, wydłużają formularz, przeszkadzają. Są one jednak podstawą komunikacji międzyludzkiej. Oczywiście, możemy komunikować się bez słów, na przykład używając tylko emotikonów, ale czy będzie to optymalna komunikacja? W to wątpię.


microcopy_9

Zasada nr 3

„Jakby ktoś obok pokazywał Ci, co i jak zrobić”

Podpowiedzi, treści w dymkach, wyjaśnienia, wszystko to przypomina rozmowę. Na przykład taką, jaką możesz prowadzić z kimś, kto pomaga Ci wypełnić PIT-a. Czasami Twój rozmówca może zażartować, czasami musi być bardziej szczegółowy z wyjaśnieniami, czasami potrzebna jest tylko prosta podpowiedź.

„Microcopy” to taki Twój asystent. Z taką pomocą jesteś w stanie zrobić więcej. Zaufać bardziej. A nawet dać się przekonać.


microcopy_10

Zasada nr 4

„To jak mówisz i piszesz, pokazuje, kim jesteś”

„Microcopy” umożliwia pokazanie charakteru Twojego produktu. Wyróżnia go spośród wielu innych, mających ten sam cel.

Aby tworzyć treści w określonym stylu, najpierw ważne jest stworzenie tzw. Voice and Tone, czyli głosu Twojego produktu. Dzięki temu uzyskujesz produkt, który mówi w spójny sposób, a zaufanie do niego się zwiększa.


microcopy_11

Zasada nr 5

„Tylko wtedy, kiedy musisz i tak zwięźle, jak możesz”

Wspomniałam już o tym, że trzeba wiedzieć, kiedy treści są potrzebne. Należy też pamiętać o tym, że zadziałają one najlepiej, kiedy będą krótkie.

Mów tylko to, co jest krytyczne w danej chwili, prostym językiem. Wszelkie dodatkowe informacje są również ważne, ale drugoplanowe, zachowaj je do dymka. Pamiętaj, żeby zabawne treści zarezerwować na potrzeby budowania zaangażowania. Bądź rzeczowy, gdy do wykonania są czynności.


microcopy_example

Na koniec chciałabym Ci pokazać przykład dobrze przemyślanych treści. W tym celu przyjrzałam się aplikacji ING Banku Śląskiego.

Korzystam z tej aplikacji każdego dnia. Za każdym razem zaskakuje mnie ona tym, jak nieprzyjemne dla mnie doświadczenie wydawania pieniędzy zostało przekute w jedno z całkiem przyjemnych, a przede wszystkim łatwych czynności.


microcopy_example2

W przykładzie skupiłam się na ścieżce wykonywania transakcji. Rolę małych po-mocnych słów pełnią tutaj wszystkie podpowiedzi: „Z”, „Na”, „Szukaj w historii i odbiorcach”, jak również dymek „Wyszukaj odbiorcę lub wybierz typ transakcji”.

Wszystkie podpowiedzi są potrzebne, by wykonać transakcję w miarę jak najszybciej i bezproblemowo.


microcopy_example3

W kolejnym kroku „microcopy” jest nawet mniej zauważalne. Mamy: „PLN”, które podpowiada Ci, w jakiej walucie masz podać kwotę; „0/140” subtelnie informuje Cię o limicie liczby słów; dzięki „Standardowy (za 0 PLN)” wiesz, że nic nie zapłacisz za tę transakcję.


micrcopy_example5

Po wybraniu „Stałego zlecenia” pojawia się dalszy ciąg formularza. Idealną podpowiedzią, która odpowiada na ewentualne pytanie, jest „Transakcja realizowana 7 dnia miesiąca” z dynamicznie zmieniającą się datą.

Nie pozostaje nic innego, jak kliknąć dalej i zakończyć transakcję. Proste? Proste!  


microcopy_koniec

Na koniec mam dla Ciebie jeszcze takie dwie małe wskazówki:

  1. Jeśli do wyjaśnienia czegoś potrzebujesz dużej liczby słów, sprawdź swój UX.
  2. Nie wyjaśniaj oczywistości.

Masz pytania?
Napisz do mnie!


Podczas przygotowywania artykułu korzystałam z:

Książki Microcopy. The Complete Guide autorstwa Kinneret Yifrah

Artykułu Writing Microcopy autorstwa Joshui Portera

Prezentacji Microcopy: How to write small, deadly copy for all occasions” autorstwa Joshui Portera


Dodatkowo zachęcam do przeczytania:

UI Copy: UX Guidelines for Command Names and Keyboard Shortcuts

How just one word can change your conversion

No Good, Very Bad UX Writing Mistakes

The Importance of Copy in UX

Copywriting in UI. Words that Make Design Go Round


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s