Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00317 004904 14690430 na godz. na dobę w sumie
Projektowanie interfejsów. Sprawdzone wzorce projektowe - książka
Projektowanie interfejsów. Sprawdzone wzorce projektowe - książka
Autor: Liczba stron: 536
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-3741-6 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> inne
Porównaj ceny (książka, ebook (-25%), audiobook).

Najważniejsze jest pierwsze wrażenie!

Mimo istnienia ogromnej ilości narzędzi do tworzenia interfejsów użytkownika projektowanie dobrych interfejsów aplikacji wciąż nie jest łatwe. Ta bestsellerowa książka jest jednym z niewielu wiarygodnych źródeł, które pomogą Ci przejść przez istny labirynt wariantów projektowych. 'Projektowanie interfejsów' przedstawia najlepsze praktyki i gotowe do wdrożenia pomysły w postaci wzorców UI oraz dostarcza rozwiązań powszechnych problemów w dziedzinie projektowania. Rozwiązania te możesz łatwo dostosować do sytuacji, w jakiej się znajdujesz.

W niniejszym zaktualizowanym wydaniu znajdziesz wzorce do wykorzystania zarówno w aplikacjach mobilnych i mediach społecznościowych, jak i w aplikacjach internetowych czy programach komputerowych. Każdy wzorzec zilustrowany jest przykładowymi projektami oraz opatrzony praktycznymi poradami, z których możesz natychmiast skorzystać. Doświadczeni projektanci mogą używać tego przewodnika jako źródła pomysłów, zaś początkujący mogą go potraktować jak mapę w drodze przez świat projektowania interfejsów i interakcji.

Użytkownicy wybierają atrakcyjne i praktyczne interfejsy!

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

Darmowy fragment publikacji:

