Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00509 008214 20651742 na godz. na dobę w sumie
wyszukaj dokładnie | pobierz wtyczkę
Nie każ mi myśleć! O życiowym podejściu do funkcjonalności stron internetowych. Wydanie III - ebook/pdf
Nie każ mi myśleć! O życiowym podejściu do funkcjonalności stron internetowych. Wydanie III - ebook/pdf
Autor: Liczba stron: 216
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-9277-4 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> funkcjonalność stron
Porównaj ceny (książka, ebook (-45%), audiobook).
Czytaj online.
Komentuj

Zdobądź użytkowników dzięki UX!

Rynek stron internetowych i aplikacji jest nasycony do granic możliwości. Użytkownicy mogą wybierać spośród setek produktów spełniających ich potrzeby. Jak sprawić, żeby wybrali właśnie Twoją witrynę lub aplikację? Jak przebić się na trudnym rynku i odnieść sukces? Na te pytania znajdziesz wiele odpowiedzi, ale najprostsza składa się z dwóch liter — UX! User eXperience, bo tak brzmi pełna nazwa, to pojęcie, które określa wrażenia użytkownika po kontakcie z produktem. Im lepsze, tym większa szansa na sukces!

Trzymasz w rękach kolejne wydanie kultowej książki, w całości poświęconej zagadnieniom związanym z projektowaniem funkcjonalnych witryn i aplikacji internetowych. W trakcie lektury dowiesz się, jak przygotować system nawigacji na Twojej stronie, testować funkcjonalność witryny oraz tworzyć jej wersję działającą na urządzeniach mobilnych. Ponadto zrozumiesz, jak użytkownicy korzystają z sieci oraz jak tę wiedzę wykorzystać do tworzenia efektownych stron WWW. Książka ta jest doskonałym źródłem wiedzy na temat tworzenia funkcjonalnych serwisów WWW, docenionym przez czytelników na całym świecie. Przekonaj się sam!

Dzięki tej książce:

Funkcjonalne strony internetowe dla Ciebie!

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

Darmowy fragment publikacji:

