Archiwalia w kategorii 'usability'

Pinki, dziś opanujemy świat

Firma tworzy produkt. Produkt ma grupę docelową, jasno określony przedział zastosowań. Czasami ma również misję, cel swojego istnienia.

Tak było, kiedy zaczynałem pracę nad swoim autorskim narzędziem CMS, wego cms. Wego nie miało nazwy, tytułowało się zwyczajnie, Panelem Administracyjnym, wersja 1.0. Działało lepiej niż większość popularnych systemów, o niebo lepiej niż siermiężne paneliki pisane przed moim zatrudnieniem, pod każdego z klientów z osobna. Miało jeszcze jedną zaletę, było dobrze zaplanowane na poziomie kodu, zbudowane obiektowo, modularne i — co bardzo ważne — w żaden sposób nie ingerowało w wygląd serwisu, którym miało zarządzać.

Przez rok od momentu napisania pierwszej linii kodu, w projekcie wiele się zmieniło. Pojawiały się nowe funkcje, usprawnialiśmy poprzednie, poprawialiśmy czytelność kodu. Refaktoryzacje przechodziły falami, zmiany dotyczyły wszystkiego, od sposobu przekazywania danych pomiędzy poszczególnymi komponentami, przez zmiany w kodzie widgetów (panel — ze względu na szybkość rozwoju — nie operuje na kodzie HTML, zamiast tego budując interfejs za pomocą mechanizmu zagnieżdżanych kontrolek i kontenerów, wzorowanego na GTK+), aż do zmiany sposobu, w jaki serwis końcowy uzyskuje dostęp do danych. Ten ostatni element został doprowadzony do poziomu, gdzie całość strony powstaje z użyciem tylko i wyłącznie szablonów Smarty:

wego.pl - sample product page template
Przykład szablonu strony produktu w serwisie Dolnośląski Skarb

Przez cały czas, moim — jako początkowo autora, a później głównego programisty i Managera Projektu — celem było zbudowanie produktu, który coś wniesie na rynek podobnych rozwiązań. Wego jest jednym z najnowocześniejszych systemów zarządzania treścią, ale jednocześnie jest jednym z najprostszych i najwygodniejszych w obsłudze. Właśnie na tej prostocie mi szczególnie zależało i to ona do dzisiaj jest celem większości zmian w systemie. Wego miało być najlepszym sposobem na zarządzanie małym lub średnim serwisem.

Z drugiej strony, mój szef w wego dopatruje się tylko metody zarabiania pieniędzy. Zdaje się nie dostrzegać tego, że o sile produktu stanowi jego pozorne nieskomplikowanie. Moja kreatywna rola managerska sprowadza się więc ostatnimi czasy do dysponowania ticketami zgłaszanymi przez szefa. A są to głównie prośby o wstawienie więcej informacji, ograniczenie pustego miejsca, które można przecież jakoś zagospodarować i dodanie funkcjonalności, która — cytując nbwpozwoli nam na sprzedaż małym firmom narzędzia, które z powodzeniem mogłoby obsługiwać Bibliotekę Narodową.

Nie lubię sytuacji, kiedy ktoś jawnie mówi mi, że interes użytkownika stoi w konflikcie z interesem firmy, a my powinniśmy mieć narzędzie do wszystkiego. Paradoksalnie, niedawno zawitała do nas przedstawicielka handlowa jednego z konkurencyjnych systemów CMS i, zapytana o możliwości systemu, bez skrępowania powiedziała, że do większych wdrożeń polecają produkt konkurencji, z którą mają podpisaną umowę partnerską. Jak widać można, jeśli się tylko chce.

Pozostaje się tylko cieszyć, że podobnej wizji rozwoju produktu nie podzielają producenci samochodów, bo wtedy mielibyśmy do czynienia z terenowymi limo-busami rajdowymi na gąsienicach, które co prawda palą 100 litrów benzyny na 100 kilometrów, ale w razie powodzi świetnie radzą sobie jako amfibie.

Jak powinien wyglądać prosty CMS?

Nie jest to pewne, ale możecie zobaczyć, jak w tej chwili wygląda wego.pl, system, który razem z sit0 i nbw rozwijamy dla naszego pracodawcy — Internet Center Polska.

