Archiwa tagu: heurystyki Nielsena

Wytyczne projektowania interfejsu

Kluczową różnicą między typowymi stronami Flash a aplikacjami RIA jest posiadanie przez te drugie możliwości interakcji i operowania danymi, niż tylko sama ich prezentacja. Jest to ważne spostrzeżenie, gdyż wiele ludzi kojarzy bogate aplikacje internetowe tylko i wyłącznie z przeszkadzającymi reklamami, które pojawiają się po wejściu na stronę internetową, dźwiękami po najechaniu na przyciski oraz samoczynnie włączającą się muzyką. Dodatkowo istnieje bardzo zła opinia o ich wydajności i długim wczytywaniu się stron Flash. Na początku kiedy technologia Flash, z której wywodzi się idea bogatych aplikacji internetowych weszła do Internetu, z przykrością trzeba przyznać, że właśnie do takich czynności jak powyższe była wykorzystywana.

Projektanci i programiści nie wiedzieli tak naprawdę do czego używać Flash’a i stosowali go przede wszystkim do efektów graficznych i multimedialnych, co bardzo przeszkadzało użytkownikom. Głównym powodem był długi czas ładowania, który obciążał łącza ludzi, a które nie były zbyt wydajne w tych czasach. Również sam sprzęt komputerowy pozostawiał wiele do życzenia, gdyż sam Flash do renderowania elementów zużywał moc obliczeniową po stronie użytkownika. Obecnie technologie RIA są wykorzystywane aby zwiększyć użyteczności produktów, a nie zaszkodzić użytkownikowi. Czasami jednak zdarzają się nieprzemyślane implementacje, który wynikają z niewiedzy programistów czy projektantów.

Kiedy Jakob Nielsen sformułował heurystyki użyteczności w 1994 roku, dotyczyły one aplikacji desktopowych (okienkowych). Następnie w 1997 roku Keith Instone spojrzał poprzez pryzmat  heurystyk Nielsena na strony internetowe.  Kiedy parę lat później aplikacje internetowe oparte na technologii Flash stawały się coraz bardziej popularne Jess McMullin oraz Gran Skinner w 2003 roku w swoim artykule Usability Heuristics for Rich Internet Applications”  zastosowali heurystyki Nielsena do oceny aplikacji Flash. Wtedy jeszcze aplikacje Flash miały wiele niedociągnięć  i wad. Obecnie technologii RIA jest więcej (np. Silverlight lub Flex), które coraz lepiej przystosowane są do działania w sieci. Pomimo zmian technologicznych i ulepszeń, heurystyki Nielsena ciągle są aktualne i stanowią cenne wytyczne dla projektantów i programistów, zwracając uwagę na pojawiające się błędy.

1. Status aplikacji

Pierwsza zasada z 10 heurystyk Nielsena dotyczy widoczności statusu systemu, który powinien informować o postępach działania, tak by użytkownik wiedział ile pozostało do końca. Technologie bogatych aplikacji internetowych posiadają tę możliwość dzięki asynchronicznej wymianie danych w tle. Monitorowanie postępu ładowania danych umożliwia wyświetlanie stosownej  informacji na ekranie w postaci paska postępu lub liczby procent. Mechanizm ten jest znany z aplikacji desktopowych, dlatego warto informować użytkownika również w Internecie o tym co się dzieje z aplikacją. Informowanie o statusie postępu musi być skorelowane z czynnościami użytkownika, nie natomiast z samym systemem. Użytkownika nie interesuje co się dzieje wewnątrz systemu, tylko to kiedy będzie mógł wykonać następny krok.

 1-status
Rys. 2.2 Pasek postępu aplikacji internetowej
Źródło: opracowanie własne na podstawie Google Analytics

 

2. Dopasowanie do rzeczywistości

Dopasowanie pomiędzy systemem a światem realnym w przypadku aplikacji internetowych bazuje między innymi na stosowaniu metafor w postaci zrozumiałych symboli i funkcji. W tym zakresie RIA wspiera funkcjonalności, które pozwalają na większą interakcję użytkownika z elementami aplikacji, takie jak przesuwanie i upuszczanie obiektów (na przykład produkt do koszyka w sklepie), funkcja lupy powiększającej detale produktu, oglądanie produktu w trójwymiarze. Czynności te w dużej mierze odnoszą się do doświadczenia użytkownika ze świata realnego.

RIA wprowadza również elementy nieznane użytkownikom, tak jak rollover (efekt po najechaniu na element), możliwość personalizacji szablonu poprzez zmianę układu poszczególnych bloków. Powoduje to, że osoby nie znając tego chociażby z innych aplikacji, nie będą w stanie tego używać.

 2-dopasowanie-do-rzeczywistosci
Rys. 2.3 Przesuwanie produktu do koszyka
Źródło: opracowanie własne na podstawie www.demo.superdit.com/jquery/dragdrop_cart

 

3. Kontrola działań

W przypadku heurystyki dotyczącej poczucia kontroli nad oprogramowaniem oraz swobody działań, aplikacje RIA czasami łamią znany model dotyczący interakcji z samą przeglądarką WWW, blokując przyciski nawigacyjne „wstecz” i „dalej”. Tradycyjne strony internetowe pozwalają po naciśnięciu tego przycisku przejść do poprzedniego widoku, natomiast w przypadku RIA przycisk ten często nie funkcjonuje wcale lub przenosi użytkownika do ostatnio odwiedzanej domeny. Jest to uciążliwe, gdyż użytkownik nie może cofnąć się wstecz. Dodatkowo aplikacje RIA często nie pozwalają na wysyłanie linków do konkretnej podstrony. Wynika to z faktu, że w pasku adresu widnieje tylko adres składający się z domeny głównej, niezależnie na jakiej podstronie znajduje się użytkownik. Wymienione elementy łamią znaną od zawsze konwencję dla przeglądarki internetowej w zakresie interakcji. Obecnie istnieją metody, które pozwalają aplikacjom RIA na powrót do tradycyjnych praktyk. Przykładem takiego rozwiązania mogą być kotwice w postaci [#nazwa-elementu]. Wprowadzanie wewnętrznej nawigacji jest tylko dodatkiem do funkcjonalności, nie może być zastąpieniem nawigacji przeglądarki.

Kolejnym błędem przeczącym poczuciu kontroli nad aplikacją jest wprowadzenie (intro) oraz pełny ekran. Użytkownicy wchodząc na stronę internetową mają cel do zrealizowania – chcą się czegoś dowiedzieć. Programiści oraz graficy często chcąc pochwalić się swoimi umiejętnościami wzbogacają stronę o specjalne multimedialne animacje. Wzbogacają stronę, tym samym umniejszając user experience. Obecnie coraz rzadziej stosuje się tego rodzaju efekty, natomiast w latach kiedy narodził się Flash, takie elementy pojawiały się bardzo często, wprawiając użytkowników w irytację (pomimo możliwości pominięcia intro). Warto zaznaczyć, że użytkownik ma mniej niż dwie minuty na zapoznanie się ze stroną WWW, dlatego wszelkie utrudnienia nie mające wartości dla użytkownika działają na niekorzyść. Potwierdziły to badania na użytkownikach J. Nielsena. Drugim niepożądanym zachowaniem się aplikacji internetowych jest jej rozciąganie się na cały ekran po wejściu na stronę. Znikanie okna przeglądarki ze stałymi elementami powoduje dezorientację użytkownika, który nie wie co tak naprawdę się stało.

4. Spójność i standardy

W przypadku zasady o zachowaniu spójności i standardów elementami na które należy zwrócić uwagę są menu kontekstowe, wsparcie kopiowania tekstu oraz skróty klawiaturowe. W przypadku RIA wymienione elementy często nie działają lub funkcjonują inaczej. Kopiowanie tekstu powinno być zawsze możliwe dla użytkownika. Czasami jednak programiści bagatelizują tę kwestię i tworzą pola tekstowe, które tak naprawdę nie są tekstem. Występuje to najczęściej w aplikacjach Flash lub Silverlight.

Osoby korzystające z przeglądarki internetowej znają zawartość menu pojawiającego się po naciśnięciu prawego klawisza myszy. Znajdują się tam standardowe funkcje między innymi zapis do pliku aktualnie oglądanej strony internetowej czy informacje o stronie. W przypadku aplikacji Flash lub Silverlight pojawia się menu kontekstowe związane z zastosowaną technologią, które jest zupełnie inne od znanego do tej pory użytkownikowi. W wersji Silverlight 4 Microsoft wprowadził funkcje umożliwiające tworzenie własnego menu kontekstowego, przy okazji dodając możliwość drukowania. Projektanci aplikacji RIA często zapominają także o skrótach klawiaturowych, które są powszechnie znane i wykorzystywane w procesie interakcji z oprogramowaniem. Również w środowisku Internetowym, skróty klawiaturowe znane z aplikacji desktopowych zostały zaadoptowane w przypadku stron WWW. Niestety dużo aplikacji RIA nie stosuje się do tego wymogu, pomijając obsługę skrótów w swoich programach, niedoceniając możliwości użytkowników.

 4-spojnosc
Rys. 2.4 Menu kontekstowe: a) strona WWW b) aplikacja Flash c) aplikacja Silverlight
Źródło: opracowanie własne

 

5. Ochrona przed błędami

Kolejna zasada Nielsena dotyczy ochrony przed błędami. W przypadku serwisów internetowych błędy najczęściej pojawiają się podczas wypełniania różnych formularzy, gdzie użytkownik zmuszony jest do podania informacji, bo inaczej nie przejdzie do następnego kroku. Tradycyjne strony internetowe do sprawdzenia poprawności wysyłają jedno zbiorcze zapytanie z wprowadzonymi danymi, następnie gdy otrzymają odpowiedź na nowo ładują zawartość strony. Aplikacje RIA mają przewagę w tej kwestii, gdyż mogą na bieżąco sprawdzać poprawność danych w formularzu i wyświetlać stosowne komunikaty. Stosowanie takich rozwiązań dla formularzy WWW jest niewątpliwie zaletą, gdyż oszczędza czas użytkownika i zwiększa user experience. Użytkownik nie musi wiele razy wracać do tego samego formularza, gdyż w jednym kroku jest w stanie prawidłowo go wypełnić. Aplikacja RIA cały czas wchodzi w interakcję z użytkownikiem, dlatego najbardziej nielubiana czynność staje się przystępna dla osoby wprowadzającej dane.

 5-bledy-walidacja
Rys. 2.5 Automatyczna walidacja danych w formularzu
Źródło: opracowanie własne na podstawie Yahoo!

 

Dużym problemem w przypadku wszystkich serwisów i aplikacji internetowych jest zerwanie połączenia z Internetem i utrata przesyłanych danych. Jest to szkodliwe zjawisko szczególnie w przypadku aplikacji biznesowych lub bankowych. Nowoczesne aplikacje internetowe mają możliwość działania offline, przechowując dane po stronie klienta w plikach cookies lub lokalnej bazie danych. Powrót połączenia internetowego powoduje, że aplikacja sama aktualizuje dane na serwerze, przez co zachowana jest płynność pracy.

6. Rozpoznawanie zamiast przypominania

W przypadku bogatych aplikacji internetowych zasada „rozpoznawanie zamiast przypominania” ma duże znaczenie. Aplikacje RIA stawiają na większą interakcję użytkownika z systemem, dlatego ważny jest sposób przekazu funkcjonalności i możliwości systemu. Stosowanie symboli, przycisków czy sposobu nawigacji, które znane już są z innych aplikacji jest ułatwieniem dla użytkownika, gdyż bazuje na rozpoznawaniu.

Kolejnym problemem w zakresie projektowania interfejsu RIA jest chowanie elementów układu strony i pokazywanie ich w momencie najechania kursorem na wskazany przycisk. Wiąże się z tym zarzut jaki postawił w swoim artykule (McMullin, Skinner, 2003)  aplikacjom RIA, że bawią się z użytkownikiem w chowanego w zakresie ważnych elementów interfejsu. Projektanci chcąc pokazać efekty graficzne w postaci chowania i pojawiania się bloków stosują je do elementów interfejsu, które powinny być zawsze widoczne. W przeciwnym wypadku spowalniają wykonanie zadania przez użytkownika. Użytkownik powinien wiedzieć co można zrobić z poszczególnymi elementami interfejsu i wchodzić z nimi w interakcję. Dlatego elementy umożliwiające wykonanie akcji po najechaniu na nie kursorem powinny zmieniać wygląd (rollover), a kursor kształt.

Ludzie przez wiele lat używania komputera nauczyli się operować myszką i kursorem, dlatego każdą czynność (akcję) potwierdzają kliknięciem. RIA wprowadzając element najechania na element w celu wykonania akcji udostępniła nowy typ interakcji, obecnie lepiej lub gorzej wykorzystywany na różnego rodzaju serwisach internetowych. Natomiast nie istnieje w Internecie jednolita koncepcja odróżniania zwykłych przycisków od tych drugich, co może być kłopotliwe dla mniej doświadczonych użytkowników. Nie powinno się za często stosować efektu najechania na element w celu wykonania na nim akcji. Użytkownik powinien mieć kontrolę nad tym co się dzieje w serwisie i świadomie decydować jakich funkcji chce użyć. Afordancje najlepiej sprawdzają się dla przycisków, które powinny delikatnie się animować, jeśli wykonują jakąś akcję w serwisie.

 6-rollover
Rys. 2.6 Efekt rollover na przycisku akcji
Źródło: opracowanie własne

 

7. Elastyczność i skróty

Z kolei aplikacje RIA mają ogromny potencjał w ułatwianiu użytkownikom różnych procesów i zadań. Założenie heurystyki Nielsena o elastyczności i umożliwieniu pracy na skróty dotyczy usprawnienia działań na różnych poziomach aplikacji. W tej grupie znajdują się między innymi takie elementy jak: skróty klawiaturowe, podpowiedzi w polach formularza do wprowadzania danych (np. nałożenie maski na pole podczas wpisywania kodu pocztowego), automatyczne uzupełnianie i podpowiadanie fraz, kontrolki wspomagające wybór godzin lub dat, suwaki do zakreślania przedziałów. Korzystanie z ułatwień znacznie przyspiesza czynności wykonywane przez użytkowników, przez co zwiększa efektywność działań.

8. Estetyczny wygląd

Ważną kwestią w projektowaniu serwisów internetowych jest zachowanie maksymalnej funkcjonalności przy prostocie i estetyce projektu graficznego. Przy dodawaniu dodatkowych elementów graficznych lub reklamowych należy zadać pytanie: jaki zysk biznesowy ma przynieść modyfikacja oraz jaki zysk jest dla użytkownika. Każdy element, który wzbogaca serwis lub aplikację nie musi być wartościowy dla użytkownika lub przynosić zysk. Dlatego jeśli dodatkowa cecha aplikacji nie przynosi korzyści, lepiej by jej nie było.

Zaletą utrzymania projektu interfejsu w minimalistycznych tonie jest to, że zazwyczaj powoduje to zmniejszenie rozmiaru pliku i zmniejszenie czasu ładowania w przeglądarce, co jest istotne ze względu na ograniczoną cierpliwość wielu użytkowników Internetu (McMullin, Skinner, 2003).

a) Animacje i przejścia

Wiele nowoczesnych aplikacji internetowych używa efektów w postaci przejść (animacji kinowych), zaciemnień ekranu, zwijania i rozwijania modułów (collapse). Celem jest skupienie uwagi użytkownika na istotnym na dany moment elemencie interfejsu. Aby zastosować powyższe efekty musi istnieć ku temu przesłanka, gdyż tylko wtedy zyska na tym użytkownik. Za pomocą animowanych efektów pokazuje się użytkownikowi co dzieje się na ekranie z elementami interfejsu. Jest to lepsze niż gwałtowne zmiany i przeładowania strony internetowej, gdyż pozwalają na większą kontrolę nad aplikacją. Wśród najpopularniejszych wzorców animacji można wyróżnić:

  • § Rozjaśnianie/przyciemnianie (Brighten and Dim)

Efekt ma różne zastosowania w zależności od kontekstu. Pozwala na wyodrębnienie ważnych funkcji, ikon lub bloków. Bazuje na kontraście i zmianie kolorów i w ten sposób oddziałuje na postrzeganie użytkownika.

Przykładem zastosowania jest efekt Lightbox, który polega na zaciemnieniu ekranu poza jednym elementem, który jest ważny w danym momencie. Może być to okno do logowania, komunikat informacyjny lub zdjęcie. Lightbox pozwala skupić uwagę zasłaniając elementy, które mogły by rozpraszać, dodatkowo nie powoduje przeładowania strony. Lightbox należy do grupy efektów overlays (nakładek na ekran) i pozwala na eksponowanie ważniejszych informacji, których użytkownik nie może pominąć.

Efekt wyblakłych elementów interfejsu pozwala na rozróżnienie elementów nieaktywnych lub niegotowych. Nieaktywne elementy to takie, które w danym momencie nie dają się wybrać – kliknąć. Dopiero gdy element zostanie najechany zmieni się na kolor aktywny. W przypadku wielu podobnych elementów aplikacji internetowej, rozróżnienie graficzne na cechy aktywny lub nie, pozwala na zachowanie porządku i redukcję wizualnego chaosu. W drugim przypadku pod pojęciem elementów niegotowych rozumie się te elementy, które są w trakcie ładowania i jeszcze nie można wejść z nimi w interakcję.

 2.6-lightbox
Rys. 2.7 Efekt lightbox po najechaniu na element
Źródło: opracowanie własne na podstawie ebay.com

 

  • § Rozsuwanie/Zsuwanie (Expand/Collapse)

Podczas pokazywania poszczególnych części aplikacji używa się efektu rozsuwania i zsuwania paneli, by dostarczyć efektu kontroli tego co się dzieje na ekranie. Efekt rozsuwania jest bardziej przykuwający uwagę użytkownika niż efekt rozjaśniania i przyciemniania, ponieważ ruch jest bardziej dramatyczny niż redukcja jasności i koloru (Scoot, Neil 2009). Omawiany efekt stosuje się w przypadku dużej zawartości aplikacji, by zgrupować elementy o podobnym przeznaczeniu lub zmniejszyć ilość wyświetlanych danych nieistotnych w danym momencie dla użytkownika. Przykładem może być blok z filtrami (rozwijany na żądanie w momencie zmiany parametrów) w sklepie internetowym, podgląd zawartości koszyka lub pokazanie szczegółów o danym produkcie na liście wyników wyszukiwania.

 2.7-collapse
Rys. 2.8 Efekt rozsuwania i zsuwania elementów
Źródło: opracowanie własne na podstawie ebay.com

 

  • § Animacja elementów

Animacje stosuje się w celu zakomunikowania użytkownikowi co się dzieje na ekranie po wybraniu jakiejś opcji lub naciśnięciu przycisku. Jest to sposób by pokazać w jaki sposób reagują poszczególne elementy na czynności użytkownika. Mechanizm animacji pozwala przekazać użytkownikowi co i w jaki sposób dzieje się z elementem. Animacje wprowadzają do interfejsu aplikacji czynności znane z dnia codziennego. Przykładem może być przesuwanie obiektu na ikonę kosza czy lupy na obraz, który ma być powiększony. Dodatkowo można animować przenoszenie bloków treści w celu personalizacji wyglądu aplikacji. Aplikacja internetowa, która wykorzystuje ten mechanizm to cafenews.pl, której ideą jest „poskładanie” przez użytkownika indywidualnego kanału wiadomości z różnych dziedzin.

Szczególnym rodzajem animacji obiektów typu self-healing fade jest usuwanie oraz edycja elementów treści strony WWW. Mechanizm polega na tym, że usuwany obiekt najpierw zmienia kolor na szary, a potem łagodnie zanika. Obiektem może być element listy, tabeli lub obraz. Dzięki efektowi self-healing fade użytkownik widzi co dzieje się z obiektem i nie musi tej czynności potwierdzać wysłaniem formularza. Daje to pełną kontrolę nad aplikacją i widoczny status elementów, z którymi użytkownik wchodzi w interakcję.

 2.8-self-healing
Rys. 2.9 Efekt self-healing fade w serwisie Flickr
Źródło: opracowanie własne na podstawie flickr.com

 

Należy zaznaczyć, że animacje na stronie powinno być używane oszczędnie i tylko w uzasadnionych przypadkach. Nadmierne przejścia powodują dekoncentrację i zakłócają przepływ zadań, co znacznie obniża satysfakcję użytkownika.

b) Dźwięki

Od kiedy Flash zyskał na popularności i łatwo można było dołączać efekty multimedialne do aplikacji, projektanci zaczęli nadużywać pewnych funkcji. Jednym z najgorszych pomysłów, które zdarzają się nawet obecnie jest wstawianie podkładów muzycznych do aplikacji internetowych. Badania z użytkownikami wykazały, że gwałtowna muzyka po wejściu na stronę internetową wcale nie zachęca do dalszego przeglądania, powoduje nawet efekt odwrotny. Efekty dźwiękowe powinny być używane oszczędnie i odpowiednio do zadań jakie wykonuje użytkownik. Jeśli koniecznie trzeba umieścić muzykę w aplikacji, ważne jest by użytkownik mógł nią sterować. Sterowanie powinno przypominać przyciski znane z życia codziennego (np. radio, odtwarzacze mp3). Odpowiedni boks z przyciskami ma zapewnić przejrzystość i łatwość obsługi aplikacji.

 ikona1 ikona2
Rys. 2.10 Ikony sterowania dźwiękiem na stronie
Źródło: www.templatemonster.com

 

Dźwięki w aplikacjach internetowych powinny być używane oszczędnie, gdyż mogą rozpraszać użytkownika. Można co najwyższej wykorzystać subtelne wskazówki dźwiękowe istotne z punktu wykonywanych działań.

9. Pomoc w przypadku błędów

Komunikaty o błędach powinny być wyrażone prostym językiem (bez pokazywania kodu), precyzyjnie wskazać problem, i konstruktywnie sugerować rozwiązanie.

Aplikacje RIA mają przewagę, gdyż mają możliwość wyjaśniania skomplikowanych interakcji za pomocą animacji. Jednak wyjaśnienia powinny koncentrować się bardziej na wyjaśnianiu przyczyn błędów, nie na samym ich rozwiązaniu. Użytkownik powinien mieć możliwość podjęcia działań naprawczych podczas czytania komunikatu. Komunikaty błędu w aplikacjach RIA mogą być interaktywne, oparte na dialogu i odpowiedziach użytkownika i na ich podstawie sugerować możliwe rozwiązania problemu.

10. Pomoc i dokumentacja

Mimo że aplikacje internetowe mogą być używane bez jakiejś szczególnej pomocy lub dokumentacji, projektanci często wykorzystują możliwości nowoczesnych technologii w celu stworzenia ułatwienia dla użytkowników w postaci animowanych tutoriali lub wirtualnych doradców. Jest to sposób na wyjaśnienie różnych zadań i możliwości aplikacji. Również czat z wirtualnym doradcą umożliwia interakcję użytkownika z aplikacją, przez co użytkownik pozostaje dłużej na stronie internetowej. Wyjaśnianie poszczególnych kroków w postaci animowanej, a nie tekstowej jest łatwiejsze do zrozumienia przez osoby odwiedzające serwis internetowy.

Dobrym rozwiązaniem jest pomoc kontekstowa w postaci dymków i podpowiedzi podczas używania aplikacji, które mają za zadanie udzielać wskazówek użytkownikowi w trudniejszych zadaniach oraz ułatwiać poruszanie się po aplikacji.

 2.10-dymek
Rys. 2.11 Pomoc kontekstowa w polu formularza
Źródło: opracowanie własne na podstawie ebay.com

 

a) Obsługa dodatków przez przeglądarki

Mimo że na stronach internetowych coraz więcej pojawia się elementów interaktywnych, które wykorzystują technologię Flash lub Silverlight, przeglądarki internetowe (np. Mozilla Firefox) domyślnie nie instalują wtyczek do ich obsługi. Jest to kłopotliwe w przypadku przeciętnych użytkowników Internetu, którzy wchodząc na strony internetowe nie widzą elementów wykonanych w innych technologiach niż HTML. Osoby takie nie będą wiedziały, że w danym miejscu powinno pojawić się coś innego niż tylko pusty boks i pomyślą, że jest to błąd serwisu internetowego. Brak wsparcia w takiej sytuacji powoduje, że użytkownik nie  zobaczy tego, czego chciał projektant serwisu. Dobrym rozwiązaniem jest komunikat w pustym miejscu z prośbą o zainstalowanie odpowiedniej wtyczki. Często jednak ludzie maja opór przed instalacją czegokolwiek dodatkowego, gdyż nie wiedzą o korzyściach z tego płynących. W przypadku komputerów o słabych parametrach niechęć ta jest jeszcze większa. Dlatego przeglądarki internetowe powinny domyślnie instalować dodatki w postaci Silverlight lub Adobe Flash Player, aby oszczędzić użytkownikom problemów podczas przeglądania Internetu.

 SLMedallion_PLK
Rys. 2.12 Informacja o braku wtyczki Silverlight
Źródło: www.microsoft.com/silverlight

 

Problem pojawia się również w momencie, gdy użytkownik ma wyłączoną obsługę Java Script w przeglądarce. Wiele użytkowników wyłączą Java Script, by przyspieszyć działanie przeglądarki internetowej, dlatego wiele skryptów się nie wykonuje. Często uniemożliwia to wypełnienie i zwalidowanie formularza, który wykonany jest z użyciem na przykład walidacji jQuery (biblioteka Java Script).

b) Wirtualny doradca

Obecnie popularnym rozwiązaniem w różnego rodzajach aplikacjach internetowych są interaktywne multimedia oraz wideo prezentacje. Mają one obsługiwać klientów online podobnie jak czynią to konsultanci za pomocą infolinii. Wirtualny doradca to atrakcyjnie wyglądający awatar, który przyjmuje pytania użytkownika w języku naturalnym. Użytkownik jest w stanie przeprowadzić rozmowę z wirtualnym pracownikiem za pomocą okienka czatu. Z reguły wszystkie rozmowy są rejestrowane i później analizowane przez pracowników firmy pod kątem dokładności odpowiedzi i jakości rozmowy. Zaletą wirtualnego doradcy jest całodobowa dostępność, przez co można rozwijać pozytywne relacje z klientami. Mechanizmy samoobsługowe pozwalają budować lepszy customer experience.

Ogólnopolskie badania pokazują, że 93% użytkowników denerwuje się gdy poświęcają czas na rozmowę, która nie przynosi żadnego efektu, a 89% z nich sprawdza ofertę konkurencji (www.wirtualnydoradca.pl).

Obszary zastosowania wirtualnych doradców (www.wirtualnydoradca.pl):

  • § Uatrakcyjnianie stron WWW i ułatwianie poszukiwania informacji (wirtualni eksperci, interaktywni przewodnicy)
  • § Obsługa klienta (systemy CRM, helpdesk, call center, FAQ)
  • § E-commerce (wirtualni sprzedawcy oraz agenci koszyka zakupowego) – pozwalają zwiększać konwersję oraz wspierają klientów podczas procesu zakupowego, pomagają zbierać dane z formularzy zadowolenia klienta
  • § Reklama i marketing – kampanie reklamowe, interaktywne elementy banerów, wirtualni eksperci produktów, którzy prezentują oferty i usługi, pomagając podjąć decyzję klientom
  • § Badania opinii klientów – przeprowadzanie ankiet
  • § Intranet – wirtualni doradcy na portalach pracowniczych, którzy wspierają pracowników oraz kontrahentów w wyszukiwaniu informacji i dokumentów
 inpost
Rys. 2.13 Wirtualny doradca Paczkomaty InPost
Źródło: www.paczkomaty.pl

 

Pomoc w postaci wirtualnych agentów jest innowacyjnym rozwiązaniem w zakresie tworzenia interaktywnych aplikacji internetowych. Pozwala utrzymywać kontakty z klientem nie tylko w czasie pracy ludzi w firmie, ale i w godzinach wieczornych i nocnych. Dla wirtualnych doradców nie ma znaczenia strefa czasowa, przez to firma może świadczyć usługi nie tylko w swoim kraju, lecz także na innych kontynentach. Wirtualny awatar potrafi przyciągnąć uwagę użytkownika nawet samym wyglądem i sposobem działania. Ludzie często z ciekawości zadają pytania wirtualnej postaci, by sprawdzić jej możliwości.

Powyższe wytyczne dotyczące projektowania bogatych aplikacji internetowych wskazuję elementy, na jakie powinny zwrócić uwagę osoby tworzące użyteczne interfejsy. Technologie internetowe ciągle ewoluują i codziennie pojawia się coś nowego. Bogactwo aplikacji internetowych wzmaga fakt, że komputery użytkowników oraz prędkości łącza internetowego są coraz szybsze. W innym wypadku tworzenie takich aplikacji nie miałoby sensu. Oczywiście duże znaczenie prócz projektu samego interfejsu ma jego wydajność, która uzależniona jest od jakości kodu programu.

Nielsen aż w trzech punktach zwraca uwagę na problem błędów i ich obsługi. Nie od dziś wiadomo, że użytkownicy nie czytają dokumentacji. Dopóki radzą sobie z systemem nie szukają pomocy gdzie indziej. Często jednak na stronach internetowych pojawiają się problemy z ich obsługą oraz pytania dotyczące ich funkcjonalności. Użytkownicy, którzy nie znajdują w trybie natychmiastowym pomocy, przechodzą do konkurencji. W ten sposób serwis internetowy traci użytkowników. Aplikacje RIA dają możliwość tworzenia interaktywnych interfejsów, które przykuwają uwagę odwiedzających oraz oferują pomoc i czat online przez całą dobę.

 

Źródło: Praca magisterska pt. „Ocena jakości zewnętrznej bogatych aplikacji internetowych typu e-commerce.” (J. Pytlik, Uniwersytet Ekonomiczny we Wrocławiu 2012)

Zasady projektowania

Klasycznymi zasadami projektowania interfejsu są tzw. heurystyki Nielsena (Nielsen 1990). Heurystyki Nielsena powstały jako wynik badań nad czynnikami, które kształtują odbiór użyteczności przez użytkowników. Dla dwustu zidentyfikowanych czynników cząstkowych przeprowadzono analizę czynnikową i wyznaczono dziesięć głównych charakterystyk, nazwane heurystykami Nielsena, od nazwiska Jakoba Nielsena, który nadzorował badania. Heurystyki Nielsena mają zastosowanie w ocenianiu użyteczności produktu interaktywnego oraz opisują jakość interakcji człowiek – system. Zasady Nielsena są ważnym elementem oceniania interakcji, gdyż zawierają najważniejsze aspekty wpływające na ergonomię aplikacji interaktywnych.

Kryteria ocen wg heurystyk Nielsena dotyczą następujących elementów:

  1. Status systemu.
  2. Dopasowanie między systemem a światem rzeczywistym.
  3. Kontrola i swoboda działań.
  4. Spójność i standardy.
  5. Zapobieganie błędom.
  6. Rozpoznawanie zamiast przypominania.
  7. Elastyczność i możliwość pracy na skróty.
  8. Estetyczny i oszczędny wygląd.
  9. Obsługa błędów.
  10. Pomoc i dokumentacja.

1. Widoczny status systemu

Pierwsza zasada dotyczy aspektu zapewnienia użytkownikowi  informacji na temat tego, co się dzieje aktualnie z systemem. W momencie kiedy użytkownik wejdzie w interakcję z systemem, musi być na bieżąco informowany co  w danym momencie dzieje się na jego komputerze. Aby praca z aplikacją była komfortowa, system musi zapewnić komunikaty zwrotne na czynności użytkownika. Nie można dopuścić do sytuacji, kiedy aplikacja wykonuje wewnętrzne procesy, a w tym samym momencie użytkownik nie wie, co się dzieje z jego systemem. Brak komunikatów o postępach systemu powoduje, że użytkownik jest przekonany, iż aplikacja nie wykonuje jego poleceń. Dlatego uniwersalną zasadą jest zapewnienie właściwych komunikatów zwrotnych o procesach wykonywanych przez system. Mogą to być paski postępu, komunikaty tekstowe, ikony, a także dźwięki lub animacje.

Należy zaznaczyć, że właściwy feedback systemu musi być zrozumiały dla przeciętnego użytkownika systemu. W przypadku komunikatów tekstowych jest to ważne, gdyż ludzie nie rozumieją przekazu, który składa się ze słów stosowanych tylko w kręgu informatyków. Pokazywanie statusu systemu daje użytkownikowi poczucie, że coś się dzieje z aplikacją, z którą pracuje i za chwilę będzie mógł przejść do dalszej pracy. W aplikacjach internetowych prezentowanie statusu umożliwiają technologie Rich Internet Application.

2. Dopasowanie między systemem a światem rzeczywistym.

W świecie, gdzie komputery wspomagają pracę w każdej dziedzinie życia oczekuje się, że system informatyczny będzie osadzony w rzeczywistym świecie, tak by interakcja między nim a użytkownikiem przebiegała płynnie. Błędem jest myślenie, że to użytkownik powinien dopasować się do systemu i do jego specyficznych komunikatów i zachowań. Każdy system informatyczny tworzony jest dla ludzi i musi posługiwać się naturalnym językiem dla człowieka w warstwie interfejsu. Interfejs jest nakładką na system, warstwą komunikującą się ze światem zewnętrznym. Heurystyka dopasowania pomiędzy systemem a światem zewnętrznym zwraca uwagę na sposób realizacji interfejsu w kontekście pojęć i terminów używanych przez system. Informacje pojawiające się na płaszczyźnie interfejsu powinny być napisane naturalnym językiem, używać symboli jako metafor znanych z życia obiektów. Prostym przykładem metafory może być symbol koszyka w sklepie internetowym.

Ważny jest również sposób prezentacji informacji na ekranie. Jak pokazują badania Nielsena nad interfejsem aplikacji internetowych, największy wpływ na odbiór aplikacji przez użytkownika ma architektura informacji. Ludzie gubią się gdy napotykają na skomplikowaną nawigację, niezrozumiałe nagłówki i niewłaściwie sformatowaną treść. Informacje prezentowane na ekranie powinny być porcjowane w taki sposób, by umożliwić użytkownikowi szybkie zapoznanie się treścią i wybór interesującego ich fragmentu. Dlatego ważna jest właściwa prezentacja treści, po którą użytkownik przyszedł. Informacje nieprzydatne spowalniają użytkownika i marnują jego czas. Kolejność prezentacji informacji jest równie ważna i powinna zachowywać się tak jak oczekiwał by tego użytkownik w rzeczywistości – najczęściej od ogółu do szczegółu.

3. Kontrola i swoboda działań.

Podczas pracy z systemem informatycznym czy aplikacją internetową zdarzają się pomyłki. Użytkownik często wybiera jakąś opcję przez pomyłkę lub wpisuje złe dane w formularzu. System, który monitoruje efekty pracy użytkownika musi także zapewnić możliwość cofnięcia, anulowania lub powtórzenia czynności oraz poprawienia wprowadzonych danych, bez konieczności przechodzenia od nowa wszystkich kroków przewidzianych dla danego procesu. System powinien także umożliwiać zapis dotychczasowej pracy i powrót w to samo miejsce w innym czasie. W aplikacjach internetowych  sprowadza się to do zapisywania danych przykładowo wprowadzanych w formularz i przechowywanie tych danych w pliku sesji na serwerze.

W przypadku aplikacji internetowych swoboda działań i poczucie kontroli jest równie ważne co w aplikacjach desktopowych czy mobilnych. Użytkownik musi wiedzieć gdzie aktualnie się znajduje i jak wrócić do poprzedniego okna. Nawigacja powinna być tak zbudowana by dawać użytkownikowi poczucie kontroli nad zawartością serwisu, tym samym nie ograniczając jego czynności. Jeśli użytkownik nie ma ochoty słuchać muzyki na stronie internetowej, trzeba zapewnić widoczny przycisk jej wyłączania.

4. Spójność i standardy.

Heurystyka – spójność i standardy mówi o tym, by zachowanie systemu było jednolite w każdym miejscu, w którym znajduje się użytkownik. Pożądane jest zachowanie konwencji dotyczących skrótów klawiaturowych oraz zachowań pewnych stałych elementów lub artefaktów w aplikacji. Konwencje będą inne w zależności od platformy. Te same funkcje charakterystyczne dla aplikacji desktopowych nie będą wykorzystane na stronach internetowych. Jeśli użytkownik o tym wie, nie będzie próbował z tego korzystać.

W miarę korzystania z danych systemów, użytkownik uczy się obsługi i zapamiętuje stałe elementy dotyczące funkcjonalności. System powinien reagować na działania użytkownika w sposób przewidywalny. Przewidywalność zapewnia stosowanie się do konwencji podczas projektowania i implementacji. W spójności ważny jest również wygląd (ang. design). W aplikacjach internetowych jest to szczególnie ważny aspekt w procesie pozytywnego budowania wizerunku serwisu w oczach użytkowników. Spójność wizualna dotyczy takich elementów jak budowa okien i stron, układu przycisków, ikon oraz kolorystyki.

5. Zapobieganie błędom.

W projektowaniu zorientowanym na użytkownika (ang. User Centered Design) heurystyka o zapobieganiu błędów ma bardzo wielkie znaczenie. Użytkownicy nie lubią, kiedy aplikacja zawiera błędy i nie potrafią sobie z nimi poradzić. Zazwyczaj wtedy przestają jej używać, a w przypadku aplikacji internetowych nie wracają na stronę internetową. Wiele uwagi poświęca się na prawidłowe formułowanie komunikatów o błędach, natomiast lepsze korzyści przynosi zapobieganie błędom.

Możliwości eliminowania błędów jest bardzo wiele i zależą od konkretnych aplikacji. Projektant systemu powinien umieć przewidzieć sytuacje, w których mogą wystąpić błędy i zabezpieczyć system przed ich wystąpieniem. W związku z tym stosuje się wiele metod obsługi błędów. Obszary, w których użytkownicy najczęściej popełniają błędy to wprowadzanie danych przez różnego rodzaju formularze, poprawność tych danych oraz wybór opcji. Należy zapobiegać takim błędom, a nie informować o ich zaistnieniu. Przykładowe czynności, które da się zaimplementować na poziomie tworzenia oprogramowania to:

  • § walidacja treści pod kątem gramatyki, poprawności nazw i ortografii;
  • § sprawdzanie poprawności poleceń wierszowych, ścieżek internetowych;
  • § walidacja wpisywanych treści lub parametrów o jednoznacznym formacie (np. kod pocztowy);
  • § automatyczna weryfikacja poszczególnych kroków użytkownika oraz informowanie go o prawidłowym lub źle wykonanym zadaniu.

6. Rozpoznawanie zamiast przypominania.

Jak pokazały badania Millera (1956) człowiek nie potrafi zapamiętać jednorazowo więcej niż 5 – 9 porcji (ang. chunks) informacji. Oznacza to, że pamięć krótkotrwała u człowieka ma bardzo ograniczoną pojemność. Człowiek jest w stanie  przywołać od 5 do 9 zapamiętanych elementów. Stąd zasadę tę nazwano prawem „siedem plus minus dwa”. Pamięć krótkoterminowa umożliwia tymczasowe kodowanie, przechowywanie i wywoływanie informacji podczas bieżącej pracy. Cechą pamięci krótkotrwałej jest wrażliwość na otoczenie i kontekst w jakim informacja dociera do człowieka. Powoduje  to, że pewne informacje są zapamiętywane szybciej a inne są utracone. Pamięć krótkotrwała stosuje mechanizm nadpisywania danych, dlatego też człowiek nie jest w stanie zapamiętać za jednym razem więcej niż 9 elementów informacji. Sposób zapamiętywania przez człowieka ma duży wpływ na projektowanie architektury informacji.

Heurystyka – rozpoznawanie zamiast przypominania – mówi o tym, że należy tak skonstruować produkt programowy, by użytkownik nie musiał niczego pamiętać, dotyczącego jego obsługi i układu. Należy umożliwić mu rozpoznawanie obiektów, przez stosowanie się do konwencji projektowych interfejsu. Kazanie użytkownikowi pamiętać w jaki sposób i do czego kieruje każdy przycisk lub informacje kolejnych etapów przejścia przez proces zadaniowy, powoduje znaczne obciążenie pamięci użytkownika, w rezultacie niechęć i zmęczenie interfejsem. Ważna jest również nawigacja, która powinna być zawsze widoczna i zawierać jednoznaczne nagłówki, które są zrozumiałe przez przeciętnego użytkownika. Odstępstwa od tych norm nierzadko powodują klęskę serwisu internetowego, którego interfejs nie jest intuicyjny dla użytkownika i niezrozumiały. Zasada ergonomii mówi, by nie zmuszać użytkownika do pamiętania czegokolwiek w serwisie co dotyczy interfejsu lub minimalizować to pamiętanie. Rozpoznawanie (ang. recognition) jest szybszą metodą przywoływania informacji posiadanych wcześniej, najczęściej o wzorcach lub procedurach.

7. Elastyczność i możliwość pracy na skróty.

W miarę używania różnych aplikacji, użytkownicy uczą się go i w ten sposób obsługa jest łatwiejsza. Oczekują, że powtarzalne czynności oraz sposób ich wykonania, system zapamięta i nie będzie trzeba było wykonywać pewnych operacji od nowa. Elastyczność systemu polega na tym,  by żmudne i powtarzalne czynności były wspomagane przez system w miarę jego użytkowania. Oczekuje się, że system będzie pamiętał określone operacje oraz wprowadzane dane i w razie potrzeby podpowiadał lub sam wykonywał pewne procesy.

Powiedzenie, że to system powinien uczyć się od użytkownika oraz dostosowywać się do niego, nie jest już dzisiaj nowością. Wykorzystywanie różnych metod wspomagania pracy oraz interakcji ma powodować, że system rozumie zamierzenia osoby, która go obsługuje. W tym celu stosuje się metody sztucznej inteligencji oraz wnioskowanie, które na bieżąco weryfikują zgromadzoną wiedzę i umieją wspomóc użytkownika podczas pracy. W praktyce stosuje się często mniej skomplikowane metody, które łatwo zaimplementować w różnych aplikacjach, szczególnie internetowych.

Elementy, które w znaczny sposób przyspieszają czynności użytkownika to autouzupełnianie pola tekstowego, listy ostatnio używanych obiektów i funkcji, paski szybkiego dostępu do historii i elementów „ulubionych. Należy także stosować skróty klawiaturowe zgodnie z przyjętą konwencją dotyczącą platformy, na jakiej działa system informatyczny. Użytkownik wiedząc, na jakiej platformie pracuje w danym momencie, będzie mógł przypomnieć sobie jakich skrótów używać. Inaczej będą działały skróty klawiaturowe w aplikacji desktopowej, inaczej na stronach internetowych.

8. Estetyczny i oszczędny wygląd.

Projekt interfejsu każdego systemu informatycznego, niezależnie czy jest to aplikacja desktopowa, serwis internetowy czy aplikacja na urządzenia mobilne, nastręcza wiele trudności. Nie chodzi tutaj o sam projekt graficzny, który może być różny i jest kwestią gustu. Oczywiście istnieją zasady, co do sposobu tworzenia grafiki, tak by użytkownikowi zapewnić maksymalny komfort w trakcie używania aplikacji. Ważna jest natomiast warstwa dialogu, która jest kluczem do zrozumienia przekazu aplikacji przez użytkownika.

Kiedy osoba korzystająca z aplikacji wchodzi do serwisu internetowego, ma jakiś cel do zrealizowania. Każda informacja prezentowana na ekranie musi być przemyślana przez projektanta pod kątem semantyki i sposobu prezentacji. Jak już wcześniej zostało wspomniane największy procentowy udział w elementach sprawiających trudność użytkownikom ma architektura informacji (na podstawie badań Nielsena). Ma to ogromne znaczenie w przypadku aplikacji internetowych, które narażone są na szybkie porzucenie przez użytkowników, w razie napotkania przez nich błędów.

Użytkownicy sieci nie lubią czytać. Skanują treść, poprzez zerkanie na nagłówki, listy wypunktowane oraz elementy grafiki (najczęściej wizerunku twarzy). Wg Nielsena osoba wchodząca do serwisu internetowego, ma mniej niż dwie minuty na zapoznanie się z nim. Oznacza to, że projektant w ciągu dwóch minut musi zainteresować użytkownika zawartością serwisu. Dlatego nie stosuje się długich niepodzielonych na akapity treści, szczególnie na głównych stronach serwisów. Każde kolejne kroki, jakie wykonuje użytkownik mają go zbliżać do zrealizowania celu, którym może być wykonanie jakiegoś zadania, dotarcie do źródła informacji, wypełnienie formularza lub zakup produktu w sklepie internetowym. Elementy prezentowane w każdym kroku dotarcia do celu muszą prezentować jasne i zwięzłe informacje. Jednoznaczny przekaz informuje użytkownika, że jest na prawidłowej ścieżce dotarcia do celu. Im mniej elementów zostaje prezentowanych na kolejnych ekranach, tym łatwiej użytkownikowi skupić się na zadaniu, bez rozpraszania uwagi na nieistotnych elementach. Każda treść w serwisie powinna być tak skonstruowana, by przeciętny użytkownik mógł ją bez problemu zrozumieć. W znacznym stopniu zależy to także od grupy docelowej użytkowników. Jednak, gdy grupa docelowa nie jest znana stosuje się w dialogach prosty język na poziomie licealnym lub niżej.

9. Pomoc w obsłudze błędów.

Podobne zasady dotycząc jak w przypadku poprzedniej heurystyki formułowania treści dotyczą komunikatów o błędach. W każdej aplikacji zdarzają się błędy, których projektant nie zabezpieczył albo nie miał pojęcia, że mogą wystąpić. Każdy użytkownik po swojemu dochodzi do celu i wykonuje zadania. Mimo skomplikowanych testów, często nie da się przewidzieć wszystkich możliwości, jakie stosują użytkownicy. Dlatego komunikaty błędów powinny być pogrupowane w odpowiednie typy błędów. W ten sposób treść każdego komunikatu będzie obsługiwała błędy danej grupy.

Niektórym jednak błędom można przyporządkować konkretną przyczynę i poinformować użytkownika o sposobie jej naprawy. Każdy prawidłowo wykonany system musi zapewnić pomoc w diagnozowaniu i poprawianiu błędów przez użytkowników. Implikuje to zasadę dotyczącą treści przekazu komunikatu, który musi być podany językiem użytkownika. Każdy komunikat o błędzie, którego treścią jest numer błędu oraz informacje zrozumiałe jedynie w gronie informatyków, powoduje irytację przeciętnego użytkownika.

Ważny jest również sposób podawania komunikatów o błędzie. Zgodnie z zasadą tej heurystyki projektant systemu musi zapewnić pomoc użytkownikowi, nie obwiniając użytkownika za wystąpienie błędu, zapewnić mu powrót do stanu sprzed wystąpienia błędu. Wszelkie informacje podawane na komunikatach muszą mieć zwięzły i zrozumiały przekaz, nie mogą zawierać słów typowo informatycznych. Jeśli komunikaty nie mogą pomieścić całej treści na temat rozwiązania problemu, powinien pojawić się odnośnik kierujący do dokumentacji systemu.

10. Pomoc i dokumentacja.

Zapewnienie dokumentacji o systemie jest ważne. Nie każda natomiast dokumentacja pomocy nadaje się do używania przez przeciętnego użytkownika.  Każdy podręcznik obsługi dedykowany użytkownikom musi być odpowiednio napisany. Do ludzi bardziej przemawiają obrazy lub treści multimedialne, niż sam tekst. Dlatego dobrą praktyką jest umieszczanie krótkich filmów instruktażowych w przypadku aplikacji internetowych, których obsługa nie jest oczywista. Informacje podawane w instruktażu lub dokumentacji muszą być podane w atrakcyjny sposób, czyli także stosować się do zasad o właściwym rozplanowaniu tekstu.

Dlatego że heurystyki Nielsena są uniwersalne dla każdego systemu informatycznego, można je zastosować w przypadku konkretnych aplikacji internetowych (na przykład sklepów internetowych) i na ich przykładzie budować zestaw dobrych praktyk.

Oprócz dziesięciu heurystyk Nielsena istnieją dodatkowe heurystyki  wyznaczone przez innych badaczy interakcji użytkownik – komputer. Donald A. Norman zwraca między innymi uwagę na następujące elementy i zasady projektowania:

Widoczność

Ważne elementy interfejsu powinny być widoczne dla użytkownika w każdym miejscu podczas korzystania z aplikacji. Chodzi tu głównie o elementy nawigacyjne oraz elementy mające pomóc w zrozumieniu działania poszczególnych funkcji (na przykład wskazówki po najechaniu na element lub pomoc kontekstowa).

Odwzorowania

Zasadą nadrzędną projektowania i tworzenia wszelkiego oprogramowania jest maksymalne ułatwienie użytkownikowi posługiwania się nim. Najskuteczniejszym sposobem aby to osiągnąć jest trafne odwzorowanie zamierzeń użytkownika na zachowanie poszczególnych elementów systemu. Stosowanie odpowiednich metafor w aplikacji znanych użytkownikowi z życia codziennego takich jak symbole, szablony pozwalają zrozumieć przeznaczenie obiektów lub przewidzieć wynik operacji. Używanie aplikacji nie powinno bazować na nauce wszystkich jej funkcji i przeznaczenia obiektów, lecz na skojarzeniach. Skojarzenia pozwalają na płynną interakcję użytkownik – system, gdyż odnoszą się do rzeczywistości użytkownika, a nie abstrakcji.

Ułatwienia (afordancje)

Wygląd obiektów w systemie powinien jednoznacznie wskazywać do czego służą i jak należy go używać. Użytkownik zaczynający pracę z konkretnym systemem posiada już pewnie doświadczenie ze świata realnego dotyczące używania różnych przedmiotów oraz kolejności zachodzących procesów, dlatego w celu ułatwienia stosuje się analogie operacyjne.

Obok zasad zaproponowanych przez Normana, naukowcy (między innymi Schneiderman, Tognazzini,  Krug) sformułowali jeszcze kilka innych zasada zasługujących na uwagę:

Intuicyjność (antycypacja)

Dobrze skonstruowany system to taki, który potrafi analizować poszczególne kroki wykonywane przez użytkownika, wyciągać wnioski i dopasować swoje funkcjonalności do jego potrzeb. Można powiedzieć, że inteligentny system potrafi współpracować z użytkownikiem, domyśla się jaki jest następny krok do wykonania oraz podpowiada i ułatwia jego wykonanie. Przykładem mogą być formularze, które pamiętają dane raz wprowadzone przez osobę oraz umieją je przywrócić w odpowiednim momencie w innym kontekście. Również układ – szablon aplikacji może być intuicyjny co znaczy, że elementy których użytkownik się spodziewa w danym miejscu (gdyż na przykład nabył już taką wiedzę w innym systemie), faktycznie się tam znajdują, co więcej mają te same symbole i kolorystykę. Taka antycypacja systemu powoduje, że staje się on przyjazny użytkownikowi i ułatwia wykonywanie codziennych zadań.

Poczucie kontroli

Użytkownik inicjując większość operacji w systemie, powinien mieć nad nimi kontrolę i wiedzieć co się wydarzy w momencie naciśnięcia jakiegoś przycisku. Sekwencja rozpoczętych działań powinna mieć swój początek, środek oraz zakończenie, sygnalizując użytkownikowi na jakim etapie procesu aktualnie się znajduje. Przykładem może być proces zamówienia w sklepie internetowym, którego kroki powinny być z góry znane klientowi. Dodatkowo powinna być możliwość cofnięcia się do poprzedniego kroku w celu poprawienia wcześniej wprowadzonych danych. Natomiast elementy aplikacji działające w tle, powodujące niechciane zmiany w trakcie pracy, muszą dać się wyłączyć przez użytkownika, któremu działania „w tle” mogą przeszkadzać (przykład: zmiana ceny po doliczeniu kosztów przesyłki, o której klient nie został wcześniej poinformowany).

Przewidywalność

Przewidywalność łącze się z poczuciem kontroli, gdyż dotyczy takich czynności jak poprawa wprowadzonych danych i błędów, odwracalność akcji. Dodatkowo cechą systemu powinno być wsparcie zadań użytkownika w oczekiwanym zakresie (automatyzacja powtarzalnych i standardowych czynności) i w oczekiwany sposób (użytkownika wie jak dana funkcja zadziała). Poza tym przewidywalny powinien być czas reakcji aplikacji, gdyż dłuższe oczekiwanie na odpowiedź zniechęca użytkownika do dalszej pracy. Najgorzej jest w przypadku aplikacji internetowych, gdyż serwis WWW, który każe długo czekać na załadowanie się, traci na odwiedzinach, a użytkownicy wolą udać się do konkurencji. Optymalnym czasem reakcji jest czas do 0,1 s, natomiast powyżej 10 s jest niedopuszczalne (Karwatka 2007).

Elastyczność

Elastyczne oprogramowanie to takie, które potrafi się dopasować do profilu użytkownika i jego indywidualnych potrzeb. Aplikacja powinna umożliwiać wybór metody interakcji między innymi sposobu wykonywania operacji, prezentacji wyników na kilka sposobów. W Internecie jest to możliwe dzięki bogatym aplikacjom internetowym, które umożliwiają na zmiany w interfejsie w czasie rzeczywistym bez dodatkowego przeładowania strony. W ten sposób użytkownik aplikacji szybciej dopasuje widok wedle własnych upodobań.

Wszystkie powyższe zasady pierwotnie powstały dla oprogramowania stacjonarnego, jednak są również słuszne dla interfejsu WWW, który odgrywa coraz większą rolę we współczesnej informatyce. Spowodowane jest to tym, że większość potrzebnych aplikacji oraz oprogramowania biznesowego instalowanych jest w chmurze, stąd przeglądarka internetowa jest dla nich głównym medium. Z pewnością wraz z postępem techniki niektóre zasady będą stawały się mniej ważne, a przybędą kolejne inne (przykładem mogą być aplikacje na urządzenia mobilne, w których interfejs jest głównym wyznacznikiem ich użyteczności). W przypadku projektowania zorientowanego na użytkownika powyższe wytyczne jak potwierdzają badania oraz praktyka projektowa przynoszą wymierne rezultaty.

W zależności od tego, jakie jest przeznaczenie tworzonego projektu interfejsu WWW (strona akademicka, sklep internetowy) istnieją pewne wytyczne dotyczące konkretnego obszaru ich stosowania. W dalszej części pracy mowa będzie o projektowaniu aplikacji e-commerce, dlatego warto przytoczyć parę uniwersalnych zasad dotyczących właśnie interfejsu dla aplikacji handlu elektronicznego.

Na przełomie ostatnich lat badacze (między innymi Nielsen, Travis) próbowali sformułować rekomendacje dotyczące projektowania interfejsu dla aplikacji e-commerce. Travis (2003) podaje następujące kroki:

  • § Analiza i zrozumienie potrzeb klientów dla konkretnego projektu
  • § Stworzenie profili potencjalnych klientów i przeprowadzenie testów z użytkownikami, którzy je reprezentują
  • § Analiza zapytań klientów istniejącego już sklepu w celu zdiagnozowania występujących problemów
  • § Zrozumienie kontekstu użycia aplikacji przez klientów i jej kluczowych celów
  • § Przeprowadzenie analizy zadania dla jednej z najważniejszych aktywności

 Kuan (2003) dowodzi, że istnieją cztery główne wymiary użyteczności e-commerce:

  • § Użyteczność aplikacji: projektanci powinni zwracać uwagę na cechy, które zwiększają zadowolenie użytkowników z zakupów (shopping experience). Przykładowo sklep sprzedający wycieczki powinien umożliwiać także kupno biletu, wynajęcie samochodu czy zakup ubezpieczenia w ramach jednej witryny.
  • § Jakość interfejsu: projektanci powinni zwrócić uwagę na łatwość nawigacji oraz płynną interakcję.
  • § Jakość informacji: dostarczanie relewantnej informacji, ułatwiającej użytkownikowi podjęcie decyzji.
  • § Jakość usług: zapewnienie interaktywności oraz bezpieczeństwa, a także odpowiedniej wyszukiwarki oraz możliwości porównania.

Z kolei Rohn (1998) wskazuje na następujące elementy w procesie projektowania e-commerce:

  • § Globalna nawigacja, która powinna dawać odpowiedź na 3 podstawowe pytania: Gdzie aktualnie znajduje się użytkownik? Gdzie był poprzednio? oraz Gdzie może się udać?
  • § Przeglądanie i wyszukiwanie: produkty odpowiednio skategoryzowane, sortowanie (szczególnie wg ceny) oraz porównywanie podobnych produktów.
  • § Widok produktu: powinien zawierać szczegółowe zdjęcia produktu, cenę, dokładny opis, dostępność produktu na magazynie, informacje o gwarancji i przesyłce.
  • § Wyszukiwarka produktów uwzględniająca słowa kluczowej, meta tagi oraz odpowiednie odnośniki.
  • § Koszyk pokazujący informacje o kosztach sumarycznych, dający modyfikować ilość oraz usuwać produkty, wyszczególniający kroki do finalizacji zakupu, szczegóły dostawy. Użytkownik powinien dostać wiadomość e-mail potwierdzającą zakup.

Jak można zauważyć powyższe wytyczne wskazują głównie na takie elementy jak nawigacja, szczegółowy opis produkty, możliwość sortowania i filtry oraz jakość informacji. Oczywiście to nie wszystko, co można wyróżnić dla oprogramowania e-commerce. Obecnie wiele elementów interfejsu aplikacji e-commerce zależy od zastosowanej technologii, która pozwala na implementowanie dodatkowych cech ułatwiających użytkownikom poruszanie się po sklepie online, tym samym zwiększając użyteczność serwisu.

Źródło: Praca magisterska pt. „Ocena jakości zewnętrznej bogatych aplikacji internetowych typu e-commerce.” (J. Pytlik, Uniwersytet Ekonomiczny we Wrocławiu)