Projektowanie i prototypowanie

Poznaj zasady tworzenia landing page

Kategoria: E-marketing, Projektowanie i prototypowanie, użyteczność WWW. Opublikowano Wrzesień 20th, 2009 przez Mariusz Dziechciaronek – 2 komentarzy

Kilka słów na sam początek

Każda strona w naszym serwisie może być landing page. Nie wiemy skąd użytkownik przyszedł, ani w jakie wyniki wyszukiwania klikał. LP to nie tylko specjalnie zaprojektowane strony, to również linki do podkategorii oraz linki prowadzące na stronę główną. LP to element procesu, za pomocą którego chcemy aby użytkownik dokonał zakupu (wykonał określoną akcję na stronie: zapisanie się do newslettera, pobranie darmowych materiałów, itp.).

Nie istnieje coś takiego jak idealna LP dla każdego biznesu – każdy serwis ma innych użytkowników i różną specyfikę. To użytkownicy są najlepszymi ekspertami w ocenie twojego serwisu – jeśli im się nie spodoba, to odejdą do konkurencji.

Najważniejsza rola LP to zapewnienie przepływu użytkownika (flow) od reklamy, do wykonania określonej akcji na stronie (np. zakupu). LP musi odzwierciedlać potrzeby użytkowników i być do nich dostosowana. Zatem, dobra LP to taka która jest ciągle badana, testowana i ulepszana. Do tego celu wykorzystujemy dane statystyczne np. z Google Analitycs, oraz prowadzimy jakościowe testy z użytkownikami z naszej grupy docelowej.
read more »

Jak zaprojektować dostępną stronę www – świetna książka za darmo!

Kategoria: Dostępność, Projektowanie i prototypowanie, Publikacje, użyteczność WWW. Opublikowano Lipiec 6th, 2009 przez Marek Goliasz – Skomentuj ten wpis jako pierwszy

Obraz przedstawiający zamkniętą na klucz bramę Użyteczna strona to jeszcze nie wszystko.  Pamiętaj,  że wśród odwiedzających Twoje witryny mogą znaleźć się także osoby z deficytami poznawczymi. Czy zastanawiałeś się kiedyś jak niewidomy lub niedowidzący człowiek surfuje w Internecie? Stosuje programy odczytujące zawartość stron lub w przypadku mniejszych wad powiększa tekst.  Gdy tworzysz stronę możesz zapytać, ale jak mam kodować, by strona była dostępna?

Zachęcam Cię do zapoznania się z dostępną za darmo książką Marka Pilgrima:

Książka Marka Pilgrima nie tylko stanowi wykład o tym jak powinna wyglądać dostępna strona, ale podaje również wskazówki jak tego dokonać z punktu widzenia kodu. W bardzo przystępny sposób opisane w niej zostały ograniczenia jakie może napotkać osoba niepełnosprawna korzystająca z Internetu. Siła tej książki polega na tym, że każdy problem związany z dostępnością został przedstawiony z pozycji użytkowników borykających się z różnymi rodzajami niepełnosparwności. Książkę polecam w zasadzie wszystkim zainteresowanym budowaniem stron www.

Sposoby na tańsze projektowanie

Kategoria: Projektowanie i prototypowanie, użyteczność WWW. Opublikowano Lipiec 4th, 2009 przez Marek Goliasz – Skomentuj ten wpis jako pierwszy

Przerażone oko kobiety o blond włosach Projektujesz stronę www. Twój klient chce, aby była maksymalnie wypakowana funkcjonalnością, a jednocześnie prosta w użyciu. Zapraszasz osoby do badań. Czy, jak radzi Nielsen wystarczy zaprosić pięciu, aby znaleźć 75% błędów na stronie? W metodologii badań psychologicznych uważa się, że dopiero 30 osób daje statystycznie istotny wynik. Ze względu na koszty i problemy organizacyjne nikt nie przeprowadzi takiego badania! W jaki sposób możesz uniknąć wysokich kosztów badań, a jednocześnie projektować użyteczne interfejsy?

Skorzystaj z tego, co oferuje kognitywistyka. Wiedząc o tym co przyciąga naszą uwagę, łatwiej będzie Tobie zaplanować układ strony. Gdy poznasz reguły rządzące percepcją, Twoje projekty już na etapie prototypów będą bardziej intuicyjne. Zaczynamy?

Pierwsze wrażenie

Badania eyetrackingowe pokazują, że nie czytamy stron internetowych, a jedynie omiatamy je wzrokiem. Użytkownik nie czyta długich tekstów, a jego wzrok skacze między wszystkimi elementami, które wyglądają na dające się kliknąć. Innym bodźcem, na który natychmiast reagujemy jest ludzka twarz. Jest to szczególnie istotne przy projektowaniu głównej strony Twojej kreacji. Tekst jest czymś jednolitym, a uwaga wzrokowa wyewoluowała do wyszukiwania odmienności. Czy to znaczy, że w ogóle nie czytamy treści? Nie do końca. Wyszukujemy na niej to, co wiąże się z naszymi aktualnymi planami, oczekiwaniami, celem, z tórym weszliśmy na stronę i emocjami. Tak właśnie działa percepcja. To co widzisz nie jest kopią świata zewnętrznego. Wybitny neurobiolog-kognitywista V. Ramachandran, pisze, że to, co widzimy jest najbardziej prawdopodobną halucynacją (zainteresowanych odsyłam do artykułu Trzy prawa qualiów).

Pozwól więc użytkownikowi zawiesić wzrok na tym, co chcesz przekazać – wystarczą do tego:

  • pogrubienia
  • wypunktowania
  • nagłówki

Obraz znaczy więcej niż tysiąc słów

