Kiedy używać?

Akordeon jest używany do porządkowania treści lub tworzenia nawigacji. Stworzenie menu w formie akordeonu jest szczególnie zasadne w następujących sytuacjach:

• Gdy na nawigację przeznaczono niewiele przestrzeni.
• Gdy jednoczesne wyświetlenie zawartości wszystkich paneli zaburzyłoby przejrzystość serwisu.
• Gdy serwis ma być podzielony na kilka obszarów, które powinny mocno wyróżniać się od siebie.
• Gdy w architekturze informacji serwisu nie przewidziano stron głównych dla kluczowych działów.

Odpowiednik akordeonu, ale bez możliwości dowolnej zmiany paneli, bywa wykorzystywany także w innych sytuacjach. Np. w trakcie procesu zakupowego w oprogramowaniu sklepowym RedCart lub podczas rejestracji konta w Alior Banku.

Dlaczego używać?

Akordeon zapewnia prosty do zrozumienia i przejrzysty sposób prezentowania większej liczby informacji. Pomaga optymalizować wykorzystanie przestrzeni tak, aby użytkownik posiadał szybki dostęp do ukrytych informacji.

Jak używać?

Wykorzystując akordeon warto zwrócić uwagę na poniższe rady:

• W akordeonie umieść opcje tworzące logiczną grupę.
• W przypadku użycia akordeonu do budowy głównej nawigacji panelami powinny być opcje najwyższego poziomu w hierarchii serwisu, a ich zawartość powinny tworzyć opcje niższego poziomu.
• Unikaj tworzenia akordeonów wewnątrz innych akordeonów. Byłoby to rozwiązanie trudne w użyciu.
• Najważniejszy panel akordeonu może być domyślnie otwarty.
• Kliknięcie w nagłówek panelu (w zależności od projektu cały graficzny obszar nagłówka albo tylko tekst) powinno spowodować wyświetlenie jego zawartości.
• Najczęściej otwarty jednocześnie jest tylko jeden panel. Niektórzy decydują się jednak na umożliwienie wyświetlenia jednocześnie zawartości wielu paneli.
• Zmiana otwartego panelu nie powinna powodować odświeżenia strony, a raczej być oparta o JavaScript.
• Najlepiej, aby otwarcie i zamknięcie panelu było połączone z animacją.
• Niekiedy poszczególne panele mogą się otwierać po wskazaniu kursorem przez użytkownika. Szczególnie w dynamicznych serwisach o charakterze rozrywkowym.

Więcej przykładów

Głodny wiedzy? Przeczytaj na blogu teksty w kategorii analityka webowa.

Kiedy używać?

Punktów startowych używa się na stronie głównej. W przypadku rozbudowanych serwisów punkty startowe mogą być wykorzystywane także na stronach głównych działów. Punkty startowe nie są potrzebne małym witrynom o prostej architekturze informacji. Są natomiast tym ważniejsze, im bardziej rozbudowana jest struktura witryny. Częściej znajdują zastosowanie w przypadku witryn firmowych i korporacyjnych umożliwiając dostęp do głównych punktów oferty, niż np. w przypadku portalów tematycznych.

Dlaczego używać?

Dzięki punktom startowym użytkownik łatwo może dostać się do kluczowych treści i nie musi w tym celu odwiedzać wielu podstron serwisu lub korzystać z wyszukiwarki. Dodatkowo dzięki punktom startowym użytkownik może szybko zrozumieć podstawową zawartość witryny znajdując się jeszcze na stronie głównej.

Jak używać?

Umieść w punktach startowych treści kluczowe z punktu widzenia użytkownika serwisu. Punkty startowe mogą także posłużyć do promowania treści ważnych z punktu widzenia celów biznesowych witryny. Możesz stworzyć więcej niż jeden punkt startowy, jednak wykorzystanie więcej niż trzech lub czterech może nadmiernie skomplikować serwis przez co utracą one swoją rolę ułatwiającą nawigowanie i eksplorację serwisu. Wykorzystanie więcej niż jednego punktu startowego pozwala podzielić linki na logiczne części.

Więcej przykładów

Głodny wiedzy? Przeczytaj na blogu teksty w kategorii: optymalizacja konwersji.

Kiedy używać?

Karuzeli warto używać w sytuacji, gdy chcesz umożliwić użytkownikowi przejrzenie większej grupy elementów, ale nie chcesz rozpraszać jego uwagi zbyt dużym wyborem w jednym momencie. Karuzela najczęściej jest stosowana dla prezentacji elementów wizualnych, jak okładki książek, filmów, zdjęcia innych produktów lub wizualizacje 3D.

Przykładowe sytuacje w których możesz zastosować wzorzec karuzeli to między innymi:

• Przekaz istotnych informacji na stronie głównej. Kilka bloków składających się z tekstu i grafiki może być przesuwane w ramach karuzeli.
• Lista polecanych produktów w sklepie internetowym. Najczęściej wyświetlany jest więcej niż jeden produkt jednocześnie.

Dlaczego używać?

Istotną zaletą karuzeli jest możliwość umieszczenia relatywnie dużej liczby informacji na małej przestrzeni, co w wielu sytuacjach ma bardzo duże znaczenie. Karuzela może także zwiększyć skupienie użytkownika i pozwala mu zapoznać się z dużą liczbą danych bez przytłaczania go ich natychmiastowym wyświetleniem. Karuzela zachęca również do aktywnej interakcji z serwisem wpływając na zaangażowanie użytkownika. Zarazem karuzela jest mechanizmem nawigacyjnym łatwym do zrozumienia

Jak używać?

Zawartość karuzeli w większości przypadków stanowią nieduże elementy graficzne (np. okładki książek, zdjęcia produktów) lub duże obszary z ilustracjami i opisem tekstowym. Tworząc karuzelę możesz zastosować się do poniższych rad:

• W przypadku prezentacji dużych obszarów graficznych w danym momencie nie powinien być prezentowany więcej niż jeden obszar.
• Kolejne elementy karuzeli mogą być automatycznie przesuwane. Jednak po samodzielnym wybraniu jednego z elementów automatyczne przesuwanie powinno zostać zatrzymane.
• Zapewnij mechanizm nawigacyjny pozwalający użytkownikowi zrozumieć w którym miejscu karuzeli aktualnie się znajduje oraz umożliwiający łatwe przejście do kolejnych obszarów.

Do najpopularniejszych form nawigowania w karuzeli należą:

• Duże strzałki nawigacyjne umieszczone po lewej i prawej stronie karuzeli.
• Małe elementy nawigacyjne w formie kwadratów lub okręgów umieszczone w dolnej części karuzeli. Element symbolizujący aktualnie przeglądany obszar wyróżnia się graficznie.
• Sekwencja kolejnych wizualizacji 3D, gdzie kolejne elementy same w sobie stanowią mechanizm nawigacyjny.
• Tytuły kolejnych obszarów w formie zakładek lub prostokątów umieszczonych obok głównego obszaru karuzeli.

Nie można wymienić jednoznacznego ograniczenia liczbowego elementów znajdujących się w karuzeli. Na ogół jest to kilka lub góra kilkanaście elementów. Można jednak spotkać karuzele zawierające nawet kilkadziesiąt elementów.

Więcej przykładów











Głodny wiedzy? Przeczytaj na blogu teksty w kategorii service design.

]]> http://www.wzorceusability.pl/karuzela/feed/ 1 http://www.wzorceusability.pl/siatka/ http://www.wzorceusability.pl/siatka/#comments Sun, 27 Jun 2010 19:49:10 +0000 Bartek Dymecki http://www.beta.wzorceusability.pl/?p=294 Siatka (ang. grid) jest sposobem podziału układu strony przy użyciu proporcjonalnej, geometrycznej struktury. Poszczególne elementy serwisu mogą być umieszczone w miejscach wyznaczonych przez niewidzialną dla oka użytkownika siatkę (widoczne są jedynie skutki jej zastosowania) i adekwatnie do niej wyrównane w pionie lub jednocześnie w pionie i poziomie.

Kiedy używać?

Trudno wyobrazić sobie sytuację w której użycie siatki nie byłoby zasadne. Im bardziej skomplikowana jest strona i więcej informacji zawiera, tym siatka ma większe znaczenie. Siatki są często stosowane np. w serwisach firmowych i informacyjnych.

Siatka ma mniejsze znaczenie dla stron o charakterze artystycznym, np. w portfolio fotografa albo serwisie agencji interaktywnej.

Dlaczego używać?

Siatka wprowadza do strony porządek, logikę, strukturę i nadaje układowi strony balans dzięki któremu jest on łatwiejszy w zrozumieniu, skanowaniu wzrokiem i użyciu

Jak używać?

Jedną z metod utworzenia siatki jest podział strony w pionie na równe części. Możesz wyobrazić sobie, że strona jest podzielona przy użyciu niewidocznych dla oka linii. Na przykład strona o szerokości 960 pikseli może zostać podzielona na 12 kolumn o szerokości 60 pikseli każda. Każda kolumna może więc być wielokrotnością 60 pikseli. Siatka wyznacza także odstępy między kolumnami, które nie mogą być mniejsze niż 60 pikseli.

Dodatkowo elementy mogą być wyrównane w poziomie z zachowaniem proporcjonalnych odległości.

Jedną z metod tworzenia siatki może być użycie 960 Grid System. Jest gotowy zestaw stylów CSS pozwalający na łatwe utworzenie pionowej siatki o takiej szerokości.



Zrzut ekranu demonstrujący rozwiązanie 960 Grid System. Strona z tak zastosowaną siatką może być dzielona na wiele kolumn i każda z nich będzie posiadać proporcjonalną szerokość. 960 Grid System pozwala także na zastosowanie systemu 24-kolumnowego w którym każda kolumna ma szerokość 30 pikseli.

Tworzenie tak dokładnie wyliczonej siatki nie zawsze jest konieczne lub możliwe. Pomimo tego elementy gridu, takie jak proporcjonalne, spójne odstępy wewnętrzne, marginesy i szerokości kolumn odgrywają zawsze ważną rolę w projekcie układu serwisu oraz projekcie graficznym.

Więcej przykładów









Głodny wiedzy? Przeczytaj na blogu teksty w kategorii Axure.

]]> http://www.wzorceusability.pl/siatka/feed/ 0 http://www.wzorceusability.pl/autouzupelnianie/ http://www.wzorceusability.pl/autouzupelnianie/#comments Sun, 27 Jun 2010 19:42:17 +0000 Bartek Dymecki http://www.beta.wzorceusability.pl/?p=292 Autouzupełnianie to technika wyświetlania podpowiedzi użytkownikowi wpisującemu tekst do pola formularza.

Kiedy używać?

Autouzupełnianie warto wykorzystywać w następujących sytuacjach:

• Gdy istnieje ograniczona liczba opcji, które można wpisać w pole wyszukiwania, ale jest ich zbyt wiele, aby wyświetlić je poprzez formularz z opcją wyboru lub w inny sposób. Np. w porównywarce cen, sklepie internetowym, przy wyborze miasta lub nazwy firmy.
• Gdy duże znaczenie ma prędkość wpisywania danych.
• Gdy mechanizm autopodpowiedzi może odgadnąć, co miał na myśli użytkownik wpisujący zapytanie.
• Gdy formularz ma oferować dodatkowe funkcje, np. dodanie do serwisu elementu, który nie został odnaleziony.

Dlaczego używać?

Autouzupełnianie ułatwia wybór spośród dużej liczby opcji. Wybór opcji spośród podpowiedzi jest szybszy niż samodzielne wpisywanie tekstu, szczególnie jeśli chodzi o dłuższe i bardziej skomplikowane nazwy. Zapobiega także błędom pisowni.

Autouzupełnianie może przekazywać także dodatkowe informacje, jak uzupełniający opis, ilustracja lub liczba wyników dla każdej z podpowiedzi.

