Skalowalność w projektowaniu

Serwisy internetowe funkcjonują w modelu permanentnego rozwoju. Gdy pojawia się potrzeba, dodajemy boksy, podstrony lub funkcjonalności. Serwisy powinny być więc zaprojektowane tak, aby umożliwiać szybkie i tanie dodawanie nowych elementów. To nie tylko kwestia oszczędności pieniędzy i czasu, ale także ograniczania ryzyka. Jeśli efekty nas rozczarują, łatwiej będzie wycofać się z czegoś, co robiliśmy tydzień niż z czegoś, co zajęło pół roku. Dla projektantów tworzenie takich stron to jednak pewne wyzwanie. Łatwiej mu sprostać, jeśli od początku myśli się o przyszłości – tym, jakie konsekwencje mają dzisiejsze decyzje. To jak z budowaniem domu. Jeśli chcesz mieć w ogrodzie basen, ale jeszcze Cię na niego nie stać, warto od razu zapłacić więcej i przygotować odpowiednią instalację pod ziemią. Jeśli teraz odpuścisz, to kiedy zechcesz spełnić swoje marzenie, będziesz musiał przekopać cały ogród, a wykonawca zadba, żebyś zapłacił za to z nawiązką. Na tym polega myślenie o skalowalności. Czym jest jednak skalowalność w projektowaniu? To zdolność strony internetowej do rozbudowywania się z zachowaniem stałego poziomu jakości i spójności w trzech płaszczyznach: architektonicznej, graficznej i systemowej. Jak ją uzyskać?

Rewolucja vs. ewolucja

„Nowy serwis jest czytelniejszy i bardziej uporządkowany, a nawigacja została uproszczona”, „witryna jest teraz dużo bardziej dynamiczna i zawiera nowe funkcjonalności” – znacie te wyświechtane frazesy, które pojawiają się w informacjach prasowych na temat redesignów stron internetowych? Takie press release’y zazwyczaj są puste, bo kompletna przebudowa rzadko wynika z całkowitej lub znacznej zmiany strategii. Częściej chodzi o potrzeby, których aktualna wersja strony nie jest w stanie zapewnić. Na przykład nowa funkcjonalność, której nijak nie da się wpisać w architekturę strony, albo menu, które nie może pomieścić nowej kategorii. Jeżeli takich potrzeb robi się coraz więcej, projektanci zazwyczaj nie mają innego wyjścia jak zaorać i zrobić od nowa. To właśnie brak skalowalności. Nieskalowalne strony wymagają rewolucji, aby coś sensownie zmienić.

Z rewolucjami jednak nieodłacznie wiążą się trzy rzeczy: gigantyczne ryzyko, duże pieniądze i stracony czas. Łatwo też w ten sposób trafić – w charakterze przykładu – do takiej dyskusji, jaka właśnie toczy się w serwisie Goldenline.pl (Najbardziej nieudane przebudowy popularnych portali). Redesigny są dodatkowo niezbezpieczne, bo wszystkich zadowalają. Management lubi redesigny, bo są widowiskowe i sam fakt ich dokonania – niewiedzieć czemu – zwykło się uważać za sukces. Projektant z kolei może wpisać do CV kolejną pozycję, a przy tym popisać się umiejętnościami, uzasadniając swoje istnienie w organizacji. To sprawia, że gruntowne przebudowy bywają strategią samą w sobie, swoistym modelem rozwoju. Modelem wygodnym, bo zwalniającym z myślenia o przyszłości („jak będzie trzeba, to się zrobi redesign”).

Biznesowo dużo efektywniejszą metodą rozwoju serwisów internetowych jest ich ewolucja. Wbrew pozorom jest to też metoda atrakcyjniejsza dla użytkownika. To co prawda temat na inną notkę, ale warto pamiętać, że dzięki ewolucji, będzie on stopniowo otrzymywał nowe bodźce. Będzie miał czas, aby nauczyć się nowych funkcjonalności. Stały, płynny rozwój jak nic innego buduje też lojalność. Użytkownicy nie tylko widzą, że w serwis się rozwija, a ktoś wkłada w niego pracę, ale i mogą na bieżąco próbować na tę pracę wpływać, kontaktując się z redakcją. W przypadku redesign’u bardzo rzadko mają taką możliwość. A nawet jeśli w planach są beta testy, to przecież dotyczą one już przerobionego serwisu. Tymczasem poczucie wpływu i kontroli czyni serwis bliższym, prawie własnym. Taki serwis odwiedza się codziennie.

Aby jednak móc stosować metodę ewolucyjną, trzeba najpierw mieć stronę, która to umożliwia. Kiedy już taka powstanie, wówczas czas i pieniądze normalnie poświęcane redesignom, można spożytkować na szczegółową pracę nad samym produktem i myślenie o wszystkim innym poza gaszeniem lokalnych pożarów (bo akurat nie ma gdzie wrzucić nowego linka do menu).

Rodzaje skalowalności

Dla własnych potrzeb wyróżniam trzy rodzaje skalowalności stron internetowych:

  1. architektoniczna,
  2. graficzna,
  3. systemowa.

1) W ramach skalowalności architektonicznej mieści się na przykład elastyczna nawigacja, która jest przygotowana na ewentualny rozrost zawartości strony (case Amazona). To także rozplanowanie wszystkich flow w taki sposób, aby można było w prosty sposób dołączyć kolejny, nie zakłócając w żaden sposób już istniejących (np. w sklepie internetowym dodać osobny pseudo-koszyk z obserwowanymi przedmiotami). Na poziomie szczegółów chodzi przykładowo o projektowanie z myślą o tym, aby nie zakładać maksymalnych rozmiarów jakichkolwiek list. Kto wie, czy jutro nie okaże się, że trzeba do nich dodać jeszcze jeden element.

Istotnym elementem jest architektura poszczególnych stron. Aby lepiej zwizualizować ten punkt, posłużę się przykładami z doświadczenia. Zajmowałem się swego czasu serwisem FotoForum.Gazeta.pl. Pracowałem wówczas z Tomkiem Bieniasem nad zmianą architektury kilku kluczowych stron serwisu, m.in. strony galerii. Ten typ stron zawierał z lewej strony dość spory, niezagospodarowany white-space. TB radził wówczas, by zostawić go w spokoju, bo być może jeszcze nam się przyda.  Niedługo potem okazało się, że myśląc o skalowalności miał rację. Kiedy parę miesięcy później wprowadzaliśmy funkcjonalność albumów, dzięki tamtej decyzji nie mieliśmy żadnych problemów z zaprezentowaniem ich na stronie użytkownika.

Fotoforum.Gazeta.pl - widok galerii zdjęć

Fotoforum.Gazeta.pl - widok galerii zdjęć

Innym przykładem jest serwis Auto-Świat.pl. Projektując go, długo zastanawiałem się nad wprowadzeniem stałej lewej kolumny na stronach artykułów. Było wiele za i przeciw. Jedną z kluczowych wad tego rozwiązania było to, że w chwili projektowania nie miałem treści, które mogłyby tę kolumnę wypełnić. Z myślą o skalowalności zostawiłem ją jednak w prototypie. Szybko okazało się, że to świetne miejsce zarówno dla kontekstowej nawigacji, autozarządzalnych boksów, treści sponsorowanych jak i reklam AdSense. Oczywiście gdybym nie zdecydował się zostawić miejsca z lewej strony, pewnie znalazłbym inny sposób na umieszczenie tych elementów. Musiałbym jednak poświęcić na to dużo więcej czasu. Zresztą nie tylko mojego. Zmiana wymagałaby także dodatkowej pracy grafików i IT. Koniec końców mogłoby wyjść z tego szpetne druciarstwo. Podobnego problemu starają się zresztą uniknąć producenci samochodów, umieszczając zaślepki w niektórych miejscach kokpitu, wiedząc, że użytkownik może chcieć coś tam wsadzić.

Auto-Świat.pl - strona artykułu. Z prawej makieta strony, z lewej działająca strona. W menu znajdują się teraz dodatkowe elementy.

Auto-Świat.pl - strona artykułu. Z lewej prototyp strony, z prawej działający serwis. W menu znajdują się teraz dodatkowe elementy.

