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