Przed wersją finalną pewnie jeszcze sporo się zmieni, mimo wszystko, zapraszam do oglądania wego.pl alpha preview.

Disclaimer: to nie jest oferta handlowa, publikuję to jako osoba prywatna, a całość jest w stadium rozwojowym i może się znacznie różnić od produktu końcowego.

Technorati Tags: , , , ,

For I am an expert

Na wstępie przepraszam za brak regularnych aktualizacji, ale życie zawodowe absorbuje mnie ostatnio znacznie, a i do nadchodzącego wydania webesteem art & design wypadało oddać teksty w rozsądnym terminie. Wobec tego, na twórczość blogową czasu pozostało niewiele.

Z ogłoszeń duszpasterskich, wypada dodać, że 10przykazan dorobiło się kilku poprawek. Przede wszystkim treści notek są czyszczone z kodu HTML i przycinane do rozsądnej długości skrótów, poprawiłem też nieprawidłowo wyświetlane stany subskrypcji na poszczególnych podstronach. Ale nie o tym chciałem pisać.

Nasz rodzimy guru do spraw designu, Riddle, popełnił wczoraj obszerną notkę na temat redesignu jednego z popularnych serwisów. Wybór nie był przypadkowy, padł bowiem na… serwis komiksowy Chomiks.com — witrynę niezwykłej wagi i szczególnie cenną dla rozwoju polskiej części Sieci. Błahy temat nie powstrzymał jednak komentującego od pastwienia się nad strony owej aspektami wszelakimi.

Klimat artykułu godny jest filmu Hitchcocka. Już na wstępnie atakuje nas wytłuszczony failed redesign, a potem napięcie tylko rośnie. Sypią się zarzuty, częściowo utrzymane w konwencji bo ja nie lubię zielonego, niebieskiego i fiołkowego — te kolory są takie nie-web2.0. I rogi nie wszystkie zaokrąglone. Katastrofa.

Ale, ale… Nasz wywiad donosi, że blog Riddla nie lepszy jest w pewnych względach, przeto, niczym Max Kolonko, postaram się prosto z frontu rozwiać wszelkie wątpliwości. Zaczynajmy więc, bowiem:

Design mojego bloga swego czasu został przyjęty bardzo gorąco (google -> site:riddle.jogger.pl R5), do tego nikt się mi nie skarżył, że coś niedomaga.

[…] a bloga tego czytają i komentują także designerzy […]

No to jazda, jak zwykli mawiać nasi odporni na cywilizację przyjaciele z Ekwadoru.

Nieprofesjonalny design Riddle’a

Kiedyś lubiłem czytać tego bloga. Czasem traktował o Sieci, czasem był zabawny, czasem zwyczajnie miło się przedzierało przez skrzętnie poskładane w zdania wyrazy. Od czasu redesignu, autor popadł w samozachwyt i postanowił wykreować się na autorytet. Mogło być nieźle — niestety — wszystko sprowadza się do jednego skrótu: WTF?

Poziom treści systematycznie spadał, do tego stopnia, że w czytaniu generowanej przez młodocianego czarodzieja blogosfery treści zaczął przeszkadzać layout. Prosiłem wielokrotnie i tłumaczyłem — bezskutecznie. Autorytet reprezentuje bowiem stanowisko niezachwiane, obiektywne i jedynie słuszne: mnie się podoba vel inni jakoś się nie skarżą.

Robię, bo się da

Design dla Sieci jest dziedziną sztuki użytkowej. Nie jest sztuką dla sztuki i podlega pewnym ograniczeniom, przynajmniej w teorii. Powinien podlegać, bo jak uczy codzienność, często projektanci zapominają o tym, że przejawy ich geniuszu służyć mają treści, która stanowi trzon i cel zarazem istnienia sieci WWW. Często dają się złapać na tym, że jeden gradiencik nie zaszkodzi, a kolejny fajny bajer może tylko podnieść atrakcyjność produktu. Bullshit.

