...

BRIEF dociera do polskich firm i ich pracowników – do wszystkich tych, którzy poszukują inspiracji w biznesie i oczekują informacji o ludziach, trendach i ideach.

Skontaktuj się z nami

Jak projektować użyteczne produkty cyfrowe wykorzystując dwie zasady psychologii poznawczej

Pamięć jest krótka i decydująca

Pamięć składa się m. in. z pamięci długotrwałej, sensorycznej i krótkotrwałej. Każda z nich różni się tym, jak długo przechowuje informacje. Pamięć krótkotrwała (ang. short-term memory) jest tzw. pamięcią roboczą i gromadzi niewielkie ilości danych werbalnych i niewerbalnych. Jest ona związana ze skupioną uwagą i przetwarza bieżące informacje, które są pierwszym etapem ich utrwalania w pamięci długotrwałej.

Dlaczego pamięć krótkotrwała jest kluczowa w przypadku projektowania interfejsów? Ponieważ to właśnie ją użytkownik wykorzystuje przy interakcji z produktami. Według George’a Millera człowiek potrafi rozróżnić bezpośrednio 7 informacji naraz, co oznacza, że jesteśmy w stanie zapamiętać jednocześnie około 7 (+/-2) elementów. Dodatkowo pamięć sensoryczna przechwytując informacje, przekazuje je do magazynu pamięci krótkotrwałej. Warto tutaj zwrócić uwagę, że dla wrażeń wzrokowych, dane są przechowywane przez 0,5 sekundy, a pojemność pamięci krótkotrwałej wynosi 30-40 sekund.

Dlatego w projektowaniu interfejsów należy unikać jakichkolwiek elementów rozpraszających uwagę użytkownika, ponieważ po około 20 sekundach informacje znikają. Niekorzystna jest także sytuacja, w której użytkownik musi coś przepisać lub zapamiętać z poprzedniej strony czy zakładki, żeby zrealizował swój cel.
Pamięci krótkotrwałej używamy do zapamiętania imienia nowo poznanej osoby lub numeru telefonu. Dlatego łatwiej zapamiętać np. numer składający się z 3 grup złożonych z cyfr (XXX-XXX-XXX), niż długi ciąg wszystkich 9. Projektując menu lub zakładki zastosujmy optymalną ilość pozycji, czyli od 5 do 9. Oczywiście nie musimy się zawsze ograniczać do 7, ważne jest, aby użytkownicy rozpoznawali pozycje, zamiast je zapamiętywać.
Dobrą praktyką jest wykorzystanie podpisanych obrazków czy ikonek, ponieważ obrazki zapamiętujemy łatwiej niż słowa. Podobnie, według efektu pozycji szeregowej, lepiej zapamiętujemy pierwszy i ostatni element. Pierwszy ze względu na pamięć długotrwałą, a ostatni na krótkotrwałą, natomiast elementy umieszczone pomiędzy nie są już tak łatwo zapamiętywane. Takie działanie można zastosować do wyróżnienia produktów na stronie sklepu. Tak jest np. w OLX, gdzie wyróżnione ogłoszenia są jako pierwsze na liście lub w nawigacji serwisów, czy grupowaniu elementów.

OLX ogloszenia

Warto także pamiętać o informacji zwrotnej, a raczej o czasie oczekiwania przez użytkownika na odpowiedź lub jej przetworzenie (np. splash screen). Powinniśmy ładować informację lub kolejną stronę tak szybko, jak to tylko możliwe, zanim użytkownik zapomni, co robił. Innym rozwiązaniem może być zmiana koloru klikniętego hiperłącza lub wyszarzenie na liście produktu czy artykułu, którego szczegóły zostały już przejrzane. Dzięki temu użytkownik od razu będzie widział, w co nie klikać ponownie.

