Projektowanie
interfejsu użytkownika i
aplikacji webowych
UX
sebastian.sztyper@kotrak.com
#UX #USABILITY
Agenda
UX - co to właściwie jest
Praktyczne przykłady
Sprawdzone wzorce
Jak testować i określić model klienta
Przydatne narzędzia do projektowania
Skalowalność aplikacji
User experience
co to właściwie jest?
VISUAL DESIGN
CONTENT STRATEGY
TYPOGRAPHY
INTERACTION DESIGN
INFORMATION
ARCHITECTURE
FEEL
LOOK
FUNCTION
Hi-Fi PROTOTYPING
CONCEPT
UI Design
Agile
Etapy projektowania według
Projektuj według dobrych praktyk
Najpierw sala konferencyjna,
potem
Photoshop
Prototypy i praca z klientem
to podstawa sukcesu
Pencil
Photoshop
Sprecyzowanie modelu klienta,
czyli jak dobrze dostosować interfejs w aplikacjach ERP
Nowoczesne techniki
testy A/B, Guerilla's tests
Nowoczesne techniki
badania eye-tracking
Współpraca podczas projektowania
A
B
C
Specjalista UX
Analityk
Programista
Jak pokonać efekt
„przepełnionego interfejsu”
Prosta nawigacja
Użytkownik musi wiedzieć gdzie jest
i skąd jest dany element
Tworzenie nowych rekordów
Alternatywy:
- okna modalne
Edycja kilku rekordów
Sprawdzone wzorce:
- zakładki górne lub dolne (np. klient pocztowy gmail, interia)
Mniej znaczy lepiej
„światło to też element graficzny”
Gdzie być kreatywnym,
a gdzie używać typowych wzorców projektowych
CSS: metro.org, semantic ui, materializecss, www.melonhtml5
Material design: material.angularjs.org, design.google.com
Kontrolki i własne rozwiązania: Infragistic web controls, DevExtreme Web, Telerik - WEB, HTML5/JS FRAMEWORK, datatables)
Projektuj i uchwyć uwagę
potencjalnego użytkownika
Kolorystyka
Jaka ilość barw w aplikacji?
Ikony
Projektowanie na siatce i pola ochronne
Preloadery
nie chcemy efektu zawieszenia aplikacji
Walidacja
Inne podejście
Dyskretna pomoc w użytkowaniu aplikacji
Pomagamy użytkownikowi tylko wtedy gdy jest to potrzebne
użytkowników czeka
maksymalnie 2 sekundy
aż content się załaduje
Jak ważny jest interfejs startowy projektu
Szybkie ładowanie aplikacji
47%
2 kierunki rozwoju
Jak rozpocząć wspaniałą przygode z UX?
Dziękuje za uwagę
Pytania
- freepick.com
- https://app.ifaktury24.pl/index.html#
- https://mixerp.org/
Źródła:
sebastian.sztyper@kotrak.com
Projektowanie interfejsu użytkownika i UX aplikacji webowych
By Sebastian Sztyper
Projektowanie interfejsu użytkownika i UX aplikacji webowych
- 257