Prace dyplomowe – prace licencjackie i magisterskie – Strona 57 – Prezentacja prac magisterskich i licencjackich. Prace dyplomowe z najlepszych polskich uczelni.

Projektowanie interfejsów: pamięć

Oceń tę pracę

Na co dzień zapominamy jakie znaczenie ma dla naszego funkcjonowania pamięć. W ogóle raczej z pamięcią jest tak, że przypominamy sobie o niej wtedy, kiedy o czymś zapominamy…

Jeśli chodzi o wiedzę nt. pamięci to wyróżniamy:

3 typy pamięci…:

sensoryczna, zwana też ultrakrótkotrwałą – związana ze zmysłami: wzroku (pamięć ikoniczna) oraz słuchu (pamięć echoiczna); odpowiedzialna jest za te informacje, które możemy zapamiętać jednym „rzutem oka”,
krótkotrwała (krótkoterminowa) – umożliwiająca między innymi zapamiętanie na chwilę numeru telefonu, pod który dzwonimy,
trwała (długoterminowa) – jak sama nazwa wskazuje związana jest z gromadzeniem informacji z całego naszego życia.

… oraz kilka rodzajów pamięci:

semantyczna – wymagająca od swojego użytkownika znajomości języka naturalnego; jej głównym zadaniem jest pamiętanie przez podmiot treści i znaczeń pojęć,
epizodyczna – gromadząca dane o tym co zaszłe (pamięć retrospektywna) i umożliwiająca planowanie przyszłych wydarzeń, naszych zamiarów (pamięć prospektywna),
i inne, m.in.: autobiograficzna, ejdetyczna, logiczna, mechaniczna.

Tyle jeśli chodzi o klasyfikację.

***

Dla projektanta interfejsów wiedza nt. pamięci ma zasadnicze znaczenie – wspomaga tworzenie przejrzystych i komunikatywnych układów treści oraz nawigacji.

Żeby nie być gołosłownym podam kilka przykładów.

Przykład 1: Pojemność pamięci krótkoterminowej zawiera się w 7±2 jednostkach informacji. Pojemność pamięci ikonicznej jest jeszcze węższa i zawiera się w 5 jednostkach. W związku z tym bloki interfejsu – menu główne, nawigacje boczne – hasła reklamowe, ilość podstron (klików w ramach nawigacji) w głąb, etc., powinny być tak projektowane by przestrzegać tych praw. Dużo lepszy będzie tekst reklamowy, który zasadniczą treść będzie niósł na początku zdania – w pierwszych 5 słowach; dużo łatwiejsza do ogarnięcia będzie nawigacja zamykająca się w 7 elementów, a nawigacji bardziej ksomplikowanych zawsze możemy zbudować układ zhierarchizowany, z systemem kategorii głównych i podkategorii (działa wówczas zasada grupowania, o której może przy innej okazji). Itd.

Przykład 2: Pojemność pamięci krótkoterminowej ważna jest ze względu na sposób organizacji informacji – np. organizację bloków pól w formularzach. Sprawniej użytkownicy przyswajają formularze zorganizowane tak, że elementy podobne są pogrupowane, a liczba poszczególnych jednostek pól na każdym piętrze hierachii grup nie jest większa niż 7.

Rzecz jasna nie zawsze udaje się menu zamknąć w siedmiu elementach, czasem oferta na to po prostu nie pozwala – jak np. w ramach stron aukcji internetowych, bądź stron głównych portali. Wtedy na pomoc przychodzi…

Przykład 3: Pamięć ikoniczna jest znacznie szybsza w przetwarzaniu informacji niż pamięć semantyczna, wymagająca przetwarzania danych nt. znaczeń słów i wyrażeń. Stąd przy dłuższych układach menu zastosowanie elementów bazujących na niej znacznie przyspiesza proces odnalezienia się na danej stronie użytkownika – sprzyja nabyciu umiejętności i wiedzy w posługiwaniu się danym interfejsem, np. nawigacją w której wykorzystano elementy graficzne – ikony. Szybsze jest także przeszukiwanie wzrokiem tego rodzaju nawigacji, która zawiera ikony – choćby nawet pozostawiały wiele do życzenia jeśli chodzi o ich czytelność. Jednak – ważne: dla spotęgowania efektu, ikony powinny być A) czytelne i B) usadowione w kontekście słowa, z którym występują.

Dodatkowo, menu z zagnieżdżonymi ikonami traktowane jest przez nasze oko na podobnej zasadzie jak układ listy numerowanej, co zwiększa jego czytelność.

Dodatkową ważną informacją którą otrzymujemy z badań z zakresu psychologii użytkownika oraz kognitywistyki, w tym zwłaszcza z neuropsychologii i psychologii kognitywnej, jest ta, że przy pomocy pewnych technik projektanci mogą wpływać na A) zwiększanie pojemności kanału pamięci krótkoterminowej oraz B) budowanie w taki sposób przekazu, by zwiększyć prawdopodobieństwo jego zapamiętania.

Ale o tym przy innej okazji.

Światło, gradient: wklęsłe vs wypukłe

Oceń tę pracę

Jak już wspomniałem przy okazji postu nt. kolorów, oko ludzkie posiada fotoreceptory odpowiedzialne za widzenie kolorów (czopki) oraz osobne za widzenie jasności/ciemności (pręciki).

Cieniowanie mózg ludzki często wykorzystuje jako podstawę do stwierdzenia, że dany obiekt jest trójwymiarowy. To właśnie dzięki cieniom płaskie powierzchnie percepujemy jako 3D.

Dla projektanta interfejsów dodatkowo ważną informacją jest odkrycie natury tego, jak to się dzieje, że pewne obiekty mózg klasyfikuje jako wypukłe, inne zaś jako wklęsłe. Dlaczego jest to takie istotne? Choćby ze względu na czytelność przycisków GUI oraz w nawigacji menu stron internetowych, zwłaszcza teraz, w dobie modnych gradientów [w stylu web 2.0]. Jest to także pomocne przy projektowaniu interfejsów, które pozostają graficznie w zgodzie z naszą wiedzą prekognitywną (o tym niżej).

Co to jest wiedza prekognitywna oraz jakie ma znaczenie dla naszego systemu poznawczego w ramach percepcji głębi?

„Cienie są identyfikowane na wczesnym etapie procesu widzenia po to, by można było szybko stworzyć pierwsze wrażenie kształtu obiektu. (…)

Patrząc na koło, można zobaczyć jeden z dwóch kształtów w zależności od tego, czy sądzimy, że dany kształt jest oświetlany z góry czy z dołu. Jeśli źródło światła znajduje się na górze, można wnioskować, że to wypukłość, ponieważ kształt ten jest czarny pod spodem, tam, gdzie znajdują się cienie. Natomiast jeśli źródło światła znajduje się na dole, tylko wgłębienie może dawać taki rodzaj cienia. Dwa różne kształty: wypukłość lub wgłębienie mogą tworzyć taki sam cień w zależności od położenia źródła światła”. (Patrz rysunek 2.A.)

Jeśli chodzi o pochodzenie źródła światła w toku ewolucji mózg nasz zbudował sobie mechanizm, ułatwiający mu szybkie przetwarzanie informacji na temat widzianego obrazu.

„Zaskakujące jest to, że ludzie widząc koła z białą górą, widzą je jako wypukłości; mózg nie chcąc pozostawiać nas w niepewności, dokonuje wyboru: światło dochodzi z góry.

Założenie, że światło znajduje się na górze, jest zupełnie słuszne: jeśli jest jasno, to zwykle dlatego, że nad naszymi głowami świeci słońce.”

Dodatkowo, mechanizm ten jest tak głęboko w nas zakodowany, że czasem może dojść do sytuacji dziwacznych: przechyl głowę o 180 stopni i spójrz ponownie na koła z rysunku 2A.

„Wypukłości staną się wgłębieniami, a wgłębienia wypukłościami. Mózg – zamiast zakładać, że źródło światła znajduje się wysoko na niebie – przyjmuje, że dochodzi ono z górnej części naszego pola widzenia.

Zamiast marnować czas na zastanawianie się, czy głowa jest położona normalnie, czy też do góry nogami, a następnie na wnioskowanie, gdzie powinno znajdować się słońce, mózg zdecydował się na „wystarczająco dobre” rozwiązanie.”

Jakie jest znaczenie tego mechanizmu dla pracy projektanta? Rozwiązanie, którym posiłkuje się nasz mózg oznacza, że „położenie źródła światła może zostać na stałe zakodowane w procesie percepcji kształtów, co pozwala na bardzo szybkie przetwarzanie obrazu”. Szybkość ta umożliwia wywnioskowanie o kształcie danego elementu – np. stanu buttonu – na bardzo wczesnym etapie przetwarzania obrazu. Tak wczesnym, że sprzyja maksymie Steva Kruga: „Nie każ mi myśleć”, redukując koszta poniesione przez podmiot w procesie poznawania.

Menu Amazon.com posiada sporo górnego światła, dzięki czemu wydaje się być lekkie i pozostaje w zgodzie ze spodziewanym zachowaniem obiektu trójwymiarowego widzianego w słoneczny dzień – a więc nastraja użytkownika pozytywnie.

***

Wykorzystane w tekście cytaty pochodzą z: T. Stafford, M. Webb, 100 sposobów na zgłębienie tajemnic umysłu, 2006.

Percepcja czasu: action indicator

Oceń tę pracę

Siedzę właśnie nad częścią książki poświęconą elementom interfejsu, więc dzisiaj trochę o tym. A konkretnie o wskaźnikach postępu (progress bars).

Przez stosowanie nowych rozwiązań programistycznych, zwłaszcza AJAXa, interfejsy webowe coraz częściej przypominają te, które znamy korzystając z programów zainstalowanych na naszych komputerach. Ma to swoje zalety: w przypadku dobrze zaprojektowanych i dobrze oprogramowanych interfejsów, doświadczenie użytkowników może zostać pozytywnie przeniesione z środowiska desktop do Internetu. Ma też swoje minusy: minus zasadniczy to ten, że często interfejsy te tworzone są przez osoby z małym doświadczeniem, nie znające i przez to nie stosujące prawa i reguły rządzące światem projektowania interakcji.

Jedna z takich reguł związana jest z percepcją czasu – pisałem już na ten temat, ale dzisiaj będzie ciut inaczej.

Generalnie w naszym życiu codziennym, pozakomputerowym, każda akcja związana z otoczeniem, wywołuje natychmiastową reakcję. W świecie komputerów nie jest już tak różowo – nie rzadko dochodzi do kliku-, kilkunastosekundowych przestojów systemu, związanych z pracą dysku, pamięci RAM, procesora. To samo można powiedzieć o przestojach w ramach korzystania z sieci – gdzie głównie spowodowane jest to czasem pobierania danej strony WWW, ale także korzystaniem z usług webowych – np. poczty e-mail. Z drugiej strony chcemy mieć odpowiedź od systemu czy rozpoczął daną akcję, którą wywołaliśmy, czy nie jest czasem zepsuty. Dodatkowo potrzebujemy informacji ile dana czynność będzie trwała, jeśli jej wykonanie w trybie natychmiastowym (tj. w przeciągu 1 sekundy) z jakiegoś powodu jest niemożliwe. Dotyczy to tak samo operacji w systemie operacyjnym, jak i korzystania ze stron WWW. W końcu, długie czasy odpowiedzi systemu nie są spostrzegane dobrze przez operatora; użytkownicy szybko się zniechęcają to ślimaczących się systemów, ale osobnicze odczuwanie mijania czasu można oszukać, chociażby przez dodanie ruchu w polu widzenia.

Interfejsy w wersji desktop

Progress bar – klasyczny wskaźnik postępu, najczęściej o kształcie paska poziomego, w ramach którego środkowa, wypełniająca go część przesuwa się z lewej strony do prawej, pokazując w ramach upływu czasu postęp wykonywanej akcji: kopiowania danych, opróżniania kosza, nakładania tekstury na model 3D w programie graficznym, etc.

Występują dwa rodzaje progress baru:

determinate progress indicator – mamy z nim do czynienia wówczas gdy, posługując się przykładem z kopiowania pliku, system zna rozmiar pliku i jest w stanie oszacować, biorąc pod uwagę szybkość transferu danych, ile będzie trwało kopiowanie,
indeterminate progress indicator – stosowany wtedy, gdy system nie jest w stanie oszacować potrzebnego czasu do zakończenia danej operacji.

Ważne jest by progress bar pokazywał postęp w ramach upływającego czasu: A) albo w formule czysto graficznej – np. przesuwający się pas kolorystyczny z lewej do prawej, B) albo w formie tekstowej – np. w przypadku ładującej się strony w technologii flash, przy pokazaniu całkowitej objętości danych, które muszą zostać ściągnięte by wyświetliła się strona, odliczanie upływającego czasu, np. odliczając ilość pobranych danych, C) albo łącząc obydwie formy: A + B.

Asynchronous progress indicator – wskaźnik postępu pracujący w tle, najczęściej przypominający kształtem jakiś kręciołek, np. po stronie przeglądarki WWW, gdy w ramach kilku otworzonych zakładkach ładują się strony WWW.

Ten rodzaj wskaźnika może się rónież pojawiać w postaci spinning wait cursor. W interfejsach Apple zasada jest taka, iż jeśli system wykonuje jakąś czynność dłużej niż 2 sekundy, to po upływie dwu sekund pojawia się kursor wait, dając znać użytkownikowi, że akcja jest wykonywana, ale musi chwilę poczekać na efekt końcowy.

Internet

W ramach sieci wskaźniki postępu znajdują zastosowanie w ramach korzystania z jednej z dwu technologii:

Flash,
AJAX.

I tu nie będę się rozpisywał, gdyż zasady korzystania są takie same jak w ramach aplikacji desktopowych:

klasyczny wskaźnik postępu powinien być stosowany tam, gdzie pobierana jest większa ilość danych i przewidziany przez to jest dłuższy czas przestoju. Dodatkowo, dobrze jak informacje towarzyszące wskaźnikowi ukazują postęp w pobieraniu danych – albo w formie przesuwającego się paska, odzwierciedlającego postęp w ramach upływu czasu, albo odliczając ilość ściągniętych danych w stosunku do całkowitej ich liczby.
asynchroniczny wskaźnik powinien mieć zastosowanie wszędzie tam, gdzie czas odpowiedzi systemu przekracza granicę dwu sekund.

***

Warto zajrzeć do Apple Human Interface Guidelines, a tam m.in.:

o progress indicators,
o kursorach w systemie Apple Mac OS X, w tym progress indicator oraz spinning wait cursor.

AutoSuggest od Apple: poprawić to, co doskonałe

Oceń tę pracę

Autouzupełniacz (AutoSuggest) jest kapitalnym ficzerem sam w sobie – ten, kto wpadł na jego pomysł powinien otrzymać interfejsowego Oskara. Widziałem go w akcji już na wielu stronach i za każdym razem zadziwiał mnie swoim „sprytem” (tak, tak, personifikowanie interfejsów to normalna sprawa).

Świetnie się sprawdza chociażby w ramach funkcjonowania gramsajtów w gram.pl, przeszukując na bieżąco wg zadanego klucza bazy ulubionych: filmów, gier, zespołów muzycznych (nota bene, w tym serwisie społecznościowym jest wiele świetnych pomysłów, tylko chyba coś z ogólną koncepcją gramsajtów nie chwyciło). Sprawdza się też w wyszukiwarce serwisu AjaxRain, przeszukując zbiór udostępnianych tam skryptów. Ale to, co zrobiło Apple, to mistrzostwo świata!

***

O ile dobrze pamiętam, jakieś dwa m-ce temu ruszyła nowa odsłona firmowej strony Apple, nawiązująca stylistyką do najnowszej wersji Mac OS-a X – Leoparda.

Jak zwykle u Apple bywa stylistyka wyśmienita, przemyślana kolorystyka, dograny układ wyświetlanych elementów na danej stronie – nagłówki, widoczne linki kierujące do WIĘCEJ informacji, dobrze wykorzystany kolor pomarańczowy na elementach NEW, etc. Starannie przeniesione rozwiązania interfejsowe z systemu Mac OS X do interfejsu webowego. Przykładem mogą być focusy na polach wyszukiwarki (rysunek poniżej). (Ustalenia a propos focusów w: Apple Human Interface Guidelines). Choć z drugiej strony stosowane bardzo niekonsekwentnie – na jednych polach wyszukiwarki focusy są, na innych ich brak.

