Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00036 008474 23004081 na godz. na dobę w sumie
wyszukaj dokładnie | pobierz wtyczkę
Funkcjonalność aplikacji mobilnych. Nowoczesne standardy UX i UI - książka
Funkcjonalność aplikacji mobilnych. Nowoczesne standardy UX i UI - książka
Autor: , Liczba stron: 232
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-7405-3 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> strony mobilne
Porównaj ceny (książka, ebook, audiobook).
Czytaj online.
Komentuj

Kreuj doświadczenia użytkowników smartfonów i tabletów!

Urządzenia mobilne pomimo rosnących rozmiarów wciąż są zdecydowanie mniejsze od naszych laptopów i komputerów stacjonarnych. Zaprojektowanie funkcjonalnego i eleganckiego interfejsu użytkownika na tak ograniczonej przestrzeni wymaga nie lada kunsztu. Obecnie jednak urządzenia te dają programistom nowe możliwości, a wśród nich dostęp do ekranów dotykowych. Warto dobrze wykorzystać ich potencjał!

Dzięki tej książce, napisanej przez najlepszych specjalistów w branży, dowiesz się, jak najlepiej przygotować aplikację lub stronę internetową dla małych ekranów. Poznasz zalety i wady smartfonów, tabletów oraz czytników e-booków. Ponadto nauczysz się rozpoznawać typowe błędy, które obniżają doznania Twoich użytkowników w trakcie korzystania z Twojego oprogramowania, i unikać ich. A potem spojrzysz w przyszłość i przekonasz się, co może nas czekać wkrótce w dziedzinie urządzeń mobilnych. Ta książka to niezbędna pozycja dla każdego projektanta stron i aplikacji przeznaczonych na mniejsze ekrany.

Poznaj:

Bogactwo UX to klucz do sukcesu Twojej aplikacji!

Znajdź podobne książki Ostatnio czytane w tej kategorii

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)

Gdzie kupić całą publikację:

Funkcjonalność aplikacji mobilnych. Nowoczesne standardy UX i UI
Autor: ,
Sklep
Format
Cena
Helion.pl Helion.pl
książka
47,00 zł
Idź do sklepu »

Opinie na temat publikacji:

Inne popularne pozycje z tej kategorii:

Czytaj również:

Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: