Archive for the ‘UI’ Category

Czy Webdeweloper może ignorować IE — może!

28 Wrzesień 2009

Wprowadzenie

Oglądałem ostatnio zdjęcia w serwisie Flickr.

Przyglądałem się funkcji komentowania zdjęć i zauważyłem zaokrąglone rogi przycisków Preview i Save Comment oraz okna z wyjaśnieniami How do I format my comment?

Jako człek ciekawy, sprawdziłem jakiej to metody użyli programiści Flickr.com, aby uzyskać efekt zaokrąglonych rogów…

Zaokrąglone rogi w serwisie Flickr.com

Jest wiele metod (bazujących na miksie tabel i obrazków) uzyskania efektu zaokrąglonych rogów — większość to, moim zdaniem, doskonałe przykłady przerostu formy nad treścią.

Programiści Flickr.com zrobili to, moim zdaniem, niezwykle elegancko. Użyli styli CSS -moz-border-radius, które działają we wszystkich nowoczesnych przeglądarkach (Firefox, Chrome, Safari, Opera) poza…, a jakże, Internet Explorer-em — każdym :(.

flickr.com

Zaokrąglone rogi w serwisie Flickr.com

Podsumowanie

Dzięki prostemu rozwiązaniu działającemu w oparciu o style CSS, można osiągnąć ten miły dla oka i mózgu efekt niewielkim nakładem pracy i — co o wiele ważniejsze — bez rozdmuchiwania kodu HTML i rozmiaru przesyłanej strony.

Flickr.com i Yahoo pokazały też, że można zignorować niedostatki przeglądarki Internet Explorer, dzięki czemu zyskują:

  1. Użytkownicy innych przeglądarek — bo strony ładują im się szybciej,
  2. Programiści — bo mają kod prostszy do napisania i utrzymania,
  3. Testerzy — bo przyciski są standardowe i standardowo działają (fokus, zatwierdzanie klawiszem Enter i Spacja).

Słowny paging — wymóg ustawowy, czy fantazja progamistów?

10 Luty 2009

Wpadłem dziś na serwis KRS wyszukiwarka podmiotów w KRS.  Moją uwagę zwróciła nawigacja, a konkretnie tzw. paging, który tutaj jest… słowny.

Zrzut ekranu poniżej:

KRS paging

KRS online słowny paging

I tak mnie zastanawia — czy to wymóg ustawowy, czy ułańska fantazja programistów?

UI. Deutche Bank. Uzupełnienie

1 Październik 2008

Trzy miesiące temu pisałem o systemie dostępu do konta przez internet w Deutche Bank PBC S.A. — usługę db easyNET.

Wczoraj w skrzynce pocztowej znalazłem pismo z informacją o wdrożeniu nowej wersji systemu easyNET, a w nim, między innymi:

  • Prezentację waluty rachunku i dostępnego salda w momencie wybierania rachunku do obciążenia,
  • Całkowicie nowy sposób prezentowania informacji na ekranie.
  • Zdecydowanie szybszy czas realizacji zleceń i odświeżania danych.

Wydawało mi się, że nikt tego nie czyta, a tutaj proszę :)…

UI. Deutche Bank. Część druga, ostatnia

2 Lipiec 2008

W pierwszej części opisałem drogę do poznania wysokości salda i wolnych środków na rachunku prowadzonym przez Deutche Bank PBC S.A.

W części drugiej przejdziemy długą drogę od pomysłu ,,zapłacimy rachunek przez internet z db easyNET” do zlecenia przelewu.

Po zalogowaniu -- Jak zrobić przelew?

Z części pierwszej pamiętamy, że mamy wolne środki, możemy więc zlecić przelew. Po chwili wahania (jak zrobić przelew?) wybieramy opcję Twoje konto i już po chwili wiemy, że to był… krok w dobrym kierunku…

Sekcja Twoje Konto/Przelewy -- nadal nie można zlecić przelewu

OK. Jest opcja Przelewy, wybieramy ją, jest opcja Przelew zwykły (bank uprzejmie cały czas nas informuje co możemy po każdym wyborze zrobić – może przydałby się fikuśny wizard aby powiedzieć biednemu użytkownikowi, ile jeszcze kroków go czeka, aby móc wypełnić polecenie przelewu?).

OK. Mamy formularz Przelewu zwykłego. Formularz poza takimi oczywistymi oczywistościami jak komu, ile i za co pozwala wybrać też numer rachunku — niestety nie informuje, który rachunek jest który, ba, nie informuje nawet w jakiej walucie ten rachunek jest prowadzony…

Podstawowe informacje o rachunku -- widać ujemne saldo i większe od zera wolne środki

OK. Wycofujemy się. Wybieramy kolejno: Twoje konto, Stan rachunków, zapisujemy numer rachunku i wracamy do przelewu: Twoje konto, Przelewy, Przelew zwykły. Wypełniamy formularz, wybieramy rachunek do obciążenia i gotowe — przelew zlecony.

Pozostaje sprawdzić, czy przelew wyszedł.

Tego co teraz napiszę, w wersji demo nie da się zobaczyć, ale naprawdę tak jest, a przynajmniej było pół roku temu.

Oto historia, która bezpośrednio pchnęła mnie od opisania systemu db easyNET.

Nadszedł dzień bardzo ważnego przelewu. Pierwsza sesja ELIXIR wyszła, jest 9.30 rano. Upewniam się, czy mój bardzo ważny przelew wyszedł: Twoje konto, Stan rachunków — ooops, saldo bez zmian.

OK. Sprawdzam historię rachunku — wybieram rachunek, wybieram Aktualizuj, przelewu nie ma i tutaj. Dla pewności zmieniam datę do na jeden dzień w przód. Przelewu nadal nie ma. Oj, niedobrze…

Sprawdzam przelewy oczekujące (może nie wysyłają przelewów pierwszą sesją?). Wybieram kolejno: Twoje konto, Zlecenia oczekujące, Przelewy zwykłe (dlaczego Zlecenia stałe są pierwsze?). Przelewu nie ma…

Jak powiedziano mi w Infolinii — ta zadziała doskonałe (pani z Call Center znalazła i docisnęła techników i oddzwoniła z wyjaśnieniami) — dane w serwisie są aktualizowane po zaksięgowaniu sesji — czyli po paru godzinach. A w międzyczasie przelewy wyszły i ich nie ma…

Dla wyjaśnienia — podstawowe konto mam w innym popularnym banku — może przyzwyczajałem się do innego interfejsu i stąd moje problemy, ale mam wrażenie, że nie…

Czekam na opinie.

UI. Deutche Bank. Część pierwsza

30 Czerwiec 2008

Deutche Bank PBC S.A. oferuje, jak wiele banków, internetowy dostęp do konta — usługę db easyNET.

Usługa ta jest bardzo daleka od ideału… Warto skorzystać z demo, aby przeżyć to na własnej skórze.

Problemy zaczynają się już przy logowaniu. Brak blokady uzupełniania wartości pół (atrybut autocomplete z wartością off w HTML-u), powoduje, że numer identyfikacyjny klienta i numer karty raz wpisane pozostają w przeglądarce, w praktyce, na wieki.

Do odgadnięcia ciekawskiemu (np. praktykantowi z ABC) zostaje numer PIN.

Fakt, ułatwia to logowanie, ale chyba nie o to chodzi…

Po udanym logowaniu widzimy dumny napis:

Redirecting in progress, please wait…

However if you are not redirected to the requested page for a while, click here

Kogo to interesuje? I dlaczego bank zakłada, że wiem co znaczy redirect, requested page i całe to zdanie w ogóle! Nie ma co, to jakiś większy haker musiał napisać…

Co zobaczymy po zalogowaniu? Ekran powitalny i zero użytecznych informacji…

Po zalogowaniu -- brak jakichkolwiek użytecznych informacji

A co możemy zrobić?

Możemy sprawdzić saldo — wybieramy Twoje konto:

Sekcja Twoje Konto -- i zero informacji o rachunkach

następnie Stan rachunków:

Stan rachunków -- widać ujemne saldo

i już po dwóch ,,klikach” możemy zobaczyć ile pieniędzy nam zostało (jak się później okaże nie do końca).

Możemy też zobaczyć historię operacji na rachunku (to już nie jest banalne).

Mi chwilę zajęło, zanim dostrzegłem, że numer rachunku to link, na który można kliknąć. Widzimy informacje o rachunku, w tym saldo i wolne środki — okazuje się, że jednak mamy jeszcze jakieś pieniądze do wydania.

Podstawowe informacje o rachunku -- widać ujemne saldo i większe od zera wolne środki

Następnie dostrzegamy (bo jesteśmy uważnymi obserwatorami) nagłówek Historia rachunku, wybieramy interesujący nas zakres (nigdy nie rozumiałem, dlaczego mam pamiętać kiedy się ostatnio logowałem) i wybieramy Aktualizuj — doskonała etykieta, ciekawe co zaktualizujemy? Oby nie dane o wolnych środkach.

I już wiemy co się ostatnio wydarzyło. Tyle w temacie ,,stan rachunków”. Koniec części pierwszej.

Top posting i Gazeta Wyborcza

20 Październik 2007

Top posting, czyli zmora elektronicznej komunikacji zawitał do internetowego wydania Gazety Wyborczej. Gazeta.pl od pewnego czasu relacjonując zdarzenia relacjonuje je od końca — ostatnio robi tak z debatami polityków, ale wcześniej było tak z relacją z eksmisji Betanek z klasztoru w Kazimierzu Dolnym, czy z relacją z rozwiązania Sejmu V kadencji.

Może tylko ja tak mam, ale tego się nie da czytać! Jaki jest sens publikowania informacji w kolejności: komentarz do odpowiedzi, odpowiedź, pytanie?

Gazeta! Czy Wy wszystko czytacie od tyłu?

Aż boję się pomyśleć od czego zacznie się relacja z meczu finałowego Euro 2012…

Fantastyczny blog dziś znalazłem, czyli UI Design

23 Wrzesień 2007

W ramach wieczornego (bo Wiosna padła o 19!) przeglądania nowych wiadomości w czytniku RSS zajrzałem na WebUsability.pl, przeczytałem ostatnie wpisy, w tym ten o wnioskach z projektu Blogfrog.pl. Obserwacje są ciekawe — też mam wrażenie, że wiki to doskonały sposób na zarządzanie dokumentacją projektu — prosty, szybki, łatwo dostępny i zapewniający dokumentowanie zmian — czyli wszystko czego potrzeba, aby projekt nie utknął na formatowaniu tabelek w Wordzie :).

Po lekturze wpisu zajrzałem na stronę projektu Blogfrog.pl — strona ma miły dla oka wygląd, choć, jak dla mnie, to trochę za dużo informacji jest pokazane na stronie głównej.

Ale do rzeczy — w oknie ,,Najpopularniejsze blogi” dostrzegłem blog UI Design — jest nawet wyżej niż doskonały blog Alexa. Zajrzałem i nie pożałowałem.

Przeczytałem większość wpisów jednym ciągiem — już dawno nie zdarzyło mi się, żeby blog lub informacja na stronie WWW tak mnie zaciekawiła.

Marek nie tylko rzeczowo opisuje problemy projektowania interfejsu użytkownika, ale też metody i narzędzia, które ułatwiają projektowanie dobrego UI.

Dobrze jest przeczytać, a nawet zobaczyć w akcji coś na temat ,,paper prototyping”, czy przeczytać o polecanych narzędziach do prototypownia.

Warto też przeczytać schematach kolorystycznych i dobieraniu kolorów na stronach WWW oraz ich wpływie na zachowanie użytkownika.

I tylko jednego nie rozumiem — dlaczego czytając archiwalne wpisy, nie ma możliwości powrotu do strony głównej? To jakiś konkurs pt. ,,znajdź błąd na mojej stronie”?

Marek — doskonała robota! Gratuluję!