Innym przykładem może być wykorzystanie placeholderów w polach input. Jeżeli zaprojektujemy nasze formularze z polami do uzupełnienia tak, że placeholder znika gdy w polu jest kursor, a nie zastosujemy np. etykiety dla takiego pola, to użytkownik może zapomnieć jakie dane miały być wpisane w tym polu. Dlatego zawsze warto zostawić etykietę dla pól, żeby użytkownik nie musiał wychodzić z tego pola, żeby upewnić się, jakie informacje powinny zostać tam wpisane.

formularz wersja
Rys. 1. Jakich pól unikać (opracowanie własne

 

formularz wersja 2
Rys.2. Przykład jak zaprojektować etykiety

 

Nie wszystko na raz

Obciążenie poznawcze (ang. Cognitive Load Theory / CLT) to kolejne pojęcie, o którym trzeba pamiętać, w czasie projektowania interfejsów. Podobnie jak ograniczona jest pamięć krótkotrwała, tak samo jest z mocą obliczeniową naszego mózgu. Obciążenie poznawcze jest związane z ilością informacji, które pamięć robocza może przechowywać jednocześnie. Pamięć sensoryczna odfiltrowuje większość docierających do nas informacji, ale zachowuje najważniejsze elementy na tyle długo, aby mogły przejść do pamięci roboczej. Oznacza to, że w czasie wykonywania jakiejś czynności, np. rzucanie lotką, nasza pamięć sensoryczna odrzuca informacje z otoczenia, takie jak hałasy, zapachy, inni ludzie i skupia się tylko na lotce. Informacje z pamięci sensorycznej przechodzą do pamięci roboczej, gdzie są przetwarzane lub odrzucane.

Warto przypomnieć, że pamięć robocza może przechowywać około 5-9 elementów w danym momencie i ma to ogromny związek z obciążeniem poznawczym. Mózg przetwarzając informacje, kategoryzuje je i przenosi do pamięci długotrwałej, gdzie są one przechowywane w strukturach wiedzy zwanych „schematami”. Porządkują informacje zgodnie ze sposobem ich wykorzystania, np. schematy dla różnych pojęć, takich jak pies, kot, ssak czy zwierzę. Mamy również schematy behawioralne, jak np. jazda na rowerze.

Według Johna Swelle’a obciążenie poznawcze odnosi się do ilości informacji, jaką pamięć robocza może pomieścić w jednym czasie. Inaczej mówiąc, termin opisuje wysiłek umysłowy wymagany do przyswojenia nowych danych. Dlaczego ta informacja jest ważna dla projektowania interfejsów? Bo chociaż np. przeglądanie stron internetowych nie wymaga wysiłku, jak uczenie się, to jednak użytkownicy muszą nauczyć się korzystania z danego serwisu, np. działania nawigacji. Obciążenie poznawcze dotyczy także ograniczeń i wymagań bezpośrednio wynikających z celu użytkownika, np. na stronie sklepu jest to cena czy rozmiar produktu.

Im łatwiej, tym lepiej

Projektując nawigację warto wykorzystać np. sortowanie kart, aby usprawnić użytkownikom znajdowanie odpowiednich informacji we właściwym miejscu. Unikać nadmiernej ilości rozpraszaczy, jak np. grafiki niepowiązane z treścią. Należy uważać także na paraliż wyborczy, wykoszystując zbyt wiele hiperlinków, obrazków czy przycisków. Im więcej wyborów przedstawimy użytkownikowi, tym dłużej zajmie mu podjęcie decyzji i tym większe obciążenie poznawcze odczuwa przy podejmowaniu decyzji.

Dlatego opracowując propozycje rozwiązań, najlepiej jest skupić się na nie więcej niż 2 opcjach do wyboru. Stosując ikonografikę, starajmy się, aby była ona czytelna i zrozumiała. W przeciwnym razie mogą być one uciążliwe dla użytkownika, co najlepiej obrazują ostatnie zmiany w tym zakresie wprowadzone przez Google dla swoich produktów, które obiegły internet jako mem. Przykład ten może powodować problemy z przeciążeniem poznawczym, a dodatkowo jego design jest bardzo problematyczny dla osób z pewnymi niepełnosprawnościami wzroku – zwyczajnie nie będą oni w stanie rozróżnić tych ikonografik.

ikonografiki Google

Po linii najmniejszego oporu

Psychologia behawioralna pomaga projektować produkty, które minimalizują obciążenie poznawcze oraz unikają złożonego procesu analizowania i podejmowania decyzji. Użytkownicy nie szukają optymalnego rozwiązania jakiegoś problemu, tylko zadowalają się pierwszym „dobrym” rozwiązaniem – ważne aby minimalizowało obciążenie kognitywne. Dlatego starajmy się wykorzystać proste zasady i zależności, żeby ułatwić im wykonanie zadania w interakcji z naszymi produktami, bez nadwyrężania pamięci krótkotrwałej i obciążenia poznawczego.


Autorka:

Katarzyna Suwała, UX designer w ITMAGINATION

 

Brief.pl - jedno z najważniejszych polskich mediów z obszaru marketingu, biznesu i nowych technologii. Wydawca Brief.pl, organizator Rankingu 50 Kreatywnych Ludzi w Biznesie.

BRIEF

Architektura informacji w projektowaniu interfejsów

ux design

Dobra architektura informacji pomaga użytkownikowi

Odpowiednio zaprojektowana architektura informacji wspiera użytkowników w ich interakcji z witryną webową lub aplikacją. Eliminuje ona zagubienie i ułatwia odnalezienie odpowiednich treści. Z punktu widzenia projektanta, istotne jest, aby dowiedzieć się w jaki sposób aplikacja lub witryna działa z perspektywy użytkownika oraz jak uporządkować informacje w czytelny sposób. Innymi słowy – najważniejszymi aspektami przy tworzeniu IA są miejsca, w których poszczególne elementy architektury są rozmieszczone, jak są oznaczone i wyświetlane.

W trakcie projektowania IA należy pamiętać, że ludzie przetwarzają nowe wiadomości w określony sposób. Nie lubią zbyt wielu informacji na raz, więc przy projektowaniu należy pamiętać o krótkich fragmentach treści. Ważne są także wzorce. Ludzie klasyfikują rzeczy i warto wziąć to pod uwagę np. przy projektowaniu sposobu wyświetlania listy kategorii.

Ważne jest, aby pamiętać, że użytkownicy zawsze powinni wiedzieć, w którym miejscu serwisu się znajdują. Bez względu na to jak dostali się do danego ekranu, muszą mieć świadomość logiki w strukturze serwisu. Taką role spełniają tzw. okruszki, które nie tylko pomagają wrócić do kategorii głównej, ale również informują gdzie jest użytkownik, jeżeli znalazł się w serwisie dzięki stronom zewnętrznym.

Architektura informacji = komponenty

IA składa się z kilku komponentów, które zostały opracowane przez pionierów tej dziedziny – Louisa Rosenfelda i Petara Morville’a. Przedstawili je w przełomowej książce ich autorstwa „Architektura informacji dla sieci WWW”. Komponenty te to systemy, które określają różne sposoby organizowania i wyszukiwania treści przez użytkownika. Znajdziemy wśród nich .in.:

  1. Struktury hierarchiczne – struktury drzewiaste. Oznacza to, że szerokie kategorie pojawiają się u góry, a mniejsze podkategorie niżej. Informacje wizualne wyświetlają się w odpowiedniej kolejności zgodnie z przekazywanymi informacjami.
  2. Struktury sekwencyjne – tworzą określoną ścieżkę użytkownika. Użytkownik musi wykonać pewne kroki i wyświetlane mu są tylko niezbędne w danym momencie informacje.
  3. Struktury macierzowe – pozwalają użytkownikowi wybrać sposób nawigacji, któremu należy zapewnić dostęp do wszystkich informacji w postaci przycisków czy linków.
  4. Struktury nawigacyjne – polegają na prostej nawigacji, która jednocześnie zawiera niezbędne informacje. Nawet jeżeli użytkownicy nie do końca wiedzą czego szukają, należy im zapewnić dojście do informacji poprzez agregowanie i kategoryzowanie treści, tworząc wiele przejść prowadzących w dowolne miejsce.

Architektura informacji niezbędnym elementem UX/UI Design

Architektura informacji jest kluczową częścią projektowania doświadczeń użytkownika. Poprawnie stworzona pomaga odbiorcom szybko i łatwo przeglądać treści oraz pozwala użytkownikom znaleźć poszukiwane informacje. Projektanci UX/UI muszą zadbać o strukturę treści tak, aby użytkownicy z łatwością znaleźli odpowiednie dla siebie wiadomości. Bardzo często projektanci udoskonalają architekturę informacji w istniejącym produkcie, jednak warto ją planować jeszcze zanim zacznie się projektowanie innych elementów. Oczywiście temat architektury informacji jest znacznie szerszy niż przedstawiony w tekście, który jest tylko wprowadzeniem do tego zagadnienia.


Źródło: Informacja prasowa ITMAGINATION Sp. z o.o.

Brief.pl - jedno z najważniejszych polskich mediów z obszaru marketingu, biznesu i nowych technologii. Wydawca Brief.pl, organizator Rankingu 50 Kreatywnych Ludzi w Biznesie.

BRIEF

6 najważniejszych zasad Gestalt w projektowaniu interfejsów

Gestalt

Zasada bliskości

Elementy, które znajdują się blisko siebie widziane są jako jedna grupa. Na poniższej grafice elementy tworzą trzy kolumny. Wystarczy jednak zmienić odległości między nimi i stworzyć wrażenie, że zamiast w kolumnach, ułożone są w trzech rzędach. Jedyne co się zmieniło to przestrzeń, która decyduje, że ludzki mózg łączy te obiekty w jedną grupę, mimo że nie mają one narysowanych granic. Podobnie jest z tekstem, gdy między akapitami nie ma przestrzeni. Odbieramy go jako całość, a dodanie akapitu między blokami tekstu spowoduje, że uznamy go jako coś odrębnego. Dlatego tak ważne jest odpowiednie umieszczenie komponentów w tworzeniu UI, aby użytkownik wiedział, które przynależą do danej grupy.

zasada bliskości
źródło: ITMAGINATION Sp. z o.o.

Jeżeli strona ma dużo światła (przestrzeni), użytkownikowi łatwiej przychodzi oddzielanie od siebie bloków informacyjnych. Taki efekt uzyskuje się również przez ułożenie elementów w określonym kształcie, ponieważ pozwala to grupować powiązane ze sobą elementy. Zasadę można wykorzystać w obszarze nawigacji (menu) na stronach internetowych – jej elementy są rozłożone blisko siebie, co automatycznie postrzega się jako cały zbiór odnośników do nawigacji na stronie.

Zasada podobieństwa

Według tej zasady uznaje się, że użytkownik grupuje obiekty, które są do siebie podobne pod względem koloru, kształtu czy faktury.

zasada podobieństwa
źródło: ITMAGINATION Sp. z o.o.

Zasadę podobieństwa większość projektantów stosuje na stronach internetowych oraz w aplikacjach dla przycisków lub innych elementów aktywnych. Dzięki podobieństwu sugerują, że działają w podobny sposób (np. hiperłącza w tekście mają inny kolor fontu i są podkreślone). Podobnie jest z takim samym rozmiarem fontów np. dla nagłówków. Dzięki temu użytkownicy szybko rozpoznają znaczenie określonych elementów. Ważna jest spójność. Zaprojektowane przyciski muszą wyglądać tak samo i być w identycznej kolejności jeżeli wywołują dokładnie taką samą akcję.

Zasada symetrii

Użytkownik interpretuje skomplikowane sceny tak, aby redukować ich złożoność. Np. gdy dwa symetryczne elementy są niepołączone, umysł percepcyjnie łączy je i tworzy spójny kształt. Symetryczne interfejsy pomagają szybciej skanować zawartość strony i łatwej rozpoznawać wzorce.

zasada symetrii
źródło: ITMAGINATION Sp. z o.o.

Zasada symetrii nadaje kompozycji elegancję. Warto wykorzystać ją do układu tekstów, wyrównania ich względem obrazów lub innych elementów graficznych.

Figura-tło

Zapewne większość z nas widziała grafikę ze złudzeniem optycznym, na której widać dwie głowy lub wazon. Ludzki mózg ma potrzebę odseparowania obiektów od otaczającego je tła, dlatego zasada figura-tło pozwala wyodrębnić samodzielny element z całości obrazu. Pierwszą rzeczą jakiej użytkownik doszukuje się w obrazach, to określenie co jest tematem, a co jedynie jej tłem.

figura-tło
źródło: ITMAGINATION Sp. z o.o.

Ta zasada pomaga odpowiednio skierować uwagę użytkownika i określa co jest kluczowe w danym widoku. Jej zadaniem jest podział uwagi odbiorcy na strategiczną figurę oraz mało istotne tło. Figura-tło jest bardzo często wykorzystywana w przypadku landing page – w centrum znajduje się hero image, formularz z CTA, który przekierowuje dalej. Bardzo popularne jest także odzwierciedlenie tej zasady w trendzie “negative space”, wykorzystywanym w projektowaniu logo (np. stacji telewizyjnej NBC).

Zasada dobrej kontynuacji (ciągłości)

Oko ludzkie zauważa linie utworzone z różnych lub takich samych obiektów. Elementy, które poprzez swoje ułożenie tworzą pewien kształt lub linię, postrzegamy jako całość. Nawet jeżeli różnią się one kształtem czy kolorem, to właśnie dzięki linii tak je widzimy.

Zasada dobrej kontynuacji
źródło: ITMAGINATION Sp. z o.o.

Zasada ciągłości pozwala nakierowywać uwagę użytkownika na kluczowe informacje lub miejsce na stronie dzięki poprowadzeniu wzroku użytkownika, np. w kolejne etapy procesu zakupowego czy wypełnienie formularza. W projektowaniu interfejsów zasadę dobrej kontynuacji warto zastosować w formie suwaków lub list. Obiekty umieszczone blisko siebie powodują, że wzrok „skacze” z jednego na drugi.

Zasada domknięcia

Gdy użytkownik patrzy na figury lub znaki, które są niekompletne lub ich wewnętrzna przestrzeń nie jest zamknięta, to mamy do czynienia z zasadą domknięcia. Ludzki mózg automatycznie próbuje wypełnić brakujące części znanymi obrazami.

zasada domknięcia
źródło: ITMAGINATION Sp. z o.o.

Jest to najczęściej wykorzystywany zabieg przy projektowaniu znaków graficznych i logo. Dzięki niemu nie muszą być szczegółowe ani dosłowne, a nadal pozostają zrozumiałe. Na powyższej grafice automatycznie dostrzegamy trzy koła i trójkąt, pomimo że w rzeczywistości jest tu kilka nieregularnych kształtów. Oznacza to, że widzimy kształty, których teoretycznie nie ma.

Gestalt nie tylko w UX i UI

Zasad Gestalt jest oczywiście więcej, ale sześć przedstawionych powyżej jest dla większości projektantów UX/UI podstawą w tworzeniu interfejsów i pozwalają podejmować świadome decyzje projektowe. Zapewne wielu użytkowników serwisów internetowych i aplikacji już stosuje niektóre z zasad Gestalt nawet o tym nie wiedząc, ponieważ robimy to nieświadomie. Jednak teoria przydaje się nie tylko do projektowania, ale także do testowania produktów – zawsze warto je skonfrontować z dobrymi zasadami tworzenia UX/UI.


Autorka:

Katarzyna Suwała, UX designer w ITMAGINATION

Brief.pl - jedno z najważniejszych polskich mediów z obszaru marketingu, biznesu i nowych technologii. Wydawca Brief.pl, organizator Rankingu 50 Kreatywnych Ludzi w Biznesie.

BRIEF

Algorytmy: granica między wirtualną a codzienną rzeczywistością została już dawno przekroczona

Inicjatywa TechSpo to organizowane przez Wydział Humanistyczny AGH interdyscyplinarne forum spotkań i dyskusji nad najważniejszymi zjawiskami dziejącymi się na styku technologii i społeczeństwa:

    • algorytmizacją,
    • sztuczną inteligencją,
    • projektowaniem interfejsów i interakcji z technologią,
    • rzeczywistością wirtualną i hybrydową
    • rolą maszyn w tworzeniu kultury.

– Zakładamy, że złożoność i dynamika świata jest fascynującym wyzwaniem poznawczym, które wymaga nieszablonowych analiz i spojrzenia z wielu perspektyw. Interesuje nas współczesny świat oraz społeczeństwo,a także problemy, które wpływają na jego kształt. Badamy nowe technologie, z których codziennie korzystamy i które zmieniają sposób, w jaki komunikujemy się czy pracujemy. Dlatego chcąc połączyć ze sobą te dwa światy i pokazać, że są one komplementarne, stworzyliśmy konferencję TechSpo Zapraszamy więc do formułowania śmiałych i dobrze osadzonych w najnowszych badaniach diagnoz, rekomendacji i idei. – definiują koncepcję wydarzenia jego organizatorzy.

W tegorocznym programie, czyli TechSpo’18 przewidzianych jest 70 wystąpień naukowców, badaczy, praktyków, ludzi biznesu i aktywistów, w tym 2 panele dyskusyjne, 4 wystąpienia plenarne i 6 warsztatów praktycznych.

Integralnym elementem TechSpo jest też przestrzeń wystawiennicza praktycznych rozwiązań firm i zespołów naukowych. Uczestnicy będą mogli przetestować technologie skanu 3D i druku 3D, doświadczyć wrażeń dotykowych kształtów generowanych przez ultradźwięki, zanurzyć się w wirtualnej rzeczywistości, porozmawiać z chatbotem i robotem emocjonalnym.

W trakcie warsztatów praktycznych będzie można nauczyć się, jak projektować interfejsy i roboty, analizować dane – zarówno te z mediów społecznościowych, jak i na potrzeby user experience, czy też tworzyć innowacje metodą design thinking.

Szczegółowy program konferencji: http://techspo.agh.edu.pl/program/

Wstęp: wolny

***

Miejsce konferencji:

AGH, dokładne informacje: http://techspo.agh.edu.pl/wazne-informacje/miejsce/

Partnerzy:

Krakowski Park Technologiczny

Akademia Fact-Checkingu

TechSoup Europe

PTS Kraków

Demagog

Polskie Stowarzyszenie Transhumanistyczne

FuRBS

Laboratorium Techno-Humanistyki UW

Od A do końca Internetu

3DGENCE

TECHMO

LEKTA

Stanusch Technologies

Sponsorzy:

LEKTA

Stanusch Technologies

Patronat:

Konferencja pod Honorowym Patronatem J. M. Rektora Akademii Górniczo-Hutniczej w Krakowie;

IEEE

Laboratorium Cyfrowe Humanistyki UW

Polskie Towarzystwo Socjologiczne

Polskie Towarzystwo Edukacji Medialnej

Patronat medialny:

TVP3 Kraków

dlaStudenta.pl

 

Brief.pl - jedno z najważniejszych polskich mediów z obszaru marketingu, biznesu i nowych technologii. Wydawca Brief.pl, organizator Rankingu 50 Kreatywnych Ludzi w Biznesie.

BRIEF