Ux Upgerde_Symetria_Projektowanie responsywnych treści
-
Upload
symetriapl -
Category
Design
-
view
225 -
download
1
description
Transcript of Ux Upgerde_Symetria_Projektowanie responsywnych treści
UX Upgrade: część I
Projektowanie treści
Poznajmy się
Wojtek ChojnackiStrategy & Development Leader
7 lat doświadczenia
Badania UX, Projektowanie UX,Strategia treści
Philip Morris International, BZ WBK, Credit Agricole, Link4, Orange
8.04.2023 UX Upgrade - Treść 2
Przecież miało być o projektowaniu!
Czyli dlaczego zaczynamy od treści
8.04.2023 UX Upgrade - Treść 3
Dawno, dawno temuRWD – koncepcja ciągle ewoluująca
8.04.2023 UX Upgrade - Treść 4
Po czym poznać serwis responsywny?
„Poznam, gdy zobaczę” ?
8.04.2023 UX Upgrade - Treść 5
Co charakteryzuje serwis responsywny1.Rozmiar okna wpływa na konstrukcję strony 2.Elementy są prezentowane odpowiednio do rozmiaru okna (płynność)3.Adresy stron i treść pozostają niezmienne między urządzeniami *
Breakpointy
Płynność treści
Równość treści
http://worldwildlife.org/ 8.04.2023 UX Upgrade - Treść 6
Istota responsywności
Efektywne przekazanie treści niezależnie od rozmiaru i typu ekranu użytkownika
8.04.2023 UX Upgrade - Treść 7
Serwisy mobile a serwisy responsywne
Dedykowany serwis mobilny
Treść desktop Treść mobile Treść serwisu
Serwis responsywny
Użytkownik desktop
Użytkownik mobile Użytkownik desktop
Użytkownik mobile
8.04.2023 UX Upgrade - Treść 8
Konsekwencje RWD dla treści
8.04.2023 UX Upgrade - Treść 9
+ Jeden serwis = centralne zarządzanieEdytujemy treść dla wszystkich urządzeń naraz.Brak duplikacji treści, potencjalnie lepsze SEO.
http://www.site-ninja.com/ 8.04.2023 UX Upgrade - Treść 10
+Spójna treść na każdym urządzeniuUżytkownicy mają pewność, że dzieląc się treścią nie będzie problemu z dostępem do niej.
8.04.2023 UX Upgrade - Treść 11
- Nie każdą treść łatwo uelastycznićSzczególnie w istniejących serwisach
8.04.2023 UX Upgrade - Treść 12
- Ograniczenia w tworzeniu osobnego przekazu mobileAle…
http://www.telegraph.co.uk/ 8.04.2023 UX Upgrade - Treść 13
… mobilni użytkownicy to niekoniecznie inny światPotrzebują oni tych samych informacji i równego traktowania! Często skupiają się oni na swoim urządzeniu bardziej niż inni.http://uxmag.com/articles/six-mobile-myths
http://www.google.com/think/research-studies/our-mobile-planet-united-states.html
14
Użytkownicy o wielu ekranach
90% użytkowników przemieszcza się między urządzeniami żeby osiągnąć cel, uwzględniając smartfony, PCty, tablety i TV.
Źródło: badanie Multiscreen World, Googlehttp://services.google.com/fh/files/misc/multiscreenworld_final.pdf
8.04.2023 UX Upgrade - Treść 15
Serwisy mobilne to nie serwisy dla „mniej wymagających”!
… it may not be rolled in our mobile site.
8.04.2023 UX Upgrade - Treść 16
Do przemyślenia
There is no Mobile Web.
There is only The Web, which we view in different ways. There is also no Desktop Web. Or Tablet Web.
@stephenhay
8.04.2023 UX Upgrade - Treść 17
Nasz cel
Planując responsywną treść musimy:
1.Zbudować zasady tworzenia uniwersalnej treści.
2.Dobrać formy prezentacji treści dla każdego pola widzenia
8.04.2023 UX Upgrade - Treść 18
Uniwersalna treść
Strukturyzacja treści i content strategy
8.04.2023 UX Upgrade - Treść 19
Jak powinna skalować się treść serwisu?
8.04.2023 UX Upgrade - Treść 20
Odpowiedzi należy szukać element po elemencie.
8.04.2023 UX Upgrade - Treść 21
Case study: Crayola.comhttp://danielmall.com/work/crayola/
8.04.2023 UX Upgrade - Treść 22
Typy treści, zbudowane z powtarzalnych elementówBiblioteka elementów treści pomaga nam je następnie zaprojektować.
8.04.2023 UX Upgrade - Treść 23
Hierarchia treści serwisu
1. Główne przekazy całego serwisu
2. Typy stron wypełniające te przekazy
3. Typy treści, które składają się na strony.
4. Sposoby prezentacji dla każdego typu treści.
8.04.2023 UX Upgrade - Treść 24
Zarządzanie strukturyzowaną treścią
Zasady dla treści tworzymy rozbijając ją na mniejsze elementy i definiując ich cele i sposoby prezentacji.
Więcej na ten temat: http://alistapart.com/article/future-ready-content
Typ strony Typy treści w ramach strony
Reprezentacja w CMS
8.04.2023 UX Upgrade - Treść 25
Zalety strukturyzowania treści na przykładzie National Public Radio
8.04.2023 UX Upgrade - Treść 26
COPE – Create Once, Publish Everywhere
+ 80% pageviews
8.04.2023 UX Upgrade - Treść 27
Case study:Credit-agricole.pl
Strategia treści i jej wpływ na projektowanie
8.04.2023 UX Upgrade - Treść 28
Motto marki: „Prosto i z sensem”
8.04.2023 UX Upgrade - Treść 29
Przeprojektowanie serwisu „Klub rabatowy Credit Agricole”
http://klubrabatowy.credit-agricole.pl
Zmiana interfejsu (RWD) przyniosła świetne wyniki.
8.04.2023 UX Upgrade - Treść 30
Badania z użytkownikami pokazały pewne problemy.
Efektywność serwisu pozostawiała trochę do życzenia.
Credit-agricole.pl
8.04.2023 UX Upgrade - Treść 31
Credit-agricole.pl
Home page Strona kategorii
Szczegóły produktu
Przejścia do:- Infolinia: +225%- Oddziały +326%
Spadek wyszukiwań informacji kontaktowych: -70,05%
8.04.2023 UX Upgrade - Treść 32
Credit-agricole.pl – strona kategorii
• Wiele podobnych produktów• Skupienie tylko na zaletach utrudnia wybór
8.04.2023 UX Upgrade - Treść 33
Credit-agricole.pl – strona produktu
• Zatłoczony layout• Dużo uwagi potrzebnej by wyciągnąć najważniejsze
fakty• „Przeciętna strona banku”
8.04.2023 UX Upgrade - Treść 34
Podejście do projektu
Zauważone problemy nie wynikały tylko z projektu interfejsu.
Nie wystarczyło więc przeprojektować serwis.
Konieczne było przebudowanie treści.
8.04.2023 UX Upgrade - Treść 35
Etapy prac
Warsztaty strategii treści
Projektowanie User Experience
Nowy serwis
Wymagania i struktura treści
Copywriting Wdrożenie
8.04.2023 UX Upgrade - Treść 36
Project stakeholders
Warsztaty strategii treści
Menedżerowie produktu
Public Relations
MarketingMarketing online
(lider projektu)
8.04.2023 UX Upgrade - Treść 37
Warsztaty strategii treściWarsztat 1: Użytkownicy i ich potrzeby względem treściWarsztat 2: Wymagania dla treści
8.04.2023 UX Upgrade - Treść 38
Efekty warsztatów
Persony (4 grupy docelowe)
Kryteria wyboru produktów i potrzeb informacyjnych
8.04.2023 UX Upgrade - Treść 39
Efekty prac nad treścią
Mapa rodzajów stron
Szablony treści wraz z wymaganiami
8.04.2023 UX Upgrade - Treść 40
WymaganiaPrzykład
zastosowania
Element struktur
y
Content templates / stylebook
8.04.2023 UX Upgrade - Treść 41
Nominacja
Finalny serwis4 punkty przełamania, dopasowana treść
8.04.2023 UX Upgrade - Treść 42
Treść zwinięta do haseł, szczegóły na żądanie
8.04.2023
UX Upgrade - Treść 43
Dodatkowa treść przydatna w kontekście mobilnym
8.04.2023 UX Upgrade - Treść 44
Elastyczne prezentowanie treści
Narzędzia i strategie A.D. 2014
8.04.2023 UX Upgrade - Treść 45
Elastyczne prezentowanie treści
Teksty
Obrazy i ikony
Tabele
Co z video?
8.04.2023 UX Upgrade - Treść 46
Responsywne tekstyGłówne wyzwanie: różne zasady obliczania rozmiaru fontu i odległości od oka.http://ia.net/blog/responsive-typography-the-basics/
8.04.2023 UX Upgrade - Treść 47
Responsywne teksty w pigułce
Główne strategie:• Stała szerokość bloku + przeformatowanie w breakpointach• Rozszerzanie w nieskończoność ze skalowaniem tekstu• Rozszerzanie do czytelnego maksimum
Przemyśl/sprawdź:• Dostępność fontu urządzeniach mobilnych• Rozmiar fontu na różnych urządzeniach, przy różnych odległościach
czytania• Długość nagłówków i innych wyróżnionych elementów
typograficznych na urządzeniach mobilnych• Długość linii (sugerowane 50-75 znaków)• Czytelność tekstu na tle obrazów przy różnych rozdzielczościach
Materiały do poczytania:http://ia.net/blog/responsive-typography-the-basics/ http://tympanus.net/codrops/2013/11/19/techniques-for-responsive-typography/ http://baymard.com/blog/line-length-readability http://nicewebtype.com/notes/responsive-typography/
8.04.2023 UX Upgrade - Treść 48
Responsywne obrazyGłówne wyzwanie: dostosowanie do proporcji obrazu, ograniczenie przesyłu danych
8.04.2023 UX Upgrade - Treść 49
http://designshack.net/articles/css/focal-point-intelligent-cropping-of-responsive-images/
Kadrowanie przez wyznaczenie „punktu skupienia
Responsywne obrazy – strategia kadrowania
8.04.2023 UX Upgrade - Treść 50
http://useiconic.com/
Responsywne ikonyJeśli działają jak fonty, mogą dopasowywać swoje detale do rozmiaru.
8.04.2023 UX Upgrade - Treść 51
Responsywne obrazy w pigułce
Główne strategie:1. Ograniczanie obrazów rastrowych kosztem SVG2. Inteligentne kadrowanie tam, gdzie obraz jest bardziej dekoracją3. Skalowanie tam, gdzie cały obraz stanowi kompletny przekaz4. Responsywne ikony (najlepiej w formie web fontów)
Przemyśl/sprawdź:5. Dostępność fontu urządzeniach mobilnych6. Rozmiar fontu na różnych urządzeniach, przy różnych odległościach
czytania7. Długość nagłówków i innych wyróżnionych elementów
typograficznych na urządzeniach mobilnych8. Długość linii (sugerowane 50-75 znaków)9. Czytelność tekstu na tle obrazów przy różnych rozdzielczościachMateriały do poczytania:http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/ http://alistapart.com/article/mo-pixels-mo-problems http://symbolset.com/icons http://useiconic.com/https://docs.google.com/spreadsheet/ccc?key=0Al0lI17fOl9DdDgxTFVoRzFpV3VCdHk2NTBmdVI2OXc#gid=0
8.04.2023 UX Upgrade - Treść 52
Responsywne tabeleGłówne wyzwanie: jak pokazać je czytelnie bez zubożenia warstwy informacyjnej
http://css-tricks.com/responsive-data-table-roundup/
8.04.2023 UX Upgrade - Treść 53
Responsywne tabele w pigułce
Główne strategie:1. Ukrywanie kolumn2. Rozbijanie tabel na rekordy3. Transformacja w wykresy4. Przewijanie horyzontalne
Przemyśl/sprawdź:5. Czy możliwe jest wskazanie najważniejszych kolumn i schowanie
drugorzędnych?6. Sposób korzystania z tabeli – czy kluczowe jest
• znalezienie właściwego wiersza?• porównanie wierszy kolumna po kolumnie? • ogólne podsumowanie?
Materiały do poczytania:http://css-tricks.com/responsive-data-table-roundup/http://css-tricks.com/footable-a-jquery-plugin-for-responsive-data-tables/http://www.zurb.com/playground/responsive-tables
8.04.2023 UX Upgrade - Treść 54
Na zakończenie
Na zakończenie
Podejście „One Web”RWD to sposób na znalezienie złotego środka między platformami bez upośledzania którejkolwiek z grup użytkowników i spiętrzania kosztów zarządzania.http://www.w3.org/TR/mobile-bp/
Treść gotowa na przyszłośćPlanując uniwersalne treści uniezależniamy się od obecnych i przyszłych urządzeń i sposobów wyświetlania.http://futurefriendlyweb.com/
Mobile firstRozwijając sposoby prezentacji treści dla różnych ekranów poczynając od niewielkich, mamy szansę naprawdę uzyskać serwis dla wszystkich, który nie jest dla nikogo.
8.04.2023 UX Upgrade - Treść 56
Dziękuję za uwagę
Wojtek ChojnackiStrategy & Development [email protected]
8.04.2023 UX Upgrade - Treść 57