Jak używać?

Tworząc autouzupełnianie przestrzegaj następujących reguł:

• Podpowiedzi powinny wyświetlić się pod polem formularza do którego użytkownik wpisuje tekst. Nie powinno to wymagać od niego wykonywania żadnych dodatkowych akcji.
• Dostosuj do zawartości serwisu minimalną liczbę liter na które reaguje formularz.
• Po wyświetleniu listy użytkownik powinien móc wybierać pozycję za pomocą myszy lub przycisków strzałek na klawiaturze.
• Powinien istnieć specjalny przycisk zamykający formularz. Również naciścnięcie przycisku [ESC] na klawiaturze powinno zamknąć listę podpowiedzi.
• Ogranicz listę podpowiedzi do najbardziej trafnych. Nie chcesz, aby użytkownik został przytłoczony listą zawierającą kilkadziesiąt różnych wyników.
• Jeśli to ważne, to do poszczególnych pozycji możesz dodać dodatkowy opis lub inne elementy, np. miniaturę zdjęcia. Jest to uzależnione od typu zawartości z jakim masz do czynienia.

Więcej przykładów








Głodny wiedzy? Przeczytaj na blogu teksty w kategorii projektowanie.

]]> http://www.wzorceusability.pl/autouzupelnianie/feed/ 1 http://www.wzorceusability.pl/formularz-logowania/ http://www.wzorceusability.pl/formularz-logowania/#comments Sun, 27 Jun 2010 19:41:20 +0000 Bartek Dymecki http://www.beta.wzorceusability.pl/?p=290 Formularz logowania jest podstawowym elementem każdego serwisu pozwalającego użytkownikom na zakładanie kont. Łatwy w obsłudze, zlokalizowany we właściwym punkcie serwisu i posiadający wszystkie niezbędne opcje formularz logowania ma więc znaczny wpływ na skuteczność serwisu.

Kiedy używać?

Zawsze, gdy użytkownicy mogą zakładać konta w serwisie w celu między innymi przechowywania informacji, korzystania z funkcji lub personalizacji działania serwisu.

Jak używać?

Formularz logowania może występować w różnych miejscach serwisu. Oto kilka popularnych podejść do lokalizacji formularza:

• Link kierujący do formularza umieszczony w prawym górnym rogu serwisu. Najczęściej razem z linkiem kierującym do strony rejestracji.
• Sam formularz umieszczony w prawym górnym rogu strony. Na ogół w układzie poziomym, choć nie zawsze (np. w serwisie Blip.pl.
• Formularz umieszczony w innym miejscu serwisu, ale w strefie serwisu widocznej bez przewijania okna przeglądarki (nawet na mniejszym ekranie, np. w przypadku netbooka). Na ogół w układzie pionowym.

W przypadku pierwszym, gdy w górnej części strony znajduje się jedynie łącze do formularza, może on zostać umieszczony na osobnej stronie lub wyświetlany poprzez JavaScript. Tak działa formularz logowania np. w serwisie Firmlet.pl. Jest to praktyczne i łatwe w użyciu rozwiązanie.

Gdy formularz jest opublikowany w innym miejscu serwisu może być widoczny jedynie na stronie głównej lub na wszystkich podstronach. Jednak wiele serwisów i tak publikuje łącze do formularza w prawym górnym rogu (np. GoldenLine.

Formularz logowania powinien być także wyświetlany zawsze, gdy użytkownik próbuje załadować stronę, która wymaga logowania, a aktualnie nie jest zalogowany w serwisie. Po zalogowaniu powinien zostać przekierowany do strony, którą próbował wyświetlić.

Obecnie w wielu serwisach nie rozdziela się adresu e-mail użytkownika i jego loginu w serwisie. Dzięki temu użytkownik nie jest zmuszony do zapamiętywania loginu przez co korzystanie z serwisu staje się prostsze. Oczywiście użycie adresu e-mail jako loginu nie wyklucza wyboru przez użytkownika osobnej nazwy widocznej dla innych użytkowników serwisu.

Do charakterystycznych elementów formularza logowania należą:

• Identyfikujący go nagłówek wskazujący użytkownikowi na możliwość zalogowania się.
• Dwa pola formularza i etykiety tekstowe, np. “e-mail” i “hasło” lub “użytkownik” i “hasło”. Alternatywą jest umieszczenie opisu bezpośrednio w polach formularza.
• Przycisk formularza, np. “zaloguj”.
• Pole typu “checkbox” pozwalające na zapamiętanie faktu zalogowania użytkownika.
• Łącze pozwalające zarejestrować się w serwisie. Użytkownik, który zwrócił uwagę na możliwość zalogowania się może od razu się zarejestrować.
• Łącze pozwalające zmienić hasło logowania.

Alternatywą dla tradycyjnego logowania może być logowanie poprzez system identyfikacji dostarczany przez zewnętrzny serwis, np. Facebook.

Więcej przykładów:








Głodny wiedzy? Przeczytaj na blogu teksty w kategorii wideo.

]]> http://www.wzorceusability.pl/formularz-logowania/feed/ 0 http://www.wzorceusability.pl/koszyk-zakupowy/ http://www.wzorceusability.pl/koszyk-zakupowy/#comments Wed, 16 Jun 2010 15:28:42 +0000 Bartek Dymecki http://www.beta.wzorceusability.pl/?p=267 Koszyk zakupowy pozwala na utworzenie listy produktów, które użytkownik zamierza zakupić w sklepie internetowym. Jest więc jednym z kluczowych elementów procesu zakupowego. W wielu przypadkach na stronie koszyka użytkownik może także dokonać wyboru sposobu płatności i dostawy. Ponadto koszyk może w sklepie spełniać dodatkową funkcję marketingową, np. oferując produkty komplementarne.

Kiedy używać?

W każdym sklepie internetowym w którym użytkownik może zakupić więcej niż jeden produkt lub w którym może kupować ten sam produkt z różnymi kombinacjami parametrów (np. w różnym rozmiarze lub różnego koloru). Koszyk może być zbędny w rzadkich sytuacjach, gdy sklep oferuje tylko jeden produkt.

Jak używać?

Koszyk zakupowy składa się z dwóch elementów – strony koszyka oraz skrótowej informacji o jego zawartości wyświetlanej na pozostałych stronach serwisu.

Strona koszyka zakupowego powinna obowiązkowo zawierać:

• Nazwy produktów będące zarazem łączami do ich stron w sklepie.
• Ceny produktów.
• Możliwość usunięcia produktu z listy i zmiany liczby zamawianych produktów
• Wspólną cenę wszystkich zamawianych produktów.
• Opcję powrotu do zakupów.
• Opcję złożenia zamówienia.

W 99% przypadków użyteczna strona koszyka musi posiadać powyższe elementy. Dodatkowo warto rozważyć wyposażenie strony koszyka w dodatkowe elementy:

• Zdjęcia produktu. Są dobrym uzupełnieniem nazwy produktu. Ponieważ myślimy obrazowo, zdjęcia zachęcają do kupna i ułatwiają rozpoznanie produktów.
• Polecane produkty komplementarne. Dzięki polecaniu kolejnych produktów pasujących do już zamówionych sklep może zwiększyć sprzedaż oraz lepiej realizować potrzeby użytkowników
• Informacja o kosztach wysyłki i formie zapłaty. Dobrze jest wyświetlać informacje o kosztach wysyłki i udostępnić wybór formy płatności bezpośrednio na stronie koszyka. Koszty wyliczone w zależności od wybranej opcji powinny w takim wypadku zostać uwzględnione we wspólnym koszcie zamówienia. Być może umieszczenie tych informacji na stronie koszyka nie będzie możliwe w przypadku każdego sklepu internetowego.
• Informacja o bezpieczeństwie zakupów i płatności. Warto zaznaczyć z jakich zabezpieczeń korzysta sklep przy obsłudze płatności. Plusem będzie także informacja o komentarzach zadowolonych klientów np. w popularnych katalogach sklepów.
• Dane kontaktowe. Obecność danych kontaktowych na stronie koszyka dodatkowo zwiększa wiarygodność sklepu.
• Informacje o etapach procesu zamawiania. Składanie zamówienia na ogół jest podzielone na kilka etapów. Informacja o nich może zostać umieszczona na samej stronie koszyka. Wtedy strona koszyka powinna zostać oznaczona, jako pierwszy etap procesu zamawiania.

W przypadku większości sklepów warto udostępnić użytkownikom możliwość dokonania zakupu bez zakładania konta, co zmniejsza liczbę rezygnacji z zakupów. Polecam tekst: rejestracja w sklepie internetowym.

Ważną funkcją koszyka zakupowego jest zapamiętywanie informacji o produktach, które użytkownik dodał do koszyka. Użytkownik dodający produkty do koszyka może opuścić sklep, ale po powrocie powinien zobaczyć w koszyku te same produkty, które tam umieścił. W ten sposób sklep przypomina użytkownikowi o czym myślał i ułatwia dokonanie zakupu, a użytkownik może dostrzec, że sklep nie kara go za niechęć do natychmiastowej finalizacji zakupów.

Obszar na pozostałych stronach wyświetlający informacje o zawartości koszyka powinien powinien być wizualnie odseparowany od innych elementów serwisu i zwracać na siebie uwagę użytkowników. Oznacz go łatwym do zrozumienia nagłówkiem, np. “koszyk” lub “twój koszyk”. Podaj liczbę dodanych produktów i ich cenę. W zależności od szczegółów projektu podać możesz również informacje o poszczególnych produktach. Warto również pomyśleć o dodaniu łącza lub przycisku wskazującego na możliwość przejścia do strony koszyka. Przykładowa etykieta takiego łącza to np. “do kasy”.

Więcej przykładów: strona koszyka







Więcej przykładów: informacje o zawartości koszyka




Głodny wiedzy? Przeczytaj na blogu teksty w kategorii e-learning.

]]> http://www.wzorceusability.pl/koszyk-zakupowy/feed/ 0 http://www.wzorceusability.pl/spoleczne-aktualnosci/ http://www.wzorceusability.pl/spoleczne-aktualnosci/#comments Mon, 29 Mar 2010 12:29:06 +0000 Bartek Dymecki http://www.beta.wzorceusability.pl/?p=249 Społeczne aktualności (inaczej stream, lifestream, strumień) to obecna w serwisach społecznościowych funkcja wyświetlania najnowszych informacji pochodzących z sieci społecznej użytkownika.

Kiedy używać?

W serwisach społecznościowych gromadzących różnorodną aktywność użytkowników. Np. w serwisie GoldenLine wyświetlane są informacje o założeniu nowej grupy przez użytkownika, dołączeniu do grupy, zmianie zdjęcia czy utworzeniu nowego tematu.

Lifestream jest również podstawową funkcją mikroblogów, jak Blip lub Twitter.

Dlaczego używać?

Dzięki społecznym aktualnościom użytkownik może śledzić działania swoich znajomych w obrębie serwisu, co zwiększa interakcje i zaangażowanie. Serwis internetowy udostępniający taką funkcję staje się w o wiele większym stopniu “żywy”.

Jak używać?

Zastanów się, czy lifestream znajduje zastosowanie w Twoim serwisie. Trudno np. oczekiwać aktywnej społeczności w typowym serwisie informacyjnym.

Po drugie, przeanalizuj, które rodzaje aktywności powinny być widoczne w strumieniu. Wyświetlanie wszystkich możliwych informacji może być zbyt przytłaczające i przynieść skutek odwrotny od zamierzonego – zniechęcić użytkowników do aktywności.

Na przykład Facebook pozwala na wyświetlanie wpisów użytkowników (integrując w ten sposób funkcję mikrobloga), wstawianie linków, plików wideo, komunikatów z innych serwisów i wewnętrznych aplikacji. Z uwagi na tak dużą liczbę informacji Facebook pozwala wyświetlać najnowsze lub najpopularniejsze informacje ze streamu.

Dodatkowo Facebook umożliwia określanie informacji od których osób nie chcemy wyświetlać w swoim streamie.

Inną możliwością ulepszenia streamu jest jego połączenie z powiadomieniami e-mailowymi lub informacjami wysyłanymi na komunikator internetowy.

Więcej przykładów



Głodny wiedzy? Przeczytaj na blogu teksty w kategorii: narzędzia.

]]> http://www.wzorceusability.pl/spoleczne-aktualnosci/feed/ 0 http://www.wzorceusability.pl/kokpit/ http://www.wzorceusability.pl/kokpit/#comments Mon, 16 Nov 2009 23:02:15 +0000 Bartek Dymecki http://www.beta.wzorceusability.pl/?p=190 Kokpit (ang. dashboard) to miejsce w serwisie przedstawiające przegląd danych kluczowych dla użytkownika z którymi może się on zapoznać natychmiast po zalogowaniu do systemu.

Kiedy używać?

Kokpit warto umieścić w każdym rozbudowanym systemie w którym po zalogowaniu się użytkownik ma do czynienia z dużą liczbą informacji. Typowymi systemami w których wstępuje kokpit są na przykład:

• Systemy CMS, np. WordPress
• Systemy statystyk, np. Google Analytics
• Systemy organizacji pracy, zarządzania zadaniami i projektami, np. Remember The Milk
• Serwisy społecznościowe, np. GoldenLine
• Serwisy do zarządzania finansami, np. Benefi
• Aplikacje do tworzenia spersonalizowanych stron domowych, np. Cafe News, które właściwie stanowią formę jednego, dużego, konfigurowalnego kokpitu.

Dlaczego używać?

Zaletą kokpitu jest przedstawienie kluczowych informacji (często informacji różnego typu) w jednym miejscu. Użytkownik nie musi przeglądać kilkunastu stron informacyjnych, aby się z nimi zapoznać, więc oszczędza czas. Korzystanie z aplikacji posiadającej dobrze zaprojektowany kokpit staje się o wiele prostsze i przyjemniejsze.

Jak używać?

W kokpicie przedstaw tylko kluczowe informacje informujące użytkownika o najważniejszych i najnowszych zmianach w systemie. W przypadku systemu CMS WordPress kokpit przedstawia m.in. najnowsze komentarze i ostatnie szkice oraz daje możliwość szybkiego napisania wpisu. Funkcje, które zawiera kokpit muszą wynikać z dokładnego przeanalizowania celów użytkowników. Funkcje, które są dla nich najważniejsze oraz te, które są często wykorzystywane, powinny znaleźć się w kokpicie.

Kokpit jest również dobrym miejscem na przedstawienie ogólnych statystyk dotyczących systemu. Np. Wordpress przedstawia zbiorcze statystyki obejmujące liczbę wpisów, komentarzy, kategorii i tagów.

Nie umieszczaj w kokpicie zbyt wielu danych, ponieważ jego zadaniem jest krótkie zaprezentowanie kluczowych informacji. Poszczególne dane podziel na przejrzyste bloki wizualnie oddzielone od siebie. Wiele kokpitów jest zorganizowanych w dwóch kolumnach, co jest dobrym pomysłem.

Dalsze możliwości rozwoju kokpitu:

• Możesz pozwolić użytkownikowi na zmianę położenia poszczególnych bloków danych w kokpicie, a także na ich minimalizację.
• Warto rozważyć funkcję konfiguracji pulpitu pozwalającą usuwać i dodawać informacje. Jest to bardzo cenna funkcja np. w systemie statystyk Google Analytics. Pozwala dostosować kokpit do indywidualnych oczekiwań.

Więcej przykładów




Głodny wiedzy? Przeczytaj na blogu teksty w kategorii device design.

Dodatkowe źródła

• Stephen Few, Information Dashboard Design
]]> http://www.wzorceusability.pl/kokpit/feed/ 4