Strona główna » Wzorce projektowe

Czysta karta, czyli jak wspierać nowicjuszy

5 lipca 2011 napisała Iga [ 4 odpowiedzi ] Drukuj wpis

Każdy serwis musi być projektowany z myślą zarówno o nowych użytkownikach, jak i tych powracających. Jest to o tyle trudne zadanie, że inaczej projektuje się dla intuicyjności (która jest najważniejsza dla nowicjuszy), a inaczej dla efektywności użycia (która nabiera znaczenia dla ekspertów). W przypadku serwisów tworzonych z myślą o ekspertach trzeba pamiętać o szybkiej nawigacji, zaawansowanych treściach czy budowaniu zaangażowania, co podkreślała Ewa w swoim artykule. A na co zwrócić uwagę tworząc dla nowych użytkowników?

Przede wszystkim trzeba pamiętać o pierwszym kontakcie, kiedy użytkownik nie wie jeszcze w jaki sposób skorzystać z wachlarza możliwości funkcjonalnych. Jest to szczególnie istotne w przypadku rozbudowanych aplikacji, które docelowo mają być używane właśnie przez ekspertów. Przydadzą się wtedy:

Przewodniki

Pokazują najważniejsze działania w danym serwisie. Mogą to być filmy wideo (screencasty) lub zrzuty ekranu, pokazujące kolejne kroki wykonywania czynności. Warto pamiętać o tym, że użytkownicy nie lubią czytać i znacznie chętniej spojrzą na obrazki. Dlatego zamiast bloku tekstu znacznie lepiej sprawdzi się przewodnik w stylu CNET.

Przewodniki powinny być zebrane i dostępne w jednym miejscu (jak na stronie inFakt), ale warto też kierować do nich kontekstowo (np. przy edycji jakiegoś elementu promować film instruktażowy dla edycji), tak jak robi to Squarespace.

 

cnet.com

Przewodnik z wizualizacją - cnet.com

Squarespace.com

Instruktażowy film video - Squarespace.com

Infakt.pl

Instruktażowy film video - Infakt.pl

Kolejne kroki

Krokowe przedstawienie procesu przyda się nie tylko przy formularzu rejestracyjnym (jak na digg.com), ale także jako wskazówka tego, ile czynności wykonaliśmy już w serwisie, a ile jeszcze możemy wykonać (zob. Flickr). Pozwala też zorientować się szybko, do czego służy aplikacja (widoczne np. na vix.com). Trzeba pamiętać o wyraźnym odróżnieniu kroków, które już wykonaliśmy od tych, które jeszcze przed nami.

 

Vix.com

Krokowe przedstawienie możliwości aplikacji - Vix.com

Flickr.com

Kroki początkującego użytkownika - Flickr.com

Digg.com

Kroki procesu rejestracji - Digg.com

Vimeo.com

Lista akcji do wykonania w serwisie - Vimeo.com

Kontekstowa pomoc

Bardzo przydatna, nie tylko dla nowych użytkowników, będzie kontekstowo wyświetlana pomoc. Mogą to być dodatkowe wytyczne, wyjaśnienia trudnych terminów, czy dodatkowe informacje o funkcjonalności. Te krótkie i istotne (jak bezpieczeństwo danych) mogą być prezentowane od razu lub pojawiać się automatycznie (np. po kliknięciu w dane pole formularza, jak robi to onsugar.com). Te bardziej skomplikowane i nie zawsze potrzebne powinny się pojawić dopiero po akcji użytkownika. Konwencją są tu znaki zapytania, które po najechaniu lub kliknięciu wyświetlają dodatkowe informacje (na GetResponse czy Facebooku).

 

Wufoo.com

Kontekstowa pomoc w formularzu rejestracji - Wufoo.com

Onsugar.com

Dynamiczna kontekstowa pomoc - Onsugar.com

GetResponse.pl

