Na ekranie widoczny jest spis treści, który zawiera tytuły zakładek wyświetlanych na długim panelu. Tytuły te mogą być zmienione za pomocą znaczków umieszczonych po obu stronach panelu. Dodatkowo, po lewej stronie ekranu znajdują się panele ułożone jeden pod drugim, zawierające również tytuły zakładek. Po kliknięciu na wybraną zakładkę, użytkownik zostanie przeniesiony do slajdu zawierającego grafikę, tekst oraz nagranie audio zgodne z treścią. Na grafikach widoczne są punkty interaktywne, które pozwalają odtworzyć poszczególne nagrania dźwiękowe. Pasek umożliwiający odtworzenie nagrania dźwiękowego znajduje się nad tekstem.

Elementy interfejsu

Orientacja pozioma

Pasek menu

Nagranie dźwiękowe tożsame z treścią ujętą w punkcie.

1. Jest to element interfejsu użytkownika, w którym znajduje się spis najważniejszych stron lub opcji, jakie może wybrać użytkownik, a także logo czy nawet wyszukiwarka elementów na stronie. Może mieć on postać paska z elementami przedstawionymi w formie tekstowej, graficznej (ikony) lub łączyć te dwie formy. Pasek menu powinien być zawsze widoczny, bez względu na to, gdzie aktualnie znajduje się użytkownik, dzięki czemu nawigacja na stronie lub w aplikacji będzie prosta i intuicyjna.

Orientacja pozioma na stronie może być wykorzystana w różnych celach, w tym w układzie trzech zdjęć ułożonych obok siebie. Przykładem może być układ, w którym pierwsze zdjęcie zostało opatrzone tytułem „Podziemne miasto Warszawa 3D”, przedstawiające ciemną przestrzeń z oświetloną sceną, na której stoi mężczyzna. Drugie zdjęcie, znajdujące się obok pierwszego, ukazuje siedzącą kobietę i mężczyznę, których dłonie są splecione. Kobieta ma na palcu pierścionek, co dodaje romantycznego charakteru temu zdjęciu. Trzecia fotografia w tym układzie przedstawia bukiet róż w wazonie, w którym dominują kolory biały i bladoróżowy.

Menu

Nagranie dźwiękowe tożsame z treścią ujętą w punkcie.

2. W menu znajdują się wszystkie najważniejsze elementy strony lub aplikacji, do których użytkownik będzie miał szybki dostęp. Jeśli wybierzemy formę tekstową, należy zadbać o to, aby teksty były krótkie, maksymalnie 2‑3 słowa, dzięki czemu menu będzie przejrzyste. Jednocześnie teksty opisujące elementy menu powinny być zrozumiałe także dla użytkownika, który korzysta z niego po raz pierwszy, tak więc zamiast „Podstrona 1” czy „Podstrona 2” elementy nazwane będą „Blog” lub „Kontakt”.

Ilustracja przedstawia poziomy pasek menu w kolorze czarnym. Umieszczony jest w górnej części okna przeglądarki. Składa się z kilku opcji takich jak strona główna, blog, kontakt. Opcja portfolio posiada znaczek umożliwiający rozwijanie listy.

Aktualna lokalizacja

Nagranie dźwiękowe tożsame z treścią ujętą w punkcie.

3. Podczas korzystania ze strony, użytkownik może zapomnieć gdzie aktualnie się znajduje. Dobrą praktyką jest więc wyróżnienie elementu menu, z którego aktualnie korzysta użytkownik. Element menu o nazwie „Blog” Jak widać, w tym przypadku, element o nazwie „Blog” wyróżniony jest poprzez powiększenie oraz pogrubienie czcionki. W prosty sposób informuje to użytkownika, że obecnie znajduje się na tej stronie.

Widoczna jest ilustracja na której na czarnym tle widnieje napis „Blog . Jest  zaznaczony kolorem białym, zastosowano także czcionkę pogrubioną.

Elementy niedostępne

Nagranie dźwiękowe tożsame z treścią ujętą w punkcie.

4. Pewne elementy menu mogą nie być dostępne dla użytkowników, na przykład przez brak uprawnień lub element nie został jeszcze w pełni zaimplementowany. Dobrze jest więc wtedy wizualnie poinformować o tym użytkownika. Element menu o nazwie „Wkrótce” Jak widać, w tym przypadku tekst „Wkrótce” oznaczony jest ciemniejszym kolorem. W prosty sposób informuje to użytkownika, że kliknięcie w niego nie przyniesie żadnego efektu.

Przykładem jest ilustracja  przedstawiająca napis  WKRÓTCE, który umieszczony jest na czarnym tle. Czcionka jest nieco ciemniejsza niż w poprzednim przykładzie.

Rozwijany element menu

Nagranie dźwiękowe tożsame z treścią zawartą w punkcie.

5. Jeśli kliknięcie na element menu sprawi, że wyświetlona zostanie lista, dobrze jest to wizualnie zaprezentować. Element menu o nazwie „Portfolio” ze strzałką w dół oraz lista wyświetlona po naciśnięciu tego elementu.W tym przypadku element „Portfolio” zawiera również ikonę strzałki w dół, dzięki czemu użytkownik wie, że wciskając ten element rozwinięta zostanie lista.

Na ilustracji znajduje się opcja portfolio. Obok widoczna jest ikona przedstawiająca  strzałkę skierowaną w dół. Po rozwinięciu listy pojawiają się dodatkowe opcje opisane jako wesele, urodziny, imprezy i inne.

Orientacja pionowa

Pasek menu

Nagranie dźwiękowe tożsame z treścią ujętą w punkcie.

1. Ważne jest dostosowanie menu do ekranów w orientacji pionowej. Warto jest się wtedy ograniczyć do niezbędnych elementów. Powyższa ilustracja przedstawia błędne wykonanie paska menu. Zakrywa on dużą część ekranu, a na niewielkich urządzeniach sprawi to, iż strona będzie nieczytelna.

Widoczna  grafika przedstawiająca okno z paskiem menu i rozwiniętą listą na białym tle. Zajmuje ona dużą część przestrzeni ekranu. Poniżej widoczne są zdjęcia ułożone w orientacji pionowej.

Nagranie dźwiękowe tożsame z treścią ujętą w punkcie.

2. Na urządzeniach z pionową orientacją ekranu zazwyczaj stosowane jest menu rozwijane. Dzięki temu elementy strony są widoczne, a jeśli menu jest potrzebne to wybranie odpowiedniej ikony sprawi, że zostanie ono wyświetlone. Ikona rozwijanego menu, tak zwany „hamburger” W tym przypadku zastosowana została ikona tak zwanego „hamburgera”. Dzięki temu  użytkownik wie, że po wciśnięciu tej ikony wyświetlone zostanie menu. Widok strony po wciśnięciu ikony „hamburgera” Na powyższej ilustracji widzimy, jak wyglądać będzie menu po naciśnięciu ikony „hamburgera”. Menu zawiera wszystkie pozycje, tak jak w przypadku korzystania z wersji strony dla ekranów w orientacji poziomej, jednak nie zasłania pozostałej części strony, dopóki menu nie będzie potrzebne.

Grafika przedstawia interfejs użytkownika zawierający okno z pakietem, w którym menu jest dostępne dopiero po naciśnięciu przycisku w formie tzw. hamburgera. Przycisk ten wizualnie składa się z trzech poziomych kresek umieszczonych w obramowaniu.

Menu kontekstowe

Nagranie dźwiękowe tożsame z treścią zawartą w punkcie.

1. Podczas pracy z programami spotkamy się z różnego typu operacjami. Zazwyczaj możemy je wykonać poprzez wciśnięcie odpowiedniej kombinacji klawiszy. Może się jednak okazać, że skrótów klawiszowych jest zbyt dużo, aby zapamiętać wszystkie. Z pomocą przychodzi wtedy właśnie menu kontekstowe, które wyświetlić możemy, wciskając prawy przycisk myszy. Menu to zawiera najpotrzebniejsze operacje dotyczące tego elementu, a także te, których nie możemy wykonać za pomocą skrótów klawiszowych.

Ikony

Nagranie dźwiękowe tożsame z treścią zawartą w punkcie.

Aby menu kontekstowe było czytelne, część operacji możemy ukryć pod ikonami.  Ważne jest jednak, aby czynność wykonana po wciśnięciu ikony była oczywista, tak więc w tym przypadku operacja wycinania pliku kryje się pod ikoną nożyczek. Użytkownik wie, do czego służą nożyczki – do wycinania – tak więc bez zastanawiania się skojarzy, że wybranie tej ikony to operacja wycinania.

Grafika przedstawia pasek narzędziowy zawierający kilka ikon, w tym nożyczki symbolizujące możliwość wycięcia wybranego fragmentu, kosz służący do usuwania elementów, dwie kładące się na siebie kwadratowe ikony umożliwiające przejście w tryb pełnoekranowy oraz strzałkę skierowaną w prawo i lekko do góry, co zazwyczaj oznacza możliwość przeniesienia lub udostępnienia danego elementu.

Ikony i tekst

Nagranie audio tożsame z treścią zawartą w punkcie.

W przypadku operacji, których nie da się przedstawić za pomocą ikon lub gdy same ikony mogą wprowadzić użytkownika w błąd, warto dodać opisy tekstowe. Skróty klawiszowe pewnych operacji W tym przypadku wyświetlane są również informacje o możliwości użycia skrótu klawiszowego, za pomocą którego szybciej wykonamy daną operację.

Na ilustracji widoczne są przykładowe kombinacje klawiszy np. CTRL + Shift + C lub Alt + Enter

Pola tekstowe

Menu kontekstowe

Nagranie dźwiękowe tożsame z treścią ujętą w punkcie.

1. Podczas pracy z programami spotkamy się z różnego typu operacjami. Zazwyczaj możemy je wykonać poprzez wciśnięcie odpowiedniej kombinacji klawiszy. Może się jednak okazać, że skrótów klawiszowych jest zbyt dużo, aby zapamiętać wszystkie. Z pomocą przychodzi wtedy właśnie menu kontekstowe, które wyświetlić możemy, wciskając prawy przycisk myszy. Menu to zawiera najpotrzebniejsze operacje dotyczące tego elementu, a także te, których nie możemy wykonać za pomocą skrótów klawiszowych.

Ikony

Nagranie dźwiękowe tożsame z treścią ujętą w punkcie.

2. Aby menu kontekstowe było czytelne, część operacji możemy ukryć pod ikonami.  Ważne jest jednak, aby czynność wykonana po wciśnięciu ikony była oczywista, tak więc w tym przypadku operacja wycinania pliku kryje się pod ikoną nożyczek. Użytkownik wie, do czego służą nożyczki – do wycinania – tak więc bez zastanawiania się skojarzy, że wybranie tej ikony to operacja wycinania.

Ikony i tekst

Nagranie dźwiękowe tożsame z treścią ujętą w punkcie.

3. W przypadku operacji, których nie da się przedstawić za pomocą ikon lub gdy same ikony mogą wprowadzić użytkownika w błąd, warto dodać opisy tekstowe. W tym przypadku wyświetlane są również informacje o możliwości użycia skrótu klawiszowego, za pomocą którego szybciej wykonamy daną operację.

Przykładem opisu tekstowego jest prostokątny panel w którym widoczny jest wpisany przykładowy adres mailowy.

Pole typu „radio”

Nagranie dźwiękowe tożsame z treścią ujętą w punkcie.

Użytkownik nie zawsze powinien mieć możliwość wpisania własnego tekstu w pola formularza, który został mu udostępniony. Pola typu „radio” zawierają zestaw kilku wzajemnie wykluczających się opcji i umożliwiają wybranie tylko jednej z nich. Użytkownik nie ma możliwości zaznaczenia jednocześnie kilku pól tego typu odnoszących się do jednego pytania. Przyciski radiowe zawsze rozmieszczone są w grupach po dwie lub więcej opcji. Pola typu radio najczęściej mają okrągły kształt bez wypełnienia. Po wybraniu jednej z dostępnych opcji, zaznaczone pole zostaje wypełnione kolorem.

Na ilustracji widoczne jest pole typu RADIO. Ma ono formę kółka, a wewnątrz znajduje się kropka, która oznacza, czy dana opcja została wybrana czy nie. Po kliknięciu w pole typu radio, wybrana opcja staje się widoczna dla użytkownika.

Pole z rozwijaną listą

Nagranie dźwiękowe tożsame z treścią ujętą w punkcie.

Często stosowaną alternatywą dla pola typu „radio” jest pole z rozwijaną listą. Skorzystanie z tego pola sprawi, że wyświetlona zostanie lista możliwych opcji, z których wybrać możemy tylko jedną.

Ilustracja przedstawia element interaktywny, który wyświetla listę opcji, z których można wybrać jedną lub więcej. Pole to składa się z prostokątnego przycisku rozwijającego listę i miejsca na wyświetlenie wybranej opcji.

Pole typu „checkbox”

Nagranie dźwiękowe tożsame z treścią ujętą w punkcie.

Na planszy widoczny jest przykład pola „checkbox”. Składa się z  kwadratowych paneli z etykietami ,które opisują przykładowe zainteresowania dla przykładu muzykę ,bieganie, podróże i inne. Po dokonaniu wyboru, wewnątrz  pola pojawia się niewielki znak oznaczenia. Możliwe jest zaznaczenie wielu pozycji równocześnie.

Pole na elementy multimedialne

Nagranie dźwiękowe tożsame z treścią zawartą w punkcie.

1. Na stronie lub w aplikacji, użytkownik może zostać poproszony o wysłanie pliku. W takim wypadku zostanie wyświetlone pole na elementy multimedialne. Pole na elementy multimedialne

Widoczne są dwa panele jeden z etykietą PRZEGLADAJ, drugi, NIE WYBRANO PLIKU. Poniżej widoczny jest napis ZDJĘCIE.

Przeglądaj...

Nagranie dźwiękowe tożsame z treścią zawartą w punkcie.

Pole na elementy multimedialne zawiera przycisk „Przeglądaj...”. Po wciśnięciu tego przycisku wyświetlony zostanie eksplorator plików, w którym użytkownik może znaleźć i wybrać plik, który chce przesłać. Przycisk o nazwie Przeglądaj...Użytkownik może dodatkowo wybrać plik za pomocą funkcji „Przeciągnij i upuść”. Oznacza to, że możliwe jest wciśnięcie lewego przycisku myszy na pliku, który użytkownik chce przesłać, a następnie bez zwalniania przycisku myszy, przejście kursorem na pole na elementy multimedialne. Po zwolnieniu lewego przycisku myszy, plik zostanie wybrany.

Na ilustracji widoczne jest prostokątne pole z napisem PRZEGLADAJ.

Pole z nazwą pliku

Nagranie dźwiękowe tożsame z treścią zawartą w punkcie.

Użytkownik ma możliwość sprawdzenia, czy został wybrany poprawny plik poprzez podgląd nazwy wybranego pliku. Pole z nazwą wybranego pliku Jednak dopóki plik nie zostanie wybrany, w polu tym wyświetlany będzie komunikat „Nie wybrano pliku”. Pole z komunikatem o braku pliku

Widoczne są dwa prostokątne panele z etykietą PLIK JPG a na drugim, NIE WYBRANO PLIKU.

Przyciski

Przycisk w kolorze zielonym

Nagranie dźwiękowe tożsame z treścią zawartą w punkcie.

2. Kolory przycisków odgrywają dużą rolę w ich odbiorze. Jeśli przycisk oznacza coś pozytywnego, na przykład zalogowanie lub zarejestrowanie się, dobrym wyborem będzie zastosowanie zielonego koloru przycisku. Użytkownik będzie wiedział, że wciśnięcie tego przycisku przeprowadzi pozytywną operację, w tym przypadku zarejestrowanie konta.

Ilustracja przedstawia zielony  przycisk o wyglądzie długiego prostokąta. Wewnątrz widoczny jest napis, ZAREJESTRUJ SIĘ.

Przycisk w kolorze żółtym

Nagranie dźwiękowe tożsame z treścią zawartą w punkcie.

Jeśli przycisk oznacza wykonanie operacji, która może nie do końca spełnić oczekiwania użytkownika, dobrym wyborem będzie zastosowanie żółtego koloru przycisku. W tym przypadku wybranie przycisku „Zapisz” sprawi, iż dane wprowadzone w formularzu zostaną jedynie zapisane do późniejszego uzupełnienia, a konto nie zostanie zarejestrowane.

Ilustracja przedstawia żółty przycisk o wyglądzie krótszego prostokąta. Wewnątrz widoczny jest napis, ZAPISZ SIĘ.

Przycisk w kolorze czerwonym

Nagranie dźwiękowe tożsame z treścią zawartą w punkcie.

Jeśli przycisk oznacza anulowanie operacji lub wykonanie operacji, która może być niebezpieczna, dobrym wyborem będzie zastosowanie czerwonego koloru przycisku. Użytkownik wiedzieć będzie, że wybierając ten przycisk, należy być ostrożnym.

Ilustracja przedstawia czerwony  przycisk o wyglądzie krótszego prostokąta. Wewnątrz widoczny jest napis, ANULUJ.

Suwak

Nagranie dźwiękowe tożsame z treścią zawartą w punkcie.

Użytkownik, w pewnych sytuacjach, będzie proszony o wybranie wartości z jakiegoś zakresu. Aby tę operację ułatwić, stosuje się tak zwany suwak. Dzięki temu elementowi użytkownik będzie mógł w prosty i intuicyjny sposób wprowadzić wartość. Dobrą praktyką jest wyświetlenie na ekranie wartości najmniejszej, największej oraz wartości wybranej przez użytkownika.

Na ilustracji widoczny jest suwak. Jest to kolejny element interfejsu użytkownika. Suwak pozwala na wybieranie wartości z określonego zakresu od zera do 24. Umieszczony jest  pod treścią pytania. Składa się z długiego paska, na którym znajduje się kropka, którą można przesuwać w celu ustawienia wartości.

Przyciski zarzadzania oknem

Nagranie dźwiękowe tożsame z treścią zawartą w punkcie.

1. Podczas korzystania z aplikacji może okazać się, że użytkownik będzie chciał dostosować okno lub w łatwy sposób zamknąć aplikację. Aby to ułatwić, należy dostarczyć odpowiednie przyciski, na przykład „Minimalizuj”, „Maksymalizuj” czy „Zamknij okno”.

Przycisk minimalizowania okna

Nagranie dźwiękowe tożsame z treścią zawartą w punkcie.

2. Znajduje się w prawym górnym rogu aplikacji obok ikon maksymalizacji i zamknięcia. Ikona tego przycisku ma postać poziomej kreski, jej wybranie powoduje ukrycie aktywnego okna programu. Zminimalizowana aplikacja nie jest zamykana, jedynie schowana na przykład na pasku zadań. Aby ponownie ją uruchomić, należy wybrać  kliknąć ikonę aplikacji na pasku zadań.

Wygląd wizualny przycisku minimalizacji to prostokątny przycisk linii poziomej. Znajduje się w górnym rogu aplikacji.

Wizualnie przycisk minimalizacji składa się z ikony w kształcie poziomej kreski, która jest położona na środku przycisku i jest zazwyczaj w kolorze czarnym lub szarym.

Przycisk maksymalizowania okna

Nagranie dźwiękowe tożsame z treścią zawartą w punkcie.

3.  Ikona tego przycisku ma kwadratowy kształt i znajduje się w prawym górnym rogu aplikacji obok przycisków zamknięcia i minimalizacji. Wybranie przycisku maksymalizacji powoduje zwiększenie aktywnego okna na całą wielkość ekranu. Przycisk maksymalizowania okna Jeśli jednak okno zostało już zmaksymalizowane, na miejscu tej ikony pojawia się inna, podobna. Wciśnięcie jej sprawi, że aplikacja nie będzie zajmowała całego ekranu i zazwyczaj możliwe jest dostosowanie rozmiaru tego okna poprzez wciśnięcie dowolnej krawędzi lub rogu okna, a następnie przesunięcie kursora. Tak wygląda ta ikona:

Przycisk maksymalizowana umożliwia rozciągnięcie okna programu, aplikacji lub strony internetowej na cały ekran. Znajduje się w prawym górnym rogu okna i jest oznaczony symbolem kwadratu. Przycisk przywracający wygląd okna ma kształt dwóch kwadratów zachodzących na siebie.

Przycisk zamknięcia okna

Nagranie dźwiękowe tożsame z treścią zawartą w punkcie.

4. Służy do zakończenia pracy programu czy aplikacji. Ikona tego przycisku ma kształt X i najczęściej znajduje się w prawym górnym rogu obok ikon minimalizacji i maksymalizacji. Zamknięcie programu nie zawsze oznacza zapisanie wprowadzonych na nim zmian, dlatego często, po kliknięciu tej ikony, wyświetla się dodatkowe okno pytające użytkownika, czy chce zapisać zmiany.

Przycisk zwykle znajduje się w prawym górnym rogu okna i jest oznaczony symbolem „X” lub słowem „zamknij”. Powoduje zamknięcie okna i wyjście z programu, aplikacji lub strony internetowej.