Tytuł oryginału: Designing Interfaces Tłumaczenie: Maksymilian Gutowski ISBN: 978-83-246-3741-6 © 2012 Helion S.A Authorized Polish translation of the English edition of Designing Interfaces, 2nd Edition 9781449379704 © 2011 Jennifer Tidwell This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same. 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. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą 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/projin 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 Wprowadzenie do drugiego wydania ..........................................................................9 Wprowadzenie ............................................................................................................ 13 ćrodek do celu Podstawy badaþ uĔytkowników Motywacja uĔytkowników do nauki Wzorce 1. Co robi uŜytkownik .....................................................................................................23 24 26 28 30 31 32 32 33 34 35 36 37 38 39 40 41 42 43 Bezpieczna Eksploracja Pragnienie Natychmiastowej Satysfakcji Satisficing Zmiany Na BieĔñco Odwlekanie Decyzji Stopniowa Konstrukcja Przyzwyczajenie Mikroprzerwy Pamiöè Przestrzenna Pamiöè Prospektywna Wspomagane Powtarzanie MiäoĈè Do Klawiatury Porady Innych Osobiste Rekomendacje 3 Ogólny zarys Wzorce 2. Organizacja treļci: architektura informacji i struktura aplikacji ...............................45 46 49 50 54 59 64 69 73 77 81 85 88 Ekspozycja, Wyszukiwanie I Przeglñdanie AktualnoĈci MenedĔer Obrazów Pulpit Päótno I Paleta Kreator Edytor Ustawieþ RóĔne Widoki Wiele Obszarów Roboczych Wielopoziomowy System Pomocy Jak siö odnaleĒè Koszt nawigacji Modele nawigacji Konwencje projektowania stron Wzorce 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie siý ..................................95 95 96 98 103 104 104 107 110 114 117 121 123 127 131 134 136 139 142 Wskazane Punkty Startowe Spis TreĈci Piramida Panel Modalny Gäöbokie Linkowanie WyjĈcie Ewakuacyjne Grube Menu Mapka Strony W Stopce Narzödzia Logowania Mapa Sekwencji Okruszki Pasek Przewijania Z Adnotacjñ Animowane PrzejĈcie Podstawy tworzenia layoutu strony Hierarchia wizualna: waĔnoĈè i relacje Przepäyw wzroku: na co teraz spojrzeè Wykorzystanie dynamicznych elementów 4. Organizacja strony: ukĥad elementów ..................................................................... 145 145 145 151 153 155 156 159 Wzorce Ramy Graficzne Obszar Centralny 4 _ Spis treļci Siatka Równoprawnych Elementów Zatytuäowane Sekcje Zakäadki Akordeon Zwijane Panele Ruchome Panele Wyrównanie Do Lewej I Prawej WywaĔenie Po Przekñtnej Ujawnianie Reakcyjne Odblokowywanie Reakcyjne Päynny Layout 163 166 169 173 177 180 186 188 191 194 198 Scenariusze korzystania z list Architektura informacji MoĔliwe rozwiñzania Wzorce 5. Listy ............................................................................................................................203 203 204 205 208 209 212 216 220 224 229 232 235 237 239 241 243 Wybór Dwupanelowy Uszczegóäowienie W Jednym Oknie Wkäadki Siatka Miniaturek Karuzela Przemienne Täo Paginacja BezpoĈrednie PrzejĈcie Do Elementu Przewijanie Alfabetyczne Kaskadujñce Listy Tabela Drzewiasta Pole Nowego Elementu Poszerzanie horyzontów Wzorce 6. Jak to siý robi: czynnoļci i polecenia .........................................................................245 248 250 251 254 257 261 264 266 269 271 Grupy Przycisków Ukryte Narzödzia Panel Poleceþ Wyszczególniony Przycisk „Zakoþcz” Inteligentne Elementy Menu Podglñd WskaĒnik Postöpu OdwoäywalnoĈè Spis treļci _ 5 Wielopoziomowe Cofanie CzynnoĈci Historia Poleceþ Makra 273 277 279 Podstawy infografik Wzorce 7. Prezentowanie danych: dendrogramy, wykresy i inne infografiki .........................283 283 296 297 300 303 308 312 316 321 323 328 332 336 Oglñd Ze Szczegóäami Chmurki Informacyjne PodĈwietlanie Danych Dynamiczne Kwerendy Rozrysowywanie Danych Lokalne PrzybliĔanie Sortowalna Tabela Wykres Promienisty Równolegäe Wykresy Wykres Panelowy Treemapa Podstawy projektowania formularzy Wybór kontrolek Wzorce 8. Dane wejļciowe: formularze i kontrolki ..................................................................343 343 346 361 362 364 366 369 372 374 377 381 385 387 389 Format PobäaĔliwy Format Strukturalny Uzupeänianie Wskazówki Zapytanie Miernik Bezpieczeþstwa Hasäa Automatyczne Uzupeänianie Rozwijany Selektor Kreator Listy Poprawne WartoĈci DomyĈlne Zlokalizowane Komunikaty O Bäödach Czego nie znajdziesz w tym rozdziale Media spoäecznoĈciowe od podstaw Wzorce 9. Media spoĥecznoļciowe ............................................................................................395 396 396 399 400 404 406 Przeglñd Tematyczny Osobiste Wypowiedzi Wspóädzielenie I Komentowanie 6 _ Spis treļci Zagajenia Odwrócona Mikropiramida Harmonogram Kanaäy Tematyczne Linki SpoäecznoĈciowe Widget Wspóädzielenia Newsbox Ranking TreĈci Najnowsza AktywnoĈè 410 413 416 418 422 425 427 432 435 Wyzwania towarzyszñce projektowaniu na urzñdzenia mobilne Wzorce Pionowy Stos Klisza Narzödzia Dotykowe Dolny Pasek Nawigacyjny Miniaturki Z Tekstem Nieskoþczona Lista DuĔe Marginesy Przycisk Kasowania Tekstu WskaĒniki Wczytywania Poäñczone Aplikacje Ujednolicony Branding 10. Urzédzenia przenoļne ..............................................................................................439 440 446 447 448 451 453 455 458 460 462 464 465 467 11. Estetyka ......................................................................................................................473 475 483 492 493 494 498 501 504 507 509 512 Bibliografia ................................................................................................................ 515 Strony internetowe 515 516 KsiñĔki RóĔne style, ta sama treĈè Podstawy projektowania graficznego Co to oznacza dla aplikacji komputerowych Wzorce Odlegäe Täo Kilka Barw, Wiele WartoĈci Stylizowane Rogi Obwódki Zgodne Z Tekstem đdziebeäka Kontrastujñca GruboĈè Tekstu Skórki I Motywy Skorowidz ................................................................................................................. 519 Spis treļci _ 7 8 _ Spis treļci ROZDZIAĤ 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie siý Przedstawione w tym rozdziale wzorce odnoszñ siö do problemu nawigacji — skñd uĔytkownik wie, gdzie siö znajduje, dokñd ma siö udaè i w jaki sposób to zrobiè. Nawigacjö okreĈliäam mianem „problemu”, poniewaĔ poruszanie siö po witrynie lub aplikacji przypomina dojeĔdĔanie do pracy. Dojazdy sñ konieczne, Ĕeby znaleĒè siö tam, gdzie trzeba, ale jednoczeĈnie nudne, niekiedy wröcz irytujñce, a czas i energia, które na nie poĈwiöcamy, wydajñ siö zmarnowane. Czy tego czasu nie moĔna by wykorzystaè lepiej, choèby grajñc w grö lub rzeczywiĈcie pracujñc? Najlepszy dojazd do pracy to brak dojazdu. Wygodnie mieè pod rökñ wszystkie narzödzia pracy i nigdzie nie jeĒdziè. Na tej samej zasadzie trzymanie elementów interfejsu „w zasiögu röki” teĔ jest wygodne, zwäaszcza dla Ĉrednio zaawansowanych uĔytkowników, czyli takich, którzy juĔ wiedzñ, gdzie wszystko siö znajduje. Rzadziej uĔywane narzödzia warto czasami umieĈciè na osobnym ekranie, Ĕeby nie zawadzaäy. Opäaca siö teĔ rozmieĈciè grupy elemen- tów na osobnych stronach zwäaszcza wtedy, kiedy spowoduje to, Ĕe rozkäad interfejsu bödzie bardziej sensowny. Sñ to zupeänie poprawne rozwiñzania, o ile tylko „odlegäoĈci”, które uĔyt- kownik musi przebyè, pozostajñ niewielkie. Zatem im mniej, tym lepiej. Zanim omówiö to zagadnienie szerzej, poruszö kwestiö terminologii. Jak siý odnaleŚë ZaäóĔmy, Ĕe utworzyäeĈ rozlegäñ witrynö lub aplikacjö, którñ musiaäeĈ podzieliè na sekcje, podsekcje, wyspecjalizowane narzödzia, strony, okna, kreatory i podobne fragmenty. Jak pomóc uĔytkownikowi w poruszaniu siö po niej? Drogowskazy sñ elementami, które pozwalajñ uĔytkownikowi na zorientowanie siö w swoim bezpoĈrednim otoczeniu. Do powszechnie spotykanych znaków drogowych naleĔñ paski tytuäowe okien, logo stron internetowych i inne znaki promocyjne, zakäadki oraz wskaĒniki zaznaczenia. Wzorce i techniki w rodzaju dobrze sformatowanych zarówno globalnych, jak i lokalnych linków nawigacyjnych, Map Sekwencji, Okruszków czy Pasków Przewijania Z Ad- notacjñ (które w tym rozdziale omówiö) wskazujñ uĔytkownikowi, gdzie siö znajduje i dokñd moĔe siö udaè za pomocñ jednego klikniöcia. Pomagajñ mu zatem orientowaè siö w otoczeniu i planowaè swoje kolejne kroki. 95 Orientacja jest tym, co ludzie robiñ, aby dotrzeè do celu. Terminu raczej nie ma sensu obja- Ĉniaè, ale to, co ludzie robiñ, jest samo w sobie bardzo wdziöcznym tematem badaþ. Zagad- nienie to zostaäo zgäöbione przez specjalistów z dziedziny kognitywistyki, projektowania Ĉrodowiska i webdesignu. PoniĔsze elementy — patrzñc zdroworozsñdkowo — pomagajñ uĔytkownikom w docieraniu do celu. Dobre oznaczenia Oznaczenia o jasnym sensie wychodzñ uĔytkownikowi naprzeciw i wskazujñ, którödy siö udaè. Znajdujñ siö tam, gdzie moĔna by ich oczekiwaè, dziöki czemu uĔytkownik, kiedy musi podjñè jakñĈ decyzjö, zawsze ma pod rökñ wskazówki. MoĔesz skontrolowaè swój interfejs pod tym kñtem, wykonujñc najwaĔniejsze czynnoĈci, których usprawnienie jest celem Twojego projektu. Dopilnuj, by w kaĔdym punkcie, w którym uĔytkownik ma podjñè jakñĈ decyzjö, dalsza droga byäa odpowiednio oznaczona. UmieĈè mocne „wezwania do dziaäania” na pierwszych stronach, które uĔytkownik zobaczy. Wskazówki przestrzenne Toalety szuka siö zwykle na tyäach lokali gastronomicznych, a bramy tam, gdzie ĈcieĔka krzyĔuje siö z päotem. W podobny sposób przycisku „X” do zamkniöcia okna moĔna siö spodziewaè w prawym górnym rogu, a logo strony w lewym górnym rogu. WeĒ pod uwagö, Ĕe znajomoĈè takich wskazówek czösto jest uwarunkowana kulturowo, wiöc ktoĈ zupeänie niewtajemniczony (np. uĔytkownik, który nigdy nie miaä stycznoĈci z systemem operacyjnym) moĔe ich nie zauwaĔyè. Mapy Ludzie niekiedy chodzñ od oznaczenia do oznaczenia lub od linku do linku, nie analizu- jñc swoich ruchów po interfejsie w odniesieniu do ogólnego porzñdku rzeczy. (Na tym zwykle polega odnajdowanie wäaĈciwej drogi na obcym lotnisku). Niektórzy, zwäaszcza kiedy czösto przebywajñ w takiej przestrzeni, wolñ jednak wyobraziè jñ sobie w caäoĈci. Ponadto mapa bywa niekiedy jedynñ pomocñ nawigacyjnñ w Ēle oznaczonych lub gösto zabudowanych przestrzeniach, np. blokowiskach. Omówiony w tym rozdziale wzorzec Wskazane Punkty Startowe jest przykäadem starannie przygotowanego oznaczania skrzyĔowanego ze wskazówkñ Ĉrodowiskowñ, co polega na tym, Ĕe linki jako takie wyróĔniajñ siö na stronie. Mapa Sekwencji, jak sama nazwa wskazuje, jest mapñ. Z uĔyciem wzorca Oglñd Ze Szczegóäami (rozdziaä 7.) prezentowaè moĔna równieĔ mapy przestrzeni wirtualnych. Panel Modalny moĔna poniekñd uznaè za wskazówkö Ĉrodowi- skowñ, poniewaĔ uĔytkownik wyäñczajñcy taki panel wie, Ĕe wróci tam, gdzie byä wczeĈniej. Porównujö tutaj przestrzeþ wirtualnñ z fizycznñ, lecz wirtualna przestrzeþ moĔe zaoferowaè coĈ, czego fizyczna przestrzeþ (na razie) nie moĔe zapewniè — jest to WyjĈcie Ewakuacyjne. Gdziekolwiek jesteĈ, moĔesz kliknñè link WyjĈcia Ewakuacyjnego, aby powróciè na znajomñ stro- nö. To tak, jakbyĈ mógä w kaĔdej chwili przejĈè przez magiczny portal prowadzñcy do domu. Koszt nawigacji Kiedy wchodzisz do nieznanego pokoju, rozglñdasz siö dookoäa. W uäamku sekundy przy- swajasz sobie ksztaät pokoju, jego umeblowanie, oĈwietlenie, wyjĈcia oraz inne wskazówki. Momentalnie oceniasz, co to za pokój i jaki to ma zwiñzek z powodem, dla którego do niego wszedäeĈ. W nastöpnej kolejnoĈci wykonujesz zamierzonñ czynnoĈè. Gdzie? Jak? Na te pytania moĔesz znaleĒè odpowiedĒ od razu, choè nie zawsze, bo czasami w takim pokoju przyciñgajñ Twojñ uwagö inne, ciekawe rzeczy. 96 _ Rozdziaĥ 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie siý Podobnie wejĈcie na stronö internetowñ lub otworzenie okna niesie z sobñ koszt poznawczy. Musisz rozpracowaè nowñ przestrzeþ: przyswoiè sobie jej ksztaät, ukäad, treĈè, wyjĈcia oraz to, w jaki sposób wykonaè czynnoĈè, którñ zamierzaäeĈ na tej stronie lub w tymĔe oknie wy- konaè. Wymaga to wydatku czasu i energii. „Zmiana kontekstu” zmusza do zwrócenia uwagi na otoczenie i dopasowanie siö do niego. JeĔeli nawet okno (lub pomieszczenie) jest juĔ znane, stycznoĈè z nim i tak kosztuje. Nie jest to wprawdzie duĔy koszt, ale trzeba go uwzglödniè — weĒ pod uwagö, ile trzeba czekaè na wczytanie strony lub otworzenie okna. Jest to prawda w przypadku stron internetowych, okien aplikacji, okien dialogowych i ekra- nów urzñdzeþ przenoĈnych. Rodzaje decyzji, które uĔytkownicy podejmujñ w sprawie tego, dokñd siö udaè, teĔ sñ takie same. Oznaczenia zawsze trzeba czytaè, a ikony rozszyfrowywaè. Klikniöcie linku lub przycisku, którego znaczenie nie jest jasne, zawsze jest dla uĔytkownika pewnym ryzykiem. Ponadto czas wczytywania treĈci wpäywa na decyzje uĔytkowników. Kiedy strona wczytuje siö zbyt däugo lub w ogóle nie wczytuje siö, uĔytkownik moĔe siö zniechöciè i wyjĈè ze stro- ny, nim znajdzie to, co go interesuje. (Ilu uĔytkowników tracisz przez ten odtwarzacz wideo na pasku bocznym?). Co wiöcej, jeĈli strony witryny niezmiennie wczytujñ siö zbyt wolno, uĔytkownicy tracñ chöè do jej przeglñdania. Firmy typu Google dokäadajñ wszelkich staraþ, by strony wczytywaäy siö tak szybko, jak to moĔliwe, wäaĈnie ze wzglödu na to, Ĕe kosztem opóĒnieþ jest utrata odbiorców. Niewielkie odlegĥoļci Wiedzñc, Ĕe przechodzenie ze strony na stronö wiñĔe siö z kosztem, rozumiesz juĔ, dlaczego ograniczanie liczebnoĈci takich przejĈè jest nieodzowne. Kiedy wykonanie prostego zadania wymaga wielu takich przejĈè, postaraj siö ograniczyè je do jednego lub dwóch. Rzeczywisty wzrost wydajnoĈci zaleĔy jednak od samej struktury aplikacji. Jednñ z najgorszych rzeczy, jakñ projektant moĔe zrobiè, jest zmuszenie uĔytkownika do wchodzenia na wiele podstron czy otwierania wielu okien za kaĔdym razem, kiedy musi wykonaè jakñĈ prostñ, codziennñ czynnoĈè. (Jeszcze gorzej jest, gdy doprowadzisz uĔytkownika do takiego miejsca, po czym stwierdzisz, Ĕe nie speäniä stosownego warunku, Ĕeby wykonaè zadanie, i kaĔesz mu wróciè do punktu wyjĈcia). Czy moĔesz zaprojektowaè swojñ aplikacjö tak, by najczöstsze czynnoĈci (czyli okoäo 80 ogóäu czynnoĈci) moĔna byäo wykonaè na jednej stronie, bez jakichkolwiek zmian kontekstu lub najwyĔej z jednñ? Jest to trudne przy niektórych aplikacjach. Czy jakieĈ narzödzie jest zbyt rozbudowane, Ĕeby je umieĈciè na stronie gäównej? Spróbuj je ograniczyè: usunñè kontrolki, skróciè oznaczenia, zamie- niè säowa w obrazy albo wprowadziè wyspecjalizowane kontrolki, które pozwolñ zaoszczödziè miejsce. Czy narzödzie nie pasuje do reszty strony gäównej? Spróbuj zatem je zmniejszyè, oddzieliè pustñ przestrzeniñ lub umieĈciè gdzieĈ, gdzie nie bödzie zawadzaè. Czy moĔesz zrobiè tak, by treĈè strony byäa sukcesywnie ujawniana? Czy moĔesz domyĈlnie ukryè czöĈè treĈci z pomocñ Zatytuäowanych Sekcji lub Akordeonu? Czasami odpowiednim rozwiñzaniem jest obsäugiwanie pewnych funkcji ze stron, do których trzeba przejĈè kilkoma klikniöciami — chodzi tu o te pozostaäe 20 funkcji, które nie muszñ byè pod rökñ. MoĔe teĔ siö tak zdarzyè, Ĕe zachowanie wizualnej prostoty aplikacji jest waĔniejsze Koszt nawigacji _ 97 od zaoszczödzenia uĔytkownikowi jednego czy dwóch przejĈè. Rzadko uĔywane funkcje mo- Ĕesz umieĈciè za dodatkowymi „drzwiami” (zgodnie z zasadñ 80/20). Jak zawsze, jeĈli masz ja- kiekolwiek wñtpliwoĈci, poeksperymentuj z róĔnymi projektami i przetestuj ich uĔywalnoĈè. Modele nawigacji Jak wyglñda model nawigacji Twojej strony lub aplikacji? Innymi säowy: jak ekrany, strony oraz przestrzenie sñ poäñczone i w jaki sposób uĔytkownicy poruszajñ siö miödzy nimi? Wróèmy jednak do terminologii. System nawigacji globalnej jest tym, co znajdziemy na kaĔdej stronie gäównej. Zwykle przyjmuje postaè menu, zakäadek i pasków bocznych, z których pomocñ uĔytkownik porusza siö po strukturze nawigacyjnej witryny. (W poprzedniej edycji tej ksiñĔki nawigacjö globalnñ uznaäam za wzorzec. DziĈ jest to jednak na tyle powszechna i dobrze zrozumiana koncepcja, Ĕe nie ma juĔ sensu nadawaè jej takiej rangi). System nawigacji funkcyjnej, który równieĔ moĔna znaleĒè na kaĔdej stronie gäównej, skäada siö z linków i narzödzi odnoszñcych siö do tych elementów strony lub aplikacji, które nie sñ wäa- Ĉciwñ treĈciñ, czyli do rejestracji, pomocy, drukowania, Edytorów Ustawieþ (rozdziaä 2.), ustawieþ jözykowych itp. Nawigacje asocjacyjna i wierszowa opierajñ siö na umieszczaniu linków w pobliĔu lub w ob- röbie samej treĈci strony lub aplikacji. Kiedy uĔytkownik czyta stronö lub posäuguje siö niñ, takie odnoĈniki oferujñ mu moĔliwoĈci, które w danej sytuacji mogñ byè przydatne. WiñĔñ w ten sposób treĈè pod wzglödem tematycznym. Przyjrzyjmy siö teraz kilku modelom, na których opierajñ siö witryny i aplikacje. OĈ i szprychy Architektura ta (rysunek 3.1), znajdowana najczöĈciej na urzñdzeniach mobilnych, polega na wylistowaniu wszystkich najwaĔniejszych obszarów strony lub aplikacji na stronie gäównej, czyli „osi”. UĔytkownik przechodzi do tych obszarów klikniöciem lub naciĈniö- ciem stosownego elementu, wykonuje odpowiednie zadanie, po czy wraca na ekran gäówny, by udaè siö do innego obszaru. Ekrany „szprych” sñ skonstruowane tak, by ĈciĈle odnosiäy siö do swoich funkcji; ich przestrzeþ jest starannie rozplanowana i moĔe w niej nie byè miejsca na listö innych najwaĔniejszych ekranów. Dobrym przykäadem tego modelu jest ekran gäówny iPhona oraz Spis TreĈci, który pojawia siö na stronach internetowych. Rysunek 3.1. OĈ i szprychy 98 _ Rozdziaĥ 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie siý Peäne poäñczenie Na tym modelu opiera siö wiele stron internetowych. Tu teĔ mamy do czynienia z ekra- nem gäównym lub stronñ gäównñ, lecz zarówno na niej, jak i na wszystkich innych stro- nach znajdujñ siö linki do pozostaäych stron — na kaĔdej znajduje siö system nawigacji globalnej w rodzaju paska górnego menu. Globalna nawigacja moĔe byè ograniczona do jednego poziomu (co widaè na przykäadzie na rysunku 3.2, gdzie widnieje tylko piöè stron) albo gäöboka i rozbudowana, skäadajñca siö z wielu poziomów i „zagrzebanych” gäöboko elementów. JeĈli uĔytkownik moĔe z kaĔdej strony za pomocñ jednego klikniöcia dotrzeè do dowolnej strony caäej witryny, mamy wäaĈnie model peänego poäñczenia. Rysunek 3.2. Peäne poäñczenie Wiele poziomów Ten model równieĔ powszechnie wystöpuje na stronach internetowych (rysunek 3.3). NajwaĔniejsze strony sñ ze sobñ w peäni poäñczone, ale podstrony äñczñ siö jedynie miödzy sobñ, choè zazwyczaj majñ równieĔ odnoĈniki do stron pierwszopoziomowych w ramach systemu globalnej nawigacji. SpotkaäeĈ siö z tym na witrynach, których podstrony byäy wylistowane jedynie w paskach bocznych bñdĒ drugopoziomowych zakäadkach — uĔyt- kownik widzi te elementy jedynie w tych menu, które pojawiajñ siö dopiero po klikniöciu linku pierwszopoziomowej strony lub kategorii. Aby z dowolnej podstrony dotrzeè na innñ, trzeba kliknñè dwa razy lub wiöcej. Wielopoziomowñ witrynö moĔna przeksztaäciè w caäkowicie poäñczonñ przy uĔyciu rozwijanych menu lub wzorców Grube Menu i Mapka Strony W Stopce. Takie rozwiñzanie jest zdecydowanie lepsze. Rysunek 3.3. Wiele poziomów Modele nawigacji _ 99 Krok po kroku Pokazy slajdów, wykresy procesów i Kreatory (rozdziaä 2.) prowadzñ uĔytkownika krok po kroku przez kolejne ekrany w okreĈlonej kolejnoĈci (rysunek 3.4). OdnoĈniki Wstecz i Dalej sñ na stronie wyeksponowane. Rysunek 3.4. Krok po kroku Piramida Piramida jest wariantem modelu „krok po kroku”, w jakim dodatkowo istnieje strona centralna bñdĒ menu, gdzie zawarta jest caäa sekwencja elementów lub podstron (rysu- nek 3.5). UĔytkownik moĔe wybraè dowolny element, przejĈè do niego, a nastöpnie, korzy- stajñc z odnoĈników Wstecz i Dalej, poruszaè siö po elementach we wäaĈciwej kolejnoĈci. W kaĔdej chwili moĔe teĔ wróciè do strony centralnej. Wiöcej na ten temat przeczytasz w tym rozdziale, w opisie wzorca Piramida. Rysunek 3.5. Piramida Przeciñganie i przybliĔanie Sñ rzeczy, które najlepiej prezentujñ siö jako duĔe, pojedyncze obszary, a nie wiele maäych. Do tej kategorii naleĔñ mapy, duĔe obrazy, duĔe dokumenty tekstowe, infografiki i me- dia uwzglödniajñce upäyw czasu (czyli dĒwiök i film). W rozdziale 7. omówiö je bardziej szczegóäowo. Przeciñganie i przybliĔanie to teĔ sposób nawigacji, wiöc przy takim mo- delu naleĔy udostöpniè uĔytkownikowi kontrolki säuĔñce do „przeciñgania” treĈci (po- ziomo lub pionowo), przybliĔania i oddalania oraz przywracania okreĈlonego stanu. Na rysunku 3.6 prezentujö przykäad tego modelu. Rysunek 3.6. Przeciñganie i przybliĔanie Päaska nawigacja W niektórych rodzajach aplikacji potrzebne sñ doĈè minimalistyczne systemy nawigacji, a czasami nawet nie sñ w ogóle potrzebne. Zastanów siö nad aplikacjami opartymi na wzorcu Päótno I Paleta, w rodzaju Photoshopa, albo nad innymi, rozbudowanymi aplikacjami, takimi jak Excel. Znajduje siö w nich wiele narzödzi i funkcji, do których moĔna z äatwoĈciñ 100 _ Rozdziaĥ 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie siý dotrzeè za poĈrednictwem menu, pasków narzödzi i paneli. Z narzödzi, które nie oddzia- äujñ na pracö w programie natychmiastowo, moĔna skorzystaè za poĈrednictwem Paneli Modalnych lub wieloetapowych sekwencji. Style nawigacyjne tych rodzajów aplikacji wydajñ siö charakteryzowaè innñ jakoĈciñ niĔ pozostaäe, które tu opisujö — uĔytkownik zawsze wie, gdzie siö znajduje, ale moĔe mieè problemy ze znalezieniem wäaĈciwego na- rzödzia, ze wzglödu na duĔñ iloĈè funkcji dostöpnych w kaĔdym momencie. Panel modalny Technika ta polega na wprowadzeniu uĔytkownika na ekran, którego jedyna opcja nawi- gacji polega na potwierdzeniu zapoznania siö z jego treĈciñ, wypeänieniu formularza lub wyäñczeniu okna (rysunek 3.7). Panele modalne czösto pojawiajñ siö na wierzchu ele- mentów na ekranie lub stronie i säuĔñ do wykonywania drobnych konkretnych czynnoĈci, wymagajñcych od uĔytkownika poĈwiöcenia im caäej swojej uwagi. Wiöcej na ten temat przeczytasz w opisie wzorca Panel Modalny. Rysunek 3.7. Panel modalny WyraĒne punkty wejĈcia Skñd uĔytkownik wie, jak zaczñè korzystaè ze skomplikowanej strony lub aplikacji? MoĔna mu wskazaè odpowiednie czynnoĈci z pomocñ wzorca Wskazane Punkty Startowe (rysunek 3.8). Nowi uĔytkownicy oraz tacy, którzy rzadko ze strony lub aplikacji korzy- stajñ, nie muszñ dziöki temu tak bardzo wysilaè siö przy nauce obsäugi. Rysunek 3.8. WyraĒne punkty wejĈcia Zakäadki Zakäadki (rysunek 3.9), permalinki, gäöbokie linki i wzorzec Gäöbokie Linkowanie pozwa- lajñ uĔytkownikowi na wygodne dotarcie do wybranego przez siebie miejsca w dowolnej chwili, jeĈli nawet miejsce to jest zagrzebane gäöboko w strukturze nawigacyjnej. Daj mu sposób na unikniöcie koniecznoĈci przedzierania siö przez niezliczone odnoĈniki, by do- trzeè do upragnionej strony lub stanu. Modele nawigacji _ 101 Rysunek 3.9. Zakäadki WyjĈcie ewakuacyjne Kiedy uĔytkownik beznadziejnie zaplñtuje siö w aplikacji, staje przed bäödem programu lub strony albo trafia za gäöbokim linkiem do strony, której treĈè jest niezrozumiaäa ze wzglödu na brak kontekstu, potrzebne jest mu wyjĈcie ewakuacyjne (rysunek 3.10), czyli dobrze oznaczony link, który pozwala wróciè do znajomego punktu. Wiöcej na ten temat przeczytasz w opisie wzorca WyjĈcie Ewakuacyjne. Rysunek 3.10. WyjĈcie ewakuacyjne NaleĔy zwróciè uwagö na trzy rzeczy, które cechujñ te modele. Po pierwsze, moĔna je äñczyè. W jednej aplikacji lub na jednej witrynie moĔna wykorzystaè kilka z nich, zwäaszcza Panel Modalny, WaĔne Punkty WejĈcia, Zakäadki oraz WyjĈcie Ewakuacyjne, gdyĔ sñ one silnie zlokali- zowane i nie wpäywajñ na ogólnñ strukturö nawigacyjnñ. Po drugie, niektóre z tych mechanizmów w istocie ograniczajñ moĔliwoĈci nawigacyjne uĔyt- kownika. Otwarty dostöp do elementów i moĔliwoĈè szybkiego poruszania siö miödzy nimi to na ogóä dobra rzecz, ale kiedy uĔytkownik oglñda zajmujñcy caäy ekran pokaz slajdów, na pewno nie chce widzieè skomplikowanego menu nawigacji globalnej! Woli skoncentrowaè siö na samym pokazie slajdów, wiöc wystarczñ mu przyciski Wstecz i Dalej oraz WyjĈcie Ewakuacyjne. ObecnoĈè peänego wachlarza opcji nawigacyjnych pociñga za sobñ koszt: zaj- muje miejsce, zaĈmieca ekran, zwiöksza obciñĔenie poznawcze i sugeruje uĔytkownikowi, Ĕe strona, którñ przeglñda, nie ma wiökszego znaczenia. Po trzecie, wszystkie te mechanizmy i wzorce moĔna urzeczywistniè na ekranie na róĔne sposoby. Do przedstawiania systemu globalnej nawigacji na podstronach rozbudowanej wi- tryny lub aplikacji moĔna wykorzystaè zakäadki, menu albo dendrogramy w pasku bocznym — nie musisz jednak podejmowaè decyzji w sprawie jego dokäadnej postaci, dopóki nie doj- dziesz do etapu tworzenia layoutu. Podobnie panel modalny moĔna przedstawiè w postaci lightboksu lub okna dialogowego, ale decyzjö dotyczñcñ tego równieĔ moĔesz odwlec do momentu, aĔ stwierdzisz, co wäaĈciwie powinno byè modalne, a co nie. 102 _ Rozdziaĥ 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie siý Projektowaniem graficznym moĔna zajñè siö na dalszym etapie projektowania ogólnego, juĔ po ustaleniu architektury informacji i modeli nawigacyjnych. Konwencje projektowania stron Opracowanie modelu nawigacyjnego warto oddzieliè od tworzenia projektu graficznego. Dziöki temu staje siö äatwiejsze myĈlenie o projektach samych stron w sposób elastyczny i Ĉwia- domy. Istniejñ jednak pewne konwencje okreĈlajñce przestrzenne rozmieszczenie funkcji na- wigacyjnych. Bäödem byäoby je zlekcewaĔyè. System nawigacji globalnej umieszcza siö zwykle na samej górze lub po lewej stronie — czasami i tu, i tu. Rzadziej pojawia siö on po prawej, gdyĔ moĔe to powodowaè problemy z rozmiarem strony i przewijaniem poziomym, jeĔeli projektant nie zdecyduje siö skorzystaè z wzorca Päynny Layout (rozdziaä 4.). Dwa stosunkowo nowe podejĈcia do nawigacji globalnej to wzorce Grube Menu i Mapka Strony W Stopce, które umoĔliwiajñ uĔytkownikowi zobaczenie caäej struktury hierarchicznej witryny, co odbywa siö kosztem utraty wolnej przestrzeni w nagäówku lub stopce. Jak juĔ wspomniaäam, wzorce te pozwalajñ na przeksztaäcenie wielopoziomowego modelu nawiga- cyjnego na model w peäni poäñczony. Kiedy goĈcie na stronie sñ przewaĔnie zarejestrowanymi uĔytkownikami, moĔna w jej pra- wym górnym rogu zamieĈciè zestaw linków funkcyjnych. Zazwyczaj tam uĔytkownicy szu- kajñ narzödzi zwiñzanych z ich pobytem na stronie, czyli ustawieþ konta, profili uĔytkownika, wylogowywania, pomocy itp. Wiöcej na ten temat przeczytasz w opisie wzorca Narzödzia Logowania. Nawigacja asocjacyjna — polegajñca na umieszczaniu odnoĈników we wäaĈciwej treĈci lub w jej pobliĔu, w celu tematycznego zgrupowania zasobów — czösto przyjmuje formö sekcji lub panelu „Podobne artykuäy”. MoĔna siö z tym czösto spotkaè na serwisach informacyjnych i blogach. Kiedy uĔytkownik czyta artykuä, w stopce lub na pasku bocznym moĔna znaleĒè inne artykuäy, dotyczñce podobnych tematów lub napisanych przez tego samego autora. Tagi zarówno zdefiniowane przez uĔytkowników, jak i odgórnie narzucone wspomagajñ nawigacjö asocjacyjnñ oraz uäatwiajñ korzystanie ze spisów podobnych artykuäów i linków. Chmury tagów uäatwiajñ znajdowanie tematów na niektórych stronach, zwäaszcza takich, na których znajduje siö bardzo duĔo artykuäów o bardzo szczegóäowo okreĈlonej tematyce. (Na mniejszych stronach i blogach nie dziaäajñ one równie dobrze). CzöĈciej spotykana technika nawigacyjna polega na przedstawieniu listy tagów, którymi artykuä zostaä opatrzony, na sa- mym koþcu. KaĔdy tag jest wtedy odnoĈnikiem prowadzñcym do caäego zbioru artykuäów, które zostaäy nim oznaczone. Kiedy strona wykorzystuje media spoäecznoĈciowe, naleĔy uwzglödniè jeszcze wiöcej opcji nawigacyjnych. Na stronie gäównej moĔna umieĈciè Newsbox, który odeĈle uĔytkownika do ostatnio opublikowanych elementów. W Rankingach TreĈci pokazuje siö najczöĈciej wspóä- dzielone lub komentowane elementy, podczas gdy Najnowsza AktywnoĈè pokazuje uĔytkowni- kom bieĔñce dyskusje. Linki SpoäecznoĈciowe i Widgety Wspóädzielenia äñczñ uĔytkowników bezpoĈrednio z serwisami spoäecznoĈciowymi. O tych wzorcach przeczytasz w rozdziale 9. Konwencje projektowania stron _ 103 Wzorce W tym rozdziale opowiadam o róĔnych aspektach nawigacji: o ogólnej strukturze lub modelu, ĈwiadomoĈci tego, gdzie siö jest, dokñd naleĔy siö udaè oraz zorientowaniu siö, w jaki sposób. Pierwsza seria wzorców odnosi siö do modelu nawigacyjnego i moĔna z nich korzystaè nie- zaleĔnie od ogólnego layoutu caäego ekranu. Oto one: 1. Wskazane Punkty Startowe 2. Spis TreĈci 3. Piramida 4. Panel Modalny 5. Gäöbokie Linkowanie 6. WyjĈcie Ewakuacyjne ãñczñc layouty z modelami na konwencjonalnych stronach, uzyskujemy nastöpujñce wzorce: 7. Grube Menu 8. Mapka Strony W Stopce 9. Narzödzia Logowania Nastöpne wzorce sprawiajñ siö dobrze jako oznaczenia miejsc, w których uĔytkownik siö znajduje, choè takñ rolö moĔe peäniè równieĔ dobrze zaprojektowany system nawigacji glo- balnej. Mapa Sekwencji, Okruszki i Pasek Przewijania Z Adnotacjñ mogñ teĔ säuĔyè jako inte- raktywne mapy treĈci. Paski Przewijania Z Adnotacjñ sñ przeznaczone raczej dla modeli na- wigacyjnych typu „przeciñganie i przybliĔanie”, a nie dla wytworów skäadajñcych siö z wielu poäñczonych miödzy sobñ stron. 10. Mapa Sekwencji 11. Okruszki 12. Pasek Przewijania Z Adnotacjñ Animowane PrzejĈcie pomaga uĔytkownikowi w zachowaniu orientacji, kiedy porusza siö po interfejsie. Jest to jedynie sztuczka, ale niezwykle dobrze przyczynia siö do tego, Ĕe uĔyt- kownik wie, gdzie jest i co siö dzieje. 13. Animowane PrzejĈcie Wskazane Punkty Startowe Rysunek 3.11. Schemat Wskazanych Punktów Startowych 104 _ Rozdziaĥ 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie siý Co zrobië Przedstaw jedynie kilka gäównych punktów rozpoczöcia pracy z interfejsem. Powinny skäaniaè do wykonania jakiejĈ czynnoĈci i byè zrozumiaäe. UĔywaj wyrazistych wezwaþ do dziaäania. Kiedy uŜywaë Projektujesz stronö lub aplikacjö, z której uĔytkownicy bödñ korzystaè sporadycznie lub na której bödñ siö zwykle zjawiaè nowi uĔytkownicy. WiökszoĈè z takich uĔytkowników najle- piej obsäuĔyè, dajñc im do przeczytania tekst wprowadzajñcy, kaĔñc wykonaè jakieĈ zadanie lub dokonaè wyboru spoĈród bardzo maäej iloĈci najpopularniejszych opcji. Jednak nie musi to byè najlepsze rozwiñzanie, jeĔeli funkcja tej aplikacji lub strony jest w peäni oczywista i wprowadzenie zbödnego etapu nawigacyjnego miaäoby zirytowaè uĔytkownika (tak jak w aplikacjach przeznaczonych dla Ĉrednio zaawansowanych i ekspertów). Dlaczego Niektóre aplikacje i witryny po uruchomieniu lub otworzeniu pokazujñ uĔytkownikowi istny mötlik: wiele paneli, nieznajome terminy i wyraĔenia, bezsensowne reklamy i nieaktywne paski narzödzi. Niezdecydowany uĔytkownik nie ma jasnego wskazania, co powinien zrobiè najpierw. „Wäñczyäem... I co dalej?”. Dla dobra tych uĔytkowników podaj na poczñtku kilka moĔliwoĈci rozpoczöcia pracy z pro- gramem. Kiedy te moĔliwoĈci bödñ odpowiednio dopasowane do oczekiwaþ uĔytkownika, bödzie mógä z peänym przekonaniem wybraè którñĈ z nich i zabraè siö do pracy — to z kolei oddziaäuje na pragnienie natychmiastowego zaspokojenia. W innym przypadku uĔytkownik przynajmniej bödzie wiedziaä, do czego strona lub witryna säuĔñ, skoro bödzie mógä juĔ od progu zapoznaè siö z najwaĔniejszymi zadaniami i kategoriami. W ten sposób sprawiasz, Ĕe aplikacja staje siö zrozumiaäa sama przez siö. W jaki sposób Kiedy uĔytkownik wchodzi na stronö lub uruchamia aplikacjö, powinien zetknñè siö z punktami startowymi jako swego rodzaju „wrotami” do wäaĈciwej treĈci. Od tych punktów poprowadĒ uĔytkownika przez aplikacjö delikatnie, ale stanowczo, aĔ uda mu siö zaznajomiè z Ĉrodowiskiem na tyle dobrze, by mógä juĔ podñĔyè dalej samodzielnie. Te punkty startowe powinny odnosiè siö do wiökszoĈci powodów, dla których uĔytkownicy korzystajñ z aplikacji lub strony. MoĔe to byè zatem jeden punkt, dwa albo o wiele wiöcej, w za- leĔnoĈci od tego, co pasuje do projektu. NaleĔy je jednak opisaè jözykiem zrozumiaäym dla ĈwieĔo upieczonego uĔytkownika — to nie jest miejsce na techniczne okreĈlenia, które pojawiajñ siö wyäñcznie w Twojej aplikacji. Pod wzglödem graficznym punkty startowe powinny byè wyeksponowane zgodnie z ich wzglödnñ waĔnoĈciñ. Na stronach startowych wiökszoĈci witryn zazwyczaj moĔna równieĔ znaleĒè dodatkowe linki nawigacyjne: system nawigacji globalnej, funkcyjnej i inne. Powinny one byè mniejsze i mniej wyeksponowane niĔ Wskazane Punkty Startowe. Te dodatkowe odnoĈniki peäniñ bardziej wyspecjalizowanñ rolö i nie zawsze prowadzñ uĔytkownika do samego serca strony, podobnie jak drzwi do garaĔu nie prowadzñ bezpoĈrednio do salonu. Wskazane Punkty Startowe powinny peäniè rolö „drzwi frontowych”. Wzorce _ 105 Przykĥady Gäówna czöĈè strony iPada firmy Apple (rysunek 3.12) musi speäniè zaledwie kilka zadaþ: zwróciè na siebie uwagö, zachöciè do iPada i skierowaè uĔytkownika tam, gdzie bödzie mógä siö dowiedzieè wiöcej o produkcie albo go zakupiè. Nawigacja globalna jest graficznie wy- täumiona w porównaniu z mocnymi, wyrazistymi punktami startowymi. Na pozostaäym ob- szarze strony tekst i linki zagöszczajñ nieco treĈè, ale jest to wäaĈciwie jedyne, co uĔytkownik widzi nad zgiöciem. Rysunek 3.12. Strona iPada na serwisie firmy Apple W Fireworksie i innych aplikacjach tuĔ po uruchomieniu otwiera siö okno startowe (rysunek 3.13), które wskazuje nowemu lub sporadycznemu uĔytkownikowi moĔliwe czynnoĈci, z których najpopularniejsze to utworzenie czegoĈ nowego, otworzenie istniejñcego dokumentu i prze- czytanie zasobów systemu pomocy. W tym oknie startowym znajduje siö kratka, którñ moĔna bardzo wygodnie zdezaktywowaè wyĈwietlanie ekranu startowego przy kolejnych urucho- mieniach. Okno to moĔe möczyè zaawansowanych uĔytkowników, poniewaĔ jest dodatkowym, a zbödnym krokiem na drodze do rozpoczöcia pracy w programie. 106 _ Rozdziaĥ 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie siý Rysunek 3.13. Okno startowe Fireworksa W innych bibliotekach http://quince.infragistics.com/Patterns/Clear 20Entry 20Points.aspx Spis Treļci Rysunek 3.14. Craigslist Wzorce _ 107 Co zrobië UmieĈè na stronie listö linków do bogatych w treĈè podstron witryny lub aplikacji. Przedstaw wystarczajñco duĔo informacji na temat kaĔdego linku, aby uĔytkownik mógä podjñè wäaĈci- wñ decyzjö. Nie zamieszczaj na stronie jakichkolwiek innych istotnych treĈci. Kiedy uŜywaë Projektujesz stronö domowñ, ekran powitalny albo jakikolwiek inny obszar, który ma peäniè rolö „spisu treĈci” pokazujñcego, dokñd uĔytkownik moĔe siö dalej udaè. MoĔe Ci teĔ brakowaè miejsca na promowane treĈci (np. artykuä, film lub reklamö) albo chcesz, Ĕeby uĔytkownik mógä siö skoncentrowaè na wybraniu odpowiadajñcego mu odnoĈnika. Szczególnie w aplikacjach i stronach na urzñdzenia mobilne trzeba stosowaè Spisy TreĈci, które najefektywniej wykorzystujñ niewielki obszar ekranu. JeĔeli musisz zatrzymaè uĔytkowników na witrynie, lepszym rozwiñzaniem moĔe byè umiesz- czenie gdzieĈ na stronie materiaäów promocyjnych lub innych interesujñcych treĈci. W takim przypadku skorzystanie z wzorca Spis TreĈci to niekoniecznie najlepsze wyjĈcie. Kiedy nale- Ĕy objaĈniè uĔytkownikowi, na czym polega wartoĈè i rola witryny, wykorzystaj dostöpnñ przestrzeþ wäaĈnie w tym celu. Zaprojektowanie Spisu TreĈci wymaga odwagi, poniewaĔ musisz mieè pewnoĈè, Ĕe uĔytkownicy: x bödñ wiedzieli, czego strona lub aplikacja dotyczy, x bödñ wiedzieli, czego szukajñ i jak to znaleĒè, x nie bödñ zainteresowania wiadomoĈciami, aktualizacjami i promowanymi treĈciami. Dlaczego UĔytkownik moĔe bez Ĕadnych zakäóceþ skoncentrowaè siö na dostöpnych opcjach nawigacyj- nych. Caäy ekran (albo chociaĔ wiöksza jego czöĈè) säuĔy do organizowania, wyjaĈnienia i zilu- strowania odnoĈników, a takĔe kieruje uĔytkowników do stron, które najbardziej odpowiadajñ ich potrzebom. W jaki sposób Kiedy tworzysz projekt na urzñdzenia przenoĈne, Spis TreĈci jest jednym z najwaĔniejszych narzödzi do projektowania witryn i aplikacji o wielu poziomach funkcjonalnoĈci. Lista ozna- czeþ powinna byè krótka, same elementy powinny byè na tyle duĔe, by daäo siö je z äatwoĈciñ nacisnñè (na ekranach dotykowych), a hierarchie nie powinny byè zbyt rozbudowane. PoniĔsze akapity odnoszñ siö juĔ do peänorozmiarowych witryn i aplikacji. Po pierwsze, dobrze oznacz linki i dodaj wystarczajñco duĔo informacji kontekstowych, aby uĔytkownik mógä zdecydowaè, dokñd siö udaè. To nie musi byè äatwe. Odwiedzajñcym uĔyt- kownikom bardzo moĔe siö przydaè opis lub podglñd kaĔdego linku, jednak takie treĈci zaj- mujñ duĔo miejsca na stronie. Podobnie zresztñ jest z miniaturkami — moĔe i wyglñdajñ Ĉwietnie, ale czy aby na pewno wnoszñ coĈ dobrego do interfejsu? Przyjrzyj siö rysunkom 3.15 i 3.16. Osobom odwiedzajñcym serwis MIT nazwy linków sñ juĔ znane, poniewaĔ to nazwy kierunków i jednostek akademickich. Wobec tego dodatkowe opisy byäyby zbödne. Projektant mógä zatem umieĈciè wiöcej linków nad zgiöciem. Wskutek tego strona jest peäna treĈci i uĔyteczna. 108 _ Rozdziaĥ 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie siý Rysunek 3.15. Spis TreĈci na serwisie MIT Rysunek 3.16. Spis TreĈci na witrynie AIGA Wzorce _ 109 Z drugiej strony, artykuäy na serwisie AIGA jak najbardziej zyskujñ na tym, Ĕe opisane sñ i tek- stem, i obrazem. Same tytuäy mogäyby nie przekonaè uĔytkownika do klikniöcia. Miej teĔ na uwadze to, Ĕe uĔytkownik, który nie zobaczy strony, jakiej siö spodziewaä, moĔe siö szybko zniechöciè. Dopilnuj, aby Twoje opisy byäy konkretne i uczciwe. Po drugie, rozwaĔ organizacjö przestrzennñ listy linków. Czy majñ byè przydzielone do róĔ- nych kategorii, czy rozmieszczone w dwu- lub trzypoziomowej hierarchii. Czy majñ byè po- szeregowane wedäug dat? Niech lista wyraĔa obrany schemat organizacyjny. W rozdziale 5. przeczytasz wiöcej na ten temat. Po trzecie, nie zapomnij o polu wyszukiwania. Wreszcie zastanów siö, czy masz coĈ jeszcze do powiedzenia na stronie. Obszar strony gäównej jest szczególnie cenny, jeĈli chodzi o przyciñganie uwagi uĔytkowników. Czy moĔesz na nim umieĈciè zwiastun ciekawego artykuäu? JakñĈ grafikö? Newsbox (rozdziaä 9.)? JeĔeli takie elementy bardziej denerwowaäyby niĔ interesowaäy, skoncentruj siö na tworzeniu Spisu TreĈci bez urozmaiceþ. Przykĥady Na stronie „Education” („ksztaäcenie”) serwisu MIT (rysunek 3.15) nie ma zbyt wielu objaĈnieþ — za to jest duĔo linków. Kiedy uĔytkownik dociera do tego miejsca, prawdopodobnie szuka konkretnej jednostki akademickiej lub zasobów, a nie — przykäadowo — informacji o tym, czym jest MIT. Zadaniem tej strony jest przekierowanie uĔytkownika na innñ stronö, na której znajdzie odpowiedĒ na sprecyzowane wymagania. To samo moĔna powiedzieè o serwisie Craigslist na rysunku 3.14. Na witrynie AIGA znajduje siö wiele zasobów dla profesjonalnych designerów. MoĔna na niej zobaczyè kilka wysokopoziomowych kategorii, tak jak w systemie nawigacji globalnej, ale strona docelowa kaĔdej z tych kategorii jest juĔ Spisem TreĈci (rysunek 3.16). Artykuäy opatrzone sñ miniaturkami i krótkimi opisami. Taki wzbogacony format daje uĔytkownikowi wystarczajñco duĔo informacji, aby mógä zdecydowaè, czy chce poĈwiöciè czas na zapoznanie siö z artykuäem. W Spisie TreĈci witryny Museum of Modern Art mamy do czynienia z duĔymi obrazami i niewielkñ iloĈciñ tekstu (rysunek 3.17). Strona ta jest wystarczajñco interesujñca, by przyciñ- gnñè uĔytkownika, mimo Ĕe nie ma na niej Ĕadnej konkretnej treĈci. W innych bibliotekach Wzorzec Directory Navigation, do którego prowadzi poniĔszy adres URL, opisuje konkretny sposób wykorzystania Spisu TreĈci: http://welie.com/patterns/showPattern.php?patternID=directory Piramida Co zrobië Poäñcz sekwencjö stron odnoĈnikami Wstecz i Dalej. Utwórz stronö rodzica, na której umie- Ĉcisz linki do wszystkich stron w sekwencji; pozwól uĔytkownikowi przeglñdaè je albo we wäaĈciwej kolejnoĈci, albo zgodnie z wäasnym uznaniem. 110 _ Rozdziaĥ 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie siý Rysunek 3.17. Spis TreĈci witryny MoMA Rysunek 3.18. Schemat Piramidy Kiedy uŜywaë Na stronie lub w aplikacji znajduje siö sekwencja elementów, które uĔytkownik zwykle oglñ- da po kolei, tak jak dzieje siö to w przypadku pokazu slajdów, kreatora, rozdziaäów ksiñĔki lub serii produktów. Niektórzy uĔytkownicy wolñ jednak przeglñdaè je pojedynczo i w wybranej przez siebie kolejnoĈci — w tym celu muszñ jednak mieè moĔliwoĈè wyboru spoĈród caäego zakresu elementów. Niemal wszystkie MenedĔery Obrazów (rozdziaä 2.) opierajñ siö na modelu nawigacyjnym Piramidy. UĔytkownik czasami musi przejrzeè obrazy pojedynczo, a czasami woli przeglñdaè je zgodnie z sekwencjñ. Piramida pozwala mu zdecydowaè, jak to zrobiè. Wzorce _ 111 Dlaczego Wzorzec ten zmniejsza liczbö klikniöè potrzebnych do poruszania siö. Usprawnia nawigacjö i ilustruje sekwencjö, w jakiej elementy wystöpujñ. Linki lub przyciski Wstecz i Dalej (albo Poprzedni i Nastöpny) sñ w peäni uĔyteczne; ludzie wiedzñ, co z nimi robiè. UĔytkownik moĔe jednak nie Ĕyczyè sobie narzuconej sekwencji, gdzie po przejĈciu przez siedem stron musiaäby siedmiokrotnie kliknñè Wstecz, gdyby chciaä wró- ciè do punktu wyjĈcia. To nudne! Umieszczajñc na kaĔdym etapie sekwencji link prowadzñcy z powrotem do nadrzödnej strony, dajesz mu wiöksze moĔliwoĈci. Ma dziöki temu trzy opcje nawigacji: Wstecz, Dalej i Z powrotem. Nie komplikujesz w ten sposób pracy, a swobodnie przeglñdajñcy stronö lub aplikacjö uĔyt- kownik (który mógä tymczasem zmieniè zdanie dotyczñce tego, co chce zrobiè) nie bödzie musiaä tyle klikaè, Ĕeby dotrzeè tam, gdzie chce. Tak jest wygodniej. Podobnie poäñczenie szeregu w innym przypadku niepowiñzanych stron uäatwia pracö uĔyt- kownikom, którzy chcieliby wszystkie strony przejrzeè. Bez linków Wstecz i Dalej byliby zmuszeni caäy czas powracaè do strony rodzica — z czasem mogliby siö poddaè i opuĈciè witrynö. W jaki sposób Podaj listö wszystkich elementów lub stron we wäaĈciwej im kolejnoĈci na nadrzödnej stronie. Ujmij jñ w takiej formie, aby przystawaäa do rodzaju elementów, które prezentujesz. Dla zdjöè byäaby to Siatka Miniaturek, a dla artykuäów — rozbudowana lista. Wiöcej na temat dopasowania formy do treĈci przeczytasz w rozdziale 5. Wystarczy, Ĕeby uĔytkownik kliknñä link lub element, aby dotrzeè do stosownej strony. UmieĈè odnoĈniki Wstecz i Dalej na stronie kaĔdego elementu. Na wielu stronach moĔna znaleĒè miniaturowe podglñdy kolejnych elementów, np. w postaci tytuäu lub miniaturki ob- razu (tak jak na serwisie Flickr, co widaè na rysunku 3.19). Dodatkowo utwórz teĔ link pro- wadzñcy uĔytkownika z powrotem do strony nadrzödnej. Oznacz go nazwñ w rodzaju „Powrót do...”. Rysunek 3.19. Flickr Jeden z wariantów Piramidy polega na przeobraĔeniu linearnej sekwencji w pötlö, gdzie ostatnia strona äñczy siö z pierwszñ, bez poĈrednictwa strony rodzica. Takie rozwiñzanie bywa uĔyteczne, choè uĔytkownik moĔe nie byè Ĉwiadom tego, Ĕe ma do czynienia z pötlñ. Czy 112 _ Rozdziaĥ 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie siý uĔytkownik rozpozna pierwszñ stronö sekwencji? Niekoniecznie. JeĔeli kolejnoĈè sekwencji jest istotna, powinieneĈ poäñczyè ostatniñ stronö ze stronñ nadrzödnñ, by uĔytkownik wie- dziaä, Ĕe zobaczyä juĔ wszystko, co trzeba. Przykĥady Strony serwisu Flickr oparte sñ na klasycznej wersji Piramidy. MenedĔer Obrazów wyĈwietla zdjöcia z sekwencji zwanej photostream („fotostrumieþ”), którñ moĔna zobaczyè w caäoĈci, klikajñc link oznaczenia u góry widgetu (rysunek 3.19). Dwie miniaturki przedstawiajñ po- przednie i kolejne zdjöcie photostreamu. Interaktywna aplikacja w serwisie „New York Times” (rysunek 3.20) to kolejny przykäad MenedĔera Obrazów. Na stronie rodzicu znajduje siö nieregularna Siatka Miniaturek z kli- kalnymi obrazami; na stronach zdjöè (rysunek 3.21) widniejñ natomiast przyciski strzaäek säuĔñce do poruszania siö po elementach zbioru. ZauwaĔ, Ĕe widaè tu równieĔ informacjö o tym, który element sekwencji uĔytkownik w danej chwili oglñda — w tym przypadku „121 z 176” — co jest miäym dodatkiem. Nie ma przycisku „z powrotem”, ale jedyny przycisk poza wspomnianymi powyĔej — Close (zamknij) — przenosi uĔytkownika na stronö nadrzödnñ. (Jest to zatem ciekawie wykorzystany Panel Modalny). Rysunek 3.20. Interaktywna aplikacja „New York Timesa”; na rysunku przedstawiam stronö nadrzödnñ, na której wyĈwietlone sñ wszystkie zdjöcia Wzorce _ 113 Rysunek 3.21. Podstrona tej samej aplikacji, na której przy zdjöciu widniejñ przyciski Back, Next i Close (wstecz, dalej i zamknij) Panel Modalny Rysunek 3.22. Schemat Panelu Modalnego Co zrobië Pokazuj jednñ stronö bez jakichkolwiek innych moĔliwoĈci nawigacyjnych, dopóki uĔytkownik nie wykona zadanej mu czynnoĈci. Kiedy uŜywaë W aplikacji lub na stronie nic nie moĔe lub nie powinno siö dziaè bez udziaäu uĔytkownika. W aplikacji skoncentrowanej na dokumencie uĔytkownik przy zapisywaniu pliku moĔe byè poproszony o podanie nazwy pliku, jeĔeli nie okreĈliä jej wczeĈniej. W innych kontekstach uĔytkownik moĔe byè zmuszony do zarejestrowania siö lub potwierdzenia przeczytania waĔnej wiadomoĈci, nim zyska moĔliwoĈè podjöcia jakichkolwiek innych czynnoĈci. JeĔeli uĔytkownik podejmuje siö drobnej czynnoĈci, która moĔe póĒniej wymagaè od niego dalszego wkäadu, znajdĒ sposób, by pobraè dane od uĔytkownika bez uĔywania panelu modalnego. Przykäadowo moĔesz umieĈciè pole tekstowe tuĔ pod naciĈniötym przyciskiem; takie 114 _ Rozdziaĥ 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie siý pole moĔe tam sobie „wisieè”, aĔ uĔytkownik je wypeäni. Nie trzeba zatrzymywaè dziaäania strony lub aplikacji tylko dlatego, Ĕe jakiĈ element czeka na dane. Pozwól uĔytkownikowi zajñè siö czymĈ innym, a do pytania powróciè póĒniej. Dlaczego Panel Modalny odcina uĔytkownika od wszystkich innych opcji nawigacyjnych. Nie moĔe on go zatem zignorowaè i zajñè siö czymĈ innym na stronie lub w aplikacji. Po wykonaniu przy- pisanej mu czynnoĈci uĔytkownik wraca tam, gdzie byä wczeĈniej. ãatwo ten model zrozumieè i projektowaè na jego podstawie, choè w ciñgu ostatnich lat byä naduĔywany. Panele modalne zakäócajñ pracö. Kiedy uĔytkownik nie spodziewa siö, Ĕe bö- dzie zmuszony odpowiedzieè na zapytanie Panelu Modalnego, musi on przerwaè pracö — byè moĔe nawet w celu podjöcia decyzji co do czegoĈ, co go w ogóle nie obchodzi. Odpo- wiednio uĔyty Panel Modalny zwraca natomiast uwagö uĔytkownika na kolejnñ decyzjö, którñ ma podjñè. ēadne inne moĔliwoĈci nawigacyjne nie mogñ go wtedy od tego odwieĈè. W jaki sposób W tym miejscu na ekranie, na którym skupiona jest uwaga uĔytkownika, umieĈè panel, ram- kö dialogowñ albo stronö, w których znajdzie siö zapytanie o wymagane dane. Element ten powinien tymczasowo uniemoĔliwiè klientowi korzystanie z innych stron aplikacji. Panel powinien byè w miarö schludny, zgodnie z zaäoĔeniem, iĔ uĔytkownik ma mieè moĔliwoĈè peänego skoncentrowania siö na swoim nowym zadaniu. Pamiötaj, Ĕe jest to wzorzec okreĈlajñcy formö nawigacji. PowinieneĈ starannie oznaczyè drogi wyjĈcia, których zresztñ nie powinno byè wiele — jedna, dwie, moĔe trzy. W wiökszoĈci przypadków sñ to przyciski opatrzone krótkimi, „czasownikowymi” wyrazami w rodzaju „Zapisz” czy „Nie zapisuj”. Zwykle moĔna gdzieĈ znaleĒè przycisk Zamknij lub „X” w pra- wym górnym rogu. Po klikniöciu takiego przycisku uĔytkownik powinien wróciè tam, gdzie byä wczeĈniej. Panel Modalny moĔna ujñè graficznie w bardzo ciekawy sposób jako lightbox. Polega to na przyciemnieniu wiökszoĈci obszaru ekranu i podĈwietleniu jasnego panelu modalnego, co sprawia, Ĕe uwaga zostaje skupiona na nim. (ēeby mogäo to odnieĈè skutek, Panel Modalny musi byè wystarczajñco duĔy, aby uĔytkownik mógä go bez problemu znaleĒè. Widywaäam tak maäe i oddalone od Ĉrodka ekranu panele, Ĕe odnalezienie ich w duĔym oknie przeglñdarki byäo doĈè trudne). Na niektórych witrynach zamiast Paneli Modalnych stosuje siö podstrony oferujñce skrajnie ograniczone moĔliwoĈci nawigacyjne. Ekrany logowania i rejestracji zazwyczaj wäaĈnie tak dziaäajñ: nie ma na nich systemów nawigacji lokalnej i globalnej, lecz jedynie linki säuĔñce do wyäñczenia strony (Anuluj, Dalej itp.) oraz WyjĈcie Ewakuacyjne. Systemy operacyjne i platformy GUI zazwyczaj udostöpniajñ modalne okna dialogowe z po- ziomu systemu. Te przydajñ siö najbardziej w tradycyjnych aplikacjach komputerowych. NaleĔy unikaè umieszczania ich na stronach internetowych, a stosowaè innego rodzaju pa- nele, nad którymi projektant ma wiökszñ wäadzö, a które w mniejszym stopniu przeszka- dzajñ uĔytkownikowi. Wzorce _ 115 Przykĥady Okno logowania na SlideShare oznaczone jest lightboksem, by przyciñgaäo uwagö uĔytkow- nika. Kiedy uĔytkownik na SlideShare wykonuje czynnoĈè, która wymaga zarejestrowania, na ekranie pojawia siö Panel Modalny z rysunku 3.23. MoĔna siö go pozbyè jedynie na trzy sposoby: logujñc siö, rejestrujñc lub klikajñc znajomy przycisk „X” w prawym górnym rogu. Jest to typowe zachowanie dla Paneli Modalnych pojawiajñcych siö na stronach internetowych. Rysunek 3.23. Panel Modalny logowania na SlideShare Na serwisie Kayak uĔytkownik ma stycznoĈè z podobnym lightboksem przy zaawansowanym wyszukiwaniu. W tym przypadku panel wskazuje link, którym go uruchomiono, dziöki czemu uĔytkownik moĔe skojarzyè czynnoĈè z rezultatem (rysunek 3.24). To ciekawe rozwiñzanie. Jeden rodzaj modalnej ramki dialogowej na Macintoshu zwraca na siebie uwagö, kiedy rozwija siö z paska tytuäowego okna. Takie i inne okna modalne aplikacji uniemoĔliwiajñ uĔytkowni- kowi posäugiwanie siö pozostaäymi elementami aplikacji, toteĔ jest zmuszony dokoþczyè czyn- noĈè lub porzuciè jñ caäkowicie, nim zabierze siö za cokolwiek innego (rysunek 3.25). W innych bibliotekach http://quince.infragistics.com/Patterns/Modal 20Panel.aspx http://patternry.com/p=overlay/ Zapoznaj siö równieĔ z wzorcem Dialog Overlay w ksiñĔce Designing Web Interfaces Billa Scotta i Theresy Neil. Znajdziesz tam równieĔ opisy innych rodzajów okien. 116 _ Rozdziaĥ 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie siý Rysunek 3.24. Panel Modalny modyfikacji wäaĈciwoĈci wyszukiwania na serwisie Kayak Rysunek 3.25. Panel Modalny w aplikacji na Macintoshu Gĥýbokie Linkowanie Rysunek 3.26. Schemat Gäöbokiego Linkowania Wzorce _ 117 Co zrobië Uchwyè okreĈlony stan witryny lub aplikacji w adresie URL, który moĔna zapisaè i przesäaè innym. Po wczytaniu takiej informacji aplikacja pojawi siö w takiej formie, w jakiej widziaä jñ pierwotny uĔytkownik. Kiedy uŜywaë Witryna lub aplikacja zawierajñ obszernñ i interaktywnñ treĈè w rodzaju mapy, ksiñĔki, filmu lub infografiki. PoĔñdany punkt lub stan moĔe byè trudny do znalezienia albo uzyskanie go moĔe byè czasochäonne. Aplikacja moĔe mieè wiele parametrów lub stanów do wyboru: wi- doków, skal, warstw danych i innych, które mogñ utrudniaè znalezienie danego punktu oraz spojrzenie na niego „prawidäowo”. Dlaczego Gäöbokie Linkowanie umoĔliwia uĔytkownikowi bezpoĈrednie przeskoczenie do poĔñdanego punktu lub stanu aplikacji, pozwala zaoszczödziè czas i pracö. Przypomina link prowadzñcy bezpoĈrednio do danego fragmentu typowej strony (albo jak permalink do wpisu blogowe- go) w sposób taki, Ĕe uĔytkownik dostaje adres URL do wybranych treĈci. Taki element moĔe jednak przyjñè formö bardziej zäoĔonñ niĔ permalink, poniewaĔ z zaäoĔenia moĔe uchwyciè zarówno stan aplikacji, jak i poäoĔenie treĈci. Wzorzec ten przydaje siö przy zapisywaniu stanu, który uĔytkownik mógäby póĒniej odtwo- rzyè, zwäaszcza jeĔeli moĔe z niego zrobiè „zakäadkö” z wykorzystaniem dobrze mu znanych mechanizmów (czyli zakäadek w przeglñdarkach, serwisów w rodzaju Delicious itp.). Przy- daje siö on równieĔ do dzielenia siö treĈciñ z innymi ludĒmi — wäaĈnie wtedy „bäyszczy” moĔliwoĈciami. URL przekierowujñcy uĔytkownika do okreĈlonego stanu moĔna wysäaè pocztñ elektronicznñ, tweetem, opublikowaè na serwisie spoäecznoĈciowym, przedstawiè na forum, zamieĈciè we wpisie blogowym albo przekazaè na wiele innych sposobów. Taki gäö- boko zalinkowany stan moĔna potraktowaè jak deklaracjö; moĔe on staè siö „zakaĒnym” albo „zapoĈredniczonym spoäecznie obiektem”. W jaki sposób Wykryj umiejscowienie uĔytkownika w treĈci i zamieĈè dane o pozycji w adresie URL. Uwzglöd- nij przy tym równieĔ dane pomocnicze: komentarze, warstwy danych, znaczniki, podĈwietlenia itp., aby uĔytkownik takĔe mógä je odczytaè po podaniu adresu URL. RozwaĔ, jakie jeszcze parametry lub stany interfejsu uĔytkownicy mogñ zachowywaè; mogñ to byè poziom zbliĔenia, powiökszenia, tryb widoku, rezultaty wyszukiwania itp. Nie trzeba koniecznie zapisywaè ich wszystkich — zalinkowane stany nie powinny ingerowaè we wäa- ĈciwoĈci, których uĔytkownik zmieniaè nie chce. Starannie przyjrzyj siö kilku scenariuszom uĔytku, aby wypracowaè najlepszñ formö. Adres URL to najlepszy format zapisu przy Gäöbokim Linkowaniu, gdyĔ jest uniwersalnie uznawany, przenoĈny, krótki i obsäugiwany przez wiele narzödzi, m.in. przez serwisy obsäu- gujñce zakäadki spoäecznoĈciowe. (Przy projektowaniu aplikacji niepoäñczonych internetem prawdopodobnie bödziesz musiaä wykazaè siö wiökszñ kreatywnoĈciñ w zakresie doboru formatu). MoĔesz jednak skorzystaè z innych formatów, takich jak XML, przy czym format tekstowy jest äatwiejszy w obsäudze niĔ binarny. 118 _ Rozdziaĥ 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie siý Spraw, aby wraz z kolejnymi krokami uĔytkownika przez treĈè i zmianami parametrów ad- res URL w pasku przeglñdarki aktualizowaä siö automatycznie, a uĔytkownik mógä w kaĔdej chwili go zobaczyè i skopiowaè. Nie kaĔdy wpadäby na pomysä, aby szukaè gäöbokiego linku w pasku, wiöc moĔesz przygotowaè równieĔ funkcjö typu „Link”, która da uĔytkownikowi do zrozumienia: „Tutaj utworzysz link do tego miejsca”. Na niektórych serwisach moĔna skorzystaè z moĔliwoĈci wygenerowania kodu JavaScript, pozwalajñcego nie tylko uchwyciè stan treĈci i pozycjö uĔytkownika, ale takĔe osadziè wszystko na innej stronie. Przykĥady Google Books zachowuje wiele róĔnych informacji o stanie w adresach URL (rysunek 3.27): stronö w ksiñĔce, tryb przeglñdania (jedna strona, dwie strony, miniatury), obecnoĈè pasków narzödzi, a nawet wyniki wyszukiwania. Serwis nie uwzglödnia przy tym poziomu zbliĔenia i säusznie, gdyĔ jest to wysoce zindywidualizowane ustawienie. Generujñca adres URL funkcja Link jest w istocie zbödna — jest to ten sam adres, który widaè w przeglñdarce. Rysunek 3.27. Gäöbokie Linkowanie w Google Books. Adres URL moĔna pobraè z paska adresowego przeglñdarki lub ramki Link Many Eyes, narzödzie wizualizacyjne IBM, pozwala uĔytkownikowi na utworzenie wäasnej infografiki w oparciu o gotowe rodzaje wykresów i zestawy danych (rysunek 3.28). Charaktery- zujñ siö one znacznñ interaktywnoĈciñ i bogactwem zasobów. Opracowanñ na tym serwi- sie wizualizacjñ moĔna siö podzieliè albo z uĔyciem kodu JavaScript (do umieszczenia treĈci na stronie), albo poprzez utworzenie zrzutu ekranu. Wzorce _ 119 Rysunek 3.28. Uchwycenie stanu wizualizacji na serwisie Many Eyes W adresie URL filmu z serwisu YouTube moĔna umieĈciè sygnaturö czasowñ, choè na pierwszy rzut oka ta moĔliwoĈè nie jest jasna. Po wczytaniu takiego adresu widz zostaje przeniesiony od razu do okreĈlonego fragmentu filmu. Szczegóäy podaje serwis http://youtubetime.com (ry- sunek 3.29): wystarczy dodaè na koþcu adresu URL filmu fragment #t=XmYs, gdzie X oznacza minuty, a Y sekundy. Rysunek 3.29. Serwis YouTubeTime täumaczy, jak z pomocñ adresu URL wskazaè wybrany fragment filmu 120 _ Rozdziaĥ 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie siý Wyjļcie Ewakuacyjne Rysunek 3.30. Schemat WyjĈcia Ewakuacyjnego Co zrobië Na kaĔdym ekranie, gdzie opcje nawigacyjne sñ ograniczone, umieĈè zrozumiale oznaczony przycisk lub link, który prowadzi uĔytkownika do znajomego punktu. Kiedy uŜywaë Twoje strony skäadajñ siö na jakiĈ seryjny proces w rodzaju kreatora albo uĔytkownik ma stycz- noĈè z elementami, które ograniczajñ jego moĔliwoĈci nawigacyjne (np. z Panelem Modalnym). Mogñ to byè strony, do których uĔytkownicy siögajñ w oderwaniu od kontekstu, w jakim siö znajdujñ, tak jak ma to miejsce podczas oglñdania rezultatów wyszukiwania. (WyjĈcia Ewakuacyjne nie sñ konieczne, jeĔeli na stronie znajdujñ siö Mapa Sekwencji lub Okruszki. UĔytkownicy rozumiejñcy sposób ich funkcjonowania mogñ z nich skorzystaè, by dotrzeè do znajomego miejsca). Dlaczego Ograniczona nawigacja to jedno, ale brak wyjĈcia to zupeänie inna rzecz! Dajñc uĔytkowni- kowi äatwy i oczywisty sposób wyjĈcia ze strony, zmniejszasz ryzyko, Ĕe kiedykolwiek po- czuje siö na niej uwiöziony. Jest to funkcja z rodzaju takich, które zapewniajñ uĔytkownika, Ĕe moĔe swobodnie zapo- znawaè siö ze stronñ lub aplikacjñ. Przypomina trochö funkcjö cofniöcia zmian, gdyĔ zachöca ludzi do wykonywania róĔnych czynnoĈci bez obawy o to, Ĕe ich rezultaty okaĔñ siö nieod- wracalne. Przypomnij sobie wzorzec Bezpieczna Eksploracja z rozdziaäu 1. Umieszczenie WyjĈè Ewakuacyjnych na stronach, do których uĔytkownicy docierajñ podczas wyszukiwania, jest szczególnie istotne. Odwiedzajñcy moĔe kliknñè taki link, aby dostaè siö na „normalnñ” stronö, z której dowie siö, dokñd wäaĈciwie trafiä. W jaki sposób UmieĈè na stronie przycisk lub link, który skieruje uĔytkownika z powrotem do „bezpiecznego miejsca”. Takim miejscem moĔe byè strona gäówna, „oĈ” w modelu osi i szprych albo dowolna strona z peänym systemem nawigacyjnym i jakimĈ wyjaĈnieniem. To, do czego link konkretnie prowadzi, jest juĔ zaleĔne od ogólnego projektu aplikacji. Wzorce _ 121 Przykĥad Na stronach internetowych czösto widzimy klikalne logo, peäniñce rolö linku do strony gäównej. Zazwyczaj znaleĒè je moĔna w lewym górnym rogu strony i säuĔñ jako WyjĈcia Ewakuacyjne do znajomych punktów, a jednoczeĈnie pomagajñ w promowaniu „marki” witryny. W niektórych oknach funkcjö tö moĔe peäniè przycisk w rodzaju Anuluj. UĔytkownik moĔe w ten sposób powiedzieè: „Mam juĔ doĈè; zapomnijmy, Ĕe siö za to zabraäem”. Czy zdarzyäo Ci siö kiedyĈ zadzwoniè np. do banku i wysäuchaè serii pytaþ automatu zgäosze- niowego? Tego rodzaju obsäuga jest niejasna i czasochäonna. JeĔeli zdarzy Ci siö popeäniè bäñd, musisz zadzwoniè jeszcze raz i zaczñè od nowa. Tymczasem w wielu takich systemach telefo- nicznych istnieje WyjĈcie Ewakuacyjne, o którym pewnie nie säyszaäeĈ: wystarczy w dowolnym momencie nacisnñè klawisz „0”, Ĕeby poäñczyè siö bezpoĈrednio z czäowiekiem na drugim koþcu linii. Na wielu witrynach moĔna znaleĒè strony, które ograniczajñ moĔliwoĈci nawigacyjne, np. Panele Modalne i podstrony pozbawione systemu nawigacji globalnej. Ekran logowania na serwisie Netflix jest przykäadem takiej strony. Kiedy uĔytkownik zdecyduje, Ĕe wcale nie chce siö logowaè, moĔe kliknñè logo Netflix, Ĕeby powróciè na stronö gäównñ (rysunek 3.31). Rysunek 3.31. Strona logowania Netflix, której logo säuĔy jako WyjĈcie Ewakuacyjne Czasami moĔna sobie pozwoliè na dosäownoĈè. Google Labs do niedawna oferowaäo uĔytkowni- kom funkcje, które nie byäy jeszcze w peäni gotowe do uĔycia i zawieraäy bäödy. W przykäa- dzie z rysunku 3.32 Google Maps daje uĔytkownikowi adres URL przedstawiony dosäownie jako „wyjĈcie ewakuacyjne” na wypadek, gdyby coĈ si
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Projektowanie interfejsów. Sprawdzone wzorce projektowe
Autor:

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ą: