Intencjonalne projektowanie

Wiele osób formując założenia projektu dodaje „innowacyjność”. Niestety kiedy przychodzi do projektowania strony internetowej, często są to równie piękne, co puste słowa. Stan faktyczny to neutralność i naśladowanie. U góry belka z logotypem po lewej i nawigacją po prawej. Poniżej wklej slider zawierający przypadkowe zdjęcia. Później dodaj blok tekstu, ewentualnie tryptyk z kolumn. Stopka, copyright, autor. O nas, galeria, kontakt z formularzem. Wszystko jak wyplute z automatycznego generatora. Bezmyślne kopiowanie zasłania prawdziwy potencjał.

Weryfikacja nawyków

Wiele błędów bierze się z przyzwyczajeń, które choć kiedyś miały swoje miejsce, z czasem przestają być użyteczne. Ciągle pojawiają się nowe możliwości, które zmuszają nas do zastanowienia nad utrwalonymi schematami.

Grafika na skróty

Jednym z najpoważniejszych błędów jest użycie „stockowych” fotografii. Nie mam nic przeciwko kupowaniu gotowych zdjęć celem uatrakcyjnienia strony, ale mało jest rzeczy które tak skutecznie rujnują wiarygodność marki jak obrazki, które już gdzieś się widziało.

Płaskie myślenie

Strona internetowa, to nie obrazek. Składa się na nią nie tylko tekst i oprawa graficzna, ale także sposób funkcjonowania. Wszystko od struktury nawigacji, przez ruch (animacje lub ich brak), po użyty język ma znaczenie.

Autoodtwarzanie

Dźwięk jest atrakcyjnym dodatkiem i kiedy to uzasadnione, powinno się go używać częściej. Dźwięk ma też bardzo konkretny wpływ na działanie użytkownika: odtwarzany bez ostrzeżenia prawdopodobnie spowoduje, że w panice opuści on stronę. Pamiętaj, że nie masz kontroli nad poziomem głośności, a stopniowe zwiększanie poziomu dźwięku może być jeszcze bardziej frustrujące. Żeby lepiej zrozumieć jak może poczuć się gość twojego serwisu, polecam poszukać John Cena Prank.

Trwa ładowan…

Nie znam praktycznego przypadku, w którym poprzedzenie strony głównej indykatorem wczytywania byłoby uzasadnione. Nawet przy dużej ilości interaktywnej treści można wyświetlić ten element na części ekranu i pokazać inne informacje (np. przy wczytywaniu modelu 3D).  Jeśli strona używa dźwięku i trzeba przed tym ostrzec użytkownika, o wiele lepszą opcją jest krótka animacja wyświetlająca przycisk odtwarzania. Ktoś ma inne sugestie? Czekam na komentarze i polecam wcześniejszy wpis o optymalizacji wczytywania stron internetowych.

Bez przesady

Schematy nie są złe. Pomagają nam szybciej i wygodniej dotrzeć do informacji. Zasady łam świadomie, bo inaczej wszystko co nieszablonowe stanie się bezużyteczne. Zamiast eksperymentować i szukać przełomowych technologii, lepiej skupić się na zasadności użycia typowych elementów.

Celowość

Mam nadzieję, że wyczerpująco opisałem problem. To jednak nie wszystko.

„Jeśli nie jesteś częścią rozwiązania, jesteś częścią problemu.”

Co w takim razie zmienić? W jaki sposób projektować intencjonalne, czyli innymi słowy przemyślane, celowe, zasadne strony i aplikacje? Wystarczy zacząć od podpowiedzi na kilka pytań.

  • Kim jest potencjalny użytkownik? – np. Co wie (o produkcie/firmie)?
  • Jakich informacji lub wrażeń szuka? – np. Numer telefonu? Data wydarzenia? Nowa muzyka?
  • Dlaczego (w jakim celu)? – np. Porównanie z konkurencją? Umówienie spotkania?
  • Gdzie (w którym miejscu) i w jaki sposób? – np. Na jakie miejsce zwróci uwagę? Stopka? Formularz? Z jakiego urządzenia korzysta?

Gęstość informacji

Jeśli potraktujemy przeczytanie, lub poświęcenie uwagi danemu elementowi jako wybór, warto zastanowić się ile danych strona internetowa lub aplikacja przekazuje użytkownikowi w konkretnym momencie. Kluczem jest efektywne wykorzystanie przestrzeni. W przypadku wersji mobilnej najważniejsza będzie nawigacja, za to przy dużej rozdzielczości monitorach nie należy zostawiać za dużo pustej przestrzeni, ale o tym innym razem.

Obowiązkowa lektura

Opracowując dzisiejszy tekst przygotowałem listę pojęć, na których temat warto uzupełnić swoją wiedzę. Część z nich już pewno znasz. Gwarantuję, że nawet podstawowe poznanie wypisanych terminów może radykalnie zmienić podejście do pracy.

  • Projektowanie kierowane wzrostem (Growth Driven Design)
  • Metodologia S.M.A.R.T.
  • Prawo Hicka (Hick’s law)
  • Zarządzanie wymaganiami
  • Metoda MoSCoW
  • Zasada Pareta