Zobacz na ile sposobów możesz przekazać swoje idee.W psychologii kognitywnej potwierdzono efekt wyższości obrazu nad słowem. Chociaż użycie słów ma potencjalnie większe możliwości w zakresie kodowania informacji, kodowanie obrazowe bardziej sprzyja
zapamiętywaniu.

Metody na przedstwienie różnych metod wizualizacji w postaci układu okresowego pierwiastków

Metody na przedstwienie różnych metod wizualizacji w postaci układu okresowego pierwiastków

Spostrzeganie

Zasady wizualnej organizacji danych

Zasady wizualnej organizacji danych

Czy zwrot “teoria z początku XX w.” wywołuje w Tobie grozę? Chcę Tobie pokazać jak stara teoria percepcji Gestalt pomoże Ci kreować nowoczesne witryny.Niemieccy psychologowie znaleźli kilka zasad, które rządzą naszym spostreganiem.

  • bliskość – Spójrz na obrazek powyżej. W mgnieniu oka łączysz kropki będące blisko siebie w pary, prawda?
  • podobieństwo – Możesz łatwo zastosować do wizualizacji wszlkiego typu. Jeśli chcesz pokazać, że dwie rzeczy są ze sobą związane upodobnij je do siebie. To, co jest inne- odróżni kolorem, wielkością, czcionką itp.
  • domknięcie – nasza wiedza o otoczeniu sprawia, że umysł dorabia naszym spostrzeżeniom, to czego na nich nie ma. Od dziecka poruszamy się w trójwymiarowym świecie, więc spontanicznie dostrzegamy całe obiekty.
  • wspólna droga -widzimy dwie przecinające się linie, a nie cztery “wąsy”

Uwaga

Uwaga pozwala nam wydobyć z otoczenia to, co najważniejsze. Ma jednak swoje ograniczenia. Pisałem już o bodźcach, które przyciągają uwagę. Warto zapoznać się także z polecaną na blogu Symetrii książką Orienting of Attention. A teraz krótki i prosty eksperyment.

Policz wszystkie rzuty zawodników w czarnych koszulkach

Prawie nikt nie spostrzega, że w środku rozgrywki po srodku boiska przechadza się dziewczyna z kapeluszem. Nie wierzysz? Obejrzyj film jeszcze raz. Wystarczy, że będziemy na czymś mocno skupieniu, a nawet bardzo wyróżniające się bodźce nie przedrą się do naszej świadomości.

Podejmowanie decyzji

Dokonujesz ogromnej ilości wyborów, dysponując niepełną bądź niepewną informacją. Jak to się dzieje, że te decyzje najczęściej są trafne? Przede wszystkim stoi za nimi ogromne doświadczenie zebrane w ciągu rozwoju. Stanowi ono Twoją wiedzę utajoną. Podejmując decyzje (szczególnie typu kliknąć/nie kliknąć ;) nie rozważasz wszystkich za i przeciw. Pomyśl ile czasu by Ci to zajęło. Ludzie z reguły zadowalają się pierwszym, możliwym rozwiązaniem.

To tylko krótki przegląd tego, co nauki poznawcze mogą zaoferować projektantom interfejsu. Zapraszam do częstych odwiedzin tego bloga, a dowiesz się jeszcze więcej!

Linki zewnętrzne:

Sortowanie kart

Kategoria: Projektowanie i prototypowanie. Opublikowano Lipiec 1st, 2009 przez Marek Goliasz – Skomentuj ten wpis jako pierwszy

Rysunek z książki D. Spencer przedstawiający predefinowane kategorie w procesie card sortingu Sortowanie kart to metoda ujawniająca jak użytkownicy kategoryzują informację stosowaną na stronie internetowej, w aplikacji czy intranecie – tematy, elementy nawigacji, tytuły podstron itp. Zadaniem osób badanych jest pogrupowanie tych pojęć w struktury. Następnie poszukuje się w tak otrzymanych danych powtarzających się wzorców. Pozwala to na dostosowanie układu podstron i
etykiet menu do oczekiwań grupy docelowej. Sortowanie kart można przeprowadzić korzystając z arkuszy papieru, na których badani przyklejają etykiety lub za pomocą specjalnego oprogramowania.

Technika sortowania kart wywodzi się z badań psychologii kognitywnej, a przyswojona została przez metodologię User-Centered Design. Główną ideą sortowania kart jest zebranie danych koniecznych do tego, by kluczowe informacje były szybko i łatwo znajdowalne. Jest to metoda stosowana najczęściej przy projektowaniu nowych stron internetowych Pozwala dowiedzieć się jak
przyszli odbiorcy nazywają ważne elementy treści strony internetowej i jakie zależności widzą
między nimi.

Metody sortowania kart

Wyróżnia się trzy odmiany sortowania kart:

  • sortowanie otwarte (ang. open sorting)
  • sortowanie zamknięte (ang. closed sorting lub tree sorting)
  • lista otwarta (ang. open list)

Podczas sortowania otwartego uczestnicy otrzymują przygotowane karty. Na jednej stronie oprócz zdefiniowanych wcześniej nazw mogą znajdować się także elementy graficzne np. ikony. Po drugiej natomiast można zamieścić dodatkowe objaśnienia. Prowadzący prosi uczestników o posegregowanie kart i nadanie nazw tak powstałym grupom. Jest to technika przydatna przy
projektowaniu nowych stron lub aplikacji.

W technice sortowania zamkniętego zadanie badanych jest podobne jak w sortowaniu otwartym, jednak dodatkowo karty należy ułożyć wg hierarchii w uprzednio zdefiniowanych przez prowadzącego kategoriach. Metoda ta jest użyteczna w przypadku dodawania treści do już istniejącej witryny lub jako dodatkowa informacja po wcześniejszej analizie wyników sortowania
otwartego.

Linki wewnętrzne: