Krótka prezentacja na temat zasad tworzenia interfejsu na stronie internetowej. Zawiera wskazówki, porady oraz przeciwwskazania mające pomóc stworzyć dobry interfejs strony internetowej. Zapraszam do lektury

1. INTERFEJSY UZYTKOWNIKA
NA STRONACH
INTERNETOWYCH
WOJCIECH KLOCEK

2. CZYM JEST INTERFEJS UŻYTKOWNIKA?
Część oprogramowania zajmująca się obsługą urządzeń wejścia-
wyjścia przeznaczonych do interakcji z użytkownikiem.
W komputerach jest to system operacyjny, narzucający niejako
wygląd i sposób działania innym aplikacjom

3. INTERFEJSY NA STRONACH
INTERNETOWYCH
• Menu
• Ikony
• Banery
• Przyciski
• Formularz kontaktowy
• Wyszukiwarka
• Filmy
• Kalendarz rezerwacji
• Konfigurator produktu
• Formularz zamówienia
• Grafika / galeria zdjęć
• Tekst
• Paginacja

4. PIERWSZA STRONA INTERNETOWA
• Powstała 20 grudnia 1990
• Jej twórcą był Tim Bernes-Lee
• Miała służyć do przekazywania dokumentów w ramach CERN

6. ROZWÓJ TECHNOLOGII
• Wprowadzenie PHP
• Wprowadzenie javascriptu
• Wprowadzenie CSS
• Wprowadzenie HTML5
• Wprowadzenie CSS3
• Wprowadzenie bibliotek js (jQuery)
• Wprowadzenie biblioteki Boostrap
• Wprowadzenie frameworków PHP (Symfony)

7. POWSTANIE UX I UI
• UI – to, czego ludzie używają w komunikacji z produktem
• UX – to, czego doświadczają podczas tego procesu

8. JAK ZAPROJEKTOWAĆ INTERFEJS STRONY
WWW - ETAPY
• Stworzenie prototypu w narzędziu do mockupowania – np. MockFlow,
Axure, Pencil Project (darmowy)
• Stworzenie projektu graficznego
• Pocięcie szablonu do HTML, CSS
• Wdrożenie skryptów PHP, js i innych
• Przeniesienie na serwer testowy
• Testy użyteczności
• Przeniesienie na serwer produkcyjny

9. CECHY DOBREGO INTERFEJSU
• powinien pozwolić użytkownikowi na jak najszybsze
znalezienie interesujących go informacji – zasada trzech
kliknięć
• nawigacja w serwisie powinna być intuicyjna i spójna na każdej
z podstron
• przejrzystość i intuicyjność
• stonowane kolory
• spójność projektu

10. CO BRAĆ POD UWAGĘ PROJEKTUJĄC
INTERFEJS WWW
• jaka jest grupa docelowa?
• jaki jest charakter strony?
• czy chcemy użytkownika przyciągnąć?
• co chcemy osiągnąć za pomocą interakcji z użytkownikiem?

11. PROJEKT POWINIEN OPIERAĆ SIĘ NA
DOŚWIADCZENIU
• Ludzie nie zawsze zapamiętują przekazywane informacje, ale na
pewno pamiętają co czuli.
• Reklamodawcy opierają się na wywołaniu emocji, ten sam model
można wykorzystać w stronach www
• Dobrze zaprojektowana strona internetowa powinna splatać
umiejętnie tekst, grafikę, elementy interaktywne, układ –
zapewniające użytkownikowi doświadczenie emocjonalne
• Dzisiejsze interfejsy posiadają coraz więcej efektów wizualnych, co
ma wzbudzać więcej emocji u oglądającego

12. LUDZIE STRON NIE CZYTAJĄ TYLKO
SKANUJĄ
Jeśli nie nadmiar tekstu to co?
• filmy
• infografiki
• krótkie informacje
Dlaczego się tak dzieje?
• brak czasu
• wygoda społeczeństwa
• skanowanie nagłówków

13. PROSTOTĄ I JASNOŚCIĄ W UŻYTKOWNIKA
• użytkownik w pół sekundy decyduje, czy zostanie na stronie
• od początku musi być jasne, bo ma na stronie zrobić
• koncentracja na jednym punkcie, np. przycisku
• domyślne wartości dla każdego
• po uzyskaniu stałych czytelników sekcja dla zalogowanych
• stosowanie znanych użytkownikowi rozwiązań

14. GDZIE NOWOŚĆ, A GDZIE STANDARD?
• większość interfejsów użytkownikom powinna być już znana
(linki, przyciski, logowanie)
• nowe rozwiązania należy stosować ostrożnie
• najpierw należy skoncentrować się na projektowaniu znanych
użytkownikom elementów, później można skupić się na
autorskich

15. UCHWYCIĆ UWAGĘ UŻYTKOWNIKA
• sensowny, spójny projekt
• inny wygląd dla każdego urządzenia
• przestrzeganie zasad responsywności
• najważniejszy jest pierwszy widok (bez konieczności przewijania)
• ekran startowy powinien zawierać najważniejsze informacje (klient
chce kupić wszystko)
• to co najważniejsze wcale nie musi się znajdować na samej górze
strony

16. PRZEWIJANIE VS STRONICOWANIE
• obecne strony są długie w pionie
• średnia długość 3-6 ekranów
• przewijanie jest szybsze od stronicowania
• średni czas załadowania klikalnej strony to nawet 6,5 sekundy
• użytkownicy mobilni wolą przewijać

17. RESPONSYWNOŚĆ, CO TO ZA ZWIERZĄTKO
• płynny interfejs na urządzeniach różnego rozmiaru
• strona responsywna lub aplikacja mobilna
• hamburger menu
• obrazki i teksty mają zachwiane proporcje
• strona responsywna nie zawsze jest dobrze wykonana - Blisk

18. 10 DOBRYCH NAWYKÓW
• wykorzystanie ikon
• graficzne odseparowanie od
siebie fragmentów strony
• zastosowanie AJAXa do
rozdzielenia treści i funkcji
• zastosowanie czytelnej
typografii
• użycie pustych przestrzeni – od
web 2.0
• użycie kolorów
• odpowiedni rozmiar
poszczególnych elementów
• zmiana funkcji na żądanie – np.
zaawansowane wyszukiwanie
• przyciemnianie tła lub pełny
ekran– np. lightbox
• duże elementy graficzne – np.
baner

19. 10 NAJWIĘKSZYCH BŁĘDÓW
• umieszczanie ważnych informacji wyłącznie w plikach PDF
• brak możliwości sortowania i wyszukiwania
• brak cen
• używanie podkreśleń dla nie linków
• słaba optymalizacja strony
• bloki tekstu bez formatowania, wyróżnień i znaków przestankowych
• strona intro
• nieczytelnie nazwane linki
• wyskakujące okienka

20. INTERFEJS UŻYTKOWNIKA JEST JAK DOBRY ŻART.
JEŚLI MUSISZ GO TŁUMACZYĆ – NIE JEST WCALE
DOBRY.

21. DZIĘKUJĘ ZA UWAGĘ