Kontekst zmienia wszystko: umiejscowienie elementów

Kontekst zmienia wszystko: umiejscowienie elementów

Kontekst pozwala nam się poruszać po świecie. Daje poczucie bezpieczeństwa. To dzięki niemu nie jesteśmy bezustannie zdziwieni. Skraca też czas reakcji na bodźce.

W tej krótkiej serii opowiem o różnych koncepcjach towarzyszących określeniu „kontekst”. Będzie to sztuczny podział, bo aspekty te często wpływają na siebie nawzajem i w oderwaniu przestałyby oddziaływać. Jednak dla porządku chciałabym opowiedzieć o kontekście z różnych perspektyw. Rozbierając go na części pierwsze, będę się oczywiście odnosić do projektowania świata cyfrowego, User Experience, designu i całej reszty omawianych tu zwykle tematów. Myślę, że dokładne zrozumienie możliwości, ale i barier jakie stwarzają konteksty, może pomóc projektantom znaleźć się bliżej użytkownika.

Sąsiedztwo

Pierwszym, najprostszym rozumieniem kontekstu będzie otoczenie, w jakim ktoś/coś się znajduje, a więc bliskość. Zagadnienie to pojawiło się na blogu już wcześniej, przy okazji zasad grupowania wizualnego. Tym razem jednak pisząc o bliskości, nie myślę o sposobie wizualnego spostrzegania elementów strony.

Zacznijmy jednak od małej rozgrzewki. Co może symbolizować poniższa ikona?

Jest to symbol wieloznaczny. Może się odnosić do kopiowania lub duplikowania treści. Mogą to być dwa dokumenty.

Jednak jeśli towarzyszą jej dwa pozostałe – nieodłączne już – symbole, nikt nie powinien mieć wątpliwości, do czego służy.

Ikona dwóch kwadratów położona pomiędzy symbolem oraz X nie wymaga analizy. Jest to standard, który użytkownik dobrze zna. Projektant może z tego skorzystać, aby skrócić czas potrzebny do wykonania pożądanych operacji i oczywiście, aby ułatwić userowi zadanie.

Podobnie w powyższym przykładzie – mimo iż odcięłam większą część screena i tak wiadomo, co jest czym. Dodatkowo symbol X jest powtórzony przy każdej zakładce, ale projektanci wiedzieli, że nie będzie to marnowanie miejsca na ekranie. Z każdą z zakładek można zrobić kilka rzeczy – przesunąć, otworzyć w nowym oknie, zamknąć. Gdyby opcje te były dostępne po wejściu w każdą zakładkę albo po kliknięciu PPM czy przytrzymaniu zakładki – znacznie skomplikowałoby to działania użytkownika.

Przede wszystkim mniej doświadczony user nie musi wiedzieć, jakie opcje są w tym miejscu dostępne. Miło byłoby go o nich poinformować od razu (jeżeli nie zaśmieca to jednocześnie interfejsu). Po drugie jeśli nawet wie, co ma do dyspozycji, musi wykonać większą liczbę kliknięć, aby dostać się do poszukiwanego przycisku. Czas potrzebny do zrozumienia i wykonania procesu bezpośrednio wpływa na UX.

Osadzanie w kontekście

Jeszcze jedna zaleta osadzenia w kontekście poprzez bliskość, to fakt, że intuicyjnym staje się, do czego odnosi się określona ikona. W powyższym przykładzie użytkownik wie, że tym iksem nie zamknie całej przeglądarki. Jest umiejscowiony na zakładce, więc to jej automatycznie dotyczy.

Bliskość kontekstowa jest szczególnie istotna, kiedy na ekranie dużo się dzieje. Przykładem może być cały właściwie gamedev, bo w projektowaniu gier zawsze wyzwanie stanowi rozmieszczenie obiektów na ekranie.

League of Legends
League of Legends, Riot Games, źródło: www.theverge.com

Zobacz, ile (ruchomych) wskaźników znajduje się jednocześnie na ekranie.

W wielu grach przyjęło się, że kolor czerwony symbolizuje poziom życia, niebieski to poziom many, tutaj jednak rozróżniono w ten sposób także graczy. Mogłoby to wprowadzać chaos, jednak tak się nie dzieje. O tym, której postaci dotyczy wskaźnik, decyduje wyłącznie bliskość i jest to wystarczające. Możemy powiedzieć, że pasek życia znajduje się w kontekście postaci. Dzięki temu gracz z łatwością nadąża za stanem gry mimo złożoności interfejsu.

Jednak tutaj działa nie wyłącznie bliskość, a cały szereg zależności i kontekstów. Będą one przedmiotem kolejnych artykułów.

Dodaj komentarz