Świetny przykład stanowią tu stałe elementy ekspozycji u Riddle’a. Nagłówek, który jak mniemam, w domyśle przywodzi pozytywne skojarzenia z wakacjami nad morzem, wygląda atrakcyjnie niczym zamarznięta płyta nagrobna z nałożoną teksturą zardzewiałego metalu. Wartości artystycznej oddać nie sposób, podobnie jak trudno doczytać się tam tytułu. Na szczęście, nie jest to specjalnie dokuczliwe…

Sponsorem sidebara jest mleko Białe

…w porównianiu z prawą kolumną. Ilekroć na nią spojrzę, mam wrażenie, że bezproduktywnie marnuje się trzecia część okna mojej przeglądarki. Zastosowanie niezwykle użytecznych zakładek (bo się dało) budzi pewne wątpliwości. Dla przykładu, żadnym sposobem nie można się dowiedzieć, która jest aktywna. Nie do końca jasne jest też wytłuszczenie z pozoru losowych literek w ich etykietach (oczywiście do momentu, kiedy jeden z drugim weteran sieci sprawdzą w kodzie, że chodzi o accesskey, który w każdym znanym mi systemie przyjęło się oznaczać podkreśleniem).

Prawa kolumna z pewnością nie jest przeznaczona do czytania. Najlepiej świadczy o tym dobór koloru i rozmiaru czcionki. Najbardziej widoczny element wystawy to nie do końca uzasadnione pomarańczowe gradienty na strzałkach (czyżby kierunek zwiedzania? Wszak serwis z pewnością odwiedzany jest przez ludzi różnych kultur, a w niektórych krajach przyjęło się przeglądać strony z dołu do góry) i zdjęcie autora. Dalej jest niewyraźna szara plama, poprzetykana nieśmiało nićmi morskich odnośników, nonszalancko powplatanych w treść minibloga (utrzymanego w klimacie serwisu newsowego).

The show must go on

Właściwą część witryny stanowią jednak notki. Udekorowane niczym choinka. Jeśli znajdziesz akapit, w którym żaden element nie reaguje na najmniejszy chociaż ruch myszy bądź przewinięcie strony, to daj nam znać, rodzina zaginionego będzie wdzięczna za każdą wskazówkę. Autor wyznaje bowiem filozofię, że do czytania tekstu używa się myszy, przesuwając kursor za punktem zogniskowania oczu.

Dlatego też przed lekturą ważne jest skoordynowanie ruchu prawej ręki ze skurczami mięśni gałek ocznych. W wypadku pozostawienia wrednego gryzonia samopas, najmniejsze przewinięcie strony wybucha feerią barw w przeciwległym rogu ekranu. Oto bowiem kursor myszy, niedbale porzucony w kącie biurka, natrafił właśnie na nową zabawkę. Czy będzie to paragraf z odnośnikiem, fragment kodu, czy lista wypunktowana? Los nie szczędzi niespodzianek.

Uwaga: producent bloga ostrzega, że długotrwała lektura bez nadzoru rodziców grozi atakiem epilepsji. W wypadku wystąpienia bólu głowy, przemyj usta wodą z mydłem.

Przyznaj Nobla!

Koniec notki wieńczą komentarze. Nie tak od razu. Wcześniej, w celu ułatwienia życia czytelników (którzy niewątpliwie dopatrzyli się w samej treści prawd objawionych), tuż pod każdym tekstem znajdują się odnośniki do dalszej promocji autora. Aż dziw, że żadna współczesna praca naukowa nie kończy się odnośnikami przyznaj Nobla, a sam raportów swych nie kończę słowami co uprawnia mnie do awansu i podwyżki.

Podsumowując

Pisać teksty w stylu Molly może każdy. Wady można wytykać, można sugerować poprawki, można wreszcie napisać paskudne kolory i basta. Żeby jednak robić to z takim przekonaniem i z pozycji autorytetu, nie wystarczy zrobić trumienkowatego designu dla serwisu blogowego, czy przygotować sobie kolorowego szablonu. Do tego trzeba cieszyć się nie lada respektem w środowisku, a tym pochwalić się — niestety — Riddle nie może. I nic dziwnego, bo potrzeba znacznie więcej niż dwa lata dostępu do Internetu, żeby w Sieci zacząć coś znaczyć.

Technorati Tags: ,

Przyprawy, czyli jak pieprzyć usability serwisu

W dzisiejszym odcinku Surfuj z Patrysem przygotujemy specjalny posiłek, potrawę rzadko spotykaną, choć tradycja przyrządzania jej nie umarła przez lata i kultywowana jest do dzisiaj.

Niezbędne składniki to:

  • 1 grafik,
  • 1 koder,
  • 1 opiekun projektu,
  • 1 klient,
  • 1 zlecenie

Pierwszą czynnością jest zlecenie przez opiekuna grafikowi wykonanie projektu graficznego. Marka grafika nie gra roli, z braku wirtuoza pędzla na miarę Kossaka, można użyć powszechnie dostępnego studenta. Grafika należy dusić powoli przez dwa tygodnie, aż projekt nabierze pożadanej miękkości i klient zgodzi się go zaakceptować.

Po akceptacji projektu, opiekun przekazuje efekt pracy grafika koderowi z nakazem wiernego odwzorowania szablonu w języku HTML. Silny nacisk musi tutaj zostać położony na wierność, prace powinny skoncentrować się na tym, żeby zrzut ekranu wykonany w dowolnej przeglądarce co do piksela pasował do projektu, który klient zaakceptował. Kodera, który to usłyszy, opiekamy, aż zacznie skwierczeć i w końcu wydusi z siebie szablony gotowe do podłączenia pod CMS.

Następnie pozwalamy opiekunowi projektu dokładnie zweryfikować zgodność realizacji z plikami Photoshopa, dostarczonymi przez grafika. Poprawiamy miejsca, w których poszczególne boksy są wyższe o piksel i czekamy na moment, kiedy opiekun odkryje, że kliknięcie na dowolny odnośnik bądź przycisk powoduje pojawienie się bliżej niezidentyfikowanej ramki (dla uproszczenia będziemy ją dalej nazywać focus ring, choć jej geneza jest nieznana i wskazuje na wewnętrzny błąd w każdej z przeglądarek).

Po krótkim okresie paniki, która następnie przeradza się w ślepą furię, odczekujemy, aż potrawa nieco ostygnie i pozwalamy opiekunowi projektu zlecenie pilnego skorygowania tak poważnej usterki. Podpowiadamy mu także, że szybkie przejrzenie Google zwróciło idealne rozwiązanie — do każdego elementu na stronie wystarczy dokleić onfocus="blur();".

Do smaku można koderowi przysolić, bądź zagrozić wypieprzeniem. Po wdrożeniu, podawać na ciepło, nie odgrzewać.

Technorati Tags: , , , ,

GeneratedContent update

Nie umarliśmy i mamy się całkiem dobrze. Chwilowy brak aktywności zrzucić można na barki kilku zmian, jakie zaszły w ciągu tego miesiąca.

Przede wszystkim, od dwóch tygodni jestem szczęśliwym posiadaczem GNOME 2.14.

Gnome 2.14 powered by Xgl

Nie o tym miałem pisać. Kilka osób już wie, że jedna z osobistości polskiej geekowej blogosfery, nbw, został przeze mnie ściągnięty z Warszawy do Wrocławia i obecnie pracuje jako manager projektów klienckich dla Internet Center Polska, mojego pracodawcy. W związku z przeprowadzką, o której nbw już pisał, wynajęliśmy wspólnie mieszkanie.

Chwilowo przypada nam po około 36 metrów kwadratowych na głowę, co prezentuje się całkiem nieźle, jednak do pełnej przeprowadzki potrzebuję jeszcze kilku mebli. Zdjęcia pojawią się niedługo, wszystkie znaki na niebie i ziemi zdają się wskazywać, że najbliższy weekend upłynie nam pod znakiem parapetówy. Liczymy tylko na to, że uda się do tego czasu podłączyć sieć.

Ja w międzyczasie zostałem managerem projektu autorskiego systemu CMS, który całkiem niedługo ma szansę pokazać się szerokiej publiczności. Z tej okazji na pokładzie powitaliśmy też sit0, szalonego programistę, który to hostował imprezę w ostatni weekend.

Zasilony świeżą siłą zespół raźnie brnie przez pełne problemów pola oprogramowania i z niebywałym dotąd impetem usuwa z listy TODO kolejne zadania na Basecampie. Wydatnie pomaga nam w tym Elsindel z załogi Janmedia Interactive, który jako specjalista od użyteczności opracowuje dla nas szczegółowe listy poprawek.

I tym optymistycznym akcentem kończę. Z placu boju mówił dla Państwa Patryk Zawadzki, korespondent GeneratedContent.com. Czytał Jacek Szydłowski.

Technorati Tags: , , ,

Chcę!

Czy mam wygodne biurko? Biurko jak to biurko, cztery deski na krzyż. Do tego rozklekotany fotel na kółkach — syn doktora Frankensteina, bo zmontowany z resztek trzech martwych poprzedników. Kto mi ufunduje nowe miejsce do pracy?

Technorati Tags: , , ,

GNOME Launch Box

Rasheed dzisiaj pisał o Katapult - klonie macowego Quicksilvera pod KDE. Użytkownicy GNOME nie są w gorszej sytuacji - dla nich rozwijany jest projekt GNOME Launch Box.

GNOME Launch Box

Idea programu jest prosta - zamiast korzystać z menu, przyciskasz zdefiniowaną wcześniej kombinację klawiszy i zaczynasz pisać. Program w locie dopasowuje dostępne w menu programy, pliki wykonywalne ze ścieżki systemowej, kontakty z klienta poczty i pliki z pulpitu i listy ostatnio używanych. Wybranie któregoś za pomocą strzałek i zatwierdzenie klawiszem ENTER powoduje wywołanie domyślnej akcji (podana w okienku po prawej).

Technorati Tags: , , ,

Nie buduj oprogramowania od końca

Programiści są leniwi, klienci też — nie chce im się skarżyć na interfejs. Zaczynaj budowanie aplikacji od interfejsu, a nie od warstwy funkcjonalnej. I rób to z głową.

Przykładem jest system płatności online Protx, który podłączamy właśnie do serwisu jednego z klientów. Po przejściu do formularza dokonywania płatności, naszym oczom ukazuje się okienko z napisem credit card number, enter without the spaces. Jeśli projektant tego systemu wiedział doskonale, że wszystkie numery kart kredytowych posiadają separatory w postaci spacji lub myślników, to czemu kazać je usuwać użytkownikowi, zamiast wyczyścić je po stronie serwisu?

To wzorcowy przypadek zwalania pracy na użytkownika w sytuacji, w której komputer poradziłby sobie znacznie lepiej. Wpisywanie numeru karty bez separatorów powoduje też, że łatwiej o błąd — cyfry nie są pogrupowane i łatwo przeoczyć pomyłkę.

Jeśli masz zamiar oczekiwać od użytkownika wprowadzenia jakichś danych, to zrób co w twojej mocy, żeby przyjąć możliwie dużo popularnych formatów. Powyższy przykład jest o tyle idiotyczny, że na samej karcie numer zawiera spacje, a system wymaga wpisania go w zupełnie nietypowym formacie.

Technorati Tags: , , , , ,

Opera i popularność

Idąc śladem Riddle’a, który słusznie zauważył, że Operze daleko do popularności Firefoksa, postanowiłem na przekór wszystkim (jestem wszak użytkownikiem Firefoksa) popromować Operę. Dlaczego by nie? Wszak przeglądarka jest solidnie zbudowana i rozwija się bardzo dynamicznie. Jest tylko jeden problem, przystosowanie użytkowników do jej używania.

Opera jest jak limuzyna, oprócz siedzenia i pasów ma też barek, elektryczne szyby i odtwarzacz ze zmieniaczem na 60 kompaktów. Podobnie jak, zmarły już, Mozilla Suite, brakuje jej jedynie zlewu kuchennego (choć Mozilla się takowego dorobiła dwa lata temu). Nie jestem fanem kombajnów do wszystkiego, ale jeśli zignorować nieużywane komponenty, to pozostaje nadal lekką przeglądarką.

Główny problem z nią polega na tym, że domyślnie, zaraz po instalacji, jest paskudna. Od razu rzucają się w oczy wzięte żywcem z Windows XP niebieskie nagłówki zakładek. Dodatkowo, po kliknięciu w pasek adresu wyskakuje bez uprzedzenia dodatkowy zasobnik z narzędziami. Dziwi również kolejność pasków i umieszczenie zakładek pod samym paskiem menu. Jest to oczywiście poprawne z logicznego punktu widzenia, bo wszystkie przyciski poniżej odnoszą się do aktualnej zakładki, ale zupełnie sprzeczne z przyjętymi w programach komputerowych konwencjami.

Dlatego też uważam, że jedyne, co trzeba zrobić do szerszego rozpromowania Opery, to przejście z:

Free Image Hosting at www.ImageShack.us

Na układ nieco bardziej przyjazny dla użytkowników:

Free Image Hosting at www.ImageShack.us

Nie każcie mi czytać bzdur

Różne programy mają masę problemów z interfejsem, ale te bolesne i podstawowe powtarzają się nader często. To samo tyczy się też po części serwisów WWW i aplikacji internetowych.

Przede wszystkim, nikt nie chce być informowany o wszystkim. Jasne, nie mam nic przeciwko komunikatom lecącym na konsolę - są bardzo pomocne, kiedy coś przestaje działać, ale - do jasnej cholery - nie chcę widzieć okna dialogowego z informacją, że program chce pisać pod adresem 0xDEADBEEF i przyciskiem Ok, mam to gdzieś. Jest tylko jedna rzecz, która mogłaby mi bardziej zepsuć przyjemność z używania aplikacji - pytanie mnie o zgodę przy każdej takiej czynności. Jeśli programu mają używać ludzie, to niech autor przyjmie sensowne wartości domyślne. Zwykłego użytkownika nie obchodzi, jak program działa i do czego próbuje uzyskać dostęp, nie bawi go zabawa z certyfikatami SSL i ma generalnie w dużym poważaniu wszystko, co nie jest oczekiwanym efektem końcowym.

Jeśli nagrywam płytę, to nie chcę wiedzieć, że jakiś bufor się napełnił. Jeśli słucham muzyki, to nie interesuje mnie pomyślne odnalezienie tagów z danymi autora i tytułem piosenki. Podobnie, jak jadąc samochodem nie chcę być informowany o pomyślnej zmianie biegów. Jasne, powiadom mnie o czymś, co trwa niesamowicie długo (dla typowego użytkownika niesamowicie oznacza wszystko powyżej kilku sekund), ale zrób to w tym samym oknie, które pokazuje pasek postępu operacji (albo throbber, ale o tym napiszę kiedy indziej).

Jeżeli masz jednak bardzo dobry powód, by pokazać mi wyskakujące okienko, to - u licha - nie czyń go modalnym. Wyobraź sobie, że jedziesz sobie właśnie rowerem, kiedy to na środku ulicy wyskakuje ci okienko z informacją o tym, że przejechany dystans sugeruje wizytę w przeglądzie. Zasłania kierownicę i blokuje hamulce. Nadjeżdżająca z naprzeciwka ciężarówka z pewnością mobilizuje cię do dokładnego zapoznania się z komunikatem przed jego zamknięciem.

Tu pojawia się inna kwestia - skoro pokazujesz mi tyle wyskakujących komunikatów, że na ich zamykaniu spędzam niemal tyle czasu, co na właściwej pracy, to jak u licha wyłowię spośród nich te ważne? Czytanie wszystkich nie wchodzi w grę, a autorzy uwielbiają wręcz nadawać przyciskom wiele mówiące etykiety: OK i Anuluj. Widać umieszczenie tam napisów Zapisz i Porzuć zmiany wymaga nieprzebranych lat studiów w dziedzinie HCI.

Update: zapomniałbym o moim ulubieńcu. Pochodzenia już sobie nie przypomnę, ale któryś program obdarzył mnie takim oto komunikatem: Czy jesteś pewien, że nie chcesz zapisać zmian? Ok; Anuluj.