SlideShare a Scribd company logo
1 of 42
Download to read offline
MOBILE UX
Elżbieta Krutysza 2023
Smartphones Smartwatches. AV.
Elżbieta Krutysza 2023
Anne Friedberg, Wirtualne okno. Od Albertiego do Microsoftu, 2012
„Jako odbiorca obrazów wirtualnych, widz oglądający
ruchome obrazy jest cieleśnie obecny wewnątrz
materialnej przestrzeni,
a jednocześnie angażuje się w dostępną wirtualną
przestrzeń, skadrowaną na ekranie”
Elżbieta Krutysza 2023
Elżbieta Krutysza 2023
- Elżbieta Krutysza
Bywamy w 2 światach na raz,
materialnym i wirtualnym.
Mamy wiele wirtualnych okien
i potra
f
imy się między nimi
szybko przełączać.
Elżbieta Krutysza 2023
Skadrowane ekrany światów wirtualnych
TV
PC / Laptop
Smartphone
AV
#osobiste #spersonalizowane #IoT #connected
… dobre na ulicę
Tablet
Smartwatch
Def: UX
Jakob Nielsen
Guru u
ż
yteczno
ś
ci
Ur.1957 w Kopenhadze.. Uko
ń
czył
Du
ń
ski Uniwersytet Techniczny,
doktor informatyki -
specjalizacja: Projektowanie
Interfejsu u
ż
ytkownika
Od pocz
ą
tku lat 90. XX w.
zajmuje si
ę
u
ż
yteczno
ś
ci
ą
serwisów internetowych.
W 1998 z Donem Normanem
założył Nielsen Norman Group
User Experience - „doświadczenie użytkownika”
obejmuje wszystkie aspekty interakcji użytkownika
końcowego z
f
irmą, jej usługami i produktami
https://www.nngroup.com/articles/ux-vs-cx/
https://www.nngroup.com/articles/de
fi
nition-user-experience/
CX vs UX
Mad Men - Lipstick,
Matthew Weiner
(2007-215)
Basic UX Process
1. User Research
2. Persony
3. User Flow
4. Prototype
5. User Testing
User (Human) Centered Design (UCD, HCD), Design Thinking
Elżbieta Krutysza 2023
przenośny (portable)
szybki (fast)
płynny (
f
luid)
Mobilny design jest …
Elżbieta Krutysza 2023
Co połączyło samochody z telefonami?
1946 - 1973
Elżbieta Krutysza 2023
Sieć mobilna
Elżbieta Krutysza 2023
Co rozłączyło?
Martin Cooper i Motorola TynaTac. 1973 - 2007
Joel, this is Marty. I'm calling you
from a cell phone, a real handheld
portable cell phone.
21 kwietnia 1973
Elżbieta Krutysza 2023
Dużo producentów …
… i systemów operacyjnych
Elżbieta Krutysza 2023
Smartphones
Elżbieta Krutysza 2023
Jobs, iPhone i multitouch
29 czerwca 2007
Elżbieta Krutysza 2023
• Elastyczna integralność, utrzymanie uwagi
• Konsystencja, standardy
• Bezpośrednia manipulacja treścią
• Informacje zwrotne, wyniki
• Metafory, #światlusytrzany
• Kontrola użytkownika
Apple HIG
Elżbieta Krutysza 2023
Google Android & OHA
23 września 2008
Elżbieta Krutysza 2023
• Powierzchnia dotykowa
“quantum paper”
• Print-like design
• Znaczące animacje
• Projekt adaptacyjny
https://material.io
Material Design
Elżbieta Krutysza 2023
Heurystyki UX
Dlaczego odinstalowujemy aplikacje mobilne?
Elżbieta Krutysza 2023
Mobile First & designing for less
„UX is not only about the times
when people are using our
products, but also about the times
when they are not. In the era of
ever-vibrating smartphones and
increasingly demanding apps,
there is no better user experience
than peace of mind”
https://trends.uxdesign.cc/
Elżbieta Krutysza 2023
One hand & thumb zone
85% użytkowników smartfonów używa
jednej ręki do sterowania aplikacjami
(Uwaga: leworęczni)
Elżbieta Krutysza 2023
Ow zone
Elżbieta Krutysza 2023
UX & Smartphones
• Minimalne obciążenie poznawcze
(Cognitive Load)
• Czytelność i domyślne fonty
• Minimalny font 16 px
• Kontrast. Minimalny 4,5 : 1
• Przyciski min. 50-50 px
• Przestrzenie między przyciskami 20-32 px
• UCD Nachalność nie popłaca, takt.
Elżbieta Krutysza 2023
Smartwatches
Apple & Google
Elżbieta Krutysza 2023
https://www.apple.com/pl/watchos/watchos-9/ https://wearos.google.com/intl/pl_pl/
Nawigacja, font, kolor
Elżbieta Krutysza 2023
Apple: San Francisco (SF) Compact Text i SF Compact Display Google: Roboto Condensed
Unikaj cienkich i małych fontów. Uważaj na niestandardowe.
Przyciski pokazuj jako
pionowy stos z
etykietami tekstowymi.
Wtedy
 ​​
przycisk jest
bardziej czytelny.
Cross-pratform i F-Pattern
d18f20d77d2e
Multimedia
Elżbieta Krutysza 2023
Zoptymalizowane obrazy JPG. Krótkie wideo do 30s.
Powiadomienia
Elżbieta Krutysza 2023
Prywatne. Zwrotne. Do odrzucenia.
Gesty i wbudowane funkcje
Elżbieta Krutysza 2023
Warto korzystać, nie warto komplikować.
Elżbieta Krutysza 2023
Smartcars
AV Autonomous Vehicles
Elżbieta Krutysza 2023
Dużo producentów …
… i systemów operacyjnych
Elżbieta Krutysza 2023
Elżbieta Krutysza 2023
Apple & Google
Elżbieta Krutysza 2023
Systemy operacyjne dla aut
Elżbieta Krutysza 2023
• Dark UI (wyjątek to nawigacja).
• Krótki tekst w jednym wierszu, ikony
• Minimalny rozmiar czcionki 34-38 px
• Wysoki kontrast 7:1
• Redukcja C2A
• Wyraźne afordancje! Minimalizm
bardzo widocznych elementów.
• VUI nie jest rozwiązaniem
Heurystyki UX
Bezpieczeństwo i użyteczność przed pięknem.
Elżbieta Krutysza 2023
Touch screen
Elżbieta Krutysza 2023
Case Study
Elżbieta Krutysza 2023
Smartphone: Internetu, mediów społecznościowych, muzyki,
gier, połączeń i maili, sms.
Smartwatch:
f
itness: powiadomienia, muzyka, nawigacja,
pogoda, app związane z lotami, płatności mobilne, a
nawet aplikacje do gier.
AV: Muzyka / Podcast / Audiobooki, Nawigacja ,
Połączenia Wykonywanie / Odbieranie
Elżbieta Krutysza 2023
Music App
#touch
f
irst #design4
f
inger
Elżbieta Krutysza 2023
Control interface
#handuse #hmi #mechanic #vui
Elżbieta Krutysza 2023
„Kierowca powinien być w stanie wykonać
zadanie w serii 1,5-sekundowych spojrzeń,
przy łącznym czasie spędzonym
na odwróceniu wzroku od jezdni
nie dłuższym niż 12 sekund”
- National Highway Tra
ffi
c Safety Administration (NHTSA)
Elżbieta Krutysza 2023
Technologia zmienia się szybko
Ludzie zmieniają się wolno
Dziękuję!
?

More Related Content

Similar to Mobile UX - Elżbieta Krutysza 2023.pdf

UX Designer najlepszy zawod na swiecie - Elzbieta Krutysza.pdf
UX Designer najlepszy zawod na swiecie - Elzbieta Krutysza.pdfUX Designer najlepszy zawod na swiecie - Elzbieta Krutysza.pdf
UX Designer najlepszy zawod na swiecie - Elzbieta Krutysza.pdfElzbieta Krutysza
 
Jak badać (nie)ładne makiety? - Małgosia Fajgier (Dribbble Kraków)
Jak badać (nie)ładne makiety? - Małgosia Fajgier (Dribbble Kraków)Jak badać (nie)ładne makiety? - Małgosia Fajgier (Dribbble Kraków)
Jak badać (nie)ładne makiety? - Małgosia Fajgier (Dribbble Kraków)Studio EDISONDA
 
Projektowanie UI - Hubert Rutkowski
Projektowanie UI - Hubert RutkowskiProjektowanie UI - Hubert Rutkowski
Projektowanie UI - Hubert RutkowskiSKN Shader
 
Interaktywna tablica Mendelejewa dla Wydziału Chemii PG - Praca dyplomowa mag...
Interaktywna tablica Mendelejewa dla Wydziału Chemii PG - Praca dyplomowa mag...Interaktywna tablica Mendelejewa dla Wydziału Chemii PG - Praca dyplomowa mag...
Interaktywna tablica Mendelejewa dla Wydziału Chemii PG - Praca dyplomowa mag...Bartek Nowakowski
 
Był sobie UXowiec. Historia o zmaganiach jasnej i ciemnej strony... - Małgorz...
Był sobie UXowiec. Historia o zmaganiach jasnej i ciemnej strony... - Małgorz...Był sobie UXowiec. Historia o zmaganiach jasnej i ciemnej strony... - Małgorz...
Był sobie UXowiec. Historia o zmaganiach jasnej i ciemnej strony... - Małgorz...ITberries
 
Innowacyjne formy komunikacji z otoczeniem z korzyścią dla miast.
Innowacyjne formy komunikacji z otoczeniem z korzyścią dla miast.Innowacyjne formy komunikacji z otoczeniem z korzyścią dla miast.
Innowacyjne formy komunikacji z otoczeniem z korzyścią dla miast.Sebastian Nejfeld
 
Dostepnosc sklepow internetowych + wersje mobilne
Dostepnosc sklepow internetowych + wersje mobilneDostepnosc sklepow internetowych + wersje mobilne
Dostepnosc sklepow internetowych + wersje mobilnerdrozd
 

Similar to Mobile UX - Elżbieta Krutysza 2023.pdf (7)

UX Designer najlepszy zawod na swiecie - Elzbieta Krutysza.pdf
UX Designer najlepszy zawod na swiecie - Elzbieta Krutysza.pdfUX Designer najlepszy zawod na swiecie - Elzbieta Krutysza.pdf
UX Designer najlepszy zawod na swiecie - Elzbieta Krutysza.pdf
 
Jak badać (nie)ładne makiety? - Małgosia Fajgier (Dribbble Kraków)
Jak badać (nie)ładne makiety? - Małgosia Fajgier (Dribbble Kraków)Jak badać (nie)ładne makiety? - Małgosia Fajgier (Dribbble Kraków)
Jak badać (nie)ładne makiety? - Małgosia Fajgier (Dribbble Kraków)
 
Projektowanie UI - Hubert Rutkowski
Projektowanie UI - Hubert RutkowskiProjektowanie UI - Hubert Rutkowski
Projektowanie UI - Hubert Rutkowski
 
Interaktywna tablica Mendelejewa dla Wydziału Chemii PG - Praca dyplomowa mag...
Interaktywna tablica Mendelejewa dla Wydziału Chemii PG - Praca dyplomowa mag...Interaktywna tablica Mendelejewa dla Wydziału Chemii PG - Praca dyplomowa mag...
Interaktywna tablica Mendelejewa dla Wydziału Chemii PG - Praca dyplomowa mag...
 
Był sobie UXowiec. Historia o zmaganiach jasnej i ciemnej strony... - Małgorz...
Był sobie UXowiec. Historia o zmaganiach jasnej i ciemnej strony... - Małgorz...Był sobie UXowiec. Historia o zmaganiach jasnej i ciemnej strony... - Małgorz...
Był sobie UXowiec. Historia o zmaganiach jasnej i ciemnej strony... - Małgorz...
 
Innowacyjne formy komunikacji z otoczeniem z korzyścią dla miast.
Innowacyjne formy komunikacji z otoczeniem z korzyścią dla miast.Innowacyjne formy komunikacji z otoczeniem z korzyścią dla miast.
Innowacyjne formy komunikacji z otoczeniem z korzyścią dla miast.
 
Dostepnosc sklepow internetowych + wersje mobilne
Dostepnosc sklepow internetowych + wersje mobilneDostepnosc sklepow internetowych + wersje mobilne
Dostepnosc sklepow internetowych + wersje mobilne
 

Mobile UX - Elżbieta Krutysza 2023.pdf