Prace z informatyki – Strona 33 – Prace dyplomowe – prace licencjackie i magisterskie

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.

Pamięć kształtów

5/5 - (1 vote)

Było już o pamięci, a przy okazji wpisu nt. percepcji barw obiecałem, że napiszę słów kilka w związku z tym, co wiadomo na temat możliwości poszerzenia kanału pamięci użytkownika interfejsów. Dzisiaj jednak nie tyle o kolorach, co o kształtach – i o tym jak ich używać, by zwiększyć prawdopodobieństwo zapamiętania elementów, na których nam – jako projektantom – zależy.

***

Zapamiętywanie barwnych figur

Generalnie to barwy pamięta się lepiej, niż kształty.
Jeśli chodzi o figury, to tym lepiej są zapamiętywane: im bardziej prosta jest ich budowa i w im większym stopniu podobne są do jakichś przedmiotów, tzn. w im większym stopniu wiążą się z minionym doświadczeniem (zasada swoistości).
W obrębie samych figur najdłużej i najwierniej zapamiętywane są te ich części, które swoją regularnością wyodrębniają się na tle pozostałych bardziej nieregulanych, albo swoją nieregularnością – na tle bardziej regularnych (zasada kontrastu).

Przypominanie

Zarówno figury jako całości, jak i poszczególne ich części zapamiętuje się jako regularniejsze niż są w rzeczywistości (zasada upraszczania).
Figury są upodabniane do przedmiotów znanych z doświadczenia, co prowadzi niekiedy do znacznych zniekształceń (zasada dopasowania).
Składniki figur, będące znanymi figurami geometrycznymi, są często odtwarzane wg znanego wzorca, tj. w swym tzw. klasycznym położeniu, np. że podstawa trójkąta jest równoległa do osi poziomej.

Zapamiętywanie zamierzone a samorzutne

Zapamiętywanie zamierzone figur barwnych o dużym stopniu nieokreśloności przedmiotowej jest około 14% skuteczniejsze od zapamiętywania samorzutnego.
Zapamiętywanie zarówno zamierzone, jak i samorzutne figur jako całości i ich części składowych wzrasta, im prostsza i im przejrzystsza jest budowa figury oraz im łatwiej wyodrębnić ją spośród innych figur.
Zapamiętywanie zarówno zamierzone, jak i samorzutne wzrasta, im bardziej podobna jest figura lub jej część do przedmiotów znanych danej osobie z wcześniejszego doświadczenia.
Jeżeli figura lub jej część składowa przypomina jakiś znany przedmiot, jest zapamiętywana nie tylko w powiązaniu z tym przedmiotem, ale często poprzez ten przedmiot, co w przypadku większych różnic może spowodować zniekształcenie sensu pierwotnego wzorca na rzecz jego odbicia, przez które został zapamiętany.
W przypadku figur bardziej złożonych zapamiętywanie rozpoczyna się albo od uchwycenia ogólnego kształtu figury, albo od wyodrębnienia którejś z jej części składowych, która została uznana za charakterystyczną.

***

Pamięć barw jest silniejsza niż pamięć kształtów, ale kształty mogą być zapamiętywane efektywniej, jeśli są proste, regularne lub przypominają znane przedmioty. Zasada kontrastu wskazuje, że kształty z wyraźnym kontrastem (np. regularność w nieregularnych figurach lub nieregularność w regularnych) są lepiej zapamiętywane. Tego rodzaju kontrast przyciąga uwagę i wspomaga proces zapamiętywania.

Podczas przypominania kształty są często postrzegane jako bardziej regularne, niż są w rzeczywistości. Dodatkowo, przypisanie kształtom cech znanych obiektów prowadzi do zniekształceń w odbiorze, ponieważ postrzegamy je przez pryzmat tych przedmiotów, a nie w ich oryginalnej formie. W przypadku zapamiętywania zamierzonego, zwłaszcza w odniesieniu do figur o dużej nieokreśloności, skuteczność jest wyższa niż w przypadku samorzutnego zapamiętywania. Kluczową rolę w tym procesie odgrywa prostota figury i jej podobieństwo do znanych przedmiotów.

***

Na podstawie m.in. wyników badań opisanych w: W. Szewczuk, Psychologia zapamiętywania, PWN, 1997.

Lektura uzupełniająca: M. Jagodzińska, Obraz w procesach poznania i uczenia się, WSiP, 1991.

Mockup Screen: prototypy w stylu Apple Newton

Oceń tę pracę

Jedno z pierwszych pytań projektanta interfejsów i stron WWW dotyczy wyboru narzędzi do swojej pracy. Jakie narzędzia dostępne są w ogóle? Które warto wybrać? Wybór przychodzi z czasem.

Na rynku nie ma zbyt wielu aplikacji, które można by użyć w ramach prac z zakresu prototypowania. Można co prawda prototypować nawet przy pomocy tak powszednich programów jak MS Word czy MS PowerPoint, ale efekty pozostawiają wiele do życzenia. Stąd jednym z głównych tematów książki „Prototypowanie: metody i narzędzia”, będzie właśnie przegląd dostępnego oprogramowania, ułatwiającego życie projektantom. Dzisiaj o jednym z takich programów.

***

Mockup Screen to wyjątkowo proste narzędzie autorstwa chorwackiego programisty Igora Ješe, które wychodząc z założenia „Sketch Screens in Minutes” doczekało się wzmianki m.in w Gui Design for Dummies, a i chłopcy z Microsoft zauważyli je na rynku. Mockup Screen jest tak prosty, że podręcznik użytkownika liczy sobie ledwie 12 stron html, w związku z czym opanowanie obsługi tego programu nie powinno zająć więcej, niż kilkanaście minut. Także cena jest przyjazna – 79$ za licencję na jedno stanowisko.

W Mockup Screen mamy do czynienia z pracą na scenariuszach, na które składają się pojedyncze makiety poszczególnych stanów interfejsu / strony WWW (rysunek niżej).

Wybierając z menu opcję New Screen i klikając na nowo powstałą pustą makietę przechodzimy do widoku tworzenia pojedynczej strony, na której będzie znajdował się nasz interfejs bądź schemat strony internetowej. Piszę schemat, bo w Mockup mamy do czynienia z grafiką dwubitową – wszystkie elementy naszego interfejsu będą czarnobiałe. Ma to swoje wady, ale ma też zalety – tego rodzaju makiety mają swój niezaprzeczalny charakter, zbliżony do tego, jaki możemy znaleźć w ramach pierwszego interfejsu PDA Apple Newton.

Podczas procesu rysowania interfejsu mamy do wykorzystania biblioteki podstawowych elementów GUI, które zostały pogrupowane w następujący sposób:

elementy internetowe (web elements): text link, image, horizontal line,
elementy tekstowe (text elements): simple text, multiline text, float text,
standardowe elementy (standard elements): button, field, dropdown, checkbox, list, radio button, table, tree (drzewo przydatne przy wizualizacji map WWW), frame, tabs (układ zakładek),
grupy ikon (icon groups): emotikony, strzałki, symbole i inne znaki specjalne.

Dodatkowo dysponujemy funkcją tranfsormacji, dzięki czemu jednym kliknięciem możemy zmienić dowolny element interfejsu w każdy inny – chociażby button zamienić w dropdown.

Oczywiście elementom interaktywnym interfejsu, który wykonujemy, możemy nadać zmienne – tytuły zakładkom, przypisać funkcję do buttonu (Anuluj, OK, Wyślij, etc.), widoczny stan dropdowna czy pól logowania się, itd. Chociaż należy zaznaczyć, że i tak nie użyczymy żadnej interaktywności naszych wygenerowanych makiet, ze względu na fakt, że program eksportuje pliki do formatów .GIF i .JPG.

Na koniec zapisujemy nasze efekty pracy + możemy wyeksportować cały scenariusz do pliku .html, w którym zawarte będą poszczególne makiety, jakie wykonaliśmy.

To wszystko. Prościej już nie można.