2) Skalowalnośc w grafice jest trudna do osiągnięcia przede wszystkim dlatego, że jest to zagadnienie z pogranicza projektowania funkcjonalnego i graficznego. Wymaga też dbałości o detale. W konsekwencji potrzebna jest ścisła współpraca między projektantem a grafikiem. Zadaniem tego pierwszego jest powstrzymywanie nadmiernie artystycznych ciągot drugiego. Zadaniem drugiego jest wzbogacenie szaroburej (bo zakorzenionej w prototypach) wizji pierwszego. Aby zachować skalowalność trzeba pamiętać o uniwersalności rozwiązań. Warto ustalić pewien stylebook nagłówków, boksów, menusów i innych elementów, a potem mocno się go trzymać (polecam prezentacje o przebudowie systemu transakcyjnego Pekao24 zrealizowanej przez K2). To daje szansę utrzymać spójność i przejrzystość. Pracując z grafikiem, warto zwrócić uwagę na rozmaite podlewy, gradienty, zaokrąglone rogi czy odstępy między elementami. Oni je uwielbiają, a nie zawsze są potrzebne.

Dobrze zaprojektowanym serwisem pod względem skalowalności graficznej jest Forum.Gazeta.pl. Zazwyczaj kojarzy się z polityką i dość ciężkimi tematami. Jest jednak zrobione na tyle dobrze, że w prosty sposób można je dopasować właściwie do dowolnego otoczenia. Poza swoją główną instancją, Forum działa z lekko zmodyfikowanym css’em m.in. na takich stronach jak Kotek.pl (serwis dla nastolatek), Gamecorner.pl czy Lula.pl (serwis o modzie). I za każdym razem jest z nimi spójne.

Forum Gazeta.pl w czterech odsłonach: podstawowym oraz w serwisach Kotek.pl, Gamecorner.pl, Lula.pl

Forum Gazeta.pl w czterech odsłonach: podstawowym oraz w serwisach Kotek.pl, Gamecorner.pl, Lula.pl

Aby lepiej zrozumieć istotę skalowalności graficznej, warto porównać takie pary serwisów jak fotosik.pl z flickr.com, blip.pl z twitter.com czy nk.pl z facebook.com. Dość łatwo dostrzec, które z nich będzie łatwiej rozwinąć o nowe elementy.

3) Na skalowalność systemową składają się te rzeczy, które siedzą „pod maską” serwisu. Teoretycznie są niewidoczne dla użytkownika, ale konsekwencje zaniedbań w tych obszarach zazwyczaj mają bezpośredni wpływ na jego doświadczenie ze stroną. Chodzi przede wszystkim o szybkość wczytywania serwisu, elastyczność CMSa czy stabilność sesji.

Elastyczność CMSa ma największe znaczenie w serwisach kontentowych. Projektanci zazwyczaj mają wpływ na to, jakie możliwości będzie miał back office. Warto na samym początku przygotować się więc na rzeczy niecodzienne, np. dodając w serwisie newsowym możliwość stworzenia specjalnego main topica kiedy dzieje się coś nadzwyczajnego. W zwykłym serwisie tematycznym może być to z kolei możliwość redakcyjnego przygotowania dodatkowego modułu i osadzenia go przez redaktora na wybranych podstronach bez ingerencji zespołu IT. Nawet jeśli w momencie projektowania wydaje się, że jest to niepotrzebne, to lada dzień pojawi się artykuł lub cały dział, który będziemy chcieli zajawić w ponadstandardowy sposób na stronach serwisu.
Podobnie – choć z nieco innej strony – zachowują się producenci komórek. Zdarza się nierzadko, że hardware urządzenia oferuje więcej, niż jest w stanie obsłużyć software. Przykładowo telefon ma wbudowany czip radiowy, ale zainstalowany OS jeszcze nie umożliwia takiej funkcjonalności. Kiedy jednak system się rozwinie, wystarczy prosta aktualizacja, żeby zrobić prezent użytkownikom. Nikt nie będzie musiał wymieniać komórki.

Stabilność sesji z kolei ma szczególne znaczenie w serwisach społecznościowych lub transakcyjnych. Nie ma nic gorszego niż nieoczekiwane wylogowanie w czasie wykonywania przelewu czy pisania komentarza. Skalowalność systemowa może też oznaczać przenoszalność konkretnej webowej aplikacji (jak np. wspomnianego Forum).

Te elementy tylko pozornie nie leżą w gestii projektanta. Tak jak pisałem w notce o roli projektantów w strukturze korporacji, trzeba pamiętać, że wszystkie one mają ostatecznie wpływ na doświadczenie użytkownika, a na koniec dnia tylko projektant będzie się tym przejmował. Z tego powodu powinien to być – formalnie czy nie – obszar jego zainteresowań.

Efekty

Kiedy myślenie o skalowalności towarzyszy całemu procesowi projektowania, efekty pojawią się prędzej czy później. Poza pieniędzmi, zaoszczędzonymi zasobami i brakiem ryzyka, chodzi także o ogólne wrażenie artystyczne. Warto okiem projektanta spojrzeć na przykład na to, jak z reakcją na wydarzenia 10 kwietnia poradziły sobie największe portale. Przyglądając się screenom stron głównych widać, że najlepiej przygotowana od strony architektonicznej, graficznej i systemowej do obsługi tego, co się wtedy stało, była Gazeta.pl. Nie oznacza to, że jej zespół nie miał dużo pracy. Z pewnością miał, ale mógł się skupić na innych problemach niż te, z którymi mierzyli się wtedy inni wydawcy (jak zmienić kolor tła głównego boksu, jak go powiększyć, nie niszcząc układu strony, itp.). Warto zresztą przyglądać się na bieżąco jakie możliwości edycji strony głównej mają redaktorzy Gazety. To całkiem niezła inspiracja.

Strony główne portali po katastrofie prezydenckiego samolotu. Onet.pl, Interia.pl, Wp.pl, Gazeta.pl. Screeny pochodzą stąd: http://szydlo.eu/blog/portale-po-katastrofie-w-smolensku/

Strony główne portali po katastrofie prezydenckiego samolotu. Onet.pl, Interia.pl, Wp.pl, Gazeta.pl. Screeny pochodzą stąd: http://szydlo.eu/blog/portale-po-katastrofie-w-smolensku/

Strategia jest najważniejsza

W większości przypadków wysiłek włożony w myślenie o skalowalności z pewnością zwróci się już przy najbliższej modyfikacji strony. Długofalowo te korzyści będą stale rosnąć, powiększając przewagą konkurencyjną. Jednak jak ze wszystkim w życiu, tak i ze skalowalnością można przesadzić. Robiąc witrynę ogólnopolskiego dziennika trzeba myśleć o elastyczności serwisu w inny sposób niż kiedy chodzi o stronę z informacjami osiedlowymi. Przewidując zbyt wiele zaślepek, dodatkowych mechanizmów i możliwości, może się  okazać, że słono przepłacimy za projekt, a większości funkcjonalności i tak nigdy nie wdrożymy. Z tego powodu trzeba choćby mgliście znać strategię, aby wiedzieć, jak szerokiej skalowalności potrzebujemy. Rozległość elementów, które trzeba przemyśleć jest zależna od ambicji i celów serwisu, który projektujemy.  Rzeczywistość zazwyczaj jednak skrzeczy, a projektanci rzadko mają komfort w postaci wiedzy na temat długofalowej strategii swoich stron. Jeśli jej nie ma, trzeba zaufać wyobraźni, intuicji i zdrowemu rozsądkowi. Nic więc nie zastąpi doświadczonego projektanta. Jeśli takiego nie masz, pozostaje Ci zostać światłym menadżerem :-)

W tym temacie warto poczytać

Ten wpis umieszczono w kategorii projektowanie i otagowano jako , , . Możesz dodać go do zakładek permalink. Dodaj komentarz lub dodaj odpowiedź (trackback): Trackback URL.

5 Komentarze

  1. Opublikowano 25 listopada 2010 at 10:38 | Permalink

    Przyjemny artykuł, sporo pracy włożyłeś w przygotowanie.

  2. KubaM
    Opublikowano 30 listopada 2010 at 22:10 | Permalink

    Zasadniczo masz rację, w zasadzie ciężko się nie zgodzić, a podane przez Ciebie przykłady doskonale uzasadniają Twoją tezę. Brakuje mi tu jednak chociażby wspomnienia biznesu – bowiem jakim projektantem nie bylibyśmy (informacja, grafika, system), to wciąż jest tylko ‘usługa dla biznesu’ – projektant nie do końca jest osobą odpowiedzialną i władną podejmowania decyzji ‘co może się pojawić’. No i abstrahując od kwestii biznesowych jeżeli już decydujemy się na dywagacje czy coś się nam przyda, to natychmiast po tym powinniśmy zastosować ‘You Ain’t Gonna Need It’. Tutaj świetna odniesienie do serwisu osiedlowego – przewidywanie pewnych hipotetycznych funkcjonalności równie często powoduje oszczędności co generuje astronomiczne koszty.

    Skalowalność jest zacna, to dobrze gdy możemy łatwo dodać kolejny element (a nawet warstwę), którą niekoniecznie przewidzieliśmy taką możliwość już na etapie projektu. Przy każdym projekcie najbardziej właśnie obawiam się tych którzy mają ‘intuicję’ że to może się przydać, że zaraz to będziemy musieli wdrażać. Wtedy bardzo często musi przemienić się w mistrza mówienia ‘nie’ ;-)

  3. Opublikowano 1 grudnia 2010 at 08:45 | Permalink

    @KubaM
    Oczywiście zgadzam się z Tobą, że projektant pełni rolę usługodawcy w stosunku do biznesu i to nie po jego stronie leży decydowanie co się przyda, a co nie. W skalowalności nie chodzi jednak o robienie czegoś więcej niż oczekuje biznes. Nie ma sensu projektować dodatkowych funkcjonalności, jakichś nowych podstron, itp. W skalowalności chodzi wyłącznie o robienie miejsca na takie rzeczy w przyszłości. Zresztą nawet to powinno być konsultowane z biznesem. Projektant po prostu powinien zwrócić na to uwagę. Sensowny menadżer na pewno zrozumie ewentualne benefity.

    Granicą powinien być zawsze zdrowy rozsądek. Nie można dążyć do stworzenia super-skalowalnego systemu (chyba, że to cel biznesowy), bo wygeneruje to – tak jak napisałeś – astronomiczne koszty. Potrzebna jest taka skalowalność, która wystarcza dla realizacji strategii. A jeśli jej nie ma – cóż, to już kwestia intuicji i zdrowego rozsądku projektanta. Jeśli nie będzie doświadczony, może przesadzić w którąś ze stron (wygenerować ogromne koszty albo niedoszacować i zaprojektować zbyt sztywny serwis).

  4. huki
    Opublikowano 1 grudnia 2010 at 12:47 | Permalink

    „Kto nie planuje, ten planuje porażkę.”

    Bardzo dobrze napisany artykuł :)

    Myślę że dobrym przykładam ewolucji a nie rewolucji w projektowaniu jest przeglądarka Google Chrome.

    http://googlepolska.blogspot.com/2010/09/powrot-do-przyszosci-google-chrome.html

    Drobnymi kroczkami wprowadzono coraz to nowe funkcje i tak pojawiły się rozszerzenia a już niedługo nowy system operacyjny i to właściwie bez żadnych większych zmian. Dla kontrastu można przytoczyć rozwój Internet Explorer, który niedawno przeszedł rewolucję i wcisnął karty ze stronami tuż obok okienka z adresem strony. Z punktu widzenia tego artykułu może to być duży błąd ;)

    Pozdrawiam!

  5. Krzysztof
    Opublikowano 6 grudnia 2010 at 20:51 | Permalink

    Świetny artykuł

    Kolega powyżej porównał nową wersję IE do Google Chrome. Nie zgodzę się z tym.

    Załóżmy teraz sytuację iż korzystam z ww. przeglądarek na systemie operacyjnym Windows 7 i potrzebne do pracy średnio otwarte 37-40 kart. I na Chrome pojawia się problem. Nie dosyć że zakładki robią się szare to muszę czekać 0,5sek na podpowiedź co w danej zakładce się znajduje. Przy IE mam otwartych 11 reszta jest zawijana ale na Windows 7 mam jeszcze opcję podglądu z paska zadań (niestety przy Google Chrome opcja ta nie działa gdy strony otwarte są w nowych kartach a nie oknach). IE w tej samej sytuacji zachowuje się jakby otwierał karty w nowych procesach.

    W przypadku mniejszej ilości otwartych kart nie ma problemu na obydwu przeglądarkach. Skalowalność w Google Chrome jest nie do końca przemyślana. Pomijam oczywiście sytuacje iż obydwie przeglądarki mają problemy z niektórymi stronami. Osobiście zauważyłem iż Chrome ma problem w kilkoma ważnymi dla mnie stronami (i nie można powiedzieć iż strona zawiera coś oprócz tekstu)

Skomentuj

Twój adres email nie zostanie opublikowany i nie będzie rozpowszechniany. Wymagane pola są oznaczone *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>