W czasie premiery nowej wersji strony Apple zniechęciły mnie do niej rozwiązania związane z menu rozwijanymi, rozlokowanymi w kolumnach po prawej i lewej stronie. Wodziłem kursorem po ekranie, a tu… frry, frry – i nim się zorientowałem w czym rzecz całe menu miałem na dole. Nawet nie kliknąłem; tylko najechałem kursorem… Nakierowałem kursor na którąś z zakładek… frry, frry – dwie inne pognały już do góry. Poza tym te odległości – jak ktoś sobie wyobraża, że użytkownicy będą wodzili po całym ekranie wzdłuż i w szerz tylko po to, by rozsuwać menu? Baaardzo średnie rozwiązanie.

Dałem sobie spokój z tą stroną… aż do wczoraj.

Do jednego z prototypów, który to właśnie wykonuję dla jednego z moich klientów, potrzebowałem ikonki ze zgrupowanymi osobami. Takiej małej szarej ikonki. I to w trybie „na już”, stąd nie miałem czasu by coś samemu przygotować. Pamiętałem, że taką ikonkę widziałem kiedyś na stronie Apple. Podążyłem za tą myślą.

Pobieżne przeglądnięcie kilkunastu z podstron nie przyniosło pożądanego rozeltutatu – ikonki nigdzie nie było. Przyszła zatem pora na zaprzęgnięcie do roboty szukajki.

Wklepuję AV (od avatar), a tu, tuż pod wyszukiwarką, w ramach menu kaskadowego rozwija się… – i tu powracam do punktu wyjścia tego wpisu – AutoSuggest. Ale jaki? Z ikoną reprezentującą daną informację (najczęściej produkt), z tytułem, krótkim opisem, z podziałem na kategorie, do której dana informacja należy względem całej architektury strony. Absolutnie Piękna Rzecz! Przemyślana. Informacja podana dla użytkownika w najbardziej czytelny sposób jaki można sobie wyobrazić w tego typu rozwiązaniach i w dodatku na tak małej przestrzeni. Za to ktoś powinien dostać… no, przynajmniej podwyżkę 🙂

I w ten sposób znów stałem się użytkownikiem Apple Łeb Sajtu. I klikam, i myszkuję – to tu, to tam, co jeszcze zrobili lepiej. Choć „frry, frry” wciąż nie poprawiają.

Barwy: zestawienia kolorystyczne

Oceń tę pracę

Przeglądając statystyki odwiedzin bloga, w tym w szczególności zapytania do Google, które prowadzą potem na stronę, zauważyłem, że często pojawia się hasło schematów kolorystycznych do wykorzystania na stronach WWW.

O kolorach już było kilkakrotnie (o widzeniu kolorów i projektowaniu uwzględniającym accessibility, wykorzystaniu w ramach tworzenia e-brandu, o znaczeniu psychofizjologicznym) – stąd zapewne przekierowania z Google – ale o schematach nie. Stąd – wychodząc na przeciw potrzebom 🙂 – dzisiaj właśnie schematy kolorystyczne. Skąd u mnie tak duży nacisk na kwestie kolorystyczne w ramach projektowania interfejsów? Powodów jest kilka. Choćby takie dwa:

około 96 % informacji nt. świata zyskujemy w ramach percepcji wzrokowej (to m.in. dlatego tak istotne są dzisiaj badania z wykorzystaniem techniki eyetracking). Ludzkie oko jest wyposażone w aparaturę umożliwiającą widzenie barw oraz widzenie jasności – resztę roboty wykonuje juz mózg. To wyspecjalizowanie – nadwrażliwość na kolory – powoduje, że podczas oceny tego, co widzimy, olbrzymią rolę odgrywa to, czy dana rzecz spełnia nasze oczekiwania kolorystyczne. Zatem: lepiej mieć nad tym panowanie, niż zdawać się na przypadek.
McLuhan w ramach teorii mediów twierdził, że sposób prezentowania treści zawiera już w sobie treść. Nic dodać, nic ująć, w przypadku sposobu prezentacji treści wykorzystującego kolory.

***

Przy pomocy kilku zasad tworzenia zestawów kolorystycznych, otrzymujemy schematy kolorów harmonijnych: zarówno monochromatyczne, pastelowe, jak i kontrastowe.

W ramach tworzenia zestawów harmonijnych korzysta się m.in. z zasad:

zasada komplementarności: weź dowolne dwa kolory leżące naprzeciw siebie w kole barw,
zasada triady: weź dowolne trzy kolory leżące na kole barw od siebie w jednakowych odległościach, tworząc tym samym trójkąt,
weź cztery dowolne kolory leżące na kole barw, które leżą od siebie tak, że tworzą wierzchołki prostokąta,
i innych.

Korzystając ze strony Adobe Kuler można przekonać się na własne oczy jak to działa.

Zestawy kolorów monochromatycznych uzyskać bardzo łatwo – np. weź dowolny kolor i, z jednej strony, dodawaj do niego +20%, +40%, + 60%, +80% białego oraz, z drugiej strony, +20%, +40%, + 60%, +80% koloru czarnego. Jednak w przypadku kolorów monochromatycznych pamiętajmy o odpowiednim kontraście, który będzie ważny ze względu na czytelność tekstu i tła, na którym tekst się znajduje.

Zestawy barw pastelowych uzyskujemy z odległych od siebie barw ale posiadających podobne cechy, na przykład niski stopień nasycenia.

Jeśli chodzi o schematy kontrastowe, to wystarczy połączyć ze sobą barwy dopełniające się.

***

33 schematy kolorystyczne [do wykorzystania na strony WWW]*

#6B2E50 | #B24D89 | #D293B7 | #E1B7CF | #F0DBE7 | #D8E1B7

#FB6BB3 | #FF99CC | #FFB3D9 | #FFCDE6 | #FFE7F3

#340034 | #750074 | #DD71BD | #F7D4E6 | #F7E4EE | #FEFFFF

#DCC8C7 | #BF9FAA | #B295CD | #773A5B | #C39B9C | #87707A

#DEBAD2 | #B875A5 | #703860 | #98867B | #FFBB47

#666666 | #330033 | #663366 | #996699 | #FFCC66

#929690 | #B4CD99 | #648040 | #90AE60 | #E1E2A3 | #E8E8E4 | #E19857

#948068 | #C0BB93 | #90A07B | #7E8C8D | #666962

#5C2810 | #CAB36F | #AFB06C | #DED791 | #C2A182

#888C71 | #44381E | #C3D5C7 | #565038 | #DCDDB1

#98B564 | #C7DDA0 | #C6CDB9 | #DDDDDD

#335533 | #668844 | #99BB66 | #DDEEBB | #888877

#497019 | #99C089 | #B3B590 | #E6F5BC | #D8E6AB | #A3AC59 | #FAE56E

#3C5787 | #477265 | #528C44 | #5CA622 | #67C100

#567500 | #759933 | #8DC42B | #B1CA25 | #CEF415 | #E6F33F

#89974A | #C3D73A | #BBC971 | #E1E9AD | #EBF2BE | #EBE06D | #C54836

#6FA9E1 | #679BE4 | #9CD821 | #EA7F2D

#C1DA84 | #8BB5B7 | #AAC9CB | #CADDDE | #7A7A7A | #C8C8C8 | #B6B6B6

#595B66 | #404251 | #D1D7FA | #555A74 | #2C2D38

#D2D0E8 | #F0EFF4 | #A9AFD1 | #525C91

#000000 | #313C42 | #6B797B | #EFC310 | #FFFFFF

#DEDACA | #C0B99A | #8D8870 | #5E5945 | #7799AA | #5B8092 | #335566 | #223344

#6A7276 | #B4BEC2 | #828A8C | #EAB646 | #FAD68A | #EEECE8

#F3E690 | #B2BDFF | #928F90 | #BBA095 | #FEFAE9

#D5BF90 | #8F968F | #FFCD50 | #8597A5 | #FEFED9 | #76763A

#C7A485 | #E2D2BD | #FFEFE3 | #FFCAB9

#4D435B | #683653 | #EED4E1 | #7A848D | #E2E7ED | #AFC3CE

#313531 | #CED8C6 | #59777D | #4A3139 | #B6AC8E | #848370 | #E7BFCB

#798488 | #92987C | #A59680 | #A58080 | #827988

#83815A | #CDC282 | #D1C5AF | #DEC0BE | #D87A94 | #57393B

#F7DFC7 | #E3AEA8 | #5C433F | #F9D0A2 | #DA826C | #F6AC6D

#CA091E | #F91A1D | #D80B29 | #FF5812 | #FFA723

* Schematy wybrane z bogatej galerii znajdującej się na stronie ColorSchemer.