Ux Upgerde_Symetria_Projektowanie responsywnych treści

UX Upgrade: część I
Projektowanie treści

Poznajmy się

Wojtek Chojnacki

Strategy & Development Leader
7 lat doświadczenia

Badania UX,
Projektowanie UX,
Strategia treści
Philip Morris International,
BZ WBK, Credit Agricole, Link4,
Orange

2014-01-30

UX Upgrade - Treść

2

Przecież miało być
o projektowaniu!

Czyli dlaczego zaczynamy od treści

2014-01-30


3

Dawno, dawno temu
RWD – koncepcja ciągle ewoluująca
2014-01-30


4

Po czym poznać serwis responsywny?

„Poznam, gdy zobaczę” ?

2014-01-30


5

Breakpointy
Płynność
treści
Równość
treści

Co charakteryzuje serwis responsywny
1.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 *
http://worldwildlife.org/

2014-01-30


6

Istota responsywności

Efektywne przekazanie treści
niezależnie od rozmiaru i typu
ekranu użytkownika

2014-01-30


7

Serwisy mobile a serwisy responsywne
Dedykowany serwis mobilny

Serwis responsywny

Treść desktop

Treść mobile

Użytkownik desktop

Użytkownik mobile

Treść serwisu

2014-01-30

Użytkownik desktop


Użytkownik mobile

8

Konsekwencje RWD dla treści

2014-01-30


9

+ Jeden serwis = centralne zarządzanie
Edytujemy treść dla wszystkich urządzeń naraz.
Brak duplikacji treści, potencjalnie lepsze SEO.
http://www.site-ninja.com/

2014-01-30


10

+Spójna treść na każdym urządzeniu
Użytkownicy mają pewność, że dzieląc się treścią nie będzie problemu
z dostępem do niej.
2014-01-30


11

- Nie każdą treść łatwo uelastycznić
Szczególnie w istniejących serwisach

2014-01-30


12

- Ograniczenia w tworzeniu
osobnego przekazu mobile
Ale…

http://www.telegraph.co.uk/

2014-01-30


13

…
mobilni użytkownicy to niekoniecznie inny świat
Potrzebują 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, Google

http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
2014-01-30


15

… it may not be rolled in
our mobile site.

Serwisy mobilne to nie serwisy
dla „mniej wymagających”!
2014-01-30


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
2014-01-30


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

2014-01-30


18

Uniwersalna
treść

Strukturyzacja treści i content strategy

2014-01-30


19

Jak powinna skalować się treść serwisu?

2014-01-30


20

Odpowiedzi należy szukać
element po elemencie.
2014-01-30


21

Case study: Crayola.com
http://danielmall.com/work/crayola/
2014-01-30


22

Typy treści, zbudowane
z powtarzalnych elementów
Biblioteka elementów treści pomaga nam je następnie zaprojektować.
2014-01-30


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.

2014-01-30


24

Zarządzanie strukturyzowaną treścią

Typ strony

Typy treści w
ramach strony

Reprezentacja w
CMS

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
2014-01-30


25

Zalety strukturyzowania treści
na przykładzie National Public Radio

2014-01-30


26

COPE – Create Once, Publish Everywhere

+ 80% pageviews

2014-01-30


27

Case study:
Credit-agricole.pl

Strategia treści i jej wpływ na projektowanie

2014-01-30


28

Motto marki: „Prosto i z sensem”
2014-01-30


29

Przeprojektowanie serwisu
„Klub rabatowy Credit Agricole”

http://klubrabatowy.credit-agricole.pl

Zmiana interfejsu (RWD) przyniosła świetne wyniki.
2014-01-30


30

Credit-agricole.pl

Badania z użytkownikami
pokazały pewne problemy.
Efektywność serwisu
pozostawiała trochę do
życzenia.

2014-01-30


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%

2014-01-30


32

Credit-agricole.pl – strona kategorii

•
•

Wiele podobnych produktów
Skupienie tylko na zaletach utrudnia wybór
2014-01-30


33

Credit-agricole.pl – strona produktu

•
•
•

Zatłoczony layout
Dużo uwagi potrzebnej by wyciągnąć najważniejsze fakty
„Przeciętna strona banku”
2014-01-30


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.

2014-01-30


35

Etapy prac
Warsztaty strategii
treści
Wymagania i
struktura treści

Projektowanie
User Experience

Copywriting

Wdrożenie

Nowy serwis
2014-01-30


36

Project stakeholders

Marketing online
(lider projektu)

Marketing

Menedżerowie
produktu

Public
Relations

Warsztaty strategii treści
2014-01-30


37

Warsztaty strategii treści
Warsztat 1: Użytkownicy i ich potrzeby względem treści
Warsztat 2: Wymagania dla treści
2014-01-30


38

Efekty warsztatów
Persony (4 grupy docelowe)

Kryteria wyboru produktów
i potrzeb informacyjnych

2014-01-30


39

Efekty prac nad treścią
Mapa rodzajów stron

Szablony treści wraz
z wymaganiami

2014-01-30


40

Element
struktury

Wymagania

Przykład
zastosowania

Content templates / stylebook
2014-01-30


41

Finalny serwis
4 punkty przełamania, dopasowana treść

2014-01-30

Nominacja

42

Treść zwinięta do haseł, szczegóły na żądanie
2014-


43

Dodatkowa treść przydatna
w kontekście mobilnym
2014-01-30


44

Elastyczne
prezentowanie treści

Narzędzia i strategie A.D. 2014

2014-01-30


45

Elastyczne prezentowanie treści

Teksty
Obrazy i ikony
Tabele
Co z video?
2014-01-30


46

Responsywne teksty
Główne wyzwanie: różne zasady obliczania rozmiaru fontu
i odległości od oka. http://ia.net/blog/responsive-typography-the-basics/
2014-01-30


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/

2014-01-30


48

Responsywne obrazy
Główne wyzwanie: dostosowanie do proporcji obrazu, ograniczenie
przesyłu danych
2014-01-30


49

Responsywne obrazy – strategia kadrowania
Kadrowanie przez wyznaczenie „punktu skupienia
http://designshack.net/articles/css/focal-point-intelligent-cropping-of-responsive-images/

2014-01-30


50

http://useiconic.com/

Responsywne ikony
Jeśli działają jak fonty, mogą dopasowywać swoje detale do rozmiaru.

2014-01-30


51

Responsywne obrazy w pigułce
Główne strategie:
1. Ograniczanie obrazów rastrowych kosztem SVG
2. Inteligentne kadrowanie tam, gdzie obraz jest bardziej dekoracją
3. Skalowanie tam, gdzie cały obraz stanowi kompletny przekaz
4. Responsywne ikony (najlepiej w formie web fontów)
Przemyśl/sprawdź:
1. Dostępność fontu urządzeniach mobilnych
2. Rozmiar fontu na różnych urządzeniach, przy różnych odległościach czytania
3. Długość nagłówków i innych wyróżnionych elementów typograficznych na
urządzeniach mobilnych
4. Długość linii (sugerowane 50-75 znaków)
5. Czytelność tekstu na tle obrazów przy różnych rozdzielczościach
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

2014-01-30


52

http://css-tricks.com/responsive-data-table-roundup/

Responsywne tabele
Główne wyzwanie: jak pokazać je czytelnie bez zubożenia warstwy informacyjnej

2014-01-30


53

Responsywne tabele w pigułce
Główne strategie:
1. Ukrywanie kolumn
2. Rozbijanie tabel na rekordy
3. Transformacja w wykresy
4. Przewijanie horyzontalne
Przemyśl/sprawdź:
1. Czy możliwe jest wskazanie najważniejszych kolumn i schowanie
drugorzędnych?
2. Sposób korzystania z tabeli – czy kluczowe jest
• znalezienie właściwego wiersza?
• porównanie wierszy kolumna po kolumnie?
• ogólne podsumowanie?
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
2014-01-30


54

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 first
Rozwijają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.
2014-01-30


56

Dziękuję za uwagę
Wojtek Chojnacki
Strategy & Development
Leader

Wojciech.chojnacki@symetria.pl

2014-01-30


57

Ux Upgerde_Symetria_Projektowanie responsywnych treści

Ux Upgerde_Symetria_Projektowanie responsywnych treści

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Similar a Ux Upgerde_Symetria_Projektowanie responsywnych treści

Similar a Ux Upgerde_Symetria_Projektowanie responsywnych treści (20)

Ux Upgerde_Symetria_Projektowanie responsywnych treści