Tytuł oryginału: Tłumaczenie: Piotr Cieślak z wykorzystaniem fragmentów książki „Nie każ mi myśleć! O życiowym podejściu do funkcjonalności stron internetowych. Wydanie II” w tłumaczeniu Krzysztofa Jurczyka ISBN: 978-83-246-9274-3 Authorized translation from the English language edition, entitled: DON’T MAKE ME THINK, REVISITED: A COMMON SENSE APPROACH TO WEB USABILITY Third Edition; ISBN: 0321965515; by Steve Krug; published by Pearson Education, Inc, publishing as New Riders Publishing. Copyright © 2014 by Stephen Krug All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, eklectronic 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 © 2014. 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 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/nieka3 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 PRZEDMOWA O nowym wydaniu WSTĘP Przeczytaj najpierw to Pozwól, że odkaszlnę i wyjaśnię parę spraw PODSTAWOWE ZASADY ROZDZIAŁ 1 Nie każ mi myśleć! Pierwsze prawo funkcjonalności Kruga ROZDZIAŁ 2 Jak naprawdę korzystamy z internetu? O przeglądaniu, zadowalaniu się i radzeniu sobie ROZDZIAŁ 3 Elementarz projektanta billboardów Projektowanie stron do przeglądania, a nie do czytania ROZDZIAŁ 4 Zwierzę, roślina czy rzecz? Dlaczego użytkownicy lubią podejmować wybory niewymagające myślenia? ROZDZIAŁ 5 Pomijaj zbędne słowa Lapidarność na usługach internetu SPRAWY, O KTÓRE MUSISZ SIĘ ZATROSZCZYĆ ROZDZIAŁ 6 O znakach drogowych i okruszkach Projektowanie nawigacji ROZDZIAŁ 7 Projektowanie stron WWW a teoria Wielkiego Wybuchu Sugerowanie ludziom właściwego działania i wyjaśnianie, dlaczego to takie ważne [ 4 ] 6 12 20 30 40 54 60 66 96 Kup książkęPoleć książkę SPIS TREŚCI JAK SIĘ UPEWNIĆ, ŻE NAPRAWDĘ CI SIĘ UDAŁO ROZDZIAŁ 8 O trudnej przyjaźni między farmerem a hodowcą bydła Dlaczego większość kłótni o funkcjonalności jest stratą czasu i jak ich unikać 114 ROZDZIAŁ 9 Testowanie funkcjonalności za grosze Czyli lepiej prościej, lecz częściej ISTOTNE PROBLEMY I WPŁYWY Z ZEWNĄTRZ ROZDZIAŁ 10 Wielka mobilizacja, czyli świat w kieszeni Witamy w XXI wieku. Niektórzy z Państwa mogą poczuć lekkie zawroty głowy ROZDZIAŁ 11 Funkcjonalność jako życzliwość Dlaczego Twoja strona powinna być zwyczajnie ludzka ROZDZIAŁ 12 Kwestia dostępności Myślisz, że wszystko już widziałeś, aż tu nagle przelatuje kot z posmarowaną masłem kromką chleba, przywiązaną do jego grzbietu ROZDZIAŁ 13 Przewodnik błądzących Jak nieść kaganek funkcjonalności, by się nie poparzyć Podziękowania Skorowidz 122 154 178 188 200 210 214 [ 5 ] Kup książkęPoleć książkę 3 Elementarz projektanta billboardów PROJEKTOWAnIE STROn DO PRZEGLĄDAnIA, A nIE DO CZyTAnIA ROZDZIAŁKup książkęPoleć książkę Nie bierz setką/Tego zakrętu Nie lubimy/Tracić klientów/Burma-Shave! — CYKL PRZYDROŻNYCH TABLIC REKLAMUJĄCYCH KREM DO GOLENIA, CIRCA 1935 M ając na uwadze, że goście Twojej strony tylko ją przeglądają, musisz zatroszczyć się o kilka istotnych spraw, aby mieć pewność, że dostrzegą i zrozumieją wszystko to, czego potrzebują, a także w jak największej mierze to, na czym zależy Tobie: ¢ Przestrzegaj utartych konwencji. ¢ Utwórz czytelną hierarchię elementów. ¢ Podziel stronę na funkcjonalne obszary. ¢ Wyraźnie wyróżnij elementy, które można kliknąć. ¢ Ogranicz chaos na stronie do minimum. ¢ Opracuj treść tak, by ułatwiała szybkie przeglądanie. Przestrzegaj utartych konwencji Jedna z najlepszych metod na ułatwienie odbiorcy zrozumienia intencji autora, nawet jeśli ów odbiorca bardzo się spieszy, polega na przestrzeganiu istniejących konwencji — powszechnie stosowanych albo utartych standardów. Oto przykłady: ¢ Znaki STOP. Zważywszy na to, jak ważne jest, by kierowcy dostrzegali je i poznawali na pierwszy rzut oka, z dużej odległości, niezależnie od warunków pogodowych i oświetleniowych, trudno nie docenić faktu, iż znaki STOP niemal wszędzie wyglądają tak samo. (Owszem, w różnych krajach dzielą je drobne różnice, ale zasadniczo projekt tych znaków jest praktycznie identyczny na całym świecie). W tym przypadku konwencja obejmuje charakterystyczny kształt, napis „STOP”, bardzo zauważalny kolor (kontrastujący z niemal każdym naturalnym otoczeniem), standardowy rozmiar, wysokość i umiejscowienie. [ 41 ] Kup książkęPoleć książkę ROZDZIAŁ 3 ¢ Prowadzenie samochodu. Wyobraź sobie, że chcesz wypożyczyć samochód i nie wiesz, czy pedał gazu będzie się znajdował po prawej stronie albo czy klakson będzie jak zwykle na kierownicy. W ciągu minionych dwudziestu lat wiele utartych schematów projektowania stron WWW uległo zmianie. Jako użytkownicy nauczyliśmy się oczekiwać wielu rzeczy, na przykład: ¢ W jaki sposób będą rozlokowane typowe elementy strony. Na przykład logo albo symbol serwisu powinny się znajdować w lewym górnym rogu (przynajmniej w tych krajach, w których czyta się od strony lewej do prawej), natomiast główne elementy nawigacji będą umieszczone poziomo u góry bądź po lewej stronie. ¢ Jak funkcjonują pewne mechanizmy. Na przykład niemal wszystkie sklepy internetowe posługują się metaforą „koszyka” i są wyposażone w podobne formularze, umożliwiające określenie metody płatności, adresu dostawy itd. ¢ Jak wyglądają poszczególne elementy. Wiele elementów stron ma charakterystyczny, typowy wygląd, na przykład ikony symbolizujące, że mamy do czynienia z materiałem wideo, ikona wyszukiwania czy przyciski prowadzące do serwisów społecznościowych. Powstały też pewne konwencje dotyczące konstruowania różnych rodzajów stron WWW — sklepów, szkół, blogów, restauracji, filmów, etc. — ponieważ strony w każdej z tych kategorii pełnią bardzo podobne funkcje. SomeSlightlyIrregular.com cityislandmovie.com Tego rodzaju standardy nie wzięły się znikąd — wszystkie zaczęły swoje życie jako czyjś błyskotliwy pomysł. Jeśli jakiś pomysł się sprawdzi, to inni projektanci zaczynają powielać go na kolejnych stronach, aż wreszcie użytkownicy opatrzą się z nim na tyle, że nie wymaga wyjaśnień. [ 42 ] Kup książkęPoleć książkę ELEMEnTARZ PROJEKTAnTA BILLBOARDÓW Chcesz dowodów na to, że przestrzeganie konwencji pomaga? Popatrz na tę stronę: choć zapewne nie rozumiesz z niej ani słowa, to łatwo się domyślasz, jaka jest rola poszczególnych elementów, gdyż zostały zaprojektowane według utartych norm Poprawnie użyte, zwyczajowe normy ułatwiają użytkownikom życie, gdyż pozwalają uniknąć ciągłego zastanawiania się, do czego służy to czy owo i jak należy postępować na odwiedzanych stronach. Z konwencjami jest jednak pewien problem — projektanci raczej niechętnie się do nich odwołują. Zamiast skwapliwie wykorzystywać konwencje, autorzy stron WWW niejednokrotnie próbują ponownie wynaleźć koło. Powodem tego jest najczęściej ich przekonanie (niesłuszne), że zostali zatrudnieni, aby zrobić coś nowego i innego, a nie powielać istniejące rozwiązania. Nie wspominam już o fakcie, że pochwały przełożonych, nagrody czy oferty dobrej pracy rzadko biorą się z powodu „najlepszego wykorzystywania konwencji”. KOŁO Przyznawanie patentu w toku: 48082 p.n.e., 48022 p.n.e., 42639 p.n.e., 36210 p.n.e., 30599 p.n.e., 28714 p.n.e., 28001 p.n.e., 19711 p.n.e., 15690 p.n.e., 15689 p.n.e., 15675 p.n.e., 15674 p.n.e. … Zdarza się, że czas spędzony nad powtórnym wymyślaniem koła prowadzi do rewolucyjnego odkrycia nowego urządzenia tocznego. Częściej jednak jest to po prostu strata czasu. Jeśli zamierzasz wprowadzać innowacje, powinieneś zdawać sobie sprawę z wartości tego, co zamierzasz zastąpić (jak powiedziałby Bob Dylan: „Żeby żyć ponad regułami, musisz być pewien, czego chcesz”), tymczasem utartych schematów bardzo często się nie docenia. Doskonałym przykładem są niestandardowe paski przewijania. Za każdym razem, gdy projektant decyduje się na opracowanie od zera własnych, nietypowych pasków przewijania — na ogół po to, by były ładniejsze — rezultat niemal zawsze niezbicie dowodzi tego, że autor nie zdawał sobie sprawy, ile setek albo tysięcy godzin pracy wymagała ewolucja standardowych, systemowych pasków. [ 43 ] Kup książkęPoleć książkę ROZDZIAŁ 3 Jeśli nie chcesz korzystać z utartych schematów, musisz się upewnić, że to, czym zamierzasz je zastąpić, jest co najmniej tak intuicyjne — czyli równie dobre — jak rozwiązanie, z którego zrezygnowałeś, bądź jest to rzecz na tyle nowatorska, że warto poświęcić trochę czasu, żeby się jej nauczyć. Mam dla Ciebie następującą radę. Wprowadzaj innowacje, gdy jesteś pewny, że masz lepszy pomysł, a w przeciwnym razie wykorzystuj istniejące konwencje. Nie zrozum mnie źle — w żadnym razie nie zamierzam Cię zniechęcać do kreatywności. Uwielbiam innowacyjne, oryginalne projekty stron WWW. Jednym z moich ulubionych przykładów jest serwis Harlem.org. Cały projekt został opracowany na bazie słynnego zdjęcia Arta Kane’a z sierpnia 1957 roku, przedstawiającego 57 jazzmanów pozujących przed kamienicą w Harlemie. Zamiast odsyłaczy tekstowych albo menu nawigacja została skonstruowana właśnie w oparciu o tę fotografię. Kliknięcie w wybranym miejscu zdjęcia… …otwiera stronę ze spisem widocznych tam ludzi… …z poziomu którego można wyświetlić szczegółowe informacje na ich temat To rozwiązanie jest nie tylko intuicyjne i ciekawe, ale też przystępne i łatwe w obsłudze. A ponieważ twórcy mieli świadomość tego, że po jakimś czasie ta nietypowa forma może się znudzić, zaproponowali także alternatywną, konwencjonalną metodę nawigacji w oparciu o kategorie. Zasadniczo możesz — a wręcz powinieneś — być tak twórczy i innowacyjny, jak tylko chcesz, a także uatrakcyjniać projekt, jak tylko uznasz za stosowne, dopóki jesteś pewien, że jest on nadal praktyczny w obsłudze. I jeszcze kwestia konsekwencji. Informacje o muzykach można przeglądać także na podstawie nazwisk, instrumentów i stylów jazzu [ 44 ] Kup książkęPoleć książkę ELEMEnTARZ PROJEKTAnTA BILLBOARDÓW Często się słyszy, że konsekwencja, spójność, to sprawy nadrzędne. Wiele sporów na temat projektów kończy się argumentem w rodzaju: „Nie możemy tego zrobić. To wprowadziłoby niespójność”. Do spójności projektu strony WWW albo aplikacji rzeczywiście warto dążyć. Jeśli na przykład kontrolki nawigacji zawsze wyglądają tak samo i znajdują się w jednym miejscu, to użytkownik nie musi tracić czasu na poszukiwania i zastanawiać się nad ich obsługą. Ale w pewnych przypadkach drobna niekonsekwencja może się przyczynić do poprawienia przejrzystości projektu. Proponuję zapamiętać następującą regułę: PRZEJRZYSTOŚĆ JEST WAŻNIEJSZA OD KONSEKWENCJI Jeśli za sprawą wprowadzenia drobnej niekonsekwencji możesz znacznie poprawić przejrzystość, postaw na to drugie. Utwórz czytelną hierarchię elementów Następnym ważnym sposobem na ułatwienie odbioru strony wiecznie spieszącemu się użytkownikowi jest zapewnienie odpowiedniego wyglądu wszystkim elementom strony, tak aby wszelkie zależności między tymi elementami były wyczuwane intuicyjnie. Użytkownik musi być pewny, które elementy są najważniejsze, które mają podobne znaczenie, a które wchodzą w skład innych. Innymi słowy, każda strona powinna być skonstruowana według wyraźnej, czytelnej hierarchii. [ 45 ] Kup książkęPoleć książkę ROZDZIAŁ 3 Strony zaprojektowane zgodnie z tą zasadą mają trzy charakterystyczne cechy. ¢ Im coś jest ważniejsze, tym bardziej się wyróżnia. Najważniejsze nagłówki mogą być napisane na przykład większą lub pogrubioną czcionką, wyróżnione kolorem; można też oddzielić je pustą przestrzenią od reszty zawartości lub umieścić bliżej górnej krawędzi strony. Bardzo ważne Trochę mniej ważne Zupełnie mało ważne ¢ Elementy powiązane ze sobą logicznie muszą być powiązane również w sposób wizualny. Elementy, które są do siebie podobne, można umieścić w jednej grupie pod odpowiednim nagłówkiem, sformatować podobnym stylem lub umiejscowić w osobnej części strony. Książki Muzyka Filmy Gry ¢ Elementy powinny być wizualnie „zagnieżdżone”, aby ich przynależność była wyraźnie określona. Przykładowo nagłówek działu („Książki informatyczne”) powinien znajdować się powyżej tytułu danej pozycji w tym dziale (konkretnej książki) i wizualnie obejmować cały obszar treści strony, co wskazuje, że jest to dział dotyczący tylko pozycji danego typu (różnych książek). Z kolei tytuł książki powinien obejmować wszystkie elementy ją opisujące. Książki informatyczne Konkretna książka informatyczna bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, 24,95 zł Inna książka informatyczna bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, 19,95 zł [ 46 ] Kup książkęPoleć książkę ELEMEnTARZ PROJEKTAnTA BILLBOARDÓW Stosowanie hierarchii wizualnej to nic nowego. Na każdej stronie gazety codziennej wykorzystywane są techniki takie jak wyróżnianie elementów, grupowanie i zagnieżdżanie — ma to na celu wizualne uporządkowanie treści, zanim jeszcze zaczniemy ją czytać. To zdjęcie dotyczy tego tekstu, ponieważ oba łączy ten nagłówek. Ten artykuł jest najważniejszy, ponieważ posiada największy nagłówek i został umieszczony w najważniejszym miejscu na stronie. Nagłówek obejmujący te cztery kolumny wyraźnie oznacza, że wszystkie wchodzą w skład jednego artykułu Po wielkości nagłówka łatwo się zorientować, że jest to najważniejszy artykuł na stronie Każdy z nas codziennie ma do czynienia z tego rodzaju hierarchiami i podświadomie je analizuje. Dzieje się to jednak tak szybko, że zdajemy sobie z tego sprawę tylko wtedy, gdy nie możemy tego zrobić — kiedy wskazówki wizualne (lub ich brak) zmuszają nas do myślenia. Prawidłowo zastosowana hierarchia wizualna polega na wstępnym przetworzeniu strony; zorganizowaniu i uporządkowaniu jej zawartości w taki sposób, że możemy ją przyswoić błyskawicznie i niemal bez wysiłku. Gdy jednak strona nie posiada prawidłowo zbudowanej hierarchii wizualnej — np. wówczas gdy wszystko wygląda na jednakowo ważne — jesteśmy zmuszeni do samodzielnego przeglądania strony w poszukiwaniu odpowiednich wyrazów i zwrotów, a potem ułożenia własnego obrazu tego, co jest najważniejsze i jak wszystko jest zorganizowane. Wymaga to o wiele większego nakładu pracy z naszej strony. Książki Muzyka Filmy Gry Książki Muzyka Filmy Gry Książki informatyczne Książki informatyczne W tym przypadku nieprawidłowa hierarchia wizualna sugeruje, że wszystkie główne działy serwisu należą do działu „Książki informatyczne” Odpowiednie umiejscowienie nagłówka poprawia czytelność zależności [ 47 ] Kup książkęPoleć książkę ROZDZIAŁ 3 Analizowanie projektu, którego hierarchia wizualna jest choć w niewielkim stopniu wadliwa — na przykład nagłówki obejmują elementy niezwiązane ze sobą — jest jak czytanie niedbale zbudowanego zdania („Bill kupił stary samochód do spółki ze stryjem, którym dojeżdża do pracy”). Mimo że najczęściej nie mamy większych problemów ze zrozumieniem tego rodzaju zdań, to jednak niechlujny szyk słów na chwilę wytrąca z rytmu i niepotrzebnie zmusza do zastanowienia się. Podziel stronę na funkcjonalne obszary W idealnym przypadku użytkownicy mogą na każdej prawidłowo zaprojektowanej stronie WWW zagrać z łatwością w internetową wersję amerykańskiego teleturnieju $25 000 Pyramid1. Chodzi mi o to, że gdy wstępnie rozejrzą się po stronie, bez problemów powinni po wskazaniu różnych jej obszarów opisać ich przeznaczenie: „Opis zawartości strony!”, „Odnośniki do artykułów dnia!”, „Lista produktów firmy!”, „Rzeczy, które chcą mi sprzedać!”, „Pasek ułatwiający nawigowanie na stronie!”. Dzielenie strony na obszary jest bardzo ważne, ponieważ pozwala użytkownikom na szybkie podjęcie decyzji, na których częściach strony mają się skupić, a które mogą bezpiecznie pominąć. Wyniki badań polegających na śledzeniu wzroku użytkownika sugerują, że ludzie bardzo szybko podejmują decyzję o tym, które części zawierają potencjalnie przydatne informacje, wskutek czego prawie nigdy nie interesuje ich pozostała zawartość — omijają ją tak, jakby w ogóle nie istniała. (Skrajnym przykładem może być całkowite zobojętnienie na reklamy; swoista „banerowa ślepota” — zdolność do ignorowania treści, które prawdopodobnie mają charakter promocyjny). Wyraźnie wyróżnij elementy, które można kliknąć Ponieważ użytkownicy internetu najczęściej szukają kolejnej rzeczy, którą można kliknąć, ważne jest, aby bardzo wyraźnie oznaczyć takie elementy. Podczas przeglądania strony szukamy różnorodnych sugestii wizualnych, umożliwiających znalezienie obiektów, które da się kliknąć (albo „stuknąć” 1 Teleturniej polegał na tym, że jeden z uczestników dostawał opis jakiejś kategorii, powiedzmy, „przedmioty, które kojarzą się z hydraulikiem”, i próbował naprowadzić partnera na jej trop, dając konkretne przykłady („klucz francuski, urządzenie do cięcia rur, majtki wystające spod roboczych drelichów…”). [ 48 ] Kup książkęPoleć książkę ELEMEnTARZ PROJEKTAnTA BILLBOARDÓW w przypadku ekranów dotykowych). Takimi wyróżnikami mogą być kształty (przyciski, zakładki itp.), położenie (na przykład w menu) oraz formatowanie (kolor i podkreślenie)2. Proces poszukiwania w wyglądzie rzeczy wskazówek, które ułatwiają domyślenie się ich zastosowania, nie ogranicza się do stron internetowych. Niezwykle zabawnie i przystępnie pisze o tym Don Norman w swojej niedawno zaktualizowanej, klasycznej już książce pod tytułem The Design of Everyday Things. Okazuje się, że nieustannie szukamy takich wskazówek w naszym otoczeniu (na przykład na podstawie wyglądu klamek staramy się domyślić, czy drzwi należy ciągnąć, czy pchać). Tę książkę warto przeczytać. W życiu nie spojrzysz już na drzwi w ten sam sposób. Od samego początku istnienia internetu kwestia łatwości identyfikacji aktywnych elementów na stronach WWW to pojawiała się, to odchodziła w cień. 1995 2000 2005 2010 Prehistoria Większość stron jest projektowana przez programistów, którzy korzystają ze standardowych odsyłaczy tekstowych HTML oraz przycisków Możliwość ich kliknięcia nie budzi wątpliwości, ale wieje nudą… Dziki Zachód Sfrustrowani ograniczeniami narzuconymi przez sieciowe standardy (nieliczne fonty, brzydkie podkreślenia) projektanci z doświadczeniem w poligra(cid:25)i zaczynają używać obrazków przedstawiających napisy w charakterze odsyłaczy Często ciężko się domyślić, co można kliknąć Złota era CSS zapewnia eleganckie rozwiązanie: zastosowanie jednego koloru (bez podkreśleń) dla wszystkich aktywnych odsyłaczy Użytkownicy przyzwyczajają się do tego schematu. I super! 2 Ludzie często bazują na tym, że w przeglądarce WWW kursor po wskazaniu odsyłacza zamienia się ze strzałki na rączkę. To jednak wymaga przesuwania kursora po ekranie, co trwa stosunkowo długo. Poza tym ta metoda nie sprawdza się w przypadku urządzeń z ekranami dotykowymi, w których kursora po prostu nie ma. [ 49 ] Kup książkęPoleć książkę ROZDZIAŁ 3 W rozdziale 10. przekonasz się jednak, że omawiany problem ponownie daje o sobie znać w świecie projektów mobilnych. Zasadniczo nie powinieneś mieć problemów, jeśli będziesz używał jednego koloru dla wszystkich odsyłaczy tekstowych i zadbasz o to, by kształt oraz położenie pozostałych odnośników sugerowały, że da się je kliknąć. Unikaj szkolnych błędów w rodzaju zastosowania tego samego koloru dla odsyłaczy i nieaktywnych nagłówków. Ogranicz chaos na stronie do minimum Jednym z największych wrogów stron internetowych jest graficzny chaos. Użytkownicy w różnym stopniu tolerują zawiłość i chaos; niektórym szum wizualny na stronie nie sprawia żadnego problemu, ale dla wielu innych jest szalenie irytujący. Znam historię użytkowników, którzy naklejali na monitorze karteczki samoprzylepne, żeby zasłonić denerwujące animacje, przeszkadzające im w skupieniu się na tekście. Istnieją trzy rodzaje zakłóceń utrudniających przeglądanie treści. ¢ Krzyk. Gdy każdy element znajdujący się na stronie próbuje zwrócić na siebie uwagę odbiorcy, efekt może być przytłaczający: same oferty kupna, mnóstwo wykrzykników, różnych krojów pisma i rażących kolorów, dużo hałasu i krzyku! Automatyczne pokazy slajdów, animacje, wyskakujące okienka i niekończący się strumień nowych reklam! Prawda jest taka, że nie da się zaakcentować wszystkiego. Krzyk jest na ogół następstwem niepodjęcia trudnej decyzji o tym, jakie elementy strony rzeczywiście są ważne, i rezygnacji ze stworzenia wizualnej hierarchii, która pokieruje użytkownika do kluczowych aspektów strony. ¢ Dezorganizacja. Niektóre strony wyglądają jak mieszkanie po splądrowaniu przez rabusiów: wszystko jest porozrzucane dookoła. Świadczy to o nonszalancji projektanta, który nie wyrównał poszczególnych elementów strony do siatki kolumn i wierszy. ¢ Przeładowanie. Wszyscy chyba znamy strony — zwłaszcza strony główne — które są przeładowane. Efekt przypomina skrzynkę pocztową zapchaną po brzegi mailami i biuletynami z serwisów internetowych, których autorzy wyszli z założenia, [ 50 ] Kup książkęPoleć książkę ELEMEnTARZ PROJEKTAnTA BILLBOARDÓW że jedne odwiedziny upoważniają do zalewania odbiorcy stosem niechcianej korespondencji. W takim chaosie trudno znaleźć naprawdę istotne wiadomości. Inżynierowie nazywają takie zjawisko małym odstępem sygnału od szumu: mnóstwo hałasu, niewiele konkretnych informacji, a te, które są, zostały zagłuszone. Podczas projektowania stron WWW dobrze jest wyjść z założenia, że wszystko jest wizualnym szumem (podejście typu „winny, dopóki nie udowodni swojej niewinności”), i pozbyć się wszystkiego, co niewiele wnosi do projektu. W świetle ograniczonego czasu i uwagi użytkownika każdy nadmiarowy element jest zwyczajnie zbędny. Opracuj treść tak, by ułatwiała szybkie przeglądanie Sporo czasu — być może nawet większość — spędzanego na stronach WWW internauci poświęcają na przeglądanie tekstu w poszukiwaniu jakiejś informacji. Sposób formatowania tekstu może im to zdecydowanie ułatwić. Oto najważniejsze kwestie, które warto uwzględnić, aby Twoje projekty sprzyjały szybkiemu przeglądaniu: Którą z tych stron wolałbyś przejrzeć? ¢ Stosuj wiele nagłówków. Dobrze napisane, przemyślane nagłówki rozsiane w tekście działają jak nieformalny konspekt albo spis treści strony. Informują odbiorcę, czego się może spodziewać w danych akapitach albo — jeśli są mniej dosłowne — intrygują i zachęcają do czytania. Tak czy owak, ułatwiają czytelnikowi podjęcie decyzji o tym, czy dany fragment warto przeczytać albo choć przejrzeć, czy lepiej go pominąć. Zasadniczo staraj się stosować więcej nagłówków, niż uważasz za konieczne, i nie żałuj czasu na ich opracowanie. [ 51 ] Kup książkęPoleć książkę ROZDZIAŁ 3 Zatroszcz się też o właściwe sformatowanie śródtytułów. Poniżej opisałem dwie ważne, często jednak pomijane kwestie dotyczące zastosowania stylów. Jeśli używasz kilku stopni nagłówków, koniecznie opracuj je tak, by nie można było ich pomylić. Możesz to osiągnąć poprzez powiększenie tekstu proporcjonalnie do stopnia nagłówka lub pozostawienie większej ilości miejsca ponad nim. Źle Lepiej I druga sprawa, nawet ważniejsza — nie pozwól, żeby nagłówki „pływały” w tekście. Zadbaj o to, by znajdowały się bliżej akapitu, który poprzedzają, niż tego, po którym następują. To naprawdę sprawia ogromną różnicę. Lepiej Źle ¢ Ogranicz długość akapitów. Długie akapity stawiają czytelnika przed czymś, co Caroline Jarrett i Ginny Redish, specjalistki od projektowania i funkcjonalności stron, nazywają „ścianą tekstu”. Są przytłaczające, utrudniają użytkownikowi przebrnięcie przez materiał i są trudniejsze do przejrzenia niż kilka osobnych, krótszych akapitów. Być może uczono Cię, że każdy akapit powinien zaczynać się od zdania wprowadzającego, mieć rozwinięcie i zakończenie, ale czytanie w internecie rządzi się innymi prawami. Nawet pojedyncze zdania dobrze jest czasem wyodrębnić w postaci akapitu. Jeśli przyjrzysz się długiemu akapitowi, niemal zawsze wpadniesz na jakiś sensowny pomysł podzielenia go na dwie części. Spróbuj nabrać takiego nawyku. ¢ Używaj list. Wyjdź z następującego założenia: niemal wszystko, co da się przedstawić w postaci listy, zapewne dobrze byłoby właśnie tak opracować. Przejrzyj tekst pod kątem serii pozycji rozdzielonych przecinkami albo średnikami, a być może znajdziesz fragmenty nadające się do tego rodzaju przeróbki. Lepiej Źle [ 52 ] Kup książkęPoleć książkę ELEMEnTARZ PROJEKTAnTA BILLBOARDÓW W celu poprawienia czytelności nieznacznie zwiększ zwykłe odstępy pomiędzy punktami na liście. ¢ Wyróżnij ważne pojęcia. Przeglądanie stron polega w dużej mierze na szukaniu kluczowych słów i określeń. Wyróżnienie najważniejszych haseł przez pogrubienie pierwszego wystąpienia ułatwia ich lokalizację. (Jeśli są to zarazem odsyłacze, to oczywiście sam styl odsyłacza powinien wystarczyć jako wyróżnienie). Nie wyróżniaj jednak zbyt wielu rzeczy, bo zmniejszysz skuteczność tej metody. Jeżeli chcesz poznać od podszewki techniki formatowania treści ułatwiające jej przeglądanie (a także wiele innych zagadnień związanych z publikowaniem tekstu na ekranie), to poszukaj (najbliższego!) urządzenia podłączonego do internetu i zamów książkę Ginny Redish pod tytułem Letting Go of the Words. A przy okazji zamów jeszcze jeden egzemplarz dla kogoś, kto pisze, redaguje albo w dowolny inny sposób jest związany z cyfrową publikacją treści. Zaskarbisz sobie jego dozgonną wdzięczność. [ 53 ] Kup książkęPoleć książkę 50 milisekund na ocenę strony, 102 A affordances, 163 agile, 14 akapity, 52 aktualne położenie, 89 wyróżnienie, 90 aktualności, 98 alt, 196 analiza ilościowa, 131 jakościowa, 131 projektu, 157 architektura informacji, 15, 201 ASketch, 171 autoreklama, 98 B badania fokusowe, 124 zastosowanie, 125 banerowa ślepota, 48 bieżąca lokalizacja, 90 błędy obsługi, 186 Brundlefly, 174 C chaos, 50 Clear, 168 czołówka, 62 czytniki ekranu, 195 D dezorganizacja, 50 dokonywanie wyboru, 58 dostępność, 189 obawy programistów, 191 obserwacje użytkowników niepełnosprawnych, 195 poprawianie, 194 sprawdzanie poprawności kodu, 193 usuwanie przeszkód, 194 wprowadzanie zmian, 196 źródła, 196 dowiedz się więcej, 105 Skorowidz E ekspercka analiza funkcjonalności, 13 elementy obniżające poziom zaufania, 182 zmuszające do myślenia, 24 zwiększające poziom zaufania, 184 elementy strony które można kliknąć, 48 powiązane logicznie, 46 rozlokowanie, 42 ważność, 46 wygląd, 45 wyróżnianie, 48 zagnieżdżenie, 46 eliminowanie wątpliwości, 27 etykiety, 111 F facilitator, 134 formatowanie treści, 53 formularze, 79 opisy pól, 208 zwiększenie dostępności, 197 Frequently Asked Questions, 185 funkcjonalność, 10, 19, 206 a projektowanie, 201 aplikacji mobilnych, 167 definicja, 167 przekonywanie o wartości, 202 właściwości, 19 G gadka szmatka, 62 graficzny chaos, 50 H hierarchia elementów, 45 cechy stron, 46 hierarchia treści, 75 hierarchia wizualna, 47 logo, 80 nazwa strony, 87 hover, 164 [ 214 ] I idea istnienia strony, 105 idea projektu, zrozumienie, 38 identyfikacja aktywnych elementów, 49 identyfikator serwisu, 107 innowacje, 43 instrukcje, 63 użytkowania aplikacji, 169 interfejs użytkownika, 163 spłaszczanie, 164 intuicyjność, 28 J jesteś tutaj, 89, 94 K kamera Brundlefly, 174 kategorie, 81, 94 klikanie, uciążliwość, 55 klonowanie, 173 kłótnie o funkcjonalności, 115 antidotum, 121 osobiste przyzwyczajenia, 117 zawodowe pasje, 118 kompromis, 157, 192 komunikaty, 166 konsekwencja, 44 konsultant funkcjonalności, 13 kontrast, 197, 208 konwencje, 41 konstruowania stron, 42 nawigacja, 44, 76 wykorzystywanie, 43 wyszukiwarka, 83 korzystanie z internetu, 31 krzyk, 50 kursor, 164 L lean, 14 liczba kliknięć, 55 listy, 52 często zadawanych pytań, 185 kategorii, 82 wad funkcjonalnych, 150 z przydatnymi łączami, 82 Kup książkęPoleć książkę SKOROWIDZ logo serwisu, 79, 105 atrybuty, 80 strona główna, 82 Ł łatwość dostępu, 189 zapamiętywania, 171 łącza do strony głównej, 82 do strony wyszukiwania, 83 M mały odstęp sygnału od szumu, 51 manipulowanie, 206 misja, 97, 107 Mobile First, 159 motto, 109 N nagłówki, 51 HTML, 197 umieszczanie, 209 narzędzia pomocnicze, 81 sprawdzające poprawność kodu, 193 nauka aplikacji, 168 nawigacja, 44, 67 definicja, 74 funkcje niedoceniane, 75 globalna, 78, 81 hierarchia, 81 kluczowe elementy, 78 konwencje, 76 lokalna, 94 na niższych poziomach, 85 okruszkowa, 91 podstawy, 70 stała, 78, 82 test, 94 wielopoziomowa, 85 wygląd, 77 nazwa serwisu, 79, 94 nazwa strony, 86, 94 odnośnik, 88 zasady, 87 nie każ mi myśleć, 21 normy zwyczajowe, 43 NPS, 181 O obserwator, 135 obszary funkcjonalne, 48 odnośniki, 25 przejdź do głównej treści strony, 197 odsyłacze, 53, 55 główne, 81 narzędzia pomocnicze, 82 odwiedzone, 209 serwisy mobilne, 162 ograniczenia, 157 okazje, 98 okienka podpowiedzi, wyskakujące, 59 określanie własnego położenia, 75 opisy tekstowe, 197 opracowanie treści, 51 optymalizacja wyborów, 35 osoby niepełnosprawne, 190 P Paper, 168 pierwsze wrażenia, 102 podejmowanie decyzji, 34 pomoc dla użytkownika, 59 wątpliwości, 59 podkategorie, 81 podpowiedzi, 59, 164 podstrony, projektowanie, 104 pojemnościowy ekran dotykowy, 164 pola wyszukiwarki, 83 położenie na stronie, 89 powiększanie, 162 poziom zaufania, 180 obniżanie, 182 zwiększanie, 184 poziomy hierarchii, 84 separatory, 92 prawa funkcjonalności jednoznaczne wybory, 55 lapidarność, 61 nie każ mi myśleć, 21 proces obsługi strony, 70, 72 projektowanie interakcji, 15 [ 215 ] projektowanie stron na urządzenia mobilne, 156 schematy, 42 projekty mobilne, 159 płaskie, 164 przeładowanie, 166 skalowalne, 161 prowadzący, 134 przeciążenie reklamowe, 112 przeglądanie stron, 32, 41 szybkie, 51 użytkownicy, 71 zakłócenia, 50 przeglądarka, 36 przejrzystość projektu, 45 przeładowanie, 50, 166 przestrzeganie konwencji, 41 przestrzeń internetowa, 73 przeznaczenie serwisu, 106 przyciski, 25 pytania nieoczywiste, 58 R radzenie sobie, 36 efektywność, 38 rejestracja, 98 reklama funkcjonalności, 98 zawartości, 98 ROI, 202 S samouczek, 170 satisficing, 34 selekcja, 32 serwisy mobilne, struktura, 160 skalowalność, 161 skłonność do zmian, 29 skróty, 98 slogan reklamowy, 105, 107 cechy, 108 słowa klucze, 33 smartfony, 155 SoundHound, 168 spotkanie podsumowujące, 149 spójność projektu, 45 standardy, 41 starcie kultury reklamy i kultury rzemiosła, 119 Kup książkęPoleć książkę SKOROWIDZ strona główna, 74 idea istnienia serwisu, 103, 105 łącza do strony, 82 od czego zacząć, 110 pierwsze odwiedziny, 101 projektowanie, 97, 100 promowanie rzeczy, 111 punkty startowe, 111 utrudnienia, 99 wymagania, 99 zawartość, 97 znaczenie, 104 struktura hierarchii, 84 style, zastosowanie, 52 sugestie wizualne, 48 system instruktażowy, 169 system nawigacji, 67, 78 system pomocy, 169 szukanie, 73 najlepszych rozwiązań, 35 szum wizualny, 50 Ś ściana tekstu, 52 ścieżki powrotu, 91 zasady poprawnej implementacji, 92 śródtytuły, 52 T tekst alternatywny, 196 drobny, 208 powitalny, 105 teoria Wielkiego Wybuchu, 101 zagłady stada, 112 testowanie, 126 funkcjonalności, 13 mobilne, 172 skrypt, 137 stron konkurentów, 136, 204 tradycyjne podejście, 129 w początkowej fazie projektu, 127 zdalne, 152 bez prowadzącego, 152 zwiększanie dostępności, 194 testy dostępności, 189 nawigacji, 95 testy funkcjonalności, 121 a badania fokusowe, 125 cele, 206 częstotliwość, 130 kiedy testować, 136 liczba uczestników, 131 manipulacje, 206 miejsce przeprowadzenia, 134 na urządzeniach mobilnych, użytkownicy mit zwykłego użytkownika, 120 nastawieni na przeglądanie, 71 nastawieni na wyszukiwanie, 70 oczekiwania, 42 testowanie funkcjonalności, 131 172 najważniejsze informacje, 126 obserwatorzy, 135 pierwszy, 37 pokazowe, 126 problemy, 149 programy rejestrujące, 134 prowadzący, 134 próbowanie, 152 przebieg, 138 przykładowa sesja, 139 sposoby przeprowadzania, 152 spotkanie podsumowujące, 136, 149 we własnym zakresie, 127, 131 werbowanie uczestników, 133 wybór uczestników, 132 wymówki, 153 zadania, 136 znaczenie, 124 tooltips, 59 tożsamość, 97 U UCD, 201, 202 uczestnicy testów, 132 werbowanie, 133 udogodnienia wizualne, 163, 165 Ulubione, 74 urządzenia mobilne, 155 mała przestrzeń życiowa, 159 testowanie funkcjonalności, 172 wydajność, 166 Usability and User Centered Design, 201 User Experience Design, 10, 201 UserTesting.com, 152 UX, 201, 202 UXD, 10, 201 użyteczność, 201 [ 216 ] W wady funkcjonalne, 14, 131 usuwanie, 150 ważne pojęcia, 53 wersje do wydruku, 186 weryfikacja poprawności kodu, 193 wskaźniki, 90 Wstecz, 74 wstępne decyzje, 58 wybory optymalne, 34 wygoda obsługi, 186 wyrażenia oczywiste, 24 wyróżniki, 49 wyszukiwarka, 83 Z zachwycający, 167 zadowalanie się, 34 zakładki, 92 forma graficzna, 93 zakłócenia, 50 zakres wyszukiwania, 83 zapach informacji, 55 zasady jak coś działa, 36 postępowania internauty, 32 zbędne słowa, 61 zgadywanie, 35 zmiana rozmiaru tekstu, 189 zrozumienie zasady działania, 37 zwięzłość, 61 zwinne zarządzanie projektem, 14 zwrot z inwestycji, 202 zwykły użytkownik, 120 Ż życzliwość, 180 Kup książkęPoleć książkę Kup książkęPoleć książkę
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Nie każ mi myśleć! O życiowym podejściu do funkcjonalności stron internetowych. Wydanie III
Autor:
Sklep
Format
Cena
Helion.pl Helion.pl
ebook/pdf
26,95 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ą: