Darmowy fragment publikacji:
Tytuł oryginału: Mobile Usability
Tłumaczenie: Marta Najman
ISBN: 978-83-246-7405-3
Authorized translation from the English language edition, entitled: MOBILE USABILITY; ISBN
0321884485; by Jakob Nielsen and Raluca Budiu; published by Pearson Education, Inc, publishing as
New Riders Publishing.
Copyright © 2013 by The Nielsen Norman Group.
All rights reserved. No part of this book may be reproduced or transmitted in any form or by any
means, electronic or mechanical, including photocopying, recording or by any information storage
retrieval system, without permission from Pearson Education, Inc.
Polish language edition published by HELION S.A. Copyright © 2013.
All rights reserved. No part of this book may be reproduced or transmitted in any form or by any
means, electronic or mechanical, including photocopying, recording or by any information storage
retrieval system, without permission from the Publisher.
Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej
publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną,
fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje
naruszenie praw autorskich niniejszej publikacji.
Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich
właścicieli.
Wydawnictwo HELION dołożyło wszelkich starań, by zawarte w tej książce informacje były
kompletne i rzetelne. Nie bierze jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za
związane z tym ewentualne naruszenie praw patentowych lub autorskich. Wydawnictwo HELION nie
ponosi również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji
zawartych w książce.
Wydawnictwo HELION
ul. Kościuszki 1c, 44-100 GLIWICE
tel. 32 231 22 19, 32 230 98 63
e-mail: helion@helion.pl
WWW: http://helion.pl (księgarnia internetowa, katalog książek)
Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie/funmob
Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.
Printed in Poland.
• Kup książkę
• Poleć książkę
• Oceń książkę
• Księgarnia internetowa
• Lubię to! » Nasza społeczność
Spis treści
O autorach
Przedmowa
Dlaczego mobilne znaczy różne
Zrzuty ekranu to jedynie przykłady
1. Nasze badania: jak przeprowadzaliśmy testy
oceniające funkcjonalność
Badania bezpośrednie
Testowanie funkcjonalności
Jakościowe badanie użytkowników
2. Strategia mobilna
Funkcjonalność na urządzeniach mobilnych różnego rodzaju
Odrębne doświadczenie mobilne jest najlepsze
Strona mobilna a strona pełna
Strony zoptymalizowane pod kątem komórek
Dlaczego pełne strony nie sprawdzają się na urządzeniach
mobilnych
Strony mobilne wybaczają mniej niż stacjonarne
Projekt responsywny
Wskazówki dotyczące funkcjonalności rzadko są dychotomiczne
Strony mobilne a aplikacje: nadchodząca zmiana strategii
Obecna strategia mobilna: najlepsze są aplikacje
Przyszła strategia mobilna: najlepsze są strony
Kiedy nastąpi zmiana strategii?
Aplikacje mobilne
Aplikacje mobilne są używane okresowo
Połowiczny postęp, nadzieja na horyzoncie
3. Projektowanie na małe ekrany
Zmarnowana przestrzeń mobilna
Chrom
Polecenia przeładowane a polecenia generyczne
Studium: optymalizacja ekranu do użytku mobilnego
Pisanie na telefonie komórkowym
Czas pobierania
Wczesna rejestracja musi umrzeć
Przykład: aplikacja do zamawiania pizzy
Studium: aplikacja mobilna „WSJ”
Mylący ekran początkowy
Degradacja marki
Lepszy projekt
Nowe etapy działania w aplikacji „WSJ”
Zmiany na lepsze w kolejnym roku
7
9
9
11
15
17
17
19
25
31
33
34
37
38
41
44
49
51
52
53
57
59
59
62
67
70
74
82
86
96
98
100
105
108
109
111
112
115
116
Kup książkęPoleć książkę4. Pisanie stron na telefony komórkowe
Treść mobilna jest dwukrotnie trudniejsza
Dlaczego czytanie na telefonie jest wyzwaniem
Jeśli masz wątpliwości, zrezygnuj z tego
Wypełniacz = zło
Stare słowa są najlepsze
Dane autora w treściach mobilnych?
Przekieruj drugorzędne informacje na drugorzędne ekrany
Przykład 1: kupony mobilne
Przykład 2: odkrycia postępowe na Wikipedii
Przekierowanie informacji = przycisk czytaj więcej
Mini-IA: strukturyzacja treści
Strona linearna? Zazwyczaj zły wybór
Sortowanie alfabetyczne musi (najczęściej) umrzeć
Przykład: struktura według ważności użycia
Funkcjonalne struktury
5. Tablety i czytniki e-booków
Funkcjonalność iPada
Tablety to urządzenia współdzielone
Do czego używa się iPada?
Potrójne zagrożenie dla projektów na iPada
Niespójny projekt interakcji
Metafora druku
Karty kontra przewijanie
Niejasne przewracanie stron
ZDN: zbyt dużo nawigacji
Ekran powitalny i dźwięki uruchomienia
Położenie pionowe bądź poziome
Dążąc do lepszego doświadczenia użytkownika na iPadzie
Funkcjonalność Kindle’a
Kindle: czytnik e-książek
Funkcjonalność Kindle Fire
6. Rzut oka w przyszłość
Projekt transmedialny na trzy ekrany
PC pozostanie ważny
Trzeci ekran: telewizor
Transmedialne doświadczenie użytkownika
Poza płaskim ekranem
W przyszłości każdy z nas będzie jak Harry Potter
Magia nowej generacji
Nie krzywdź mugoli
Dodatek. Trochę historii
Badanie terenowe z 2000 roku
WAP nie działa
Déjà vu: rok 1994 raz jeszcze
Zwycięzca wśród aplikacji: zabijanie czasu
Skorowidz
123
124
126
129
131
133
135
137
138
141
142
144
146
147
150
153
155
156
159
161
162
169
176
178
181
184
190
191
192
194
194
197
207
208
209
210
210
212
215
215
217
219
221
221
222
224
227
6
Funkcjonalność aplikacji mobilnych. Nowoczesne standardy UX i UI
Kup książkęPoleć książkę4. Pisanie stron
na telefony komórkowe
Przeprowadziliśmy wiele badań, podczas których
obserwowaliśmy ludzi czytających informacje
na telefonach komórkowych. W naszych
testach uwzględnialiśmy strony i aplikacje
mobilne oraz newslettery przychodzące
w formie e-maili. Niezależnie od formatu,
kluczowy jest jeden element: koncentracja.
Oczywiście, należy rozważyć także wiele innych
czynników, ale ta jedna kwestia stanowi
najważniejszą wytyczną dla funkcjonalności
treści mobilnych: kiedy piszesz dla użytkowników
telefonów komórkowych, skoncentruj ich uwagę
na najważniejszej zawartości.
Kup książkęPoleć książkęAby poznać wszystkie
szczegóły dotyczące
badania opisanego
w tym rozdziale, zajrzyj
do artykułu R.I. Singha,
M. Summetha i J. Millera,
Evaluating the Readability
of Privacy Policies
in Mobile Environment
(„Ocena czytelności
polityki prywatności
w środowisku mobilnym”)
w czasopiśmie
„International Journal
of Mobile Human
Computer Interaction”, 3,
nr 1 (styczeń – marzec
2011), s. 55 – 78.
Badanie
nie wykorzystywało
prawdziwego iPhone’a,
ale jako że użytkownicy
nie korzystali z żadnych
jego funkcji poza
czytaniem tekstu
i przewijaniem, ten fakt
nie powinien mieć
wpływu na wyniki testu
rozumienia.
Jak omawiamy w kolejnym podrozdziale, badania wykazały,
że zrozumienie informacji czytanej na ekranie telefonu jest o 108 procent
trudniejsze. Pojmowanie treści zostaje obniżone, gdy spoglądasz przez
wziernik, ponieważ nie widać szerszego kontekstu. Im mniej możesz
zobaczyć, tym więcej musisz zapamiętać, a ludzka pamięć krótkotrwała
jest stale słaba.
Treść mobilna jest dwukrotnie trudniejsza
Badanie przeprowadzone przez R.I. Singha i jego współpracowników
z Uniwersytetu Alberty wykazało, że zrozumienie skomplikowanych
informacji jest dużo trudniejsze, gdy czyta się treści przez wziernik.
Singh i jego współpracownicy przeprowadzili test luk na treści polityki
prywatności dziesięciu popularnych stron, takich jak: eBay, Facebook,
Google, Microsoft, Myspace, Orkut, Wikipedia, WindowsLive, Yahoo!
i YouTube.
My przeanalizowaliśmy szybko politykę prywatności na Facebooku,
która zawiera:
5789 wyrazów, czyli 35 razy więcej niż użytkownik czyta podczas
przeciętnej wizyty na stronie internetowej.
Poziom czytania 13. stopnia, przez co jedynie osoby co najmniej
po pierwszym roku studiów uznają tekst za łatwy do przeczytania.
Dobre formatowanie pod kątem witryny internetowej, wliczając
w to poprawne użycie nagłówków, list wypunktowań i wyróżnionych
słów kluczowych, zgodne z wytycznymi dotyczącymi pisania tekstów
internetowych. (Należy jednak wspomnieć, że te wytyczne zalecają
także użycie krótkich tekstów i poziomu czytania 8. stopnia podczas
tworzenia treści skierowanych do szerokiego grona odbiorców,
a nie wyłącznie studentów Harvardu).
W każdym razie, nie ma wątpliwości co do tego, że polityka prywatności
zalicza się do skomplikowanej zawartości sieci.
W badaniu Singha pięćdziesięciu uczestników ukończyło test luk podczas
lektury polityki prywatności na ekranie o rozmiarach stacjonarnych
bądź rozmiarach wyświetlacza iPhone’a.
Oto wyniki:
Ekran stacjonarny — 39,18 procenta zrozumienia.
Ekran mobilny — 18,93 procenta zrozumienia.
Aby tekst można było uznać za łatwy do zrozumienia, wynik testu
powinien wynieść co najmniej 60 procent. Tymczasem nawet podczas
124
Funkcjonalność aplikacji mobilnych. Nowoczesne standardy UX i UI
Kup książkęPoleć książkęlektury z ekranu stacjonarnego użytkownicy uzyskali zaledwie dwie
trzecie pożądanego poziomu zrozumienia, co wykazało, że polityka
prywatności jest z reguły nadmiernie skomplikowanym tekstem.
Test luk
Test luk to popularny test empiryczny na rozumienie tekstu. Działa
w następujący sposób:
1. Zastąp co n-te słowo w tekście luką. Zazwyczaj w teście n = 6, ale możesz
uczynić tekst łatwiejszym, zwiększając wartość n.
2. Poproś uczestników testu o przeczytanie zmodyfikowanego tekstu
i uzupełnienie luk swoimi odpowiedziami w postaci brakujących słów.
Każda osoba powinna rozwiązywać go samodzielnie.
3. Wynikiem testu jest procent poprawnie wpisanych słów. Jako że sprawdzasz
zrozumienie tekstu, a nie poprawną pisownię, synonimy i słowa z błędami
ortograficznymi także są punktowane.
Jeśli średnia wyników użytkowników wyniesie 60 procent lub więcej, możesz
założyć, że tekst jest dość zrozumiały dla grupy osób o takim samym profilu
jak uczestnicy badania. Istnieje wyraźna różnica między wynikiem czytelności
a wynikiem zrozumienia:
Czytelność jest właściwością konkretnego tekstu i przewiduje, jaki poziom
wykształcenia musi mieć przeciętna osoba czytająca go, by przyswoić treść
bez niepotrzebnych trudności.
Zrozumienie to połączenie właściwości tekstu i konkretnej grupy
użytkowników, które wykazuje, czy dana grupa odbiorców faktycznie
rozumie, co niesie ze sobą treść materiału.
Oto przykładowy test wykorzystujący akapit polityki prywatności Facebooka:
Dane wynikające z posiadanych {1}______ informacji o Tobie i {2}______
znajomych łączymy ze sobą. {3}______ przykład możemy połączyć dane
{4}______ Twój temat, aby określić, {5} ______ znajomych powinniśmy
prezentować w {6}______ Aktualnościach albo zaproponować do {7}______
na publikowanych przez Ciebie {8}______. Możemy połączyć dane
na {9}______ Twojego miejsca zamieszkania z {10}______ systemu GPS
i innymi {11}______ o Twojej lokalizacji, które {12}______, aby na przykład
informować {13}______ i Twoich znajomych o{14} ______ i wydarzeniach
w pobliżu {15}______ proponować oferty, które mogłyby {16}______
zainteresować.
(Poprawne rozwiązanie znajdziesz na następnej stronie).
Pełen tekst — przed wprowadzeniem luk — osiągnął poziom czytania 14.
stopnia, co odpowiada ukończeniu dwóch lat studiów. Jeśli więc jesteś
typowym mądrym, wykształconym czytelnikiem, prawdopodobnie możesz
zrozumieć ten akapit i wykonać test luk. Wciąż jest to jednak tekst o zbyt
wysokim poziomie czytania dla większości młodszych użytkowników
Facebooka. Wielu nastolatków potrzebuje prostszego tekstu, a nawet studenci
wolą na stronach mających służyć rozrywce czytać teksty o nieakademickim
poziomie, które nie przypominają fragmentów podręczników.
4. Pisanie stron na telefony komórkowe
125
Kup książkęPoleć książkęWyniki testu luk — nie podglądaj
Nie podglądaj, jeśli chcesz samodzielnie rozwiązać zamieszczony na poprzedniej
stronie test luk. Oto brakujące słowa z testowego akapitu:
{1} już
{2} Twoich
{3} Na
{4} na
{5} których
{6} Twoich
{7} oznaczenia
{8} zdjęciach
{9} temat
{10} danymi
{11} informacjami
{12} posiadamy
{13} Ciebie
{14} osobach
{15} lub
{16} Cię
Czy udało Ci się udzielić przynajmniej dziesięciu poprawnych odpowiedzi
(czyli nieco ponad 60 procent)? Jeśli tak, prawdopodobnie z łatwością możesz
zrozumieć pełny tekst. Jeżeli uzyskałeś niższy wynik, nie świadczy to o tym,
że jesteś głupi czy że tekst był zbyt trudny. Problem stwarza
najprawdopodobniej brak wiedzy kontekstowej dotyczącej Facebooka.
Przykładowo, słowo „Aktualności” byłoby łatwe do zrozumienia, ale jego
znaczenie w kontekście polityki prywatności Facebooka jest niejasne,
o ile nie należysz do użytkowników tego serwisu (co ma sens, ponieważ każdy
tekst powinien być zrozumiały tylko dla odpowiedniej grupy docelowej).
Dlaczego czytanie na telefonie jest wyzwaniem
Wyniki testu luk uzyskane przez użytkowników czytających na ekranie
o rozmiarze właściwym dla iPhone’a wyniosły 48 procent rezultatów
użytkowników ekranów stacjonarnych. Można powiedzieć,
że na mniejszym ekranie dwukrotnie trudniej zrozumieć skomplikowane
treści.
Dlaczego? W tym przypadku ludzie czytali jedynie pojedynczą stronę
informacji i otrzymywali ją podczas badania, nie musieli więc najpierw
jej szukać. Z tego powodu problemy z nawigacją czy interfejsem
użytkownika nie tłumaczą zwiększonej trudności. Co więcej, użytkownicy
byli badani w laboratorium, więc w grę nie wchodziły problemy związane
z poruszaniem się w trakcie korzystania z telefonu bądź zakłócenia
w postaci hałasu czy innych zdarzeń środowiskowych. (W prawdziwym
świecie takie zakłócenia uwagi i zmniejszenie doświadczenia użytkownika
jeszcze bardziej obniżają umiejętność zrozumienia treści mobilnych
podczas korzystania z telefonu komórkowego w autentycznych
warunkach).
Jedynym powodem, dla którego ekran telefonu zdobył niższe wyniki
niż ekran stacjonarny, był jego rozmiar, ponieważ w warunkach
przeprowadzania badania tylko ten czynnik został zmodyfikowany.
126
Funkcjonalność aplikacji mobilnych. Nowoczesne standardy UX i UI
Kup książkęPoleć książkęMniejszy ekran ogranicza zrozumienie z dwóch powodów:
Użytkownicy widzą mniej w danym czasie. Z tej przyczyny muszą
polegać na wysoce zawodnej pamięci, kiedy próbują zrozumieć coś,
co nie jest w pełni wyjaśnione na obszarze jednego ekranu. Mniej
kontekstu = mniejsze zrozumienie.
Użytkownicy muszą wykonywać więcej ruchów na stronie, przewijać
ją, by odwoływać się do innych części treści, zamiast po prostu
patrzeć w tekst.
Przewijanie wiąże się z trzema problemami:
Zabiera więcej czasu, co osłabia pamięć.
Odwraca uwagę od aktualnego problemu do drugorzędnej
czynności zlokalizowania odpowiedniej części tekstu.
Wprowadza nowy problem w postaci powrotu na poprzednie
miejsce na stronie.
Na rysunku 4.1. możesz zobaczyć artykuł z aplikacji How Stuff Works.
Artykuł zajmuje kilka ekranów; aby nadążać za szczegółami w treści,
użytkownik musi dużo zapamiętywać lub cofać się do schematu
zaprezentowanego na innym ekranie.
Rysunek 4.1. Aplikacja How Stuff
Works na iPhone’a: (A) schemat
różnych elementów aparatu
fotograficznego oraz (B) opis,
jak działa aparat, odnoszący się
do części wskazanych na schemacie.
Użytkownicy muszą cofać się
do poprzedniego ekranu,
by zrozumieć wytłumaczenie
A
B
Jako że mały ekran pogarsza zrozumienie, należy upewnić się,
że przestrzeń ekranowa wykorzystywana jest w sposób optymalny
i nie zabierają jej niepotrzebne bądź powtarzające się informacje.
Przykładowo, decyzja aplikacji Lonely Planet (rysunek 4.2.),
by zakotwiczyć tytuł czytanego artykułu, obniża skuteczne wykorzystanie
4. Pisanie stron na telefony komórkowe
127
Kup książkęPoleć książkęRysunek 4.2. Aplikacja Lonely
Planet na iPhone’a zakotwicza
tytuł czytanego artykułu,
przez co obniża możliwą
do wykorzystania przestrzeń ekranu
ekranu, nie oferując w zamian dodatkowych korzyści użytkownikom.
Choć taki zabieg jest zwykle rekomendowany aplikacjom zajmującym
się sprzedażą w internecie (w których przycisk Kup teraz powinien być
widoczny przez cały czas, na wypadek gdyby użytkownik zdecydował
się na zakup podczas przeglądania informacji o produkcie — zajrzyj
do rysunku 4.11. i rysunku 4.12. umieszczonych w dalszej części
rozdziału), nie ma on sensu jako drogowskaz informacyjny. Jeszcze
mniej przydaje się wtedy, gdy tytuł jest równie pozbawiony treści
jak „Hello, Amsterdam” („Witaj, Amsterdamie”) na załączonym
przykładzie. (Zajrzyj też do rysunku A.1 w „Dodatku”, aby obejrzeć
przykład, dzięki któremu w 2000 roku odkryliśmy tę zasadę projektów
mobilnych).
Jako że trudniej zrozumieć treści na telefonach komórkowych, konieczne
jest, by zawartość mobilna była łatwa do przeczytania i przeskanowania.
Zawoalowany, nadmuchany sposób pisania powinien zostać zastąpiony
bezpośrednim i zwięzłym przekazem, sformatowanym w sposób łatwy
do przeglądania.
Przyjrzyjmy się kilku dobrym i złym przykładom pisania i formatowania.
Na rysunku 4.3. aplikacja Teavana używa nadmiaru słów i cierpi
z powodu ubogiego i upstrzonego błędami formatowania. Paragraf
Health Info (informacje zdrowotne) pozbawiony jest znaków
interpunkcyjnych i poprzedza go ciąg liter niezrozumiały
dla użytkownika: FTGOP-2(SPECIAL).
Jej przeciwieństwem jest aplikacja OSHA (rysunek 4.4.), która zasługuje
na nagrodę za zwięzłość i łatwość przeglądania tekstu na komórce:
128
Funkcjonalność aplikacji mobilnych. Nowoczesne standardy UX i UI
Kup książkęPoleć książkęRysunek 4.3. (Po lewej stronie)
aplikacja Teavana na iPhone’a:
strona z opisem herbaty. Pierwszy
akapit ciężko przeczytać z powodu
zbyt rozbudowanych zdań
złożonych i wielu przymiotników
oraz formatowania zawierającego
błędy
Rysunek 4.4. (Po prawej stronie)
Aplikacja OSHA Heat Safety Tool
na Androida
informacje dotyczące wypadków muszą być szybkie do przyswojenia
i proste do zrozumienia, a lista wypunktowań i słowa kluczowe
są niezwykle pomocne. Jednakże grafiki to jedynie elementy dekoracyjne
— mała jest szansa, że pomogą użytkownikowi rozpoznać dany
przypadek.
W większości wypadków lista wypunktowań pozytywnie wpływa
na możliwość przeglądania informacji (rysunek 4.5.). W aplikacji
Recalls.gov (rysunek 4.5.A) łatwo przeczytać tekst; główne punkty
zostały wytłuszczone i przyciągają wzrok. (Wykorzystanie przycisków
previous (poprzedni) i next (następny) na górze ekranu, umożliwiających
nawigację między artykułami, jest mniej fortunne, ponieważ previous
i next nie niosą ze sobą znacznego tropu informacji). Z kolei zbyt
duża przestrzeń między wypunktowaniami może sprawiać, że strona
wygląda na gorzej skonstruowaną, jak w przypadku HSN (rysunek 4.5.B).
Co więcej, format tabeli bez obramowań sprawia, że użytkownikowi
trudniej zauważyć, który opis pasuje do której opcji. Z kolei opis marki
pod pierwszym niebieskim zdaniem jest na komórce całkowicie
niezrozumiały — nie koncentruje się na faktach dotyczących produktu.
Informacje na temat marki lepiej przekierować na drugorzędną stronę.
Jeśli masz wątpliwości, zrezygnuj z tego
Nasze badania dotyczące sposobu, w jaki użytkownicy czytają tekst
na telefonach komórkowych, ujawniły istnienie swego rodzaju paradoksu:
4. Pisanie stron na telefony komórkowe
129
Kup książkęPoleć książkęRysunek 4.5. Listy wypunktowań
sprawiają, że łatwiej skanować
stronę na małym ekranie:
(A) aplikacja Recalls.gov
na Androida oraz (B) aplikacja
HSN na Androida
A
B
Zabijanie czasu to kluczowa funkcja wielu aplikacji.
Jak zaobserwowaliśmy od czasu pierwszych badań funkcjonalności
telefonów komórkowych przeprowadzonych w 2000 roku, zabijanie
czasu to idealne zadanie dla urządzeń mobilnych, ponieważ są one
pod ręką w tych chwilach, gdy użytkownicy czekają na coś, co ma się
wydarzyć. Ulubione wypełniacze czasu to plotki, gry i wiadomości
sportowe. Ale nawet pozornie poważne zadania, jak sprawdzanie
notowań na giełdzie, wykonuje się często jako czynność zabijającą
czas, a użytkownik ogląda wartości indeksów, nie mając zamiaru
dokonywać żadnych transakcji.
Mobilni użytkownicy żyją w pośpiechu i wyraźnie złoszczą się,
kiedy rozwlekłe witryny marnują ich czas. Co więcej, z racji faktu,
że zrozumienie treści jest na telefonach komórkowych dwukrotnie
trudniejsze niż na komputerach stacjonarnych z dużym ekranem,
zbyt długie teksty są tym bardziej niemile widziane.
Jak to możliwe, że ludzie pragną zabijać czas, a jednocześnie złoszczą się,
kiedy ich czas jest marnowany? Oto łamigłówka, którą trzeba rozwiązać.
Zrozumienie tej układanki polega na rozpoznaniu, że nawet relaks
to zachowanie zamierzone: zgodnie z teorią poszukiwania informacji
(sprawdź ramkę „Trop informacji” w rozdziale 3., „Projektowanie
130
Funkcjonalność aplikacji mobilnych. Nowoczesne standardy UX i UI
Kup książkęPoleć książkęna małe ekrany”) użytkownicy dążą do zmaksymalizowania
współczynnika kosztów/korzyści. Oznacza to, że potrzebują więcej
emocji i mniej ogólnych interakcji.
Wypełniacz = zło
Niestety, koszt interakcji jest w przypadku telefonów komórkowych
znacznie większy, dlatego też musisz ścieśnić treść jeszcze bardziej
niż na stronach stacjonarnych. Rysunek 4.6. prezentuje typowy przykład
z naszych badań.
Rysunek 4.6. Aplikacja CNN
News na telefonie uczestnika
badania. Zdjęcie jest kadrem
z filmu wideo nagranego podczas
naszych badań dotyczących
funkcjonalności
Zwykle robimy zrzuty
ekranu bezpośrednio
ze strony bądź aplikacji,
ale w przypadku CNN
news zniknął z aplikacji,
zanim skończyliśmy
badanie. Z tego powodu
zabezpieczamy się
nagraniem o wysokiej
jakości, choć w przypadku
badań telefonów
komórkowych są one
trudniejsze do wykonania
niż podczas testowania
użytkowników
komputerów.
A
B
Podczas czytania „wiadomości dnia” na temat tornado jedna
z testowanych przez nas użytkowniczek natrafiła na komentarze
mieszkańców i powiedziała: Nie muszę wiedzieć, co wszyscy mają
do powiedzenia i jak to wydarzenie wyglądało z ich punktu widzenia.
Wystarczy cytat z wypowiedzi miejscowego autorytetu, reszta to tylko
wypełniacze miejsca i nie mam ochoty tego czytać.
Potem dodała: I to ma być wiadomość dnia? Jest zbyt długa. Powinna
brzmieć: zdarzyło się to i to, teraz dzieje się to i to.
Kilku innych badanych również stwierdziło, że nie chce czytać całej
treści newsa — zwłaszcza „wypełniaczy” — na telefonach. Użytkownicy
nie zamierzają kłopotać się lekturą dodatkowych, drugorzędnych
tekstów, zwłaszcza w aplikacjach mobilnych zaprojektowanych w celu
szybkiej konsumpcji informacji. Po prostu pragną poznać najważniejsze
fakty.
4. Pisanie stron na telefony komórkowe
131
Kup książkęPoleć książkęGwoli sprawiedliwości, od czasu przeprowadzenia naszych testów CNN
zmieniło nieco swoją aplikację, a dziś na początku każdego artykułu
znajduje się streszczenie (czy też „wyróżnione punkty opowieści”),
które sprawia, że dużo łatwiej przejrzeć tekst (rysunek 4.7.). Wciąż
nie rozwiązuje to problemu informacji-wypełniaczy, ale przynajmniej
ułatwia użytkownikom odnalezienie najważniejszych treści.
Rysunek 4.7. Nowsza wersja
aplikacji CNN na Androida.
Główne punkty newsa
są streszczane na początku
artykułu
Może spytasz, dlaczego ludzie po prostu nie przestaną czytać tuż
po tym, jak pochłonęli tyle informacji na dany temat, ile potrzebowali.
Oczywiście, użytkownicy szybko przestaną czytać i opuszczą daną stronę.
Ale wciąż czują się przyciągani przez tekst pisany i często pochłaniają
więcej słów, niż mają ochotę. A kiedy już to zrobią, czują się
wystrychnięci na dudka, ponieważ nie otrzymali wystarczającego
wynagrodzenia za zainwestowanie swojego cennego czasu.
Istnieją dwa rozwiązania:
Wycinaj zbędną zawartość. Przede wszystkim pozbądź się rozwlekłego
bla-bla, które ludzie nieustannie umieszczają na początku strony,
zanim przejdą do sedna artykułu. Dobrym ćwiczeniem
jest skasowanie pierwszego akapitu tekstu i sprawdzenie, czy strona
radzi sobie bez niego. Jeśli tak się stanie, zachowaj wprowadzone
zmiany.
Przekieruj uzupełniające materiały na drugorzędne ekrany, które
przeczytają jedynie ci użytkownicy, którzy wyraźnie będą chcieli
132
Funkcjonalność aplikacji mobilnych. Nowoczesne standardy UX i UI
Kup książkęPoleć książkęPozbądź się bla-bla w tekście
Znajdujący się na początku wielu stron internetowych
wstęp zajmujący akapit bądź kilka akapitów
nazywamy tekstem bla-bla — jest to blok słów, który
użytkownicy z reguły pomijają, kiedy pojawiają
się na danej stronie. Zamiast tego ich wzrok kieruje
się na bardziej treściwą zawartość, taką jak cechy
produktu, listy wypunktowań czy linki w hipertekście.
Najgorszy rodzaj tekstu bla-bla nie pełni żadnej funkcji.
To wypełniacz w czystym stopniu — banały, takie jak
„Witaj na naszej stronie, mamy nadzieję, że spodoba Ci
się nowy, lepszy wygląd”.
Pozbądź się powitalnego dywanika i przejdź do rzeczy.
Bezwzględna edycja akapitów wstępu może być
dobrym rozwiązaniem, ale czemu by ich nie wykreślić
w całości? Pozbywanie się słów zawsze
jest sensownym rozwiązaniem.
Niektóre teksty powitalne pełnią istotną rolę
i pomagają nakreślić kontekst dla zawartości, a dzięki
temu odpowiedzieć na pytanie: o czym jest ta strona?
Zwięzły wstęp może pomóc użytkownikowi lepiej
zrozumieć resztę strony. Nawet jeśli najpierw go
pominą, mogą wrócić do niego później, jeśli nie
wydał im się zastraszająco długi i przeładowany
treścią. Jeżeli wstęp będzie krótki, odrobina bla
może w istocie wpłynąć pozytywnie. Skracaj więc
początkową marketingową gadkę i koncentruj
się na udzieleniu odpowiedzi na dwa pytania:
Co? (Co użytkownicy znajdą na tej stronie
— czyli jaka jest jej funkcja?).
Dlaczego? (Dlaczego powinni się zaangażować
— czyli co oni z tego mają?).
zasięgnąć dodatkowych informacji. Taka bonusowa zawartość wspiera
użytkowników mających więcej wolnego czasu lub wyjątkowo
zainteresowanych tematem.
Kiedy piszesz stronę dla użytkowników mobilnych, bierz pod uwagę tę
maksymę: jeśli masz wątpliwości, wyrzucaj daną treść.
Stare słowa są najlepsze
„Mów tym samym językiem co użytkownik” — to podstawowa wytyczna
dotycząca funkcjonalności od ponad 20 lat. Fakt, że internet jest
środowiskiem językowym, powoduje dalszy wzrost ważności używania
odpowiedniego słownictwa.
Co więcej, użytkownicy mobilni są coraz bardziej zdominowani przez
wyszukiwanie. Dzięki wyszukiwaniu ludzie odkrywają nowe strony
i znajdują poszczególnie podstrony wewnątrz witryn czy w intranecie.
Jeżeli nie zajmujesz miejsca na pierwszej stronie wyników wyszukiwania
(SERP), możesz równie dobrze nie istnieć. Pisanie do sieci mobilnej
jest więc pisaniem po to, by zostać znalezionym.
Wiele elementów składa się na optymalizację silnika wyszukiwania (SEO),
ale wytyczna numer 1 to nasz dobry znajomy: „Mów tym samym
językiem co użytkownik”. Lub: „Kiedy piszesz, korzystaj ze słów
kluczowych, które pasują do zapytań użytkownika”.
Winston Churchill powiedział, że „zwięzłe słowa są najlepsze, a wśród
nich najlepsze są stare zwięzłe słowa”. Churchill miał na myśli pisanie
4. Pisanie stron na telefony komórkowe
133
Kup książkęPoleć książkędobrej prozy, a nie SEO. Okazało się jednak, że precyzyjne słowa
sprawdzają się często lepiej niż te krótkie, które mogą być zbyt szerokie,
by dokładnie opisać problem użytkownika. Przykładowo, nasi
czytelnicy prędzej będą szukać terminu „funkcjonalny” niż „prosty”.
Ale Churchill miał rację co do tego, że stare słowa są najlepsze.
Stare słowa rządzą, ponieważ ludzie dobrze je znają. Znajome słowa
samoistnie przychodzą na myśl. Z tego powodu użytkownicy z większym
prawdopodobieństwem użyją starych słów, kiedy sprowadzają
swój problem do zapytania w wyszukiwarce, czyli zazwyczaj dwóch
lub trzech słów — zwłaszcza na telefonie komórkowym, na którym
pisanie jest utrudnione.
Jako że starych słów używa się częściej, ludzie szybciej je rozumieją.
Pamiętaj, że użytkownicy komórek często się spieszą, a zrozumienie
tekstu jest utrudnione. Korzystanie ze znanych i precyzyjnych słów
szybciej dostarcza esencję treści i sprawia, że użytkownik rzadziej musi
odwoływać się do innych części tekstu. Rysunek 4.8. prezentuje
przykład trudnego do przeczytania tekstu, który opiera się na żargonie
ekonomicznym (fragment pochodzi z aplikacji Labor Stats). Mógłbyś
stwierdzić, że tego typu aplikacja skierowana jest do osób z odpowiednim
wykształceniem. Ale w takim wypadku odbiorcy byliby stosunkowo
dobrze zaznajomieni z ekonomicznym żargonem i nie potrzebowali
ani niejasnej definicji „produktywności pracy” („relacja między wynikiem
pracy a poświęconym czasem” — jaka jest natura tej relacji i jak się
ją oblicza?), ani bardziej precyzyjnego wytłumaczenia.
Rysunek 4.8. Aplikacja Labor
Stats na iPhone’a. Wiadomości
publikowane w tej aplikacji
są pisane także na telefony
komórkowe, ale zastosowanie
ekonomicznego żargonu
(jak i brak formatowania) sprawia,
że trudno je śledzić i czytać
134
Funkcjonalność aplikacji mobilnych. Nowoczesne standardy UX i UI
Kup książkęPoleć książkęDane autora w treściach mobilnych?
Czy powinno dać się zidentyfikować autorów artykułów i innych
treści sieciowych? Czy może materiał ma pozostawać anonimowy,
publikowany pod wspólnym szyldem danej organizacji?
Niestety, nie ma jednej odpowiedzi na te pytania. Ale istnieje kilka
kryteriów, niektóre są zgodne z zasadą omawianą wcześniej — pisząc
na telefony komórkowe, obcinaj to, co zbędne.
Przeciw podawaniu autora — wycinanie zbędnych treści
Oto powody przemawiające za usuwaniem nazwiska autora:
Jak zawsze, gdy piszesz w internecie — zwłaszcza na telefony
komórkowe — naszą podstawową wytyczną jest streszczanie się.
Użytkownicy spędzają na stronach niewiele czasu; każda informacja,
która nie zapewnia odpowiedniej wartości, powinna być wycinana.
Przeciętnie użytkownicy czytają jedynie około 120 słów na każdej
przeglądanej stronie, więc nie chcesz, by trzy z nich brzmiały:
„autorstwa Jana Kowalskiego”.
Mobilna wersja powinna być okrojona jeszcze bardziej niż
stacjonarna. Nawet jeśli na podstawie któregoś z poniższych
kryteriów uznasz, że chcesz uwzględnić nazwisko autora, lepiej
usunąć je z mobilnej wersji Twojej witryny.
Za podawaniem autora — buduj wiarygodność
Podawanie nazwiska autora może opłacać się w poniższych przypadkach:
Gdy autor jest sławny — może nawet jest popularny na tyle,
że ludzie przeczytają dany artykuł tylko po to, by dowiedzieć się,
co dana osoba ma do powiedzenia na określony temat. W takim
przypadku powinieneś uwzględnić nazwisko autora, linkując
do artykułu na stronie głównej, w wynikach wyszukiwania, listach
artykułów, tweetach i tak dalej.
Pamiętaj, że „sława” niekoniecznie odnosi się do „celebryty”.
Szanowani mózgowcy mogą być dobrze znani w środowiskach
specjalistycznych, choć 99 procent populacji nigdy o nich nie słyszało.
Liczy się tylko to, czy autor jest atrakcyjny dla docelowych odbiorców
tekstu.
Gdy autor ma odpowiednie kwalifikacje lub status świadczący
o wiarygodności artykułu — klasycznym przykładem jest doktor
nauk medycznych piszący o kwestiach zdrowotnych. W takim
przypadku koniecznie zaznacz, że jest to artykuł „autorstwa doktora
Jana Kowalskiego”.
4. Pisanie stron na telefony komórkowe
135
Kup książkęPoleć książkęTak i nie w biografii autora
Zazwyczaj krótka biografia autora należy do treści
drugorzędnych, które powinny znaleźć się
na oddzielnej podstronie. Jeśli jednak
wykwalifikowany bądź doświadczy autor wymaga
dłuższej wzmianki niż tylko imię i nazwisko,
by znacznie zwiększyć efekt wiarygodności,
powinieneś dodać jednolinijkowy abstrakt biografii
na górze strony, zachęcający użytkowników do lektury
artykułu. (Przykładowo: „autorstwa doktora Jana
Kowalskiego, dyrektora Centrum Mukowiscydozy
w Szpitalu Dziecięcym w Toronto” w artykule
dotyczącym mukowiscydozy u dzieci).
Dłuższe biografie powinny być zawsze
przekierowywane na drugorzędne strony i linkowane
pod nazwiskiem autora. Pamiętaj jednak,
by nie umieszczać pod nazwiskiem łącza do adresu
e-mail, z dwóch powodów:
Odciąga to uwagę użytkownika, który kliknie
w nazwisko i zostanie przekierowany do pisania
maila zamiast na nową stronę, a nie tego oczekiwał
po typowym linku.
Użytkownicy znacznie częściej chcą poczytać
o autorze, a nie skontaktować się z nim. Jeśli
uważasz to za słuszne, możesz dodać dane
kontaktowe na dole strony z biografią.
Biografia autora powinna zawierać fotografię
portretową, przynajmniej wtedy, gdy znajduje się
na oddzielnej podstronie. Może być to standardowe
ujęcie twarzy albo zdjęcie przedstawiające autora
wykonującego czynność związaną w jakiś sposób
z artykułem (np. jeżdżącego traktorem, jeśli jest to
życiorys rolnika piszącego o uprawach).
Podstrona z biografią autora powinna także zawierać
linki do pozostałych artykułów tej osoby
zamieszczonych na danej stronie, o ile nie jest to
blog lub inna witryna zawierająca w przeważającej
mierze teksty jednej osoby.
Gdy autor ma doświadczenie świadczące o wiarygodności artykułu
— przykładowo, projektant strony internetowej powinien zostać
wskazany z imienia i nazwiska, jeśli pisze artykuł omawiający ten
projekt.
Gdy autor często pisze na dany temat — stali czytelnicy mogą
rozpoznawać nazwisko lub chcieć wyszukać inne artykuły danego
autora.
Gdy artykuł jest felietonem, recenzją, politycznym komentarzem
bądź innym typem tekstu skoncentrowanym na tym, by dana
osoba podejmowała jakiś temat — wskazanie autora jest potrzebne,
by po prostu ujednoznacznić status zawartości. Zależnie od natury
danej strony, takie treści mogą wymagać także klauzuli, zgodnie
z którą analiza nie przedstawia poglądów całej organizacji.
Gdy artykuł znajduje się w intranecie — podanie nazwisk
autorów może pomóc w ustanowieniu poczucia przynależności
do społeczności poprzez pomoc pracownikom we wzajemnym
poznawaniu się.
Oto kilka przykładów sytuacji, w których nazwisko autora nie powinno
pojawić się na telefonie komórkowym. Zite, aplikacja zbierająca
newsy (rysunek 4.9.), słusznie używa pola przeznaczonego na dane
autora na wyświetlenie źródła artykułu. Z drugiej strony, podawanie
informacji o autorze w spisie artykułów (jak w przypadku ProPublica
136
Funkcjonalność aplikacji mobilnych. Nowoczesne standardy UX i UI
Kup książkęPoleć książkęRysunek 4.9. Aplikacja Zite
na iPhone’a w miejscu
przeznaczonym na nazwisko
autora podaje źródło artykułu
na rysunku 4.10.A) nie jest wskazane. Ta cenna powierzchnia powinna
zostać wykorzystana na ważniejsze informacje. Aplikacja „Washington
Post” (rysunek 4.10.B) podaje autora artykułu poniżej tytułu na stronie
z tekstem właściwym. Choć to lepsze rozwiązanie od umieszczania
go w nagłówku, wciąż zajmuje zbyt wartościowe miejsce; najlepiej
by było, gdyby tę powierzchnię spożytkować na zwartość, chyba
że „Washington Post” ma powody, by wierzyć, że dany autor
jest wystarczająco sławny, by czytelnicy poszukiwali konkretnie jego
artykułów. (Górna część strony przyciąga z reguły największą uwagę
i powinna zostać zarezerwowana na najważniejsze informacje).
Jeśli twórca potrzebuje uznania dla swoich dokonań i nie jest sławny,
rozważ umieszczenie jego nazwiska na końcu artykułu — tak jak
przykładowo w aplikacji CNN Money przedstawionej
na rysunku 4.10.C.
Przekieruj drugorzędne informacje
na drugorzędne ekrany
Nasze badania dotyczące funkcjonalności mobilnej wykazały,
że użytkownicy zwykle spieszą się, gdy korzystają z telefonów
komórkowych. Sytuacja odwrotna ma miejsce wtedy, gdy ludzie chcą
zabić czas, czekając na coś. Jednakże większość zadań jest przynajmniej
częściowo zorientowana na cel, a ludzie używający komórek mają
zazwyczaj określony czas na ich wykonanie. Przykładowo, kiedy
sprawdzasz skrzynkę mailową na telefonie, mniej czasu poświęcasz
na lekturę newsletterów, niż gdy czytasz je, będąc w domu czy biurze.
4. Pisanie stron na telefony komórkowe
137
Kup książkęPoleć książkęA
B
C
Rysunek 4.10. Zbyteczne podawanie danych autorów na telefonie komórkowym:
(A) strona internetowa ProPublica (propublica.org); (B) aplikacja „Washington Post”
na Androida; (C) aplikacja CNN Money na Androida
Od 1997 roku wiemy, że najlepiej formułować treści internetowe
w sposób zwięzły. W przypadku telefonów komórkowych ten punkt
staje się najważniejszą wytyczną, której należy trzymać się tak mocno,
jak to możliwe. Krótkie to już zbyt długie na komórkach. Dziś rządzi
ultrakrótkie.
Jak równocześnie być superzwięzłym i wciąż oferować ludziom to,
czego potrzebują? Dzięki przekierowaniu drugorzędnych informacji
na drugorzędne ekrany. Pierwszy ekran, który widzi użytkownik,
powinien koncentrować się na minimalnej porcji informacji potrzebnej
do zakomunikowania najważniejszych treści.
Przykład 1: kupony mobilne
Kupony zniżkowe to idealna usługa mobilna, ponieważ jest w dużym
stopniu zależna od czasu i/lub lokalizacji — sprzedaż błyskawiczna
niesie ze sobą poczucie pilnych działań, ponieważ ludzie chcą dowiedzieć
się o kuponach, zanim zostaną one wyprzedane. Podobnie w przypadku
kuponów do sklepów i na produkty, na które użytkownicy akurat się
natykają, przebywając na zewnątrz (czyli będąc z dala od komputerów
stacjonarnych).
138
Funkcjonalność aplikacji mobilnych. Nowoczesne standardy UX i UI
Kup książkęPoleć książkęRysunek 4.11. prezentuje przykład Grouponu i jego wygląd na telefonie
z Androidem.
Rysunek 4.11. Oferta mobilna
serwisu Groupon: (A) wygląd
ogólny i (B) wygląd szczegółowy.
Użytkownik zostaje przeniesiony
na szczegółową stronę po kliknięciu
More about this deal (Więcej o tej
ofercie) na pierwszym ekranie
A
B
Pierwszy widok jest w oczywisty sposób dostosowany do potrzeb
użytkowników mobilnych żyjących w pośpiechu. Widok szczegółowy
to z kolei przemyślany drugi krok dla tych osób, które są bliżej
zainteresowane ofertą. Prezentowanie tej ściany tekstu na pierwszym
ekranie nie byłoby dobrym pomysłem.
Groupon dobrze wypadł podczas naszych badań dotyczących
funkcjonalności. Od tamtej pory nieco zmienił swój wygląd i obecnie
„Więcej o tej ofercie” wyświetla się na tej samej stronie (rysunek 4.12.).
Zachowana została przejrzysta struktura informacji na górze strony.
Nowy projekt wciąż składa się z kilku warstw, ale zamiast przenosić
szczegóły na oddzielną podstronę, umieszcza je na dole tej samej strony.
Konkurencyjny serwis, LivingSocial, poradził sobie słabo.
Zaprezentowano go na rysunku 4.13.
LivingSocial łamie kilka wytycznych dotyczących funkcjonalności
mobilnej. Urocze dzieci zawsze dobrze się prezentują, ale w interfejsie
mobilnym na małym ekranie zdjęcia jedynie zabierają miejsce istotnym
treściom. W przypadku tego wyglądu i sposobu prezentacji treści
4. Pisanie stron na telefony komórkowe
139
Kup książkęPoleć książkęRysunek 4.12. W nowszej wersji
Grouponu po kliknięciu More
about this deal (Więcej o tej
ofercie) użytkownik zostaje
przeniesiony do tekstu na dole
strony
Rysunek 4.13. Mobilna wersja
serwisu LivingSocial
— przykładowa oferta
ciężko dowiedzieć się, co się kupuje. A jeśli można być czegoś pewnym
w przypadku użytkowników mobilnych, to tylko tego, że są zbyt zajęci,
by marnować czas na wyszukiwanie informacji.
(Aby oddać sprawiedliwość stronie LivingSocial, trzeba przyznać,
że przycisk Buy Now (kup teraz) trzyma się wytycznych: jest łatwo
klikalny na ekranie mobilnym, duży, wyraźny, a w jego sąsiedztwie
nie znajduje się nic, co użytkownik mógłby wcisnąć przez przypadek).
Oto, co dwóch uczestników naszych badań powiedziało na temat tych
odmiennych sposobów prezentowania ofert kuponów na urządzeniach
mobilnych:
O wyglądzie LivingSocial: Wydaje się, jakby wygląd dostosowany
był do zwykłej witryny i nie został przystosowany do telefonów
komórkowych. Podobałby mi się, gdybym korzystał z tej strony
na komputerze. Ten sam użytkownik o Grouponie: Na początek
otrzymujemy skrótową wersję. Można obejrzeć więcej szczegółów,
ale nie atakuje nas tona informacji. Jako że korzystam z telefonu,
zatłoczony ekran nie byłby dobrym pomysłem.
Inny użytkownik na temat Grouponu: Podoba mi się lista
wypunktowań. I na temat Living Social: Trzeba przeczytać cały blok
tekstu, by poznać szczegóły oferty.
140
Funkcjonalność aplikacji mobilnych. Nowoczesne standardy UX i UI
Kup książkęPoleć książkęPrzykład 2: odkrycia postępowe na Wikipedii
Wikipedię zawsze wyróżniały dwie cechy: duża liczba linków
w hipertekście oraz bardzo szczegółowa treść, dostarczająca wszelkich
informacji na temat danej rzeczy. Wikipedia zawsze stanowiła także
przykład złego pisania, a współtwórcy treści mieli niewielką wiedzę
o prawdziwie istotnych aspektach tematu, przez co nie byli w stanie
ustanowić priorytetów wśród informacji w artykule.
Zważywszy na tę trwającą przez dekadę tradycję, byliśmy dość zaskoczeni,
że Wikipedia dobrze wypadła podczas naszych badań na polu nadawania
priorytetu informacjom. Rysunek 4.14. prezentuje przykład tego,
jak wygląda artykuł po pierwszym uruchomieniu go na telefonie
komórkowym przez użytkownika.
Rysunek 4.14. Mobilna wersja
Wikipedii (m.wikipedia.org):
(A) początkowy wygląd artykułu
i (B) informacje widoczne
po przewinięciu strony w dół
A
B
Projekt koncentruje uwagę odbiorcy na kluczowych punktach artykułu,
równocześnie odrzucając drugorzędne informacje. Strona rozpoczyna
się prezentacją głównych faktów biograficznych w formie tabeli, po niej
zaś następuje krótki akapit na temat doktor Huang i zwinięte działy
zawierające bardziej szczegółowe informacje. Oczywiście, to nic innego
jak przykład odkryć postępowych, dość leciwego pomysłu z dziedziny
interakcji na linii człowiek – komputer (sprawdź ramkę „Odkrycia
postępowe” w rozdziale 3.). Ta zasada projektowa przydaje się szczególnie
wtedy, gdy tworzysz stronę na telefony komórkowe.
Szczególnie skuteczne jest przedstawienie zarysu drugorzędnych
informacji zamiast wrzucania użytkownika na głębokie wody linearnej,
4. Pisanie stron na telefony komórkowe
141
Kup książkęPoleć książkęprzewijanej strony. Dzięki temu odbiorca może, przykładowo, przejść
od razu do sekcji poświęconej nagrodom. Jeśli ten właśnie temat
go interesuje, nie musi przebijać się przez długą biografię, by do niego
dotrzeć.
Oto kilka wypowiedzi naszych badanych na temat mobilnej Wikipedii:
Dzięki temu mam szkicowy zarys całości. Na górze znalazły się
najważniejsze informacje, widzę więc nagłówki, a nie wszystkie
możliwe informacje. Możesz zgłębiać tylko te działy, które sobie
życzysz.
Podoba mi się to [odkrycia postępowe] bardziej niż otrzymywanie
wszystkich możliwych informacji. Mogę otworzyć życiorys i nie widzieć
pełnej bibliografii. Jestem za to wdzięczny.
Oczywiście, we właściwy dla Wikipedii obsesyjno-kompulsywny sposób
artykuł uwzględnia także materiały, które zdecydowanie nie były pisane
pod kątem telefonów. Tabela na początku strony zawiera informacje
należące do mniej istotnych treści (jak przykładowo to, gdzie studiowała
doktor Huang). Co więcej, zakładając, że użytkownicy są przede
wszystkim zainteresowani naukowymi dokonaniami doktor Huang,
wyjaśnianie transkrypcji jej nazwiska w systemach pinyin
i Wade’a-Gilesa nie jest nawet drugorzędną informacją, a trzeciorzędną.
W przypadku telefonów komórkowych takie fakty powinno
się delegować na oddzielną podstronę.
Przekierowanie informacji = przycisk czytaj więcej
Przekierowanie większości informacji na drugorzędne strony to trudna
decyzja, ponieważ wielu użytkowników nigdy ich nie ujrzy, nawet jeśli
nikt nie podważa istotnego znaczenia tych treści.
Ale pamiętaj: jeśli pierwszy ekran będzie zbyt gęsto wypełniony, nikt
nie przeczyta niczego. Lepiej skoncentrować się na pierwszym ekranie
i pozwolić tym użytkownikom, którzy są szczególnie zainteresowani,
zagłębić się w temat. Tym sposobem za pomocą swojej zawartości
mobilnej usatysfakcjonujesz większe grono klientów, zyskasz więcej
ruchu i odczujesz większe korzyści dla wartości biznesu.
Rysunek 4.15. prezentuje przykładowy dobry układ informacji wykonany
przez Apple’a. Aktualizacja oprogramowania przedstawiona jest
w bardzo zwięzły sposób na stronie głównej. Ci nieliczni użytkownicy,
którzy chcą poznać więcej szczegółów, mogą kliknąć w link Learn More
(czytaj więcej), a wtedy zostaną przekierowani na drugorzędną stronę.
(Sformułowanie „czytaj więcej” jest jednak dalekie od ideału, ponieważ
nie niesie ze sobą dużego tropu informacji, a jest jednym z najbardziej
rzucających się w oczy elementów strony).
142
Funkcjonalność aplikacji mobilnych. Nowoczesne standardy UX i UI
Kup książkęPoleć książkęRysunek 4.15. Aktualizacja
oprogramowania na iPhonie
Apple’a: (A) strona główna
oraz (B) strona ze szczegółami.
Informacja składa się z kilku warstw
B
A
Strony z newsami prezentują często inny przykład dobrego
rozwarstwienia (rysunek 4.16.) — wielu użytkowników jest w stanie
szybko dotrzeć do informacji, których potrzebują, dzięki przeglądaniu
streszczenia artykułu na stronie z nagłówkami, a nie poprzez czytanie
całego tekstu. Z tego powodu „prawdziwe” streszczenia (jak te na stronie
„Wall Street Journal” na rysunku 4.16.A), które tworzą spójną całość
i trafnie ujmują esencję historii, są lepiej widziane niż fragmenty zdań
(jak w aplikacji „USA Today” na rysunku 4.16.B) czy powtarzanie
pierwszego zdania artykułu.
Jednakże niektóre firmy idą zbyt daleko w rozwarstwienie, zmuszając
wszystkich użytkowników do przejścia na drugorzędną stronę, by znaleźć
jakiekolwiek informacje. Rysunek 4.17. prezentuje dwa przykłady
(WebMD i Net-a-porter), które na pierwszej stronie nie pokazują
żadnych przydanych treści, a przez to konieczne jest, by użytkownicy
wykonali dodatkowe kliknięcia, jeśli chcą poznać istotne dane.
W aplikacji WebMD (rysunek 4.17.A – B) łatwo objąć wzrokiem
najważniejsze rodzaje informacji dotyczące danego leku. Strona
jest jednak zbyt strukturalna. Lepszym rozwiązaniem byłoby dodanie
krótkiego streszczenia pod każdym nagłówkiem (sposób użycia, efekty
uboczne itd.), dzięki czemu użytkownik łatwo pojąłby ogólną koncepcję,
a dopiero potem mógł zdecydować się na przeczytanie bardziej
wyczerpujących informacji, jeśli ma na to ochotę. Kiedy zaś użytkownik
kliknie w któryś z tematów (4.17.B), zostaje przeniesiony na stronę
niesformatowaną pod kątem komórek — brak wypunktowań sprawia,
że trudno przejrzeć taki tekst.
4. Pisanie stron na telefony komórkowe
143
Kup książkęPoleć książkęRysunek 4.16. Streszczenia
artykułów na listach z nagłówkami
są przykładem treści warstwowych.
(A) Strona „Wall Street Journal”
(m.wsj.com) oraz (B) aplikacja
„USA Today” na Androida
A
B
Aplikacja Net-a-porter (rysunek 4.17.C – D) także zmusza użytkownika
do dodatkowych kliknięć, by poznać informacje o produkcie. Na stronie
głównej produktu wyświetlana jest jedynie grafika; wszystkie inne
istotne dane zostały przekierowane na drugorzędne ekrany. Te informacje
powinny zostać zaprezentowane na pierwszym ekranie, a linki mogłyby
prowadzić jedynie do tych danych, których większość użytkowników
nie potrzebuje (przykładowo do zakładki What size am I — „jaki
rozmiar noszę”). Najważniejsze treści, istotne dla większości osób,
lepiej umieścić na pierwszym ekranie w formie zwięzłej i łatwej
do przejrzenia. Nie należy przekierowywać ich na drugorzędny ekran.
Mini-IA: strukturyzacja treści
Definicja architektury informacji w wersji mini (mini-IA) jest prosta:
to struktura informacji dotyczących pojedynczego tematu. Przykładowo,
mini-IA w przypadku wiadomości e-mail to jedna strona.
Kiedy coś mieści się na jednej stronie, nie myślimy zwykle o prezentacji
tego w kategorii „architektury informacji”. Jednak sama decyzja,
by pozostać w formacie jednostronicowym, jest sprawą IA.
Często lepiej podzielić informacje na kilka jednostek, niż tworzyć
nadmiernie długą strukturę linearną, tak jak w przypadku rysunku 4.18.
144
Funkcjonalność aplikacji mobilnych. Nowoczesne standardy UX i UI
Kup książkęPoleć książkęRysunek 4.17. Informacje
podzielone na działy: (A) – (B)
aplikacja WebMD na iPhone’a
oraz (C) – (D) aplikacja Net-a-porter
na Androida. Obydwie wyświetlają
zbyt mało informacji na stronie
głównej
A
A
B
B
Możesz wtedy zaprezentować te jednostki na kilku stronach bądź
wykorzystać system nawigacji w obrębie strony, taki jak zakładki
czy slidery.
4. Pisanie stron na telefony komórkowe
145
Kup książkęPoleć książkęRysunek 4.18. Aplikacja Ted
Video na iPhone’a. Wszystkie 104
dostępne filmy zaprezentowane
są na jednej długiej liście.
Zastosowanie mini-IA
i pogrupowanie tematyczne
materiałów wideo byłoby dużo
bardziej pomocne
Strona linearna? Zazwyczaj zły wybór
Zacznijmy od odrzucenia popularnej mini-IA jako niemalże zawsze złej
z punktu widzenia funkcjonalności: w przypadku długiego artykułu
prawie nigdy nie należy wybierać rozwiązania zastosowanego przez
NBC na rysunku 4.19., czyli nie powinno się dzielić treści na linearną
sekwencję stron. Jeśli nawigacja ma ograniczyć się do linków typu
„Kontynuuj” czy „Następna strona”, lepiej trzymać się jednej długiej
strony i pozostać przy przewijaniu jej. W przypadku obracania stron
użytkownicy nie tylko muszą czekać pół minuty, aż każdy ekran
się załaduje, lecz także — gdy po przeczytaniu streszczeń chcieliby
wrócić do spisu odcinków — zmuszeni są wcisnąć przycisk Wstecz
w przeglądarce dwanaście razy.
(Wyjątek od tej reguły stanowi zawartość zaprezentowana na tabletach,
jak np. na iPadzie, czy też w przypadku aplikacji służących do czytania
książek, gdzie gest przewracania stron jest przyjętym poleceniem
poruszania się po stronach i/lub zawartość ładowana jest wcześniej,
więc przejście między stronami nie zabiera czasu. Co więcej, książki
nie są z reguły czytane podczas jednej sesji, więc podzielenie ich
na strony sprawia, że łatwiej zapisać użytkownikowi miejsce, w którym
skończył lekturę; w przeciwnym razie, wyobraź sobie przewijanie przez
całą książkę, by znaleźć trzeci akapit w rozdziale 11.).
W wielu sytuacjach najlepszą alternatywą jest podzielenie informacji
na osobne porcje treści, zachowujące logiczną spójność. Wówczas
możesz odpowiednio opisać każdą jednostkę i pozwolić użytkownikowi
146
Funkcjonalność aplikacji mobilnych. Nowoczesne standardy UX i UI
Kup książkęPoleć książkęRysunek 4.19. Mobilna wersja
strony NBC (m.nbc.com) dzieli
streszczenia odcinków na wiele
stron. Na każdej z nich znajduje
się jedynie obrazek i akapit tekstu
na nawigowanie bezpośrednio do tej partii tekstu, która spełnia jego
potrzeby. (Zauważ, że stwierdzenie „strona 2 z 12” ani nie jest opisowe,
ani nie zasługuje na własną stronę).
(W przypadku takich interakcji jak robienie zakupów w sklepie
internetowym linearne przechodzenie przez kolejne strony z reguły
lepiej się sprawdza, ponieważ każdy krok jest logicznie spójny, a wszystkie
razem tworzą zbiór koniecznych etapów danej aplikacji, przez co
nie możesz przejść do kroku 3., nie ukończywszy kroku 2.).
Sortowanie alfabetyczne musi (najczęściej) umrzeć
Innym popularnym elementem mini-IA jest często nadużywane
sortowanie alfabetyczne. Porządkowanie listy opcji zgodnie z kolejnością
alfabetyczną ma dwie główne zalety:
Jeśli użytkownicy znają nazwę tego, czego szukają, mogą odnaleźć
to na liście stosunkowo szybko.
Leniwe zespoły pracujące nad projektem nie muszą zajmować
się wymyślaniem lepszej struktury. Jako że wszyscy znamy alfabet,
każdy może ustawić przedmioty w odpowiedniej kolejności.
Pierwszy punkt to prawdziwa korzyść, a alfabetyczne sortowanie dobrze
sprawdza się w niektórych przypadkach. Przykładowo, zwykle dość
łatwo wybrać jeden stan USA z ułożonej alfabetycznie listy
pięćdziesięciu elementów. W takim wypadku spis od A do Z jest dużo
bardziej pomocny niż, załóżmy, grupowanie stanów regionami
czy zaprezentowanie ich na mapie — przynajmniej w sytuacji,
gdy użytkownik musi wybrać tylko jeden element (zwykle stan, w którym
mieszka), by przejść do strony zawierającej potrzebne informacje.
4. Pisanie stron na telefony komórkowe
147
Kup książkęPoleć książkę(Alfabetyczna lista stanów jest dobrą opcją jedynie wtedy, gdy trzeba
wybrać jeden z nich z menu nawigacji czy poleceń. Kiedy użytkownicy
muszą podać stan jako element danych adresowych — na przykład
w formularzach sklepów internetowych — lepiej skorzystać z pola
tekstowego, w które ludzie muszą wpisać dwuliterowy skrót. Jest to
szybsze rozwiązanie i mniej podatne na błędy. W przypadku telefonów
komórkowych pozwala także uniknąć wydłużonego przewijania
w rozwijanej liście, zajmującej jedynie pół ekranu urządzenia,
jak na rysunku 4.20.).
Rysunek 4.20. Aplikacja Macy’s
na iPhone’a. Wybór stanu
z rozwijanej listy jest nieefektywny
Listy państw i innych spisów ze znanymi elementami często lepiej
posortować alfabetycznie. Musisz jednak upewnić się, że użytkownicy
jednoznacznie mogą wskazać element swojego wyboru. W sytuacji,
gdy ludzie muszą przeszukać kilka miejsc w spisie, porządek alfabetyczny
traci swój sens.
W przypadku większości kwestii:
Użytkownicy nie wiedzą, który element chcą wybrać, przez co
alfabetyczna lista traci sens,
lub
Elementy łączy wewnętrzna logika, dyktująca lepszy porządek, przez
co alfabetyczna lista jest szkodliwa, ponieważ ukrywa tę logikę.
Rozmiary ubrań są danymi porządkowymi, co oznacza, że posiadają
wrodzoną jednostajną sekwencję rosnącą. Takie elementy powinny
być prawie zawsze sortowane zgodnie z tą cechą.
148
Funkcjonalność aplikacji mobilnych. Nowoczesne standardy UX i UI
Kup książkęPoleć książkęW innych przypadkach elementy grupuje się według logicznego podziału
na grupy. Możesz często określić te podwaliny logiczne podczas badań
sortowania, kiedy prosisz uczestników o pogrupowanie powiązanych
ze sobą elementów.
Przykładowo, Epicurious jest aplikacją z przepisami pozwalającą
użytkownikom wyszukiwać i zapisywać przepisy (rysunek 4.21.).
Lista ulubionych (bądź zapisanych) przepisów może być wyświetlona
alfabetycznie lub zgodnie z datą dodania. Żaden z tych sposobów
nie sprawdza się w przypadku długich spisów. Przy sortowaniu
alfabetycznym pierwsze słowo z nazwy (jak np. „Balsamiczny”
w „Balsamicznych pieczonych warzywach”) często nie określa całego
przepisu. Pomijając kilka najnowszych przepisów, mała jest także
szansa na to, że użytkownicy zapamiętali, kiedy po raz pierwszy dodali
dany element do listy. (Wspomnijmy jeszcze, że w Epicurious nie ma
możliwości przeszukania zbioru przepisów, przez co jeszcze trudniej
połapać się w nich w przypadku długiego spisu). Mini-IA grupująca
przepisy w różne kategorie (ryby, mięso, desery itp.) byłaby o wiele
bardziej przydatna.
Rysunek 4.21. Aplikacja Epicurious
na iPhone’a. Lista ulubionych
przepisów może zostać
posortowana alfabetycznie
lub w kolejności dodawania,
poczynając od najnowszych.
Żaden z tych sposobów
nie jest optymalny dla długiego
spisu przepisów
Ramy czasowe i położenie geograficzne to inne sposoby grupowania,
które często okazują się przydatne, choć czasami i ten wybór może być
błędny, jak zaprezentowano w przykładzie na rysunku 4.22. Wpisy
na liście to lokalizacje geograficzne, ale redaktorzy rozumieli porządek
alfabetyczny na swój sposób — The Black Forest („Czarny Las”)
umieszczono pod literą „F” (od „Forest” — „lasu”), ale Antwerpia
znajduje się pod „G” (od „Geography of Antwerp” — „geografii
Antwerpii”). Jest mało prawdopodobne, by użytkownicy byli w stanie
4. Pisanie stron na telefony komórkowe
149
Kup książkęPoleć książkęRysunek 4.22. Aplikacja How
Stuff Works na iPhone’a.
Oto przykład złego sortowania
alfabetycznego — Antwerpię
znajdziemy pod literą „G”
(od „Geography of Antwerp”
— „geografii Antwerpii”)
odgadnąć wszystkie typy klasyfikacji; kiedy faktycznie będą szukać
Antwerpii, prawdopodobnie przejrzą hasła pod „A” i nie domyślą się,
że hasło mogłoby się pojawić w innym miejscu „alfabetycznego” spisu.
Możesz zdecydować się na sortowanie długich list na podstawie
ważności bądź częstotliwości użycia, zamiast korzystać z domyślnego,
ale mniej przydatnego porządku alfabetycznego.
Zależnie od natury informacji większą funkcjonalność może zaoferować
jeszcze inna struktura. Owszem, w niewielu przypadkach najlepszym
wyjściem okazuje się sortowanie alfabetyczne. Ale zazwyczaj wtedy,
gdy rozważasz porządek od A do Z, powinieneś poszukać w sobie
dodatkowej motywacji i wpaść na lepsze rozwiązanie.
Przykład: struktura według ważności użycia
Aby wyobrazić sobie strukturę według ważności użycia, przyjrzyj
się rysunkowi 4.23., który prezentuje dwie przykładowe listy ćwiczeń
w aplikacjach mobilnych poświęconych fitnessowi.
Przykład z rysunku 4.23.A korzysta z użytecznej mini-IA, by przedstawić
szereg różnych pompek: lista ćwiczeń została uporządkowana
w kolejności od najłatwiejszego do najtrudniejszego. Z kolei przykład
z rysunku 4.23.B prezentuje spis posortowany alfabetycznie, co,
jak omówiliśmy w poprzednim podrozdziale, jest z reguły kiepskim
wyborem.
Zrzut ekranu z aplikacji Full Fitness (rysunek 4.23.B) prezentuje jedynie
część pełnej listy i uwzględnia na niej trzy rodzaje pompek: pochylone,
150
Funkcjonalność aplikacji mobilnych. Nowoczesne standardy UX i UI
Kup książkęPoleć książkęRysunek 4.23. Lista ćwiczeń
w dwóch aplikacjach na iPhone’a:
(A) aplikacja You Are Your Own
Gym oraz (B) aplikacja Full Fitness
A
B
zmodyfikowane i zwykłe. Skąd użytkownik ma wiedzieć, które
pompki wybrać, jeśli szuka ćwiczenia trudniejszego od poprzednio
wykonywanego? Czy „pompki zmodyfikowane” są łatwe
czy wyczerpujące?
Słowo „zmodyfikowane” niesie ze sobą kiepski trop informacji — wynika
z niego jedynie, czym to ćwiczenie nie jest, ale nie to, czym jest.
„Pochylone” brzmi lepiej, choć nie tak rzeczowo jak jego ekwiwalent
„z rękami w górze” użyty w aplikacji You Are Your Own Gym. Czym
różnią się od siebie pompki pochylone i nachylone? Założymy się,
że nie potrafisz odpowiedzieć na to równie szybko (lub równie
poprawnie), jak na to, czym różnią się pompki „z rękami w górze”
od tych „ze stopami w górze”. Prostsze słowa są z reguły lepsze.
(Wyjątkiem może być jedynie sytuacja, kiedy tworzysz treści skierowane
do ekspertów. Ale zaawansowani entuzjaści fitnessu z pewnością
nie muszą sprawdzać, jak wykonać pompkę pochyloną, nawet jeśli tak
właśnie nazywają to ćwiczenie).
Projektanci Full Fitness z pewnością skorzystaliby na lekturze tego
rozdziału. Jak już stwierdziliśmy, ich głównym problemem jest struktura.
Nawet w przypadku ulepszenia nazewnictwa obecne sortowanie
w aplikacji Full Fitness pozostałoby mniej funkcjonalne niż rozwiązanie
zastosowane w You Are Your Own Gym, zgodnie z którym różne typy
pompek zasługują na własną strukturę mini-IA, zgodną z najlepszym
i najlogiczniejszym porządkiem wykonywania ćwiczeń (czyli w tym
przypadku od najłatwiejszych do najtrudniejszych pompek).
4. Pisanie stron na telefony komórkowe
151
Kup książkęPoleć książkęNa marginesie, obie aplikacje korzystają z miniatur grafik, by zobrazować
wykonywane ćwiczenie i pomóc użytkownikom w wyborze
odpowiedniego. Obie mają także problemy z funkcjonalnością na tym
polu. Pomijając zdjęcie pompek o umiarkowanej trudności, fotografie
w You Are Your Own Gym pokazują zbyt dużo szczegółów tła
w stosunku do ich niewielkiego rozmiaru. Zdjęcia w Full Fitness
są bardziej przejrzyste i prawie tak samo łatwe do zrozumienia,
choć ich wielkość jest znacznie mniejsza niż w You Are Your Own Gym.
Zwykle krytykujemy maleńkie miniatury, ale większość grafik w Full
Fitness (poza dwiema przedstawiającymi ćwiczenia na urządzeniach)
jest wystarczająco wyraźna, by użytkownik mógł bez problemu odróżnić
od siebie ćwiczenia.
Innym przykładem dobrze dobranej mini-IA jest ta w aplikacji Teavana
(rysunek 4.24.). Teavana dzieli herbaty według gatunków (biała,
zielona, ulung i czarna). Co ciekawe, Teavana implementuje mini-IA
w nieco inny sposób niż You Are Your Own Gym (porównaj
z rysunkiem 4.23A): mini-IA w aplikacji Teavana nie znajduje
się na oddzielnej stronie; zamiast tego umieszczona została w stale
widocznym panelu na górze spisu (który nie znika, kiedy użytkownik
przewija w dół listę herbat). Takie rozwiązanie wymaga poświęcenia
części przestrzeni ekranowej, ale pozwala użytkownikom skuteczniej
zmieniać rodzaj herbaty. Z kolei miniatury są za małe i raczej
niepotrzebne — jest mało prawdopodobne, by ktoś rozpoznawał czy
wybierał herbatę, korzystając z tego typu zdjęcia (lub jakiegokolwiek
zdjęcia).
Rysunek 4.24. Aplikacja Teavana
na iPhone’a. Teavana odpowiednio
korzysta z mini-IA, by przedstawić
listę herbat. Górny panel z czterema
typami herbat jest stale widoczny
152
Funkcjonalność aplikacji mobilnych. Nowoczesne standardy UX i UI
Kup książkęPoleć książkęFunkcjonalne struktury
Kiedy dysponujesz dużymi zasobami informacji na dany temat, istnieją
trzy sposoby ich przedstawienia:
Jedna długa strona. Jedna długa strona jest najprostszym wyborem,
ale sprawia także, że użytkownikom trudniej znaleźć zgodne z ich
potrzebami podtematy. Ryzykujesz również wywołanie zmęczenia
spowodowanego przebijaniem się użytkownika na dół strony,
do jej odległego końca (a wiele osób szybko się podda).
Mini-IA. Mini-IA pozwala podzielić informacje na odpowiednie
porcje. Dzięki temu możesz zaoferować bezpośredni dostęp
do danych podtematów i umożliwić użytkownikowi lepsze
zrozumienie koncepcji przestrzeni niż wtedy, gdy zmuszasz
go do bezustannej harówki w postaci ciągłego przewijania.
Dystrybucja informacji. Dystrybucja informacji pozwala Ci połączyć
ze sobą podtematy wielu tematów, jak w przypadku rodzajów
pompek, ćwiczeń na maszynach i tym podobnych w kategorii
„Chest Exercises” („ćwiczenia klatki piersiowej”) w aplikacji Full
Fitness (rysunek 4.23.B).
Jak dowodziliśmy, funkcjonalność jest często wzmocniona dzięki
drugiemu podejściu. Jednak mini-IA sprawdzi się tylko wtedy,
gdy możesz ustrukturalizować tę przestrzeń informacyjną zgodnie
z zasadą, która wspiera zadanie wykonywane przez użytkowników
i ich tok myślenia.
Od początku istnienia internetu wewnętrznie zorientowany podział
na struktury był jednym z błędów w projekcie, które najbardziej
odstraszały użytkowników. Nasze badania dotyczące, przykładowo,
architektury informacji intranetu wielokrotnie wykazywały, że zarówno
produktywność użycia, jak i pracownika wzrasta niebotycznie, kiedy
IA bazującą na działach zastąpi się IA bazującą na zadaniach.
Podobnie jest w p
Pobierz darmowy fragment (pdf)