Dodatkowa pomoc po kliknięciu przez użytkownika - GetResponse.pl

Facebook.com

Dodatkowa pomoc po kliknięciu przez użytkownika - Facebook.com

Przykładowe treści

Najłatwiej jest uczyć się obsługi systemu na przykładach, które często będą bardziej zrozumiałe niż nawet najlepiej sformułowany komunikat instruktażowy. Warto prezentować przykładowe treści dla pól formularza (jak robi to Google Places dla adresów URL filmów wideo). Dobrym pomysłem jest także pokazywanie przykładu wypełnionego profilu czy projektu, jak robi to invision.

 

Google.com/Places

Przykład treści przy polu formularza - Google.com/Places

Ugotuj.to

Przykładowe frazy wyszukiwania - Ugotuj.to

InvisionApp.com

Przykładowy projekt - InvisionApp.com

Wskazówki czyli tips and tricks

W przypadku bardziej rozbudowanych aplikacji, warto informować o  nich użytkownika w kontekście innych interakcji. Dzięki takim wskazówkom, wyróżnionym dodatkową ikoną czy delikatną grafiką, użytkownicy będą uczyć się zaawansowanych akcji mimochodem i przy okazji. Podobny mechanizm z powodzeniem jest z resztą wykorzystywany w grach, które na ekranach z ładowaniem się kolejnego etapu prezentują wskazówki odnośnie rozgrywki i interfejsu.

 

Google.com/Reader

Tips & tricks - Google.com/Reader

Czysta karta

Wszystkie wyżej opisane elementy warto brać pod uwagę przy projektowaniu „czystej karty”, czyli widoku aplikacji przed zapełnieniem jej treściami przez użytkownika. Taki ekran powinien sugerować możliwe kroki, uczyć, a także ułatwiać pierwsze działania.

Bardzo dobrze łączy różne elementy serwis GitHub (mamy proces, kolejne kroki, odnośniki do przewodników i to co najważniejsze – wyeksponowane punkty rozpoczynające dalszą interakcję z serwisem). QuoteBase informuje użytkownika, jak zapełnić daną sekcję aplikacji pokazując jednocześnie, jak będzie wyglądać strona już po zapełnieniu. Także Springpad wykorzystuje przykłady do nauczania użytkowników interfejsu (zob. My first notebook na zrzucie). Wix.com, Posterous i Notable stawiają na wyraźne przedstawienie możliwych działań w serwisie i wyróżnienie punktów rozpoczynających interakcję.

 

GitHub.com

GitHub.com

QuoteBase.com

QuoteBase.com

Springpadit.com

Springpadit.com

Wix.com

Wix.com

Posterous.com

Posterous.com

NotableApp.com

NotableApp.com

Autorka

Iga Mościchowska

www: http://witflow.com
Managing Partner i UX Director w firmie WitFlow. Z zamiłowania projektant interakcji i badacz użyteczności, z wykształcenia socjolog. Szkoli, wykłada na AGH, występuje na konferencjach branżowych. Pracowała m.in. dla marek: Amica, Agora, eBay Classifieds, Egmont, Maspex Wadowice, MSZ, Polskapresse, PWN.pl, Vattenfall, a także dla licznych startupów. Czytaj więcej
Tagi: , , , , ,
  • Marcin
  • http://witflow.com Iga

    @Marcin – dzięki za bardzo ciekawy przykład! :)

  • http://www.infakt.pl Wiktor Sarota

    Dzięki za podanie za przykład inFakt.pl
    Filmy instruktażowe od dzisiaj wyświetlane są również kontekstowo.

  • Emil

    Tablica.pl fajnie rozwiązała dodawanie ogłoszenia.
    Wchodząc w poszczególne pola otrzymuje się dymek z podpowiedzią:
    http://tablica.pl/nowe-ogloszenie/

    Podobnie w Synergian.pl przy dodawaniu usługi:
    https://synergian.pl/usluga/dodaj